@snowcone-app/ui 0.1.42 → 0.2.0

package/src/ecommerce/stories/PDPLayout.stories.tsx

@@ -0,0 +1,365 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { Icon } from '@iconify/react';
+import { Product } from '../../patterns/Product';
+import { ProductOptions } from '../../composed/ProductOptions';
+import { AddToCart } from '../../composed/AddToCart';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from '../../primitives/accordion';
+import type { CatalogProduct } from '@snowcone-app/sdk';
+
+/**
+ * PDPLayout - Complete Product Detail Page Layout
+ *
+ * The actual PDP layout where:
+ * - Hero images are FULL WIDTH and stack vertically
+ * - Info panel OVERLAPS on the right side (fixed/sticky position)
+ * - Uses REAL ProductOptions and AddToCart components
+ *
+ * This matches the real next-ecommerce implementation.
+ */
+
+// Helper to generate all combinations for sizes and colors
+const sizes = ['XS', 'S', 'M', 'L', 'XL', '2XL'];
+const colors = ['Black', 'White', 'Navy', 'Heather Gray'];
+
+const generateCombinations = (sizeList: string[], colorList: string[], price: number) => {
+  const combinations: { price: number; variantId: string; Size: string; Color: string }[] = [];
+  for (const size of sizeList) {
+    for (const color of colorList) {
+      combinations.push({
+        price,
+        variantId: `${size.toLowerCase()}-${color.toLowerCase().replace(' ', '-')}`,
+        Size: size,
+        Color: color,
+      });
+    }
+  }
+  return combinations;
+};
+
+// Mock product data
+const mockProduct: CatalogProduct = {
+  id: 'classic-cotton-tshirt',
+  name: 'Classic Cotton T-Shirt',
+  slug: 'classic-cotton-tshirt',
+  price: 2999, // $29.99 in cents
+  options: {
+    attributes: {
+      Size: {
+        type: 'select',
+        affectsCombinations: true,
+        choices: sizes.map(label => ({ label })),
+      },
+      Color: {
+        type: 'swatch',
+        affectsCombinations: true,
+        choices: [
+          { label: 'Black', hex: '#1a1a1a' },
+          { label: 'White', hex: '#ffffff' },
+          { label: 'Navy', hex: '#1e3a5f' },
+          { label: 'Heather Gray', hex: '#9ca3af' },
+        ],
+      },
+    },
+    combinations: generateCombinations(sizes, colors, 2999),
+    attributesList: ['Size', 'Color'],
+  },
+  description: ['Premium quality with exceptional comfort and style.'],
+};
+
+const demoMockups = [
+  { id: 'front', label: 'Front' },
+  { id: 'back', label: 'Back' },
+  { id: 'detail', label: 'Detail' },
+];
+
+interface PDPLayoutProps {
+  product?: CatalogProduct;
+  tag?: string;
+  showArtworkCustomizer?: boolean;
+}
+
+const PDPLayout = ({
+  product = mockProduct,
+  tag = 'Upgraded',
+  showArtworkCustomizer = false,
+}: PDPLayoutProps) => {
+  const [isFavorite, setIsFavorite] = React.useState(false);
+
+  // Format price from cents
+  const formatPrice = (cents: number) => `$${(cents / 100).toFixed(2)}`;
+
+  return (
+    <Product productData={product} initialSelection={{ Size: 'M', Color: product.options?.attributes?.Color?.choices?.[0]?.label || 'Black' }}>
+      <div className="min-h-screen bg-background">
+        {/* Header */}
+        <header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-md border-b border-border">
+          <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <button className="p-2 hover:bg-muted rounded-lg">
+                <Icon icon="gravity-ui:bars" className="w-5 h-5" />
+              </button>
+              <span className="font-bold text-lg">Store</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <button className="p-2 hover:bg-muted rounded-lg">
+                <Icon icon="gravity-ui:magnifier" className="w-5 h-5" />
+              </button>
+              <button className="p-2 hover:bg-muted rounded-lg relative">
+                <Icon icon="gravity-ui:shopping-cart" className="w-5 h-5" />
+                <span className="absolute -top-0.5 -right-0.5 w-4 h-4 bg-primary text-primary-foreground text-xs rounded-full flex items-center justify-center">
+                  2
+                </span>
+              </button>
+            </div>
+          </div>
+        </header>
+
+        {/* Main Content - Images are full width, panel overlaps */}
+        <main className="pt-16 relative">
+          {/* Full-width Hero Images - content centered in visible area (left of panel) */}
+          <div className="w-full">
+            {demoMockups.map((mockup) => (
+              <div
+                key={mockup.id}
+                className="relative w-full"
+                style={{ height: '70vh' }}
+              >
+                {/* Placeholder - in real app this is HeroProductImage with object-fit: cover */}
+                <div className="w-full h-full bg-gradient-to-br from-muted to-muted/50 flex items-center justify-center">
+                  {/* Content offset to left to center in visible area (accounting for ~35% panel on right) */}
+                  <div
+                    className="text-center text-muted-foreground"
+                    style={{ marginRight: '30%' }} // Offset to center in visible area
+                  >
+                    <Icon
+                      icon="gravity-ui:t-shirt"
+                      className="w-32 h-32 mx-auto mb-4 opacity-20"
+                    />
+                    <p className="text-xl font-medium opacity-60">{mockup.label} View</p>
+                    <p className="text-sm opacity-40">Product mockup</p>
+                  </div>
+                </div>
+
+              </div>
+            ))}
+          </div>
+
+          {/* Overlapping Info Panel - fixed on right side */}
+          <div
+            className="hidden md:block fixed right-8 top-24 w-[30%] xl:w-[35%] max-w-96 z-10"
+            style={{ maxHeight: 'calc(100vh - 8rem)' }}
+          >
+            <div className="bg-background/85 backdrop-blur-sm rounded-3xl p-6 shadow-lg overflow-y-auto max-h-[calc(100vh-10rem)]">
+              <div className="flex flex-col gap-6">
+                {/* Tag, Product Name and Price */}
+                <div className="flex flex-col gap-3">
+                  {/* Tag */}
+                  {tag && (
+                    <span className="text-sm font-medium text-primary">{tag}</span>
+                  )}
+
+                  {/* Name and Price */}
+                  <div className="flex items-end justify-between gap-4">
+                    <h1 className="text-2xl font-bold text-foreground leading-tight">
+                      {product.name}
+                    </h1>
+                    <div className="flex items-baseline gap-2 shrink-0">
+                      <span className="text-lg font-semibold text-foreground">{formatPrice(product.price)}</span>
+                    </div>
+                  </div>
+
+                  {/* Rating and Favorite */}
+                  <div className="flex items-center justify-start gap-2">
+                    <button
+                      onClick={() => setIsFavorite(!isFavorite)}
+                      className="w-10 h-10 bg-foreground/5 rounded-full flex items-center justify-center hover:bg-foreground/10 transition-colors"
+                    >
+                      <Icon
+                        icon={isFavorite ? 'gravity-ui:heart-fill' : 'gravity-ui:heart'}
+                        className={`w-5 h-5 ${isFavorite ? 'text-red-500' : 'text-muted-foreground/60'}`}
+                      />
+                    </button>
+                    <div className="h-10 bg-foreground/5 rounded-full px-3 flex items-center gap-1 text-sm font-caption text-muted-foreground">
+                      <Icon icon="gravity-ui:star" className="w-4 h-4 text-muted-foreground" />
+                      <span className="font-medium">4.2</span>
+                      <span>(143)</span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Artwork Customizer Placeholder */}
+                {showArtworkCustomizer && (
+                  <div className="aspect-square bg-muted rounded-2xl flex items-center justify-center border-2 border-dashed border-border">
+                    <div className="text-center text-muted-foreground p-4">
+                      <Icon icon="gravity-ui:hand-pointer-fill" className="w-12 h-12 mx-auto mb-2 opacity-50" />
+                      <p className="text-sm font-medium">Artwork Customizer</p>
+                      <p className="text-xs opacity-70">Drag to position your design</p>
+                    </div>
+                  </div>
+                )}
+
+                {/* Product Options - REAL COMPONENT */}
+                <ProductOptions />
+
+                {/* Add to Cart - REAL COMPONENT */}
+                <AddToCart />
+
+                {/* Product Details Accordion */}
+                <Accordion type="single" collapsible className="w-full [&>*]:border-0">
+                  <AccordionItem value="description">
+                    <AccordionTrigger className="text-left text-base font-bold text-foreground hover:no-underline">
+                      Description
+                    </AccordionTrigger>
+                    <AccordionContent>
+                      <p className="text-sm text-muted-foreground leading-relaxed">
+                        Premium quality with exceptional comfort and style.
+                      </p>
+                    </AccordionContent>
+                  </AccordionItem>
+
+                  <AccordionItem value="materials">
+                    <AccordionTrigger className="text-left text-base font-bold text-foreground hover:no-underline">
+                      Materials
+                    </AccordionTrigger>
+                    <AccordionContent>
+                      <p className="text-sm text-muted-foreground leading-relaxed">
+                        100% organic cotton with sustainable manufacturing.
+                      </p>
+                    </AccordionContent>
+                  </AccordionItem>
+
+                  <AccordionItem value="shipping">
+                    <AccordionTrigger className="text-left text-base font-bold text-foreground hover:no-underline">
+                      Shipping & Returns
+                    </AccordionTrigger>
+                    <AccordionContent>
+                      <p className="text-sm text-muted-foreground leading-relaxed">
+                        Free shipping on orders over $50. 30-day returns.
+                      </p>
+                    </AccordionContent>
+                  </AccordionItem>
+                </Accordion>
+              </div>
+            </div>
+          </div>
+
+          {/* Below the fold content */}
+          <section className="border-t border-border py-16 px-8 bg-background">
+            <div className="max-w-4xl mx-auto text-center">
+              <h2 className="text-3xl font-bold mb-4">Crafted with Precision</h2>
+              <p className="text-muted-foreground text-lg mb-8">
+                Every detail matters. Our products are designed with care.
+              </p>
+
+              <div className="grid grid-cols-3 gap-8">
+                <div className="text-center">
+                  <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
+                    <Icon icon="gravity-ui:shield-check" className="w-8 h-8 text-primary" />
+                  </div>
+                  <h3 className="font-semibold mb-2">Quality Guaranteed</h3>
+                  <p className="text-sm text-muted-foreground">Premium materials</p>
+                </div>
+                <div className="text-center">
+                  <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
+                    <Icon icon="gravity-ui:leaf" className="w-8 h-8 text-primary" />
+                  </div>
+                  <h3 className="font-semibold mb-2">Eco-Friendly</h3>
+                  <p className="text-sm text-muted-foreground">Sustainable</p>
+                </div>
+                <div className="text-center">
+                  <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
+                    <Icon icon="gravity-ui:rocket" className="w-8 h-8 text-primary" />
+                  </div>
+                  <h3 className="font-semibold mb-2">Fast Shipping</h3>
+                  <p className="text-sm text-muted-foreground">Quick delivery</p>
+                </div>
+              </div>
+            </div>
+          </section>
+        </main>
+      </div>
+    </Product>
+  );
+};
+
+const meta: Meta<typeof PDPLayout> = {
+  title: 'Layouts/PDP Layout',
+  component: PDPLayout,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+# PDP Layout
+
+The complete Product Detail Page layout using **real components** with Product context.
+
+**Images are full-width** and the **info panel overlaps** on the right.
+
+## Layout Structure
+
+\`\`\`
+┌─────────────────────────────────────────────────┐
+│  Header (fixed)                                 │
+├─────────────────────────────────────────────────┤
+│                                    ┌───────────┐│
+│  Full-width Hero Images            │ Info Panel││
+│  (70vh each, stacked)              │ (fixed,   ││
+│                                    │ overlaps) ││
+│  ┌─────────────────────────────┐   │           ││
+│  │      Front Mockup           │   │ • Name    ││
+│  └─────────────────────────────┘   │ • Price   ││
+│  ┌─────────────────────────────┐   │ • Options ││
+│  │      Back Mockup            │   │ • Add     ││
+│  └─────────────────────────────┘   │           ││
+│  ┌─────────────────────────────┐   └───────────┘│
+│  │      Detail Mockup          │                │
+│  └─────────────────────────────┘                │
+├─────────────────────────────────────────────────┤
+│  Additional Content (reviews, etc)              │
+└─────────────────────────────────────────────────┘
+\`\`\`
+
+## Key Points
+
+- **Images are full-width** - they span the entire viewport
+- **Image content is centered left** - centered in the visible area (left of panel), so right portion is cropped/hidden
+- **Panel overlaps** - positioned fixed on the right, on top of images
+- **Glassmorphism** - panel has backdrop blur so images show through
+- **Sticky behavior** - panel stays visible while scrolling through images
+- **Real components** - uses actual ProductOptions and AddToCart with context
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    tag: {
+      control: 'text',
+      description: 'Product tag/badge (e.g., "Upgraded", "New", "Sale")',
+    },
+    showArtworkCustomizer: {
+      control: 'boolean',
+      description: 'Show artwork customizer for POD products',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithArtworkCustomizer: Story = {
+  args: {
+    showArtworkCustomizer: true,
+  },
+};

package/src/hooks/useBrand.ts

@@ -0,0 +1,41 @@
+"use client";
+
+import { useMemo } from "react";
+import {
+  getBrand,
+  brandAssets,
+  type SupportedLanguage,
+  type BrandLocale,
+  type BrandAssets,
+} from "../lib/locale";
+
+export interface UseBrandResult {
+  /** Brand data for the requested locale. */
+  brand: BrandLocale;
+  /** Global brand assets (icon, colors). */
+  assets: BrandAssets;
+}
+
+/**
+ * React hook for accessing brand data. Throws if the locale is not in brand.json.
+ *
+ * @example
+ * ```tsx
+ * function Header() {
+ *   const { brand, assets } = useBrand("en");
+ *   return (
+ *     <header>
+ *       <img src={assets.icon_svg} alt="" />
+ *       <h1 translate="no" lang={brand.lang}>{brand.localized_name}</h1>
+ *       <p>{brand.tagline}</p>
+ *     </header>
+ *   );
+ * }
+ * ```
+ */
+export function useBrand(language: SupportedLanguage = "en"): UseBrandResult {
+  return useMemo(
+    () => ({ brand: getBrand(language), assets: brandAssets }),
+    [language]
+  );
+}

package/src/hooks/useCanvasContext.ts

@@ -0,0 +1,127 @@
+"use client";
+
+import { useRef, useEffect, useMemo, useState } from 'react';
+import { useProductOptional, type Artwork } from '../patterns/Product';
+import { useRealtimeOptional } from '../patterns/RealtimeProvider';
+
+/**
+ * useCanvasContext - Non-reactive context access for canvas components
+ *
+ * This hook provides ref-based access to ProductContext and RealtimeContext values
+ * that are needed during canvas drag operations. Components using this hook will NOT
+ * re-render when context changes - they always have access to the latest values via refs.
+ *
+ * **Why this exists:**
+ * During canvas drag operations, any React re-render causes lag. The standard
+ * `useProductOptional()` hook subscribes to the entire context, which means
+ * components re-render whenever any context value changes (including mockupResults).
+ *
+ * This hook solves that by:
+ * 1. Subscribing to context once on mount
+ * 2. Keeping refs updated with latest values (ref updates don't trigger re-renders)
+ * 3. Returning a stable object that never changes reference
+ *
+ * **Usage:**
+ * ```tsx
+ * const { sendCanvasBlobRef, isRealtimeEnabledRef, mockupCountRef } = useCanvasContext();
+ *
+ * const handleExport = useCallback(async (exports) => {
+ *   if (isRealtimeEnabledRef.current && sendCanvasBlobRef.current) {
+ *     sendCanvasBlobRef.current(placement, blob, mockupCountRef.current, 500);
+ *   }
+ * }, []); // Empty deps - callback never recreated
+ * ```
+ *
+ * **IMPORTANT:** This hook still subscribes to context (can't avoid that with React Context).
+ * To prevent re-renders, the PARENT component using this hook should be wrapped in React.memo
+ * with a custom comparison function that ignores context-driven prop changes.
+ *
+ * For truly zero re-renders, pass required values as props from a parent that does subscribe,
+ * and DON'T call useCanvasContext or useProductOptional in the canvas component itself.
+ *
+ * @returns Object containing refs to context values - object reference is stable
+ */
+export function useCanvasContext() {
+  const context = useProductOptional();
+  const realtimeContext = useRealtimeOptional();
+
+  // Store context values in refs - ref updates don't trigger re-renders
+  const sendCanvasBlobRef = useRef(realtimeContext?.sendCanvasBlob);
+  const isRealtimeEnabledRef = useRef(realtimeContext?.isEnabled ?? false);
+  const isConfiguredRef = useRef(realtimeContext?.isConfigured ?? false);
+  const mockupCountRef = useRef(context?.product?.mockups?.length ?? 1);
+  const selectedPlacementRef = useRef(context?.selectedPlacement);
+  const enableRealtimeRef = useRef(realtimeContext?.enableRealtime);
+  const selectedArtworkRef = useRef<Artwork | undefined>(context?.selectedArtwork);
+
+  // Keep refs current after every render (this effect has no deps, runs after every render)
+  // Ref updates don't cause re-renders, so this is safe
+  useEffect(() => {
+    sendCanvasBlobRef.current = realtimeContext?.sendCanvasBlob;
+    isRealtimeEnabledRef.current = realtimeContext?.isEnabled ?? false;
+    isConfiguredRef.current = realtimeContext?.isConfigured ?? false;
+    mockupCountRef.current = context?.product?.mockups?.length ?? 1;
+    selectedPlacementRef.current = context?.selectedPlacement;
+    enableRealtimeRef.current = realtimeContext?.enableRealtime;
+    selectedArtworkRef.current = context?.selectedArtwork;
+  });
+
+  // Return stable object that never changes reference (empty deps)
+  return useMemo(() => ({
+    /** Ref to sendCanvasBlob function - call via sendCanvasBlobRef.current?.(...) */
+    sendCanvasBlobRef,
+    /** Ref to isRealtimeEnabled boolean */
+    isRealtimeEnabledRef,
+    /** Ref to isConfigured boolean */
+    isConfiguredRef,
+    /** Ref to mockup count number */
+    mockupCountRef,
+    /** Ref to selected placement string */
+    selectedPlacementRef,
+    /** Ref to enableRealtime function */
+    enableRealtimeRef,
+    /** Ref to selected artwork */
+    selectedArtworkRef,
+
+    /**
+     * Debug helper - logs current ref values
+     * Only use for debugging, not in production code
+     */
+    __debug: () => ({
+      isRealtimeEnabled: isRealtimeEnabledRef.current,
+      isConfigured: isConfiguredRef.current,
+      mockupCount: mockupCountRef.current,
+      selectedPlacement: selectedPlacementRef.current,
+      hasSendCanvasBlob: !!sendCanvasBlobRef.current,
+      hasEnableRealtime: !!enableRealtimeRef.current,
+      selectedArtworkSrc: selectedArtworkRef.current?.src,
+    }),
+  }), []);
+}
+
+/**
+ * useCanvasContextStatic - Truly non-reactive context access
+ *
+ * This hook captures context values ONCE on mount and never updates.
+ * Use this when you need initial values but never want to re-render.
+ *
+ * **Warning:** Values will be stale if context changes after mount!
+ * Only use for values that don't change during the component's lifetime.
+ */
+export function useCanvasContextStatic() {
+  const context = useProductOptional();
+  const realtimeContext = useRealtimeOptional();
+
+  // Capture values once on mount using lazy initialization
+  const [staticValues] = useState(() => ({
+    sendCanvasBlob: realtimeContext?.sendCanvasBlob,
+    isRealtimeEnabled: realtimeContext?.isEnabled ?? false,
+    isConfigured: realtimeContext?.isConfigured ?? false,
+    mockupCount: context?.product?.mockups?.length ?? 1,
+    selectedPlacement: context?.selectedPlacement,
+    enableRealtime: realtimeContext?.enableRealtime,
+    selectedArtwork: context?.selectedArtwork,
+  }));
+
+  return staticValues;
+}

package/src/hooks/useDeviceDetection.ts

@@ -0,0 +1,64 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+export interface DeviceDetectionResult {
+  /** Whether the device supports touch input */
+  isTouchDevice: boolean;
+  /** Whether the browser is Safari (not Chrome/Firefox on iOS) */
+  isSafari: boolean;
+  /** Safari on non-touch devices (macOS). Use for desktop-only Safari workarounds like mask repaint. */
+  isDesktopSafari: boolean;
+}
+
+/**
+ * Hook to detect device capabilities: touch support and Safari browser.
+ *
+ * These capabilities are detected once on mount and don't change during
+ * the session, so no resize listener is needed.
+ *
+ * @returns Object with isTouchDevice and isSafari booleans
+ *
+ * @example
+ * ```tsx
+ * const { isTouchDevice, isSafari } = useDeviceDetection();
+ *
+ * // Use for Safari-specific workarounds (e.g., edge swipe prevention)
+ * if (isSafari && isTouchDevice) {
+ *   // Apply iOS Safari workarounds
+ * }
+ * ```
+ */
+export function useDeviceDetection(): DeviceDetectionResult {
+  const [isTouchDevice, setIsTouchDevice] = useState(false);
+  const [isSafari, setIsSafari] = useState(false);
+
+  useEffect(() => {
+    // These only need to run ONCE on mount - they don't change during the session
+    const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+    setIsTouchDevice(hasTouch);
+
+    // Safari detection - detect actual Safari browsers (not Chrome on iOS/iPad)
+    const userAgent = navigator.userAgent;
+    const isSafariBrowser =
+      // Safari on macOS/iOS that's not Chrome
+      (userAgent.includes("Safari") &&
+        userAgent.includes("Version") &&
+        !userAgent.includes("Chrome") &&
+        !userAgent.includes("CriOS") && // Chrome on iOS
+        !userAgent.includes("FxiOS") && // Firefox on iOS
+        !userAgent.includes("EdgiOS")) || // Edge on iOS
+      // Additional check for Safari without Version string
+      (/Safari/.test(userAgent) &&
+        !/Chrome|CriOS|FxiOS|EdgiOS/.test(userAgent));
+    setIsSafari(isSafariBrowser);
+
+    // NO RESIZE LISTENER - device capabilities don't change on resize
+  }, []);
+
+  // Desktop Safari = Safari on non-touch device (macOS)
+  // Used for workarounds that should NOT apply to iPad/iPhone (e.g., mask repaint on window resize)
+  const isDesktopSafari = isSafari && !isTouchDevice;
+
+  return { isTouchDevice, isSafari, isDesktopSafari };
+}

package/src/hooks/useFocusTrap.ts

@@ -0,0 +1,70 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+/**
+ * Hook to trap focus within a container element (for modals, drawers, etc.)
+ * Returns focus to the trigger element when the trap is deactivated
+ */
+export function useFocusTrap(isActive: boolean, onClose?: () => void) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const previousActiveElement = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!isActive) return;
+
+    // Store the element that was focused before the trap activated
+    previousActiveElement.current = document.activeElement as HTMLElement;
+
+    const container = containerRef.current;
+    if (!container) return;
+
+    // Focus the first focusable element in the container
+    const focusableElements = container.querySelectorAll<HTMLElement>(
+      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    );
+
+    if (focusableElements.length > 0) {
+      focusableElements[0].focus();
+    }
+
+    // Handle Tab and Shift+Tab to trap focus
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== "Tab") return;
+
+      const focusableElements = container.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
+
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+
+      if (e.shiftKey) {
+        // Shift + Tab
+        if (document.activeElement === firstElement) {
+          e.preventDefault();
+          lastElement?.focus();
+        }
+      } else {
+        // Tab
+        if (document.activeElement === lastElement) {
+          e.preventDefault();
+          firstElement?.focus();
+        }
+      }
+    };
+
+    container.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      container.removeEventListener("keydown", handleKeyDown);
+
+      // Return focus to the previously focused element
+      if (previousActiveElement.current) {
+        previousActiveElement.current.focus();
+      }
+    };
+  }, [isActive]);
+
+  return containerRef;
+}