@getmicdrop/svelte-components 2.0.13 → 2.1.0

package/dist/components/Calendar/MiniMonthCalendar.svelte

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