@getmicdrop/svelte-components 5.1.2 → 5.2.1

package/dist/calendar/Calendar/MiniMonthCalendar.svelte

@@ -1,848 +1,781 @@
-<script>
-  /**
-   * MiniMonthCalendar - A pure Svelte mini-month calendar component
-   *
-   * Supports variants:
-   * - 'availability': For performer availability selection (click to toggle dates)
-   * - 'display': Read-only display of events/dates
-   * - 'public': Public-facing calendar with event cards
-   *
-   * Features:
-   * - Smooth swipe gestures with momentum
-   * - Direction-aware shadows during swipe
-   * - Previous/next month preview days
-   * - Full accessibility support
-   * - Reduced motion support
-   * - Apple Calendar-style minimal grid on mobile
-   */
-  import { createEventDispatcher, onMount } from 'svelte';
-  import { ChevronLeftOutline, ChevronRightOutline, CheckCircleSolid } from '../../primitives/Icons';
-  import Spinner from '../../primitives/Spinner/Spinner.svelte';
-
-  // Props
-  export let variant = 'availability'; // 'availability' | 'display' | 'public'
-  export let selectedDates = []; // Array of date strings like "2025-03-22"
-  export let events = []; // Array of event objects for display/public variants
-  export let saveStatus = ''; // 'saving' | 'saved' | ''
-  export let showLegend = true;
-  export let showNavigation = true;
-  export let showTodayButton = true;
-  export let readOnly = false;
-  export let showPartialPreview = true; // Show prev/next month days to fill grid
-  export let disablePastNavigation = false; // Prevent navigating to past months
-
-  const dispatch = createEventDispatcher();
-
-  // State
-  let currentDate = new Date();
-  let currentYear = currentDate.getFullYear();
-  let currentMonth = currentDate.getMonth();
-
-  // Swipe gesture support
-  let touchStartX = 0;
-  let touchStartY = 0;
-  let touchStartTime = 0;
-  let lastTouchX = 0;
-  let lastTouchTime = 0;
-  let velocityX = 0;
-  let isSwiping = false;
-  let isAnimating = false;
-  let swipeOffset = 0;
-  let calendarGridElement;
-  let monthDisplayEl;
-  let prefersReducedMotion = false;
-
-  // Button pressed states for touch feedback
-  let prevPressed = false;
-  let nextPressed = false;
-  let todayPressed = false;
-
-  // Momentum animation
-  let momentumAnimationId = null;
-  const MOMENTUM_FRICTION = 0.92;
-  const MOMENTUM_MIN_VELOCITY = 0.05;
-
-  // Thresholds
-  const SWIPE_THRESHOLD = 0.15;
-  const VELOCITY_THRESHOLD = 0.3;
-  const DRAG_RESISTANCE = 0.8;
-
-  // Month names
-  const MONTH_NAMES = [
-    "January", "February", "March", "April", "May", "June",
-    "July", "August", "September", "October", "November", "December"
-  ];
-
-  const DAY_NAMES = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-  const DAY_LETTERS = ["S", "M", "T", "W", "T", "F", "S"];
-
-  // Today's date (local time)
-  const today = new Date();
-  const todayLocal = new Date(today.getFullYear(), today.getMonth(), today.getDate());
-  const todayLocalMonth = today.getMonth();
-  const todayLocalYear = today.getFullYear();
-
-  // Reactive: Check if at current month
-  $: isAtCurrentMonth = currentYear === todayLocalYear && currentMonth === todayLocalMonth;
-  $: canGoPrev = !disablePastNavigation || !isAtCurrentMonth;
-
-  // Check for reduced motion preference
-  onMount(() => {
-    if (typeof window !== 'undefined') {
-      const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
-      prefersReducedMotion = mediaQuery.matches;
-      mediaQuery.addEventListener('change', (e) => {
-        prefersReducedMotion = e.matches;
-      });
-    }
-  });
-
-  // Normalize date to YYYY-MM-DD string
-  function normalizeDate(date) {
-    const d = new Date(date);
-    const year = d.getFullYear();
-    const month = String(d.getMonth() + 1).padStart(2, '0');
-    const day = String(d.getDate()).padStart(2, '0');
-    return `${year}-${month}-${day}`;
-  }
-
-  // Get days in month
-  function getDaysInMonth(year, month) {
-    return new Date(year, month + 1, 0).getDate();
-  }
-
-  // Check if date is today
-  function isToday(year, month, day) {
-    return (
-      year === todayLocal.getFullYear() &&
-      month === todayLocal.getMonth() &&
-      day === todayLocal.getDate()
-    );
-  }
-
-  // Check if date is in the past
-  function isPastDate(year, month, day) {
-    const checkDate = new Date(year, month, day);
-    return checkDate < todayLocal;
-  }
-
-  // Check if date is selected
-  function isSelectedDate(dateStr) {
-    return selectedDates.includes(dateStr);
-  }
-
-  // Check if date has events (for display/public variants)
-  function hasEventsOnDate(dateStr) {
-    return events.some(event => event.date === dateStr);
-  }
-
-  // Get events for a specific date
-  function getEventsForDate(dateStr) {
-    return events.filter(event => event.date === dateStr);
-  }
-
-  // Build calendar days array - reacts to selectedDates changes
-  $: daysInMonth = (() => {
-    // Reference selectedDates to ensure reactivity
-    const _ = selectedDates;
-    const days = getDaysInMonth(currentYear, currentMonth);
-    const firstDayOfWeek = new Date(currentYear, currentMonth, 1).getDay();
-    const result = [];
-
-    for (let i = 1; i <= days; i++) {
-      const dateStr = normalizeDate(new Date(currentYear, currentMonth, i));
-      result.push({
-        day: i,
-        dateStr,
-        startDay: firstDayOfWeek + i - 1,
-        isPast: isPastDate(currentYear, currentMonth, i),
-        isToday: isToday(currentYear, currentMonth, i),
-        isSelected: selectedDates.includes(dateStr),
-        hasEvents: hasEventsOnDate(dateStr),
-        events: getEventsForDate(dateStr)
-      });
-    }
-    return result;
-  })();
-
-  // Previous month preview days
-  $: prevMonthPreviewDays = (() => {
-    if (!showPartialPreview) return [];
-    const firstDayOfWeek = new Date(currentYear, currentMonth, 1).getDay();
-    if (firstDayOfWeek === 0) return [];
-
-    const prevMonth = currentMonth === 0 ? 11 : currentMonth - 1;
-    const prevYear = currentMonth === 0 ? currentYear - 1 : currentYear;
-    const daysInPrevMonth = getDaysInMonth(prevYear, prevMonth);
-
-    return Array.from({ length: firstDayOfWeek }, (_, i) => ({
-      day: daysInPrevMonth - firstDayOfWeek + i + 1,
-      month: prevMonth,
-      year: prevYear
-    }));
-  })();
-
-  // Next month preview days
-  $: nextMonthPreviewDays = (() => {
-    if (!showPartialPreview) return [];
-    const days = getDaysInMonth(currentYear, currentMonth);
-    const lastDayOfWeek = new Date(currentYear, currentMonth, days).getDay();
-    if (lastDayOfWeek === 6) return [];
-
-    const daysToShow = 6 - lastDayOfWeek;
-    const nextMonth = currentMonth === 11 ? 0 : currentMonth + 1;
-    const nextYear = currentMonth === 11 ? currentYear + 1 : currentYear;
-
-    return Array.from({ length: daysToShow }, (_, i) => ({
-      day: i + 1,
-      month: nextMonth,
-      year: nextYear
-    }));
-  })();
-
-  // Haptic feedback
-  function triggerHaptic(style = 'light') {
-    if (typeof window === 'undefined') return;
-
-    if (window.webkit?.messageHandlers?.haptic) {
-      window.webkit.messageHandlers.haptic.postMessage(style);
-      return;
-    }
-
-    if (window.TapticEngine) {
-      window.TapticEngine.impact({ style });
-      return;
-    }
-
-    if (navigator.vibrate) {
-      navigator.vibrate(style === 'light' ? 10 : 20);
-    }
-  }
-
-  // Handle day tap (touchend) for mobile - bypasses click delay
-  function handleDayTap(e, day) {
-    // Only process if it was a tap, not a swipe
-    if (isSwiping) return;
-    if (readOnly) return;
-    if (variant === 'availability' && day.isPast) return;
-
-    // Process immediately on touchend
-    if (variant === 'availability') {
-      const isSelected = selectedDates.includes(day.dateStr);
-
-      if (isSelected) {
-        triggerHaptic('medium');
-        dispatch('dateSelect', { date: day.dateStr, selected: false });
-      } else {
-        triggerHaptic('light');
-        dispatch('dateSelect', { date: day.dateStr, selected: true });
-      }
-    } else if (variant === 'display' || variant === 'public') {
-      if (day.hasEvents) {
-        triggerHaptic('light');
-        dispatch('dayClick', { date: day.dateStr, events: day.events });
-      }
-    }
-  }
-
-  // Handle day click (for desktop/keyboard)
-  function handleDayClick(day) {
-    // Don't trigger click if we were dragging/swiping
-    if (isDragging || isSwiping) return;
-    if (readOnly) return;
-    if (variant === 'availability' && day.isPast) return;
-
-    if (variant === 'availability') {
-      const isSelected = selectedDates.includes(day.dateStr);
-
-      if (isSelected) {
-        triggerHaptic('medium');
-        dispatch('dateSelect', { date: day.dateStr, selected: false });
-      } else {
-        triggerHaptic('light');
-        dispatch('dateSelect', { date: day.dateStr, selected: true });
-      }
-    } else if (variant === 'display' || variant === 'public') {
-      if (day.hasEvents) {
-        triggerHaptic('light');
-        dispatch('dayClick', { date: day.dateStr, events: day.events });
-      }
-    }
-  }
-
-  // Navigation
-  function goToPrevMonth() {
-    if (isAnimating || !canGoPrev) return;
-    triggerHaptic('light');
-    animateMonthChange(-1);
-  }
-
-  function goToNextMonth() {
-    if (isAnimating) return;
-    triggerHaptic('light');
-    animateMonthChange(1);
-  }
-
-  function goToToday() {
-    if (isAnimating || isAtCurrentMonth) return;
-
-    const todayYM = today.getFullYear() * 12 + today.getMonth();
-    const currentYM = currentYear * 12 + currentMonth;
-
-    const direction = todayYM > currentYM ? 1 : -1;
-    triggerHaptic('light');
-    animateMonthChange(direction, () => {
-      currentYear = today.getFullYear();
-      currentMonth = today.getMonth();
-    });
-  }
-
-  // Month change with animation
-  function animateMonthChange(direction, customAction = null) {
-    if (isAnimating || !calendarGridElement) return;
-
-    if (prefersReducedMotion) {
-      if (customAction) {
-        customAction();
-      } else if (direction > 0) {
-        if (currentMonth === 11) {
-          currentMonth = 0;
-          currentYear++;
-        } else {
-          currentMonth++;
-        }
-      } else {
-        if (currentMonth === 0) {
-          currentMonth = 11;
-          currentYear--;
-        } else {
-          currentMonth--;
-        }
-      }
-      triggerHaptic('medium');
-      dispatch('monthChange', { year: currentYear, month: currentMonth });
-      return;
-    }
-
-    isAnimating = true;
-    const containerWidth = calendarGridElement.offsetWidth || 320;
-
-    // Clone current calendar
-    const clone = calendarGridElement.cloneNode(true);
-    clone.classList.add('calendar-clone');
-    clone.style.position = 'absolute';
-    clone.style.top = '0';
-    clone.style.left = '0';
-    clone.style.width = '100%';
-    clone.style.transform = swipeOffset ? `translateX(${swipeOffset}px)` : 'translateX(0)';
-    clone.style.transition = 'none';
-    clone.style.pointerEvents = 'none';
-    clone.style.zIndex = '1';
-
-    const slideContainer = calendarGridElement.parentElement;
-    slideContainer.style.position = 'relative';
-    slideContainer.style.overflow = 'hidden';
-    slideContainer.insertBefore(clone, calendarGridElement);
-
-    // Change month
-    if (customAction) {
-      customAction();
-    } else if (direction > 0) {
-      if (currentMonth === 11) {
-        currentMonth = 0;
-        currentYear++;
-      } else {
-        currentMonth++;
-      }
-    } else {
-      if (currentMonth === 0) {
-        currentMonth = 11;
-        currentYear--;
-      } else {
-        currentMonth--;
-      }
-    }
-
-    triggerHaptic('medium');
-    dispatch('monthChange', { year: currentYear, month: currentMonth });
-
-    // Position new calendar off-screen
-    const enterFrom = direction > 0 ? containerWidth : -containerWidth;
-    calendarGridElement.style.transition = 'none';
-    calendarGridElement.style.transform = `translateX(${enterFrom}px)`;
-    calendarGridElement.offsetHeight; // Force reflow
-
-    // Animate
-    const duration = 0.3;
-    const easing = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
-
-    clone.style.transition = `transform ${duration}s ${easing}`;
-    clone.style.transform = `translateX(${direction > 0 ? -containerWidth : containerWidth}px)`;
-
-    calendarGridElement.style.transition = `transform ${duration}s ${easing}`;
-    calendarGridElement.style.transform = 'translateX(0)';
-
-    // Animate header
-    if (monthDisplayEl) {
-      monthDisplayEl.style.transition = 'none';
-      monthDisplayEl.style.transform = `translateX(${enterFrom * 0.3}px)`;
-      monthDisplayEl.style.opacity = '0';
-      monthDisplayEl.offsetHeight;
-      monthDisplayEl.style.transition = `transform ${duration}s ${easing}, opacity ${duration}s ${easing}`;
-      monthDisplayEl.style.transform = 'translateX(0)';
-      monthDisplayEl.style.opacity = '1';
-    }
-
-    // Cleanup
-    setTimeout(() => {
-      if (clone.parentElement) clone.remove();
-      if (calendarGridElement) {
-        calendarGridElement.style.transition = '';
-        calendarGridElement.style.transform = '';
-      }
-      if (monthDisplayEl) {
-        monthDisplayEl.style.transition = '';
-        monthDisplayEl.style.transform = '';
-        monthDisplayEl.style.opacity = '';
-      }
-      isAnimating = false;
-      swipeOffset = 0;
-    }, duration * 1000 + 50);
-  }
-
-  // Mouse state for desktop dragging
-  let isDragging = false;
-
-  // Touch handlers
-  function handleTouchStart(e) {
-    if (isAnimating) return;
-
-    touchStartX = e.touches[0].clientX;
-    touchStartY = e.touches[0].clientY;
-    touchStartTime = Date.now();
-    lastTouchX = touchStartX;
-    lastTouchTime = touchStartTime;
-    velocityX = 0;
-    isSwiping = false;
-    isDragging = false;  // Reset drag state on new touch
-    swipeOffset = 0;
-  }
-
-  function handleTouchMove(e) {
-    if (!touchStartX || isAnimating) return;
-
-    const touchCurrentX = e.touches[0].clientX;
-    const touchCurrentY = e.touches[0].clientY;
-    const diffX = touchStartX - touchCurrentX;
-    const diffY = touchStartY - touchCurrentY;
-    const now = Date.now();
-
-    if (!isSwiping && Math.abs(diffX) > 10) {
-      if (Math.abs(diffX) > Math.abs(diffY)) {
-        isSwiping = true;
-      } else {
-        touchStartX = 0;
-        return;
-      }
-    }
-
-    if (isSwiping) {
-      e.preventDefault();
-
-      const dt = now - lastTouchTime;
-      if (dt > 0) {
-        velocityX = (lastTouchX - touchCurrentX) / dt;
-      }
-      lastTouchX = touchCurrentX;
-      lastTouchTime = now;
-
-      swipeOffset = -diffX * DRAG_RESISTANCE;
-
-      if (calendarGridElement) {
-        calendarGridElement.style.transform = `translateX(${swipeOffset}px)`;
-        calendarGridElement.style.transition = 'none';
-
-        // Direction-aware shadow
-        const shadowIntensity = Math.min(Math.abs(swipeOffset) / 80, 0.4);
-        const blurRadius = 12 + shadowIntensity * 24;
-        const spreadRadius = shadowIntensity * 4;
-
-        if (diffX > 0) {
-          calendarGridElement.style.boxShadow = `-${spreadRadius}px 0 ${blurRadius}px rgba(0,0,0,${shadowIntensity})`;
-        } else {
-          calendarGridElement.style.boxShadow = `${spreadRadius}px 0 ${blurRadius}px rgba(0,0,0,${shadowIntensity})`;
-        }
-      }
-    }
-  }
-
-  function handleTouchEnd() {
-    if (!touchStartX || !isSwiping || isAnimating) {
-      touchStartX = 0;
-      touchStartY = 0;
-      isSwiping = false;
-      return;
-    }
-
-    const containerWidth = calendarGridElement?.offsetWidth || 320;
-    const swipePercent = Math.abs(swipeOffset) / containerWidth;
-    const shouldChange = swipePercent > SWIPE_THRESHOLD || Math.abs(velocityX) > VELOCITY_THRESHOLD;
-    const direction = swipeOffset > 0 ? -1 : 1;
-
-    if (calendarGridElement) {
-      calendarGridElement.style.boxShadow = '';
-    }
-
-    if (shouldChange) {
-      animateMonthChange(direction);
-    } else {
-      // Snap back
-      if (calendarGridElement) {
-        calendarGridElement.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
-        calendarGridElement.style.transform = 'translateX(0)';
-
-        setTimeout(() => {
-          if (calendarGridElement) {
-            calendarGridElement.style.transition = '';
-            calendarGridElement.style.transform = '';
-          }
-        }, 300);
-      }
-    }
-
-    touchStartX = 0;
-    touchStartY = 0;
-    isSwiping = false;
-    swipeOffset = 0;
-    velocityX = 0;
-  }
-
-  // Mouse handlers for desktop swiping
-  function handleMouseDown(e) {
-    if (isAnimating || e.button !== 0) return; // Only left click
-
-    isDragging = false; // Will be set to true on move
-    touchStartX = e.clientX;
-    touchStartY = e.clientY;
-    touchStartTime = Date.now();
-    lastTouchX = touchStartX;
-    lastTouchTime = touchStartTime;
-    velocityX = 0;
-    isSwiping = false;
-    swipeOffset = 0;
-
-    // Prevent text selection
-    e.preventDefault();
-  }
-
-  function handleMouseMove(e) {
-    if (!touchStartX || isAnimating) return;
-
-    const mouseCurrentX = e.clientX;
-    const mouseCurrentY = e.clientY;
-    const diffX = touchStartX - mouseCurrentX;
-    const diffY = touchStartY - mouseCurrentY;
-    const now = Date.now();
-
-    // Detect drag (prevent accidental clicks)
-    if (!isDragging && Math.abs(diffX) > 5) {
-      isDragging = true;
-    }
-
-    if (!isSwiping && Math.abs(diffX) > 10) {
-      if (Math.abs(diffX) > Math.abs(diffY)) {
-        isSwiping = true;
-      } else {
-        touchStartX = 0;
-        return;
-      }
-    }
-
-    if (isSwiping) {
-      const dt = now - lastTouchTime;
-      if (dt > 0) {
-        velocityX = (lastTouchX - mouseCurrentX) / dt;
-      }
-      lastTouchX = mouseCurrentX;
-      lastTouchTime = now;
-
-      swipeOffset = -diffX * DRAG_RESISTANCE;
-
-      if (calendarGridElement) {
-        calendarGridElement.style.transform = `translateX(${swipeOffset}px)`;
-        calendarGridElement.style.transition = 'none';
-
-        // Direction-aware shadow
-        const shadowIntensity = Math.min(Math.abs(swipeOffset) / 80, 0.4);
-        const blurRadius = 12 + shadowIntensity * 24;
-        const spreadRadius = shadowIntensity * 4;
-
-        if (diffX > 0) {
-          calendarGridElement.style.boxShadow = `-${spreadRadius}px 0 ${blurRadius}px rgba(0,0,0,${shadowIntensity})`;
-        } else {
-          calendarGridElement.style.boxShadow = `${spreadRadius}px 0 ${blurRadius}px rgba(0,0,0,${shadowIntensity})`;
-        }
-      }
-    }
-  }
-
-  function handleMouseUp() {
-    if (!touchStartX || isAnimating) {
-      touchStartX = 0;
-      touchStartY = 0;
-      isDragging = false;
-      return;
-    }
-
-    if (!isSwiping) {
-      touchStartX = 0;
-      touchStartY = 0;
-      isDragging = false;
-      return;
-    }
-
-    const containerWidth = calendarGridElement?.offsetWidth || 320;
-    const swipePercent = Math.abs(swipeOffset) / containerWidth;
-    const shouldChange = swipePercent > SWIPE_THRESHOLD || Math.abs(velocityX) > VELOCITY_THRESHOLD;
-    const direction = swipeOffset > 0 ? -1 : 1;
-
-    if (calendarGridElement) {
-      calendarGridElement.style.boxShadow = '';
-    }
-
-    if (shouldChange) {
-      animateMonthChange(direction);
-    } else {
-      // Snap back
-      if (calendarGridElement) {
-        calendarGridElement.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
-        calendarGridElement.style.transform = 'translateX(0)';
-
-        setTimeout(() => {
-          if (calendarGridElement) {
-            calendarGridElement.style.transition = '';
-            calendarGridElement.style.transform = '';
-          }
-        }, 300);
-      }
-    }
-
-    touchStartX = 0;
-    touchStartY = 0;
-    isSwiping = false;
-    swipeOffset = 0;
-    velocityX = 0;
-    isDragging = false;
-  }
-
-  function handleMouseLeave() {
-    if (isSwiping) {
-      handleMouseUp();
-    }
-  }
-
-  // Keyboard navigation for accessibility
-  function handleDayKeydown(event, day) {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      handleDayClick(day);
-    }
-  }
-
-  // Generate accessible label for a day
-  function getDayAriaLabel(day) {
-    const date = new Date(currentYear, currentMonth, day.day);
-    const dateStr = date.toLocaleDateString('en-US', {
-      weekday: 'long',
-      month: 'long',
-      day: 'numeric',
-      year: 'numeric'
-    });
-
-    let label = dateStr;
-    if (day.isToday) label += ', Today';
-    if (variant === 'availability') {
-      label += day.isSelected ? ', Available' : ', Not available';
-      if (!day.isPast) label += '. Press Enter to toggle.';
-    } else if (day.hasEvents) {
-      const count = day.events.length;
-      label += `, ${count} event${count > 1 ? 's' : ''}. Press Enter to view.`;
-    }
-    return label;
-  }
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-  class="w-full max-w-full mx-auto overflow-hidden select-none"
-  class:max-w-xs={variant === 'display'}
-  on:touchstart={handleTouchStart}
-  on:touchmove={handleTouchMove}
-  on:touchend={handleTouchEnd}
-  on:mousedown={handleMouseDown}
-  on:mousemove={handleMouseMove}
-  on:mouseup={handleMouseUp}
-  on:mouseleave={handleMouseLeave}
->
-  <!-- Header: Month left, Nav right (like MonthSwitcher) -->
-  {#if showNavigation}
-    <header class="flex items-center justify-between mb-4 select-none">
-      <div class="flex items-center gap-2" bind:this={monthDisplayEl}>
-        <h2 class="text-3xl font-semibold text-gray-900 dark:text-white leading-tight m-0">{MONTH_NAMES[currentMonth]}</h2>
-        {#if saveStatus && variant === 'availability'}
-          <span class="flex items-center justify-center ml-1">
-            {#if saveStatus === 'saving'}
-              <Spinner size="sm" color="secondary" />
-            {:else if saveStatus === 'saved'}
-              <span class="flex items-center justify-center text-green-600">
-                <CheckCircleSolid class="w-5 h-5" />
-              </span>
-            {/if}
-          </span>
-        {/if}
-      </div>
-
-      <div class="flex items-center gap-2">
-        <button
-          class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
-          class:scale-90={prevPressed}
-          class:bg-gray-100={prevPressed}
-          class:dark:bg-gray-700={prevPressed}
-          on:click={goToPrevMonth}
-          on:touchstart={() => prevPressed = true}
-          on:touchend={() => prevPressed = false}
-          on:touchcancel={() => prevPressed = false}
-          on:mousedown={() => prevPressed = true}
-          on:mouseup={() => prevPressed = false}
-          on:mouseleave={() => prevPressed = false}
-          disabled={!canGoPrev}
-          aria-label="Previous month"
-        >
-          <ChevronLeftOutline class="w-5 h-5" />
-        </button>
-
-        {#if showTodayButton}
-          <button
-            class="text-sm font-medium px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-transparent text-gray-900 dark:text-white cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-blue-700 hover:text-white hover:border-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed"
-            class:scale-95={todayPressed}
-            class:bg-blue-700={todayPressed}
-            class:text-white={todayPressed}
-            on:click={goToToday}
-            on:touchstart={() => todayPressed = true}
-            on:touchend={() => todayPressed = false}
-            on:touchcancel={() => todayPressed = false}
-            on:mousedown={() => todayPressed = true}
-            on:mouseup={() => todayPressed = false}
-            on:mouseleave={() => todayPressed = false}
-            disabled={isAtCurrentMonth}
-            aria-label="Go to current month"
-          >
-            Today
-          </button>
-        {/if}
-
-        <button
-          class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
-          class:scale-90={nextPressed}
-          class:bg-gray-100={nextPressed}
-          class:dark:bg-gray-700={nextPressed}
-          on:click={goToNextMonth}
-          on:touchstart={() => nextPressed = true}
-          on:touchend={() => nextPressed = false}
-          on:touchcancel={() => nextPressed = false}
-          on:mousedown={() => nextPressed = true}
-          on:mouseup={() => nextPressed = false}
-          on:mouseleave={() => nextPressed = false}
-          aria-label="Next month"
-        >
-          <ChevronRightOutline class="w-5 h-5" />
-        </button>
-      </div>
-    </header>
-  {/if}
-
-  <!-- Calendar Grid -->
-  <div class="relative overflow-hidden">
-    <div
-      bind:this={calendarGridElement}
-      class="grid grid-cols-7 gap-0 bg-white dark:bg-gray-800 select-none min-h-[356px] sm:min-h-[388px] md:min-h-[448px] lg:min-h-[508px]"
-      role="grid"
-      aria-label="{MONTH_NAMES[currentMonth]} {currentYear}"
-    >
-      <!-- Day headers -->
-      {#each DAY_NAMES as dayName, i}
-        <div
-          class="flex items-end justify-center pb-1 text-xs font-normal text-gray-500 dark:text-gray-400 overflow-hidden leading-none sm:pb-2 sm:pt-1 sm:justify-end sm:pr-2 sm:text-lg sm:text-gray-900 sm:dark:text-white sm:border-b sm:border-gray-200 sm:dark:border-gray-700"
-          role="columnheader"
-          aria-label={["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][i]}
-        >
-          <span class="sm:hidden">{DAY_LETTERS[i]}</span>
-          <span class="hidden sm:block">{dayName}</span>
-        </div>
-      {/each}
-
-      <!-- Previous month preview -->
-      {#each prevMonthPreviewDays as previewDay}
-        <div class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] pointer-events-none bg-transparent shadow-[inset_0_-1px_0_0_rgb(229_231_235)] dark:shadow-[inset_0_-1px_0_0_rgb(55_65_81)] sm:shadow-none sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700 last:sm:border-r" role="gridcell" aria-disabled="true">
-          <span class="text-sm font-medium text-gray-300 dark:text-gray-600 w-full text-center sm:text-lg sm:font-normal sm:text-right sm:mb-2">{previewDay.day}</span>
-        </div>
-      {/each}
-
-      <!-- Current month days -->
-      {#each daysInMonth as day (day.dateStr)}
-        <!-- svelte-ignore a11y-no-static-element-interactions -->
-        <div
-          class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] select-none
-            shadow-[inset_0_-1px_0_0_rgb(229_231_235)] dark:shadow-[inset_0_-1px_0_0_rgb(55_65_81)]
-            sm:shadow-none sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700
-            {day.isPast && variant === 'availability' ? 'bg-gray-100 dark:bg-gray-700 cursor-default' : ''}
-            {day.isPast && day.isSelected && variant === 'availability' ? 'bg-blue-100 dark:bg-blue-900/30 cursor-default' : ''}
-            {day.isSelected && !day.isPast && variant === 'availability' ? 'bg-blue-700 dark:bg-blue-600' : ''}
-            {!readOnly && (variant === 'availability' ? !day.isPast : day.hasEvents) ? 'cursor-pointer' : ''}
-            {variant !== 'availability' && day.hasEvents ? 'bg-blue-50 dark:bg-blue-900/20 sm:bg-transparent sm:dark:bg-transparent' : ''}"
-          class:last:border-r={true}
-          role="gridcell"
-          aria-label={getDayAriaLabel(day)}
-          aria-selected={day.isSelected}
-          aria-disabled={variant === 'availability' ? day.isPast : !day.hasEvents}
-          tabindex={(!readOnly && (variant === 'availability' ? !day.isPast : day.hasEvents)) ? 0 : -1}
-          on:click={() => handleDayClick(day)}
-          on:touchend|preventDefault={(e) => handleDayTap(e, day)}
-          on:keydown={(e) => handleDayKeydown(e, day)}
-        >
-          <span class="text-sm font-medium w-full text-center transition-transform duration-100 ease-out sm:text-lg sm:font-normal sm:text-right sm:mb-2
-            {day.isPast ? 'text-gray-400 dark:text-gray-500' : 'text-gray-900 dark:text-white'}
-            {day.isSelected && !day.isPast && variant === 'availability' ? 'text-white font-semibold' : ''}">{day.day}</span>
-          {#if variant !== 'availability' && day.hasEvents}
-            <div class="flex gap-0.5 mt-0.5">
-              {#each day.events.slice(0, 3) as _}
-                <span class="w-1.5 h-1.5 rounded-full bg-blue-600 dark:bg-blue-500 transition-transform duration-150 ease-out hover:scale-125"></span>
-              {/each}
-            </div>
-          {/if}
-        </div>
-      {/each}
-
-      <!-- Next month preview -->
-      {#each nextMonthPreviewDays as previewDay}
-        <div class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] pointer-events-none bg-transparent shadow-[inset_0_-1px_0_0_rgb(229_231_235)] dark:shadow-[inset_0_-1px_0_0_rgb(55_65_81)] sm:shadow-none sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700 sm:border-b last:sm:border-r" role="gridcell" aria-disabled="true">
-          <span class="text-sm font-medium text-gray-300 dark:text-gray-600 w-full text-center sm:text-lg sm:font-normal sm:text-right sm:mb-2">{previewDay.day}</span>
-        </div>
-      {/each}
-    </div>
-  </div>
-
-  <!-- Legend -->
-  {#if showLegend && variant === 'availability'}
-    <div class="flex items-center justify-center gap-6 pt-4">
-      <div class="flex items-center gap-2">
-        <span class="w-5 h-5 rounded bg-blue-700 dark:bg-blue-600 border border-blue-700 dark:border-blue-600"></span>
-        <span class="text-sm text-gray-900 dark:text-white">Available</span>
-      </div>
-      <div class="flex items-center gap-2">
-        <span class="w-5 h-5 rounded bg-gray-50 dark:bg-gray-700 border-2 border-gray-400 dark:border-gray-500"></span>
-        <span class="text-sm text-gray-900 dark:text-white">Unavailable</span>
-      </div>
-    </div>
-  {/if}
-</div>
+<script>
+  import { ChevronLeftOutline, ChevronRightOutline, CheckCircleSolid } from '../../primitives/Icons';
+  import Spinner from '../../primitives/Spinner/Spinner.svelte';
+
+  let {
+    variant = 'availability',
+    selectedDates = $bindable([]),
+    events = [],
+    saveStatus = '',
+    showLegend = true,
+    showNavigation = true,
+    showTodayButton = true,
+    readOnly = false,
+    showPartialPreview = true,
+    disablePastNavigation = false,
+    ondateSelect,
+    ondayClick,
+    onmonthChange,
+  } = $props();
+
+  let currentDate = new Date();
+  let currentYear = $state(currentDate.getFullYear());
+  let currentMonth = $state(currentDate.getMonth());
+
+  let touchStartX = $state(0);
+  let touchStartY = $state(0);
+  let touchStartTime = $state(0);
+  let lastTouchX = $state(0);
+  let lastTouchTime = $state(0);
+  let velocityX = $state(0);
+  let isSwiping = $state(false);
+  let isAnimating = $state(false);
+  let swipeOffset = $state(0);
+  let calendarGridElement = $state();
+  let monthDisplayEl = $state();
+  let prefersReducedMotion = $state(false);
+
+  let prevPressed = $state(false);
+  let nextPressed = $state(false);
+  let todayPressed = $state(false);
+
+  let momentumAnimationId = null;
+  const MOMENTUM_FRICTION = 0.92;
+  const MOMENTUM_MIN_VELOCITY = 0.05;
+
+  const SWIPE_THRESHOLD = 0.15;
+  const VELOCITY_THRESHOLD = 0.3;
+  const DRAG_RESISTANCE = 0.8;
+
+  const MONTH_NAMES = [
+    "January", "February", "March", "April", "May", "June",
+    "July", "August", "September", "October", "November", "December"
+  ];
+
+  const DAY_NAMES = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  const DAY_LETTERS = ["S", "M", "T", "W", "T", "F", "S"];
+
+  const today = new Date();
+  const todayLocal = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+  const todayLocalMonth = today.getMonth();
+  const todayLocalYear = today.getFullYear();
+
+  let isAtCurrentMonth = $derived(currentYear === todayLocalYear && currentMonth === todayLocalMonth);
+  let canGoPrev = $derived(!disablePastNavigation || !isAtCurrentMonth);
+
+  $effect(() => {
+    if (typeof window !== 'undefined') {
+      const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+      prefersReducedMotion = mediaQuery.matches;
+      const handler = (e) => { prefersReducedMotion = e.matches; };
+      mediaQuery.addEventListener('change', handler);
+      return () => mediaQuery.removeEventListener('change', handler);
+    }
+  });
+
+  function normalizeDate(date) {
+    const d = new Date(date);
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  }
+
+  function getDaysInMonth(year, month) {
+    return new Date(year, month + 1, 0).getDate();
+  }
+
+  function isToday(year, month, day) {
+    return (
+      year === todayLocal.getFullYear() &&
+      month === todayLocal.getMonth() &&
+      day === todayLocal.getDate()
+    );
+  }
+
+  function isPastDate(year, month, day) {
+    const checkDate = new Date(year, month, day);
+    return checkDate < todayLocal;
+  }
+
+  function isSelectedDate(dateStr) {
+    return selectedDates.includes(dateStr);
+  }
+
+  function hasEventsOnDate(dateStr) {
+    return events.some(event => event.date === dateStr);
+  }
+
+  function getEventsForDate(dateStr) {
+    return events.filter(event => event.date === dateStr);
+  }
+
+  let daysInMonth = $derived.by(() => {
+    const _ = selectedDates;
+    const days = getDaysInMonth(currentYear, currentMonth);
+    const firstDayOfWeek = new Date(currentYear, currentMonth, 1).getDay();
+    const result = [];
+
+    for (let i = 1; i <= days; i++) {
+      const dateStr = normalizeDate(new Date(currentYear, currentMonth, i));
+      result.push({
+        day: i,
+        dateStr,
+        startDay: firstDayOfWeek + i - 1,
+        isPast: isPastDate(currentYear, currentMonth, i),
+        isToday: isToday(currentYear, currentMonth, i),
+        isSelected: selectedDates.includes(dateStr),
+        hasEvents: hasEventsOnDate(dateStr),
+        events: getEventsForDate(dateStr)
+      });
+    }
+    return result;
+  });
+
+  let prevMonthPreviewDays = $derived.by(() => {
+    if (!showPartialPreview) return [];
+    const firstDayOfWeek = new Date(currentYear, currentMonth, 1).getDay();
+    if (firstDayOfWeek === 0) return [];
+
+    const prevMonth = currentMonth === 0 ? 11 : currentMonth - 1;
+    const prevYear = currentMonth === 0 ? currentYear - 1 : currentYear;
+    const daysInPrevMonth = getDaysInMonth(prevYear, prevMonth);
+
+    return Array.from({ length: firstDayOfWeek }, (_, i) => ({
+      day: daysInPrevMonth - firstDayOfWeek + i + 1,
+      month: prevMonth,
+      year: prevYear
+    }));
+  });
+
+  let nextMonthPreviewDays = $derived.by(() => {
+    if (!showPartialPreview) return [];
+    const days = getDaysInMonth(currentYear, currentMonth);
+    const lastDayOfWeek = new Date(currentYear, currentMonth, days).getDay();
+    if (lastDayOfWeek === 6) return [];
+
+    const daysToShow = 6 - lastDayOfWeek;
+    const nextMonth = currentMonth === 11 ? 0 : currentMonth + 1;
+    const nextYear = currentMonth === 11 ? currentYear + 1 : currentYear;
+
+    return Array.from({ length: daysToShow }, (_, i) => ({
+      day: i + 1,
+      month: nextMonth,
+      year: nextYear
+    }));
+  });
+
+  function triggerHaptic(style = 'light') {
+    if (typeof window === 'undefined') return;
+
+    if (window.webkit?.messageHandlers?.haptic) {
+      window.webkit.messageHandlers.haptic.postMessage(style);
+      return;
+    }
+
+    if (window.TapticEngine) {
+      window.TapticEngine.impact({ style });
+      return;
+    }
+
+    if (navigator.vibrate) {
+      navigator.vibrate(style === 'light' ? 10 : 20);
+    }
+  }
+
+  function handleDayTap(e, day) {
+    if (isSwiping) return;
+    if (readOnly) return;
+    if (variant === 'availability' && day.isPast) return;
+
+    if (variant === 'availability') {
+      const isSelected = selectedDates.includes(day.dateStr);
+
+      if (isSelected) {
+        triggerHaptic('medium');
+        ondateSelect?.({ date: day.dateStr, selected: false });
+      } else {
+        triggerHaptic('light');
+        ondateSelect?.({ date: day.dateStr, selected: true });
+      }
+    } else if (variant === 'display' || variant === 'public') {
+      if (day.hasEvents) {
+        triggerHaptic('light');
+        ondayClick?.({ date: day.dateStr, events: day.events });
+      }
+    }
+  }
+
+  let isDragging = $state(false);
+
+  function handleDayClick(day) {
+    if (isDragging || isSwiping) return;
+    if (readOnly) return;
+    if (variant === 'availability' && day.isPast) return;
+
+    if (variant === 'availability') {
+      const isSelected = selectedDates.includes(day.dateStr);
+
+      if (isSelected) {
+        triggerHaptic('medium');
+        ondateSelect?.({ date: day.dateStr, selected: false });
+      } else {
+        triggerHaptic('light');
+        ondateSelect?.({ date: day.dateStr, selected: true });
+      }
+    } else if (variant === 'display' || variant === 'public') {
+      if (day.hasEvents) {
+        triggerHaptic('light');
+        ondayClick?.({ date: day.dateStr, events: day.events });
+      }
+    }
+  }
+
+  function goToPrevMonth() {
+    if (isAnimating || !canGoPrev) return;
+    triggerHaptic('light');
+    animateMonthChange(-1);
+  }
+
+  function goToNextMonth() {
+    if (isAnimating) return;
+    triggerHaptic('light');
+    animateMonthChange(1);
+  }
+
+  function goToToday() {
+    if (isAnimating || isAtCurrentMonth) return;
+
+    const todayYM = today.getFullYear() * 12 + today.getMonth();
+    const currentYM = currentYear * 12 + currentMonth;
+
+    const direction = todayYM > currentYM ? 1 : -1;
+    triggerHaptic('light');
+    animateMonthChange(direction, () => {
+      currentYear = today.getFullYear();
+      currentMonth = today.getMonth();
+    });
+  }
+
+  function animateMonthChange(direction, customAction = null) {
+    if (isAnimating || !calendarGridElement) return;
+
+    if (prefersReducedMotion) {
+      if (customAction) {
+        customAction();
+      } else if (direction > 0) {
+        if (currentMonth === 11) {
+          currentMonth = 0;
+          currentYear++;
+        } else {
+          currentMonth++;
+        }
+      } else {
+        if (currentMonth === 0) {
+          currentMonth = 11;
+          currentYear--;
+        } else {
+          currentMonth--;
+        }
+      }
+      triggerHaptic('medium');
+      onmonthChange?.({ year: currentYear, month: currentMonth });
+      return;
+    }
+
+    isAnimating = true;
+    const containerWidth = calendarGridElement.offsetWidth || 320;
+
+    const clone = calendarGridElement.cloneNode(true);
+    clone.classList.add('calendar-clone');
+    clone.style.position = 'absolute';
+    clone.style.top = '0';
+    clone.style.left = '0';
+    clone.style.width = '100%';
+    clone.style.transform = swipeOffset ? `translateX(${swipeOffset}px)` : 'translateX(0)';
+    clone.style.transition = 'none';
+    clone.style.pointerEvents = 'none';
+    clone.style.zIndex = '1';
+
+    const slideContainer = calendarGridElement.parentElement;
+    slideContainer.style.position = 'relative';
+    slideContainer.style.overflow = 'hidden';
+    slideContainer.insertBefore(clone, calendarGridElement);
+
+    if (customAction) {
+      customAction();
+    } else if (direction > 0) {
+      if (currentMonth === 11) {
+        currentMonth = 0;
+        currentYear++;
+      } else {
+        currentMonth++;
+      }
+    } else {
+      if (currentMonth === 0) {
+        currentMonth = 11;
+        currentYear--;
+      } else {
+        currentMonth--;
+      }
+    }
+
+    triggerHaptic('medium');
+    onmonthChange?.({ year: currentYear, month: currentMonth });
+
+    const enterFrom = direction > 0 ? containerWidth : -containerWidth;
+    calendarGridElement.style.transition = 'none';
+    calendarGridElement.style.transform = `translateX(${enterFrom}px)`;
+    calendarGridElement.offsetHeight;
+
+    const duration = 0.3;
+    const easing = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+
+    clone.style.transition = `transform ${duration}s ${easing}`;
+    clone.style.transform = `translateX(${direction > 0 ? -containerWidth : containerWidth}px)`;
+
+    calendarGridElement.style.transition = `transform ${duration}s ${easing}`;
+    calendarGridElement.style.transform = 'translateX(0)';
+
+    if (monthDisplayEl) {
+      monthDisplayEl.style.transition = 'none';
+      monthDisplayEl.style.transform = `translateX(${enterFrom * 0.3}px)`;
+      monthDisplayEl.style.opacity = '0';
+      monthDisplayEl.offsetHeight;
+      monthDisplayEl.style.transition = `transform ${duration}s ${easing}, opacity ${duration}s ${easing}`;
+      monthDisplayEl.style.transform = 'translateX(0)';
+      monthDisplayEl.style.opacity = '1';
+    }
+
+    setTimeout(() => {
+      if (clone.parentElement) clone.remove();
+      if (calendarGridElement) {
+        calendarGridElement.style.transition = '';
+        calendarGridElement.style.transform = '';
+      }
+      if (monthDisplayEl) {
+        monthDisplayEl.style.transition = '';
+        monthDisplayEl.style.transform = '';
+        monthDisplayEl.style.opacity = '';
+      }
+      isAnimating = false;
+      swipeOffset = 0;
+    }, duration * 1000 + 50);
+  }
+
+  function handleTouchStart(e) {
+    if (isAnimating) return;
+
+    touchStartX = e.touches[0].clientX;
+    touchStartY = e.touches[0].clientY;
+    touchStartTime = Date.now();
+    lastTouchX = touchStartX;
+    lastTouchTime = touchStartTime;
+    velocityX = 0;
+    isSwiping = false;
+    isDragging = false;
+    swipeOffset = 0;
+  }
+
+  function handleTouchMove(e) {
+    if (!touchStartX || isAnimating) return;
+
+    const touchCurrentX = e.touches[0].clientX;
+    const touchCurrentY = e.touches[0].clientY;
+    const diffX = touchStartX - touchCurrentX;
+    const diffY = touchStartY - touchCurrentY;
+    const now = Date.now();
+
+    if (!isSwiping && Math.abs(diffX) > 10) {
+      if (Math.abs(diffX) > Math.abs(diffY)) {
+        isSwiping = true;
+      } else {
+        touchStartX = 0;
+        return;
+      }
+    }
+
+    if (isSwiping) {
+      e.preventDefault();
+
+      const dt = now - lastTouchTime;
+      if (dt > 0) {
+        velocityX = (lastTouchX - touchCurrentX) / dt;
+      }
+      lastTouchX = touchCurrentX;
+      lastTouchTime = now;
+
+      swipeOffset = -diffX * DRAG_RESISTANCE;
+
+      if (calendarGridElement) {
+        calendarGridElement.style.transform = `translateX(${swipeOffset}px)`;
+        calendarGridElement.style.transition = 'none';
+
+        const shadowIntensity = Math.min(Math.abs(swipeOffset) / 80, 0.4);
+        const blurRadius = 12 + shadowIntensity * 24;
+        const spreadRadius = shadowIntensity * 4;
+
+        if (diffX > 0) {
+          calendarGridElement.style.boxShadow = `-${spreadRadius}px 0 ${blurRadius}px rgba(0,0,0,${shadowIntensity})`;
+        } else {
+          calendarGridElement.style.boxShadow = `${spreadRadius}px 0 ${blurRadius}px rgba(0,0,0,${shadowIntensity})`;
+        }
+      }
+    }
+  }
+
+  function handleTouchEnd() {
+    if (!touchStartX || !isSwiping || isAnimating) {
+      touchStartX = 0;
+      touchStartY = 0;
+      isSwiping = false;
+      return;
+    }
+
+    const containerWidth = calendarGridElement?.offsetWidth || 320;
+    const swipePercent = Math.abs(swipeOffset) / containerWidth;
+    const shouldChange = swipePercent > SWIPE_THRESHOLD || Math.abs(velocityX) > VELOCITY_THRESHOLD;
+    const direction = swipeOffset > 0 ? -1 : 1;
+
+    if (calendarGridElement) {
+      calendarGridElement.style.boxShadow = '';
+    }
+
+    if (shouldChange) {
+      animateMonthChange(direction);
+    } else {
+      if (calendarGridElement) {
+        calendarGridElement.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+        calendarGridElement.style.transform = 'translateX(0)';
+
+        setTimeout(() => {
+          if (calendarGridElement) {
+            calendarGridElement.style.transition = '';
+            calendarGridElement.style.transform = '';
+          }
+        }, 300);
+      }
+    }
+
+    touchStartX = 0;
+    touchStartY = 0;
+    isSwiping = false;
+    swipeOffset = 0;
+    velocityX = 0;
+  }
+
+  function handleMouseDown(e) {
+    if (isAnimating || e.button !== 0) return;
+
+    isDragging = false;
+    touchStartX = e.clientX;
+    touchStartY = e.clientY;
+    touchStartTime = Date.now();
+    lastTouchX = touchStartX;
+    lastTouchTime = touchStartTime;
+    velocityX = 0;
+    isSwiping = false;
+    swipeOffset = 0;
+
+    e.preventDefault();
+  }
+
+  function handleMouseMove(e) {
+    if (!touchStartX || isAnimating) return;
+
+    const mouseCurrentX = e.clientX;
+    const mouseCurrentY = e.clientY;
+    const diffX = touchStartX - mouseCurrentX;
+    const diffY = touchStartY - mouseCurrentY;
+    const now = Date.now();
+
+    if (!isDragging && Math.abs(diffX) > 5) {
+      isDragging = true;
+    }
+
+    if (!isSwiping && Math.abs(diffX) > 10) {
+      if (Math.abs(diffX) > Math.abs(diffY)) {
+        isSwiping = true;
+      } else {
+        touchStartX = 0;
+        return;
+      }
+    }
+
+    if (isSwiping) {
+      const dt = now - lastTouchTime;
+      if (dt > 0) {
+        velocityX = (lastTouchX - mouseCurrentX) / dt;
+      }
+      lastTouchX = mouseCurrentX;
+      lastTouchTime = now;
+
+      swipeOffset = -diffX * DRAG_RESISTANCE;
+
+      if (calendarGridElement) {
+        calendarGridElement.style.transform = `translateX(${swipeOffset}px)`;
+        calendarGridElement.style.transition = 'none';
+
+        const shadowIntensity = Math.min(Math.abs(swipeOffset) / 80, 0.4);
+        const blurRadius = 12 + shadowIntensity * 24;
+        const spreadRadius = shadowIntensity * 4;
+
+        if (diffX > 0) {
+          calendarGridElement.style.boxShadow = `-${spreadRadius}px 0 ${blurRadius}px rgba(0,0,0,${shadowIntensity})`;
+        } else {
+          calendarGridElement.style.boxShadow = `${spreadRadius}px 0 ${blurRadius}px rgba(0,0,0,${shadowIntensity})`;
+        }
+      }
+    }
+  }
+
+  function handleMouseUp() {
+    if (!touchStartX || isAnimating) {
+      touchStartX = 0;
+      touchStartY = 0;
+      isDragging = false;
+      return;
+    }
+
+    if (!isSwiping) {
+      touchStartX = 0;
+      touchStartY = 0;
+      isDragging = false;
+      return;
+    }
+
+    const containerWidth = calendarGridElement?.offsetWidth || 320;
+    const swipePercent = Math.abs(swipeOffset) / containerWidth;
+    const shouldChange = swipePercent > SWIPE_THRESHOLD || Math.abs(velocityX) > VELOCITY_THRESHOLD;
+    const direction = swipeOffset > 0 ? -1 : 1;
+
+    if (calendarGridElement) {
+      calendarGridElement.style.boxShadow = '';
+    }
+
+    if (shouldChange) {
+      animateMonthChange(direction);
+    } else {
+      if (calendarGridElement) {
+        calendarGridElement.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+        calendarGridElement.style.transform = 'translateX(0)';
+
+        setTimeout(() => {
+          if (calendarGridElement) {
+            calendarGridElement.style.transition = '';
+            calendarGridElement.style.transform = '';
+          }
+        }, 300);
+      }
+    }
+
+    touchStartX = 0;
+    touchStartY = 0;
+    isSwiping = false;
+    swipeOffset = 0;
+    velocityX = 0;
+    isDragging = false;
+  }
+
+  function handleMouseLeave() {
+    if (isSwiping) {
+      handleMouseUp();
+    }
+  }
+
+  function handleDayKeydown(event, day) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleDayClick(day);
+    }
+  }
+
+  function getDayAriaLabel(day) {
+    const date = new Date(currentYear, currentMonth, day.day);
+    const dateStr = date.toLocaleDateString('en-US', {
+      weekday: 'long',
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric'
+    });
+
+    let label = dateStr;
+    if (day.isToday) label += ', Today';
+    if (variant === 'availability') {
+      label += day.isSelected ? ', Available' : ', Not available';
+      if (!day.isPast) label += '. Press Enter to toggle.';
+    } else if (day.hasEvents) {
+      const count = day.events.length;
+      label += `, ${count} event${count > 1 ? 's' : ''}. Press Enter to view.`;
+    }
+    return label;
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="w-full max-w-full mx-auto overflow-hidden select-none"
+  class:max-w-xs={variant === 'display'}
+  ontouchstart={handleTouchStart}
+  ontouchmove={handleTouchMove}
+  ontouchend={handleTouchEnd}
+  onmousedown={handleMouseDown}
+  onmousemove={handleMouseMove}
+  onmouseup={handleMouseUp}
+  onmouseleave={handleMouseLeave}
+>
+  {#if showNavigation}
+    <header class="flex items-center justify-between mb-4 select-none">
+      <div class="flex items-center gap-2" bind:this={monthDisplayEl}>
+        <h2 class="text-3xl font-semibold text-gray-900 dark:text-white leading-tight m-0">{MONTH_NAMES[currentMonth]}</h2>
+        {#if saveStatus && variant === 'availability'}
+          <span class="flex items-center justify-center ml-1">
+            {#if saveStatus === 'saving'}
+              <Spinner size="sm" color="secondary" />
+            {:else if saveStatus === 'saved'}
+              <span class="flex items-center justify-center text-green-600">
+                <CheckCircleSolid class="w-5 h-5" />
+              </span>
+            {/if}
+          </span>
+        {/if}
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+          class:scale-90={prevPressed}
+          class:bg-gray-100={prevPressed}
+          class:dark:bg-gray-700={prevPressed}
+          onclick={goToPrevMonth}
+          ontouchstart={() => prevPressed = true}
+          ontouchend={() => prevPressed = false}
+          ontouchcancel={() => prevPressed = false}
+          onmousedown={() => prevPressed = true}
+          onmouseup={() => prevPressed = false}
+          onmouseleave={() => prevPressed = false}
+          disabled={!canGoPrev}
+          aria-label="Previous month"
+        >
+          <ChevronLeftOutline class="w-5 h-5" />
+        </button>
+
+        {#if showTodayButton}
+          <button
+            class="text-sm font-medium px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg bg-transparent text-gray-900 dark:text-white cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-blue-700 hover:text-white hover:border-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:opacity-40 disabled:cursor-not-allowed"
+            class:scale-95={todayPressed}
+            class:bg-blue-700={todayPressed}
+            class:text-white={todayPressed}
+            onclick={goToToday}
+            ontouchstart={() => todayPressed = true}
+            ontouchend={() => todayPressed = false}
+            ontouchcancel={() => todayPressed = false}
+            onmousedown={() => todayPressed = true}
+            onmouseup={() => todayPressed = false}
+            onmouseleave={() => todayPressed = false}
+            disabled={isAtCurrentMonth}
+            aria-label="Go to current month"
+          >
+            Today
+          </button>
+        {/if}
+
+        <button
+          class="p-3 -m-1.5 flex items-center justify-center border-0 rounded-full bg-transparent text-gray-500 dark:text-gray-400 cursor-pointer select-none transition-transform duration-100 ease-out hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
+          class:scale-90={nextPressed}
+          class:bg-gray-100={nextPressed}
+          class:dark:bg-gray-700={nextPressed}
+          onclick={goToNextMonth}
+          ontouchstart={() => nextPressed = true}
+          ontouchend={() => nextPressed = false}
+          ontouchcancel={() => nextPressed = false}
+          onmousedown={() => nextPressed = true}
+          onmouseup={() => nextPressed = false}
+          onmouseleave={() => nextPressed = false}
+          aria-label="Next month"
+        >
+          <ChevronRightOutline class="w-5 h-5" />
+        </button>
+      </div>
+    </header>
+  {/if}
+
+  <div class="relative overflow-hidden">
+    <div
+      bind:this={calendarGridElement}
+      class="grid grid-cols-7 gap-0 bg-white dark:bg-gray-800 select-none min-h-[356px] sm:min-h-[388px] md:min-h-[448px] lg:min-h-[508px]"
+      role="grid"
+      aria-label="{MONTH_NAMES[currentMonth]} {currentYear}"
+    >
+      {#each DAY_NAMES as dayName, i}
+        <div
+          class="flex items-end justify-center pb-1 text-xs font-normal text-gray-500 dark:text-gray-400 overflow-hidden leading-none sm:pb-2 sm:pt-1 sm:justify-end sm:pr-2 sm:text-lg sm:text-gray-900 sm:dark:text-white sm:border-b sm:border-gray-200 sm:dark:border-gray-700"
+          role="columnheader"
+          aria-label={["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][i]}
+        >
+          <span class="sm:hidden">{DAY_LETTERS[i]}</span>
+          <span class="hidden sm:block">{dayName}</span>
+        </div>
+      {/each}
+
+      {#each prevMonthPreviewDays as previewDay}
+        <div class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] pointer-events-none bg-transparent shadow-[inset_0_-1px_0_0_rgb(229_231_235)] dark:shadow-[inset_0_-1px_0_0_rgb(55_65_81)] sm:shadow-none sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700 last:sm:border-r" role="gridcell" aria-disabled="true">
+          <span class="text-sm font-medium text-gray-300 dark:text-gray-600 w-full text-center sm:text-lg sm:font-normal sm:text-right sm:mb-2">{previewDay.day}</span>
+        </div>
+      {/each}
+
+      {#each daysInMonth as day (day.dateStr)}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] select-none
+            shadow-[inset_0_-1px_0_0_rgb(229_231_235)] dark:shadow-[inset_0_-1px_0_0_rgb(55_65_81)]
+            sm:shadow-none sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700
+            {day.isPast && variant === 'availability' ? 'bg-gray-100 dark:bg-gray-700 cursor-default' : ''}
+            {day.isPast && day.isSelected && variant === 'availability' ? 'bg-blue-100 dark:bg-blue-900/30 cursor-default' : ''}
+            {day.isSelected && !day.isPast && variant === 'availability' ? 'bg-blue-700 dark:bg-blue-600' : ''}
+            {!readOnly && (variant === 'availability' ? !day.isPast : day.hasEvents) ? 'cursor-pointer' : ''}
+            {variant !== 'availability' && day.hasEvents ? 'bg-blue-50 dark:bg-blue-900/20 sm:bg-transparent sm:dark:bg-transparent' : ''}"
+          class:last:border-r={true}
+          role="gridcell"
+          aria-label={getDayAriaLabel(day)}
+          aria-selected={day.isSelected}
+          aria-disabled={variant === 'availability' ? day.isPast : !day.hasEvents}
+          tabindex={(!readOnly && (variant === 'availability' ? !day.isPast : day.hasEvents)) ? 0 : -1}
+          onclick={() => handleDayClick(day)}
+          ontouchend={(e) => { e.preventDefault(); handleDayTap(e, day); }}
+          onkeydown={(e) => handleDayKeydown(e, day)}
+        >
+          <span class="text-sm font-medium w-full text-center transition-transform duration-100 ease-out sm:text-lg sm:font-normal sm:text-right sm:mb-2
+            {day.isPast ? 'text-gray-400 dark:text-gray-500' : 'text-gray-900 dark:text-white'}
+            {day.isSelected && !day.isPast && variant === 'availability' ? 'text-white font-semibold' : ''}">{day.day}</span>
+          {#if variant !== 'availability' && day.hasEvents}
+            <div class="flex gap-0.5 mt-0.5">
+              {#each day.events.slice(0, 3) as _}
+                <span class="w-1.5 h-1.5 rounded-full bg-blue-600 dark:bg-blue-500 transition-transform duration-150 ease-out hover:scale-125"></span>
+              {/each}
+            </div>
+          {/if}
+        </div>
+      {/each}
+
+      {#each nextMonthPreviewDays as previewDay}
+        <div class="flex flex-col items-center justify-start px-1 py-0.5 min-h-[56px] sm:min-h-[60px] md:min-h-[70px] lg:min-h-[80px] pointer-events-none bg-transparent shadow-[inset_0_-1px_0_0_rgb(229_231_235)] dark:shadow-[inset_0_-1px_0_0_rgb(55_65_81)] sm:shadow-none sm:p-2 sm:border-t sm:border-l sm:border-gray-200 sm:dark:border-gray-700 sm:border-b last:sm:border-r" role="gridcell" aria-disabled="true">
+          <span class="text-sm font-medium text-gray-300 dark:text-gray-600 w-full text-center sm:text-lg sm:font-normal sm:text-right sm:mb-2">{previewDay.day}</span>
+        </div>
+      {/each}
+    </div>
+  </div>
+
+  {#if showLegend && variant === 'availability'}
+    <div class="flex items-center justify-center gap-6 pt-4">
+      <div class="flex items-center gap-2">
+        <span class="w-5 h-5 rounded bg-blue-700 dark:bg-blue-600 border border-blue-700 dark:border-blue-600"></span>
+        <span class="text-sm text-gray-900 dark:text-white">Available</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="w-5 h-5 rounded bg-gray-50 dark:bg-gray-700 border-2 border-gray-400 dark:border-gray-500"></span>
+        <span class="text-sm text-gray-900 dark:text-white">Unavailable</span>
+      </div>
+    </div>
+  {/if}
+</div>