Initial commit

.env.local

@@ -0,0 +1,4 @@
+NEXT_PUBLIC_SHOPIFY_DOMAIN=frontend-ai.myshopify.com
+NEXT_PUBLIC_SHOPIFY_API_VERSION=2025-10
+NEXT_PUBLIC_SHOPIFY_COLLECTION=frontpage
+NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=

.gitignore

@@ -0,0 +1,6 @@
+node_modules/*
+build/*
+dist/*
+.DS_Store
+.vscode/*
+.next

app/error.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="flex items-center gap-6">
+        <div className="text-lg font-medium text-black font-sans whitespace-nowrap">
+          Something went wrong
+        </div>
+        <div className="border-l border-gray-300 h-6"></div>
+        <div className="text-sm text-gray-700 font-sans max-w-lg">
+          {error.message}
+        </div>
+      </div>
+    </div>
+  );
+}

app/globals.css

@@ -0,0 +1,93 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* Background and foreground */
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(222.2 84% 4.9%);
+
+  /* Card */
+  --color-card: hsl(0 0% 100%);
+  --color-card-foreground: hsl(222.2 84% 4.9%);
+
+  /* Popover */
+  --color-popover: hsl(0 0% 100%);
+  --color-popover-foreground: hsl(222.2 84% 4.9%);
+
+  /* Primary */
+  --color-primary: hsl(222.2 47.4% 11.2%);
+  --color-primary-foreground: hsl(210 40% 98%);
+
+  /* Secondary */
+  --color-secondary: hsl(210 40% 96.1%);
+  --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
+
+  /* Muted */
+  --color-muted: hsl(210 40% 96.1%);
+  --color-muted-foreground: hsl(215.4 16.3% 46.9%);
+
+  /* Accent */
+  --color-accent: hsl(210 40% 96.1%);
+  --color-accent-foreground: hsl(222.2 47.4% 11.2%);
+
+  /* Destructive */
+  --color-destructive: hsl(0 84.2% 60.2%);
+  --color-destructive-foreground: hsl(210 40% 98%);
+
+  /* Border, input, ring */
+  --color-border: hsl(214.3 31.8% 91.4%);
+  --color-input: hsl(214.3 31.8% 91.4%);
+  --color-ring: hsl(222.2 84% 4.9%);
+
+  /* Sidebar */
+  --color-sidebar: hsl(0 0% 98%);
+  --color-sidebar-foreground: hsl(240 5.3% 26.1%);
+  --color-sidebar-primary: hsl(240 5.9% 10%);
+  --color-sidebar-primary-foreground: hsl(0 0% 98%);
+  --color-sidebar-accent: hsl(240 4.8% 95.9%);
+  --color-sidebar-accent-foreground: hsl(240 5.9% 10%);
+  --color-sidebar-border: hsl(220 13% 91%);
+  --color-sidebar-ring: hsl(217.2 91.2% 59.8%);
+
+  /* Border radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+
+  /* Fonts */
+  --font-heading: "Space Grotesk", sans-serif;
+  --font-body: "Inter", sans-serif;
+}
+
+/* Dark mode */
+.dark {
+  --color-background: hsl(222.2 84% 4.9%);
+  --color-foreground: hsl(210 40% 98%);
+  --color-card: hsl(222.2 84% 4.9%);
+  --color-card-foreground: hsl(210 40% 98%);
+  --color-popover: hsl(222.2 84% 4.9%);
+  --color-popover-foreground: hsl(210 40% 98%);
+  --color-primary: hsl(210 40% 98%);
+  --color-primary-foreground: hsl(222.2 47.4% 11.2%);
+  --color-secondary: hsl(217.2 32.6% 17.5%);
+  --color-secondary-foreground: hsl(210 40% 98%);
+  --color-muted: hsl(217.2 32.6% 17.5%);
+  --color-muted-foreground: hsl(215 20.2% 65.1%);
+  --color-accent: hsl(217.2 32.6% 17.5%);
+  --color-accent-foreground: hsl(210 40% 98%);
+  --color-destructive: hsl(0 62.8% 30.6%);
+  --color-destructive-foreground: hsl(210 40% 98%);
+  --color-border: hsl(217.2 32.6% 17.5%);
+  --color-input: hsl(217.2 32.6% 17.5%);
+  --color-ring: hsl(212.7 26.8% 83.9%);
+  --color-sidebar: hsl(240 5.9% 10%);
+  --color-sidebar-foreground: hsl(240 4.8% 95.9%);
+  --color-sidebar-primary: hsl(224.3 76.3% 48%);
+  --color-sidebar-primary-foreground: hsl(0 0% 100%);
+  --color-sidebar-accent: hsl(240 3.7% 15.9%);
+  --color-sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+  --color-sidebar-border: hsl(240 3.7% 15.9%);
+  --color-sidebar-ring: hsl(217.2 91.2% 59.8%);
+}

app/layout.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from 'next';
+import { Toaster } from 'sonner';
+import { ShopifyProvider } from '@/contexts/shopify-context';
+import CartDrawer from '@/components/CartDrawer';
+import Theme from '@/components/Theme';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'Frontend',
+  description: 'Start prompting',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </head>
+      <body className="m-0 p-0 font-body">
+        <ShopifyProvider>
+          <Theme />
+          <div className="w-full flex flex-col min-h-[calc(100vh-80px)]">
+            {children}
+          </div>
+          <Toaster />
+          <CartDrawer />
+        </ShopifyProvider>
+      </body>
+    </html>
+  );
+}

app/not-found.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+export default function NotFound() {
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="flex items-center gap-6">
+        <div className="text-lg font-medium text-black font-sans whitespace-nowrap">
+          404
+        </div>
+        <div className="border-l border-gray-300 h-6"></div>
+        <div className="text-sm text-gray-700 font-sans max-w-lg">
+          This page could not be found.
+        </div>
+      </div>
+    </div>
+  );
+}

app/page.tsx

@@ -0,0 +1,18 @@
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import CollectionDetail from '@/components/CollectionDetail';
+import config from '@/lib/config.json';
+
+export default function Home() {
+  const collectionHandle = config.data.collection;
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Header />
+      <main className="flex-1">
+        <CollectionDetail collectionHandle={collectionHandle} />
+      </main>
+      <Footer />
+    </div>
+  );
+}

components/CartDrawer.tsx

@@ -0,0 +1,206 @@
+"use client";
+
+import React, { useState } from 'react';
+import { RiCloseLine, RiImageLine, RiSubtractLine, RiAddLine, RiLoader4Line } from '@remixicon/react';
+import { useShopifyCart, redirectToCheckout } from '@/hooks/use-shopify-cart';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetBody,
+  SheetFooter,
+  AnimatePresence,
+} from './ui/sheet';
+import { Button } from './ui/button';
+
+const CartDrawer: React.FC = () => {
+  const {
+    isOpen,
+    items,
+    itemCount,
+    totalAmount,
+    checkoutUrl,
+    removeItem,
+    updateItemQuantity,
+    closeCart
+  } = useShopifyCart();
+  const [isCheckingOut, setIsCheckingOut] = useState(false);
+
+  const handleCheckout = async () => {
+    if (!checkoutUrl) return;
+
+    setIsCheckingOut(true);
+    try {
+      redirectToCheckout(checkoutUrl);
+    } catch (error) {
+      console.error('Error during checkout:', error);
+      alert('Failed to proceed to checkout. Please try again.');
+      setIsCheckingOut(false);
+    }
+  };
+
+  return (
+    <Sheet open={isOpen} onOpenChange={(open) => !open && closeCart()}>
+      <AnimatePresence>
+        {isOpen && (
+          <SheetContent className="w-full max-w-md" showCloseButton={false}>
+            {/* Header */}
+            <SheetHeader className="h-16 justify-center items-start">
+              <div className="flex items-center justify-between w-full">
+                <SheetTitle
+                  className="text-2xl font-bold font-heading"
+                >
+                  Shopping Cart ({itemCount})
+                </SheetTitle>
+                <button
+                  onClick={closeCart}
+                  className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                >
+                  <RiCloseLine className="text-sm" />
+                </button>
+              </div>
+            </SheetHeader>
+
+            {/* Cart Items */}
+            <SheetBody>
+              {items.length === 0 ? (
+                <div className="text-center py-12">
+                  <h3 className="text-lg font-semibold text-gray-600 mb-2">Your cart is empty</h3>
+                  <p className="text-gray-500 mb-6">Add some products to get started!</p>
+                  <Button onClick={closeCart}>
+                    Continue Shopping
+                  </Button>
+                </div>
+              ) : (
+                <div className="space-y-6">
+                  {items.map((item) => (
+                    <div key={item.id} className="flex items-start space-x-4 pb-6 border-b border-gray-200 last:border-b-0">
+                      {/* Product Image */}
+                      <div className="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
+                        {item.merchandise.image?.url ? (
+                          <img
+                            src={item.merchandise.image.url}
+                            alt={item.merchandise.image.altText || item.merchandise.product.title}
+                            className="w-full h-full object-cover"
+                          />
+                        ) : (
+                          <div className="w-full h-full flex items-center justify-center text-gray-400">
+                            <RiImageLine className="text-lg" />
+                          </div>
+                        )}
+                      </div>
+
+                      {/* Product Details */}
+                      <div className="flex-1 min-w-0">
+                        <h4 className="font-semibold text-gray-900 mb-1 line-clamp-2">
+                          {item.merchandise.product.title}
+                        </h4>
+
+                        {/* Variant Info */}
+                        {item.merchandise.selectedOptions && item.merchandise.selectedOptions.length > 0 && (
+                          <div className="text-sm text-gray-500 mb-2">
+                            {item.merchandise.selectedOptions.map((option, index) => (
+                              <span key={option.name}>
+                                {option.value}
+                                {index < item.merchandise.selectedOptions.length - 1 ? ' / ' : ''}
+                              </span>
+                            ))}
+                          </div>
+                        )}
+
+                        {/* Quantity Controls */}
+                        <div className="flex items-center mt-3">
+                          <div className="flex items-center border border-gray-300 rounded-lg">
+                            <button
+                              onClick={() => updateItemQuantity(item.id, item.quantity - 1)}
+                              className="p-1 hover:bg-gray-100 transition-colors text-gray-500"
+                              disabled={item.quantity <= 1}
+                            >
+                              <RiSubtractLine className="text-xs" />
+                            </button>
+                            <span className="px-2 py-1 font-semibold min-w-[30px] text-center text-sm">
+                              {item.quantity}
+                            </span>
+                            <button
+                              onClick={() => updateItemQuantity(item.id, item.quantity + 1)}
+                              className="p-1 hover:bg-gray-100 transition-colors text-gray-500"
+                            >
+                              <RiAddLine className="text-xs" />
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Price */}
+                      <div className="flex-shrink-0">
+                        <span className="font-semibold text-gray-900">
+                          ${parseFloat(item.merchandise.price.amount).toFixed(2)}
+                        </span>
+                      </div>
+
+                      {/* Remove Button */}
+                      <div className="flex-shrink-0">
+                        <button
+                          onClick={() => removeItem(item.id)}
+                          className="p-1 hover:bg-gray-100 rounded transition-colors text-gray-400 hover:text-red-500"
+                        >
+                          <RiCloseLine className="text-sm" />
+                        </button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </SheetBody>
+
+            {/* Footer - Checkout Section */}
+            {items.length > 0 && (
+              <SheetFooter className="!flex-col items-stretch gap-3">
+                {/* Subtotal */}
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-lg font-semibold">Subtotal</span>
+                  <span className="text-lg font-semibold">
+                    ${totalAmount.toFixed(2)}
+                  </span>
+                </div>
+
+                <div className="text-sm text-gray-500 mb-2">
+                  Shipping and taxes calculated at checkout
+                </div>
+
+                {/* Action Buttons */}
+                <Button
+                  onClick={handleCheckout}
+                  disabled={isCheckingOut || !checkoutUrl}
+                  size="lg"
+                  className="w-full"
+                >
+                  {isCheckingOut ? (
+                    <span className="flex items-center justify-center space-x-2">
+                      <RiLoader4Line className="text-sm animate-spin" />
+                      <span>Processing...</span>
+                    </span>
+                  ) : (
+                    'Checkout'
+                  )}
+                </Button>
+
+                <Button
+                  onClick={closeCart}
+                  variant="outline"
+                  size="lg"
+                  className="w-full"
+                >
+                  Continue Shopping
+                </Button>
+              </SheetFooter>
+            )}
+          </SheetContent>
+        )}
+      </AnimatePresence>
+    </Sheet>
+  );
+};
+
+export default CartDrawer;

components/CollectionCard.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import Link from 'next/link';
+
+interface CollectionImage {
+  url: string;
+  altText?: string;
+}
+
+interface Collection {
+  id: string;
+  title: string;
+  handle: string;
+  description?: string;
+  image?: CollectionImage;
+}
+
+interface CollectionCardProps {
+  collection: Collection;
+}
+
+const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
+  return (
+    <Link
+      href={`/collections/${collection.handle}`}
+      className="bg-white rounded-xs shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden group block"
+    >
+      {/* Collection Image */}
+      <div className="aspect-video overflow-hidden bg-gray-100">
+        {collection.image ? (
+          <img
+            src={collection.image.url}
+            alt={collection.image.altText || collection.title}
+            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+          />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center text-gray-400">
+            <i className="ri-folder-line text-6xl"></i>
+          </div>
+        )}
+      </div>
+
+      {/* Collection Info */}
+      <div className="p-6">
+        <h3 className="text-2xl font-bold text-gray-900 mb-3 group-hover:text-gray-600 transition-colors font-heading">
+          {collection.title}
+        </h3>
+
+        {collection.description && (
+          <p className="text-gray-600">
+            {collection.description.substring(0, 100)}
+            {collection.description.length > 100 ? '...' : ''}
+          </p>
+        )}
+
+        <div className="mt-4 text-black font-semibold group-hover:text-gray-600 transition-colors flex items-center">
+          <span>View Collection</span>
+          <i className="ri-arrow-right-s-line ml-2"></i>
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default CollectionCard;

components/CollectionDetail.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import React, { useState } from 'react';
+import { useCollectionProducts } from '@/hooks/use-shopify-collections';
+import ProductCard from './ProductCard';
+import ProductModal from './ProductModal';
+import { Button } from './ui/button';
+
+interface ProductImage {
+  url: string;
+  altText?: string;
+}
+
+interface ProductPrice {
+  amount: string;
+  currencyCode: string;
+}
+
+interface ProductVariant {
+  id: string;
+  title: string;
+  price: ProductPrice;
+  availableForSale: boolean;
+}
+
+interface Product {
+  id: string;
+  title: string;
+  description?: string;
+  handle: string;
+  images: {
+    edges: Array<{
+      node: ProductImage;
+    }>;
+  };
+  priceRange: {
+    minVariantPrice: ProductPrice;
+  };
+  compareAtPriceRange?: {
+    minVariantPrice: ProductPrice;
+  };
+  variants: {
+    edges: Array<{
+      node: ProductVariant;
+    }>;
+  };
+}
+
+interface CollectionDetailProps {
+  collectionHandle?: string;
+}
+
+const CollectionDetail: React.FC<CollectionDetailProps> = ({ collectionHandle }) => {
+  const { collection, loading, error } = useCollectionProducts(collectionHandle || null, {
+    first: 20,
+    sortKey: 'BEST_SELLING',
+    reverse: false
+  });
+  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  if (loading) {
+    return (
+      <div className="py-16 bg-gray-50">
+        <div className="container mx-auto px-4">
+          <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+            Collection
+          </h2>
+
+          {/* Loading Skeleton */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+            {Array.from({ length: 8 }).map((_, index) => (
+              <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse">
+                <div className="aspect-square bg-gray-200"></div>
+                <div className="p-6">
+                  <div className="h-6 bg-gray-200 rounded mb-2"></div>
+                  <div className="h-4 bg-gray-200 rounded mb-4"></div>
+                  <div className="h-8 bg-gray-200 rounded mb-4"></div>
+                  <div className="h-12 bg-gray-200 rounded"></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !collection) {
+    return (
+      <div className="container mx-auto px-4 py-24 text-center">
+        <div className="max-w-lg mx-auto">
+          <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-gray-100 flex items-center justify-center">
+            <i className="ri-shopping-bag-line text-3xl text-gray-400"></i>
+          </div>
+          <h2 className="text-2xl font-heading font-semibold text-gray-900 mb-3">
+            Collection Not Found
+          </h2>
+          <p className="text-gray-500 mb-8 leading-relaxed">
+            {error || "We couldn't find the collection you're looking for. It may have been removed or the link might be incorrect."}
+          </p>
+          <Button
+            onClick={() => window.history.back()}
+            variant="outline"
+            className="px-8"
+          >
+            <i className="ri-arrow-left-line mr-2"></i>
+            Go Back
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-gray-50">
+      {/* Hero Banner */}
+      {collection.image && (
+        <div className="relative w-full h-[300px] md:h-[350px] lg:h-[400px]">
+          <img
+            src={collection.image.url}
+            alt={collection.image.altText || collection.title}
+            className="w-full h-full object-cover object-center"
+          />
+          <div className="absolute inset-0 bg-black/40 flex items-center justify-center">
+            <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-white text-center px-4 font-heading">
+              {collection.title}
+            </h1>
+          </div>
+        </div>
+      )}
+
+      {/* Products Section */}
+      <div className="py-16">
+        <div className="container mx-auto px-4">
+          {collection.products.length === 0 ? (
+            <div className="text-center py-12">
+              <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto">
+                <i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i>
+                <h3 className="text-lg font-semibold text-gray-600 mb-2">
+                  No Products in Collection
+                </h3>
+                <p className="text-gray-500">
+                  This collection doesn't have any products yet.
+                </p>
+              </div>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+              {collection.products.map((product) => (
+                <ProductCard
+                  key={product.id}
+                  product={product}
+                  onClick={(product) => {
+                    setSelectedProduct(product);
+                    setIsModalOpen(true);
+                  }}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Product Modal */}
+      {selectedProduct && (
+        <ProductModal
+          product={selectedProduct}
+          isOpen={isModalOpen}
+          onClose={() => {
+            setIsModalOpen(false);
+            setSelectedProduct(null);
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default CollectionDetail;

components/Collections.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import React from 'react';
+import { useCollections } from '@/hooks/use-shopify-collections';
+import CollectionCard from './CollectionCard';
+import { Button } from './ui/button';
+
+const Collections: React.FC = () => {
+  const { collections, loading, error, refetch } = useCollections(20);
+
+  if (loading) {
+    return (
+      <div className="py-16 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4">
+          <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+            Our Collections
+          </h2>
+
+          {/* Loading Skeleton */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse">
+                <div className="aspect-video bg-gray-200"></div>
+                <div className="p-6">
+                  <div className="h-8 bg-gray-200 rounded mb-4"></div>
+                  <div className="h-4 bg-gray-200 rounded mb-2"></div>
+                  <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="py-16 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4 text-center">
+          <h2 className="text-5xl font-bold mb-8 font-heading">
+            Our Collections
+          </h2>
+
+          <div className="bg-red-50 border border-red-200 rounded-lg p-8 max-w-md mx-auto">
+            <i className="ri-error-warning-line text-4xl text-red-500 mb-4"></i>
+            <h3 className="text-lg font-semibold text-red-800 mb-2">
+              Failed to Load Collections
+            </h3>
+            <p className="text-red-600 mb-4">
+              {error}
+            </p>
+            <Button
+              onClick={() => refetch()}
+              variant="destructive"
+            >
+              Try Again
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (collections.length === 0) {
+    return (
+      <div className="py-16 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4 text-center">
+          <h2 className="text-5xl font-bold mb-8 font-heading">
+            Our Collections
+          </h2>
+
+          <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto">
+            <i className="ri-folder-line text-4xl text-gray-400 mb-4"></i>
+            <h3 className="text-lg font-semibold text-gray-600 mb-2">
+              No Collections Found
+            </h3>
+            <p className="text-gray-500">
+              Check back later or configure your Shopify store connection.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="py-16 bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4">
+        <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+          Our Collections
+        </h2>
+
+        {/* Collections Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {collections.map((collection) => (
+            <CollectionCard key={collection.id} collection={collection} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Collections;

components/Footer.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const Footer: React.FC = () => {
+  return (
+    <footer className="bg-gray-100 text-gray-800 py-12">
+      <div className="container mx-auto px-4 text-center">
+        <h3
+          className="text-2xl font-bold mb-4"
+          style={{fontFamily: 'Space Grotesk, sans-serif'}}
+        >
+          Store
+        </h3>
+        <p className="text-gray-500 mb-6">
+          Your premium shopping destination
+        </p>
+        <div className="mt-8 pt-8 text-gray-500">
+          <p>&copy; 2025 Store. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

components/Header.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import React from 'react';
+import Link from 'next/link';
+import { RiShoppingBagLine } from '@remixicon/react';
+import { useShopifyCart } from '@/hooks/use-shopify-cart';
+import config from '../lib/config.json';
+
+const CartIcon: React.FC = () => {
+  const { itemCount, toggleCart } = useShopifyCart();
+
+  return (
+    <button
+      onClick={toggleCart}
+      className="relative p-2 text-black hover:text-gray-600 transition-colors"
+    >
+      <RiShoppingBagLine className="text-2xl" />
+      {itemCount > 0 && (
+        <span className="absolute -top-1 -right-1 bg-black text-white text-xs rounded-full w-6 h-6 flex items-center justify-center font-semibold">
+          {itemCount > 99 ? '99+' : itemCount}
+        </span>
+      )}
+    </button>
+  );
+};
+
+const Header: React.FC = () => {
+  return (
+    <nav className="bg-white shadow-sm sticky top-0 z-30 h-16">
+      <div className="container mx-auto px-4 h-full">
+        <div className="flex justify-between items-center h-full">
+          {/* Logo */}
+          <Link href="/" className="text-2xl font-bold text-black font-heading">
+            {config.brand.logo.url ? (
+              <img
+                src={config.brand.logo.url}
+                alt={config.brand.logo.alt || 'Store'}
+                className="h-8"
+              />
+            ) : (
+              'Store'
+            )}
+          </Link>
+
+          {/* Cart Icon */}
+          <CartIcon />
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Header;

components/Home.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Header from './Header';
+import Footer from './Footer';
+import CollectionDetail from './CollectionDetail';
+import config from '../lib/config.json';
+
+const Home: React.FC = () => {
+  const collectionHandle = config.data.collection;
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Header />
+      <main className="flex-1">
+        <CollectionDetail collectionHandle={collectionHandle} />
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default Home;

components/ProductCard.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import React from 'react';
+import { useShopifyCart } from '@/hooks/use-shopify-cart';
+import { truncate } from '../lib/utils';
+import { Card, CardContent } from './ui/card';
+import { Button } from './ui/button';
+
+interface ProductImage {
+  url: string;
+  altText?: string;
+}
+
+interface ProductPrice {
+  amount: string;
+  currencyCode: string;
+}
+
+interface ProductVariant {
+  id: string;
+  title: string;
+  price: ProductPrice;
+  availableForSale: boolean;
+}
+
+interface Product {
+  id: string;
+  title: string;
+  description?: string;
+  handle: string;
+  images: {
+    edges: Array<{
+      node: ProductImage;
+    }>;
+  };
+  priceRange: {
+    minVariantPrice: ProductPrice;
+  };
+  compareAtPriceRange?: {
+    minVariantPrice: ProductPrice;
+  };
+  variants: {
+    edges: Array<{
+      node: ProductVariant;
+    }>;
+  };
+}
+
+interface ProductCardProps {
+  product: Product;
+  onAddToCart?: (product: Product) => void;
+  onClick?: (product: Product) => void;
+}
+
+const ProductCard: React.FC<ProductCardProps> = ({ product, onAddToCart, onClick }) => {
+  const { addItem, openCart } = useShopifyCart();
+
+  const firstImage = product.images.edges[0]?.node;
+  const price = product.priceRange.minVariantPrice;
+  const compareAtPrice = product.compareAtPriceRange?.minVariantPrice;
+  const hasDiscount = compareAtPrice && parseFloat(compareAtPrice.amount) > parseFloat(price.amount);
+  const firstVariant = product.variants.edges[0]?.node;
+  const isAvailable = firstVariant?.availableForSale || false;
+
+  const handleAddToCart = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!firstVariant || !isAvailable) return;
+
+    try {
+      await addItem(firstVariant.id, 1);
+      openCart();
+
+      if (onAddToCart) {
+        onAddToCart(product);
+      }
+    } catch (error) {
+      console.error('Failed to add item to cart:', error);
+    }
+  };
+
+  return (
+    <Card className="!py-0 !gap-0 rounded-xs overflow-hidden hover:shadow-xl transition-shadow duration-300 group">
+      {/* Product Image */}
+      <div
+        className="aspect-square overflow-hidden bg-gray-100 relative cursor-pointer"
+        onClick={() => {
+          if (onClick) {
+            onClick(product);
+          }
+        }}
+      >
+        {firstImage ? (
+          <img
+            src={firstImage.url}
+            alt={firstImage.altText || product.title}
+            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+          />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center text-gray-400">
+            <i className="ri-image-line text-6xl"></i>
+          </div>
+        )}
+
+        {/* Discount Badge */}
+        {hasDiscount && compareAtPrice && (
+          <div className="absolute top-3 left-3 bg-red-500 text-white text-xs font-semibold px-2 py-1 rounded">
+            {Math.round(((parseFloat(compareAtPrice.amount) - parseFloat(price.amount)) / parseFloat(compareAtPrice.amount)) * 100)}% OFF
+          </div>
+        )}
+      </div>
+
+      {/* Product Info */}
+      <CardContent className="p-6">
+        <h3 className="text-xl font-semibold text-gray-900 mb-2 font-heading">
+          {truncate(product.title, 60)}
+        </h3>
+
+        {/* Price Section */}
+        <div className="flex items-center justify-between mb-4">
+          <div>
+            <span className="text-sm font-bold text-muted-foreground">
+              ${parseFloat(price.amount).toFixed(2)}
+            </span>
+          </div>
+        </div>
+
+        {/* View Details Button */}
+        <Button
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (onClick) {
+              onClick(product);
+            }
+          }}
+          className="w-full"
+          size="lg"
+        >
+          View Details
+        </Button>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default ProductCard;

components/ProductModal.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import React, { useEffect } from 'react';
+import ProductDetail from './product-detail/ProductDetail';
+import { Button } from './ui/button';
+
+interface ProductImage {
+  url: string;
+  altText?: string;
+}
+
+interface ProductPrice {
+  amount: string;
+  currencyCode: string;
+}
+
+interface ProductVariant {
+  id: string;
+  title: string;
+  price: ProductPrice;
+  availableForSale: boolean;
+}
+
+interface Product {
+  id: string;
+  title: string;
+  description?: string;
+  handle: string;
+  images: {
+    edges: Array<{
+      node: ProductImage;
+    }>;
+  };
+  priceRange: {
+    minVariantPrice: ProductPrice;
+  };
+  compareAtPriceRange?: {
+    minVariantPrice: ProductPrice;
+  };
+  variants: {
+    edges: Array<{
+      node: ProductVariant;
+    }>;
+  };
+}
+
+interface ProductModalProps {
+  product: Product;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const ProductModal: React.FC<ProductModalProps> = ({ product, isOpen, onClose }) => {
+
+  // Close modal on ESC key press
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'hidden';
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen, onClose]);
+
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 p-4"
+      onClick={handleBackdropClick}
+    >
+      <div className="bg-white rounded-lg shadow-2xl max-w-7xl w-full max-h-[90vh] overflow-y-auto relative">
+        {/* Close Button */}
+        <Button
+          onClick={onClose}
+          variant="ghost"
+          size="icon"
+          className="absolute top-4 right-4 z-10 bg-white rounded-full hover:bg-gray-100"
+          aria-label="Close modal"
+        >
+          <i className="ri-close-line text-2xl text-gray-700"></i>
+        </Button>
+
+        {/* Product Detail Component */}
+        <ProductDetail handle={product.handle} onAddToCart={onClose} />
+      </div>
+    </div>
+  );
+};
+
+export default ProductModal;

components/Products.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import ProductCard from './ProductCard';
+import { getProducts } from '@/hooks/use-shopify-products';
+import { Button } from './ui/button';
+
+interface ProductImage {
+  url: string;
+  altText?: string;
+}
+
+interface ProductPrice {
+  amount: string;
+  currencyCode: string;
+}
+
+interface ProductVariant {
+  id: string;
+  title: string;
+  price: ProductPrice;
+  availableForSale: boolean;
+}
+
+interface Product {
+  id: string;
+  title: string;
+  description?: string;
+  handle: string;
+  images: {
+    edges: Array<{
+      node: ProductImage;
+    }>;
+  };
+  priceRange: {
+    minVariantPrice: ProductPrice;
+  };
+  compareAtPriceRange?: {
+    minVariantPrice: ProductPrice;
+  };
+  variants: {
+    edges: Array<{
+      node: ProductVariant;
+    }>;
+  };
+}
+
+interface ProductsProps {
+  title?: string;
+  limit?: number;
+  showLoadMore?: boolean;
+  onViewDetails?: (product: Product) => void;
+}
+
+const Products: React.FC<ProductsProps> = ({
+  title = "Our Products",
+  limit = 12,
+  showLoadMore = true,
+  onViewDetails
+}) => {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [hasMoreProducts, setHasMoreProducts] = useState(true);
+
+  const fetchProducts = async (currentProducts: Product[] = [], loadMore = false) => {
+    try {
+      if (loadMore) {
+        setLoadingMore(true);
+      } else {
+        setLoading(true);
+        setError(null);
+      }
+
+      const newProducts = await getProducts({ 
+        first: limit,
+        sortKey: 'CREATED_AT',
+        reverse: true
+      });
+
+      if (loadMore) {
+        // Filter out products that already exist
+        const existingIds = new Set(currentProducts.map(p => p.id));
+        const uniqueNewProducts = newProducts.filter(p => !existingIds.has(p.id));
+        
+        if (uniqueNewProducts.length === 0) {
+          setHasMoreProducts(false);
+        } else {
+          setProducts(prev => [...prev, ...uniqueNewProducts]);
+        }
+      } else {
+        setProducts(newProducts);
+        setHasMoreProducts(newProducts.length === limit);
+      }
+    } catch (err) {
+      console.error('Error fetching products:', err);
+      setError(err instanceof Error ? err.message : 'Failed to load products');
+    } finally {
+      setLoading(false);
+      setLoadingMore(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchProducts();
+  }, [limit]);
+
+  const handleAddToCart = async (product: Product) => {
+    // Here you would typically integrate with cart functionality
+    console.log('Adding to cart:', product);
+  };
+
+  const handleLoadMore = () => {
+    if (!loadingMore && hasMoreProducts) {
+      fetchProducts(products, true);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="py-16">
+        <div className="max-w-7xl mx-auto px-4">
+          <h2
+            className="text-4xl font-bold text-center mb-12 font-heading"
+          >
+            {title}
+          </h2>
+          
+          {/* Loading Skeleton */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+            {Array.from({ length: 8 }).map((_, index) => (
+              <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse">
+                <div className="aspect-square bg-gray-200"></div>
+                <div className="p-6">
+                  <div className="h-6 bg-gray-200 rounded mb-2"></div>
+                  <div className="h-4 bg-gray-200 rounded mb-4"></div>
+                  <div className="h-8 bg-gray-200 rounded mb-4"></div>
+                  <div className="h-12 bg-gray-200 rounded"></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="py-16">
+        <div className="max-w-7xl mx-auto px-4 text-center">
+          <h2
+            className="text-4xl font-bold mb-8 font-heading"
+          >
+            {title}
+          </h2>
+          
+          <div className="bg-red-50 border border-red-200 rounded-lg p-8 max-w-md mx-auto">
+            <i className="ri-error-warning-line text-4xl text-red-500 mb-4"></i>
+            <h3 className="text-lg font-semibold text-red-800 mb-2">
+              Failed to Load Products
+            </h3>
+            <p className="text-red-600 mb-4">
+              {error}
+            </p>
+            <Button
+              onClick={() => fetchProducts()}
+              variant="destructive"
+            >
+              Try Again
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (products.length === 0) {
+    return (
+      <div className="py-16">
+        <div className="max-w-7xl mx-auto px-4 text-center">
+          <h2
+            className="text-4xl font-bold mb-8 font-heading"
+          >
+            {title}
+          </h2>
+          
+          <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto">
+            <i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i>
+            <h3 className="text-lg font-semibold text-gray-600 mb-2">
+              No Products Found
+            </h3>
+            <p className="text-gray-500">
+              Check back later or configure your Shopify store connection.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="py-16 bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4">
+        <h2
+          className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading"
+        >
+          {title}
+        </h2>
+
+        {/* Products Grid */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mb-12">
+          {products.map((product) => (
+            <ProductCard
+              key={product.id}
+              product={product}
+              onAddToCart={handleAddToCart}
+              onClick={onViewDetails}
+            />
+          ))}
+        </div>
+
+        {/* Load More Button */}
+        {showLoadMore && hasMoreProducts && (
+          <div className="text-center">
+            <Button
+              onClick={handleLoadMore}
+              disabled={loadingMore}
+              size="lg"
+            >
+              {loadingMore ? (
+                <span className="flex items-center space-x-2">
+                  <i className="ri-loader-4-line animate-spin"></i>
+                  <span>Loading...</span>
+                </span>
+              ) : (
+                'Load More Products'
+              )}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Products;

components/Theme.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import config from '../lib/config.json';
+
+const Theme: React.FC = () => {
+  const headerFont = config.brand.fonts.header;
+  const bodyFont = config.brand.fonts.body;
+  const primaryColor = config.brand.colors.primary;
+  const secondaryColor = config.brand.colors.secondary;
+
+  return (
+    <>
+      {/* Font Imports */}
+      <link
+        href={`https://fonts.googleapis.com/css2?family=${headerFont}:wght@400;500;600;700;800&display=swap`}
+        rel="stylesheet"
+      />
+      <link
+        href={`https://fonts.googleapis.com/css2?family=${bodyFont}:wght@300;400;500;600;700&display=swap`}
+        rel="stylesheet"
+      />
+
+      {/* Tailwind Browser Script */}
+      <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4?plugins=typography,forms"></script>
+
+      {/* Theme Styles */}
+      <style type="text/tailwindcss">
+        {`
+        @theme {
+          /* Background and foreground */
+          --color-background: hsl(0 0% 100%);
+          --color-foreground: hsl(222.2 84% 4.9%);
+
+          /* Card */
+          --color-card: hsl(0 0% 100%);
+          --color-card-foreground: hsl(222.2 84% 4.9%);
+
+          /* Popover */
+          --color-popover: hsl(0 0% 100%);
+          --color-popover-foreground: hsl(222.2 84% 4.9%);
+
+          /* Primary */
+          --color-primary: ${primaryColor};
+          --color-primary-foreground: hsl(210 40% 98%);
+
+          /* Secondary */
+          --color-secondary: ${secondaryColor};
+          --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
+
+          /* Muted */
+          --color-muted: hsl(210 40% 96.1%);
+          --color-muted-foreground: hsl(215.4 16.3% 46.9%);
+
+          /* Accent */
+          --color-accent: hsl(210 40% 96.1%);
+          --color-accent-foreground: hsl(222.2 47.4% 11.2%);
+
+          /* Destructive */
+          --color-destructive: hsl(0 84.2% 60.2%);
+          --color-destructive-foreground: hsl(210 40% 98%);
+
+          /* Border, input, ring */
+          --color-border: hsl(214.3 31.8% 91.4%);
+          --color-input: hsl(214.3 31.8% 91.4%);
+          --color-ring: hsl(222.2 84% 4.9%);
+
+          /* Sidebar */
+          --color-sidebar: hsl(0 0% 98%);
+          --color-sidebar-foreground: hsl(240 5.3% 26.1%);
+          --color-sidebar-primary: hsl(240 5.9% 10%);
+          --color-sidebar-primary-foreground: hsl(0 0% 98%);
+          --color-sidebar-accent: hsl(240 4.8% 95.9%);
+          --color-sidebar-accent-foreground: hsl(240 5.9% 10%);
+          --color-sidebar-border: hsl(220 13% 91%);
+          --color-sidebar-ring: hsl(217.2 91.2% 59.8%);
+
+          /* Border radius */
+          --radius-sm: 0.25rem;
+          --radius-md: 0.375rem;
+          --radius-lg: 0.5rem;
+          --radius-xl: 0.75rem;
+
+          /* Fonts from config */
+          --font-heading: "${headerFont.replace(/\+/g, ' ')}", sans-serif;
+          --font-body: "${bodyFont.replace(/\+/g, ' ')}", sans-serif;
+        }
+
+        /* Dark mode */
+        .dark {
+          --color-background: hsl(222.2 84% 4.9%);
+          --color-foreground: hsl(210 40% 98%);
+          --color-card: hsl(222.2 84% 4.9%);
+          --color-card-foreground: hsl(210 40% 98%);
+          --color-popover: hsl(222.2 84% 4.9%);
+          --color-popover-foreground: hsl(210 40% 98%);
+          --color-primary: hsl(210 40% 98%);
+          --color-primary-foreground: hsl(222.2 47.4% 11.2%);
+          --color-secondary: hsl(217.2 32.6% 17.5%);
+          --color-secondary-foreground: hsl(210 40% 98%);
+          --color-muted: hsl(217.2 32.6% 17.5%);
+          --color-muted-foreground: hsl(215 20.2% 65.1%);
+          --color-accent: hsl(217.2 32.6% 17.5%);
+          --color-accent-foreground: hsl(210 40% 98%);
+          --color-destructive: hsl(0 62.8% 30.6%);
+          --color-destructive-foreground: hsl(210 40% 98%);
+          --color-border: hsl(217.2 32.6% 17.5%);
+          --color-input: hsl(217.2 32.6% 17.5%);
+          --color-ring: hsl(212.7 26.8% 83.9%);
+          --color-sidebar: hsl(240 5.9% 10%);
+          --color-sidebar-foreground: hsl(240 4.8% 95.9%);
+          --color-sidebar-primary: hsl(224.3 76.3% 48%);
+          --color-sidebar-primary-foreground: hsl(0 0% 100%);
+          --color-sidebar-accent: hsl(240 3.7% 15.9%);
+          --color-sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+          --color-sidebar-border: hsl(240 3.7% 15.9%);
+          --color-sidebar-ring: hsl(217.2 91.2% 59.8%);
+        }
+        `}
+      </style>
+    </>
+  );
+};
+
+export default Theme;

components/magicui/aurora-text.tsx

@@ -0,0 +1,40 @@
+import React, { memo } from 'react';
+import { cn } from '@/lib/utils';
+
+interface AuroraTextProps {
+  children: React.ReactNode;
+  className?: string;
+  colors?: string[];
+  speed?: number;
+}
+
+export const AuroraText = memo(
+  ({
+    children,
+    className,
+    colors = ['#FF0080', '#7928CA', '#0070F3', '#38bdf8'],
+    speed = 1,
+  }: AuroraTextProps) => {
+    const animationDuration = `${10 / speed}s`;
+
+    const gradientStyle = {
+      backgroundImage: `linear-gradient(90deg, ${colors.join(', ')}, ${colors[0]})`,
+      backgroundSize: '200% 100%',
+      WebkitBackgroundClip: 'text',
+      WebkitTextFillColor: 'transparent',
+      backgroundClip: 'text',
+      animation: `aurora-flow ${animationDuration} ease-in-out infinite`,
+    } as React.CSSProperties;
+
+    return (
+      <span className={cn('relative inline-block', className)}>
+        <span className="sr-only">{children}</span>
+        <span className="relative" style={gradientStyle} aria-hidden="true">
+          {children}
+        </span>
+      </span>
+    );
+  }
+);
+
+AuroraText.displayName = 'AuroraText';

components/magicui/blur-fade.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useRef, useEffect, useState } from 'react';
+import { cn } from '@/lib/utils';
+
+interface BlurFadeProps {
+  children: React.ReactNode;
+  className?: string;
+  duration?: number;
+  delay?: number;
+  inView?: boolean;
+}
+
+export function BlurFade({
+  children,
+  className,
+  duration = 0.4,
+  delay = 0,
+  inView = false,
+}: BlurFadeProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState(!inView);
+
+  useEffect(() => {
+    if (!inView) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.unobserve(entry.target);
+        }
+      },
+      { threshold: 0.1, rootMargin: '-50px' }
+    );
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      if (ref.current) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, [inView]);
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        isVisible ? 'opacity-100 blur-none' : 'opacity-0 blur-sm',
+        className
+      )}
+      style={{
+        animation: isVisible
+          ? `blur-fade ${duration}s ease-out ${delay}s forwards`
+          : 'none',
+      }}
+    >
+      {children}
+    </div>
+  );
+}

components/product-detail/ProductDetail.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { getProduct } from '@/hooks/use-shopify-products';
+import { useShopifyCart } from '@/hooks/use-shopify-cart';
+import ProductDetailGallery from './ProductDetailGallery';
+import ProductDetailInfo from './ProductDetailInfo';
+import { Button } from '../ui/button';
+
+interface ProductImage {
+  url: string;
+  altText?: string;
+}
+
+interface ProductPrice {
+  amount: string;
+  currencyCode: string;
+}
+
+export interface ProductVariant {
+  id: string;
+  title: string;
+  price: ProductPrice;
+  availableForSale: boolean;
+  selectedOptions: Array<{
+    name: string;
+    value: string;
+  }>;
+  image?: {
+    url: string;
+    altText?: string;
+  };
+}
+
+interface ProductOption {
+  id: string;
+  name: string;
+  values: string[];
+}
+
+export interface Product {
+  id: string;
+  title: string;
+  description?: string;
+  descriptionHtml?: string;
+  handle: string;
+  images: {
+    edges: Array<{
+      node: ProductImage;
+    }>;
+  };
+  priceRange: {
+    minVariantPrice: ProductPrice;
+  };
+  compareAtPriceRange?: {
+    minVariantPrice: ProductPrice;
+  };
+  variants: {
+    edges: Array<{
+      node: ProductVariant;
+    }>;
+  };
+  options: ProductOption[];
+}
+
+type ProductDetailProps = {
+  handle: string;
+  onAddToCart?: () => void;
+}
+
+const ProductDetail: React.FC<ProductDetailProps> = ({ handle, onAddToCart: onAddToCartCallback }) => {
+  const { addItem, openCart } = useShopifyCart();
+
+  const [product, setProduct] = useState<Product | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(null);
+  const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>({});
+  const [quantity, setQuantity] = useState(1);
+  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
+  const [isAddingToCart, setIsAddingToCart] = useState(false);
+
+  useEffect(() => {
+    if (!handle) return;
+
+    const fetchProduct = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        const productData = await getProduct(handle);
+
+        if (!productData) {
+          setError('Product not found');
+          return;
+        }
+
+        setProduct(productData);
+
+        // Set default variant
+        const firstVariant = productData.variants.edges[0]?.node;
+        if (firstVariant) {
+          setSelectedVariant(firstVariant);
+
+          // Initialize selected options
+          const initialOptions: Record<string, string> = {};
+          firstVariant.selectedOptions.forEach(option => {
+            initialOptions[option.name] = option.value;
+          });
+          setSelectedOptions(initialOptions);
+        }
+      } catch (err) {
+        console.error('Error fetching product:', err);
+        setError(err instanceof Error ? err.message : 'Failed to load product');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProduct();
+  }, [handle]);
+
+  const handleOptionChange = (optionName: string, value: string) => {
+    const newOptions = { ...selectedOptions, [optionName]: value };
+    setSelectedOptions(newOptions);
+
+    // Find matching variant
+    const matchingVariant = product?.variants.edges.find(({ node }) => {
+      return node.selectedOptions.every(option =>
+        newOptions[option.name] === option.value
+      );
+    });
+
+    if (matchingVariant) {
+      setSelectedVariant(matchingVariant.node);
+
+      // Update image if variant has an associated image
+      if (matchingVariant.node.image && product) {
+        const imageIndex = product.images.edges.findIndex(
+          ({ node }) => node.url === matchingVariant.node.image?.url
+        );
+        if (imageIndex !== -1) {
+          setSelectedImageIndex(imageIndex);
+        }
+      }
+    }
+  };
+
+  const handleAddToCart = async () => {
+    if (!selectedVariant || !product) return;
+
+    setIsAddingToCart(true);
+    try {
+      await addItem(selectedVariant.id, quantity);
+      openCart();
+
+      if (onAddToCartCallback) {
+        onAddToCartCallback();
+      }
+    } catch (error) {
+      console.error('Failed to add item to cart:', error);
+    } finally {
+      setIsAddingToCart(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+          {/* Image Gallery Skeleton */}
+          <div>
+            <div className="aspect-square bg-gray-200 rounded-lg animate-pulse mb-4"></div>
+            <div className="grid grid-cols-4 gap-2">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <div key={i} className="aspect-square bg-gray-200 rounded animate-pulse"></div>
+              ))}
+            </div>
+          </div>
+
+          {/* Product Info Skeleton */}
+          <div>
+            <div className="h-8 bg-gray-200 rounded mb-4 animate-pulse"></div>
+            <div className="h-6 bg-gray-200 rounded mb-6 w-1/3 animate-pulse"></div>
+            <div className="h-24 bg-gray-200 rounded mb-6 animate-pulse"></div>
+            <div className="h-12 bg-gray-200 rounded mb-4 animate-pulse"></div>
+            <div className="h-12 bg-gray-200 rounded animate-pulse"></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !product) {
+    return (
+      <div className="container mx-auto px-4 py-8 text-center">
+        <div className="bg-red-50 border border-red-200 rounded-lg p-8 max-w-md mx-auto">
+          <i className="ri-error-warning-line text-4xl text-red-500 mb-4"></i>
+          <h3 className="text-lg font-semibold text-red-800 mb-2">
+            Product Not Found
+          </h3>
+          <p className="text-red-600 mb-4">
+            {error || 'The requested product could not be found.'}
+          </p>
+          <Button
+            onClick={() => window.history.back()}
+            variant="destructive"
+          >
+            Go Back
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white">
+      <div className="container mx-auto px-4 py-8">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+          <ProductDetailGallery
+            images={product.images.edges.map(edge => edge.node)}
+            selectedImageIndex={selectedImageIndex}
+            onImageChange={setSelectedImageIndex}
+          />
+          <ProductDetailInfo
+            product={product}
+            selectedVariant={selectedVariant}
+            selectedOptions={selectedOptions}
+            quantity={quantity}
+            setQuantity={setQuantity}
+            handleAddToCart={handleAddToCart}
+            onOptionChange={handleOptionChange}
+            isAddingToCart={isAddingToCart}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductDetail;

components/product-detail/ProductDetailGallery.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+interface ProductImage {
+  url: string;
+  altText?: string;
+}
+
+interface ProductDetailGalleryProps {
+  images: ProductImage[];
+  selectedImageIndex: number;
+  onImageChange: (index: number) => void;
+}
+
+const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({ images, selectedImageIndex, onImageChange }) => {
+
+  return (
+    <div>
+      {/* Main Image */}
+      <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden mb-4">
+        {images.length > 0 ? (
+          <img
+            src={images[selectedImageIndex].url}
+            alt={images[selectedImageIndex].altText || 'Product image'}
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center text-gray-400">
+            <i className="ri-image-line text-6xl"></i>
+          </div>
+        )}
+      </div>
+
+      {/* Image Thumbnails */}
+      {images.length > 1 && (
+        <div className="grid grid-cols-4 gap-2">
+          {images.map((image, index) => (
+            <button
+              key={index}
+              onClick={() => onImageChange(index)}
+              className={`aspect-square rounded-lg overflow-hidden border-2 transition-colors ${
+                selectedImageIndex === index
+                  ? 'border-black'
+                  : 'border-gray-200 hover:border-gray-300'
+              }`}
+            >
+              <img
+                src={image.url}
+                alt={image.altText || 'Product thumbnail'}
+                className="w-full h-full object-cover"
+              />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProductDetailGallery;

components/product-detail/ProductDetailInfo.tsx

@@ -0,0 +1,159 @@
+import React from 'react';
+import { RiSubtractLine, RiAddLine, RiTruckLine, RiArrowGoBackLine, RiSecurePaymentLine, RiLoader4Line } from '@remixicon/react';
+import { Product, ProductVariant } from './ProductDetail.tsx';
+import { Button } from '../ui/button';
+
+interface ProductDetailInfoProps {
+  product: Product;
+  selectedVariant: ProductVariant | null;
+  selectedOptions: Record<string, string>;
+  quantity: number;
+  setQuantity: (quantity: number) => void;
+  handleAddToCart: () => void;
+  onOptionChange: (optionName: string, value: string) => void;
+  isAddingToCart?: boolean;
+}
+
+const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
+  product,
+  selectedVariant,
+  selectedOptions,
+  quantity,
+  setQuantity,
+  handleAddToCart,
+  onOptionChange,
+  isAddingToCart = false
+}) => {
+  const formatPrice = (price: { amount: string; currencyCode: string }) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    }).format(parseFloat(price.amount));
+  };
+
+  const price = selectedVariant?.price || product.priceRange.minVariantPrice;
+  const compareAtPrice = product.compareAtPriceRange?.minVariantPrice;
+  const hasDiscount = compareAtPrice && parseFloat(compareAtPrice.amount) > parseFloat(price.amount);
+
+  return (
+    <div>
+      <h1 className="text-4xl font-bold text-gray-900 mb-4 font-heading">
+        {product.title}
+      </h1>
+
+      {/* Price */}
+      <div className="flex items-center space-x-4 mb-6">
+        <span className="text-2xl font-bold text-gray-900">
+          {formatPrice(price)}
+        </span>
+        {hasDiscount && compareAtPrice && (
+          <>
+            <span className="text-xl text-gray-500 line-through">
+              {formatPrice(compareAtPrice)}
+            </span>
+            <div className="bg-red-100 text-red-800 text-sm font-semibold px-3 py-1 rounded">
+              {Math.round(((parseFloat(compareAtPrice.amount) - parseFloat(price.amount)) / parseFloat(compareAtPrice.amount)) * 100)}% OFF
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* Description */}
+      {product.description && (
+        <div className="text-gray-600 mb-8 text-lg leading-relaxed">
+          {product.descriptionHtml ? (
+            <div dangerouslySetInnerHTML={{ __html: product.descriptionHtml }} />
+          ) : (
+            <p>{product.description}</p>
+          )}
+        </div>
+      )}
+
+      {/* Product Options */}
+      {product.options
+        .filter(option => option.name !== 'Title')
+        .map(option => (
+          <div key={option.id} className="mb-6">
+            <label className="block text-sm font-semibold text-gray-700 mb-2">
+              {option.name}
+            </label>
+            <div className="flex flex-wrap gap-2">
+              {option.values.map(value => (
+                <Button
+                  key={value}
+                  onClick={() => onOptionChange(option.name, value)}
+                  variant={selectedOptions[option.name] === value ? 'default' : 'outline'}
+                >
+                  {value}
+                </Button>
+              ))}
+            </div>
+          </div>
+        ))}
+
+      {/* Quantity Selector */}
+      <div className="mb-8">
+        <label className="block text-sm font-semibold text-gray-700 mb-2">
+          Quantity
+        </label>
+        <div className="flex items-center border border-gray-300 rounded-lg w-32">
+          <Button
+            onClick={() => setQuantity(Math.max(1, quantity - 1))}
+            variant="ghost"
+            size="icon-sm"
+            disabled={quantity <= 1}
+          >
+            <RiSubtractLine />
+          </Button>
+          <span className="flex-1 text-center font-semibold text-sm">{quantity}</span>
+          <Button
+            onClick={() => setQuantity(quantity + 1)}
+            variant="ghost"
+            size="icon-sm"
+          >
+            <RiAddLine />
+          </Button>
+        </div>
+      </div>
+
+      {/* Add to Cart Button */}
+      <Button
+        onClick={handleAddToCart}
+        disabled={!selectedVariant?.availableForSale || isAddingToCart}
+        size="lg"
+        className="w-full py-4 text-lg"
+      >
+        {isAddingToCart ? (
+          <span className="flex items-center justify-center gap-2">
+            <RiLoader4Line className="animate-spin" />
+            Adding...
+          </span>
+        ) : selectedVariant?.availableForSale ? (
+          'Add to Cart'
+        ) : (
+          'Out of Stock'
+        )}
+      </Button>
+
+      {/* Additional Info */}
+      <div className="mt-8 pt-8 border-t border-gray-200">
+        <div className="space-y-3 text-sm text-gray-600">
+          <div className="flex items-center space-x-2">
+            <RiTruckLine />
+            <span>Free shipping on orders over $100</span>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RiArrowGoBackLine />
+            <span>30-day return policy</span>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RiSecurePaymentLine />
+            <span>Secure payment</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductDetailInfo;

components/product-detail/ProductRecommendations.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { getProductRecommendations } from '@/hooks/use-shopify-products';
+import ProductCard from '../ProductCard';
+
+interface ProductRecommendationsProps {
+  productId: string;
+}
+
+const ProductRecommendations: React.FC<ProductRecommendationsProps> = ({ productId }) => {
+  const [recommendedProducts, setRecommendedProducts] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchRecommendations = async () => {
+      if (!productId) return;
+      
+      try {
+        setLoading(true);
+        setError(null);
+        
+        const recommendations = await getProductRecommendations(productId);
+        setRecommendedProducts(recommendations);
+      } catch (err) {
+        console.error('Error fetching product recommendations:', err);
+        setError(err instanceof Error ? err.message : 'Failed to load recommendations');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchRecommendations();
+  }, [productId]);
+
+  // Don't show section if we're not loading and have no recommendations
+  if (!loading && (!recommendedProducts || recommendedProducts.length === 0)) {
+    return null;
+  }
+
+  return (
+    <div className="bg-gray-50 py-16">
+      <div className="container mx-auto px-4">
+        <h2 
+          className="text-4xl font-bold text-center mb-12 text-gray-900"
+          style={{ fontFamily: 'Space Grotesk, sans-serif' }}
+        >
+          You Might Also Like
+        </h2>
+
+        {loading ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+            {Array.from({ length: 4 }).map((_, index) => (
+              <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse">
+                <div className="aspect-square bg-gray-200"></div>
+                <div className="p-6">
+                  <div className="h-6 bg-gray-200 rounded mb-2"></div>
+                  <div className="h-4 bg-gray-200 rounded mb-4"></div>
+                  <div className="h-8 bg-gray-200 rounded mb-4"></div>
+                  <div className="h-12 bg-gray-200 rounded"></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : error ? (
+          <div className="text-center py-8">
+            <p className="text-gray-500">Recommendations could not be loaded</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+            {recommendedProducts.slice(0, 4).map((recommendedProduct) => (
+              <ProductCard
+                key={recommendedProduct.id}
+                product={recommendedProduct}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ProductRecommendations;

components/ui/accordion.tsx

@@ -0,0 +1,197 @@
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import { cn } from '@/lib/utils';
+
+interface AccordionContextType {
+  value: string | string[];
+  onValueChange: (value: string) => void;
+  type: 'single' | 'multiple';
+}
+
+const AccordionContext = createContext<AccordionContextType | undefined>(
+  undefined
+);
+
+interface AccordionItemContextType {
+  value: string;
+}
+
+const AccordionItemContext = createContext<
+  AccordionItemContextType | undefined
+>(undefined);
+
+function useAccordion() {
+  const context = useContext(AccordionContext);
+  if (!context) {
+    throw new Error('Accordion components must be used within an Accordion');
+  }
+  return context;
+}
+
+function useAccordionItem() {
+  const context = useContext(AccordionItemContext);
+  if (!context) {
+    throw new Error(
+      'AccordionTrigger and AccordionContent must be used within an AccordionItem'
+    );
+  }
+  return context;
+}
+
+interface AccordionProps {
+  type?: 'single' | 'multiple';
+  value?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  children: React.ReactNode;
+}
+
+function Accordion({
+  type = 'single',
+  value: controlledValue,
+  onValueChange,
+  children,
+}: AccordionProps) {
+  const [internalValue, setInternalValue] = useState<string | string[]>(
+    type === 'single' ? '' : []
+  );
+
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+
+  const handleValueChange = useCallback(
+    (itemValue: string) => {
+      if (type === 'single') {
+        const newValue = value === itemValue ? '' : itemValue;
+        if (!isControlled) {
+          setInternalValue(newValue);
+        }
+        onValueChange?.(newValue);
+      } else {
+        const valueArray = Array.isArray(value) ? value : [];
+        const newValue = valueArray.includes(itemValue)
+          ? valueArray.filter((v) => v !== itemValue)
+          : [...valueArray, itemValue];
+        if (!isControlled) {
+          setInternalValue(newValue);
+        }
+        onValueChange?.(newValue);
+      }
+    },
+    [value, type, isControlled, onValueChange]
+  );
+
+  return (
+    <AccordionContext.Provider
+      value={{ value, onValueChange: handleValueChange, type }}
+    >
+      <div data-slot="accordion">{children}</div>
+    </AccordionContext.Provider>
+  );
+}
+
+interface AccordionItemProps {
+  value: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+function AccordionItem({ value, children, className }: AccordionItemProps) {
+  return (
+    <AccordionItemContext.Provider value={{ value }}>
+      <div
+        data-slot="accordion-item"
+        className={cn('border-b border-border last:border-b-0', className)}
+        data-value={value}
+      >
+        {children}
+      </div>
+    </AccordionItemContext.Provider>
+  );
+}
+
+interface AccordionTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionTriggerProps) {
+  const accordion = useAccordion();
+  const item = useAccordionItem();
+
+  const handleClick = () => {
+    accordion.onValueChange(item.value);
+  };
+
+  const isOpen =
+    accordion.type === 'single'
+      ? accordion.value === item.value
+      : Array.isArray(accordion.value) && accordion.value.includes(item.value);
+
+  return (
+    <div className="flex">
+      <button
+        data-slot="accordion-trigger"
+        className={cn(
+          'flex flex-1 items-start justify-between gap-4 rounded-md py-4 px-0 text-left text-sm font-medium transition-all outline-none hover:cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:rounded-md disabled:pointer-events-none disabled:opacity-50',
+          isOpen && '[&>svg]:rotate-180',
+          className
+        )}
+        onClick={handleClick}
+        data-state={isOpen ? 'open' : 'closed'}
+        {...props}
+      >
+        {children}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+        >
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      </button>
+    </div>
+  );
+}
+
+interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionContentProps) {
+  const accordion = useAccordion();
+  const item = useAccordionItem();
+
+  const isOpen =
+    accordion.type === 'single'
+      ? accordion.value === item.value
+      : Array.isArray(accordion.value) && accordion.value.includes(item.value);
+
+  return (
+    <div
+      data-slot="accordion-content"
+      data-state={isOpen ? 'open' : 'closed'}
+      className={cn(
+        'overflow-hidden text-sm transition-all duration-200',
+        isOpen ? 'max-h-96' : 'max-h-0'
+      )}
+      {...props}
+    >
+      <div className={cn('pt-0 pb-4', className)}>{children}</div>
+    </div>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

components/ui/alert.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+type AlertVariant = "default" | "destructive"
+
+const baseClasses =
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current"
+
+const variantClasses: Record<AlertVariant, string> = {
+  default: "bg-card text-card-foreground",
+  destructive:
+    "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+}
+
+function Alert({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & { variant?: AlertVariant }) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(baseClasses, variantClasses[variant], className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

components/ui/avatar.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface AvatarProps extends React.ComponentProps<'div'> {
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+const sizeClasses = {
+  sm: 'size-6',
+  md: 'size-8',
+  lg: 'size-10',
+  xl: 'size-12',
+};
+
+function Avatar({ className, size = 'md', ...props }: AvatarProps) {
+  const [imageError, setImageError] = React.useState(false);
+
+  return (
+    <div
+      data-slot="avatar"
+      className={cn(
+        'relative flex shrink-0 overflow-hidden rounded-full',
+        sizeClasses[size],
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  onError,
+  ...props
+}: React.ComponentProps<'img'>) {
+  const [hasError, setHasError] = React.useState(false);
+
+  const handleError = (e: React.SyntheticEvent<HTMLImageElement>) => {
+    setHasError(true);
+    onError?.(e as any);
+  };
+
+  if (hasError) {
+    return null;
+  }
+
+  return (
+    <img
+      data-slot="avatar-image"
+      className={cn('aspect-square h-full w-full object-cover', className)}
+      onError={handleError}
+      {...props}
+    />
+  );
+}
+
+interface AvatarFallbackProps extends React.ComponentProps<'div'> {
+  children: React.ReactNode;
+}
+
+function AvatarFallback({
+  className,
+  children,
+  ...props
+}: AvatarFallbackProps) {
+  return (
+    <div
+      data-slot="avatar-fallback"
+      className={cn(
+        'bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full font-medium text-sm',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };
+export type { AvatarProps };

components/ui/badge.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline';
+
+interface BadgeProps extends React.ComponentProps<'span'> {
+  variant?: BadgeVariant;
+  asChild?: boolean;
+}
+
+const badgeVariants: Record<BadgeVariant, string> = {
+  default:
+    'border-transparent bg-primary text-primary-foreground hover:bg-primary/90',
+  secondary:
+    'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90',
+  destructive:
+    'border-transparent bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+  outline:
+    'text-foreground border-border hover:bg-accent hover:text-accent-foreground',
+};
+
+function Badge({
+  className,
+  variant = 'default',
+  asChild = false,
+  children,
+  ...props
+}: BadgeProps) {
+  const baseClasses = cn(
+    'inline-flex items-center justify-center rounded-full border px-2.5 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 gap-1 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden',
+    '[&>svg]:size-3 [&>svg]:pointer-events-none [&>svg]:shrink-0'
+  );
+
+  const variantClasses = badgeVariants[variant];
+
+  const finalClassName = cn(baseClasses, variantClasses, className);
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement, {
+      className: cn(children.props.className, finalClassName),
+      ...props,
+    });
+  }
+
+  return (
+    <span data-slot="badge" className={finalClassName} {...props}>
+      {children}
+    </span>
+  );
+}
+
+export { Badge, badgeVariants };
+export type { BadgeProps };

components/ui/breadcrumb.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn('inline-flex items-center gap-1.5', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean;
+}) {
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement, {
+      className: cn(
+        'hover:text-foreground transition-colors',
+        children.props.className,
+        className
+      ),
+      ...props,
+    });
+  }
+
+  return (
+    <a
+      data-slot="breadcrumb-link"
+      className={cn('hover:text-foreground transition-colors', className)}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('text-foreground font-normal', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('[&>svg]:size-3.5', className)}
+      {...props}
+    >
+      {children ?? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="size-3.5"
+        >
+          <polyline points="9 18 15 12 9 6"></polyline>
+        </svg>
+      )}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="size-4"
+      >
+        <circle cx="12" cy="12" r="1"></circle>
+        <circle cx="19" cy="12" r="1"></circle>
+        <circle cx="5" cy="12" r="1"></circle>
+      </svg>
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

components/ui/button-group.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+
+// Utility function to combine classNames
+function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+// Button group variants helper
+function getButtonGroupVariants(
+  orientation: 'horizontal' | 'vertical'
+): string {
+  const baseStyles =
+    'flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*="w-"])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2';
+
+  const orientationStyles = {
+    horizontal:
+      '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+    vertical:
+      'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+  };
+
+  return cn(baseStyles, orientationStyles[orientation]);
+}
+
+interface ButtonGroupProps extends React.ComponentProps<'div'> {
+  orientation?: 'horizontal' | 'vertical';
+}
+
+function ButtonGroup({
+  className,
+  orientation = 'horizontal',
+  ...props
+}: ButtonGroupProps) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(getButtonGroupVariants(orientation), className)}
+      {...props}
+    />
+  );
+}
+
+interface ButtonGroupTextProps extends React.ComponentProps<'div'> {
+  asChild?: boolean;
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: ButtonGroupTextProps) {
+  const Comp = asChild ? 'div' : 'div';
+  return (
+    <Comp
+      data-slot="button-group-text"
+      className={cn(
+        'bg-muted flex items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+interface ButtonGroupSeparatorProps extends React.ComponentProps<'div'> {
+  orientation?: 'horizontal' | 'vertical';
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = 'vertical',
+  ...props
+}: ButtonGroupSeparatorProps) {
+  const separatorClasses =
+    orientation === 'vertical' ? 'w-px h-auto' : 'h-px w-auto';
+
+  return (
+    <div
+      data-slot="button-group-separator"
+      className={cn(
+        'bg-border relative !m-0 self-stretch',
+        separatorClasses,
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };
+export type {
+  ButtonGroupProps,
+  ButtonGroupTextProps,
+  ButtonGroupSeparatorProps,
+};

components/ui/button.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?:
+    | 'default'
+    | 'destructive'
+    | 'outline'
+    | 'secondary'
+    | 'ghost'
+    | 'link';
+  size?: 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
+  children?: React.ReactNode;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'default', size = 'default', ...props }, ref) => {
+    const baseClasses = cn(
+      // Base styles
+      'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all',
+      'disabled:pointer-events-none disabled:opacity-50',
+      '[&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4',
+      'shrink-0 [&_svg]:shrink-0',
+      'outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive'
+    );
+
+    const variantClasses = {
+      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:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+      outline:
+        'border border-border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+      secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      ghost:
+        'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+      link: 'text-primary underline-offset-4 hover:underline',
+    };
+
+    const sizeClasses = {
+      default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+      sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+      lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+      icon: 'size-9',
+      'icon-sm': 'size-8',
+      'icon-lg': 'size-10',
+    };
+
+    return (
+      <button
+        ref={ref}
+        data-slot="button"
+        data-variant={variant}
+        data-size={size}
+        className={cn(
+          baseClasses,
+          variantClasses[variant],
+          sizeClasses[size],
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Button.displayName = 'Button';
+
+export { Button };
+export default Button;

components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border border-border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@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",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  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,
+}

components/ui/carousel.tsx

@@ -0,0 +1,245 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+} from 'react';
+import { cn } from '@/lib/utils';
+import { Button } from './button';
+
+interface CarouselContextType {
+  currentIndex: number;
+  totalItems: number;
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+  orientation: 'horizontal' | 'vertical';
+}
+
+const CarouselContext = createContext<CarouselContextType | undefined>(
+  undefined
+);
+
+function useCarousel() {
+  const context = useContext(CarouselContext);
+  if (!context) {
+    throw new Error('Carousel components must be used within a Carousel');
+  }
+  return context;
+}
+
+interface CarouselProps {
+  children: React.ReactNode;
+  orientation?: 'horizontal' | 'vertical';
+  className?: string;
+  autoPlay?: boolean;
+  autoPlayInterval?: number;
+}
+
+function Carousel({
+  children,
+  orientation = 'horizontal',
+  className,
+  autoPlay = false,
+  autoPlayInterval = 3000,
+}: CarouselProps) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const itemCount = React.Children.count(children);
+  const autoPlayTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const canScrollPrev = currentIndex > 0;
+  const canScrollNext = currentIndex < itemCount - 1;
+
+  const scrollPrev = useCallback(() => {
+    setCurrentIndex((prev) => Math.max(0, prev - 1));
+  }, []);
+
+  const scrollNext = useCallback(() => {
+    setCurrentIndex((prev) => Math.min(itemCount - 1, prev + 1));
+  }, [itemCount]);
+
+  useEffect(() => {
+    if (!autoPlay) return;
+
+    autoPlayTimerRef.current = setInterval(() => {
+      setCurrentIndex((prev) => {
+        if (prev >= itemCount - 1) {
+          return 0;
+        }
+        return prev + 1;
+      });
+    }, autoPlayInterval);
+
+    return () => {
+      if (autoPlayTimerRef.current) {
+        clearInterval(autoPlayTimerRef.current);
+      }
+    };
+  }, [autoPlay, autoPlayInterval, itemCount]);
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        currentIndex,
+        totalItems: itemCount,
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+        orientation,
+      }}
+    >
+      <div
+        className={cn('relative', className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+}
+
+interface CarouselContentProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function CarouselContent({ className, children }: CarouselContentProps) {
+  const { currentIndex, orientation } = useCarousel();
+
+  return (
+    <div
+      className={cn('overflow-hidden', className)}
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          'flex transition-transform duration-300 ease-out',
+          orientation === 'horizontal' ? 'flex-row' : 'flex-col'
+        )}
+        style={{
+          transform:
+            orientation === 'horizontal'
+              ? `translateX(-${currentIndex * 100}%)`
+              : `translateY(-${currentIndex * 100}%)`,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+interface CarouselItemProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function CarouselItem({ className, children }: CarouselItemProps) {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn('min-w-0 shrink-0 grow-0 basis-full', className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface CarouselPreviousProps {
+  className?: string;
+}
+
+function CarouselPrevious({ className }: CarouselPreviousProps) {
+  const { scrollPrev, canScrollPrev, orientation } = useCarousel();
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant="outline"
+      onClick={scrollPrev}
+      disabled={!canScrollPrev}
+      className={cn(
+        'absolute size-10 rounded-full p-0 flex items-center justify-center',
+        orientation === 'horizontal'
+          ? 'top-1/2 left-2 -translate-y-1/2'
+          : 'top-2 left-1/2 -translate-x-1/2 -rotate-90',
+        className
+      )}
+      aria-label="Previous slide"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="size-4"
+      >
+        <path d="M15 18l-6-6 6-6" />
+      </svg>
+    </Button>
+  );
+}
+
+interface CarouselNextProps {
+  className?: string;
+}
+
+function CarouselNext({ className }: CarouselNextProps) {
+  const { scrollNext, canScrollNext, orientation } = useCarousel();
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant="outline"
+      onClick={scrollNext}
+      disabled={!canScrollNext}
+      className={cn(
+        'absolute size-10 rounded-full p-0 flex items-center justify-center',
+        orientation === 'horizontal'
+          ? 'top-1/2 right-2 -translate-y-1/2'
+          : 'bottom-2 left-1/2 -translate-x-1/2 rotate-90',
+        className
+      )}
+      aria-label="Next slide"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="size-4"
+      >
+        <path d="M9 18l6-6-6-6" />
+      </svg>
+    </Button>
+  );
+}
+
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  useCarousel,
+};

components/ui/collapsible.tsx

@@ -0,0 +1,193 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+interface CollapsibleContextValue {
+  open: boolean
+  setOpen: (open: boolean) => void
+  contentId: string
+}
+
+const CollapsibleContext = React.createContext<CollapsibleContextValue | null>(null)
+
+function useCollapsible() {
+  const context = React.useContext(CollapsibleContext)
+  if (!context) {
+    throw new Error("useCollapsible must be used within a Collapsible")
+  }
+  return context
+}
+
+interface CollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  disabled?: boolean
+}
+
+function Collapsible({
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  disabled,
+  className,
+  ...props
+}: CollapsibleProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+  const contentId = React.useId()
+
+  const isControlled = controlledOpen !== undefined
+  const open = isControlled ? controlledOpen : uncontrolledOpen
+
+  const setOpen = React.useCallback(
+    (value: boolean) => {
+      if (disabled) return
+      if (!isControlled) {
+        setUncontrolledOpen(value)
+      }
+      onOpenChange?.(value)
+    },
+    [disabled, isControlled, onOpenChange]
+  )
+
+  return (
+    <CollapsibleContext.Provider value={{ open, setOpen, contentId }}>
+      <div
+        data-slot="collapsible"
+        data-state={open ? "open" : "closed"}
+        data-disabled={disabled || undefined}
+        className={className}
+        {...props}
+      >
+        {children}
+      </div>
+    </CollapsibleContext.Provider>
+  )
+}
+
+interface CollapsibleTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  asChild?: boolean
+}
+
+function CollapsibleTrigger({
+  children,
+  asChild,
+  className,
+  ...props
+}: CollapsibleTriggerProps) {
+  const { open, setOpen, contentId } = useCollapsible()
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    props.onClick?.(e)
+    if (!e.defaultPrevented) {
+      setOpen(!open)
+    }
+  }
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<any>, {
+      onClick: handleClick,
+      "aria-expanded": open,
+      "aria-controls": contentId,
+      "data-state": open ? "open" : "closed",
+      "data-slot": "collapsible-trigger",
+    })
+  }
+
+  return (
+    <button
+      type="button"
+      data-slot="collapsible-trigger"
+      data-state={open ? "open" : "closed"}
+      aria-expanded={open}
+      aria-controls={contentId}
+      className={className}
+      onClick={handleClick}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+interface CollapsibleContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  forceMount?: boolean
+}
+
+function CollapsibleContent({
+  children,
+  className,
+  forceMount,
+  ...props
+}: CollapsibleContentProps) {
+  const { open, contentId } = useCollapsible()
+  const contentRef = React.useRef<HTMLDivElement>(null)
+  const [height, setHeight] = React.useState<number | undefined>(undefined)
+  const [isAnimating, setIsAnimating] = React.useState(false)
+
+  React.useLayoutEffect(() => {
+    const content = contentRef.current
+    if (!content) return
+
+    if (open) {
+      // Opening: measure and animate
+      setIsAnimating(true)
+      const contentHeight = content.scrollHeight
+      setHeight(contentHeight)
+
+      const timer = setTimeout(() => {
+        setIsAnimating(false)
+        setHeight(undefined)
+      }, 200) // Match animation duration
+
+      return () => clearTimeout(timer)
+    } else {
+      // Closing: set current height first, then animate to 0
+      const contentHeight = content.scrollHeight
+      setHeight(contentHeight)
+      setIsAnimating(true)
+
+      // Force reflow then set to 0
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setHeight(0)
+        })
+      })
+
+      const timer = setTimeout(() => {
+        setIsAnimating(false)
+      }, 200)
+
+      return () => clearTimeout(timer)
+    }
+  }, [open])
+
+  if (!open && !isAnimating && !forceMount) {
+    return null
+  }
+
+  return (
+    <div
+      ref={contentRef}
+      id={contentId}
+      data-slot="collapsible-content"
+      data-state={open ? "open" : "closed"}
+      hidden={!open && !isAnimating && !forceMount}
+      className={cn(
+        "overflow-hidden transition-[height] duration-200 ease-out",
+        className
+      )}
+      style={{
+        height: isAnimating ? height : open ? "auto" : 0,
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

components/ui/command.tsx

@@ -0,0 +1,421 @@
+"use client"
+
+import * as React from "react"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+interface CommandContextValue {
+  search: string
+  setSearch: (value: string) => void
+  selectedIndex: number
+  setSelectedIndex: (index: number) => void
+  items: React.RefObject<HTMLDivElement[]>
+  registerItem: (element: HTMLDivElement | null, index: number) => void
+  filter: (value: string, search: string) => boolean
+}
+
+const CommandContext = React.createContext<CommandContextValue | null>(null)
+
+function useCommand() {
+  const context = React.useContext(CommandContext)
+  if (!context) {
+    throw new Error("useCommand must be used within a Command")
+  }
+  return context
+}
+
+interface CommandProps extends React.HTMLAttributes<HTMLDivElement> {
+  filter?: (value: string, search: string) => boolean
+  shouldFilter?: boolean
+}
+
+function Command({
+  className,
+  children,
+  filter,
+  shouldFilter = true,
+  ...props
+}: CommandProps) {
+  const [search, setSearch] = React.useState("")
+  const [selectedIndex, setSelectedIndex] = React.useState(0)
+  const items = React.useRef<HTMLDivElement[]>([])
+
+  const defaultFilter = React.useCallback((value: string, search: string) => {
+    if (!shouldFilter) return true
+    if (search.length === 0) return true
+    return value.toLowerCase().includes(search.toLowerCase())
+  }, [shouldFilter])
+
+  const registerItem = React.useCallback((element: HTMLDivElement | null, index: number) => {
+    if (element) {
+      items.current[index] = element
+    }
+  }, [])
+
+  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {
+    const visibleItems = items.current.filter((item) => item && !item.hidden)
+
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault()
+        setSelectedIndex((prev) => {
+          const next = prev + 1
+          return next >= visibleItems.length ? 0 : next
+        })
+        break
+      case "ArrowUp":
+        e.preventDefault()
+        setSelectedIndex((prev) => {
+          const next = prev - 1
+          return next < 0 ? visibleItems.length - 1 : next
+        })
+        break
+      case "Enter":
+        e.preventDefault()
+        const selectedItem = visibleItems[selectedIndex]
+        if (selectedItem) {
+          selectedItem.click()
+        }
+        break
+      case "Home":
+        e.preventDefault()
+        setSelectedIndex(0)
+        break
+      case "End":
+        e.preventDefault()
+        setSelectedIndex(visibleItems.length - 1)
+        break
+    }
+  }, [selectedIndex])
+
+  React.useEffect(() => {
+    setSelectedIndex(0)
+  }, [search])
+
+  return (
+    <CommandContext.Provider
+      value={{
+        search,
+        setSearch,
+        selectedIndex,
+        setSelectedIndex,
+        items,
+        registerItem,
+        filter: filter || defaultFilter,
+      }}
+    >
+      <div
+        data-slot="command"
+        className={cn(
+          "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md border border-border",
+          className
+        )}
+        onKeyDown={handleKeyDown}
+        {...props}
+      >
+        {children}
+      </div>
+    </CommandContext.Provider>
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = false,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0 bg-transparent border-none shadow-none max-w-[450px]", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="rounded-lg border shadow-md w-full [&_[data-slot=command-input-wrapper]]:h-12 [&_[data-slot=command-input]]:h-12 [&_[data-slot=command-item]]:px-2 [&_[data-slot=command-item]]:py-3 [&_svg]:h-5 [&_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.InputHTMLAttributes<HTMLInputElement>) {
+  const { search, setSearch } = useCommand()
+
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b border-border px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <input
+        data-slot="command-input"
+        type="text"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="command-list"
+      role="listbox"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  const { search, items } = useCommand()
+  const [isEmpty, setIsEmpty] = React.useState(false)
+
+  React.useEffect(() => {
+    const checkEmpty = () => {
+      const visibleItems = search.length === 0
+        ? items.current.filter((item) => item)
+        : items.current.filter((item) => item && !item.hidden)
+      setIsEmpty(search.length > 0 && visibleItems.length === 0)
+    }
+
+    // Use a small delay to let items update their visibility
+    const timeout = setTimeout(checkEmpty, 10)
+    return () => clearTimeout(timeout)
+  }, [search, items])
+
+  if (!isEmpty) return null
+
+  return (
+    <div
+      data-slot="command-empty"
+      className={cn("py-6 text-center text-sm", className)}
+      {...props}
+    >
+      {children || "No results found."}
+    </div>
+  )
+}
+
+interface CommandGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  heading?: React.ReactNode
+}
+
+function CommandGroup({
+  className,
+  heading,
+  children,
+  ...props
+}: CommandGroupProps) {
+  const groupRef = React.useRef<HTMLDivElement>(null)
+  const { search } = useCommand()
+  const [hasVisibleItems, setHasVisibleItems] = React.useState(true)
+
+  React.useEffect(() => {
+    if (search.length === 0) {
+      setHasVisibleItems(true)
+      return
+    }
+
+    const checkVisibility = () => {
+      if (groupRef.current) {
+        const items = groupRef.current.querySelectorAll('[data-slot="command-item"]')
+        const visibleItems = Array.from(items).filter(
+          (item) => !(item as HTMLElement).hidden
+        )
+        setHasVisibleItems(visibleItems.length > 0)
+      }
+    }
+
+    const timeout = setTimeout(checkVisibility, 10)
+    return () => clearTimeout(timeout)
+  }, [search])
+
+  return (
+    <div
+      ref={groupRef}
+      data-slot="command-group"
+      role="group"
+      hidden={!hasVisibleItems}
+      className={cn(
+        "text-foreground overflow-hidden p-1",
+        className
+      )}
+      {...props}
+    >
+      {heading && (
+        <div className="text-muted-foreground px-2 py-1.5 text-xs font-medium">
+          {heading}
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="command-separator"
+      role="separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+interface CommandItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  disabled?: boolean
+  value?: string
+  onSelect?: (value: string) => void
+  keywords?: string[]
+}
+
+const itemIndexCounter = { current: 0 }
+
+function getTextFromChildren(children: React.ReactNode): string {
+  if (typeof children === "string") return children
+  if (typeof children === "number") return String(children)
+  if (Array.isArray(children)) return children.map(getTextFromChildren).join(" ")
+  if (React.isValidElement(children) && children.props.children) {
+    return getTextFromChildren(children.props.children)
+  }
+  return ""
+}
+
+function CommandItem({
+  className,
+  disabled,
+  value,
+  onSelect,
+  keywords = [],
+  children,
+  ...props
+}: CommandItemProps) {
+  const { search, selectedIndex, setSelectedIndex, registerItem, filter } = useCommand()
+  const ref = React.useRef<HTMLDivElement>(null)
+  const indexRef = React.useRef<number>(-1)
+
+  React.useLayoutEffect(() => {
+    indexRef.current = itemIndexCounter.current++
+    return () => {
+      itemIndexCounter.current = Math.max(0, itemIndexCounter.current - 1)
+    }
+  }, [])
+
+  React.useEffect(() => {
+    registerItem(ref.current, indexRef.current)
+  }, [registerItem])
+
+  const searchableText = value || getTextFromChildren(children)
+  const allSearchableText = [searchableText, ...keywords].join(" ")
+  const isVisible = search.length === 0 ? true : filter(allSearchableText, search)
+  const isSelected = selectedIndex === indexRef.current && isVisible
+
+  const handleSelect = () => {
+    if (disabled) return
+    onSelect?.(searchableText)
+  }
+
+  const handleMouseEnter = () => {
+    if (!disabled) {
+      setSelectedIndex(indexRef.current)
+    }
+  }
+
+  return (
+    <div
+      ref={ref}
+      data-slot="command-item"
+      role="option"
+      aria-selected={isSelected}
+      aria-disabled={disabled}
+      data-selected={isSelected}
+      data-disabled={disabled}
+      hidden={!isVisible}
+      tabIndex={disabled ? -1 : 0}
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground",
+        "[&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none",
+        "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      onClick={handleSelect}
+      onMouseEnter={handleMouseEnter}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

components/ui/dialog.tsx

@@ -0,0 +1,274 @@
+import React, { useState, useCallback, useContext, createContext } from 'react';
+import { createPortal } from 'react-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { cn } from '@/lib/utils';
+
+interface DialogContextType {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const DialogContext = createContext<DialogContextType | undefined>(undefined);
+
+function useDialog() {
+  const context = useContext(DialogContext);
+  if (!context) {
+    throw new Error('Dialog components must be used within a Dialog');
+  }
+  return context;
+}
+
+interface DialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: React.ReactNode;
+}
+
+function Dialog({ open: controlledOpen, onOpenChange, children }: DialogProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+
+  const setOpen = useCallback(
+    (newOpen: boolean) => {
+      if (!isControlled) {
+        setInternalOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+    },
+    [isControlled, onOpenChange]
+  );
+
+  return (
+    <DialogContext.Provider value={{ open, setOpen }}>
+      {children}
+    </DialogContext.Provider>
+  );
+}
+
+function DialogTrigger({
+  children,
+  asChild,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }) {
+  const { setOpen } = useDialog();
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement, {
+      ...props,
+      onClick: (e: React.MouseEvent) => {
+        setOpen(true);
+        children.props.onClick?.(e);
+      },
+    });
+  }
+
+  return (
+    <button
+      {...props}
+      onClick={(e) => {
+        setOpen(true);
+        props.onClick?.(e);
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+function DialogPortal({ children }: { children: React.ReactNode }) {
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  return createPortal(children, document.body);
+}
+
+function DialogClose({
+  children,
+  asChild,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }) {
+  const { setOpen } = useDialog();
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement, {
+      ...props,
+      onClick: (e: React.MouseEvent) => {
+        setOpen(false);
+        children.props.onClick?.(e);
+      },
+    });
+  }
+
+  return (
+    <button
+      {...props}
+      onClick={(e) => {
+        setOpen(false);
+        props.onClick?.(e);
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+interface DialogOverlayProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+function DialogOverlay({ className, onClick, ...props }: DialogOverlayProps) {
+  const { setOpen } = useDialog();
+
+  return (
+    <motion.div
+      data-slot="dialog-overlay"
+      className={cn('fixed inset-0 z-50 bg-black/50', className)}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.2 }}
+      onClick={(e) => {
+        setOpen(false);
+        onClick?.(e as any);
+      }}
+      {...props}
+    />
+  );
+}
+
+interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  showCloseButton?: boolean;
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogContentProps) {
+  const { open } = useDialog();
+
+  return (
+    <DialogPortal>
+      <AnimatePresence>
+        {open && (
+          <>
+            <DialogOverlay />
+            <motion.div
+              data-slot="dialog-content"
+              className={cn(
+                'bg-background fixed top-1/2 left-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border border-border p-6 shadow-lg',
+                className
+              )}
+              initial={{ opacity: 0, scale: 0.95, y: 0 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.95, y: 0 }}
+              transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+              {...props}
+            >
+              {children}
+              {showCloseButton && (
+                <DialogClose
+                  data-slot="dialog-close"
+                  className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+                  aria-label="Close"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="size-4"
+                  >
+                    <path d="M18 6l-12 12M6 6l12 12" />
+                  </svg>
+                </DialogClose>
+              )}
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn(
+        'flex flex-col gap-2 text-center sm:text-left',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h2
+      data-slot="dialog-title"
+      className={cn('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p
+      data-slot="dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  AnimatePresence,
+};

components/ui/dropdown-menu.tsx

@@ -0,0 +1,616 @@
+"use client"
+
+import * as React from "react"
+import { createPortal } from "react-dom"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+interface DropdownMenuContextValue {
+  open: boolean
+  setOpen: (open: boolean) => void
+  triggerRef: React.RefObject<HTMLButtonElement | null>
+}
+
+const DropdownMenuContext = React.createContext<DropdownMenuContextValue | null>(null)
+
+function useDropdownMenu() {
+  const context = React.useContext(DropdownMenuContext)
+  if (!context) {
+    throw new Error("useDropdownMenu must be used within a DropdownMenu")
+  }
+  return context
+}
+
+interface DropdownMenuProps {
+  children: React.ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+function DropdownMenu({
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+}: DropdownMenuProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
+
+  const isControlled = controlledOpen !== undefined
+  const open = isControlled ? controlledOpen : uncontrolledOpen
+
+  const setOpen = React.useCallback((value: boolean) => {
+    if (!isControlled) {
+      setUncontrolledOpen(value)
+    }
+    onOpenChange?.(value)
+  }, [isControlled, onOpenChange])
+
+  return (
+    <DropdownMenuContext.Provider value={{ open, setOpen, triggerRef }}>
+      {children}
+    </DropdownMenuContext.Provider>
+  )
+}
+
+function DropdownMenuTrigger({
+  className,
+  children,
+  asChild,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }) {
+  const { open, setOpen, triggerRef } = useDropdownMenu()
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault()
+    setOpen(!open)
+    props.onClick?.(e)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+      e.preventDefault()
+      setOpen(true)
+    }
+    props.onKeyDown?.(e)
+  }
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<any>, {
+      ref: triggerRef,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      "aria-expanded": open,
+      "aria-haspopup": "menu",
+      "data-state": open ? "open" : "closed",
+    })
+  }
+
+  return (
+    <button
+      ref={triggerRef}
+      type="button"
+      data-slot="dropdown-menu-trigger"
+      aria-expanded={open}
+      aria-haspopup="menu"
+      data-state={open ? "open" : "closed"}
+      className={cn("relative", className)}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+function DropdownMenuPortal({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}
+
+interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  sideOffset?: number
+  align?: "start" | "center" | "end"
+  side?: "top" | "right" | "bottom" | "left"
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  align = "start",
+  side = "bottom",
+  children,
+  ...props
+}: DropdownMenuContentProps) {
+  const { open, setOpen, triggerRef } = useDropdownMenu()
+  const contentRef = React.useRef<HTMLDivElement>(null)
+  const [position, setPosition] = React.useState({ top: 0, left: 0 })
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  React.useLayoutEffect(() => {
+    if (!open || !triggerRef.current || !contentRef.current) return
+
+    const trigger = triggerRef.current.getBoundingClientRect()
+    const content = contentRef.current.getBoundingClientRect()
+
+    let top = 0
+    let left = 0
+
+    // Calculate position based on side
+    switch (side) {
+      case "top":
+        top = trigger.top - content.height - sideOffset
+        break
+      case "bottom":
+        top = trigger.bottom + sideOffset
+        break
+      case "left":
+        left = trigger.left - content.width - sideOffset
+        top = trigger.top
+        break
+      case "right":
+        left = trigger.right + sideOffset
+        top = trigger.top
+        break
+    }
+
+    // Calculate alignment for top/bottom
+    if (side === "top" || side === "bottom") {
+      switch (align) {
+        case "start":
+          left = trigger.left
+          break
+        case "center":
+          left = trigger.left + (trigger.width - content.width) / 2
+          break
+        case "end":
+          left = trigger.right - content.width
+          break
+      }
+    }
+
+    // Calculate alignment for left/right
+    if (side === "left" || side === "right") {
+      switch (align) {
+        case "start":
+          top = trigger.top
+          break
+        case "center":
+          top = trigger.top + (trigger.height - content.height) / 2
+          break
+        case "end":
+          top = trigger.bottom - content.height
+          break
+      }
+    }
+
+    setPosition({ top, left })
+  }, [open, side, align, sideOffset, triggerRef])
+
+  React.useEffect(() => {
+    if (!open) return
+
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node
+      if (
+        contentRef.current &&
+        !contentRef.current.contains(target) &&
+        triggerRef.current &&
+        !triggerRef.current.contains(target)
+      ) {
+        setOpen(false)
+      }
+    }
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setOpen(false)
+        triggerRef.current?.focus()
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside)
+    document.addEventListener("keydown", handleEscape)
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside)
+      document.removeEventListener("keydown", handleEscape)
+    }
+  }, [open, setOpen, triggerRef])
+
+  if (!open || !mounted) return null
+
+  const slideClasses = {
+    top: "slide-in-from-bottom-2",
+    bottom: "slide-in-from-top-2",
+    left: "slide-in-from-right-2",
+    right: "slide-in-from-left-2",
+  }
+
+  return createPortal(
+    <div
+      ref={contentRef}
+      data-slot="dropdown-menu-content"
+      data-state={open ? "open" : "closed"}
+      role="menu"
+      className={cn(
+        "fixed z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "animate-in fade-in-0 zoom-in-95",
+        slideClasses[side],
+        className
+      )}
+      style={{
+        top: position.top,
+        left: position.left,
+      }}
+      {...props}
+    >
+      {children}
+    </div>,
+    document.body
+  )
+}
+
+function DropdownMenuGroup({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="dropdown-menu-group"
+      role="group"
+      className={className}
+      {...props}
+    />
+  )
+}
+
+interface DropdownMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  inset?: boolean
+  variant?: "default" | "destructive"
+  asChild?: boolean
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  children,
+  asChild,
+  ...props
+}: DropdownMenuItemProps) {
+  const { setOpen } = useDropdownMenu()
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    props.onClick?.(e)
+    if (!e.defaultPrevented) {
+      setOpen(false)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault()
+      handleClick(e as unknown as React.MouseEvent<HTMLButtonElement>)
+    }
+    props.onKeyDown?.(e)
+  }
+
+  const itemClasses = cn(
+    "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    variant === "destructive" && "text-destructive focus:bg-destructive/10 focus:text-destructive dark:focus:bg-destructive/20",
+    inset && "pl-8",
+    className
+  )
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<any>, {
+      className: itemClasses,
+      role: "menuitem",
+      tabIndex: -1,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+    })
+  }
+
+  return (
+    <button
+      type="button"
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      role="menuitem"
+      tabIndex={-1}
+      className={itemClasses}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+interface DropdownMenuCheckboxItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "checked"> {
+  checked?: boolean
+  onCheckedChange?: (checked: boolean) => void
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  onCheckedChange,
+  ...props
+}: DropdownMenuCheckboxItemProps) {
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault()
+    onCheckedChange?.(!checked)
+    props.onClick?.(e)
+  }
+
+  return (
+    <button
+      type="button"
+      data-slot="dropdown-menu-checkbox-item"
+      role="menuitemcheckbox"
+      aria-checked={checked}
+      tabIndex={-1}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      onClick={handleClick}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        {checked && <CheckIcon className="size-4" />}
+      </span>
+      {children}
+    </button>
+  )
+}
+
+interface DropdownMenuRadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  value?: string
+  onValueChange?: (value: string) => void
+}
+
+const RadioGroupContext = React.createContext<{
+  value?: string
+  onValueChange?: (value: string) => void
+} | null>(null)
+
+function DropdownMenuRadioGroup({
+  value,
+  onValueChange,
+  children,
+  ...props
+}: DropdownMenuRadioGroupProps) {
+  return (
+    <RadioGroupContext.Provider value={{ value, onValueChange }}>
+      <div
+        data-slot="dropdown-menu-radio-group"
+        role="group"
+        {...props}
+      >
+        {children}
+      </div>
+    </RadioGroupContext.Provider>
+  )
+}
+
+interface DropdownMenuRadioItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  value,
+  ...props
+}: DropdownMenuRadioItemProps) {
+  const context = React.useContext(RadioGroupContext)
+  const checked = context?.value === value
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault()
+    context?.onValueChange?.(value)
+    props.onClick?.(e)
+  }
+
+  return (
+    <button
+      type="button"
+      data-slot="dropdown-menu-radio-item"
+      role="menuitemradio"
+      aria-checked={checked}
+      tabIndex={-1}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      onClick={handleClick}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        {checked && <CircleIcon className="size-2 fill-current" />}
+      </span>
+      {children}
+    </button>
+  )
+}
+
+interface DropdownMenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+  inset?: boolean
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: DropdownMenuLabelProps) {
+  return (
+    <div
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium",
+        inset && "pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="dropdown-menu-separator"
+      role="separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+interface SubMenuContextValue {
+  open: boolean
+  setOpen: (open: boolean) => void
+}
+
+const SubMenuContext = React.createContext<SubMenuContextValue | null>(null)
+
+function DropdownMenuSub({ children }: { children: React.ReactNode }) {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <SubMenuContext.Provider value={{ open, setOpen }}>
+      <div data-slot="dropdown-menu-sub" className="relative">
+        {children}
+      </div>
+    </SubMenuContext.Provider>
+  )
+}
+
+interface DropdownMenuSubTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  inset?: boolean
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: DropdownMenuSubTriggerProps) {
+  const context = React.useContext(SubMenuContext)
+
+  const handleMouseEnter = () => {
+    context?.setOpen(true)
+  }
+
+  const handleMouseLeave = () => {
+    context?.setOpen(false)
+  }
+
+  return (
+    <button
+      type="button"
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      data-state={context?.open ? "open" : "closed"}
+      role="menuitem"
+      aria-haspopup="menu"
+      aria-expanded={context?.open}
+      tabIndex={-1}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+        "[&_svg:not([class*='text-'])]:text-muted-foreground flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none",
+        inset && "pl-8",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </button>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  const context = React.useContext(SubMenuContext)
+
+  if (!context?.open) return null
+
+  return (
+    <div
+      data-slot="dropdown-menu-sub-content"
+      data-state={context.open ? "open" : "closed"}
+      role="menu"
+      className={cn(
+        "absolute left-full top-0 z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg",
+        "animate-in fade-in-0 zoom-in-95 slide-in-from-left-2",
+        className
+      )}
+      onMouseEnter={() => context.setOpen(true)}
+      onMouseLeave={() => context.setOpen(false)}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

components/ui/empty.tsx

@@ -0,0 +1,105 @@
+import React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("text-lg font-medium tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}

components/ui/hover-card.tsx

@@ -0,0 +1,260 @@
+"use client"
+
+import * as React from "react"
+import { createPortal } from "react-dom"
+
+import { cn } from "@/lib/utils"
+
+interface HoverCardContextValue {
+  open: boolean
+  setOpen: (open: boolean) => void
+  triggerRef: React.RefObject<HTMLElement | null>
+  cancelClose: () => void
+}
+
+const HoverCardContext = React.createContext<HoverCardContextValue | null>(null)
+
+function useHoverCard() {
+  const context = React.useContext(HoverCardContext)
+  if (!context) {
+    throw new Error("useHoverCard must be used within a HoverCard")
+  }
+  return context
+}
+
+interface HoverCardProps {
+  children: React.ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  openDelay?: number
+  closeDelay?: number
+}
+
+function HoverCard({
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  openDelay = 700,
+  closeDelay = 300,
+}: HoverCardProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+  const triggerRef = React.useRef<HTMLElement>(null)
+  const openTimeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+  const closeTimeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+
+  const isControlled = controlledOpen !== undefined
+  const open = isControlled ? controlledOpen : uncontrolledOpen
+
+  const setOpen = React.useCallback(
+    (value: boolean) => {
+      if (openTimeoutRef.current) {
+        clearTimeout(openTimeoutRef.current)
+        openTimeoutRef.current = null
+      }
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current)
+        closeTimeoutRef.current = null
+      }
+
+      if (value) {
+        openTimeoutRef.current = setTimeout(() => {
+          if (!isControlled) {
+            setUncontrolledOpen(true)
+          }
+          onOpenChange?.(true)
+        }, openDelay)
+      } else {
+        closeTimeoutRef.current = setTimeout(() => {
+          if (!isControlled) {
+            setUncontrolledOpen(false)
+          }
+          onOpenChange?.(false)
+        }, closeDelay)
+      }
+    },
+    [isControlled, onOpenChange, openDelay, closeDelay]
+  )
+
+  const cancelClose = React.useCallback(() => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current)
+      closeTimeoutRef.current = null
+    }
+  }, [])
+
+  React.useEffect(() => {
+    return () => {
+      if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current)
+      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current)
+    }
+  }, [])
+
+  return (
+    <HoverCardContext.Provider value={{ open, setOpen, triggerRef, cancelClose }}>
+      {children}
+    </HoverCardContext.Provider>
+  )
+}
+
+interface HoverCardTriggerProps extends React.HTMLAttributes<HTMLSpanElement> {
+  asChild?: boolean
+}
+
+function HoverCardTrigger({
+  children,
+  asChild,
+  ...props
+}: HoverCardTriggerProps) {
+  const { setOpen, triggerRef } = useHoverCard()
+
+  const handleMouseEnter = () => {
+    setOpen(true)
+  }
+
+  const handleMouseLeave = () => {
+    setOpen(false)
+  }
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<any>, {
+      ref: triggerRef,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      "data-slot": "hover-card-trigger",
+    })
+  }
+
+  return (
+    <span
+      ref={triggerRef as React.RefObject<HTMLSpanElement>}
+      data-slot="hover-card-trigger"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}
+
+interface HoverCardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  side?: "top" | "right" | "bottom" | "left"
+  sideOffset?: number
+  align?: "start" | "center" | "end"
+}
+
+function HoverCardContent({
+  className,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  children,
+  ...props
+}: HoverCardContentProps) {
+  const { open, setOpen, triggerRef, cancelClose } = useHoverCard()
+  const [position, setPosition] = React.useState({ top: 0, left: 0 })
+  const [mounted, setMounted] = React.useState(false)
+  const contentRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  React.useLayoutEffect(() => {
+    if (!open || !triggerRef.current || !contentRef.current) return
+
+    const trigger = triggerRef.current.getBoundingClientRect()
+    const content = contentRef.current.getBoundingClientRect()
+
+    let top = 0
+    let left = 0
+
+    // Calculate position based on side
+    switch (side) {
+      case "top":
+        top = trigger.top - content.height - sideOffset
+        break
+      case "bottom":
+        top = trigger.bottom + sideOffset
+        break
+      case "left":
+        left = trigger.left - content.width - sideOffset
+        top = trigger.top + (trigger.height - content.height) / 2
+        break
+      case "right":
+        left = trigger.right + sideOffset
+        top = trigger.top + (trigger.height - content.height) / 2
+        break
+    }
+
+    // Calculate alignment for top/bottom
+    if (side === "top" || side === "bottom") {
+      switch (align) {
+        case "start":
+          left = trigger.left
+          break
+        case "center":
+          left = trigger.left + (trigger.width - content.width) / 2
+          break
+        case "end":
+          left = trigger.right - content.width
+          break
+      }
+    }
+
+    // Calculate alignment for left/right
+    if (side === "left" || side === "right") {
+      switch (align) {
+        case "start":
+          top = trigger.top
+          break
+        case "center":
+          top = trigger.top + (trigger.height - content.height) / 2
+          break
+        case "end":
+          top = trigger.bottom - content.height
+          break
+      }
+    }
+
+    setPosition({ top, left })
+  }, [open, side, align, sideOffset, triggerRef])
+
+  if (!open || !mounted) return null
+
+  const slideClasses = {
+    top: "slide-in-from-bottom-2",
+    bottom: "slide-in-from-top-2",
+    left: "slide-in-from-right-2",
+    right: "slide-in-from-left-2",
+  }
+
+  return createPortal(
+    <div
+      ref={contentRef}
+      data-slot="hover-card-content"
+      data-state={open ? "open" : "closed"}
+      data-side={side}
+      className={cn(
+        "fixed z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+        "animate-in fade-in-0 zoom-in-95",
+        slideClasses[side],
+        className
+      )}
+      style={{
+        top: position.top,
+        left: position.left,
+      }}
+      onMouseEnter={cancelClose}
+      onMouseLeave={() => setOpen(false)}
+      {...props}
+    >
+      {children}
+    </div>,
+    document.body
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

components/ui/input-group.tsx

@@ -0,0 +1,180 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+interface InputGroupProps extends React.ComponentProps<"div"> {
+  layout?: "inline" | "stacked"
+}
+
+function InputGroup({ className, layout, ...props }: InputGroupProps) {
+  // Detect layout from children if not explicitly set
+  const hasBlockAddon = React.Children.toArray(props.children).some(
+    (child) =>
+      React.isValidElement(child) &&
+      ((child.props as any)?.align === "block-end" ||
+       (child.props as any)?.align === "block-start")
+  )
+
+  const isStacked = layout === "stacked" || hasBlockAddon
+
+  return (
+    <div
+      data-slot="input-group"
+      data-layout={isStacked ? "stacked" : "inline"}
+      role="group"
+      className={cn(
+        "group/input-group border-input dark:bg-input/30 relative flex w-full rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
+        isStacked ? "h-auto flex-col" : "h-9 min-w-0 items-center",
+
+        // Focus state.
+        "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
+
+        // Error state.
+        "has-[[aria-invalid=true]]:ring-destructive/20 has-[[aria-invalid=true]]:border-destructive dark:has-[[aria-invalid=true]]:ring-destructive/40",
+
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end":
+          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end":
+          "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+InputGroupAddon.displayName = "InputGroupAddon"
+
+const inputGroupButtonVariants = cva(
+  "text-sm shadow-none flex gap-2 items-center",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+        sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}

components/ui/input-otp.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { cn } from '@/lib/utils';
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string;
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        'flex items-center gap-2 has-disabled:opacity-50',
+        containerClassName
+      )}
+      className={cn('disabled:cursor-not-allowed', className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn('flex items-center', className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  index: number;
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r border-border text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l first:border-border last:rounded-r-md last:border-border data-[active=true]:z-10 data-[active=true]:ring-[3px]',
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="size-4"
+      >
+        <line x1="5" y1="12" x2="19" y2="12"></line>
+      </svg>
+    </div>
+  );
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "text-foreground file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-background px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

components/ui/item.tsx

@@ -0,0 +1,213 @@
+import React from 'react';
+
+// Utility function to combine classNames
+function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+// Item variants helper
+function getItemVariants(
+  variant: 'default' | 'outline' | 'muted',
+  size: 'default' | 'sm'
+): string {
+  const baseStyles =
+    'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]';
+
+  const variantStyles = {
+    default: 'bg-transparent',
+    outline: 'border-border',
+    muted: 'bg-muted/50',
+  };
+
+  const sizeStyles = {
+    default: 'p-4 gap-4',
+    sm: 'py-3 px-4 gap-2.5',
+  };
+
+  return cn(baseStyles, variantStyles[variant], sizeStyles[size]);
+}
+
+// Item media variants helper
+function getItemMediaVariants(variant: 'default' | 'icon' | 'image'): string {
+  const baseStyles =
+    'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5';
+
+  const variantStyles = {
+    default: 'bg-transparent',
+    icon: "size-8 border border-border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+    image:
+      'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
+  };
+
+  return cn(baseStyles, variantStyles[variant]);
+}
+
+interface ItemGroupProps extends React.ComponentProps<'div'> {}
+
+function ItemGroup({ className, ...props }: ItemGroupProps) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn('group/item-group flex flex-col', className)}
+      {...props}
+    />
+  );
+}
+
+interface ItemSeparatorProps extends React.ComponentProps<'div'> {}
+
+function ItemSeparator({ className, ...props }: ItemSeparatorProps) {
+  return (
+    <div
+      data-slot="item-separator"
+      className={cn('my-0 border-t border-border', className)}
+      {...props}
+    />
+  );
+}
+
+interface ItemProps extends React.ComponentProps<'div'> {
+  variant?: 'default' | 'outline' | 'muted';
+  size?: 'default' | 'sm';
+  asChild?: boolean;
+}
+
+function Item({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: ItemProps) {
+  const Comp = asChild ? 'div' : 'div';
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(getItemVariants(variant, size), className)}
+      {...props}
+    />
+  );
+}
+
+interface ItemMediaProps extends React.ComponentProps<'div'> {
+  variant?: 'default' | 'icon' | 'image';
+}
+
+function ItemMedia({
+  className,
+  variant = 'default',
+  ...props
+}: ItemMediaProps) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(getItemMediaVariants(variant), className)}
+      {...props}
+    />
+  );
+}
+
+interface ItemContentProps extends React.ComponentProps<'div'> {}
+
+function ItemContent({ className, ...props }: ItemContentProps) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+interface ItemTitleProps extends React.ComponentProps<'div'> {}
+
+function ItemTitle({ className, ...props }: ItemTitleProps) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        'flex w-fit items-center gap-2 text-sm leading-snug font-medium',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+interface ItemDescriptionProps extends React.ComponentProps<'p'> {}
+
+function ItemDescription({ className, ...props }: ItemDescriptionProps) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+interface ItemActionsProps extends React.ComponentProps<'div'> {}
+
+function ItemActions({ className, ...props }: ItemActionsProps) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn('flex items-center gap-2', className)}
+      {...props}
+    />
+  );
+}
+
+interface ItemHeaderProps extends React.ComponentProps<'div'> {}
+
+function ItemHeader({ className, ...props }: ItemHeaderProps) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        'flex basis-full items-center justify-between gap-2',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+interface ItemFooterProps extends React.ComponentProps<'div'> {}
+
+function ItemFooter({ className, ...props }: ItemFooterProps) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        'flex basis-full items-center justify-between gap-2',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+};

components/ui/label.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

components/ui/pagination.tsx

@@ -0,0 +1,127 @@
+import * as React from "react"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants, type Button } from "@/components/ui/button"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex flex-row items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size,
+        }),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}

components/ui/progress.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+// Utility function to combine classNames
+function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+interface ProgressProps extends React.ComponentProps<'div'> {
+  value?: number;
+  max?: number;
+}
+
+function Progress({
+  className,
+  value = 0,
+  max = 100,
+  ...props
+}: ProgressProps) {
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+
+  return (
+    <div
+      data-slot="progress"
+      className={cn(
+        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        className
+      )}
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={max}
+      aria-valuenow={value}
+      {...props}
+    >
+      <div
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - percentage}%)` }}
+      />
+    </div>
+  );
+}
+
+export { Progress };
+export type { ProgressProps };

components/ui/scroll-area.tsx

@@ -0,0 +1,241 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: "vertical" | "horizontal" | "both"
+}
+
+function ScrollArea({
+  className,
+  children,
+  orientation = "vertical",
+  ...props
+}: ScrollAreaProps) {
+  const viewportRef = React.useRef<HTMLDivElement>(null)
+  const [showVerticalScrollbar, setShowVerticalScrollbar] = React.useState(false)
+  const [showHorizontalScrollbar, setShowHorizontalScrollbar] = React.useState(false)
+  const [scrollTop, setScrollTop] = React.useState(0)
+  const [scrollLeft, setScrollLeft] = React.useState(0)
+  const [viewportHeight, setViewportHeight] = React.useState(0)
+  const [viewportWidth, setViewportWidth] = React.useState(0)
+  const [contentHeight, setContentHeight] = React.useState(0)
+  const [contentWidth, setContentWidth] = React.useState(0)
+
+  React.useEffect(() => {
+    const viewport = viewportRef.current
+    if (!viewport) return
+
+    const updateScrollInfo = () => {
+      const hasVerticalScroll = viewport.scrollHeight > viewport.clientHeight
+      const hasHorizontalScroll = viewport.scrollWidth > viewport.clientWidth
+
+      setShowVerticalScrollbar(
+        hasVerticalScroll && (orientation === "vertical" || orientation === "both")
+      )
+      setShowHorizontalScrollbar(
+        hasHorizontalScroll && (orientation === "horizontal" || orientation === "both")
+      )
+      setViewportHeight(viewport.clientHeight)
+      setViewportWidth(viewport.clientWidth)
+      setContentHeight(viewport.scrollHeight)
+      setContentWidth(viewport.scrollWidth)
+    }
+
+    const handleScroll = () => {
+      setScrollTop(viewport.scrollTop)
+      setScrollLeft(viewport.scrollLeft)
+    }
+
+    updateScrollInfo()
+    viewport.addEventListener("scroll", handleScroll)
+
+    const resizeObserver = new ResizeObserver(updateScrollInfo)
+    resizeObserver.observe(viewport)
+
+    // Also observe children for content changes
+    const mutationObserver = new MutationObserver(updateScrollInfo)
+    mutationObserver.observe(viewport, { childList: true, subtree: true })
+
+    return () => {
+      viewport.removeEventListener("scroll", handleScroll)
+      resizeObserver.disconnect()
+      mutationObserver.disconnect()
+    }
+  }, [orientation])
+
+  return (
+    <div
+      data-slot="scroll-area"
+      className={cn("relative overflow-hidden", className)}
+      {...props}
+    >
+      <div
+        ref={viewportRef}
+        data-slot="scroll-area-viewport"
+        className={cn(
+          "size-full rounded-[inherit] outline-none",
+          "focus-visible:ring-ring/50 transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
+          orientation === "vertical" && "overflow-y-auto overflow-x-hidden",
+          orientation === "horizontal" && "overflow-x-auto overflow-y-hidden",
+          orientation === "both" && "overflow-auto"
+        )}
+        tabIndex={0}
+      >
+        {children}
+      </div>
+      {showVerticalScrollbar && (
+        <ScrollBar
+          orientation="vertical"
+          viewportRef={viewportRef}
+          scrollPosition={scrollTop}
+          viewportSize={viewportHeight}
+          contentSize={contentHeight}
+        />
+      )}
+      {showHorizontalScrollbar && (
+        <ScrollBar
+          orientation="horizontal"
+          viewportRef={viewportRef}
+          scrollPosition={scrollLeft}
+          viewportSize={viewportWidth}
+          contentSize={contentWidth}
+        />
+      )}
+    </div>
+  )
+}
+
+interface ScrollBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: "vertical" | "horizontal"
+  viewportRef?: React.RefObject<HTMLDivElement | null>
+  scrollPosition?: number
+  viewportSize?: number
+  contentSize?: number
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  viewportRef,
+  scrollPosition = 0,
+  viewportSize = 0,
+  contentSize = 0,
+  ...props
+}: ScrollBarProps) {
+  const [isDragging, setIsDragging] = React.useState(false)
+  const [isHovered, setIsHovered] = React.useState(false)
+  const scrollbarRef = React.useRef<HTMLDivElement>(null)
+  const startPosRef = React.useRef(0)
+  const startScrollRef = React.useRef(0)
+
+  const thumbSize =
+    contentSize > 0 ? Math.max((viewportSize / contentSize) * 100, 10) : 0
+  const thumbPosition =
+    contentSize > viewportSize
+      ? (scrollPosition / (contentSize - viewportSize)) * (100 - thumbSize)
+      : 0
+
+  const handleThumbMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault()
+    setIsDragging(true)
+    startPosRef.current = orientation === "vertical" ? e.clientY : e.clientX
+    startScrollRef.current = scrollPosition
+  }
+
+  React.useEffect(() => {
+    if (!isDragging) return
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const viewport = viewportRef?.current
+      const scrollbar = scrollbarRef.current
+      if (!viewport || !scrollbar) return
+
+      const currentPos = orientation === "vertical" ? e.clientY : e.clientX
+      const delta = currentPos - startPosRef.current
+      const scrollbarSize =
+        orientation === "vertical"
+          ? scrollbar.clientHeight
+          : scrollbar.clientWidth
+      const scrollRatio = (contentSize - viewportSize) / (scrollbarSize * (1 - thumbSize / 100))
+      const newScrollPos = startScrollRef.current + delta * scrollRatio
+
+      if (orientation === "vertical") {
+        viewport.scrollTop = Math.max(0, Math.min(newScrollPos, contentSize - viewportSize))
+      } else {
+        viewport.scrollLeft = Math.max(0, Math.min(newScrollPos, contentSize - viewportSize))
+      }
+    }
+
+    const handleMouseUp = () => {
+      setIsDragging(false)
+    }
+
+    document.addEventListener("mousemove", handleMouseMove)
+    document.addEventListener("mouseup", handleMouseUp)
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove)
+      document.removeEventListener("mouseup", handleMouseUp)
+    }
+  }, [isDragging, orientation, viewportRef, contentSize, viewportSize, thumbSize])
+
+  const handleTrackClick = (e: React.MouseEvent) => {
+    const viewport = viewportRef?.current
+    const scrollbar = scrollbarRef.current
+    if (!viewport || !scrollbar || e.target !== scrollbar) return
+
+    const rect = scrollbar.getBoundingClientRect()
+    const clickPos =
+      orientation === "vertical" ? e.clientY - rect.top : e.clientX - rect.left
+    const scrollbarSize = orientation === "vertical" ? rect.height : rect.width
+    const clickRatio = clickPos / scrollbarSize
+    const targetScroll = clickRatio * contentSize - viewportSize / 2
+
+    if (orientation === "vertical") {
+      viewport.scrollTop = Math.max(0, Math.min(targetScroll, contentSize - viewportSize))
+    } else {
+      viewport.scrollLeft = Math.max(0, Math.min(targetScroll, contentSize - viewportSize))
+    }
+  }
+
+  return (
+    <div
+      ref={scrollbarRef}
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      className={cn(
+        "absolute flex touch-none p-px transition-opacity select-none",
+        orientation === "vertical" && "right-0 top-0 h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" && "bottom-0 left-0 h-2.5 w-full flex-col border-t border-t-transparent",
+        !isHovered && !isDragging && "opacity-0",
+        (isHovered || isDragging) && "opacity-100",
+        className
+      )}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={handleTrackClick}
+      {...props}
+    >
+      <div
+        data-slot="scroll-area-thumb"
+        className={cn(
+          "bg-border relative rounded-full transition-colors",
+          orientation === "vertical" && "w-full",
+          orientation === "horizontal" && "h-full",
+          isDragging && "bg-foreground/50"
+        )}
+        style={{
+          [orientation === "vertical" ? "height" : "width"]: `${thumbSize}%`,
+          [orientation === "vertical" ? "top" : "left"]: `${thumbPosition}%`,
+          position: "absolute",
+        }}
+        onMouseDown={handleThumbMouseDown}
+      />
+    </div>
+  )
+}
+
+export { ScrollArea, ScrollBar }

components/ui/select.tsx

@@ -0,0 +1,287 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+} from 'react';
+import { cn } from '@/lib/utils';
+
+interface SelectContextType {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  value: string;
+  setValue: (value: string) => void;
+}
+
+const SelectContext = createContext<SelectContextType | undefined>(undefined);
+
+function useSelect() {
+  const context = useContext(SelectContext);
+  if (!context) {
+    throw new Error('Select components must be used within a Select');
+  }
+  return context;
+}
+
+interface SelectProps {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  children: React.ReactNode;
+}
+
+function Select({
+  value: controlledValue,
+  onValueChange,
+  children,
+}: SelectProps) {
+  const [internalValue, setInternalValue] = useState('');
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+
+  const handleValueChange = useCallback(
+    (newValue: string) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onValueChange?.(newValue);
+      setOpen(false);
+    },
+    [isControlled, onValueChange]
+  );
+
+  // Handle clicking outside to close the menu
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setOpen(false);
+      }
+    }
+
+    if (open) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [open]);
+
+  return (
+    <SelectContext.Provider
+      value={{ open, setOpen, value, setValue: handleValueChange }}
+    >
+      <div ref={containerRef} data-slot="select" className="relative">
+        {children}
+      </div>
+    </SelectContext.Provider>
+  );
+}
+
+interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  placeholder?: string;
+}
+
+function SelectTrigger({
+  className,
+  children,
+  placeholder = 'Select...',
+  ...props
+}: SelectTriggerProps) {
+  const { open, setOpen, value } = useSelect();
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <button
+      ref={triggerRef}
+      data-slot="select-trigger"
+      onClick={() => setOpen(!open)}
+      className={cn(
+        'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*="text-"])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-4',
+        className
+      )}
+      {...props}
+    >
+      {children || <span className="text-muted-foreground">{placeholder}</span>}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={cn(
+          'size-4 opacity-50 transition-transform',
+          open && 'rotate-180'
+        )}
+      >
+        <polyline points="6 9 12 15 18 9"></polyline>
+      </svg>
+    </button>
+  );
+}
+
+interface SelectValueProps {
+  children?: React.ReactNode;
+  placeholder?: string;
+}
+
+function SelectValue({
+  children,
+  placeholder = 'Select...',
+}: SelectValueProps) {
+  const { value } = useSelect();
+
+  return (
+    <span data-slot="select-value">{children || value || placeholder}</span>
+  );
+}
+
+interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+function SelectContent({ className, children, ...props }: SelectContentProps) {
+  const { open } = useSelect();
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  if (!open) return null;
+
+  return (
+    <div
+      ref={contentRef}
+      data-slot="select-content"
+      className={cn(
+        'bg-popover text-popover-foreground absolute z-50 min-w-[8rem] rounded-md border border-border shadow-md overflow-hidden top-full mt-2 left-0',
+        className
+      )}
+      {...props}
+    >
+      <div className="p-1 overflow-y-auto max-h-60">{children}</div>
+    </div>
+  );
+}
+
+interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+  children: React.ReactNode;
+  disabled?: boolean;
+}
+
+function SelectItem({
+  value,
+  children,
+  disabled = false,
+  className,
+  ...props
+}: SelectItemProps) {
+  const { value: selectedValue, setValue } = useSelect();
+  const isSelected = selectedValue === value;
+
+  return (
+    <div
+      data-slot="select-item"
+      onClick={() => !disabled && setValue(value)}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground [&_svg:not([class*="text-"])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none transition-colors',
+        !disabled &&
+          'hover:bg-accent hover:text-accent-foreground cursor-pointer',
+        disabled && 'pointer-events-none opacity-50',
+        isSelected && 'bg-accent text-accent-foreground',
+        className
+      )}
+      {...props}
+    >
+      {isSelected && (
+        <span className="absolute right-2 flex size-3.5 items-center justify-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="size-4"
+          >
+            <polyline points="20 6 9 17 4 12"></polyline>
+          </svg>
+        </span>
+      )}
+      {children}
+    </div>
+  );
+}
+
+interface SelectGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+function SelectGroup({ className, children, ...props }: SelectGroupProps) {
+  return (
+    <div
+      data-slot="select-group"
+      className={cn('overflow-hidden', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface SelectLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+function SelectLabel({ className, children, ...props }: SelectLabelProps) {
+  return (
+    <div
+      data-slot="select-label"
+      className={cn(
+        'text-muted-foreground px-2 py-1.5 text-xs font-semibold',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface SelectSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+function SelectSeparator({ className, ...props }: SelectSeparatorProps) {
+  return (
+    <div
+      data-slot="select-separator"
+      className={cn(
+        'bg-border pointer-events-none -mx-1 my-1 h-px',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  SelectGroup,
+  SelectLabel,
+  SelectSeparator,
+};

components/ui/separator.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: "horizontal" | "vertical"
+  decorative?: boolean
+}
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: SeparatorProps) {
+  return (
+    <div
+      data-slot="separator"
+      role={decorative ? "none" : "separator"}
+      aria-orientation={decorative ? undefined : orientation}
+      data-orientation={orientation}
+      className={cn(
+        "bg-border shrink-0",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

components/ui/sheet.tsx

@@ -0,0 +1,306 @@
+import React, { useState, useCallback, useContext, createContext } from 'react';
+import { createPortal } from 'react-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { cn } from '@/lib/utils';
+
+interface SheetContextType {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  side: 'top' | 'right' | 'bottom' | 'left';
+}
+
+const SheetContext = createContext<SheetContextType | undefined>(undefined);
+
+function useSheet() {
+  const context = useContext(SheetContext);
+  if (!context) {
+    throw new Error('Sheet components must be used within a Sheet');
+  }
+  return context;
+}
+
+interface SheetProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: React.ReactNode;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+}
+
+function Sheet({
+  open: controlledOpen,
+  onOpenChange,
+  children,
+  side = 'right',
+}: SheetProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+
+  const setOpen = useCallback(
+    (newOpen: boolean) => {
+      if (!isControlled) {
+        setInternalOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+    },
+    [isControlled, onOpenChange]
+  );
+
+  return (
+    <SheetContext.Provider value={{ open, setOpen, side }}>
+      {children}
+    </SheetContext.Provider>
+  );
+}
+
+function SheetTrigger(
+  props: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }
+) {
+  const { setOpen } = useSheet();
+  const { children, asChild, ...rest } = props;
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement, {
+      ...rest,
+      onClick: (e: React.MouseEvent) => {
+        setOpen(true);
+        children.props.onClick?.(e);
+      },
+    });
+  }
+
+  return (
+    <button
+      data-slot="sheet-trigger"
+      {...rest}
+      onClick={(e) => {
+        setOpen(true);
+        props.onClick?.(e);
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+function SheetPortal({ children }: { children: React.ReactNode }) {
+  return createPortal(children, document.body);
+}
+
+function SheetOverlay({
+  className,
+  onClick,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  const { setOpen } = useSheet();
+
+  return (
+    <motion.div
+      data-slot="sheet-overlay"
+      className={cn('fixed inset-0 z-50 bg-black/50', className)}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.3 }}
+      onClick={(e) => {
+        setOpen(false);
+        onClick?.(e);
+      }}
+      {...props}
+    />
+  );
+}
+
+interface SheetContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  showCloseButton?: boolean;
+}
+
+function SheetContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: SheetContentProps) {
+  const { setOpen, side } = useSheet();
+
+  const sideClasses = {
+    right: 'inset-y-0 right-0 h-full w-3/4 sm:max-w-sm border-l',
+    left: 'inset-y-0 left-0 h-full w-3/4 sm:max-w-sm border-r',
+    top: 'inset-x-0 top-0 h-auto border-b',
+    bottom: 'inset-x-0 bottom-0 h-auto border-t',
+  };
+
+  const slideVariants = {
+    right: {
+      initial: { x: 400, opacity: 0 },
+      animate: { x: 0, opacity: 1 },
+      exit: { x: 400, opacity: 0 },
+    },
+    left: {
+      initial: { x: -400, opacity: 0 },
+      animate: { x: 0, opacity: 1 },
+      exit: { x: -400, opacity: 0 },
+    },
+    top: {
+      initial: { y: -400, opacity: 0 },
+      animate: { y: 0, opacity: 1 },
+      exit: { y: -400, opacity: 0 },
+    },
+    bottom: {
+      initial: { y: 400, opacity: 0 },
+      animate: { y: 0, opacity: 1 },
+      exit: { y: 400, opacity: 0 },
+    },
+  };
+
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <motion.div
+        data-slot="sheet-content"
+        className={cn(
+          'bg-background fixed z-50 flex flex-col gap-0 shadow-lg',
+          sideClasses[side]
+        )}
+        variants={slideVariants[side]}
+        initial="initial"
+        animate="animate"
+        exit="exit"
+        transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <button
+            data-slot="sheet-close"
+            onClick={() => setOpen(false)}
+            className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+            aria-label="Close"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="size-4"
+            >
+              <path d="M18 6l-12 12M6 6l12 12" />
+            </svg>
+          </button>
+        )}
+      </motion.div>
+    </SheetPortal>
+  );
+}
+
+function SheetClose(
+  props: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }
+) {
+  const { setOpen } = useSheet();
+  const { children, asChild, ...rest } = props;
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement, {
+      ...rest,
+      onClick: (e: React.MouseEvent) => {
+        setOpen(false);
+        children.props.onClick?.(e);
+      },
+    });
+  }
+
+  return (
+    <button
+      data-slot="sheet-close"
+      {...rest}
+      onClick={(e) => {
+        setOpen(false);
+        props.onClick?.(e);
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn(
+        'flex flex-col gap-1.5 p-6 border-b border-border',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 p-6 border-t border-border sm:flex-row sm:justify-end',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps<'h2'>) {
+  return (
+    <h2
+      data-slot="sheet-title"
+      className={cn('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="sheet-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+interface SheetBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+function SheetBody({ className, children, ...props }: SheetBodyProps) {
+  return (
+    <div
+      data-slot="sheet-body"
+      className={cn('flex-1 overflow-y-auto px-6 py-4', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+  SheetBody,
+  SheetPortal,
+  SheetOverlay,
+  AnimatePresence,
+};

components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

components/ui/sonner.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { toast } from 'sonner';
+
+import Button from '@/components/ui/button';
+
+export function SonnerDemo() {
+  return (
+    <Button
+      variant="outline"
+      onClick={() =>
+        toast('Event has been created', {
+          description: 'Sunday, December 03, 2023 at 9:00 AM',
+          action: {
+            label: 'Undo',
+            onClick: () => console.log('Undo'),
+          },
+        })
+      }
+    >
+      Show Toast
+    </Button>
+  );
+}

components/ui/spinner.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface SpinnerProps extends React.ComponentProps<'svg'> {
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+const sizeClasses = {
+  sm: 'size-3',
+  md: 'size-4',
+  lg: 'size-6',
+  xl: 'size-8',
+};
+
+function Spinner({ className, size = 'md', ...props }: SpinnerProps) {
+  return (
+    <svg
+      role="status"
+      aria-label="Loading"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn('animate-spin', sizeClasses[size], className)}
+      {...props}
+    >
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  );
+}
+
+export { Spinner };
+export type { SpinnerProps };

components/ui/switch.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface SwitchProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'type'
+> {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
+  ({ className, checked, onCheckedChange, disabled, ...props }, ref) => {
+    const [isChecked, setIsChecked] = React.useState(checked ?? false);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newChecked = e.target.checked;
+      setIsChecked(newChecked);
+      onCheckedChange?.(newChecked);
+      props.onChange?.(e);
+    };
+
+    React.useEffect(() => {
+      if (checked !== undefined) {
+        setIsChecked(checked);
+      }
+    }, [checked]);
+
+    return (
+      <div className="relative inline-flex">
+        <input
+          ref={ref}
+          type="checkbox"
+          checked={isChecked}
+          onChange={handleChange}
+          disabled={disabled}
+          className="sr-only"
+          {...props}
+        />
+        <div
+          data-slot="switch"
+          className={cn(
+            'inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px]',
+            isChecked
+              ? 'bg-primary focus-visible:ring-ring/50 focus-visible:border-ring'
+              : 'bg-input dark:bg-input/80 focus-visible:ring-ring/50 focus-visible:border-ring',
+            disabled && 'cursor-not-allowed opacity-50',
+            className
+          )}
+          onClick={() => {
+            if (!disabled) {
+              setIsChecked(!isChecked);
+              onCheckedChange?.(!isChecked);
+            }
+          }}
+        >
+          <div
+            data-slot="switch-thumb"
+            className={cn(
+              'bg-background dark:bg-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform',
+              isChecked
+                ? 'translate-x-[calc(100%-2px)] dark:bg-primary-foreground'
+                : 'translate-x-0'
+            )}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+Switch.displayName = 'Switch';
+
+export { Switch };

components/ui/table.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto rounded-md border border-border"
+    >
+      <table
+        data-slot="table"
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn('[&_tr]:border-b border-border', className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        'bg-muted/50 border-t border-border font-medium [&>tr]:last:border-b-0',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b border-border transition-colors',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        'text-foreground bg-muted/30 h-10 px-4 py-2 text-left align-middle font-semibold whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        'p-4 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

components/ui/tabs.tsx

@@ -0,0 +1,143 @@
+import React, { createContext, useContext, useState } from 'react';
+import { cn } from '@/lib/utils';
+
+interface TabsContextType {
+  activeTab: string;
+  setActiveTab: (value: string) => void;
+}
+
+const TabsContext = createContext<TabsContextType | undefined>(undefined);
+
+function useTabs() {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error('Tabs components must be used within a Tabs component');
+  }
+  return context;
+}
+
+interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+}
+
+function Tabs({
+  className,
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  children,
+  ...props
+}: TabsProps) {
+  const [internalValue, setInternalValue] = useState(defaultValue || '');
+  const isControlled = controlledValue !== undefined;
+  const activeTab = isControlled ? controlledValue : internalValue;
+
+  const handleValueChange = (newValue: string) => {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onValueChange?.(newValue);
+  };
+
+  return (
+    <TabsContext.Provider
+      value={{ activeTab, setActiveTab: handleValueChange }}
+    >
+      <div
+        data-slot="tabs"
+        className={cn('flex flex-col gap-2', className)}
+        {...props}
+      >
+        {children}
+      </div>
+    </TabsContext.Provider>
+  );
+}
+
+interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+function TabsList({ className, children, ...props }: TabsListProps) {
+  return (
+    <div
+      data-slot="tabs-list"
+      className={cn(
+        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+        className
+      )}
+      role="tablist"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string;
+  children: React.ReactNode;
+}
+
+function TabsTrigger({
+  className,
+  value,
+  children,
+  ...props
+}: TabsTriggerProps) {
+  const { activeTab, setActiveTab } = useTabs();
+  const isActive = activeTab === value;
+
+  return (
+    <button
+      data-slot="tabs-trigger"
+      role="tab"
+      aria-selected={isActive}
+      aria-controls={`tabs-content-${value}`}
+      className={cn(
+        'text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-4',
+        isActive &&
+          'bg-background dark:bg-input/30 dark:border-input shadow-sm',
+        className
+      )}
+      onClick={() => setActiveTab(value)}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+  children: React.ReactNode;
+}
+
+function TabsContent({
+  className,
+  value,
+  children,
+  ...props
+}: TabsContentProps) {
+  const { activeTab } = useTabs();
+
+  if (activeTab !== value) {
+    return null;
+  }
+
+  return (
+    <div
+      data-slot="tabs-content"
+      role="tabpanel"
+      id={`tabs-content-${value}`}
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

components/ui/tooltip.tsx

@@ -0,0 +1,280 @@
+"use client"
+
+import * as React from "react"
+import { createPortal } from "react-dom"
+
+import { cn } from "@/lib/utils"
+
+interface TooltipContextValue {
+  open: boolean
+  setOpen: (open: boolean) => void
+  triggerRef: React.RefObject<HTMLElement | null>
+  delayDuration: number
+}
+
+const TooltipContext = React.createContext<TooltipContextValue | null>(null)
+
+function useTooltip() {
+  const context = React.useContext(TooltipContext)
+  if (!context) {
+    throw new Error("useTooltip must be used within a Tooltip")
+  }
+  return context
+}
+
+interface TooltipProviderProps {
+  children: React.ReactNode
+  delayDuration?: number
+}
+
+const TooltipProviderContext = React.createContext<{ delayDuration: number }>({
+  delayDuration: 0,
+})
+
+function TooltipProvider({
+  children,
+  delayDuration = 0,
+}: TooltipProviderProps) {
+  return (
+    <TooltipProviderContext.Provider value={{ delayDuration }}>
+      {children}
+    </TooltipProviderContext.Provider>
+  )
+}
+
+interface TooltipProps {
+  children: React.ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  delayDuration?: number
+}
+
+function Tooltip({
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  delayDuration: propDelayDuration,
+}: TooltipProps) {
+  const providerContext = React.useContext(TooltipProviderContext)
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+  const triggerRef = React.useRef<HTMLElement>(null)
+
+  const isControlled = controlledOpen !== undefined
+  const open = isControlled ? controlledOpen : uncontrolledOpen
+  const delayDuration = propDelayDuration ?? providerContext.delayDuration
+
+  const setOpen = React.useCallback(
+    (value: boolean) => {
+      if (!isControlled) {
+        setUncontrolledOpen(value)
+      }
+      onOpenChange?.(value)
+    },
+    [isControlled, onOpenChange]
+  )
+
+  return (
+    <TooltipContext.Provider value={{ open, setOpen, triggerRef, delayDuration }}>
+      {children}
+    </TooltipContext.Provider>
+  )
+}
+
+interface TooltipTriggerProps extends React.HTMLAttributes<HTMLSpanElement> {
+  asChild?: boolean
+}
+
+function TooltipTrigger({
+  children,
+  asChild,
+  ...props
+}: TooltipTriggerProps) {
+  const { setOpen, triggerRef, delayDuration } = useTooltip()
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+
+  const handleMouseEnter = () => {
+    if (delayDuration > 0) {
+      timeoutRef.current = setTimeout(() => setOpen(true), delayDuration)
+    } else {
+      setOpen(true)
+    }
+  }
+
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+      timeoutRef.current = null
+    }
+    setOpen(false)
+  }
+
+  const handleFocus = () => {
+    setOpen(true)
+  }
+
+  const handleBlur = () => {
+    setOpen(false)
+  }
+
+  React.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [])
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<any>, {
+      ref: triggerRef,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      "data-slot": "tooltip-trigger",
+    })
+  }
+
+  return (
+    <span
+      ref={triggerRef as React.RefObject<HTMLSpanElement>}
+      data-slot="tooltip-trigger"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}
+
+interface TooltipContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  side?: "top" | "right" | "bottom" | "left"
+  sideOffset?: number
+  align?: "start" | "center" | "end"
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  children,
+  ...props
+}: TooltipContentProps) {
+  const { open, triggerRef } = useTooltip()
+  const [position, setPosition] = React.useState({ top: 0, left: 0 })
+  const [mounted, setMounted] = React.useState(false)
+  const contentRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  React.useLayoutEffect(() => {
+    if (!open || !triggerRef.current || !contentRef.current) return
+
+    const trigger = triggerRef.current.getBoundingClientRect()
+    const content = contentRef.current.getBoundingClientRect()
+
+    let top = 0
+    let left = 0
+
+    // Calculate position based on side
+    switch (side) {
+      case "top":
+        top = trigger.top - content.height - sideOffset
+        break
+      case "bottom":
+        top = trigger.bottom + sideOffset
+        break
+      case "left":
+        left = trigger.left - content.width - sideOffset
+        top = trigger.top + (trigger.height - content.height) / 2
+        break
+      case "right":
+        left = trigger.right + sideOffset
+        top = trigger.top + (trigger.height - content.height) / 2
+        break
+    }
+
+    // Calculate alignment for top/bottom
+    if (side === "top" || side === "bottom") {
+      switch (align) {
+        case "start":
+          left = trigger.left
+          break
+        case "center":
+          left = trigger.left + (trigger.width - content.width) / 2
+          break
+        case "end":
+          left = trigger.right - content.width
+          break
+      }
+    }
+
+    // Calculate alignment for left/right
+    if (side === "left" || side === "right") {
+      switch (align) {
+        case "start":
+          top = trigger.top
+          break
+        case "center":
+          top = trigger.top + (trigger.height - content.height) / 2
+          break
+        case "end":
+          top = trigger.bottom - content.height
+          break
+      }
+    }
+
+    setPosition({ top, left })
+  }, [open, side, align, sideOffset, triggerRef])
+
+  if (!open || !mounted) return null
+
+  const slideClasses = {
+    top: "animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-2",
+    bottom: "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2",
+    left: "animate-in fade-in-0 zoom-in-95 slide-in-from-right-2",
+    right: "animate-in fade-in-0 zoom-in-95 slide-in-from-left-2",
+  }
+
+  return createPortal(
+    <div
+      ref={contentRef}
+      data-slot="tooltip-content"
+      data-state={open ? "open" : "closed"}
+      data-side={side}
+      role="tooltip"
+      className={cn(
+        "fixed z-50 w-max rounded-md bg-foreground px-3 py-1.5 text-xs text-background text-balance",
+        slideClasses[side],
+        className
+      )}
+      style={{
+        top: position.top,
+        left: position.left,
+      }}
+      {...props}
+    >
+      {children}
+      <div
+        className={cn(
+          "absolute size-2.5 rotate-45 rounded-[2px] bg-foreground",
+          side === "top" && "top-full left-1/2 -translate-x-1/2 -translate-y-1/2",
+          side === "bottom" && "bottom-full left-1/2 -translate-x-1/2 translate-y-1/2",
+          side === "left" && "left-full top-1/2 -translate-x-1/2 -translate-y-1/2",
+          side === "right" && "right-full top-1/2 translate-x-1/2 -translate-y-1/2"
+        )}
+      />
+    </div>,
+    document.body
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

contexts/shopify-context.tsx

@@ -0,0 +1,267 @@
+'use client';
+
+import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
+import {
+  createCart,
+  getCart,
+  addCartLines,
+  removeCartLines,
+  updateCartLines,
+} from '@/hooks/use-shopify-cart';
+
+const CART_ID_KEY = 'cartId';
+
+interface CartLine {
+  id: string;
+  quantity: number;
+  merchandise: {
+    id: string;
+    title: string;
+    price: {
+      amount: string;
+      currencyCode: string;
+    };
+    selectedOptions?: Array<{
+      name: string;
+      value: string;
+    }>;
+    product: {
+      title: string;
+      handle?: string;
+      images: {
+        edges: Array<{
+          node: {
+            url: string;
+            altText: string | null;
+          };
+        }>;
+      };
+    };
+  };
+}
+
+interface ShopifyCart {
+  id: string;
+  lines: {
+    edges: Array<{
+      node: CartLine;
+    }>;
+  };
+  cost: {
+    totalAmount: {
+      amount: string;
+      currencyCode: string;
+    };
+    subtotalAmount?: {
+      amount: string;
+      currencyCode: string;
+    };
+    totalTaxAmount?: {
+      amount: string;
+      currencyCode: string;
+    };
+  };
+  checkoutUrl: string;
+}
+
+interface CartContextType {
+  isOpen: boolean;
+  openCart: () => void;
+  closeCart: () => void;
+  toggleCart: () => void;
+  cartId: string | null;
+  cart: ShopifyCart | null;
+  items: CartLine[];
+  itemCount: number;
+  totalAmount: number;
+  checkoutUrl: string | null;
+  loading: boolean;
+  error: string | null;
+  addItem: (variantId: string, quantity?: number) => Promise<ShopifyCart>;
+  removeItem: (lineId: string) => Promise<ShopifyCart>;
+  updateItemQuantity: (lineId: string, quantity: number) => Promise<ShopifyCart>;
+  refreshCart: () => Promise<void>;
+}
+
+export const CartContext = createContext<CartContextType | null>(null);
+
+export const ShopifyProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [cartId, setCartId] = useState<string | null>(null);
+  const [cart, setCart] = useState<ShopifyCart | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const storeCartId = useCallback((id: string) => {
+    localStorage.setItem(CART_ID_KEY, id);
+    setCartId(id);
+  }, []);
+
+  const refreshCart = useCallback(async () => {
+    const storedCartId = localStorage.getItem(CART_ID_KEY);
+    if (!storedCartId) {
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+      const fetchedCart = await getCart(storedCartId);
+      if (fetchedCart) {
+        setCart(fetchedCart);
+        setCartId(storedCartId);
+      } else {
+        localStorage.removeItem(CART_ID_KEY);
+        setCartId(null);
+        setCart(null);
+      }
+    } catch (err) {
+      console.error('Error fetching cart:', err);
+      localStorage.removeItem(CART_ID_KEY);
+      setCartId(null);
+      setCart(null);
+      setError('Failed to fetch cart');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    refreshCart();
+  }, [refreshCart]);
+
+  const getOrCreateCart = useCallback(async (): Promise<string> => {
+    if (cartId) return cartId;
+
+    const storedCartId = localStorage.getItem(CART_ID_KEY);
+    if (storedCartId) {
+      setCartId(storedCartId);
+      return storedCartId;
+    }
+
+    try {
+      const newCart = await createCart();
+      setCart(newCart);
+      storeCartId(newCart.id);
+      return newCart.id;
+    } catch (err) {
+      console.error('Failed to create cart:', err);
+      throw err;
+    }
+  }, [cartId, storeCartId]);
+
+  const openCart = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+
+  const closeCart = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  const toggleCart = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+
+  const addItem = useCallback(async (variantId: string, quantity: number = 1): Promise<ShopifyCart> => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const currentCartId = await getOrCreateCart();
+      const updatedCart = await addCartLines(currentCartId, [
+        { merchandiseId: variantId, quantity },
+      ]);
+
+      setCart(updatedCart);
+      return updatedCart;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to add item to cart';
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, [getOrCreateCart]);
+
+  const removeItem = useCallback(async (lineId: string): Promise<ShopifyCart> => {
+    if (!cartId) {
+      throw new Error('No cart exists');
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+
+      const updatedCart = await removeCartLines(cartId, [lineId]);
+      setCart(updatedCart);
+      return updatedCart;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to remove item from cart';
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, [cartId]);
+
+  const updateItemQuantity = useCallback(async (lineId: string, quantity: number): Promise<ShopifyCart> => {
+    if (!cartId) {
+      throw new Error('No cart exists');
+    }
+
+    if (quantity <= 0) {
+      return removeItem(lineId);
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+
+      const updatedCart = await updateCartLines(cartId, [
+        { id: lineId, quantity },
+      ]);
+      setCart(updatedCart);
+      return updatedCart;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to update item quantity';
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setLoading(false);
+    }
+  }, [cartId, removeItem]);
+
+  const items = cart?.lines?.edges?.map((edge) => edge.node) ?? [];
+  const itemCount = items.reduce((sum, item) => sum + item.quantity, 0);
+  const totalAmount = parseFloat(cart?.cost?.totalAmount?.amount ?? '0');
+  const checkoutUrl = cart?.checkoutUrl ?? null;
+
+  return (
+    <CartContext.Provider value={{
+      isOpen,
+      openCart,
+      closeCart,
+      toggleCart,
+      cartId,
+      cart,
+      items,
+      itemCount,
+      totalAmount,
+      checkoutUrl,
+      loading,
+      error,
+      addItem,
+      removeItem,
+      updateItemQuantity,
+      refreshCart,
+    }}>
+      {children}
+    </CartContext.Provider>
+  );
+};
+
+// Alias for backwards compatibility
+export const CartProvider = ShopifyProvider;
+
+export default ShopifyProvider;

graphql/cart.js

@@ -0,0 +1,137 @@
+// Cart Fragment for consistent cart data
+const CartFragment = `
+  fragment CartFragment on Cart {
+    id
+    checkoutUrl
+    totalQuantity
+    cost {
+      subtotalAmount {
+        amount
+        currencyCode
+      }
+      totalAmount {
+        amount
+        currencyCode
+      }
+      totalTaxAmount {
+        amount
+        currencyCode
+      }
+    }
+    lines(first: 100) {
+      edges {
+        node {
+          id
+          quantity
+          cost {
+            totalAmount {
+              amount
+              currencyCode
+            }
+          }
+          merchandise {
+            ... on ProductVariant {
+              id
+              title
+              selectedOptions {
+                name
+                value
+              }
+              price {
+                amount
+                currencyCode
+              }
+              image {
+                id
+                url
+                altText
+                width
+                height
+              }
+              product {
+                id
+                title
+                handle
+                vendor
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+// Create a new cart
+export const CREATE_CART_MUTATION = `
+  ${CartFragment}
+  mutation CreateCart($lines: [CartLineInput!]) {
+    cartCreate(input: { lines: $lines }) {
+      cart {
+        ...CartFragment
+      }
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+`;
+
+// Add lines to cart
+export const ADD_CART_LINES_MUTATION = `
+  ${CartFragment}
+  mutation AddCartLines($cartId: ID!, $lines: [CartLineInput!]!) {
+    cartLinesAdd(cartId: $cartId, lines: $lines) {
+      cart {
+        ...CartFragment
+      }
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+`;
+
+// Update cart lines
+export const UPDATE_CART_LINES_MUTATION = `
+  ${CartFragment}
+  mutation UpdateCartLines($cartId: ID!, $lines: [CartLineUpdateInput!]!) {
+    cartLinesUpdate(cartId: $cartId, lines: $lines) {
+      cart {
+        ...CartFragment
+      }
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+`;
+
+// Remove lines from cart
+export const REMOVE_CART_LINES_MUTATION = `
+  ${CartFragment}
+  mutation RemoveCartLines($cartId: ID!, $lineIds: [ID!]!) {
+    cartLinesRemove(cartId: $cartId, lineIds: $lineIds) {
+      cart {
+        ...CartFragment
+      }
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+`;
+
+// Get cart by ID
+export const GET_CART_QUERY = `
+  ${CartFragment}
+  query GetCart($cartId: ID!) {
+    cart(id: $cartId) {
+      ...CartFragment
+    }
+  }
+`;

graphql/collections.js

@@ -0,0 +1,61 @@
+import { ProductFragment } from './products.js';
+
+// Get all collections
+export const GET_COLLECTIONS_QUERY = `
+  query GetCollections($first: Int!) {
+    collections(first: $first) {
+      edges {
+        node {
+          id
+          title
+          handle
+          description
+          descriptionHtml
+          image {
+            id
+            url
+            altText
+            width
+            height
+          }
+        }
+      }
+      pageInfo {
+        hasNextPage
+        endCursor
+      }
+    }
+  }
+`;
+
+// Get products in a collection
+export const GET_COLLECTION_PRODUCTS_QUERY = `
+  ${ProductFragment}
+  query GetCollectionProducts($handle: String!, $first: Int!, $sortKey: ProductCollectionSortKeys, $reverse: Boolean) {
+    collection(handle: $handle) {
+      id
+      title
+      handle
+      description
+      descriptionHtml
+      image {
+        id
+        url
+        altText
+        width
+        height
+      }
+      products(first: $first, sortKey: $sortKey, reverse: $reverse) {
+        edges {
+          node {
+            ...ProductFragment
+          }
+        }
+        pageInfo {
+          hasNextPage
+          endCursor
+        }
+      }
+    }
+  }
+`;

graphql/products.js

@@ -0,0 +1,116 @@
+// Product Fragment for consistent product data
+export const ProductFragment = `
+  fragment ProductFragment on Product {
+    id
+    title
+    handle
+    description
+    descriptionHtml
+    vendor
+    productType
+    tags
+    availableForSale
+    priceRange {
+      minVariantPrice {
+        amount
+        currencyCode
+      }
+      maxVariantPrice {
+        amount
+        currencyCode
+      }
+    }
+    compareAtPriceRange {
+      minVariantPrice {
+        amount
+        currencyCode
+      }
+      maxVariantPrice {
+        amount
+        currencyCode
+      }
+    }
+    images(first: 10) {
+      edges {
+        node {
+          id
+          url
+          altText
+          width
+          height
+        }
+      }
+    }
+    variants(first: 100) {
+      edges {
+        node {
+          id
+          title
+          availableForSale
+          selectedOptions {
+            name
+            value
+          }
+          price {
+            amount
+            currencyCode
+          }
+          compareAtPrice {
+            amount
+            currencyCode
+          }
+          image {
+            id
+            url
+            altText
+            width
+            height
+          }
+        }
+      }
+    }
+    options {
+      id
+      name
+      values
+    }
+  }
+`;
+
+// Get multiple products
+export const GET_PRODUCTS_QUERY = `
+  ${ProductFragment}
+  query GetProducts($first: Int!, $query: String, $sortKey: ProductSortKeys, $reverse: Boolean) {
+    products(first: $first, query: $query, sortKey: $sortKey, reverse: $reverse) {
+      edges {
+        node {
+          ...ProductFragment
+        }
+      }
+      pageInfo {
+        hasNextPage
+        endCursor
+      }
+    }
+  }
+`;
+
+// Get a single product by handle
+export const GET_PRODUCT_QUERY = `
+  ${ProductFragment}
+  query GetProduct($handle: String!) {
+    product(handle: $handle) {
+      ...ProductFragment
+    }
+  }
+`;
+
+// Get product recommendations
+export const QUERY_PRODUCT_RECOMMENDATIONS = `
+  ${ProductFragment}
+  query GetProductRecommendations($productId: ID!) {
+    productRecommendations(productId: $productId) {
+      ...ProductFragment
+    }
+  }
+`;

hooks/use-shopify-cart.ts

@@ -0,0 +1,165 @@
+'use client';
+
+import { useContext } from 'react';
+import { shopifyFetch, SHOPIFY_STORE_DOMAIN } from '@/services/shopify/client';
+import { CartContext } from '@/contexts/shopify-context';
+import {
+  CREATE_CART_MUTATION,
+  ADD_CART_LINES_MUTATION,
+  UPDATE_CART_LINES_MUTATION,
+  REMOVE_CART_LINES_MUTATION,
+  GET_CART_QUERY,
+} from '@/graphql/cart';
+
+export interface CartLineInput {
+  merchandiseId: string;
+  quantity: number;
+}
+
+export interface CartLineUpdateInput {
+  id: string;
+  quantity: number;
+}
+
+interface CartLine {
+  id: string;
+  quantity: number;
+  cost: {
+    totalAmount: {
+      amount: string;
+      currencyCode: string;
+    };
+  };
+  merchandise: {
+    id: string;
+    title: string;
+    selectedOptions: Array<{
+      name: string;
+      value: string;
+    }>;
+    price: {
+      amount: string;
+      currencyCode: string;
+    };
+    image?: {
+      id: string;
+      url: string;
+      altText?: string;
+      width: number;
+      height: number;
+    };
+    product: {
+      id: string;
+      title: string;
+      handle: string;
+      vendor?: string;
+    };
+  };
+}
+
+export interface Cart {
+  id: string;
+  checkoutUrl: string;
+  totalQuantity: number;
+  cost: {
+    subtotalAmount: {
+      amount: string;
+      currencyCode: string;
+    };
+    totalAmount: {
+      amount: string;
+      currencyCode: string;
+    };
+    totalTaxAmount?: {
+      amount: string;
+      currencyCode: string;
+    };
+  };
+  lines: {
+    edges: Array<{
+      node: CartLine;
+    }>;
+  };
+}
+
+// Create a new cart (optionally with initial items)
+export async function createCart(lines: CartLineInput[] = []): Promise<Cart> {
+  const response = await shopifyFetch({
+    query: CREATE_CART_MUTATION,
+    variables: { lines: lines.length > 0 ? lines : null },
+  });
+
+  if (response.data.cartCreate.userErrors.length > 0) {
+    throw new Error(response.data.cartCreate.userErrors[0].message);
+  }
+
+  return response.data.cartCreate.cart;
+}
+
+// Add items to cart
+export async function addCartLines(cartId: string, lines: CartLineInput[]): Promise<Cart> {
+  const response = await shopifyFetch({
+    query: ADD_CART_LINES_MUTATION,
+    variables: { cartId, lines },
+  });
+
+  if (response.data.cartLinesAdd.userErrors.length > 0) {
+    throw new Error(response.data.cartLinesAdd.userErrors[0].message);
+  }
+
+  return response.data.cartLinesAdd.cart;
+}
+
+// Update cart line quantities
+export async function updateCartLines(cartId: string, lines: CartLineUpdateInput[]): Promise<Cart> {
+  const response = await shopifyFetch({
+    query: UPDATE_CART_LINES_MUTATION,
+    variables: { cartId, lines },
+  });
+
+  if (response.data.cartLinesUpdate.userErrors.length > 0) {
+    throw new Error(response.data.cartLinesUpdate.userErrors[0].message);
+  }
+
+  return response.data.cartLinesUpdate.cart;
+}
+
+// Remove items from cart
+export async function removeCartLines(cartId: string, lineIds: string[]): Promise<Cart> {
+  const response = await shopifyFetch({
+    query: REMOVE_CART_LINES_MUTATION,
+    variables: { cartId, lineIds },
+  });
+
+  if (response.data.cartLinesRemove.userErrors.length > 0) {
+    throw new Error(response.data.cartLinesRemove.userErrors[0].message);
+  }
+
+  return response.data.cartLinesRemove.cart;
+}
+
+// Get cart by ID
+export async function getCart(cartId: string): Promise<Cart | null> {
+  const response = await shopifyFetch({
+    query: GET_CART_QUERY,
+    variables: { cartId },
+  });
+
+  return response.data.cart;
+}
+
+// Redirect to Shopify checkout
+export function redirectToCheckout(checkoutUrl: string): void {
+  if (checkoutUrl) {
+    window.location.href = checkoutUrl;
+  }
+}
+
+// Hook to access cart context
+export const useShopifyCart = () => {
+  const context = useContext(CartContext);
+  if (!context) {
+    throw new Error('useShopifyCart must be used within a ShopifyProvider');
+  }
+  return context;
+};

hooks/use-shopify-collections.ts

@@ -0,0 +1,127 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { shopifyFetch } from '@/services/shopify/client';
+import {
+  GET_COLLECTIONS_QUERY,
+  GET_COLLECTION_PRODUCTS_QUERY,
+} from '@/graphql/collections';
+import type { Product } from './use-shopify-products';
+
+interface CollectionImage {
+  url: string;
+  altText?: string;
+}
+
+export interface Collection {
+  id: string;
+  title: string;
+  handle: string;
+  description?: string;
+  descriptionHtml?: string;
+  image?: CollectionImage;
+}
+
+export interface CollectionWithProducts extends Collection {
+  products: Product[];
+}
+
+interface UseCollectionProductsOptions {
+  first?: number;
+  sortKey?: 'BEST_SELLING' | 'CREATED' | 'PRICE' | 'TITLE';
+  reverse?: boolean;
+}
+
+// Fetch all collections
+export async function getCollections(first = 50): Promise<Collection[]> {
+  const response = await shopifyFetch({
+    query: GET_COLLECTIONS_QUERY,
+    variables: { first },
+  });
+
+  return response.data.collections.edges.map((edge: { node: Collection }) => edge.node);
+}
+
+// Fetch products in a collection by handle
+export async function getCollectionProducts(
+  handle: string,
+  { first = 50, sortKey = 'BEST_SELLING', reverse = false }: UseCollectionProductsOptions = {}
+): Promise<CollectionWithProducts | null> {
+  const response = await shopifyFetch({
+    query: GET_COLLECTION_PRODUCTS_QUERY,
+    variables: { handle, first, sortKey, reverse },
+  });
+
+  const collection = response.data.collection;
+  if (!collection) return null;
+
+  return {
+    ...collection,
+    products: collection.products.edges.map((edge: { node: Product }) => edge.node),
+  };
+}
+
+// Hook for fetching all collections
+export function useCollections(first = 50) {
+  const [collections, setCollections] = useState<Collection[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchCollections = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await getCollections(first);
+      setCollections(data);
+    } catch (err) {
+      console.error('Error fetching collections:', err);
+      setError(err instanceof Error ? err.message : 'Failed to load collections');
+    } finally {
+      setLoading(false);
+    }
+  }, [first]);
+
+  useEffect(() => {
+    fetchCollections();
+  }, [fetchCollections]);
+
+  return { collections, loading, error, refetch: fetchCollections };
+}
+
+// Hook for fetching products in a collection
+export function useCollectionProducts(
+  handle: string | null,
+  options: UseCollectionProductsOptions = {}
+) {
+  const [collection, setCollection] = useState<CollectionWithProducts | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchCollection = useCallback(async () => {
+    if (!handle) {
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await getCollectionProducts(handle, options);
+      setCollection(data);
+      if (!data) {
+        setError('Collection not found');
+      }
+    } catch (err) {
+      console.error('Error fetching collection products:', err);
+      setError(err instanceof Error ? err.message : 'Failed to load collection');
+    } finally {
+      setLoading(false);
+    }
+  }, [handle, options.first, options.sortKey, options.reverse]);
+
+  useEffect(() => {
+    fetchCollection();
+  }, [fetchCollection]);
+
+  return { collection, loading, error, refetch: fetchCollection };
+}

hooks/use-shopify-products.ts

@@ -0,0 +1,205 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { shopifyFetch } from '@/services/shopify/client';
+import {
+  GET_PRODUCTS_QUERY,
+  GET_PRODUCT_QUERY,
+  QUERY_PRODUCT_RECOMMENDATIONS,
+} from '@/graphql/products';
+
+interface ProductImage {
+  url: string;
+  altText?: string;
+}
+
+interface ProductPrice {
+  amount: string;
+  currencyCode: string;
+}
+
+interface ProductVariant {
+  id: string;
+  title: string;
+  price: ProductPrice;
+  availableForSale: boolean;
+  selectedOptions: Array<{
+    name: string;
+    value: string;
+  }>;
+  image?: ProductImage;
+}
+
+interface ProductOption {
+  id: string;
+  name: string;
+  values: string[];
+}
+
+export interface Product {
+  id: string;
+  title: string;
+  description?: string;
+  descriptionHtml?: string;
+  handle: string;
+  images: {
+    edges: Array<{
+      node: ProductImage;
+    }>;
+  };
+  priceRange: {
+    minVariantPrice: ProductPrice;
+  };
+  compareAtPriceRange?: {
+    minVariantPrice: ProductPrice;
+  };
+  variants: {
+    edges: Array<{
+      node: ProductVariant;
+    }>;
+  };
+  options: ProductOption[];
+}
+
+interface UseProductsOptions {
+  first?: number;
+  query?: string;
+  sortKey?: 'BEST_SELLING' | 'CREATED_AT' | 'PRICE' | 'TITLE';
+  reverse?: boolean;
+}
+
+interface UseProductsReturn {
+  products: Product[];
+  loading: boolean;
+  error: string | null;
+  refetch: () => Promise<void>;
+}
+
+// Fetch multiple products
+export async function getProducts({
+  first = 20,
+  query = '',
+  sortKey = 'BEST_SELLING',
+  reverse = false,
+}: UseProductsOptions = {}): Promise<Product[]> {
+  const response = await shopifyFetch({
+    query: GET_PRODUCTS_QUERY,
+    variables: { first, query, sortKey, reverse },
+  });
+
+  return response.data.products.edges.map((edge: { node: Product }) => edge.node);
+}
+
+// Fetch a single product by handle
+export async function getProduct(handle: string): Promise<Product | null> {
+  const response = await shopifyFetch({
+    query: GET_PRODUCT_QUERY,
+    variables: { handle },
+  });
+
+  return response.data.product;
+}
+
+// Fetch product recommendations
+export async function getProductRecommendations(productId: string): Promise<Product[]> {
+  const response = await shopifyFetch({
+    query: QUERY_PRODUCT_RECOMMENDATIONS,
+    variables: { productId },
+  });
+
+  return response.data.productRecommendations || [];
+}
+
+// Hook for fetching multiple products
+export function useProducts(options: UseProductsOptions = {}): UseProductsReturn {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchProducts = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await getProducts(options);
+      setProducts(data);
+    } catch (err) {
+      console.error('Error fetching products:', err);
+      setError(err instanceof Error ? err.message : 'Failed to load products');
+    } finally {
+      setLoading(false);
+    }
+  }, [options.first, options.query, options.sortKey, options.reverse]);
+
+  useEffect(() => {
+    fetchProducts();
+  }, [fetchProducts]);
+
+  return { products, loading, error, refetch: fetchProducts };
+}
+
+// Hook for fetching a single product
+export function useProduct(handle: string | null) {
+  const [product, setProduct] = useState<Product | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchProduct = useCallback(async () => {
+    if (!handle) {
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await getProduct(handle);
+      setProduct(data);
+      if (!data) {
+        setError('Product not found');
+      }
+    } catch (err) {
+      console.error('Error fetching product:', err);
+      setError(err instanceof Error ? err.message : 'Failed to load product');
+    } finally {
+      setLoading(false);
+    }
+  }, [handle]);
+
+  useEffect(() => {
+    fetchProduct();
+  }, [fetchProduct]);
+
+  return { product, loading, error, refetch: fetchProduct };
+}
+
+// Hook for fetching product recommendations
+export function useProductRecommendations(productId: string | null) {
+  const [recommendations, setRecommendations] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchRecommendations = useCallback(async () => {
+    if (!productId) {
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await getProductRecommendations(productId);
+      setRecommendations(data);
+    } catch (err) {
+      console.error('Error fetching recommendations:', err);
+      setError(err instanceof Error ? err.message : 'Failed to load recommendations');
+    } finally {
+      setLoading(false);
+    }
+  }, [productId]);
+
+  useEffect(() => {
+    fetchRecommendations();
+  }, [fetchRecommendations]);
+
+  return { recommendations, loading, error, refetch: fetchRecommendations };
+}

index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Frontend</title>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.css" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4?plugins=typography,forms"></script>
+</head>
+<body class="m-0 p-0 font-sans">
+  <div id="root" class="w-full h-full"></div>
+  <script type="module" src="./main.tsx"></script>
+</body>
+</html>

lib/config.json

@@ -0,0 +1,20 @@
+{
+  "brand": {
+    "colors": {
+      "primary": "#0F172A",
+      "secondary": "#343D4C"
+    },
+    "fonts": {
+      "header": "Playfair Display",
+      "body": "Inter"
+    },
+    "logo": {
+      "url": "",
+      "alt": ""
+    }
+  },
+  "data": {
+    "product": "mens-performance-t-short",
+    "collection": "frontpage"
+  }
+}

lib/utils.ts

@@ -0,0 +1,18 @@
+import { twMerge } from 'tailwind-merge';
+
+type ClassValue = string | undefined | null | false | Record<string, boolean>;
+type ClassArray = ClassValue[];
+
+export function cn(...classes: (ClassValue | ClassArray)[]): string {
+  const merged = classes
+    .flat()
+    .filter((cls): cls is string => typeof cls === 'string')
+    .join(' ');
+  return twMerge(merged);
+}
+
+export const truncate = (text: string, maxLength: number): string => {
+  if (!text) return '';
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength).trim() + '...';
+};

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.mjs

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+};
+
+export default nextConfig;

package-lock.json

@@ -0,0 +1,930 @@
+{
+  "name": "vite-app",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "vite-app",
+      "version": "0.0.0",
+      "dependencies": {
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.544.0",
+        "react": "^19.1.1",
+        "react-dom": "^19.1.1"
+      },
+      "devDependencies": {
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "@vitejs/plugin-react": "^5.0.3",
+        "typescript": "^4.9.3",
+        "vite": "^7.1.6"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.28.4",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.28.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.3",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-module-transforms": "^7.28.3",
+        "@babel/helpers": "^7.28.4",
+        "@babel/parser": "^7.28.4",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.4",
+        "@babel/types": "^7.28.4",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.3",
+        "@babel/types": "^7.28.2",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.27.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.27.2",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.27.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.28.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.27.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.27.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.28.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.4"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.27.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.27.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.27.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.28.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.3",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.4",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.4",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.10",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.38",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.52.4",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.1",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "5.0.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.4",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.38",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.17.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.8.15",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.26.3",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.8.9",
+        "caniuse-lite": "^1.0.30001746",
+        "electron-to-chromium": "^1.5.227",
+        "node-releases": "^2.0.21",
+        "update-browserslist-db": "^1.1.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001749",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.233",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.10",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.10",
+        "@esbuild/android-arm": "0.25.10",
+        "@esbuild/android-arm64": "0.25.10",
+        "@esbuild/android-x64": "0.25.10",
+        "@esbuild/darwin-arm64": "0.25.10",
+        "@esbuild/darwin-x64": "0.25.10",
+        "@esbuild/freebsd-arm64": "0.25.10",
+        "@esbuild/freebsd-x64": "0.25.10",
+        "@esbuild/linux-arm": "0.25.10",
+        "@esbuild/linux-arm64": "0.25.10",
+        "@esbuild/linux-ia32": "0.25.10",
+        "@esbuild/linux-loong64": "0.25.10",
+        "@esbuild/linux-mips64el": "0.25.10",
+        "@esbuild/linux-ppc64": "0.25.10",
+        "@esbuild/linux-riscv64": "0.25.10",
+        "@esbuild/linux-s390x": "0.25.10",
+        "@esbuild/linux-x64": "0.25.10",
+        "@esbuild/netbsd-arm64": "0.25.10",
+        "@esbuild/netbsd-x64": "0.25.10",
+        "@esbuild/openbsd-arm64": "0.25.10",
+        "@esbuild/openbsd-x64": "0.25.10",
+        "@esbuild/openharmony-arm64": "0.25.10",
+        "@esbuild/sunos-x64": "0.25.10",
+        "@esbuild/win32-arm64": "0.25.10",
+        "@esbuild/win32-ia32": "0.25.10",
+        "@esbuild/win32-x64": "0.25.10"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.544.0",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.23",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.3",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.0"
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.17.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.52.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.52.4",
+        "@rollup/rollup-android-arm64": "4.52.4",
+        "@rollup/rollup-darwin-arm64": "4.52.4",
+        "@rollup/rollup-darwin-x64": "4.52.4",
+        "@rollup/rollup-freebsd-arm64": "4.52.4",
+        "@rollup/rollup-freebsd-x64": "4.52.4",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.52.4",
+        "@rollup/rollup-linux-arm-musleabihf": "4.52.4",
+        "@rollup/rollup-linux-arm64-gnu": "4.52.4",
+        "@rollup/rollup-linux-arm64-musl": "4.52.4",
+        "@rollup/rollup-linux-loong64-gnu": "4.52.4",
+        "@rollup/rollup-linux-ppc64-gnu": "4.52.4",
+        "@rollup/rollup-linux-riscv64-gnu": "4.52.4",
+        "@rollup/rollup-linux-riscv64-musl": "4.52.4",
+        "@rollup/rollup-linux-s390x-gnu": "4.52.4",
+        "@rollup/rollup-linux-x64-gnu": "4.52.4",
+        "@rollup/rollup-linux-x64-musl": "4.52.4",
+        "@rollup/rollup-openharmony-arm64": "4.52.4",
+        "@rollup/rollup-win32-arm64-msvc": "4.52.4",
+        "@rollup/rollup-win32-ia32-msvc": "4.52.4",
+        "@rollup/rollup-win32-x64-gnu": "4.52.4",
+        "@rollup/rollup-win32-x64-msvc": "4.52.4",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "4.9.5",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.3",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "7.1.9",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.25.0",
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "lightningcss": "^1.21.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "dev": true,
+      "license": "ISC"
+    }
+  }
+}

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "nextjs-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.562.0",
+    "motion": "^12.23.26",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "sonner": "^2.0.7",    
+    "tailwind-merge": "^3.4.0",
+    "next": "^15.5.7",
+    "tailwindcss": "^4.1.18",
+    "@remixicon/react": "^4.7.0",
+    "@supabase/supabase-js": "^2.51.0",
+    "zod": "^4.3.5"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^4.9.3"
+  }
+}

postcss.config.js

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

services/shopify/api.ts

@@ -0,0 +1,36 @@
+// Main Shopify API service that combines all functionality
+export { shopifyFetch, SHOPIFY_STORE_DOMAIN, SHOPIFY_STOREFRONT_API_URL } from './index.js';
+
+// Product functions
+export { 
+  getProducts, 
+  getProduct,
+  getProductRecommendations,
+  GET_PRODUCTS_QUERY, 
+  GET_PRODUCT_QUERY,
+  QUERY_PRODUCT_RECOMMENDATIONS,
+  ProductFragment
+} from '../../graphql/products.js';
+
+// Collection functions
+export { 
+  getCollections, 
+  getCollectionProducts, 
+  GET_COLLECTIONS_QUERY, 
+  GET_COLLECTION_PRODUCTS_QUERY 
+} from '../../graphql/collections.js';
+
+// Cart functions
+export {
+  createCart,
+  addCartLines,
+  updateCartLines,
+  removeCartLines,
+  getCart,
+  redirectToCheckout,
+  CREATE_CART_MUTATION,
+  ADD_CART_LINES_MUTATION,
+  UPDATE_CART_LINES_MUTATION,
+  REMOVE_CART_LINES_MUTATION,
+  GET_CART_QUERY
+} from '../../graphql/cart.js';

services/shopify/client.js

@@ -0,0 +1,48 @@
+// Shopify Storefront API Service
+const SHOPIFY_STORE_DOMAIN = process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN;
+const SHOPIFY_STOREFRONT_ACCESS_TOKEN = process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN;
+const SHOPIFY_API_VERSION = process.env.NEXT_PUBLIC_SHOPIFY_API_VERSION || '2025-07';
+const SHOPIFY_STOREFRONT_API_URL = `https://${SHOPIFY_STORE_DOMAIN}/api/${SHOPIFY_API_VERSION}/graphql.json`;
+
+// Shopify API request with optional access token
+async function shopifyFetch({ query, variables = {} }) {
+  try {
+    const headers = {
+      'Content-Type': 'application/json',
+    };
+
+    // Add access token if available
+    if (SHOPIFY_STOREFRONT_ACCESS_TOKEN) {
+      headers['X-Shopify-Storefront-Access-Token'] = SHOPIFY_STOREFRONT_ACCESS_TOKEN;
+    }
+
+    const response = await fetch(SHOPIFY_STOREFRONT_API_URL, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({
+        query,
+        variables,
+      }),
+      cache: 'no-store', // Ensure fresh data for cart operations
+    });
+
+    if (!response.ok) {
+      const errorBody = await response.text();
+      throw new Error(`Shopify API HTTP error! Status: ${response.status}, Body: ${errorBody}`);
+    }
+
+    const json = await response.json();
+
+    if (json.errors) {
+      console.error('Shopify API errors:', json.errors);
+      throw new Error(`Shopify GraphQL errors: ${JSON.stringify(json.errors)}`);
+    }
+
+    return json;
+  } catch (error) {
+    console.error('Shopify fetch error:', error);
+    throw error;
+  }
+}
+
+export { shopifyFetch, SHOPIFY_STORE_DOMAIN, SHOPIFY_STOREFRONT_API_URL };

services/shopify/index.js

@@ -0,0 +1,48 @@
+// Shopify Storefront API Service
+const SHOPIFY_STORE_DOMAIN = process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN;
+const SHOPIFY_STOREFRONT_ACCESS_TOKEN = process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN;
+const SHOPIFY_API_VERSION = process.env.NEXT_PUBLIC_SHOPIFY_API_VERSION || '2025-07';
+const SHOPIFY_STOREFRONT_API_URL = `https://${SHOPIFY_STORE_DOMAIN}/api/${SHOPIFY_API_VERSION}/graphql.json`;
+
+// Shopify API request with optional access token
+async function shopifyFetch({ query, variables = {} }) {
+  try {
+    const headers = {
+      'Content-Type': 'application/json',
+    };
+
+    // Add access token if available
+    if (SHOPIFY_STOREFRONT_ACCESS_TOKEN) {
+      headers['X-Shopify-Storefront-Access-Token'] = SHOPIFY_STOREFRONT_ACCESS_TOKEN;
+    }
+
+    const response = await fetch(SHOPIFY_STOREFRONT_API_URL, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({
+        query,
+        variables,
+      }),
+      cache: 'no-store', // Ensure fresh data for cart operations
+    });
+
+    if (!response.ok) {
+      const errorBody = await response.text();
+      throw new Error(`Shopify API HTTP error! Status: ${response.status}, Body: ${errorBody}`);
+    }
+
+    const json = await response.json();
+
+    if (json.errors) {
+      console.error('Shopify API errors:', json.errors);
+      throw new Error(`Shopify GraphQL errors: ${JSON.stringify(json.errors)}`);
+    }
+
+    return json;
+  } catch (error) {
+    console.error('Shopify fetch error:', error);
+    throw error;
+  }
+}
+
+export { shopifyFetch, SHOPIFY_STORE_DOMAIN, SHOPIFY_STOREFRONT_API_URL };

tsconfig.json

@@ -0,0 +1,49 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    },
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

yarn.lock

@@ -0,0 +1,822 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@alloc/quick-lru@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
+  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
+
+"@emnapi/core@^1.7.1":
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/@emnapi/core/-/core-1.8.1.tgz#fd9efe721a616288345ffee17a1f26ac5dd01349"
+  integrity sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==
+  dependencies:
+    "@emnapi/wasi-threads" "1.1.0"
+    tslib "^2.4.0"
+
+"@emnapi/runtime@^1.7.0", "@emnapi/runtime@^1.7.1":
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.8.1.tgz#550fa7e3c0d49c5fb175a116e8cd70614f9a22a5"
+  integrity sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==
+  dependencies:
+    tslib "^2.4.0"
+
+"@emnapi/wasi-threads@1.1.0", "@emnapi/wasi-threads@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz#60b2102fddc9ccb78607e4a3cf8403ea69be41bf"
+  integrity sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==
+  dependencies:
+    tslib "^2.4.0"
+
+"@img/colour@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@img/colour/-/colour-1.0.0.tgz#d2fabb223455a793bf3bf9c70de3d28526aa8311"
+  integrity sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==
+
+"@img/sharp-darwin-arm64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz#6e0732dcade126b6670af7aa17060b926835ea86"
+  integrity sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==
+  optionalDependencies:
+    "@img/sharp-libvips-darwin-arm64" "1.2.4"
+
+"@img/sharp-darwin-x64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz#19bc1dd6eba6d5a96283498b9c9f401180ee9c7b"
+  integrity sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==
+  optionalDependencies:
+    "@img/sharp-libvips-darwin-x64" "1.2.4"
+
+"@img/sharp-libvips-darwin-arm64@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz#2894c0cb87d42276c3889942e8e2db517a492c43"
+  integrity sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==
+
+"@img/sharp-libvips-darwin-x64@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz#e63681f4539a94af9cd17246ed8881734386f8cc"
+  integrity sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==
+
+"@img/sharp-libvips-linux-arm64@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz#b1b288b36864b3bce545ad91fa6dadcf1a4ad318"
+  integrity sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==
+
+"@img/sharp-libvips-linux-arm@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz#b9260dd1ebe6f9e3bdbcbdcac9d2ac125f35852d"
+  integrity sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==
+
+"@img/sharp-libvips-linux-ppc64@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz#4b83ecf2a829057222b38848c7b022e7b4d07aa7"
+  integrity sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==
+
+"@img/sharp-libvips-linux-riscv64@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz#880b4678009e5a2080af192332b00b0aaf8a48de"
+  integrity sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==
+
+"@img/sharp-libvips-linux-s390x@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz#74f343c8e10fad821b38f75ced30488939dc59ec"
+  integrity sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==
+
+"@img/sharp-libvips-linux-x64@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz#df4183e8bd8410f7d61b66859a35edeab0a531ce"
+  integrity sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==
+
+"@img/sharp-libvips-linuxmusl-arm64@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz#c8d6b48211df67137541007ee8d1b7b1f8ca8e06"
+  integrity sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==
+
+"@img/sharp-libvips-linuxmusl-x64@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz#be11c75bee5b080cbee31a153a8779448f919f75"
+  integrity sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==
+
+"@img/sharp-linux-arm64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz#7aa7764ef9c001f15e610546d42fce56911790cc"
+  integrity sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-arm64" "1.2.4"
+
+"@img/sharp-linux-arm@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz#5fb0c3695dd12522d39c3ff7a6bc816461780a0d"
+  integrity sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-arm" "1.2.4"
+
+"@img/sharp-linux-ppc64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz#9c213a81520a20caf66978f3d4c07456ff2e0813"
+  integrity sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-ppc64" "1.2.4"
+
+"@img/sharp-linux-riscv64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz#cdd28182774eadbe04f62675a16aabbccb833f60"
+  integrity sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-riscv64" "1.2.4"
+
+"@img/sharp-linux-s390x@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz#93eac601b9f329bb27917e0e19098c722d630df7"
+  integrity sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-s390x" "1.2.4"
+
+"@img/sharp-linux-x64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz#55abc7cd754ffca5002b6c2b719abdfc846819a8"
+  integrity sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-x64" "1.2.4"
+
+"@img/sharp-linuxmusl-arm64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz#d6515ee971bb62f73001a4829b9d865a11b77086"
+  integrity sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==
+  optionalDependencies:
+    "@img/sharp-libvips-linuxmusl-arm64" "1.2.4"
+
+"@img/sharp-linuxmusl-x64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz#d97978aec7c5212f999714f2f5b736457e12ee9f"
+  integrity sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==
+  optionalDependencies:
+    "@img/sharp-libvips-linuxmusl-x64" "1.2.4"
+
+"@img/sharp-wasm32@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz#2f15803aa626f8c59dd7c9d0bbc766f1ab52cfa0"
+  integrity sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==
+  dependencies:
+    "@emnapi/runtime" "^1.7.0"
+
+"@img/sharp-win32-arm64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz#3706e9e3ac35fddfc1c87f94e849f1b75307ce0a"
+  integrity sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==
+
+"@img/sharp-win32-ia32@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz#0b71166599b049e032f085fb9263e02f4e4788de"
+  integrity sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==
+
+"@img/sharp-win32-x64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz#a81ffb00e69267cd0a1d626eaedb8a8430b2b2f8"
+  integrity sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==
+
+"@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.13"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz#6342a19f44347518c93e43b1ac69deb3c4656a1f"
+  integrity sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.5.0"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/remapping@^2.3.4":
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/remapping/-/remapping-2.3.5.tgz#375c476d1972947851ba1e15ae8f123047445aa1"
+  integrity sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
+"@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.5.0", "@jridgewell/sourcemap-codec@^1.5.5":
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz#6912b00d2c631c0d15ce1a7ab57cd657f2a8f8ba"
+  integrity sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==
+
+"@jridgewell/trace-mapping@^0.3.24":
+  version "0.3.31"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz#db15d6781c931f3a251a3dac39501c98a6082fd0"
+  integrity sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+"@napi-rs/wasm-runtime@^1.1.0":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.1.tgz#c3705ab549d176b8dc5172723d6156c3dc426af2"
+  integrity sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A==
+  dependencies:
+    "@emnapi/core" "^1.7.1"
+    "@emnapi/runtime" "^1.7.1"
+    "@tybys/wasm-util" "^0.10.1"
+
+"@next/env@15.5.10":
+  version "15.5.10"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-15.5.10.tgz#3b0506c57d0977e60726a1663f36bc96d42c295b"
+  integrity sha512-plg+9A/KoZcTS26fe15LHg+QxReTazrIOoKKUC3Uz4leGGeNPgLHdevVraAAOX0snnUs3WkRx3eUQpj9mreG6A==
+
+"@next/swc-darwin-arm64@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.7.tgz#f0c9ccfec2cd87cbd4b241ce4c779a7017aed958"
+  integrity sha512-IZwtxCEpI91HVU/rAUOOobWSZv4P2DeTtNaCdHqLcTJU4wdNXgAySvKa/qJCgR5m6KI8UsKDXtO2B31jcaw1Yw==
+
+"@next/swc-darwin-x64@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.7.tgz#18009e9fcffc5c0687cc9db24182ddeac56280d9"
+  integrity sha512-UP6CaDBcqaCBuiq/gfCEJw7sPEoX1aIjZHnBWN9v9qYHQdMKvCKcAVs4OX1vIjeE+tC5EIuwDTVIoXpUes29lg==
+
+"@next/swc-linux-arm64-gnu@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.7.tgz#fe7c7e08264cf522d4e524299f6d3e63d68d579a"
+  integrity sha512-NCslw3GrNIw7OgmRBxHtdWFQYhexoUCq+0oS2ccjyYLtcn1SzGzeM54jpTFonIMUjNbHmpKpziXnpxhSWLcmBA==
+
+"@next/swc-linux-arm64-musl@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.7.tgz#94228fe293475ec34a5a54284e1056876f43a3cf"
+  integrity sha512-nfymt+SE5cvtTrG9u1wdoxBr9bVB7mtKTcj0ltRn6gkP/2Nu1zM5ei8rwP9qKQP0Y//umK+TtkKgNtfboBxRrw==
+
+"@next/swc-linux-x64-gnu@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.7.tgz#078c71201dfe7fcfb8fa6dc92aae6c94bc011cdc"
+  integrity sha512-hvXcZvCaaEbCZcVzcY7E1uXN9xWZfFvkNHwbe/n4OkRhFWrs1J1QV+4U1BN06tXLdaS4DazEGXwgqnu/VMcmqw==
+
+"@next/swc-linux-x64-musl@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.7.tgz#72947f5357f9226292353e0bb775643da3c7a182"
+  integrity sha512-4IUO539b8FmF0odY6/SqANJdgwn1xs1GkPO5doZugwZ3ETF6JUdckk7RGmsfSf7ws8Qb2YB5It33mvNL/0acqA==
+
+"@next/swc-win32-arm64-msvc@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.7.tgz#397b912cd51c6a80e32b9c0507ecd82514353941"
+  integrity sha512-CpJVTkYI3ZajQkC5vajM7/ApKJUOlm6uP4BknM3XKvJ7VXAvCqSjSLmM0LKdYzn6nBJVSjdclx8nYJSa3xlTgQ==
+
+"@next/swc-win32-x64-msvc@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.7.tgz#e02b543d9dc6c1631d4ac239cb1177245dfedfe4"
+  integrity sha512-gMzgBX164I6DN+9/PGA+9dQiwmTkE4TloBNx8Kv9UiGARsr9Nba7IpcBRA1iTV9vwlYnrE3Uy6I7Aj6qLjQuqw==
+
+"@remixicon/react@^4.7.0":
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/@remixicon/react/-/react-4.8.0.tgz#7357dbffce4612149d50e42808c63fd4fedafe90"
+  integrity sha512-cbzR04GKWa3zWdgn0C2i+u/avb167iWeu9gqFO00UGu84meARPAm3oKowDZTU6dlk/WS3UHo6k//LMRM1l7CRw==
+
+"@supabase/auth-js@2.93.1":
+  version "2.93.1"
+  resolved "https://registry.yarnpkg.com/@supabase/auth-js/-/auth-js-2.93.1.tgz#a36e21915cd904b901c4d1c7dac14afc8d343ae1"
+  integrity sha512-pC0Ek4xk4z6q7A/3+UuZ/eYgfFUUQTg3DhapzrAgJnFGDJDFDyGCj6v9nIz8+3jfLqSZ3QKGe6AoEodYjShghg==
+  dependencies:
+    tslib "2.8.1"
+
+"@supabase/functions-js@2.93.1":
+  version "2.93.1"
+  resolved "https://registry.yarnpkg.com/@supabase/functions-js/-/functions-js-2.93.1.tgz#fd284f4f77f684403f8dbd69d96b49c6c1673cf3"
+  integrity sha512-Ott2IcIXHGupaC0nX9WNEiJAX4OdlGRu9upkkURaQHbaLdz9JuCcHxlwTERgtgjMpikbIWHfMM1M9QTQFYABiA==
+  dependencies:
+    tslib "2.8.1"
+
+"@supabase/postgrest-js@2.93.1":
+  version "2.93.1"
+  resolved "https://registry.yarnpkg.com/@supabase/postgrest-js/-/postgrest-js-2.93.1.tgz#9cc94f0f4f8313e7d2a5b568cb4c1e88f86c986b"
+  integrity sha512-uRKKQJBDnfi6XFNFPNMh9+u3HT2PCgp065PcMPmG7e0xGuqvLtN89QxO2/SZcGbw2y1+mNBz0yUs5KmyNqF2fA==
+  dependencies:
+    tslib "2.8.1"
+
+"@supabase/realtime-js@2.93.1":
+  version "2.93.1"
+  resolved "https://registry.yarnpkg.com/@supabase/realtime-js/-/realtime-js-2.93.1.tgz#285c667173ee4aac9a5e47eb2a8246a00389a86a"
+  integrity sha512-2WaP/KVHPlQDjWM6qe4wOZz6zSRGaXw1lfXf4thbfvk3C3zPPKqXRyspyYnk3IhphyxSsJ2hQ/cXNOz48008tg==
+  dependencies:
+    "@types/phoenix" "^1.6.6"
+    "@types/ws" "^8.18.1"
+    tslib "2.8.1"
+    ws "^8.18.2"
+
+"@supabase/storage-js@2.93.1":
+  version "2.93.1"
+  resolved "https://registry.yarnpkg.com/@supabase/storage-js/-/storage-js-2.93.1.tgz#0ea2f13b5925892f8fc6da303383d12f93c90461"
+  integrity sha512-3KVwd4S1i1BVPL6KIywe5rnruNQXSkLyvrdiJmwnqwbCcDujQumARdGWBPesqCjOPKEU2M9ORWKAsn+2iLzquA==
+  dependencies:
+    iceberg-js "^0.8.1"
+    tslib "2.8.1"
+
+"@supabase/supabase-js@^2.51.0":
+  version "2.93.1"
+  resolved "https://registry.yarnpkg.com/@supabase/supabase-js/-/supabase-js-2.93.1.tgz#94f54c752dc620290c988f1df3d3be3dd352034d"
+  integrity sha512-FJTgS5s0xEgRQ3u7gMuzGObwf3jA4O5Ki/DgCDXx94w1pihLM4/WG3XFa4BaCJYfuzLxLcv6zPPA5tDvBUjAUg==
+  dependencies:
+    "@supabase/auth-js" "2.93.1"
+    "@supabase/functions-js" "2.93.1"
+    "@supabase/postgrest-js" "2.93.1"
+    "@supabase/realtime-js" "2.93.1"
+    "@supabase/storage-js" "2.93.1"
+
+"@swc/helpers@0.5.15":
+  version "0.5.15"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.15.tgz#79efab344c5819ecf83a43f3f9f811fc84b516d7"
+  integrity sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==
+  dependencies:
+    tslib "^2.8.0"
+
+"@tailwindcss/node@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/node/-/node-4.1.18.tgz#9863be0d26178638794a38d6c7c14666fb992e8a"
+  integrity sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==
+  dependencies:
+    "@jridgewell/remapping" "^2.3.4"
+    enhanced-resolve "^5.18.3"
+    jiti "^2.6.1"
+    lightningcss "1.30.2"
+    magic-string "^0.30.21"
+    source-map-js "^1.2.1"
+    tailwindcss "4.1.18"
+
+"@tailwindcss/oxide-android-arm64@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.18.tgz#79717f87e90135e5d3d23a3d3aecde4ca5595dd5"
+  integrity sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==
+
+"@tailwindcss/oxide-darwin-arm64@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.18.tgz#7fa47608d62d60e9eb020682249d20159667fbb0"
+  integrity sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==
+
+"@tailwindcss/oxide-darwin-x64@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.18.tgz#c05991c85aa2af47bf9d1f8172fe9e4636591e79"
+  integrity sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==
+
+"@tailwindcss/oxide-freebsd-x64@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.18.tgz#3d48e8d79fd08ece0e02af8e72d5059646be34d0"
+  integrity sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==
+
+"@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.18.tgz#982ecd1a65180807ccfde67dc17c6897f2e50aa8"
+  integrity sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==
+
+"@tailwindcss/oxide-linux-arm64-gnu@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.18.tgz#df49357bc9737b2e9810ea950c1c0647ba6573c3"
+  integrity sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==
+
+"@tailwindcss/oxide-linux-arm64-musl@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.18.tgz#b266c12822bf87883cf152615f8fffb8519d689c"
+  integrity sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==
+
+"@tailwindcss/oxide-linux-x64-gnu@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.18.tgz#5c737f13dd9529b25b314e6000ff54e05b3811da"
+  integrity sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==
+
+"@tailwindcss/oxide-linux-x64-musl@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.18.tgz#3380e17f7be391f1ef924be9f0afe1f304fe3478"
+  integrity sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==
+
+"@tailwindcss/oxide-wasm32-wasi@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.18.tgz#9464df0e28a499aab1c55e97682be37b3a656c88"
+  integrity sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==
+  dependencies:
+    "@emnapi/core" "^1.7.1"
+    "@emnapi/runtime" "^1.7.1"
+    "@emnapi/wasi-threads" "^1.1.0"
+    "@napi-rs/wasm-runtime" "^1.1.0"
+    "@tybys/wasm-util" "^0.10.1"
+    tslib "^2.4.0"
+
+"@tailwindcss/oxide-win32-arm64-msvc@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz#bbcdd59c628811f6a0a4d5b09616967d8fb0c4d4"
+  integrity sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==
+
+"@tailwindcss/oxide-win32-x64-msvc@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.18.tgz#9c628d04623aa4c3536c508289f58d58ba4b3fb1"
+  integrity sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==
+
+"@tailwindcss/oxide@4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide/-/oxide-4.1.18.tgz#c8335cd0a83e9880caecd60abf7904f43ebab582"
+  integrity sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==
+  optionalDependencies:
+    "@tailwindcss/oxide-android-arm64" "4.1.18"
+    "@tailwindcss/oxide-darwin-arm64" "4.1.18"
+    "@tailwindcss/oxide-darwin-x64" "4.1.18"
+    "@tailwindcss/oxide-freebsd-x64" "4.1.18"
+    "@tailwindcss/oxide-linux-arm-gnueabihf" "4.1.18"
+    "@tailwindcss/oxide-linux-arm64-gnu" "4.1.18"
+    "@tailwindcss/oxide-linux-arm64-musl" "4.1.18"
+    "@tailwindcss/oxide-linux-x64-gnu" "4.1.18"
+    "@tailwindcss/oxide-linux-x64-musl" "4.1.18"
+    "@tailwindcss/oxide-wasm32-wasi" "4.1.18"
+    "@tailwindcss/oxide-win32-arm64-msvc" "4.1.18"
+    "@tailwindcss/oxide-win32-x64-msvc" "4.1.18"
+
+"@tailwindcss/postcss@^4.1.18":
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/postcss/-/postcss-4.1.18.tgz#19152640d676beaa2a4a70b00bbc36ef54e998b5"
+  integrity sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    "@tailwindcss/node" "4.1.18"
+    "@tailwindcss/oxide" "4.1.18"
+    postcss "^8.4.41"
+    tailwindcss "4.1.18"
+
+"@tybys/wasm-util@^0.10.1":
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/@tybys/wasm-util/-/wasm-util-0.10.1.tgz#ecddd3205cf1e2d5274649ff0eedd2991ed7f414"
+  integrity sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==
+  dependencies:
+    tslib "^2.4.0"
+
+"@types/node@*":
+  version "25.0.10"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-25.0.10.tgz#4864459c3c9459376b8b75fd051315071c8213e7"
+  integrity sha512-zWW5KPngR/yvakJgGOmZ5vTBemDoSqF3AcV/LrO5u5wTWyEAVVh+IT39G4gtyAkh3CtTZs8aX/yRM82OfzHJRg==
+  dependencies:
+    undici-types "~7.16.0"
+
+"@types/phoenix@^1.6.6":
+  version "1.6.7"
+  resolved "https://registry.yarnpkg.com/@types/phoenix/-/phoenix-1.6.7.tgz#75137b7ecf732ceaca284cf10c1552071cfff12f"
+  integrity sha512-oN9ive//QSBkf19rfDv45M7eZPi0eEXylht2OLEXicu5b4KoQ1OzXIw+xDSGWxSxe1JmepRR/ZH283vsu518/Q==
+
+"@types/react-dom@^19.0.0":
+  version "19.2.3"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.2.3.tgz#c1e305d15a52a3e508d54dca770d202cb63abf2c"
+  integrity sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==
+
+"@types/react@^19.0.0":
+  version "19.2.7"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.2.7.tgz#84e62c0f23e8e4e5ac2cadcea1ffeacccae7f62f"
+  integrity sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==
+  dependencies:
+    csstype "^3.2.2"
+
+"@types/ws@^8.18.1":
+  version "8.18.1"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.18.1.tgz#48464e4bf2ddfd17db13d845467f6070ffea4aa9"
+  integrity sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==
+  dependencies:
+    "@types/node" "*"
+
+caniuse-lite@^1.0.30001579:
+  version "1.0.30001766"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001766.tgz#b6f6b55cb25a2d888d9393104d14751c6a7d6f7a"
+  integrity sha512-4C0lfJ0/YPjJQHagaE9x2Elb69CIqEPZeG0anQt9SIvIoOH4a4uaRl73IavyO+0qZh6MDLH//DrXThEYKHkmYA==
+
+client-only@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
+csstype@^3.2.2:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.2.3.tgz#ec48c0f3e993e50648c86da559e2610995cf989a"
+  integrity sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==
+
+detect-libc@^2.0.3, detect-libc@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.1.2.tgz#689c5dcdc1900ef5583a4cb9f6d7b473742074ad"
+  integrity sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==
+
+embla-carousel-react@^8.6.0:
+  version "8.6.0"
+  resolved "https://registry.yarnpkg.com/embla-carousel-react/-/embla-carousel-react-8.6.0.tgz#b737042a32761c38d6614593653b3ac619477bd1"
+  integrity sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==
+  dependencies:
+    embla-carousel "8.6.0"
+    embla-carousel-reactive-utils "8.6.0"
+
+embla-carousel-reactive-utils@8.6.0:
+  version "8.6.0"
+  resolved "https://registry.yarnpkg.com/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz#607f1d8ab9921c906a555c206251b2c6db687223"
+  integrity sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==
+
+embla-carousel@8.6.0:
+  version "8.6.0"
+  resolved "https://registry.yarnpkg.com/embla-carousel/-/embla-carousel-8.6.0.tgz#abcedff2bff36992ea8ac27cd30080ca5b6a3f58"
+  integrity sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==
+
+enhanced-resolve@^5.18.3:
+  version "5.18.4"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz#c22d33055f3952035ce6a144ce092447c525f828"
+  integrity sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
+framer-motion@^12.23.26:
+  version "12.23.26"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-12.23.26.tgz#2a684e9b156118e1c4989d7fc9327def83480391"
+  integrity sha512-cPcIhgR42xBn1Uj+PzOyheMtZ73H927+uWPDVhUMqxy8UHt6Okavb6xIz9J/phFUHUj0OncR6UvMfJTXoc/LKA==
+  dependencies:
+    motion-dom "^12.23.23"
+    motion-utils "^12.23.6"
+    tslib "^2.4.0"
+
+graceful-fs@^4.2.4:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
+iceberg-js@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/iceberg-js/-/iceberg-js-0.8.1.tgz#47d893468293a010385e1c70123f29d0fc1d9912"
+  integrity sha512-1dhVQZXhcHje7798IVM+xoo/1ZdVfzOMIc8/rgVSijRK38EDqOJoGula9N/8ZI5RD8QTxNQtK/Gozpr+qUqRRA==
+
+input-otp@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/input-otp/-/input-otp-1.4.2.tgz#f4d3d587d0f641729e55029b3b8c4870847f4f07"
+  integrity sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA==
+
+jiti@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-2.6.1.tgz#178ef2fc9a1a594248c20627cd820187a4d78d92"
+  integrity sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==
+
+lightningcss-android-arm64@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz#6966b7024d39c94994008b548b71ab360eb3a307"
+  integrity sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==
+
+lightningcss-darwin-arm64@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz#a5fa946d27c029e48c7ff929e6e724a7de46eb2c"
+  integrity sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==
+
+lightningcss-darwin-x64@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz#5ce87e9cd7c4f2dcc1b713f5e8ee185c88d9b7cd"
+  integrity sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==
+
+lightningcss-freebsd-x64@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz#6ae1d5e773c97961df5cff57b851807ef33692a5"
+  integrity sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==
+
+lightningcss-linux-arm-gnueabihf@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz#62c489610c0424151a6121fa99d77731536cdaeb"
+  integrity sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==
+
+lightningcss-linux-arm64-gnu@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz#2a3661b56fe95a0cafae90be026fe0590d089298"
+  integrity sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==
+
+lightningcss-linux-arm64-musl@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz#d7ddd6b26959245e026bc1ad9eb6aa983aa90e6b"
+  integrity sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==
+
+lightningcss-linux-x64-gnu@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz#5a89814c8e63213a5965c3d166dff83c36152b1a"
+  integrity sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==
+
+lightningcss-linux-x64-musl@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz#808c2e91ce0bf5d0af0e867c6152e5378c049728"
+  integrity sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==
+
+lightningcss-win32-arm64-msvc@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz#ab4a8a8a2e6a82a4531e8bbb6bf0ff161ee6625a"
+  integrity sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==
+
+lightningcss-win32-x64-msvc@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz#f01f382c8e0a27e1c018b0bee316d210eac43b6e"
+  integrity sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==
+
+lightningcss@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.yarnpkg.com/lightningcss/-/lightningcss-1.30.2.tgz#4ade295f25d140f487d37256f4cd40dc607696d0"
+  integrity sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==
+  dependencies:
+    detect-libc "^2.0.3"
+  optionalDependencies:
+    lightningcss-android-arm64 "1.30.2"
+    lightningcss-darwin-arm64 "1.30.2"
+    lightningcss-darwin-x64 "1.30.2"
+    lightningcss-freebsd-x64 "1.30.2"
+    lightningcss-linux-arm-gnueabihf "1.30.2"
+    lightningcss-linux-arm64-gnu "1.30.2"
+    lightningcss-linux-arm64-musl "1.30.2"
+    lightningcss-linux-x64-gnu "1.30.2"
+    lightningcss-linux-x64-musl "1.30.2"
+    lightningcss-win32-arm64-msvc "1.30.2"
+    lightningcss-win32-x64-msvc "1.30.2"
+
+lucide-react@^0.562.0:
+  version "0.562.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.562.0.tgz#217796c2f57624f012b484ea7f08505067c90d51"
+  integrity sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==
+
+magic-string@^0.30.21:
+  version "0.30.21"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.21.tgz#56763ec09a0fa8091df27879fd94d19078c00d91"
+  integrity sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.5.5"
+
+motion-dom@^12.23.23:
+  version "12.23.23"
+  resolved "https://registry.yarnpkg.com/motion-dom/-/motion-dom-12.23.23.tgz#8f874333ea1a04ee3a89eb928f518b463d589e0e"
+  integrity sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==
+  dependencies:
+    motion-utils "^12.23.6"
+
+motion-utils@^12.23.6:
+  version "12.23.6"
+  resolved "https://registry.yarnpkg.com/motion-utils/-/motion-utils-12.23.6.tgz#fafef80b4ea85122dd0d6c599a0c63d72881f312"
+  integrity sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==
+
+motion@^12.23.26:
+  version "12.23.26"
+  resolved "https://registry.yarnpkg.com/motion/-/motion-12.23.26.tgz#7309d3f13df43795b774fa98821c6ee5d6fab4f1"
+  integrity sha512-Ll8XhVxY8LXMVYTCfme27WH2GjBrCIzY4+ndr5QKxsK+YwCtOi2B/oBi5jcIbik5doXuWT/4KKDOVAZJkeY5VQ==
+  dependencies:
+    framer-motion "^12.23.26"
+    tslib "^2.4.0"
+
+nanoid@^3.3.11, nanoid@^3.3.6:
+  version "3.3.11"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.11.tgz#4f4f112cefbe303202f2199838128936266d185b"
+  integrity sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==
+
+next@^15.5.7:
+  version "15.5.10"
+  resolved "https://registry.yarnpkg.com/next/-/next-15.5.10.tgz#5e3824d8f00dcd66ca4e79c38834f766976116bd"
+  integrity sha512-r0X65PNwyDDyOrWNKpQoZvOatw7BcsTPRKdwEqtc9cj3wv7mbBIk9tKed4klRaFXJdX0rugpuMTHslDrAU1bBg==
+  dependencies:
+    "@next/env" "15.5.10"
+    "@swc/helpers" "0.5.15"
+    caniuse-lite "^1.0.30001579"
+    postcss "8.4.31"
+    styled-jsx "5.1.6"
+  optionalDependencies:
+    "@next/swc-darwin-arm64" "15.5.7"
+    "@next/swc-darwin-x64" "15.5.7"
+    "@next/swc-linux-arm64-gnu" "15.5.7"
+    "@next/swc-linux-arm64-musl" "15.5.7"
+    "@next/swc-linux-x64-gnu" "15.5.7"
+    "@next/swc-linux-x64-musl" "15.5.7"
+    "@next/swc-win32-arm64-msvc" "15.5.7"
+    "@next/swc-win32-x64-msvc" "15.5.7"
+    sharp "^0.34.3"
+
+picocolors@^1.0.0, picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
+postcss@8.4.31:
+  version "8.4.31"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+postcss@^8.4.41:
+  version "8.5.6"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.6.tgz#2825006615a619b4f62a9e7426cc120b349a8f3c"
+  integrity sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==
+  dependencies:
+    nanoid "^3.3.11"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
+react-dom@^19.1.1:
+  version "19.2.3"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.2.3.tgz#f0b61d7e5c4a86773889fcc1853af3ed5f215b17"
+  integrity sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==
+  dependencies:
+    scheduler "^0.27.0"
+
+react@^19.1.1:
+  version "19.2.3"
+  resolved "https://registry.yarnpkg.com/react/-/react-19.2.3.tgz#d83e5e8e7a258cf6b4fe28640515f99b87cd19b8"
+  integrity sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==
+
+scheduler@^0.27.0:
+  version "0.27.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.27.0.tgz#0c4ef82d67d1e5c1e359e8fc76d3a87f045fe5bd"
+  integrity sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==
+
+semver@^7.7.3:
+  version "7.7.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.3.tgz#4b5f4143d007633a8dc671cd0a6ef9147b8bb946"
+  integrity sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==
+
+sharp@^0.34.3:
+  version "0.34.5"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.34.5.tgz#b6f148e4b8c61f1797bde11a9d1cfebbae2c57b0"
+  integrity sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==
+  dependencies:
+    "@img/colour" "^1.0.0"
+    detect-libc "^2.1.2"
+    semver "^7.7.3"
+  optionalDependencies:
+    "@img/sharp-darwin-arm64" "0.34.5"
+    "@img/sharp-darwin-x64" "0.34.5"
+    "@img/sharp-libvips-darwin-arm64" "1.2.4"
+    "@img/sharp-libvips-darwin-x64" "1.2.4"
+    "@img/sharp-libvips-linux-arm" "1.2.4"
+    "@img/sharp-libvips-linux-arm64" "1.2.4"
+    "@img/sharp-libvips-linux-ppc64" "1.2.4"
+    "@img/sharp-libvips-linux-riscv64" "1.2.4"
+    "@img/sharp-libvips-linux-s390x" "1.2.4"
+    "@img/sharp-libvips-linux-x64" "1.2.4"
+    "@img/sharp-libvips-linuxmusl-arm64" "1.2.4"
+    "@img/sharp-libvips-linuxmusl-x64" "1.2.4"
+    "@img/sharp-linux-arm" "0.34.5"
+    "@img/sharp-linux-arm64" "0.34.5"
+    "@img/sharp-linux-ppc64" "0.34.5"
+    "@img/sharp-linux-riscv64" "0.34.5"
+    "@img/sharp-linux-s390x" "0.34.5"
+    "@img/sharp-linux-x64" "0.34.5"
+    "@img/sharp-linuxmusl-arm64" "0.34.5"
+    "@img/sharp-linuxmusl-x64" "0.34.5"
+    "@img/sharp-wasm32" "0.34.5"
+    "@img/sharp-win32-arm64" "0.34.5"
+    "@img/sharp-win32-ia32" "0.34.5"
+    "@img/sharp-win32-x64" "0.34.5"
+
+sonner@^2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/sonner/-/sonner-2.0.7.tgz#810c1487a67ec3370126e0f400dfb9edddc3e4f6"
+  integrity sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==
+
+source-map-js@^1.0.2, source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
+styled-jsx@5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.6.tgz#83b90c077e6c6a80f7f5e8781d0f311b2fe41499"
+  integrity sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==
+  dependencies:
+    client-only "0.0.1"
+
+tailwind-merge@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-3.4.0.tgz#5a264e131a096879965f1175d11f8c36e6b64eca"
+  integrity sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==
+
+tailwindcss@4.1.18, tailwindcss@^4.1.18:
+  version "4.1.18"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-4.1.18.tgz#f488ba47853abdb5354daf9679d3e7791fc4f4e3"
+  integrity sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==
+
+tapable@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.3.0.tgz#7e3ea6d5ca31ba8e078b560f0d83ce9a14aa8be6"
+  integrity sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==
+
+tslib@2.8.1, tslib@^2.4.0, tslib@^2.8.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
+typescript@^4.9.3:
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
+  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+
+undici-types@~7.16.0:
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-7.16.0.tgz#ffccdff36aea4884cbfce9a750a0580224f58a46"
+  integrity sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==
+
+ws@^8.18.2:
+  version "8.19.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.19.0.tgz#ddc2bdfa5b9ad860204f5a72a4863a8895fd8c8b"
+  integrity sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==
+
+zod@^4.3.5:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-4.3.6.tgz#89c56e0aa7d2b05107d894412227087885ab112a"
+  integrity sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==