@getmicdrop/svelte-components 3.1.0 → 4.0.0

package/dist/calendar/Calendar/MiniMonthCalendar.svelte

@@ -0,0 +1,848 @@
+<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>