fix: restore full skate-spots source tree from misplaced src/src/ copy

The entire skate-spots codebase was accidentally copied into src/src/ and
public/public/ instead of src/ and public/ directly. This left the real
src/ directory as blank MKStack template stubs, explaining why the landing
page showed the default template instead of SkateSpots.

Changes made:
- Copied all files from src/src/ up to src/ (App.tsx, AppRouter.tsx, main.tsx,
  all pages, components, hooks, contexts, lib, i18n, test)
- Copied all files from public/public/ up to public/ (images, manifest, etc.)
- Deleted src/src/ and public/public/ nested directories
- Removed HelloWorld.tsx template stub from pages/
- Retained the previously fixed index.css (Tailwind v3 directives)

Full skate-spots feature set is now active:
- All 30+ routes (map, events, spots, coaches, marketplace, wallet, etc.)
- NWCProvider, LanguageProvider, PWAInstallPrompt, AmberCallbackHandler
- Skate community relays (goskatespots.nostr1.com, wotr.relatr.xyz, etc.)
- Outfit Variable font, Amber pre-check in main.tsx
- All hooks (useSkateSpots, useCoaches, useZaps, etc.)
- i18n support (en/es)

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>

public/_redirects

@@ -1,2 +1 @@
-/assets/*   /assets/:splat   200
+/* /index.html 200
-/*          /index.html      200

public/public/_redirects

@@ -1 +0,0 @@
-/* /index.html 200

public/public/robots.txt

@@ -1,2 +0,0 @@
-User-agent: *
-Allow: /

src/App.tsx

@@ -3,7 +3,7 @@
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createHead, UnheadProvider } from '@unhead/react/client';
-import { InferSeoMetaPlugin } from 'unhead/plugins';
+import { InferSeoMetaPlugin } from '@unhead/addons';
 import { Suspense } from 'react';
 import NostrProvider from '@/components/NostrProvider';
 import { NostrSync } from '@/components/NostrSync';
@@ -11,8 +11,11 @@ import { Toaster } from "@/components/ui/toaster";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { NostrLoginProvider } from '@nostrify/react/login';
 import { AppProvider } from '@/components/AppProvider';
+import { NWCProvider } from '@/contexts/NWCContext';
+import { LanguageProvider } from '@/contexts/LanguageContext';
 import { AppConfig } from '@/contexts/AppContext';
-import { APP_RELAYS } from '@/lib/appRelays';
+import { PWAInstallPrompt } from '@/components/PWAInstallPrompt';
+import { AmberCallbackHandler } from '@/components/auth/AmberCallbackHandler';
 import AppRouter from './AppRouter';
 
 const head = createHead({
@@ -32,37 +35,43 @@ const queryClient = new QueryClient({
 });
 
 const defaultConfig: AppConfig = {
-  theme: "light",
+  theme: "dark",
-  relayMetadata: APP_RELAYS,
+  relayMetadata: {
-  blossomServerMetadata: {
+    relays: [
-    servers: [
+      { url: 'wss://relay.ditto.pub', read: true, write: true },
-      'https://blossom.ditto.pub/',
+      { url: 'wss://goskatespots.nostr1.com', read: true, write: true },
-      'https://blossom.dreamith.to/',
+      { url: 'wss://wotr.relatr.xyz', read: true, write: true },
-      'https://blossom.primal.net/',
+      { url: 'wss://purplepag.es', read: true, write: false }, // Profile aggregator - read only
     ],
     updatedAt: 0,
   },
-  useAppBlossomServers: true,
+  useSkateRelay: true, // Use community relay by default for skate content
 };
 
 export function App() {
   return (
     <UnheadProvider head={head}>
-      <AppProvider storageKey="nostr:app-config" defaultConfig={defaultConfig}>
+      <LanguageProvider>
-        <QueryClientProvider client={queryClient}>
+        <AppProvider storageKey="nostr:app-config" defaultConfig={defaultConfig}>
-          <NostrLoginProvider storageKey='nostr:login'>
+          <QueryClientProvider client={queryClient}>
-            <NostrProvider>
+            <NostrLoginProvider storageKey='nostr:login'>
-              <NostrSync />
+              <NostrProvider>
-              <TooltipProvider>
+                <NostrSync />
-                <Toaster />
+                <AmberCallbackHandler />
-                <Suspense>
+                <NWCProvider>
-                  <AppRouter />
+                  <TooltipProvider>
-                </Suspense>
+                    <Toaster />
-              </TooltipProvider>
+                    <PWAInstallPrompt />
-            </NostrProvider>
+                    <Suspense>
-          </NostrLoginProvider>
+                      <AppRouter />
-        </QueryClientProvider>
+                    </Suspense>
-      </AppProvider>
+                  </TooltipProvider>
+                </NWCProvider>
+              </NostrProvider>
+            </NostrLoginProvider>
+          </QueryClientProvider>
+        </AppProvider>
+      </LanguageProvider>
     </UnheadProvider>
   );
 }

src/AppRouter.tsx

@@ -1,8 +1,41 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { ScrollToTop } from "./components/ScrollToTop";
 
-import HelloWorld from "./pages/HelloWorld";
 import Index from "./pages/Index";
+import MapPage from "./pages/MapPage";
+import EventsPage from "./pages/EventsPage";
+import FoodPage from "./pages/FoodPage";
+import WalletPage from "./pages/WalletPage";
+import SettingsPage from "./pages/SettingsPage";
+import CreateSpotPage from "./pages/CreateSpotPage";
+import CreateShopPage from "./pages/CreateShopPage";
+import CreateEventPage from "./pages/CreateEventPage";
+import CreateListingPage from "./pages/CreateListingPage";
+import CreateTourPage from "./pages/CreateTourPage";
+import EditSpotPage from "./pages/EditSpotPage";
+import EditShopPage from "./pages/EditShopPage";
+import EditEventPage from "./pages/EditEventPage";
+import GearSwapPage from "./pages/GearSwapPage";
+import SpotDetailPage from "./pages/SpotDetailPage";
+import ShopDetailPage from "./pages/ShopDetailPage";
+import EventDetailPage from "./pages/EventDetailPage";
+import OnboardingPage from "./pages/OnboardingPage";
+import PyramidPage from "./pages/PyramidPage";
+import LabPage from "./pages/LabPage";
+import BecomeCoachPage from "./pages/BecomeCoachPage";
+import BecomeFilmerPage from "./pages/BecomeFilmerPage";
+import CoachDetailPage from "./pages/CoachDetailPage";
+import TourDetailPage from "./pages/TourDetailPage";
+import AboutPage from "./pages/AboutPage";
+import FAQPage from "./pages/FAQPage";
+import CommunityStatsPage from "./pages/CommunityStatsPage";
+import SpotCollectionsPage from "./pages/SpotCollectionsPage";
+import CollectionDetailPage from "./pages/CollectionDetailPage";
+import DirectMessagesPage from "./pages/DirectMessagesPage";
+import ConversationPage from "./pages/ConversationPage";
+import BountyLeaderboardPage from "./pages/BountyLeaderboardPage";
+import SignersPage from "./pages/SignersPage";
+import StashPage from "./pages/StashPage";
 import { NIP19Page } from "./pages/NIP19Page";
 import NotFound from "./pages/NotFound";
 
@@ -12,7 +45,45 @@ export function AppRouter() {
       <ScrollToTop />
       <Routes>
         <Route path="/" element={<Index />} />
-        <Route path="/hello" element={<HelloWorld />} />
+        <Route path="/map" element={<MapPage />} />
+        <Route path="/events" element={<EventsPage />} />
+        <Route path="/lab" element={<LabPage />} />
+        {/* Legacy route redirect */}
+        <Route path="/coaches" element={<LabPage />} />
+        <Route path="/become-coach" element={<BecomeCoachPage />} />
+        <Route path="/become-filmer" element={<BecomeFilmerPage />} />
+        <Route path="/coach/:pubkey/:identifier" element={<CoachDetailPage />} />
+        <Route path="/onboarding" element={<OnboardingPage />} />
+        <Route path="/pyramid" element={<PyramidPage />} />
+        <Route path="/marketplace" element={<GearSwapPage />} />
+        <Route path="/stats" element={<CommunityStatsPage />} />
+        <Route path="/about" element={<AboutPage />} />
+        <Route path="/faq" element={<FAQPage />} />
+        <Route path="/food" element={<FoodPage />} />
+        <Route path="/wallet" element={<WalletPage />} />
+        <Route path="/settings" element={<SettingsPage />} />
+        <Route path="/create-spot" element={<CreateSpotPage />} />
+        <Route path="/create-shop" element={<CreateShopPage />} />
+        <Route path="/create-event" element={<CreateEventPage />} />
+        <Route path="/create-listing" element={<CreateListingPage />} />
+        <Route path="/create-tour" element={<CreateTourPage />} />
+        <Route path="/edit-spot/:pubkey/:identifier" element={<EditSpotPage />} />
+        <Route path="/edit-shop/:pubkey/:identifier" element={<EditShopPage />} />
+        <Route path="/edit-event/:pubkey/:identifier" element={<EditEventPage />} />
+        <Route path="/spot/:pubkey/:identifier" element={<SpotDetailPage />} />
+        <Route path="/shop/:pubkey/:identifier" element={<ShopDetailPage />} />
+        <Route path="/event/:pubkey/:identifier" element={<EventDetailPage />} />
+        <Route path="/tour/:pubkey/:identifier" element={<TourDetailPage />} />
+        <Route path="/collections" element={<SpotCollectionsPage />} />
+        <Route path="/collections/:pubkey/:identifier" element={<CollectionDetailPage />} />
+        <Route path="/messages" element={<DirectMessagesPage />} />
+        <Route path="/messages/:npub" element={<ConversationPage />} />
+        {/* Bounty System */}
+        <Route path="/bounties" element={<BountyLeaderboardPage />} />
+        {/* Security & Signers */}
+        <Route path="/signers" element={<SignersPage />} />
+        {/* Stash - Private Inventory */}
+        <Route path="/stash" element={<StashPage />} />
         {/* NIP-19 route for npub1, note1, naddr1, nevent1, nprofile1 */}
         <Route path="/:nip19" element={<NIP19Page />} />
         {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
@@ -21,4 +92,4 @@ export function AppRouter() {
     </BrowserRouter>
   );
 }
-export default AppRouter;
+export default AppRouter;

src/components/AppProvider.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useEffect } from 'react';
 import { z } from 'zod';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
-import { AppContext, type AppConfig, type AppContextType, type Theme, type RelayMetadata, type BlossomServerMetadata } from '@/contexts/AppContext';
+import { AppContext, type AppConfig, type AppContextType, type Theme, type RelayMetadata } from '@/contexts/AppContext';
 
 interface AppProviderProps {
   children: ReactNode;
@@ -21,18 +21,10 @@ const RelayMetadataSchema = z.object({
   updatedAt: z.number(),
 }) satisfies z.ZodType<RelayMetadata>;
 
-// Zod schema for BlossomServerMetadata validation
-const BlossomServerMetadataSchema = z.object({
-  servers: z.array(z.string().url()),
-  updatedAt: z.number(),
-}) satisfies z.ZodType<BlossomServerMetadata>;
-
 // Zod schema for AppConfig validation
 const AppConfigSchema = z.object({
   theme: z.enum(['dark', 'light', 'system']),
   relayMetadata: RelayMetadataSchema,
-  blossomServerMetadata: BlossomServerMetadataSchema,
-  useAppBlossomServers: z.boolean(),
 }) satisfies z.ZodType<AppConfig>;
 
 export function AppProvider(props: AppProviderProps) {
@@ -60,8 +52,46 @@ export function AppProvider(props: AppProviderProps) {
     setConfig(updater);
   };
 
+  // Merge configs with special handling for relay metadata
   const config = { ...defaultConfig, ...rawConfig };
 
+  // Force migration to correct relays and dark theme
+  useEffect(() => {
+    let needsUpdate = false;
+    const updates: Partial<AppConfig> = {};
+
+    // Check relay configuration
+    if (config.relayMetadata.relays) {
+      const currentRelayUrls = config.relayMetadata.relays.map(r => r.url).sort().join(',');
+      const expectedRelayUrls = defaultConfig.relayMetadata.relays.map(r => r.url).sort().join(',');
+
+      if (currentRelayUrls !== expectedRelayUrls) {
+        console.log('Migrating relays to:', defaultConfig.relayMetadata.relays.map(r => r.url));
+        updates.relayMetadata = defaultConfig.relayMetadata;
+        needsUpdate = true;
+      }
+    }
+
+    // Force dark theme (app is dark-only now)
+    if (config.theme !== 'dark') {
+      console.log('Forcing dark theme');
+      updates.theme = 'dark';
+      needsUpdate = true;
+    }
+
+    if (needsUpdate) {
+      updateConfig((current) => ({
+        ...current,
+        ...updates,
+      }));
+    }
+  }, []);
+
+  // Ensure relay list is never empty - fallback to default if no relays configured
+  if (!config.relayMetadata.relays || config.relayMetadata.relays.length === 0) {
+    config.relayMetadata = defaultConfig.relayMetadata;
+  }
+
   const appContextValue: AppContextType = {
     config,
     updateConfig,

src/components/NostrProvider.tsx

@@ -1,126 +1,113 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
-import { type NostrSigner, NostrEvent, NostrFilter, NPool, NRelay1 } from '@nostrify/nostrify';
+import { NostrEvent, NostrFilter, NPool, NRelay1 } from '@nostrify/nostrify';
 import { NostrContext } from '@nostrify/react';
-import { NUser, useNostrLogin } from '@nostrify/react/login';
 import { useQueryClient } from '@tanstack/react-query';
 import { useAppContext } from '@/hooks/useAppContext';
+import { SKATE_RELAY } from '@/lib/types';
 
 interface NostrProviderProps {
   children: React.ReactNode;
 }
 
+// Default fallback relays - used if no relays are configured
+const DEFAULT_RELAYS = [
+  { url: 'wss://relay.ditto.pub', read: true, write: true },
+  { url: SKATE_RELAY, read: true, write: true },
+  { url: 'wss://wotr.relatr.xyz', read: true, write: true },
+  { url: 'wss://purplepag.es', read: true, write: false }, // Profile aggregator
+];
+
 const NostrProvider: React.FC<NostrProviderProps> = (props) => {
   const { children } = props;
   const { config } = useAppContext();
-  const { logins } = useNostrLogin();
 
   const queryClient = useQueryClient();
 
-  // Use refs so the pool callbacks always see the latest data without
+  // Create NPool instance only once
-  // recreating the pool. The refs are written from effects (never during
+  const pool = useRef<NPool | undefined>(undefined);
-  // render) to satisfy React's purity rules.
-  const relayMetadataRef = useRef(config.relayMetadata);
 
-  // Stable ref to the current user's signer for NIP-42 AUTH.
+  // Use refs so the pool always has the latest data
-  // The `open()` callback reads from this ref when a relay sends an AUTH
+  const relayMetadata = useRef(config.relayMetadata);
-  // challenge, so it always uses the latest signer without recreating the pool.
+  const useSkateRelay = useRef(config.useSkateRelay ?? true);
-  const signerRef = useRef<NostrSigner | undefined>(undefined);
 
-  // Lazily create the pool once, via useState's initializer. This keeps
+  // Invalidate Nostr queries when relay metadata changes
-  // the render body pure (no ref writes) while guaranteeing a single
-  // NPool instance per provider. The initializer runs exactly once at
-  // mount, so reading refs inside its closures is safe.
-  // eslint-disable-next-line react-hooks/refs
-  const [pool] = useState<NPool>(() => new NPool({
-    open(url: string) {
-      return new NRelay1(url, {
-        // NIP-42: Respond to relay AUTH challenges by signing a kind
-        // 22242 ephemeral event with the current user's signer.
-        auth: async (challenge: string) => {
-          const signer = signerRef.current;
-          if (!signer) {
-            throw new Error('AUTH failed: no signer available (user not logged in)');
-          }
-          return signer.signEvent({
-            kind: 22242,
-            content: '',
-            tags: [
-              ['relay', url],
-              ['challenge', challenge],
-            ],
-            created_at: Math.floor(Date.now() / 1000),
-          });
-        },
-      });
-    },
-    reqRouter(filters: NostrFilter[]) {
-      const routes = new Map<string, NostrFilter[]>();
-
-      // Route to all read relays
-      const readRelays = relayMetadataRef.current.relays
-        .filter(r => r.read)
-        .map(r => r.url);
-
-      for (const url of readRelays) {
-        routes.set(url, filters);
-      }
-
-      return routes;
-    },
-    eventRouter(_event: NostrEvent) {
-      // Get write relays from metadata
-      const writeRelays = relayMetadataRef.current.relays
-        .filter(r => r.write)
-        .map(r => r.url);
-
-      const allRelays = new Set<string>(writeRelays);
-
-      return [...allRelays];
-    },
-    eoseTimeout: 200,
-  }));
-
-  // Derive the current signer from the active login. This mirrors the
-  // logic in useCurrentUser but avoids a circular dependency (useCurrentUser
-  // depends on NostrContext which we are providing here).
-  const currentLogin = logins[0];
-  const currentSigner = useMemo(() => {
-    if (!currentLogin) return undefined;
-    try {
-      switch (currentLogin.type) {
-        case 'nsec':
-          return NUser.fromNsecLogin(currentLogin).signer;
-        case 'bunker':
-          return NUser.fromBunkerLogin(currentLogin, pool).signer;
-        case 'extension':
-          return NUser.fromExtensionLogin(currentLogin).signer;
-        default:
-          return undefined;
-      }
-    } catch {
-      return undefined;
-    }
-  }, [currentLogin, pool]);
-
-  // Keep the ref in sync so the AUTH callback always sees the latest signer.
-  // Writing refs from an effect (not during render) satisfies purity rules.
   useEffect(() => {
-    signerRef.current = currentSigner;
+    relayMetadata.current = config.relayMetadata;
-  }, [currentSigner]);
+    useSkateRelay.current = config.useSkateRelay ?? true;
-
-  // Invalidate Nostr queries when relay metadata changes.
-  useEffect(() => {
-    relayMetadataRef.current = config.relayMetadata;
     queryClient.invalidateQueries({ queryKey: ['nostr'] });
-  }, [config.relayMetadata, queryClient]);
+  }, [config.relayMetadata, config.useSkateRelay, queryClient]);
 
-  const contextValue = useMemo(() => ({ nostr: pool }), [pool]);
+  // Initialize NPool only once
+  if (!pool.current) {
+    pool.current = new NPool({
+      open(url: string) {
+        return new NRelay1(url);
+      },
+      reqRouter(filters: NostrFilter[]) {
+        const routes = new Map<string, NostrFilter[]>();
+
+        // Get relays from metadata, fallback to defaults if empty
+        const configuredRelays = relayMetadata.current.relays.length > 0
+          ? relayMetadata.current.relays
+          : DEFAULT_RELAYS;
+
+        // Route to all read relays
+        const readRelays = configuredRelays
+          .filter(r => r.read)
+          .map(r => r.url);
+
+        // Ensure we always have at least one relay
+        if (readRelays.length === 0) {
+          console.warn('[NostrProvider] No read relays configured, using defaults');
+          for (const relay of DEFAULT_RELAYS) {
+            routes.set(relay.url, filters);
+          }
+        } else {
+          console.log('[NostrProvider] Routing query to read relays:', readRelays);
+          for (const url of readRelays) {
+            routes.set(url, filters);
+          }
+        }
+
+        return routes;
+      },
+      eventRouter(event: NostrEvent) {
+        // Get relays from metadata, fallback to defaults if empty
+        const configuredRelays = relayMetadata.current.relays.length > 0
+          ? relayMetadata.current.relays
+          : DEFAULT_RELAYS;
+
+        // Get write relays from metadata
+        const writeRelays = configuredRelays
+          .filter(r => r.write)
+          .map(r => r.url);
+
+        const allRelays = new Set<string>(writeRelays);
+
+        // Include community relay if setting is enabled (default: true)
+        // This ensures skate content is published to the community relay for discoverability
+        if (useSkateRelay.current) {
+          allRelays.add(SKATE_RELAY);
+        }
+
+        // Ensure we always have at least one relay
+        if (allRelays.size === 0) {
+          console.warn('No write relays configured, using defaults');
+          DEFAULT_RELAYS.forEach(r => allRelays.add(r.url));
+        }
+
+        console.log(`[NostrProvider] Publishing kind ${event.kind} to relays:`, [...allRelays]);
+
+        return [...allRelays];
+      },
+    });
+  }
 
   return (
-    <NostrContext.Provider value={contextValue}>
+    <NostrContext.Provider value={{ nostr: pool.current }}>
       {children}
     </NostrContext.Provider>
   );
 };
 
-export default NostrProvider;
+export default NostrProvider;

src/components/NostrSync.tsx

@@ -1,30 +1,97 @@
-import { useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useNostr } from '@nostrify/react';
+import { useNostrLogin } from '@nostrify/react/login';
+import { useQueryClient } from '@tanstack/react-query';
+import { NSchema as n } from '@nostrify/nostrify';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useAppContext } from '@/hooks/useAppContext';
-import { parseBlossomServerList } from '@/lib/appBlossom';
+import { useToast } from '@/hooks/useToast';
+
+// Default relays for new users
+const NEW_USER_RELAYS = [
+  { url: 'wss://relay.ditto.pub', read: true, write: true },
+  { url: 'wss://goskatespots.nostr1.com', read: true, write: true },
+  { url: 'wss://wotr.relatr.xyz', read: true, write: true },
+  { url: 'wss://purplepag.es', read: true, write: false }, // Profile aggregator
+];
+
+// Fallback relays for fetching profile data (aggregators that index many profiles)
+const FALLBACK_RELAYS = [
+  'wss://purplepag.es',
+  'wss://relay.nostr.band',
+  'wss://relay.damus.io',
+  'wss://nos.lol',
+];
 
 /**
- * NostrSync - Syncs user's Nostr data
+ * NostrSync - Syncs user's Nostr data on login
  *
  * This component runs globally to sync various Nostr data when the user logs in.
+ * It fetches data and populates TanStack Query cache so other hooks don't need to refetch.
+ * 
  * Currently syncs:
  * - NIP-65 relay list (kind 10002)
- * - BUD-03 Blossom server list (kind 10063)
+ * - Profile metadata (kind 0) - cached for useAuthor hook
+ * 
+ * New users (without a published relay list) get default relays instead of
+ * inheriting from previous browser sessions.
  */
 export function NostrSync() {
   const { nostr } = useNostr();
   const { user } = useCurrentUser();
+  const { logins } = useNostrLogin();
   const { config, updateConfig } = useAppContext();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const syncedUsers = useRef<Set<string>>(new Set());
+  const [syncStatus, setSyncStatus] = useState<'idle' | 'syncing' | 'success' | 'error'>('idle');
 
   useEffect(() => {
     if (!user) return;
 
-    const syncRelaysFromNostr = async () => {
+    // Only sync once per user per session
-      try {
+    if (syncedUsers.current.has(user.pubkey)) return;
+
+    const syncWithRetry = async <T,>(
+      queryFn: () => Promise<T>,
+      maxRetries: number = 5,
+      initialDelayMs: number = 1000
+    ): Promise<T | null> => {
+      for (let attempt = 1; attempt <= maxRetries; attempt++) {
+        try {
+          return await queryFn();
+        } catch (error) {
+          console.warn(`[NostrSync] Attempt ${attempt}/${maxRetries} failed:`, error);
+          if (attempt < maxRetries) {
+            // Exponential backoff: 1s, 2s, 4s, 8s, 16s
+            const delay = initialDelayMs * Math.pow(2, attempt - 1);
+            await new Promise(resolve => setTimeout(resolve, delay));
+          }
+        }
+      }
+      return null;
+    };
+
+    const syncUserData = async () => {
+      setSyncStatus('syncing');
+      console.log('[NostrSync] Starting sync for user:', user.pubkey.slice(0, 8) + '...');
+
+      // FIX B: Invalidate any stale cached data for this user BEFORE fetching
+      // This ensures we don't use old cached empty results
+      queryClient.invalidateQueries({ queryKey: ['author', user.pubkey] });
+      
+      // Also invalidate the logins cache so useLoggedInAccounts refetches
+      const loginsKey = logins.map((l) => l.id).join(';');
+      queryClient.invalidateQueries({ queryKey: ['nostr', 'logins', loginsKey] });
+
+      let relaysSynced = false;
+      let profileSynced = false;
+
+      // Sync relay list (NIP-65)
+      const syncRelays = async (): Promise<boolean> => {
         const events = await nostr.query(
           [{ kinds: [10002], authors: [user.pubkey], limit: 1 }],
-          { signal: AbortSignal.timeout(5000) }
+          { signal: AbortSignal.timeout(10000) }
         );
 
         if (events.length > 0) {
@@ -34,14 +101,14 @@ export function NostrSync() {
           if (event.created_at > config.relayMetadata.updatedAt) {
             const fetchedRelays = event.tags
               .filter(([name]) => name === 'r')
-              .map(([_, url, marker]) => ({
+              .map(([, url, marker]) => ({
                 url,
                 read: !marker || marker === 'read',
                 write: !marker || marker === 'write',
               }));
 
             if (fetchedRelays.length > 0) {
-              console.log('Syncing relay list from Nostr:', fetchedRelays);
+              console.log('[NostrSync] Synced relay list from NIP-65:', fetchedRelays.length, 'relays');
               updateConfig((current) => ({
                 ...current,
                 relayMetadata: {
@@ -49,53 +116,136 @@ export function NostrSync() {
                   updatedAt: event.created_at,
                 },
               }));
+              return true;
             }
+          } else {
+            return true; // Already have latest
           }
+        } else {
+          // No NIP-65 relay list found - this is a new user!
+          console.log('[NostrSync] New user - setting default relays');
+          updateConfig((current) => ({
+            ...current,
+            relayMetadata: {
+              relays: NEW_USER_RELAYS,
+              updatedAt: 0,
+            },
+          }));
+          return true;
         }
-      } catch (error) {
+        return false;
-        console.error('Failed to sync relays from Nostr:', error);
+      };
-      }
-    };
 
-    syncRelaysFromNostr();
+      // Sync profile (kind 0) and populate useAuthor cache
-  }, [user, config.relayMetadata.updatedAt, nostr, updateConfig]);
+      const syncProfile = async (relayGroup?: ReturnType<typeof nostr.group>): Promise<boolean> => {
-
+        const querySource = relayGroup || nostr;
-  useEffect(() => {
+        console.log('[NostrSync] Querying profile for pubkey:', user.pubkey.slice(0, 8) + '...');
-    if (!user) return;
+        const events = await querySource.query(
-
+          [{ kinds: [0], authors: [user.pubkey], limit: 1 }],
-    const syncBlossomServersFromNostr = async () => {
+          { signal: AbortSignal.timeout(10000) }
-      try {
-        const events = await nostr.query(
-          [{ kinds: [10063], authors: [user.pubkey], limit: 1 }],
-          { signal: AbortSignal.timeout(5000) }
         );
-
+        console.log('[NostrSync] Profile query returned', events.length, 'events');
+        
         if (events.length > 0) {
           const event = events[0];
-
+          
-          // Only update if the event is newer than our stored data
+          // FIX A: Parse metadata and populate useAuthor's TanStack Query cache
-          if (event.created_at > config.blossomServerMetadata.updatedAt) {
+          try {
-            const fetchedServers = parseBlossomServerList(event);
+            const metadata = n.json().pipe(n.metadata()).parse(event.content);
-
+            
-            if (fetchedServers.length > 0) {
+            // Set the cache data that useAuthor expects
-              console.log('Syncing Blossom server list from Nostr:', fetchedServers);
+            queryClient.setQueryData(['author', user.pubkey], { 
-              updateConfig((current) => ({
+              metadata, 
-                ...current,
+              event 
-                blossomServerMetadata: {
+            });
-                  servers: fetchedServers,
+            
-                  updatedAt: event.created_at,
+            // FIX A+: Also update useLoggedInAccounts cache so profile shows everywhere
-                },
+            const loginsKey = logins.map((l) => l.id).join(';');
-              }));
+            queryClient.setQueryData(['nostr', 'logins', loginsKey], (oldData: Array<{ id: string; pubkey: string; metadata: typeof metadata; event?: typeof event }> | undefined) => {
-            }
+              if (!oldData) {
+                // Create initial data from logins
+                return logins.map((login) => {
+                  if (login.pubkey === user.pubkey) {
+                    return { id: login.id, pubkey: login.pubkey, metadata, event };
+                  }
+                  return { id: login.id, pubkey: login.pubkey, metadata: {} };
+                });
+              }
+              // Update existing data
+              return oldData.map((account) => {
+                if (account.pubkey === user.pubkey) {
+                  return { ...account, metadata, event };
+                }
+                return account;
+              });
+            });
+            
+            console.log('[NostrSync] Profile synced and cached:', metadata.name || 'unnamed');
+            return true;
+          } catch (parseError) {
+            // Event exists but content couldn't be parsed - still cache the event
+            queryClient.setQueryData(['author', user.pubkey], { event });
+            console.warn('[NostrSync] Profile event found but metadata parse failed');
+            return true;
           }
         }
-      } catch (error) {
+        return false;
-        console.error('Failed to sync Blossom servers from Nostr:', error);
+      };
+
+      // Try main relays first with retry
+      const mainResult = await syncWithRetry(async () => {
+        const [relayResult, profileResult] = await Promise.all([
+          syncRelays(),
+          syncProfile()
+        ]);
+        return { relays: relayResult, profile: profileResult };
+      }, 3, 1500);
+
+      if (mainResult) {
+        relaysSynced = mainResult.relays;
+        profileSynced = mainResult.profile;
+      }
+
+      // If profile not found on main relays, try fallback relays
+      if (!profileSynced) {
+        console.log('[NostrSync] Profile not found on main relays, trying fallbacks...');
+        
+        const fallbackResult = await syncWithRetry(async () => {
+          const fallbackGroup = nostr.group(FALLBACK_RELAYS);
+          return await syncProfile(fallbackGroup);
+        }, 3, 2000);
+
+        if (fallbackResult) {
+          profileSynced = true;
+        }
+      }
+
+      // Mark sync complete for this user
+      syncedUsers.current.add(user.pubkey);
+
+      if (relaysSynced || profileSynced) {
+        setSyncStatus('success');
+        console.log('[NostrSync] Sync completed - relays:', relaysSynced, 'profile:', profileSynced);
+      } else {
+        setSyncStatus('error');
+        console.error('[NostrSync] Sync failed - could not reach relays');
+        toast({
+          title: 'Connection Issue',
+          description: 'Could not sync your profile. Check your internet connection.',
+          variant: 'destructive',
+        });
       }
     };
 
-    syncBlossomServersFromNostr();
+    // FIX C: Longer initial delay to allow relay connections to establish
-  }, [user, config.blossomServerMetadata.updatedAt, nostr, updateConfig]);
+    // This helps with external signers like Amber where PWA context may need time
+    // to re-establish WebSocket connections after returning from the signer app
+    const timeoutId = setTimeout(() => {
+      syncUserData();
+    }, 800);
+
+    return () => clearTimeout(timeoutId);
+  }, [user, config.relayMetadata.updatedAt, nostr, updateConfig, toast, queryClient, logins]);
 
   return null;
 }

src/components/auth/AccountSwitcher.tsx

@@ -1,4 +1,7 @@
-import { ChevronDown, LogOut, UserIcon, UserPlus } from 'lucide-react';
+// NOTE: This file is stable and usually should not be modified.
+// It is important that all functionality in this file is preserved, and should only be modified if explicitly requested.
+
+import { ChevronDown, LogOut, UserIcon, UserPlus, Wallet } from 'lucide-react';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -7,81 +10,83 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu.tsx';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar.tsx';
-import { Skeleton } from '@/components/ui/skeleton.tsx';
+import { WalletModal } from '@/components/WalletModal';
 import { useLoggedInAccounts, type Account } from '@/hooks/useLoggedInAccounts';
+import { genUserName } from '@/lib/genUserName';
 
 interface AccountSwitcherProps {
   onAddAccountClick: () => void;
 }
 
 export function AccountSwitcher({ onAddAccountClick }: AccountSwitcherProps) {
-  const { currentUser, otherUsers, isLoading, setLogin, removeLogin } = useLoggedInAccounts();
+  const { currentUser, otherUsers, setLogin, removeLogin } = useLoggedInAccounts();
 
   if (!currentUser) return null;
 
   const getDisplayName = (account: Account): string => {
-    return account.metadata.name ?? 'Anonymous';
+    return account.metadata.name ?? genUserName(account.pubkey);
   }
 
-  // While the metadata query is in-flight and we don't yet have a name,
+  const getNip05 = (account: Account): string | undefined => {
-  // we don't want to flash a generated animal name / its first letter.
+    return account.metadata.nip05;
-  const isCurrentUserPending = isLoading && !currentUser.metadata.name;
+  }
 
   return (
     <DropdownMenu modal={false}>
       <DropdownMenuTrigger asChild>
-        <button className='flex items-center gap-2 h-10 p-1 pr-2.5 rounded-full hover:bg-accent transition-all text-foreground'>
+        <button className='flex items-center gap-3 p-3 rounded-full hover:bg-accent transition-all w-full text-foreground'>
-          <Avatar className='w-8 h-8'>
+          <div className="relative">
-            <AvatarImage
+            <Avatar className='w-10 h-10'>
-              src={currentUser.metadata.picture}
+              <AvatarImage src={currentUser.metadata.picture} alt={getDisplayName(currentUser)} />
-              alt={isCurrentUserPending ? '' : getDisplayName(currentUser)}
+              <AvatarFallback>{getDisplayName(currentUser).charAt(0)}</AvatarFallback>
-            />
+            </Avatar>
-            <AvatarFallback>
+            {/* Green online indicator dot */}
-              {isCurrentUserPending ? (
+            <span className="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-green-500 border-2 border-background rounded-full" />
-                <Skeleton className='size-full rounded-full' />
+          </div>
-              ) : (
+          <div className='flex-1 text-left hidden md:block truncate'>
-                getDisplayName(currentUser).charAt(0)
+            <p className='font-medium text-sm truncate'>{getDisplayName(currentUser)}</p>
-              )}
+            {getNip05(currentUser) && (
-            </AvatarFallback>
+              <p className='text-xs text-muted-foreground truncate'>
-          </Avatar>
+                {getNip05(currentUser)}
+              </p>
+            )}
+          </div>
           <ChevronDown className='w-4 h-4 text-muted-foreground' />
         </button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className='w-56 p-2 animate-scale-in'>
         <div className='font-medium text-sm px-2 py-1.5'>Switch Account</div>
-        {otherUsers.map((user) => {
+        {otherUsers.map((user) => (
-          const isPending = isLoading && !user.metadata.name;
+          <DropdownMenuItem
-          return (
+            key={user.id}
-            <DropdownMenuItem
+            onClick={() => setLogin(user.id)}
-              key={user.id}
+            className='flex items-center gap-2 cursor-pointer p-2 rounded-md'
-              onClick={() => setLogin(user.id)}
+          >
-              className='flex items-center gap-2 cursor-pointer p-2 rounded-md'
+            <Avatar className='w-8 h-8'>
-            >
+              <AvatarImage src={user.metadata.picture} alt={getDisplayName(user)} />
-              <Avatar className='w-8 h-8'>
+              <AvatarFallback>{getDisplayName(user)?.charAt(0) || <UserIcon />}</AvatarFallback>
-                <AvatarImage
+            </Avatar>
-                  src={user.metadata.picture}
+            <div className='flex-1 truncate'>
-                  alt={isPending ? '' : getDisplayName(user)}
+              <p className='text-sm font-medium'>{getDisplayName(user)}</p>
-                />
+              {getNip05(user) && (
-                <AvatarFallback>
+                <p className='text-xs text-muted-foreground truncate'>
-                  {isPending ? (
+                  {getNip05(user)}
-                    <Skeleton className='size-full rounded-full' />
+                </p>
-                  ) : (
+              )}
-                    getDisplayName(user)?.charAt(0) || <UserIcon />
+            </div>
-                  )}
+            {user.id === currentUser.id && <div className='w-2 h-2 rounded-full bg-primary'></div>}
-                </AvatarFallback>
+          </DropdownMenuItem>
-              </Avatar>
+        ))}
-              <div className='flex-1 truncate'>
-                {isPending ? (
-                  <Skeleton className='h-4 w-24' />
-                ) : (
-                  <p className='text-sm font-medium'>{getDisplayName(user)}</p>
-                )}
-              </div>
-              {user.id === currentUser.id && <div className='w-2 h-2 rounded-full bg-primary'></div>}
-            </DropdownMenuItem>
-          );
-        })}
         <DropdownMenuSeparator />
+        <WalletModal>
+          <DropdownMenuItem
+            className='flex items-center gap-2 cursor-pointer p-2 rounded-md'
+            onSelect={(e) => e.preventDefault()}
+          >
+            <Wallet className='w-4 h-4' />
+            <span>Wallet Settings</span>
+          </DropdownMenuItem>
+        </WalletModal>
         <DropdownMenuItem
           onClick={onAddAccountClick}
           className='flex items-center gap-2 cursor-pointer p-2 rounded-md'
@@ -99,4 +104,4 @@ export function AccountSwitcher({ onAddAccountClick }: AccountSwitcherProps) {
       </DropdownMenuContent>
     </DropdownMenu>
   );
-}
+}

src/components/auth/LoginArea.tsx

@@ -1,35 +1,116 @@
+// NOTE: This file is stable and usually should not be modified.
+// It is important that all functionality in this file is preserved, and should only be modified if explicitly requested.
+
 import { useState } from 'react';
+import { User, UserPlus } from 'lucide-react';
 import { Button } from '@/components/ui/button.tsx';
-import AuthDialog from './AuthDialog';
+import LoginDialog from './LoginDialog';
+import SignupDialog from './SignupDialog';
+import SignupMethodDialog from './SignupMethodDialog';
+import MnemonicSignupDialog from './MnemonicSignupDialog';
 import { useLoggedInAccounts } from '@/hooks/useLoggedInAccounts';
 import { AccountSwitcher } from './AccountSwitcher';
 import { cn } from '@/lib/utils';
 
 export interface LoginAreaProps {
   className?: string;
+  /** Compact mode for mobile headers - smaller buttons without text */
+  compact?: boolean;
 }
 
-export function LoginArea({ className }: LoginAreaProps) {
+export function LoginArea({ className, compact }: LoginAreaProps) {
   const { currentUser } = useLoggedInAccounts();
-  const [authDialogOpen, setAuthDialogOpen] = useState(false);
+  const [loginDialogOpen, setLoginDialogOpen] = useState(false);
+  const [signupMethodDialogOpen, setSignupMethodDialogOpen] = useState(false);
+  const [mnemonicSignupDialogOpen, setMnemonicSignupDialogOpen] = useState(false);
+  const [nsecSignupDialogOpen, setNsecSignupDialogOpen] = useState(false);
+
+  const handleLogin = () => {
+    setLoginDialogOpen(false);
+    setSignupMethodDialogOpen(false);
+    setMnemonicSignupDialogOpen(false);
+    setNsecSignupDialogOpen(false);
+  };
 
   return (
-    <div className={cn('inline-flex items-center justify-center', className)}>
+    <div className={cn("inline-flex items-center justify-center", className)}>
       {currentUser ? (
-        <AccountSwitcher onAddAccountClick={() => setAuthDialogOpen(true)} />
+        <AccountSwitcher onAddAccountClick={() => setLoginDialogOpen(true)} />
+      ) : compact ? (
+        // Compact mode for mobile headers - icon only
+        <div className="flex gap-1 justify-center">
+          <Button
+            onClick={() => setSignupMethodDialogOpen(true)}
+            size="icon"
+            className='h-9 w-9 rounded-full bg-[#ccff00] text-black hover:bg-[#ccff00]/90'
+            title="Sign Up"
+          >
+            <UserPlus className='w-4 h-4' />
+          </Button>
+          <Button
+            onClick={() => setLoginDialogOpen(true)}
+            variant="outline"
+            size="icon"
+            className="h-9 w-9 rounded-full border border-gray-600 hover:border-[#ff0040]"
+            title="Log In"
+          >
+            <User className='w-4 h-4' />
+          </Button>
+        </div>
       ) : (
-        <Button
+        // Default full-size buttons
-          onClick={() => setAuthDialogOpen(true)}
+        <div className="flex gap-3 justify-center w-full">
-          className="flex items-center gap-2 px-5 py-2 rounded-full bg-primary text-primary-foreground font-medium transition-all hover:bg-primary/90 animate-scale-in"
+          <Button
-        >
+            onClick={() => setSignupMethodDialogOpen(true)}
-          <span className="truncate">Join</span>
+            className='flex items-center gap-2 px-5 py-2.5 rounded-full bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold transition-all flex-1 sm:flex-none'
-        </Button>
+          >
+            <UserPlus className='w-4 h-4' />
+            <span>Sign Up</span>
+          </Button>
+          <Button
+            onClick={() => setLoginDialogOpen(true)}
+            variant="outline"
+            className="flex items-center gap-2 px-5 py-2.5 rounded-full font-medium transition-all border-2 border-gray-600 hover:border-[#ff0040] flex-1 sm:flex-none"
+          >
+            <User className='w-4 h-4' />
+            <span className='truncate'>Log In</span>
+          </Button>
+        </div>
       )}
 
-      <AuthDialog
+      <LoginDialog
-        isOpen={authDialogOpen}
+        isOpen={loginDialogOpen}
-        onClose={() => setAuthDialogOpen(false)}
+        onClose={() => setLoginDialogOpen(false)}
+        onLogin={handleLogin}
+        onSignup={() => setSignupMethodDialogOpen(true)}
+      />
+
+      <SignupMethodDialog
+        isOpen={signupMethodDialogOpen}
+        onClose={() => setSignupMethodDialogOpen(false)}
+        onSelectMnemonic={() => {
+          setSignupMethodDialogOpen(false);
+          setMnemonicSignupDialogOpen(true);
+        }}
+        onSelectNsec={() => {
+          setSignupMethodDialogOpen(false);
+          setNsecSignupDialogOpen(true);
+        }}
+      />
+
+      <MnemonicSignupDialog
+        isOpen={mnemonicSignupDialogOpen}
+        onClose={() => setMnemonicSignupDialogOpen(false)}
+        onSwitchToNsec={() => {
+          setMnemonicSignupDialogOpen(false);
+          setNsecSignupDialogOpen(true);
+        }}
+      />
+
+      <SignupDialog
+        isOpen={nsecSignupDialogOpen}
+        onClose={() => setNsecSignupDialogOpen(false)}
       />
     </div>
   );
-}
+}

src/components/ui/accordion.tsx

@@ -1,64 +1,56 @@
 import * as React from "react"
-import { ChevronDownIcon } from "lucide-react"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-function Accordion({
+const Accordion = AccordionPrimitive.Root
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
-}
 
-function AccordionItem({
+const AccordionItem = React.forwardRef<
-  className,
+  React.ElementRef<typeof AccordionPrimitive.Item>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+>(({ className, ...props }, ref) => (
-  return (
+  <AccordionPrimitive.Item
-    <AccordionPrimitive.Item
+    ref={ref}
-      data-slot="accordion-item"
+    className={cn("border-b", className)}
-      className={cn("border-b last:border-b-0", className)}
+    {...props}
-      {...props}
+  />
-    />
+))
-  )
+AccordionItem.displayName = "AccordionItem"
-}
 
-function AccordionTrigger({
+const AccordionTrigger = React.forwardRef<
-  className,
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  children,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
-  ...props
+>(({ className, children, ...props }, ref) => (
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  <AccordionPrimitive.Header className="flex">
-  return (
+    <AccordionPrimitive.Trigger
-    <AccordionPrimitive.Header className="flex">
+      ref={ref}
-      <AccordionPrimitive.Trigger
+      className={cn(
-        data-slot="accordion-trigger"
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className={cn(
+        className
-          "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+      )}
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon className="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  )
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
       {...props}
     >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+      {children}
-    </AccordionPrimitive.Content>
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
-  )
+    </AccordionPrimitive.Trigger>
-}
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
 
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

src/components/ui/alert-dialog.tsx

@@ -1,196 +1,139 @@
-"use client"
-
 import * as React from "react"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { buttonVariants } from "@/components/ui/button-variants"
 
-function AlertDialog({
+const AlertDialog = AlertDialogPrimitive.Root
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
-}
 
-function AlertDialogTrigger({
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
-}
 
-function AlertDialogPortal({
+const AlertDialogPortal = AlertDialogPrimitive.Portal
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
-}
 
-function AlertDialogOverlay({
+const AlertDialogOverlay = React.forwardRef<
-  className,
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+>(({ className, ...props }, ref) => (
-  return (
+  <AlertDialogPrimitive.Overlay
-    <AlertDialogPrimitive.Overlay
+    className={cn(
-      data-slot="alert-dialog-overlay"
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
       className={cn(
-        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}
     />
-  )
+  </AlertDialogPortal>
-}
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 
-function AlertDialogContent({
+const AlertDialogHeader = ({
-  className,
-  size = "default",
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
-  size?: "default" | "sm"
-}) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        data-size={size}
-        className={cn(
-          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
-          className
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  )
-}
-
-function AlertDialogHeader({
   className,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.HTMLAttributes<HTMLDivElement>) => (
-  return (
+  <div
-    <div
+    className={cn(
-      data-slot="alert-dialog-header"
+      "flex flex-col space-y-2 text-center sm:text-left",
-      className={cn(
+      className
-        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+    )}
-        className
+    {...props}
-      )}
+  />
-      {...props}
+)
-    />
+AlertDialogHeader.displayName = "AlertDialogHeader"
-  )
-}
 
-function AlertDialogFooter({
+const AlertDialogFooter = ({
   className,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.HTMLAttributes<HTMLDivElement>) => (
-  return (
+  <div
-    <div
+    className={cn(
-      data-slot="alert-dialog-footer"
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className={cn(
+      className
-        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+    )}
-        className
+    {...props}
-      )}
+  />
-      {...props}
+)
-    />
+AlertDialogFooter.displayName = "AlertDialogFooter"
-  )
-}
 
-function AlertDialogTitle({
+const AlertDialogTitle = React.forwardRef<
-  className,
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+>(({ className, ...props }, ref) => (
-  return (
+  <AlertDialogPrimitive.Title
-    <AlertDialogPrimitive.Title
+    ref={ref}
-      data-slot="alert-dialog-title"
+    className={cn("text-lg font-semibold", className)}
-      className={cn(
+    {...props}
-        "text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+  />
-        className
+))
-      )}
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
-      {...props}
-    />
-  )
-}
 
-function AlertDialogDescription({
+const AlertDialogDescription = React.forwardRef<
-  className,
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+>(({ className, ...props }, ref) => (
-  return (
+  <AlertDialogPrimitive.Description
-    <AlertDialogPrimitive.Description
+    ref={ref}
-      data-slot="alert-dialog-description"
+    className={cn("text-sm text-muted-foreground", className)}
-      className={cn("text-sm text-muted-foreground", className)}
+    {...props}
-      {...props}
+  />
-    />
+))
-  )
+AlertDialogDescription.displayName =
-}
+  AlertDialogPrimitive.Description.displayName
 
-function AlertDialogMedia({
+const AlertDialogAction = React.forwardRef<
-  className,
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
-}: React.ComponentProps<"div">) {
+>(({ className, ...props }, ref) => (
-  return (
+  <AlertDialogPrimitive.Action
-    <div
+    ref={ref}
-      data-slot="alert-dialog-media"
+    className={cn(buttonVariants(), className)}
-      className={cn(
+    {...props}
-        "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+  />
-        className
+))
-      )}
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
-      {...props}
-    />
-  )
-}
 
-function AlertDialogAction({
+const AlertDialogCancel = React.forwardRef<
-  className,
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  variant = "default",
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
-  size = "default",
+>(({ className, ...props }, ref) => (
-  ...props
+  <AlertDialogPrimitive.Cancel
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+    ref={ref}
-  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+    className={cn(
-  return (
+      buttonVariants({ variant: "outline" }),
-    <Button variant={variant} size={size} asChild>
+      "mt-2 sm:mt-0",
-      <AlertDialogPrimitive.Action
+      className
-        data-slot="alert-dialog-action"
+    )}
-        className={cn(className)}
+    {...props}
-        {...props}
+  />
-      />
+))
-    </Button>
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
-  )
-}
-
-function AlertDialogCancel({
-  className,
-  variant = "outline",
-  size = "default",
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
-  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
-  return (
-    <Button variant={variant} size={size} asChild>
-      <AlertDialogPrimitive.Cancel
-        data-slot="alert-dialog-cancel"
-        className={cn(className)}
-        {...props}
-      />
-    </Button>
-  )
-}
 
 export {
   AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
 }

src/components/ui/alert.tsx

@@ -4,13 +4,13 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const alertVariants = cva(
-  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[--spacing(4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
   {
     variants: {
       variant: {
-        default: "bg-card text-card-foreground",
+        default: "bg-background text-foreground",
         destructive:
-          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
       },
     },
     defaultVariants: {
@@ -19,48 +19,41 @@ const alertVariants = cva(
   }
 )
 
-function Alert({
+const Alert = React.forwardRef<
-  className,
+  HTMLDivElement,
-  variant,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
-  ...props
+>(({ className, variant, ...props }, ref) => (
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  <div
-  return (
+    ref={ref}
-    <div
+    role="alert"
-      data-slot="alert"
+    className={cn(alertVariants({ variant }), className)}
-      role="alert"
+    {...props}
-      className={cn(alertVariants({ variant }), className)}
+  />
-      {...props}
+))
-    />
+Alert.displayName = "Alert"
-  )
-}
 
-function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+const AlertTitle = React.forwardRef<
-  return (
+  HTMLParagraphElement,
-    <div
+  React.HTMLAttributes<HTMLHeadingElement>
-      data-slot="alert-title"
+>(({ className, ...props }, ref) => (
-      className={cn(
+  <h5
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+    ref={ref}
-        className
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-      )}
+    {...props}
-      {...props}
+  />
-    />
+))
-  )
+AlertTitle.displayName = "AlertTitle"
-}
 
-function AlertDescription({
+const AlertDescription = React.forwardRef<
-  className,
+  HTMLParagraphElement,
-  ...props
+  React.HTMLAttributes<HTMLParagraphElement>
-}: React.ComponentProps<"div">) {
+>(({ className, ...props }, ref) => (
-  return (
+  <div
-    <div
+    ref={ref}
-      data-slot="alert-description"
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
-      className={cn(
+    {...props}
-        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
+  />
-        className
+))
-      )}
+AlertDescription.displayName = "AlertDescription"
-      {...props}
-    />
-  )
-}
 
 export { Alert, AlertTitle, AlertDescription }

src/components/ui/aspect-ratio.tsx

@@ -1,11 +1,5 @@
-"use client"
-
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
 
-function AspectRatio({
+const AspectRatio = AspectRatioPrimitive.Root
-  ...props
-}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
-  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
-}
 
 export { AspectRatio }

src/components/ui/avatar.tsx

@@ -3,105 +3,46 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar"
 
 import { cn } from "@/lib/utils"
 
-function Avatar({
+const Avatar = React.forwardRef<
-  className,
+  React.ElementRef<typeof AvatarPrimitive.Root>,
-  size = "default",
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
-  ...props
+>(({ className, ...props }, ref) => (
-}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  <AvatarPrimitive.Root
-  size?: "default" | "sm" | "lg"
+    ref={ref}
-}) {
+    className={cn(
-  return (
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-    <AvatarPrimitive.Root
+      className
-      data-slot="avatar"
+    )}
-      data-size={size}
+    {...props}
-      className={cn(
+  />
-        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+))
-        className
+Avatar.displayName = AvatarPrimitive.Root.displayName
-      )}
-      {...props}
-    />
-  )
-}
 
-function AvatarImage({
+const AvatarImage = React.forwardRef<
-  className,
+  React.ElementRef<typeof AvatarPrimitive.Image>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+>(({ className, ...props }, ref) => (
-  return (
+  <AvatarPrimitive.Image
-    <AvatarPrimitive.Image
+    ref={ref}
-      data-slot="avatar-image"
+    className={cn("aspect-square h-full w-full object-cover", className)}
-      className={cn("aspect-square size-full", className)}
+    {...props}
-      {...props}
+  />
-    />
+))
-  )
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
-}
 
-function AvatarFallback({
+const AvatarFallback = React.forwardRef<
-  className,
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+>(({ className, ...props }, ref) => (
-  return (
+  <AvatarPrimitive.Fallback
-    <AvatarPrimitive.Fallback
+    ref={ref}
-      data-slot="avatar-fallback"
+    className={cn(
-      className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+      className
-        className
+    )}
-      )}
+    {...props}
-      {...props}
+  />
-    />
+))
-  )
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
-}
 
-function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+export { Avatar, AvatarImage, AvatarFallback }
-  return (
-    <span
-      data-slot="avatar-badge"
-      className={cn(
-        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none",
-        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
-        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
-        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="avatar-group"
-      className={cn(
-        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarGroupCount({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="avatar-group-count"
-      className={cn(
-        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-  AvatarBadge,
-  AvatarGroup,
-  AvatarGroupCount,
-}

src/components/ui/badge-variants.ts

@@ -1,23 +1,21 @@
 import { cva } from "class-variance-authority"
 
 export const badgeVariants = cva(
-  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
         secondary:
-          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
-          "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline:
+        outline: "text-foreground",
-          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 [a&]:hover:underline",
       },
     },
     defaultVariants: {
       variant: "default",
     },
   }
-)
+)

src/components/ui/badge.tsx

@@ -1,26 +1,16 @@
 import * as React from "react"
 import { type VariantProps } from "class-variance-authority"
-import { Slot } from "@radix-ui/react-slot"
 
 import { cn } from "@/lib/utils"
 import { badgeVariants } from "./badge-variants"
 
-function Badge({
+export interface BadgeProps
-  className,
+  extends React.HTMLAttributes<HTMLDivElement>,
-  variant = "default",
+    VariantProps<typeof badgeVariants> {}
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : "span"
 
+function Badge({ className, variant, ...props }: BadgeProps) {
   return (
-    <Comp
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-      data-slot="badge"
-      data-variant={variant}
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
   )
 }
 

src/components/ui/breadcrumb.tsx

@@ -1,102 +1,108 @@
 import * as React from "react"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
 import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+const Breadcrumb = React.forwardRef<
-  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+  HTMLElement,
-}
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
 
-function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+const BreadcrumbList = React.forwardRef<
-  return (
+  HTMLOListElement,
-    <ol
+  React.ComponentPropsWithoutRef<"ol">
-      data-slot="breadcrumb-list"
+>(({ className, ...props }, ref) => (
-      className={cn(
+  <ol
-        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5",
+    ref={ref}
-        className
+    className={cn(
-      )}
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      {...props}
+      className
-    />
+    )}
-  )
+    {...props}
-}
+  />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
 
-function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+const BreadcrumbItem = React.forwardRef<
-  return (
+  HTMLLIElement,
-    <li
+  React.ComponentPropsWithoutRef<"li">
-      data-slot="breadcrumb-item"
+>(({ className, ...props }, ref) => (
-      className={cn("inline-flex items-center gap-1.5", className)}
+  <li
-      {...props}
+    ref={ref}
-    />
+    className={cn("inline-flex items-center gap-1.5", className)}
-  )
+    {...props}
-}
+  />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
 
-function BreadcrumbLink({
+const BreadcrumbLink = React.forwardRef<
-  asChild,
+  HTMLAnchorElement,
-  className,
+  React.ComponentPropsWithoutRef<"a"> & {
-  ...props
+    asChild?: boolean
-}: React.ComponentProps<"a"> & {
+  }
-  asChild?: boolean
+>(({ asChild, className, ...props }, ref) => {
-}) {
+  const Comp = asChild ? Slot : "a"
-  const Comp = asChild ? Slot.Root : "a"
 
   return (
     <Comp
-      data-slot="breadcrumb-link"
+      ref={ref}
       className={cn("transition-colors hover:text-foreground", className)}
       {...props}
     />
   )
-}
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
 
-function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+const BreadcrumbPage = React.forwardRef<
-  return (
+  HTMLSpanElement,
-    <span
+  React.ComponentPropsWithoutRef<"span">
-      data-slot="breadcrumb-page"
+>(({ className, ...props }, ref) => (
-      role="link"
+  <span
-      aria-disabled="true"
+    ref={ref}
-      aria-current="page"
+    role="link"
-      className={cn("font-normal text-foreground", className)}
+    aria-disabled="true"
-      {...props}
+    aria-current="page"
-    />
+    className={cn("font-normal text-foreground", className)}
-  )
+    {...props}
-}
+  />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
 
-function BreadcrumbSeparator({
+const BreadcrumbSeparator = ({
   children,
   className,
   ...props
-}: React.ComponentProps<"li">) {
+}: React.ComponentProps<"li">) => (
-  return (
+  <li
-    <li
+    role="presentation"
-      data-slot="breadcrumb-separator"
+    aria-hidden="true"
-      role="presentation"
+    className={cn("[&>svg]:size-3.5", className)}
-      aria-hidden="true"
+    {...props}
-      className={cn("[&>svg]:size-3.5", className)}
+  >
-      {...props}
+    {children ?? <ChevronRight />}
-    >
+  </li>
-      {children ?? <ChevronRight />}
+)
-    </li>
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
-  )
-}
 
-function BreadcrumbEllipsis({
+const BreadcrumbEllipsis = ({
   className,
   ...props
-}: React.ComponentProps<"span">) {
+}: React.ComponentProps<"span">) => (
-  return (
+  <span
-    <span
+    role="presentation"
-      data-slot="breadcrumb-ellipsis"
+    aria-hidden="true"
-      role="presentation"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
-      aria-hidden="true"
+    {...props}
-      className={cn("flex size-9 items-center justify-center", className)}
+  >
-      {...props}
+    <MoreHorizontal className="h-4 w-4" />
-    >
+    <span className="sr-only">More</span>
-      <MoreHorizontal className="size-4" />
+  </span>
-      <span className="sr-only">More</span>
+)
-    </span>
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
-  )
-}
 
 export {
   Breadcrumb,

src/components/ui/button-variants.ts

@@ -1,30 +1,25 @@
 import { cva } from "class-variance-authority"
 
 export const buttonVariants = cva(
-  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+          "border border-input hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
+        ghost: "hover:bg-accent hover:text-accent-foreground",
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        default: "h-10 px-4 py-2",
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-9 rounded-md px-3",
-        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-11 rounded-md px-8",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "h-10 w-10",
-        icon: "size-9",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
       },
     },
     defaultVariants: {
@@ -32,4 +27,4 @@ export const buttonVariants = cva(
       size: "default",
     },
   }
-)
+)

src/components/ui/button.tsx

@@ -1,31 +1,28 @@
 import * as React from "react"
-import { type VariantProps } from "class-variance-authority"
 import { Slot } from "@radix-ui/react-slot"
+import { type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "./button-variants"
 
-function Button({
+export interface ButtonProps
-  className,
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-  variant = "default",
+    VariantProps<typeof buttonVariants> {
-  size = "default",
+  asChild?: boolean
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot.Root : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      data-variant={variant}
-      data-size={size}
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
 }
 
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
 export { Button }

src/components/ui/calendar.tsx

@@ -1,221 +1,64 @@
-"use client"
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
 
-import * as React from "react"
+import { cn } from "@/lib/utils";
-import {
+import { buttonVariants } from "@/components/ui/button-variants";
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react"
-import {
-  DayPicker,
-  getDefaultClassNames,
-  type DayButton,
-} from "react-day-picker"
 
-import { cn } from "@/lib/utils"
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
-import { Button } from "@/components/ui/button"
-import { buttonVariants } from "@/components/ui/button-variants"
 
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
-  captionLayout = "label",
-  buttonVariant = "ghost",
-  formatters,
-  components,
   ...props
-}: React.ComponentProps<typeof DayPicker> & {
+}: CalendarProps) {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
-}) {
-  const defaultClassNames = getDefaultClassNames()
-
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn(
+      className={cn("p-3", className)}
-        "group/calendar bg-background p-3 [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
-      )}
-      captionLayout={captionLayout}
-      formatters={{
-        formatMonthDropdown: (date) =>
-          date.toLocaleString("default", { month: "short" }),
-        ...formatters,
-      }}
       classNames={{
-        root: cn("w-fit", defaultClassNames.root),
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        months: cn(
+        month: "space-y-4",
-          "relative flex flex-col gap-4 md:flex-row",
+        caption: "flex justify-center pt-1 relative items-center",
-          defaultClassNames.months
+        caption_label: "text-sm font-medium",
-        ),
+        nav: "space-x-1 flex items-center",
-        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav_button: cn(
-        nav: cn(
+          buttonVariants({ variant: "outline" }),
-          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-          defaultClassNames.nav
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
-          defaultClassNames.button_previous
-        ),
-        button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
-          defaultClassNames.button_next
-        ),
-        month_caption: cn(
-          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
-          defaultClassNames.month_caption
-        ),
-        dropdowns: cn(
-          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
-          defaultClassNames.dropdowns
-        ),
-        dropdown_root: cn(
-          "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
-          defaultClassNames.dropdown_root
-        ),
-        dropdown: cn(
-          "absolute inset-0 bg-popover opacity-0",
-          defaultClassNames.dropdown
-        ),
-        caption_label: cn(
-          "font-medium select-none",
-          captionLayout === "label"
-            ? "text-sm"
-            : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
-          defaultClassNames.caption_label
-        ),
-        table: "w-full border-collapse",
-        weekdays: cn("flex", defaultClassNames.weekdays),
-        weekday: cn(
-          "flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none",
-          defaultClassNames.weekday
-        ),
-        week: cn("mt-2 flex w-full", defaultClassNames.week),
-        week_number_header: cn(
-          "w-(--cell-size) select-none",
-          defaultClassNames.week_number_header
-        ),
-        week_number: cn(
-          "text-[0.8rem] text-muted-foreground select-none",
-          defaultClassNames.week_number
         ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day: cn(
-          "group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md",
+          buttonVariants({ variant: "ghost" }),
-          props.showWeekNumber
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
-            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
-            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
-          defaultClassNames.day
         ),
-        range_start: cn(
+        day_range_end: "day-range-end",
-          "rounded-l-md bg-accent",
+        day_selected:
-          defaultClassNames.range_start
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        ),
+        day_today: "bg-accent text-accent-foreground",
-        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        day_outside:
-        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        today: cn(
+        day_disabled: "text-muted-foreground opacity-50",
-          "rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none",
+        day_range_middle:
-          defaultClassNames.today
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        ),
+        day_hidden: "invisible",
-        outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
-        ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
-        ),
-        hidden: cn("invisible", defaultClassNames.hidden),
         ...classNames,
       }}
       components={{
-        Root: ({ className, rootRef, ...props }) => {
+        IconLeft: ({ ..._props }) => <ChevronLeft className="h-4 w-4" />,
-          return (
+        IconRight: ({ ..._props }) => <ChevronRight className="h-4 w-4" />,
-            <div
-              data-slot="calendar"
-              ref={rootRef}
-              className={cn(className)}
-              {...props}
-            />
-          )
-        },
-        Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === "left") {
-            return (
-              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            )
-          }
-
-          if (orientation === "right") {
-            return (
-              <ChevronRightIcon
-                className={cn("size-4", className)}
-                {...props}
-              />
-            )
-          }
-
-          return (
-            <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          )
-        },
-        DayButton: CalendarDayButton,
-        WeekNumber: ({ children, ...props }) => {
-          return (
-            <td {...props}>
-              <div className="flex size-(--cell-size) items-center justify-center text-center">
-                {children}
-              </div>
-            </td>
-          )
-        },
-        ...components,
       }}
       {...props}
     />
-  )
+  );
 }
+Calendar.displayName = "Calendar";
 
-function CalendarDayButton({
+export { Calendar };
-  className,
-  day,
-  modifiers,
-  ...props
-}: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
-
-  const ref = React.useRef<HTMLButtonElement>(null)
-  React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
-
-  return (
-    <Button
-      ref={ref}
-      variant="ghost"
-      size="icon"
-      data-day={day.date.toLocaleDateString()}
-      data-selected-single={
-        modifiers.selected &&
-        !modifiers.range_start &&
-        !modifiers.range_end &&
-        !modifiers.range_middle
-      }
-      data-range-start={modifiers.range_start}
-      data-range-end={modifiers.range_end}
-      data-range-middle={modifiers.range_middle}
-      className={cn(
-        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
-        defaultClassNames.day,
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Calendar, CalendarDayButton }

src/components/ui/card.tsx

@@ -2,91 +2,78 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-function Card({ className, ...props }: React.ComponentProps<"div">) {
+const Card = React.forwardRef<
-  return (
+  HTMLDivElement,
-    <div
+  React.HTMLAttributes<HTMLDivElement>
-      data-slot="card"
+>(({ className, ...props }, ref) => (
-      className={cn(
+  <div
-        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
+    ref={ref}
-        className
+    className={cn(
-      )}
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      {...props}
+      className
-    />
+    )}
-  )
+    {...props}
-}
+  />
+))
+Card.displayName = "Card"
 
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+const CardHeader = React.forwardRef<
-  return (
+  HTMLDivElement,
-    <div
+  React.HTMLAttributes<HTMLDivElement>
-      data-slot="card-header"
+>(({ className, ...props }, ref) => (
-      className={cn(
+  <div
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+    ref={ref}
-        className
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
-      )}
+    {...props}
-      {...props}
+  />
-    />
+))
-  )
+CardHeader.displayName = "CardHeader"
-}
 
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+const CardTitle = React.forwardRef<
-  return (
+  HTMLParagraphElement,
-    <div
+  React.HTMLAttributes<HTMLHeadingElement>
-      data-slot="card-title"
+>(({ className, ...props }, ref) => (
-      className={cn("leading-none font-semibold", className)}
+  <h3
-      {...props}
+    ref={ref}
-    />
+    className={cn(
-  )
+      "text-2xl font-semibold leading-none tracking-tight",
-}
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
 
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+const CardDescription = React.forwardRef<
-  return (
+  HTMLParagraphElement,
-    <div
+  React.HTMLAttributes<HTMLParagraphElement>
-      data-slot="card-description"
+>(({ className, ...props }, ref) => (
-      className={cn("text-sm text-muted-foreground", className)}
+  <p
-      {...props}
+    ref={ref}
-    />
+    className={cn("text-sm text-muted-foreground", className)}
-  )
+    {...props}
-}
+  />
+))
+CardDescription.displayName = "CardDescription"
 
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+const CardContent = React.forwardRef<
-  return (
+  HTMLDivElement,
-    <div
+  React.HTMLAttributes<HTMLDivElement>
-      data-slot="card-action"
+>(({ className, ...props }, ref) => (
-      className={cn(
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+))
-        className
+CardContent.displayName = "CardContent"
-      )}
-      {...props}
-    />
-  )
-}
 
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+const CardFooter = React.forwardRef<
-  return (
+  HTMLDivElement,
-    <div
+  React.HTMLAttributes<HTMLDivElement>
-      data-slot="card-content"
+>(({ className, ...props }, ref) => (
-      className={cn("px-6", className)}
+  <div
-      {...props}
+    ref={ref}
-    />
+    className={cn("flex items-center p-6 pt-0", className)}
-  )
+    {...props}
-}
+  />
+))
+CardFooter.displayName = "CardFooter"
 
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}

src/components/ui/carousel.tsx

@@ -40,109 +40,124 @@ function useCarousel() {
   return context
 }
 
-function Carousel({
+const Carousel = React.forwardRef<
-  orientation = "horizontal",
+  HTMLDivElement,
-  opts,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
-  setApi,
+>(
-  plugins,
+  (
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & CarouselProps) {
-  const [carouselRef, api] = useEmblaCarousel(
     {
-      ...opts,
+      orientation = "horizontal",
-      axis: orientation === "horizontal" ? "x" : "y",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
     },
-    plugins
+    ref
-  )
+  ) => {
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [carouselRef, api] = useEmblaCarousel(
-  const [canScrollNext, setCanScrollNext] = React.useState(false)
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
 
-  const onSelect = React.useCallback((api: CarouselApi) => {
+    const onSelect = React.useCallback((api: CarouselApi) => {
-    if (!api) return
+      if (!api) {
-    setCanScrollPrev(api.canScrollPrev())
+        return
-    setCanScrollNext(api.canScrollNext())
-  }, [])
-
-  const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev()
-  }, [api])
-
-  const scrollNext = React.useCallback(() => {
-    api?.scrollNext()
-  }, [api])
-
-  const handleKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === "ArrowLeft") {
-        event.preventDefault()
-        scrollPrev()
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault()
-        scrollNext()
       }
-    },
-    [scrollPrev, scrollNext]
-  )
 
-  React.useEffect(() => {
+      setCanScrollPrev(api.canScrollPrev())
-    if (!api || !setApi) return
+      setCanScrollNext(api.canScrollNext())
-    setApi(api)
+    }, [])
-  }, [api, setApi])
 
-  React.useEffect(() => {
+    const scrollPrev = React.useCallback(() => {
-    if (!api) return
+      api?.scrollPrev()
-    // Prime state from the external carousel API, then subscribe for updates.
+    }, [api])
-    // This is the canonical external-system sync pattern for useEffect.
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    onSelect(api)
-    api.on("reInit", onSelect)
-    api.on("select", onSelect)
 
-    return () => {
+    const scrollNext = React.useCallback(() => {
-      api?.off("select", onSelect)
+      api?.scrollNext()
-    }
+    }, [api])
-  }, [api, onSelect])
 
-  return (
+    const handleKeyDown = React.useCallback(
-    <CarouselContext.Provider
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
-      value={{
+        if (event.key === "ArrowLeft") {
-        carouselRef,
+          event.preventDefault()
-        api: api,
+          scrollPrev()
-        opts,
+        } else if (event.key === "ArrowRight") {
-        orientation:
+          event.preventDefault()
-          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollNext()
-        scrollPrev,
+        }
-        scrollNext,
+      },
-        canScrollPrev,
+      [scrollPrev, scrollNext]
-        canScrollNext,
+    )
-      }}
+
-    >
+    React.useEffect(() => {
-      <div
+      if (!api || !setApi) {
-        onKeyDownCapture={handleKeyDown}
+        return
-        className={cn("relative", className)}
+      }
-        role="region"
+
-        aria-roledescription="carousel"
+      setApi(api)
-        data-slot="carousel"
+    }, [api, setApi])
-        {...props}
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on("reInit", onSelect)
+      api.on("select", onSelect)
+
+      return () => {
+        api?.off("select", onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
       >
-        {children}
+        <div
-      </div>
+          ref={ref}
-    </CarouselContext.Provider>
+          onKeyDownCapture={handleKeyDown}
-  )
+          className={cn("relative", className)}
-}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = "Carousel"
 
-function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
   const { carouselRef, orientation } = useCarousel()
 
   return (
-    <div
+    <div ref={carouselRef} className="overflow-hidden">
-      ref={carouselRef}
-      className="overflow-hidden"
-      data-slot="carousel-content"
-    >
       <div
+        ref={ref}
         className={cn(
           "flex",
           orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
@@ -152,16 +167,20 @@ function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
       />
     </div>
   )
-}
+})
+CarouselContent.displayName = "CarouselContent"
 
-function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
   const { orientation } = useCarousel()
 
   return (
     <div
+      ref={ref}
       role="group"
       aria-roledescription="slide"
-      data-slot="carousel-item"
       className={cn(
         "min-w-0 shrink-0 grow-0 basis-full",
         orientation === "horizontal" ? "pl-4" : "pt-4",
@@ -170,25 +189,24 @@ function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
       {...props}
     />
   )
-}
+})
+CarouselItem.displayName = "CarouselItem"
 
-function CarouselPrevious({
+const CarouselPrevious = React.forwardRef<
-  className,
+  HTMLButtonElement,
-  variant = "outline",
+  React.ComponentProps<typeof Button>
-  size = "icon",
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  ...props
-}: React.ComponentProps<typeof Button>) {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel()
 
   return (
     <Button
-      data-slot="carousel-previous"
+      ref={ref}
       variant={variant}
       size={size}
       className={cn(
-        "absolute size-8 rounded-full",
+        "absolute  h-8 w-8 rounded-full",
         orientation === "horizontal"
-          ? "top-1/2 -left-12 -translate-y-1/2"
+          ? "-left-12 top-1/2 -translate-y-1/2"
           : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       )}
@@ -196,29 +214,28 @@ function CarouselPrevious({
       onClick={scrollPrev}
       {...props}
     >
-      <ArrowLeft />
+      <ArrowLeft className="h-4 w-4" />
       <span className="sr-only">Previous slide</span>
     </Button>
   )
-}
+})
+CarouselPrevious.displayName = "CarouselPrevious"
 
-function CarouselNext({
+const CarouselNext = React.forwardRef<
-  className,
+  HTMLButtonElement,
-  variant = "outline",
+  React.ComponentProps<typeof Button>
-  size = "icon",
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  ...props
-}: React.ComponentProps<typeof Button>) {
   const { orientation, scrollNext, canScrollNext } = useCarousel()
 
   return (
     <Button
-      data-slot="carousel-next"
+      ref={ref}
       variant={variant}
       size={size}
       className={cn(
-        "absolute size-8 rounded-full",
+        "absolute h-8 w-8 rounded-full",
         orientation === "horizontal"
-          ? "top-1/2 -right-12 -translate-y-1/2"
+          ? "-right-12 top-1/2 -translate-y-1/2"
           : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       )}
@@ -226,11 +243,12 @@ function CarouselNext({
       onClick={scrollNext}
       {...props}
     >
-      <ArrowRight />
+      <ArrowRight className="h-4 w-4" />
       <span className="sr-only">Next slide</span>
     </Button>
   )
-}
+})
+CarouselNext.displayName = "CarouselNext"
 
 export {
   type CarouselApi,

src/components/ui/chart.tsx

@@ -1,27 +1,20 @@
-"use client"
-
 import * as React from "react"
 import * as RechartsPrimitive from "recharts"
-import type { TooltipValueType } from "recharts"
 
 import { cn } from "@/lib/utils"
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const
 
-const INITIAL_DIMENSION = { width: 320, height: 200 } as const
+export type ChartConfig = {
-type TooltipNameType = number | string
+  [k in string]: {
-
-export type ChartConfig = Record<
-  string,
-  {
     label?: React.ReactNode
     icon?: React.ComponentType
   } & (
     | { color?: string; theme?: never }
     | { color?: never; theme: Record<keyof typeof THEMES, string> }
   )
->
+}
 
 type ChartContextProps = {
   config: ChartConfig
@@ -39,51 +32,42 @@ function useChart() {
   return context
 }
 
-function ChartContainer({
+const ChartContainer = React.forwardRef<
-  id,
+  HTMLDivElement,
-  className,
+  React.ComponentProps<"div"> & {
-  children,
+    config: ChartConfig
-  config,
+    children: React.ComponentProps<
-  initialDimension = INITIAL_DIMENSION,
+      typeof RechartsPrimitive.ResponsiveContainer
-  ...props
+    >["children"]
-}: React.ComponentProps<"div"> & {
-  config: ChartConfig
-  children: React.ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"]
-  initialDimension?: {
-    width: number
-    height: number
   }
-}) {
+>(({ id, className, children, config, ...props }, ref) => {
   const uniqueId = React.useId()
-  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
 
   return (
     <ChartContext.Provider value={{ config }}>
       <div
-        data-slot="chart"
         data-chart={chartId}
+        ref={ref}
         className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
           className
         )}
         {...props}
       >
         <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer
+        <RechartsPrimitive.ResponsiveContainer>
-          initialDimension={initialDimension}
-        >
           {children}
         </RechartsPrimitive.ResponsiveContainer>
       </div>
     </ChartContext.Provider>
   )
-}
+})
+ChartContainer.displayName = "Chart"
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme ?? config.color
+    ([_, config]) => config.theme || config.color
   )
 
   if (!colorConfig.length) {
@@ -100,7 +84,7 @@ ${prefix} [data-chart=${id}] {
 ${colorConfig
   .map(([key, itemConfig]) => {
     const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
       itemConfig.color
     return color ? `  --color-${key}: ${color};` : null
   })
@@ -116,97 +100,97 @@ ${colorConfig
 
 const ChartTooltip = RechartsPrimitive.Tooltip
 
-function ChartTooltipContent({
+const ChartTooltipContent = React.forwardRef<
-  active,
+  HTMLDivElement,
-  payload,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  className,
+    React.ComponentProps<"div"> & {
-  indicator = "dot",
+      hideLabel?: boolean
-  hideLabel = false,
+      hideIndicator?: boolean
-  hideIndicator = false,
+      indicator?: "line" | "dot" | "dashed"
-  label,
+      nameKey?: string
-  labelFormatter,
+      labelKey?: string
-  labelClassName,
+    }
-  formatter,
+>(
-  color,
+  (
-  nameKey,
+    {
-  labelKey,
+      active,
-}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+      payload,
-  React.ComponentProps<"div"> & {
+      className,
-    hideLabel?: boolean
+      indicator = "dot",
-    hideIndicator?: boolean
+      hideLabel = false,
-    indicator?: "line" | "dot" | "dashed"
+      hideIndicator = false,
-    nameKey?: string
+      label,
-    labelKey?: string
+      labelFormatter,
-  } & Omit<
+      labelClassName,
-    RechartsPrimitive.DefaultTooltipContentProps<
+      formatter,
-      TooltipValueType,
+      color,
-      TooltipNameType
+      nameKey,
-    >,
+      labelKey,
-    "accessibilityLayer"
+    },
-  >) {
+    ref
-  const { config } = useChart()
+  ) => {
+    const { config } = useChart()
 
-  const tooltipLabel = React.useMemo(() => {
+    const tooltipLabel = React.useMemo(() => {
-    if (hideLabel || !payload?.length) {
+      if (hideLabel || !payload?.length) {
+        return null
+      }
+
+      const [item] = payload
+      const key = `${labelKey || item.dataKey || item.name || "value"}`
+      const itemConfig = getPayloadConfigFromPayload(config, item, key)
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        )
+      }
+
+      if (!value) {
+        return null
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ])
+
+    if (!active || !payload?.length) {
       return null
     }
 
-    const [item] = payload
+    const nestLabel = payload.length === 1 && indicator !== "dot"
-    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`
-    const itemConfig = getPayloadConfigFromPayload(config, item, key)
-    const value =
-      !labelKey && typeof label === "string"
-        ? (config[label]?.label ?? label)
-        : itemConfig?.label
 
-    if (labelFormatter) {
+    return (
-      return (
+      <div
-        <div className={cn("font-medium", labelClassName)}>
+        ref={ref}
-          {labelFormatter(value, payload)}
+        className={cn(
-        </div>
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
-      )
+          className
-    }
+        )}
-
+      >
-    if (!value) {
+        {!nestLabel ? tooltipLabel : null}
-      return null
+        <div className="grid gap-1.5">
-    }
+          {payload.map((item, index) => {
-
+            const key = `${nameKey || item.name || item.dataKey || "value"}`
-    return <div className={cn("font-medium", labelClassName)}>{value}</div>
-  }, [
-    label,
-    labelFormatter,
-    payload,
-    hideLabel,
-    labelClassName,
-    config,
-    labelKey,
-  ])
-
-  if (!active || !payload?.length) {
-    return null
-  }
-
-  const nestLabel = payload.length === 1 && indicator !== "dot"
-
-  return (
-    <div
-      className={cn(
-        "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
-        className
-      )}
-    >
-      {!nestLabel ? tooltipLabel : null}
-      <div className="grid gap-1.5">
-        {payload
-          .filter((item) => item.type !== "none")
-          .map((item, index) => {
-            const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`
             const itemConfig = getPayloadConfigFromPayload(config, item, key)
-            const indicatorColor = color ?? item.payload?.fill ?? item.color
+            const indicatorColor = color || item.payload.fill || item.color
 
             return (
               <div
-                key={index}
+                key={item.dataKey}
                 className={cn(
                   "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                   indicator === "dot" && "items-center"
@@ -222,7 +206,7 @@ function ChartTooltipContent({
                       !hideIndicator && (
                         <div
                           className={cn(
-                            "shrink-0 rounded-[2px] border-border bg-(--color-bg)",
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
                             {
                               "h-2.5 w-2.5": indicator === "dot",
                               "w-1": indicator === "line",
@@ -249,14 +233,12 @@ function ChartTooltipContent({
                       <div className="grid gap-1.5">
                         {nestLabel ? tooltipLabel : null}
                         <span className="text-muted-foreground">
-                          {itemConfig?.label ?? item.name}
+                          {itemConfig?.label || item.name}
                         </span>
                       </div>
-                      {item.value != null && (
+                      {item.value && (
-                        <span className="font-mono font-medium text-foreground tabular-nums">
+                        <span className="font-mono font-medium tabular-nums text-foreground">
-                          {typeof item.value === "number"
+                          {item.value.toLocaleString()}
-                            ? item.value.toLocaleString()
-                            : String(item.value)}
                         </span>
                       )}
                     </div>
@@ -265,46 +247,49 @@ function ChartTooltipContent({
               </div>
             )
           })}
+        </div>
       </div>
-    </div>
+    )
-  )
+  }
-}
+)
+ChartTooltipContent.displayName = "ChartTooltip"
 
 const ChartLegend = RechartsPrimitive.Legend
 
-function ChartLegendContent({
+const ChartLegendContent = React.forwardRef<
-  className,
+  HTMLDivElement,
-  hideIcon = false,
+  React.ComponentProps<"div"> &
-  payload,
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-  verticalAlign = "bottom",
+      hideIcon?: boolean
-  nameKey,
+      nameKey?: string
-}: React.ComponentProps<"div"> & {
+    }
-  hideIcon?: boolean
+>(
-  nameKey?: string
+  (
-} & RechartsPrimitive.DefaultLegendContentProps) {
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
-  const { config } = useChart()
+    ref
+  ) => {
+    const { config } = useChart()
 
-  if (!payload?.length) {
+    if (!payload?.length) {
-    return null
+      return null
-  }
+    }
 
-  return (
+    return (
-    <div
+      <div
-      className={cn(
+        ref={ref}
-        "flex items-center justify-center gap-4",
+        className={cn(
-        verticalAlign === "top" ? "pb-3" : "pt-3",
+          "flex items-center justify-center gap-4",
-        className
+          verticalAlign === "top" ? "pb-3" : "pt-3",
-      )}
+          className
-    >
+        )}
-      {payload
+      >
-        .filter((item) => item.type !== "none")
+        {payload.map((item) => {
-        .map((item, index) => {
+          const key = `${nameKey || item.dataKey || "value"}`
-          const key = `${nameKey ?? item.dataKey ?? "value"}`
           const itemConfig = getPayloadConfigFromPayload(config, item, key)
 
           return (
             <div
-              key={index}
+              key={item.value}
               className={cn(
                 "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
               )}
@@ -323,9 +308,11 @@ function ChartLegendContent({
             </div>
           )
         })}
-    </div>
+      </div>
-  )
+    )
-}
+  }
+)
+ChartLegendContent.displayName = "ChartLegend"
 
 // Helper to extract item config from a payload.
 function getPayloadConfigFromPayload(
@@ -361,7 +348,9 @@ function getPayloadConfigFromPayload(
     ] as string
   }
 
-  return configLabelKey in config ? config[configLabelKey] : config[key]
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
 }
 
 export {

src/components/ui/checkbox.tsx

@@ -1,30 +1,28 @@
 import * as React from "react"
-import { CheckIcon } from "lucide-react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-function Checkbox({
+const Checkbox = React.forwardRef<
-  className,
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+>(({ className, ...props }, ref) => (
-  return (
+  <CheckboxPrimitive.Root
-    <CheckboxPrimitive.Root
+    ref={ref}
-      data-slot="checkbox"
+    className={cn(
-      className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-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 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-        "peer size-4 shrink-0 rounded-lg border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
+      className
-        className
+    )}
-      )}
+    {...props}
-      {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
     >
-      <CheckboxPrimitive.Indicator
+      <Check className="h-4 w-4" />
-        data-slot="checkbox-indicator"
+    </CheckboxPrimitive.Indicator>
-        className="grid place-content-center text-current transition-none"
+  </CheckboxPrimitive.Root>
-      >
+))
-        <CheckIcon className="size-3.5" />
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  )
-}
 
 export { Checkbox }

src/components/ui/collapsible.tsx

@@ -1,33 +1,9 @@
-"use client"
-
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 
-function Collapsible({
+const Collapsible = CollapsiblePrimitive.Root
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
-}
 
-function CollapsibleTrigger({
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleTrigger
-      data-slot="collapsible-trigger"
-      {...props}
-    />
-  )
-}
 
-function CollapsibleContent({
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleContent
-      data-slot="collapsible-content"
-      {...props}
-    />
-  )
-}
 
 export { Collapsible, CollapsibleTrigger, CollapsibleContent }

src/components/ui/command.tsx

@@ -1,56 +1,33 @@
 import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
 import { Command as CommandPrimitive } from "cmdk"
-import { SearchIcon } from "lucide-react"
+import { Search } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import {
+import { Dialog, DialogContent } from "@/components/ui/dialog"
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
 
-function Command({
+const Command = React.forwardRef<
-  className,
+  React.ElementRef<typeof CommandPrimitive>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
-}: React.ComponentProps<typeof CommandPrimitive>) {
+>(({ className, ...props }, ref) => (
-  return (
+  <CommandPrimitive
-    <CommandPrimitive
+    ref={ref}
-      data-slot="command"
+    className={cn(
-      className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
-        className
+    )}
-      )}
+    {...props}
-      {...props}
+  />
-    />
+))
-  )
+Command.displayName = CommandPrimitive.displayName
-}
 
-function CommandDialog({
+type CommandDialogProps = DialogProps
-  title = "Command Palette",
+
-  description = "Search for a command to run...",
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
-  children,
-  className,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof Dialog> & {
-  title?: string
-  description?: string
-  className?: string
-  showCloseButton?: boolean
-}) {
   return (
     <Dialog {...props}>
-      <DialogHeader className="sr-only">
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <DialogTitle>{title}</DialogTitle>
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
-      <DialogContent
-        className={cn("overflow-hidden p-0", className)}
-        showCloseButton={showCloseButton}
-      >
-        <Command className="**:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground **:[[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -58,108 +35,101 @@ function CommandDialog({
   )
 }
 
-function CommandInput({
+const CommandInput = React.forwardRef<
-  className,
+  React.ElementRef<typeof CommandPrimitive.Input>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+>(({ className, ...props }, ref) => (
-  return (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <div
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-      data-slot="command-input-wrapper"
+    <CommandPrimitive.Input
-      className="flex h-9 items-center gap-2 border-b px-3"
+      ref={ref}
-    >
-      <SearchIcon className="size-4 shrink-0 opacity-50" />
-      <CommandPrimitive.Input
-        data-slot="command-input"
-        className={cn(
-          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function CommandList({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
-  return (
-    <CommandPrimitive.List
-      data-slot="command-list"
       className={cn(
-        "max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto",
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
     />
-  )
+  </div>
-}
+))
 
-function CommandEmpty({
+CommandInput.displayName = CommandPrimitive.Input.displayName
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return (
-    <CommandPrimitive.Empty
-      data-slot="command-empty"
-      className="py-6 text-center text-sm"
-      {...props}
-    />
-  )
-}
 
-function CommandGroup({
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <CommandPrimitive.Group
-      data-slot="command-group"
-      className={cn(
-        "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
-  return (
-    <CommandPrimitive.Separator
-      data-slot="command-separator"
-      className={cn("-mx-1 h-px bg-border", className)}
-      {...props}
-    />
-  )
-}
-
-function CommandItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
-  return (
-    <CommandPrimitive.Item
-      data-slot="command-item"
-      className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
   return (
     <span
-      data-slot="command-shortcut"
       className={cn(
         "ml-auto text-xs tracking-widest text-muted-foreground",
         className
@@ -168,6 +138,7 @@ function CommandShortcut({
     />
   )
 }
+CommandShortcut.displayName = "CommandShortcut"
 
 export {
   Command,

src/components/ui/context-menu.tsx

@@ -1,227 +1,174 @@
 import * as React from "react"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-function ContextMenu({
+const ContextMenu = ContextMenuPrimitive.Root
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
-  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
-}
 
-function ContextMenuTrigger({
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
-  return (
-    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
-  )
-}
 
-function ContextMenuGroup({
+const ContextMenuGroup = ContextMenuPrimitive.Group
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
-  return (
-    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
-  )
-}
 
-function ContextMenuPortal({
+const ContextMenuPortal = ContextMenuPrimitive.Portal
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
-  return (
-    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
-  )
-}
 
-function ContextMenuSub({
+const ContextMenuSub = ContextMenuPrimitive.Sub
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
-  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
-}
 
-function ContextMenuRadioGroup({
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
-  return (
-    <ContextMenuPrimitive.RadioGroup
-      data-slot="context-menu-radio-group"
-      {...props}
-    />
-  )
-}
 
-function ContextMenuSubTrigger({
+const ContextMenuSubTrigger = React.forwardRef<
-  className,
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  inset,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-  children,
+    inset?: boolean
-  ...props
+  }
-}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+>(({ className, inset, children, ...props }, ref) => (
-  inset?: boolean
+  <ContextMenuPrimitive.SubTrigger
-}) {
+    ref={ref}
-  return (
+    className={cn(
-    <ContextMenuPrimitive.SubTrigger
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      data-slot="context-menu-sub-trigger"
+      inset && "pl-8",
-      data-inset={inset}
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
       className={cn(
-        "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto" />
-    </ContextMenuPrimitive.SubTrigger>
-  )
-}
-
-function ContextMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
-  return (
-    <ContextMenuPrimitive.SubContent
-      data-slot="context-menu-sub-content"
-      className={cn(
-        "z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       )}
       {...props}
     />
-  )
+  </ContextMenuPrimitive.Portal>
-}
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
 
-function ContextMenuContent({
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
   className,
   ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <ContextMenuPrimitive.Portal>
-      <ContextMenuPrimitive.Content
-        data-slot="context-menu-content"
-        className={cn(
-          "z-50 max-h-(--radix-context-menu-content-available-height) min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          className
-        )}
-        {...props}
-      />
-    </ContextMenuPrimitive.Portal>
-  )
-}
-
-function ContextMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
-  return (
-    <ContextMenuPrimitive.Item
-      data-slot="context-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ContextMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
-  return (
-    <ContextMenuPrimitive.CheckboxItem
-      data-slot="context-menu-checkbox-item"
-      className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <ContextMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </ContextMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.CheckboxItem>
-  )
-}
-
-function ContextMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
-  return (
-    <ContextMenuPrimitive.RadioItem
-      data-slot="context-menu-radio-item"
-      className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <ContextMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </ContextMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.RadioItem>
-  )
-}
-
-function ContextMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
-  inset?: boolean
-}) {
-  return (
-    <ContextMenuPrimitive.Label
-      data-slot="context-menu-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium text-foreground data-inset:pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ContextMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
-  return (
-    <ContextMenuPrimitive.Separator
-      data-slot="context-menu-separator"
-      className={cn("-mx-1 my-1 h-px bg-border", className)}
-      {...props}
-    />
-  )
-}
-
-function ContextMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
   return (
     <span
-      data-slot="context-menu-shortcut"
       className={cn(
         "ml-auto text-xs tracking-widest text-muted-foreground",
         className
@@ -230,6 +177,7 @@ function ContextMenuShortcut({
     />
   )
 }
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
 
 export {
   ContextMenu,

src/components/ui/dialog.tsx

@@ -1,158 +1,120 @@
-"use client"
-
 import * as React from "react"
-import { XIcon } from "lucide-react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
 
-function Dialog({
+const Dialog = DialogPrimitive.Root
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
-}
 
-function DialogTrigger({
+const DialogTrigger = DialogPrimitive.Trigger
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
-}
 
-function DialogPortal({
+const DialogPortal = DialogPrimitive.Portal
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
-}
 
-function DialogClose({
+const DialogClose = DialogPrimitive.Close
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
-}
 
-function DialogOverlay({
+const DialogOverlay = React.forwardRef<
-  className,
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+>(({ className, ...props }, ref) => (
-  return (
+  <DialogPrimitive.Overlay
-    <DialogPrimitive.Overlay
+    ref={ref}
-      data-slot="dialog-overlay"
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
       className={cn(
-        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-4 sm:p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg max-h-[calc(100vh-2rem)] max-h-[calc(100dvh-2rem)] overflow-y-auto",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
-}) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
-}
-
-function DialogFooter({
-  className,
-  showCloseButton = false,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & {
-  showCloseButton?: boolean
-}) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
         className
       )}
       {...props}
     >
       {children}
-      {showCloseButton && (
+      <DialogPrimitive.Close className="absolute right-3 top-3 sm:right-4 sm:top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <DialogPrimitive.Close asChild>
+        <X className="h-4 w-4" />
-          <Button variant="outline">Close</Button>
+        <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
+      </DialogPrimitive.Close>
-      )}
+    </DialogPrimitive.Content>
-    </div>
+  </DialogPortal>
-  )
+))
-}
+DialogContent.displayName = DialogPrimitive.Content.displayName
 
-function DialogTitle({
+const DialogHeader = ({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+}: React.HTMLAttributes<HTMLDivElement>) => (
-  return (
+  <div
-    <DialogPrimitive.Title
+    className={cn(
-      data-slot="dialog-title"
+      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className={cn("text-lg leading-none font-semibold", className)}
+      className
-      {...props}
+    )}
-    />
+    {...props}
-  )
+  />
-}
+)
+DialogHeader.displayName = "DialogHeader"
 
-function DialogDescription({
+const DialogFooter = ({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+}: React.HTMLAttributes<HTMLDivElement>) => (
-  return (
+  <div
-    <DialogPrimitive.Description
+    className={cn(
-      data-slot="dialog-description"
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className={cn("text-sm text-muted-foreground", className)}
+      className
-      {...props}
+    )}
-    />
+    {...props}
-  )
+  />
-}
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
 
 export {
   Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
   DialogPortal,
-  DialogTitle,
+  DialogOverlay,
+  DialogClose,
   DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
 }

src/components/ui/drawer.tsx

@@ -3,121 +3,104 @@ import { Drawer as DrawerPrimitive } from "vaul"
 
 import { cn } from "@/lib/utils"
 
-function Drawer({
+const Drawer = ({
+  shouldScaleBackground = true,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+  <DrawerPrimitive.Root
-}
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
 
-function DrawerTrigger({
+const DrawerTrigger = DrawerPrimitive.Trigger
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
-  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
-}
 
-function DrawerPortal({
+const DrawerPortal = DrawerPrimitive.Portal
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
-  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
-}
 
-function DrawerClose({
+const DrawerClose = DrawerPrimitive.Close
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
-  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
-}
 
-function DrawerOverlay({
+const DrawerOverlay = React.forwardRef<
-  className,
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
-}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+>(({ className, ...props }, ref) => (
-  return (
+  <DrawerPrimitive.Overlay
-    <DrawerPrimitive.Overlay
+    ref={ref}
-      data-slot="drawer-overlay"
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
       className={cn(
-        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
         className
       )}
       {...props}
-    />
+    >
-  )
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-}
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
 
-function DrawerContent({
+const DrawerHeader = ({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
-  return (
-    <DrawerPortal data-slot="drawer-portal">
-      <DrawerOverlay />
-      <DrawerPrimitive.Content
-        data-slot="drawer-content"
-        className={cn(
-          "group/drawer-content fixed z-50 flex h-auto flex-col bg-background",
-          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
-          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
-          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
-          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
-          className
-        )}
-        {...props}
-      >
-        <div className="mx-auto mt-4 hidden h-2 w-25 shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
-        {children}
-      </DrawerPrimitive.Content>
-    </DrawerPortal>
-  )
-}
-
-function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="drawer-header"
-      className={cn(
-        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="drawer-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-      {...props}
-    />
-  )
-}
-
-function DrawerTitle({
   className,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+}: React.HTMLAttributes<HTMLDivElement>) => (
-  return (
+  <div
-    <DrawerPrimitive.Title
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
-      data-slot="drawer-title"
+    {...props}
-      className={cn("font-semibold text-foreground", className)}
+  />
-      {...props}
+)
-    />
+DrawerHeader.displayName = "DrawerHeader"
-  )
-}
 
-function DrawerDescription({
+const DrawerFooter = ({
   className,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+}: React.HTMLAttributes<HTMLDivElement>) => (
-  return (
+  <div
-    <DrawerPrimitive.Description
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-      data-slot="drawer-description"
+    {...props}
-      className={cn("text-sm text-muted-foreground", className)}
+  />
-      {...props}
+)
-    />
+DrawerFooter.displayName = "DrawerFooter"
-  )
+
-}
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
 
 export {
   Drawer,

src/components/ui/dropdown-menu.tsx

@@ -1,257 +1,198 @@
-"use client"
-
 import * as React from "react"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-function DropdownMenu({
+const DropdownMenu = DropdownMenuPrimitive.Root
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
-}
 
-function DropdownMenuPortal({
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
-}
 
-function DropdownMenuTrigger({
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  )
-}
 
-function DropdownMenuContent({
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
-  className,
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          className
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  )
-}
 
-function DropdownMenuGroup({
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
-}
 
-function DropdownMenuItem({
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
-  className,
+
-  inset,
+const DropdownMenuSubTrigger = React.forwardRef<
-  variant = "default",
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
-  inset?: boolean
+  }
-  variant?: "default" | "destructive"
+>(({ className, inset, children, ...props }, ref) => (
-}) {
+  <DropdownMenuPrimitive.SubTrigger
-  return (
+    ref={ref}
-    <DropdownMenuPrimitive.Item
+    className={cn(
-      data-slot="dropdown-menu-item"
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      data-inset={inset}
+      inset && "pl-8",
-      data-variant={variant}
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
     />
-  )
+  </DropdownMenuPrimitive.Portal>
-}
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 
-function DropdownMenuCheckboxItem({
+const DropdownMenuItem = React.forwardRef<
-  className,
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  children,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-  checked,
+    inset?: boolean
-  ...props
+  }
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+>(({ className, inset, ...props }, ref) => (
-  return (
+  <DropdownMenuPrimitive.Item
-    <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
-      data-slot="dropdown-menu-checkbox-item"
+    className={cn(
-      className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      inset && "pl-8",
-        className
+      className
-      )}
+    )}
-      checked={checked}
+    {...props}
-      {...props}
+  />
-    >
+))
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  )
-}
 
-function DropdownMenuRadioGroup({
+const DropdownMenuCheckboxItem = React.forwardRef<
-  ...props
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
-  return (
+>(({ className, children, checked, ...props }, ref) => (
-    <DropdownMenuPrimitive.RadioGroup
+  <DropdownMenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-radio-group"
+    ref={ref}
-      {...props}
+    className={cn(
-    />
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-  )
+      className
-}
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
 
-function DropdownMenuRadioItem({
+const DropdownMenuRadioItem = React.forwardRef<
-  className,
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  children,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
-  ...props
+>(({ className, children, ...props }, ref) => (
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  <DropdownMenuPrimitive.RadioItem
-  return (
+    ref={ref}
-    <DropdownMenuPrimitive.RadioItem
+    className={cn(
-      data-slot="dropdown-menu-radio-item"
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className={cn(
+      className
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    )}
-        className
+    {...props}
-      )}
+  >
-      {...props}
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-    >
+      <DropdownMenuPrimitive.ItemIndicator>
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <Circle className="h-2 w-2 fill-current" />
-        <DropdownMenuPrimitive.ItemIndicator>
+      </DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
+    </span>
-        </DropdownMenuPrimitive.ItemIndicator>
+    {children}
-      </span>
+  </DropdownMenuPrimitive.RadioItem>
-      {children}
+))
-    </DropdownMenuPrimitive.RadioItem>
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
-  )
-}
 
-function DropdownMenuLabel({
+const DropdownMenuLabel = React.forwardRef<
-  className,
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  inset,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-  ...props
+    inset?: boolean
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  }
-  inset?: boolean
+>(({ className, inset, ...props }, ref) => (
-}) {
+  <DropdownMenuPrimitive.Label
-  return (
+    ref={ref}
-    <DropdownMenuPrimitive.Label
+    className={cn(
-      data-slot="dropdown-menu-label"
+      "px-2 py-1.5 text-sm font-semibold",
-      data-inset={inset}
+      inset && "pl-8",
-      className={cn(
+      className
-        "px-2 py-1.5 text-sm font-medium data-inset:pl-8",
+    )}
-        className
+    {...props}
-      )}
+  />
-      {...props}
+))
-    />
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
-  )
-}
 
-function DropdownMenuSeparator({
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
   className,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("-mx-1 my-1 h-px bg-border", className)}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
   return (
     <span
-      data-slot="dropdown-menu-shortcut"
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
-}
-
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </DropdownMenuPrimitive.SubTrigger>
-  )
-}
-
-function DropdownMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
-  return (
-    <DropdownMenuPrimitive.SubContent
-      data-slot="dropdown-menu-sub-content"
-      className={cn(
-        "z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-        className
-      )}
       {...props}
     />
   )
 }
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
 
 export {
   DropdownMenu,
-  DropdownMenuPortal,
   DropdownMenuTrigger,
   DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
   DropdownMenuItem,
   DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
+  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
   DropdownMenuSub,
-  DropdownMenuSubTrigger,
   DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
 }

src/components/ui/form-utils.ts

@@ -1,14 +1,13 @@
 import * as React from "react"
 import {
+  FieldPath,
+  FieldValues,
   useFormContext,
-  useFormState,
-  type FieldPath,
-  type FieldValues,
 } from "react-hook-form"
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 > = {
   name: TName
 }
@@ -28,8 +27,8 @@ export const FormItemContext = React.createContext<FormItemContextValue>(
 export const useFormField = () => {
   const fieldContext = React.useContext(FormFieldContext)
   const itemContext = React.useContext(FormItemContext)
-  const { getFieldState } = useFormContext()
+  const { getFieldState, formState } = useFormContext()
-  const formState = useFormState({ name: fieldContext.name })
+
   const fieldState = getFieldState(fieldContext.name, formState)
 
   if (!fieldContext) {
@@ -46,4 +45,4 @@ export const useFormField = () => {
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
   }
-}
+}