@getmicdrop/svelte-components 3.0.0 → 4.0.0

package/dist/components/Calendar/MiniMonthCalendar.svelte

@@ -1,1446 +0,0 @@
-<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 ChevronLeft from '../Icons/ChevronLeft.svelte';
-  import ChevronRight from '../Icons/ChevronRight.svelte';
-  import CheckCircle from '../Icons/CheckCircle.svelte';
-  import Spinner from '../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>
-
-<div
-  class="mini-calendar-container"
-  class:compact={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="calendar-header">
-      <div class="month-display" bind:this={monthDisplayEl}>
-        <h2 class="month-title">{MONTH_NAMES[currentMonth]}</h2>
-        {#if saveStatus && variant === 'availability'}
-          <span class="save-indicator">
-            {#if saveStatus === 'saving'}
-              <Spinner size="sm" color="secondary" />
-            {:else if saveStatus === 'saved'}
-              <span class="save-icon save-icon--success">
-                <CheckCircle size="20" color="hsl(142 76% 36%)" />
-              </span>
-            {/if}
-          </span>
-        {/if}
-      </div>
-
-      <div class="nav-buttons">
-        <button
-          class="nav-btn"
-          class:pressed={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"
-        >
-          <ChevronLeft size="20" />
-        </button>
-
-        {#if showTodayButton}
-          <button
-            class="today-btn"
-            class:pressed={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="nav-btn"
-          class:pressed={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"
-        >
-          <ChevronRight size="20" />
-        </button>
-      </div>
-    </header>
-  {/if}
-
-  <!-- Calendar Grid -->
-  <div class="calendar-slide-container">
-    <div
-      bind:this={calendarGridElement}
-      class="calendar-grid"
-      role="grid"
-      aria-label="{MONTH_NAMES[currentMonth]} {currentYear}"
-    >
-      <!-- Day headers -->
-      {#each DAY_NAMES as dayName, i}
-        <div
-          class="day-header"
-          role="columnheader"
-          aria-label={["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][i]}
-        >
-          <span class="day-letter">{DAY_LETTERS[i]}</span>
-          <span class="day-abbrev">{dayName}</span>
-        </div>
-      {/each}
-
-      <!-- Previous month preview -->
-      {#each prevMonthPreviewDays as previewDay}
-        <div class="day-cell preview-day" role="gridcell" aria-disabled="true">
-          <span class="day-number">{previewDay.day}</span>
-        </div>
-      {/each}
-
-      <!-- Current month days -->
-      {#each daysInMonth as day (day.dateStr)}
-        <div
-          class="day-cell"
-          class:past-day={day.isPast}
-          class:today={day.isToday}
-          class:selected={variant === 'availability' && day.isSelected && !day.isPast}
-          class:past-selected={variant === 'availability' && day.isSelected && day.isPast}
-          class:has-events={variant !== 'availability' && day.hasEvents}
-          class:clickable={!readOnly && (variant === 'availability' ? !day.isPast : day.hasEvents)}
-          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="day-number">{day.day}</span>
-          {#if variant !== 'availability' && day.hasEvents}
-            <div class="event-dots">
-              {#each day.events.slice(0, 3) as _}
-                <span class="event-dot"></span>
-              {/each}
-            </div>
-          {/if}
-        </div>
-      {/each}
-
-      <!-- Next month preview -->
-      {#each nextMonthPreviewDays as previewDay}
-        <div class="day-cell preview-day" role="gridcell" aria-disabled="true">
-          <span class="day-number">{previewDay.day}</span>
-        </div>
-      {/each}
-    </div>
-  </div>
-
-  <!-- Legend -->
-  {#if showLegend && variant === 'availability'}
-    <div class="calendar-legend">
-      <div class="legend-item">
-        <span class="legend-dot legend-dot--available"></span>
-        <span class="legend-label">Available</span>
-      </div>
-      <div class="legend-item">
-        <span class="legend-dot legend-dot--unavailable"></span>
-        <span class="legend-label">Unavailable</span>
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style>
-  /* ==========================================================================
-     MINI MONTH CALENDAR - Evaluation Branch Styling
-     Apple Calendar-style minimal grid on mobile
-     ========================================================================== */
-
-  .mini-calendar-container {
-    width: 100%;
-    max-width: 100%;
-    margin: 0 auto;
-    touch-action: pan-y pinch-zoom;
-    overflow: hidden;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  .mini-calendar-container.compact {
-    max-width: 320px;
-  }
-
-  /* --------------------------------------------------------------------------
-     HEADER: Month left, Nav buttons right
-     -------------------------------------------------------------------------- */
-  .calendar-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 1rem;
-    -moz-user-select: none;
-         user-select: none;
-    -webkit-user-select: none;
-  }
-
-  .month-display {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .month-title {
-    font-size: 1.875rem;
-    font-weight: 600;
-    color: hsl(var(--Text-Primary));
-    line-height: 1.2;
-    margin: 0;
-  }
-
-  .save-indicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: 0.25rem;
-  }
-
-  .save-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .save-icon--success {
-    /* CheckCircle color is passed as prop */
-  }
-
-  .nav-buttons {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .nav-btn {
-    padding: 0.75rem;
-    margin: -0.375rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    border-radius: 9999px;
-    background: transparent;
-    color: hsl(var(--Text-Tertiary, var(--Text-Tartiary)));
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-    touch-action: manipulation;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-    transition: transform 0.1s ease, color 0.15s ease, background-color 0.15s ease;
-  }
-
-  .nav-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .nav-btn:hover:not(:disabled) {
-      background-color: hsl(var(--BG-Secondary));
-      color: hsl(var(--Text-Primary));
-    }
-  }
-
-  .nav-btn.pressed:not(:disabled) {
-    transform: scale(0.9);
-    background-color: hsl(var(--BG-Secondary));
-    color: hsl(var(--Text-Primary));
-  }
-
-  .nav-btn:focus {
-    outline: none;
-  }
-
-  .nav-btn:focus-visible {
-    outline: 2px solid hsl(var(--Brand-Primary));
-    outline-offset: 2px;
-  }
-
-  .today-btn {
-    font-size: 0.875rem;
-    font-weight: 500;
-    padding: 0.25rem 0.75rem;
-    border: 1px solid hsl(var(--Text-Tertiary, var(--Text-Tartiary)));
-    border-radius: 0.5rem;
-    background: transparent;
-    color: hsl(var(--Text-Primary));
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-    touch-action: manipulation;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-    transition: transform 0.1s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
-  }
-
-  .today-btn:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .today-btn:hover:not(:disabled) {
-      background-color: hsl(var(--Brand-Primary));
-      color: white;
-    }
-  }
-
-  .today-btn.pressed:not(:disabled) {
-    transform: scale(0.95);
-    background-color: hsl(var(--Brand-Primary));
-    color: white;
-  }
-
-  .today-btn:focus {
-    outline: none;
-  }
-
-  .today-btn:focus-visible {
-    outline: 2px solid hsl(var(--Brand-Primary));
-    outline-offset: 2px;
-  }
-
-  /* --------------------------------------------------------------------------
-     CALENDAR GRID
-     Desktop: full borders
-     Mobile: horizontal lines only (Apple Calendar style)
-     -------------------------------------------------------------------------- */
-  .calendar-slide-container {
-    position: relative;
-    overflow: hidden;
-  }
-
-  .calendar-grid {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    gap: 0;
-    background: hsl(var(--BG-Primary));
-    will-change: transform;
-    -moz-user-select: none;
-         user-select: none;
-    -webkit-user-select: none;
-    /* Fixed height to prevent jumping between months with different row counts */
-    /* 7 rows total: 1 header row + 6 content rows (max possible) */
-    /* Mobile: header ~20px + 6 rows × 56px = 356px min */
-    min-height: 356px;
-  }
-
-  @media (min-width: 640px) {
-    .calendar-grid {
-      /* Desktop: header ~28px + 6 rows × 60px = 388px min */
-      min-height: 388px;
-    }
-  }
-
-  @media (min-width: 768px) {
-    .calendar-grid {
-      /* Desktop md: header ~28px + 6 rows × 70px = 448px min */
-      min-height: 448px;
-    }
-  }
-
-  @media (min-width: 1024px) {
-    .calendar-grid {
-      /* Desktop lg: header ~28px + 6 rows × 80px = 508px min */
-      min-height: 508px;
-    }
-  }
-
-  :global(.calendar-clone) {
-    background: hsl(var(--BG-Primary));
-  }
-
-  /* --------------------------------------------------------------------------
-     DAY HEADERS
-     Mobile: single letter, small text
-     Desktop: 3-letter abbreviation
-     -------------------------------------------------------------------------- */
-  .day-header {
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    padding-bottom: 0.25rem;
-    font-size: 0.6875rem;
-    font-weight: 400;
-    color: hsl(var(--Text-Tertiary, var(--Text-Tartiary)));
-    overflow: hidden;
-    line-height: 1;
-  }
-
-  /* Mobile: show single letter */
-  .day-letter {
-    display: block;
-  }
-
-  .day-abbrev {
-    display: none;
-  }
-
-  /* Desktop: show 3-letter abbreviation */
-  @media (min-width: 640px) {
-    .day-header {
-      padding-bottom: 0.5rem;
-      padding-top: 0.25rem;
-      justify-content: flex-end;
-      padding-right: 0.5rem;
-      font-size: 1.125rem;
-      color: hsl(var(--Text-Primary));
-      border-bottom: 1px solid hsl(var(--Stroke-Secondary));
-    }
-
-    .day-letter {
-      display: none;
-    }
-
-    .day-abbrev {
-      display: block;
-    }
-  }
-
-  /* --------------------------------------------------------------------------
-     DAY CELLS
-     Mobile: minimal lines (box-shadow for unbroken horizontal lines)
-     Desktop: full grid borders
-     -------------------------------------------------------------------------- */
-  .day-cell {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 2px 4px;
-    min-height: 56px;
-    -webkit-tap-highlight-color: transparent;
-    /* Mobile: horizontal lines only using box-shadow */
-    box-shadow: inset 0 -1px 0 0 hsl(var(--Stroke-Secondary));
-    /* Disable iOS touch callout and selection */
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-         user-select: none;
-  }
-
-  /* Remove bottom shadow on last row (mobile) */
-  .day-cell:nth-last-child(-n + 7) {
-    box-shadow: none;
-  }
-
-  .day-cell.clickable {
-    cursor: pointer;
-  }
-
-  /* Desktop: full grid borders */
-  @media (min-width: 640px) {
-    .day-cell {
-      padding: 0.5rem;
-      min-height: 60px;
-      box-shadow: none;
-      border-top: 1px solid hsl(var(--Stroke-Secondary));
-      border-left: 1px solid hsl(var(--Stroke-Secondary));
-    }
-
-    /* Right border on last column (Saturday) */
-    .day-cell:nth-child(7n + 14) {
-      border-right: 1px solid hsl(var(--Stroke-Secondary));
-    }
-
-    /* Bottom border on last row */
-    .day-cell:nth-last-child(-n + 7) {
-      border-bottom: 1px solid hsl(var(--Stroke-Secondary));
-    }
-  }
-
-  @media (min-width: 768px) {
-    .day-cell {
-      min-height: 70px;
-    }
-  }
-
-  @media (min-width: 1024px) {
-    .day-cell {
-      min-height: 80px;
-    }
-  }
-
-  /* --------------------------------------------------------------------------
-     DAY NUMBERS
-     -------------------------------------------------------------------------- */
-  .day-number {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: hsl(var(--Text-Primary));
-    width: 100%;
-    text-align: center;
-    /* Only transform transition for tactile tap feel - no color transition */
-    transition: transform 0.1s ease-out;
-  }
-
-  @media (min-width: 640px) {
-    .day-number {
-      font-size: 1.125rem;
-      font-weight: 400;
-      text-align: right;
-      margin-bottom: 0.5rem;
-    }
-  }
-
-  /* --------------------------------------------------------------------------
-     DAY STATES
-     -------------------------------------------------------------------------- */
-
-  /*
-   * Interaction states - designed for clean, responsive feedback
-   *
-   * Desktop:
-   * - Hover: subtle number shrink (no background change to avoid conflicts)
-   * - Active (mousedown): stronger number shrink
-   * - Selected stays blue regardless of hover
-   *
-   * Mobile:
-   * - Tap: number shrinks on press
-   * - No hover effects (touch devices don't have hover)
-   */
-
-  /* Hover state (desktop only) - subtle scale feedback, no background */
-  @media (hover: hover) and (pointer: fine) {
-    .day-cell.clickable:hover .day-number {
-      transform: scale(0.96);
-    }
-
-    /* Active/click state - stronger shrink on press (desktop) */
-    .day-cell.clickable:active .day-number {
-      transform: scale(0.88);
-    }
-  }
-
-  /* Mobile: no transform animations - just instant state changes */
-
-  /* Past days (not available) - subtle gray to indicate past */
-  .day-cell.past-day {
-    background-color: hsl(var(--BG-Tertiary));
-    cursor: default;
-  }
-
-  .day-cell.past-day .day-number {
-    color: hsl(var(--Text-Tertiary, var(--Text-Tartiary)));
-  }
-
-  /* Past days that WERE available - faded blue tint to show history */
-  .day-cell.past-selected {
-    background-color: hsl(var(--primary-700) / 0.2);
-    cursor: default;
-  }
-
-  .day-cell.past-selected .day-number {
-    color: hsl(var(--Text-Tertiary, var(--Text-Tartiary)));
-  }
-
-  /* Preview days (prev/next month) - transparent, very faint text */
-  .day-cell.preview-day {
-    pointer-events: none;
-    background-color: transparent;
-  }
-
-  .day-cell.preview-day .day-number {
-    color: hsl(var(--Text-Tertiary, var(--Text-Tartiary)) / 0.4);
-  }
-
-  /* Today - no special color for availability variant, just normal text */
-  /* Only highlight today in display/public variants */
-
-  /*
-   * Selection/Deselection styles
-   */
-
-  /* Selected days */
-  .day-cell.selected {
-    background-color: hsl(var(--primary-700));
-  }
-
-  .day-cell.selected .day-number {
-    color: white;
-    font-weight: 600;
-  }
-
-  /* On mobile, maintain the horizontal line even on selected days */
-  @media (max-width: 639px) {
-    .day-cell.selected {
-      box-shadow: inset 0 -1px 0 0 hsl(var(--Stroke-Secondary)) !important;
-    }
-
-    .day-cell.selected:nth-last-child(-n + 7) {
-      box-shadow: none !important;
-    }
-  }
-
-  /* Mobile: button press animation - depress then spring back */
-  @media (hover: none) {
-    .day-cell.selected {
-      animation: button-press 0.15s ease-out !important;
-    }
-
-    .day-cell.selected .day-number {
-      animation: text-appear 0.15s ease-out !important;
-    }
-
-    /* Deselect animation - same press effect */
-    .day-cell.clickable:not(.selected):not(.past-day) {
-      animation: button-depress 0.15s ease-out;
-    }
-
-    .day-cell.clickable:not(.selected):not(.past-day) .day-number {
-      animation: text-depress 0.15s ease-out;
-    }
-  }
-
-  @keyframes button-press {
-    0% {
-      transform: scale(0.88);
-      background-color: hsl(var(--primary-700));
-    }
-    40% {
-      transform: scale(0.88);
-      background-color: hsl(var(--primary-700));
-    }
-    100% {
-      transform: scale(1);
-      background-color: hsl(var(--primary-700));
-    }
-  }
-
-  @keyframes text-appear {
-    0% {
-      transform: scale(0.85);
-      color: white;
-    }
-    40% {
-      transform: scale(0.85);
-      color: white;
-    }
-    100% {
-      transform: scale(1);
-      color: white;
-    }
-  }
-
-  @keyframes button-depress {
-    0% {
-      transform: scale(0.88);
-      background-color: hsl(var(--primary-700));
-    }
-    40% {
-      transform: scale(0.88);
-      background-color: hsl(var(--primary-500));
-    }
-    100% {
-      transform: scale(1);
-      background-color: transparent;
-    }
-  }
-
-  @keyframes text-depress {
-    0% {
-      transform: scale(0.85);
-      color: white;
-    }
-    40% {
-      transform: scale(0.85);
-      color: white;
-    }
-    100% {
-      transform: scale(1);
-      color: hsl(var(--Text-Primary));
-    }
-  }
-
-  /* Days with events (display/public variants) - mobile highlight */
-  @media (max-width: 639px) {
-    .day-cell.has-events {
-      background-color: hsl(var(--Brand-Primary) / 0.12);
-    }
-
-    .day-cell.has-events:active {
-      background-color: hsl(var(--Brand-Primary) / 0.18);
-    }
-  }
-
-  /* Event dots */
-  .event-dots {
-    display: flex;
-    gap: 2px;
-    margin-top: 2px;
-  }
-
-  .event-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: hsl(var(--Calendar-Dot, var(--Brand-Primary)));
-    transition: transform 0.15s ease;
-  }
-
-  @media (min-width: 640px) {
-    .day-cell:hover .event-dot {
-      transform: scale(1.3);
-    }
-  }
-
-  /* --------------------------------------------------------------------------
-     LEGEND
-     -------------------------------------------------------------------------- */
-  .calendar-legend {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 1.5rem;
-    padding-top: 1rem;
-  }
-
-  .legend-item {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .legend-dot {
-    width: 1.25rem;
-    height: 1.25rem;
-    border-radius: 4px;
-  }
-
-  .legend-dot--available {
-    background-color: hsl(var(--primary-700));
-    border: 1px solid hsl(var(--primary-700));
-  }
-
-  .legend-dot--unavailable {
-    background-color: hsl(var(--BG-Secondary));
-    border: 2px solid hsl(var(--Text-Tertiary, var(--Text-Tartiary)));
-  }
-
-  .legend-label {
-    font-size: 0.875rem;
-    color: hsl(var(--Text-Primary));
-  }
-
-  /* --------------------------------------------------------------------------
-     ANIMATION
-     -------------------------------------------------------------------------- */
-  .animate-spin {
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .nav-btn,
-    .today-btn,
-    .day-cell,
-    .day-number,
-    .event-dot {
-      transition: none;
-    }
-
-    .day-cell.selected {
-      animation: none;
-    }
-  }
-</style>