Cleanup

src/assets/layout.css

@@ -1,14 +1,9 @@
-/* Layout variables */
 :root {
-  /* Layout */
+  --week-w: 3rem;
-  --row-h: 2.2em;
+  --day-w: 1fr;
-  --label-w: minmax(4em, 8%);
+  --month-w: 2rem;
-  --cell-w: 1fr;
+  --row-h: 15vh;
-  --cell-h: 12vh;
-  --overlay-w: minmax(3rem, 5%);
 }
-
-/* Layout & typography */
 * {
   box-sizing: border-box;
 }
@@ -30,17 +25,8 @@ body {
     Arial;
   background: var(--bg);
   color: var(--ink);
-  /* Prevent body scrolling / unwanted scrollbars due to mobile browser UI chrome affecting vh */
   overflow: hidden;
 }
-
-/* Ensure root app container doesn't introduce its own scrollbars */
-#app {
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-}
-
 header {
   display: flex;
   align-items: baseline;
@@ -49,12 +35,6 @@ header {
   flex-shrink: 0;
 }
 
-.header-controls {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
 .today-date {
   cursor: pointer;
 }
@@ -64,12 +44,10 @@ header {
 .today-button:hover {
   opacity: 0.8;
 }
-
-/* Header row */
 .calendar-header,
 #calendar-header {
   display: grid;
-  grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w);
+  grid-template-columns: var(--week-w) repeat(7, var(--day-w)) var(--month-w);
   border-bottom: 0.2em solid var(--muted);
   align-items: last baseline;
   flex-shrink: 0;
@@ -100,42 +78,17 @@ header {
 #calendar-viewport::-webkit-scrollbar {
   display: none;
 }
-
-.jogwheel-viewport,
-#jogwheel-viewport {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: var(--overlay-w);
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-width: none;
-  z-index: 20;
-  cursor: ns-resize;
-}
-.jogwheel-viewport::-webkit-scrollbar,
-#jogwheel-viewport::-webkit-scrollbar {
-  display: none;
-}
-
-.jogwheel-content,
-#jogwheel-content {
-  position: relative;
-  width: 100%;
-}
 .calendar-content,
 #calendar-content {
   position: relative;
 }
-
 /* Week row: label + 7-day grid + jogwheel column */
 .week-row {
   display: grid;
-  grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w);
+  grid-template-columns: var(--week-w) repeat(7, var(--day-w)) var(--month-w);
   position: relative;
   overflow: visible;
-  height: var(--cell-h);
+  height: var(--row-h);
   scroll-snap-align: start;
   width: 100%;
 }
@@ -152,7 +105,7 @@ header {
 }
 
 .week-label {
-  height: var(--cell-h);
+  height: var(--row-h);
 }
 /* 7-day grid inside each week row */
 .week-row > .days-grid {

src/components/BaseDialog.vue

@@ -1,22 +1,37 @@
 <script setup>
-import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted, nextTick, useAttrs } from 'vue'
+
+// Disable automatic attr inheritance so we can forward class/style specifically to the modal element
+defineOptions({ inheritAttrs: false })
 
 const props = defineProps({
   modelValue: { type: Boolean, default: false },
   title: { type: String, default: '' },
   draggable: { type: Boolean, default: true },
   autoFocus: { type: Boolean, default: true },
+  // Optional external anchor element (e.g., a day cell) to position the dialog below.
+  // If not provided, falls back to internal anchorRef span (original behavior).
+  anchorEl: { type: Object, default: null },
 })
 
 const emit = defineEmits(['update:modelValue', 'opened', 'closed', 'submit'])
 
 const modalRef = ref(null)
+const anchorRef = ref(null)
 const isDragging = ref(false)
 const dragOffset = ref({ x: 0, y: 0 })
 const modalPosition = ref({ x: 0, y: 0 })
 const dialogWidth = ref(null)
 const dialogHeight = ref(null)
 const hasMoved = ref(false)
+const margin = 8 // viewport margin in px to keep dialog from touching edges
+
+// Collect incoming non-prop attributes (e.g., class / style from usage site)
+const attrs = useAttrs()
+
+function clamp(val, min, max) {
+  return Math.min(Math.max(val, min), max)
+}
 
 function startDrag(event) {
   if (!props.draggable || !modalRef.value) return
@@ -41,10 +56,15 @@ function startDrag(event) {
 }
 function handleDrag(event) {
   if (!isDragging.value) return
-  modalPosition.value = {
+  let x = event.clientX - dragOffset.value.x
-    x: event.clientX - dragOffset.value.x,
+  let y = event.clientY - dragOffset.value.y
-    y: event.clientY - dragOffset.value.y,
+  const w = dialogWidth.value || modalRef.value?.offsetWidth || 0
-  }
+  const h = dialogHeight.value || modalRef.value?.offsetHeight || 0
+  const vw = window.innerWidth
+  const vh = window.innerHeight
+  x = clamp(x, margin, Math.max(margin, vw - w - margin))
+  y = clamp(y, margin, Math.max(margin, vh - h - margin))
+  modalPosition.value = { x, y }
   event.preventDefault()
 }
 function stopDrag() {
@@ -55,20 +75,35 @@ function stopDrag() {
 }
 
 const modalStyle = computed(() => {
-  if (hasMoved.value) {
+  // Always position relative to calculated modalPosition once opened
-    return {
+  if (modalRef.value && props.modelValue) {
+    const style = {
       transform: 'none',
-      left: `${modalPosition.value.x}px`,
+      left: modalPosition.value.x + 'px',
-      top: `${modalPosition.value.y}px`,
+      top: modalPosition.value.y + 'px',
       bottom: 'auto',
       right: 'auto',
-      width: dialogWidth.value ? dialogWidth.value + 'px' : undefined,
-      height: dialogHeight.value ? dialogHeight.value + 'px' : undefined,
     }
+    if (hasMoved.value) {
+      style.width = dialogWidth.value ? dialogWidth.value + 'px' : undefined
+      style.height = dialogHeight.value ? dialogHeight.value + 'px' : undefined
+    }
+    return style
   }
   return {}
 })
 
+// Merge external class / style with internal ones so parent usage like
+// <BaseDialog class="settings-modal" :style="{ top: '...' }" /> works even with fragment root.
+const modalAttrs = computed(() => {
+  const { class: extClass, style: extStyle, ...rest } = attrs
+  return {
+    ...rest,
+    class: ['ec-modal', extClass].filter(Boolean),
+    style: [modalStyle.value, extStyle].filter(Boolean), // external style overrides internal
+  }
+})
+
 function close() {
   emit('update:modelValue', false)
   emit('closed')
@@ -81,12 +116,34 @@ function handleKeydown(e) {
 onMounted(() => document.addEventListener('keydown', handleKeydown))
 onUnmounted(() => document.removeEventListener('keydown', handleKeydown))
 
+function positionNearAnchor() {
+  const anchor = props.anchorEl || anchorRef.value
+  if (!anchor) return
+  const rect = anchor.getBoundingClientRect()
+  const offsetY = 8 // vertical gap below the anchor
+  const w = modalRef.value?.offsetWidth || dialogWidth.value || 320
+  const h = modalRef.value?.offsetHeight || dialogHeight.value || 200
+  const vw = window.innerWidth
+  const vh = window.innerHeight
+  let x = rect.left
+  let y = rect.bottom + offsetY
+  // If anchor is wider than dialog and would overflow right edge, clamp; otherwise keep left align
+  x = clamp(x, margin, Math.max(margin, vw - w - margin))
+  y = clamp(y, margin, Math.max(margin, vh - h - margin))
+  modalPosition.value = { x, y }
+}
+
 watch(
   () => props.modelValue,
   async (v) => {
     if (v) {
       emit('opened')
       await nextTick()
+      // Reset movement state each time opened
+      hasMoved.value = false
+      dialogWidth.value = null
+      dialogHeight.value = null
+      positionNearAnchor()
       if (props.autoFocus) {
         const el = modalRef.value?.querySelector('[autofocus]')
         if (el) el.focus()
@@ -94,10 +151,44 @@ watch(
     }
   },
 )
+
+// Reposition if anchorEl changes while open and user hasn't dragged dialog yet
+watch(
+  () => props.anchorEl,
+  () => {
+    if (props.modelValue && !hasMoved.value) {
+      nextTick(() => positionNearAnchor())
+    }
+  },
+)
+
+function handleResize() {
+  if (!props.modelValue) return
+  // Re-clamp current position, and if not moved recalc near anchor
+  if (!hasMoved.value) positionNearAnchor()
+  else if (modalRef.value) {
+    const w = modalRef.value.offsetWidth
+    const h = modalRef.value.offsetHeight
+    const vw = window.innerWidth
+    const vh = window.innerHeight
+    modalPosition.value = {
+      x: clamp(modalPosition.value.x, margin, Math.max(margin, vw - w - margin)),
+      y: clamp(modalPosition.value.y, margin, Math.max(margin, vh - h - margin)),
+    }
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+})
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
 </script>
 
 <template>
-  <div v-if="modelValue" class="ec-modal" ref="modalRef" :style="modalStyle">
+  <span ref="anchorRef" class="ec-modal-anchor" aria-hidden="true"></span>
+  <div v-if="modelValue" ref="modalRef" v-bind="modalAttrs">
     <form class="ec-form" @submit.prevent="emit('submit')">
       <header class="ec-header" @pointerdown="startDrag">
         <h2 class="ec-title">
@@ -117,9 +208,7 @@ watch(
 
 <style scoped>
 .ec-modal {
-  position: fixed;
+  position: fixed; /* still fixed for overlay & dragging, but now top/left are set dynamically */
-  bottom: 3em;
-  right: 2em;
   background: color-mix(in srgb, var(--panel) 85%, transparent);
   backdrop-filter: blur(0.625em);
   -webkit-backdrop-filter: blur(0.625em);
@@ -133,6 +222,11 @@ watch(
   z-index: 1000;
   overflow: hidden;
 }
+.ec-modal-anchor {
+  display: inline-block;
+  width: 0;
+  height: 0;
+}
 .ec-form {
   display: grid;
   grid-template-rows: auto 1fr auto;

src/components/Calendar.vue

@@ -1,73 +0,0 @@
-<template>
-  <div class="wrap">
-    <!-- AppHeader component reference removed (file missing); add inline header with Settings button -->
-    <div class="inline-header">
-      <h1 class="app-title">Calendar</h1>
-      <div class="header-actions">
-        <button type="button" class="settings-btn" @click="openSettings">Settings</button>
-      </div>
-    </div>
-    <div class="calendar-container" ref="containerEl">
-      <CalendarGrid />
-      <Jogwheel />
-    </div>
-    <EventDialog />
-    <SettingsDialog ref="settingsDialog" />
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import CalendarGrid from './CalendarGrid.vue'
-import Jogwheel from './Jogwheel.vue'
-import EventDialog from './EventDialog.vue'
-import SettingsDialog from './SettingsDialog.vue'
-import { useCalendarStore } from '@/stores/CalendarStore'
-
-const calendarStore = useCalendarStore()
-const containerEl = ref(null)
-const settingsDialog = ref(null)
-
-function openSettings() {
-  settingsDialog.value?.open()
-}
-
-let intervalId
-
-onMounted(() => {
-  calendarStore.setToday()
-  intervalId = setInterval(() => {
-    calendarStore.setToday()
-  }, 1000)
-})
-
-onBeforeUnmount(() => {
-  clearInterval(intervalId)
-})
-</script>
-
-<style scoped>
-.inline-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1rem;
-}
-.app-title {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-.settings-btn {
-  border: 1px solid var(--muted);
-  background: var(--panel-alt, transparent);
-  color: var(--ink);
-  padding: 0.4rem 0.75rem;
-  border-radius: 0.5rem;
-  cursor: pointer;
-  font-size: 0.75rem;
-}
-.settings-btn:hover {
-  background: var(--muted);
-}
-</style>

src/components/CalendarDay.vue

@@ -24,7 +24,6 @@ const props = defineProps({
     <h1>{{ props.day.displayText }}</h1>
     <span v-if="props.day.lunarPhase" class="lunar-phase">{{ props.day.lunarPhase }}</span>
 
-    <!-- Holiday indicator -->
     <div v-if="props.day.holiday" class="holiday-info">
       <span class="holiday-name" :title="props.day.holiday.name">
         {{ props.day.holiday.name }}
@@ -46,7 +45,7 @@ const props = defineProps({
   padding: 0.25em;
   overflow: hidden;
   width: 100%;
-  height: var(--cell-h);
+  height: var(--row-h);
   font-weight: 700;
   transition: background-color 0.15s ease;
 }
@@ -81,37 +80,34 @@ const props = defineProps({
 .cell.selected h1 {
   color: var(--strong);
 }
-
 .lunar-phase {
   position: absolute;
-  top: 0.1em;
+  top: 0.5em;
-  right: 0.1em;
+  right: 0.2em;
   font-size: 0.8em;
   opacity: 0.7;
 }
-
 .cell.holiday {
-  /* Remove solid background & border color overrides; use gradient overlay instead */
+  background-image: linear-gradient(
-  position: relative;
-}
-.cell.holiday::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
     135deg,
-    var(--holiday-grad-start, rgba(255, 255, 255, 0.1)) 0%,
+    var(--holiday-grad-start, rgba(255, 255, 255, 0.5)) 0%,
     var(--holiday-grad-end, rgba(255, 255, 255, 0)) 70%
   );
-  pointer-events: none;
+}
-  mix-blend-mode: normal; /* can switch to 'overlay' or 'screen' if thematic */
+@media (prefers-color-scheme: dark) {
+  .cell.holiday {
+    background-image: linear-gradient(
+      135deg,
+      var(--holiday-grad-start, rgba(255, 255, 255, 0.1)) 0%,
+      var(--holiday-grad-end, rgba(255, 255, 255, 0)) 70%
+    );
+  }
 }
 .cell.holiday h1 {
   /* Slight emphasis without forcing a specific hue */
   color: var(--holiday);
   text-shadow: 0 0 0.3em rgba(255, 255, 255, 0.4);
 }
-
 .holiday-info {
   position: absolute;
   bottom: 0.1em;
@@ -119,7 +115,7 @@ const props = defineProps({
   right: 0.1em;
   line-height: 1;
   overflow: hidden;
-  font-size: clamp(1.2vw, 0.6em, 1.2em);
+  font-size: clamp(1.2vw, 0.6em, 1em);
 }
 
 .holiday-name {

src/components/CalendarGrid.vue

@@ -1,176 +0,0 @@
-<template>
-  <div class="calendar-header">
-    <div class="year-label" @wheel.prevent="handleWheel">{{ calendarStore.viewYear }}</div>
-    <div v-for="day in weekdayNames" :key="day" class="dow" :class="{ weekend: isWeekend(day) }">
-      {{ day }}
-    </div>
-    <div class="overlay-header-spacer"></div>
-  </div>
-  <div class="calendar-viewport" ref="viewportEl" @scroll="handleScroll">
-    <div class="calendar-content" :style="{ height: `${totalVirtualWeeks * rowHeight}px` }">
-      <WeekRow
-        v.for="week in visibleWeeks"
-        :key="week.virtualWeek"
-        :week="week"
-        :style="{ top: `${(week.virtualWeek - minVirtualWeek) * rowHeight}px` }"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
-import { useCalendarStore } from '@/stores/CalendarStore'
-import {
-  getLocalizedWeekdayNames,
-  getLocaleWeekendDays,
-  getLocaleFirstDay,
-  getISOWeek,
-  getISOWeekYear,
-  fromLocalString,
-  toLocalString,
-  mondayIndex,
-  DEFAULT_TZ,
-  MIN_YEAR,
-  MAX_YEAR,
-} from '@/utils/date'
-import { addDays } from 'date-fns'
-import WeekRow from './WeekRow.vue'
-
-const calendarStore = useCalendarStore()
-const viewportEl = ref(null)
-const rowHeight = ref(64) // Default value, will be computed
-const totalVirtualWeeks = ref(0)
-const minVirtualWeek = ref(0)
-const visibleWeeks = ref([])
-
-const config = {
-  weekend: getLocaleWeekendDays(),
-}
-
-// Anchor Monday (or locale first day) reference date
-const baseDate = new Date(1970, 0, 4 + getLocaleFirstDay())
-const WEEK_MS = 7 * 86400000
-
-const weekdayNames = getLocalizedWeekdayNames()
-
-const isWeekend = (day) => {
-  const dayIndex = weekdayNames.indexOf(day)
-  return config.weekend[(dayIndex + 1) % 7]
-}
-
-const getWeekIndex = (date) => {
-  const monday = addDays(date, -mondayIndex(date))
-  return Math.floor((monday.getTime() - baseDate.getTime()) / WEEK_MS)
-}
-
-const getMondayForVirtualWeek = (virtualWeek) => addDays(baseDate, virtualWeek * 7)
-
-const computeRowHeight = () => {
-  const el = document.createElement('div')
-  el.style.position = 'absolute'
-  el.style.visibility = 'hidden'
-  el.style.height = 'var(--cell-h)'
-  document.body.appendChild(el)
-  const h = el.getBoundingClientRect().height || 64
-  el.remove()
-  return Math.round(h)
-}
-
-const updateVisibleWeeks = () => {
-  if (!viewportEl.value) return
-
-  const scrollTop = viewportEl.value.scrollTop
-  const viewportH = viewportEl.value.clientHeight
-
-  const topDisplayIndex = Math.floor(scrollTop / rowHeight.value)
-  const topVW = topDisplayIndex + minVirtualWeek.value
-  const monday = getMondayForVirtualWeek(topVW)
-  const year = getISOWeekYear(monday)
-  if (calendarStore.viewYear !== year) {
-    calendarStore.setViewYear(year)
-  }
-
-  const buffer = 10
-  const startIdx = Math.floor((scrollTop - buffer * rowHeight.value) / rowHeight.value)
-  const endIdx = Math.ceil((scrollTop + viewportH + buffer * rowHeight.value) / rowHeight.value)
-
-  const startVW = Math.max(minVirtualWeek.value, startIdx + minVirtualWeek.value)
-  const endVW = Math.min(
-    totalVirtualWeeks.value + minVirtualWeek.value - 1,
-    endIdx + minVirtualWeek.value,
-  )
-
-  const newVisibleWeeks = []
-  for (let vw = startVW; vw <= endVW; vw++) {
-    newVisibleWeeks.push({ virtualWeek: vw, monday: getMondayForVirtualWeek(vw) })
-  }
-  visibleWeeks.value = newVisibleWeeks
-}
-
-const handleScroll = () => {
-  requestAnimationFrame(updateVisibleWeeks)
-}
-
-const handleWheel = (e) => {
-  const currentYear = calendarStore.viewYear
-  const delta = Math.round(e.deltaY * (1 / 3))
-  if (!delta) return
-  const newYear = Math.max(MIN_YEAR, Math.min(MAX_YEAR, currentYear + delta))
-  if (newYear === currentYear) return
-
-  const topDisplayIndex = Math.floor(viewportEl.value.scrollTop / rowHeight.value)
-  const currentWeekIndex = topDisplayIndex + minVirtualWeek.value
-
-  navigateToYear(newYear, currentWeekIndex)
-}
-
-const navigateToYear = (targetYear, weekIndex) => {
-  const monday = getMondayForVirtualWeek(weekIndex)
-  const week = getISOWeek(monday)
-  const jan4 = new Date(targetYear, 0, 4)
-  const jan4Monday = addDays(jan4, -mondayIndex(jan4))
-  const targetMonday = addDays(jan4Monday, (week - 1) * 7)
-  scrollToTarget(targetMonday)
-}
-
-const scrollToTarget = (target) => {
-  let targetWeekIndex
-  if (target instanceof Date) {
-    targetWeekIndex = getWeekIndex(target)
-  } else {
-    targetWeekIndex = target
-  }
-
-  const targetScrollTop = (targetWeekIndex - minVirtualWeek.value) * rowHeight.value
-  viewportEl.value.scrollTop = targetScrollTop
-  updateVisibleWeeks()
-}
-
-const goToTodayHandler = () => {
-  const today = new Date()
-  const top = addDays(today, -21)
-  scrollToTarget(top)
-}
-
-onMounted(() => {
-  rowHeight.value = computeRowHeight()
-
-  const minYearDate = new Date(MIN_YEAR, 0, 1)
-  const maxYearLastDay = new Date(MAX_YEAR, 11, 31)
-  const lastWeekMonday = addDays(maxYearLastDay, -mondayIndex(maxYearLastDay))
-
-  minVirtualWeek.value = getWeekIndex(minYearDate)
-  const maxVirtualWeek = getWeekIndex(lastWeekMonday)
-  totalVirtualWeeks.value = maxVirtualWeek - minVirtualWeek.value + 1
-
-  const initialDate = fromLocalString(calendarStore.today, DEFAULT_TZ)
-  scrollToTarget(initialDate)
-
-  document.addEventListener('goToToday', goToTodayHandler)
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('goToToday', goToTodayHandler)
-})
-</script>

src/components/CalendarHeader.vue

@@ -119,7 +119,7 @@ const weekdayNames = computed(() => {
 <style scoped>
 .calendar-header {
   display: grid;
-  grid-template-columns: var(--label-w) repeat(7, 1fr) 3rem;
+  grid-template-columns: var(--week-w) repeat(7, 1fr) var(--month-w);
   border-bottom: 2px solid var(--muted);
   align-items: last baseline;
   flex-shrink: 0;
@@ -132,20 +132,11 @@ const weekdayNames = computed(() => {
   -webkit-touch-callout: none;
   -webkit-tap-highlight-color: transparent;
 }
-
-.year-label {
-  display: grid;
-  place-items: center;
-  width: 100%;
-  color: var(--muted);
-  font-size: 1.2em;
-  padding: 0.5rem;
-}
 .dow {
   text-transform: uppercase;
   text-align: center;
-  padding: 0.5rem;
+  font-weight: 600;
-  font-weight: 500;
+  font-size: 1.2em;
 }
 .dow.weekend {
   color: var(--weekend);

src/components/CalendarView.vue

@@ -3,60 +3,31 @@ import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
 import { useCalendarStore } from '@/stores/CalendarStore'
 import CalendarHeader from '@/components/CalendarHeader.vue'
 import CalendarWeek from '@/components/CalendarWeek.vue'
-import Jogwheel from '@/components/Jogwheel.vue'
+import HeaderControls from '@/components/HeaderControls.vue'
-import SettingsDialog from '@/components/SettingsDialog.vue'
 import {
-  getLocalizedMonthName,
+  createScrollManager,
-  monthAbbr,
+  createWeekColumnScrollManager,
-  lunarPhaseSymbol,
+  createMonthScrollManager,
-  pad,
+} from '@/plugins/scrollManager'
-  daysInclusive,
+import { daysInclusive, addDaysStr, MIN_YEAR, MAX_YEAR } from '@/utils/date'
-  addDaysStr,
-  formatDateRange,
-  formatTodayString,
-  getOccurrenceIndex,
-  getVirtualOccurrenceEndDate,
-  getISOWeek,
-  MIN_YEAR,
-  MAX_YEAR,
-} from '@/utils/date'
 import { toLocalString, fromLocalString, DEFAULT_TZ } from '@/utils/date'
-import { addDays, differenceInCalendarDays, differenceInWeeks } from 'date-fns'
+import { addDays, differenceInWeeks } from 'date-fns'
-import { getHolidayForDate } from '@/utils/holidays'
+import { createVirtualWeekManager } from '@/plugins/virtualWeeks'
 
 const calendarStore = useCalendarStore()
-const viewport = ref(null)
-const settingsDialog = ref(null)
-
 const emit = defineEmits(['create-event', 'edit-event'])
-
+const viewport = ref(null)
-function createEventFromSelection() {
-  if (!selection.value.startDate || selection.value.dayCount === 0) return null
-
-  return {
-    startDate: selection.value.startDate,
-    dayCount: selection.value.dayCount,
-    endDate: addDaysStr(selection.value.startDate, selection.value.dayCount - 1),
-  }
-}
-
-const scrollTop = ref(0)
 const viewportHeight = ref(600)
 const rowHeight = ref(64)
-// Probe element & observer for dynamic var(--cell-h) changes
 const rowProbe = ref(null)
 let rowProbeObserver = null
-
 const baseDate = computed(() => new Date(1970, 0, 4 + calendarStore.config.first_day))
-
 const selection = ref({ startDate: null, dayCount: 0 })
 const isDragging = ref(false)
 const dragAnchor = ref(null)
-
 const DOUBLE_TAP_DELAY = 300
 const pendingTap = ref({ date: null, time: 0, type: null })
 const suppressMouseUntil = ref(0)
-
 function normalizeDate(val) {
   if (typeof val === 'string') return val
   if (val && typeof val === 'object') {
@@ -99,73 +70,54 @@ const totalVirtualWeeks = computed(() => {
   return maxVirtualWeek.value - minVirtualWeek.value + 1
 })
 
+const contentHeight = computed(() => {
+  return totalVirtualWeeks.value * rowHeight.value
+})
+
+// Virtual weeks manager (after dependent refs exist)
+const vwm = createVirtualWeekManager({
+  calendarStore,
+  viewport,
+  viewportHeight,
+  rowHeight,
+  selection,
+  baseDate,
+  minVirtualWeek,
+  maxVirtualWeek,
+  contentHeight,
+})
+const visibleWeeks = vwm.visibleWeeks
+const { scheduleWindowUpdate, resetWeeks, refreshEvents } = vwm
+
+// Scroll managers (after scheduleWindowUpdate available)
+const scrollManager = createScrollManager({ viewport, scheduleRebuild: scheduleWindowUpdate })
+const { scrollTop, setScrollTop, onScroll } = scrollManager
+const weekColumnScrollManager = createWeekColumnScrollManager({
+  viewport,
+  viewportHeight,
+  contentHeight,
+  setScrollTop,
+})
+const { isWeekColDragging, handleWeekColMouseDown, handlePointerLockChange } =
+  weekColumnScrollManager
+const monthScrollManager = createMonthScrollManager({
+  viewport,
+  viewportHeight,
+  contentHeight,
+  setScrollTop,
+})
+const { handleMonthScrollPointerDown, handleMonthScrollTouchStart, handleMonthScrollWheel } =
+  monthScrollManager
+
+// Provide scroll refs to virtual week manager
+vwm.attachScroll(scrollTop, setScrollTop)
+
 const initialScrollTop = computed(() => {
   const nowDate = new Date(calendarStore.now)
   const targetWeekIndex = getWeekIndex(nowDate) - 3
   return (targetWeekIndex - minVirtualWeek.value) * rowHeight.value
 })
 
-const selectedDateRange = computed(() => {
-  if (!selection.value.start || !selection.value.end) return ''
-  return formatDateRange(
-    fromLocalString(selection.value.start),
-    fromLocalString(selection.value.end),
-  )
-})
-
-const todayString = computed(() => {
-  const d = new Date(calendarStore.now)
-  return formatTodayString(d)
-})
-
-// PERFORMANCE: Maintain a manual cache of computed weeks instead of relying on
-// deep reactive tracking of every event & day object. We rebuild lazily when
-// (a) scrolling changes the needed range or (b) eventsMutation counter bumps.
-const visibleWeeks = ref([])
-let lastScrollRange = { startVW: null, endVW: null }
-let pendingRebuild = false
-
-function scheduleRebuild(reason) {
-  if (pendingRebuild) return
-  pendingRebuild = true
-  // Use requestIdleCallback when available, else fallback to rAF
-  const cb = () => {
-    pendingRebuild = false
-    rebuildVisibleWeeks(reason)
-  }
-  if ('requestIdleCallback' in window) {
-    requestIdleCallback(cb, { timeout: 120 })
-  } else {
-    requestAnimationFrame(cb)
-  }
-}
-
-function rebuildVisibleWeeks(reason) {
-  const buffer = 10
-  const startIdx = Math.floor((scrollTop.value - buffer * rowHeight.value) / rowHeight.value)
-  const endIdx = Math.ceil(
-    (scrollTop.value + viewportHeight.value + buffer * rowHeight.value) / rowHeight.value,
-  )
-  const startVW = Math.max(minVirtualWeek.value, startIdx + minVirtualWeek.value)
-  const endVW = Math.min(maxVirtualWeek.value, endIdx + minVirtualWeek.value)
-  if (
-    reason === 'scroll' &&
-    lastScrollRange.startVW === startVW &&
-    lastScrollRange.endVW === endVW &&
-    visibleWeeks.value.length
-  ) {
-    return
-  }
-  const weeks = []
-  for (let vw = startVW; vw <= endVW; vw++) weeks.push(createWeek(vw))
-  visibleWeeks.value = weeks
-  lastScrollRange = { startVW, endVW }
-}
-
-const contentHeight = computed(() => {
-  return totalVirtualWeeks.value * rowHeight.value
-})
-
 function computeRowHeight() {
   if (rowProbe.value) {
     const h = rowProbe.value.getBoundingClientRect().height || 64
@@ -175,7 +127,7 @@ function computeRowHeight() {
   const el = document.createElement('div')
   el.style.position = 'absolute'
   el.style.visibility = 'hidden'
-  el.style.height = 'var(--cell-h)'
+  el.style.height = 'var(--row-h)'
   document.body.appendChild(el)
   const h = el.getBoundingClientRect().height || 64
   el.remove()
@@ -189,186 +141,20 @@ function measureFromProbe() {
   const newH = Math.round(h)
   if (newH !== rowHeight.value) {
     const oldH = rowHeight.value
-    const currentTopVW = Math.floor(scrollTop.value / oldH) + minVirtualWeek.value
+    // Anchor: keep the same top virtual week visible.
+    const topVirtualWeek = Math.floor(scrollTop.value / oldH) + minVirtualWeek.value
     rowHeight.value = newH
-    const newScrollTop = (currentTopVW - minVirtualWeek.value) * newH
+    const newScrollTop = (topVirtualWeek - minVirtualWeek.value) * newH
-    scrollTop.value = newScrollTop
+    setScrollTop(newScrollTop, 'row-height-change')
-    if (viewport.value) viewport.value.scrollTop = newScrollTop
+    resetWeeks('row-height-change')
-    scheduleRebuild('row-height-change')
   }
 }
 
-function getWeekIndex(date) {
+const { getWeekIndex, getFirstDayForVirtualWeek, goToToday, handleHeaderYearChange } = vwm
-  const dayOffset = (date.getDay() - calendarStore.config.first_day + 7) % 7
-  const firstDayOfWeek = addDays(date, -dayOffset)
-  return differenceInWeeks(firstDayOfWeek, baseDate.value)
-}
 
-function getFirstDayForVirtualWeek(virtualWeek) {
+// createWeek logic moved to virtualWeeks plugin
-  return addDays(baseDate.value, virtualWeek * 7)
-}
 
-function createWeek(virtualWeek) {
+// goToToday now provided by manager
-  const firstDay = getFirstDayForVirtualWeek(virtualWeek)
-  const isoAnchor = addDays(firstDay, (4 - firstDay.getDay() + 7) % 7)
-  const weekNumber = getISOWeek(isoAnchor)
-  const days = []
-  let cur = new Date(firstDay)
-  let hasFirst = false
-  let monthToLabel = null
-  let labelYear = null
-
-  const repeatingBases = []
-  if (calendarStore.events) {
-    for (const ev of calendarStore.events.values()) {
-      if (ev.isRepeating) repeatingBases.push(ev)
-    }
-  }
-
-  for (let i = 0; i < 7; i++) {
-    const dateStr = toLocalString(cur, DEFAULT_TZ)
-    const storedEvents = []
-
-    for (const ev of calendarStore.events.values()) {
-      if (!ev.isRepeating && dateStr >= ev.startDate && dateStr <= ev.endDate) {
-        storedEvents.push(ev)
-      }
-    }
-    const dayEvents = [...storedEvents]
-    // Expand repeating events into per-day occurrences (including virtual spans) when they cover this date.
-    for (const base of repeatingBases) {
-      // Base event's original span: include it directly as occurrence index 0.
-      if (dateStr >= base.startDate && dateStr <= base.endDate) {
-        dayEvents.push({
-          ...base,
-          _recurrenceIndex: 0,
-          _baseId: base.id,
-        })
-        continue
-      }
-
-      const baseStart = fromLocalString(base.startDate, DEFAULT_TZ)
-      const baseEnd = fromLocalString(base.endDate, DEFAULT_TZ)
-      const spanDays = Math.max(0, differenceInCalendarDays(baseEnd, baseStart))
-      const currentDate = fromLocalString(dateStr, DEFAULT_TZ)
-
-      let occurrenceFound = false
-
-      // Walk backwards within the base span to locate a matching virtual occurrence start.
-      for (let offset = 0; offset <= spanDays && !occurrenceFound; offset++) {
-        const candidateStart = addDays(currentDate, -offset)
-        const candidateStartStr = toLocalString(candidateStart, DEFAULT_TZ)
-
-        const occurrenceIndex = getOccurrenceIndex(base, candidateStartStr, DEFAULT_TZ)
-        if (occurrenceIndex !== null) {
-          const virtualEndDate = getVirtualOccurrenceEndDate(base, candidateStartStr, DEFAULT_TZ)
-
-          if (dateStr >= candidateStartStr && dateStr <= virtualEndDate) {
-            const virtualId = base.id + '_v_' + candidateStartStr
-            const alreadyExists = dayEvents.some((ev) => ev.id === virtualId)
-
-            if (!alreadyExists) {
-              dayEvents.push({
-                ...base,
-                id: virtualId,
-                startDate: candidateStartStr,
-                endDate: virtualEndDate,
-                _recurrenceIndex: occurrenceIndex,
-                _baseId: base.id,
-              })
-            }
-            occurrenceFound = true
-          }
-        }
-      }
-    }
-    const dow = cur.getDay()
-    const isFirst = cur.getDate() === 1
-
-    if (isFirst) {
-      hasFirst = true
-      monthToLabel = cur.getMonth()
-      labelYear = cur.getFullYear()
-    }
-
-    let displayText = String(cur.getDate())
-    if (isFirst) {
-      if (cur.getMonth() === 0) {
-        displayText = cur.getFullYear()
-      } else {
-        displayText = monthAbbr[cur.getMonth()].slice(0, 3).toUpperCase()
-      }
-    }
-
-    let holiday = null
-    if (calendarStore.config.holidays.enabled) {
-      calendarStore._ensureHolidaysInitialized?.()
-      holiday = getHolidayForDate(dateStr)
-    }
-
-    days.push({
-      date: dateStr,
-      dayOfMonth: cur.getDate(),
-      displayText,
-      monthClass: monthAbbr[cur.getMonth()],
-      isToday: dateStr === calendarStore.today,
-      isWeekend: calendarStore.weekend[dow],
-      isFirstDay: isFirst,
-      lunarPhase: lunarPhaseSymbol(cur),
-      holiday: holiday,
-      isHoliday: holiday !== null,
-      isSelected:
-        selection.value.startDate &&
-        selection.value.dayCount > 0 &&
-        dateStr >= selection.value.startDate &&
-        dateStr <= addDaysStr(selection.value.startDate, selection.value.dayCount - 1),
-      events: dayEvents,
-    })
-    cur = addDays(cur, 1)
-  }
-
-  let monthLabel = null
-  if (hasFirst && monthToLabel !== null) {
-    if (labelYear && labelYear <= MAX_YEAR) {
-      let weeksSpan = 0
-      const d = addDays(cur, -1)
-
-      for (let i = 0; i < 6; i++) {
-        const probe = addDays(cur, -1 + i * 7)
-        d.setTime(probe.getTime())
-        if (d.getMonth() === monthToLabel) weeksSpan++
-      }
-
-      const remainingWeeks = Math.max(1, maxVirtualWeek.value - virtualWeek + 1)
-      weeksSpan = Math.max(1, Math.min(weeksSpan, remainingWeeks))
-
-      const year = String(labelYear).slice(-2)
-      monthLabel = {
-        text: `${getLocalizedMonthName(monthToLabel)} '${year}`,
-        month: monthToLabel,
-        weeksSpan: weeksSpan,
-        height: weeksSpan * rowHeight.value,
-      }
-    }
-  }
-
-  return {
-    virtualWeek,
-    weekNumber: pad(weekNumber),
-    days,
-    monthLabel,
-    top: (virtualWeek - minVirtualWeek.value) * rowHeight.value,
-  }
-}
-
-function goToToday() {
-  const top = addDays(new Date(calendarStore.now), -21)
-  const targetWeekIndex = getWeekIndex(top)
-  scrollTop.value = (targetWeekIndex - minVirtualWeek.value) * rowHeight.value
-  if (viewport.value) {
-    viewport.value.scrollTop = scrollTop.value
-  }
-}
 
 function clearSelection() {
   selection.value = { startDate: null, dayCount: 0 }
@@ -407,6 +193,17 @@ function finalizeDragAndCreate() {
   removeGlobalTouchListeners()
 }
 
+// Build a minimal event creation payload from current selection
+// Returns null if selection is invalid or empty.
+function createEventFromSelection() {
+  const sel = selection.value || {}
+  if (!sel.startDate || !sel.dayCount || sel.dayCount <= 0) return null
+  return {
+    startDate: sel.startDate,
+    dayCount: sel.dayCount,
+  }
+}
+
 function getDateUnderPoint(x, y) {
   const el = document.elementFromPoint(x, y)
   let cur = el
@@ -466,10 +263,9 @@ function getDateFromCoordinates(clientX, clientY) {
   const sampleWeek = viewport.value.querySelector('.week-row')
   if (!sampleWeek) return null
   const labelEl = sampleWeek.querySelector('.week-label')
-  const jogwheelWidth = 48
   const wrRect = sampleWeek.getBoundingClientRect()
   const labelRight = labelEl ? labelEl.getBoundingClientRect().right : wrRect.left
-  const daysAreaRight = wrRect.right - jogwheelWidth
+  const daysAreaRight = wrRect.right
   const daysWidth = daysAreaRight - labelRight
   if (clientX < labelRight || clientX > daysAreaRight) return null
   const col = Math.min(6, Math.max(0, Math.floor(((clientX - labelRight) / daysWidth) * 7)))
@@ -498,15 +294,13 @@ function calculateSelection(anchorStr, otherStr) {
   }
 }
 
-const onScroll = () => {
+// ---------------- Week label column drag scrolling ----------------
-  if (viewport.value) scrollTop.value = viewport.value.scrollTop
+function getWeekLabelRect() {
-  scheduleRebuild('scroll')
+  // Prefer header year label width as stable reference
-}
+  const headerYear = document.querySelector('.calendar-header .year-label')
-
+  if (headerYear) return headerYear.getBoundingClientRect()
-const handleJogwheelScrollTo = (newScrollTop) => {
+  const weekLabel = viewport.value?.querySelector('.week-row .week-label')
-  if (viewport.value) {
+  return weekLabel ? weekLabel.getBoundingClientRect() : null
-    viewport.value.scrollTop = newScrollTop
-  }
 }
 
 onMounted(() => {
@@ -515,16 +309,19 @@ onMounted(() => {
 
   if (viewport.value) {
     viewportHeight.value = viewport.value.clientHeight
-    viewport.value.scrollTop = initialScrollTop.value
+    setScrollTop(initialScrollTop.value, 'initial-mount')
     viewport.value.addEventListener('scroll', onScroll)
+    // Capture mousedown in viewport to allow dragging via week label column
+    viewport.value.addEventListener('mousedown', handleWeekColMouseDown, true)
   }
+  document.addEventListener('pointerlockchange', handlePointerLockChange)
 
   const timer = setInterval(() => {
     calendarStore.updateCurrentDate()
   }, 60000)
 
-  // Initial build after mount & measurement
+  // Initial incremental build (no existing weeks yet)
-  scheduleRebuild('init')
+  scheduleWindowUpdate('init')
 
   if (window.ResizeObserver && rowProbe.value) {
     rowProbeObserver = new ResizeObserver(() => {
@@ -541,6 +338,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
   if (viewport.value) {
     viewport.value.removeEventListener('scroll', onScroll)
+    viewport.value.removeEventListener('mousedown', handleWeekColMouseDown, true)
   }
   if (rowProbeObserver && rowProbe.value) {
     try {
@@ -548,6 +346,7 @@ onBeforeUnmount(() => {
       rowProbeObserver.disconnect()
     } catch (e) {}
   }
+  document.removeEventListener('pointerlockchange', handlePointerLockChange)
 })
 
 const handleDayMouseDown = (d) => {
@@ -577,31 +376,17 @@ const handleEventClick = (payload) => {
   emit('edit-event', payload)
 }
 
-const handleHeaderYearChange = ({ scrollTop: st }) => {
+// header year change delegated to manager
-  const maxScroll = contentHeight.value - viewportHeight.value
-  const clamped = Math.max(0, Math.min(st, isFinite(maxScroll) ? maxScroll : st))
-  scrollTop.value = clamped
-  viewport.value && (viewport.value.scrollTop = clamped)
-}
 
-function openSettings() {
-  settingsDialog.value?.open()
-}
 // Heuristic: rotate month label (180deg) only for predominantly Latin text.
 // We explicitly avoid locale detection; rely solely on characters present.
 // Disable rotation if any CJK Unified Ideograph or Compatibility Ideograph appears.
 function shouldRotateMonth(label) {
   if (!label) return false
-  // Rotate ONLY if any Latin script alphabetic character is present.
+  return /\p{Script=Latin}/u.test(label)
-  // Prefer Unicode script property when supported.
-  try {
-    if (/\p{Script=Latin}/u.test(label)) return true
-  } catch (e) {
-    // Fallback for environments lacking Unicode property escapes.
-    if (/[A-Za-z\u00C0-\u024F\u1E00-\u1EFF]/u.test(label)) return true
-  }
-  return false
 }
+
+// Watch first day changes (e.g., first_day config update) to adjust scroll
 // Keep roughly same visible date when first_day setting changes.
 watch(
   () => calendarStore.config.first_day,
@@ -611,9 +396,8 @@ watch(
     requestAnimationFrame(() => {
       const newTopWeekIndex = getWeekIndex(currentTopDate)
       const newScroll = (newTopWeekIndex - minVirtualWeek.value) * rowHeight.value
-      scrollTop.value = newScroll
+      setScrollTop(newScroll, 'first-day-change')
-      if (viewport.value) viewport.value.scrollTop = newScroll
+      resetWeeks('first-day-change')
-      scheduleRebuild('first-day-change')
     })
   },
 )
@@ -622,111 +406,89 @@ watch(
 watch(
   () => calendarStore.events,
   () => {
-    scheduleRebuild('events')
+    refreshEvents('events')
   },
   { deep: true },
 )
 
+// Reflect selection & events by rebuilding day objects in-place
+watch(
+  () => [selection.value.startDate, selection.value.dayCount],
+  () => refreshEvents('selection'),
+)
+
 // Rebuild if viewport height changes (e.g., resize)
 window.addEventListener('resize', () => {
   if (viewport.value) viewportHeight.value = viewport.value.clientHeight
   measureFromProbe()
-  scheduleRebuild('resize')
+  scheduleWindowUpdate('resize')
 })
 </script>
 
 <template>
-  <!-- hidden probe for measuring var(--cell-h) -->
+  <div class="calendar-view-root">
-  <div ref="rowProbe" class="row-height-probe" aria-hidden="true"></div>
+    <div ref="rowProbe" class="row-height-probe" aria-hidden="true"></div>
-  <!-- existing template root starts below -->
+    <div class="wrap">
-  <div class="wrap">
+      <HeaderControls @go-to-today="goToToday" />
-    <header>
+      <CalendarHeader
-      <h1>Calendar</h1>
+        :scroll-top="scrollTop"
-      <div class="header-controls">
+        :row-height="rowHeight"
-        <div class="today-date" @click="goToToday">{{ todayString }}</div>
+        :min-virtual-week="minVirtualWeek"
-        <!-- Reference historyTick to ensure reactivity of canUndo/canRedo -->
+        @year-change="handleHeaderYearChange"
-        <button
+      />
-          type="button"
+      <div class="calendar-container">
-          class="hist-btn"
+        <div class="calendar-viewport" ref="viewport">
-          :disabled="!calendarStore.historyCanUndo"
+          <!-- Main calendar content (weeks and days) -->
-          @click="calendarStore.$history?.undo()"
+          <div class="main-calendar-area">
-          title="Undo (Ctrl+Z)"
+            <div class="calendar-content" :style="{ height: contentHeight + 'px' }">
-          aria-label="Undo"
+              <CalendarWeek
-        >
+                v-for="week in visibleWeeks"
-          ↶
+                :key="week.virtualWeek"
-        </button>
+                :week="week"
-        <button
+                :dragging="isDragging"
-          type="button"
+                :style="{ top: week.top + 'px' }"
-          class="hist-btn"
+                @day-mousedown="handleDayMouseDown"
-          :disabled="!calendarStore.historyCanRedo"
+                @day-mouseenter="handleDayMouseEnter"
-          @click="calendarStore.$history?.redo()"
+                @day-mouseup="handleDayMouseUp"
-          title="Redo (Ctrl+Shift+Z)"
+                @day-touchstart="handleDayTouchStart"
-          aria-label="Redo"
+                @event-click="handleEventClick"
-        >
+              />
-          ↷
+            </div>
-        </button>
+          </div>
-        <button
+          <!-- Month column area -->
-          type="button"
+          <div class="month-column-area">
-          class="settings-btn"
+            <!-- Month labels -->
-          @click="openSettings"
+            <div class="month-labels-container" :style="{ height: contentHeight + 'px' }">
-          aria-label="Open settings"
+              <template v-for="monthWeek in visibleWeeks" :key="monthWeek.virtualWeek + '-month'">
-          title="Settings"
+                <div
-        >
+                  v-if="monthWeek && monthWeek.monthLabel"
-          ⚙
+                  class="month-label"
-        </button>
+                  :class="monthWeek.monthLabel?.monthClass"
-      </div>
+                  :style="{
-    </header>
+                    height: `calc(var(--row-h) * ${monthWeek.monthLabel?.weeksSpan || 1})`,
-    <CalendarHeader
+                    top: (monthWeek.top || 0) + 'px',
-      :scroll-top="scrollTop"
+                  }"
-      :row-height="rowHeight"
+                  @pointerdown="handleMonthScrollPointerDown"
-      :min-virtual-week="minVirtualWeek"
+                  @touchstart.prevent="handleMonthScrollTouchStart"
-      @year-change="handleHeaderYearChange"
+                  @wheel="handleMonthScrollWheel"
-    />
+                >
-    <div class="calendar-container">
+                  <span :class="{ bottomup: shouldRotateMonth(monthWeek.monthLabel?.text) }">{{
-      <div class="calendar-viewport" ref="viewport">
+                    monthWeek.monthLabel?.text || ''
-        <div class="calendar-content" :style="{ height: contentHeight + 'px' }">
+                  }}</span>
-          <CalendarWeek
+                </div>
-            v-for="week in visibleWeeks"
+              </template>
-            :key="week.virtualWeek"
+            </div>
-            :week="week"
-            :dragging="isDragging"
-            :style="{ top: week.top + 'px' }"
-            @day-mousedown="handleDayMouseDown"
-            @day-mouseenter="handleDayMouseEnter"
-            @day-mouseup="handleDayMouseUp"
-            @day-touchstart="handleDayTouchStart"
-            @event-click="handleEventClick"
-          />
-          <!-- Month labels positioned absolutely -->
-          <div
-            v-for="week in visibleWeeks"
-            :key="`month-${week.virtualWeek}`"
-            v-show="week.monthLabel"
-            class="month-name-label"
-            :class="{ 'no-rotate': !shouldRotateMonth(week.monthLabel?.text) }"
-            :style="{
-              top: week.top + 'px',
-              height: week.monthLabel?.height + 'px',
-            }"
-          >
-            <span>{{ week.monthLabel?.text }}</span>
           </div>
         </div>
       </div>
-      <!-- Jogwheel as sibling to calendar-viewport -->
-      <Jogwheel
-        :total-virtual-weeks="totalVirtualWeeks"
-        :row-height="rowHeight"
-        :viewport-height="viewportHeight"
-        :scroll-top="scrollTop"
-        @scroll-to="handleJogwheelScrollTo"
-      />
     </div>
-    <SettingsDialog ref="settingsDialog" />
   </div>
 </template>
 
 <style scoped>
+.calendar-view-root {
+  display: contents;
+}
 .wrap {
   height: 100vh;
   display: flex;
@@ -745,81 +507,6 @@ header h1 {
   font-size: 1.6rem;
   font-weight: 600;
 }
-.header-controls {
-  display: flex;
-  gap: 0.6rem;
-  align-items: center;
-  margin-left: auto;
-}
-
-.settings-btn {
-  background: transparent;
-  border: none;
-  color: var(--muted);
-  padding: 0;
-  margin: 0;
-  margin-right: 0.6rem;
-  cursor: pointer;
-  font-size: 1.5rem;
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  outline: none;
-}
-.hist-btn {
-  background: transparent;
-  border: none;
-  color: var(--muted);
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-  font-size: 1.2rem;
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  outline: none;
-  width: 1.9rem;
-  height: 1.9rem;
-}
-.hist-btn:disabled {
-  opacity: 0.35;
-  cursor: default;
-}
-.hist-btn:not(:disabled):hover,
-.hist-btn:not(:disabled):focus-visible {
-  color: var(--strong);
-}
-.hist-btn:active:not(:disabled) {
-  transform: scale(0.88);
-}
-.settings-btn:hover {
-  color: var(--strong);
-}
-.settings-btn:focus-visible {
-  /* Keep visual accessibility without background */
-  outline: 2px solid var(--selected);
-  outline-offset: 2px;
-}
-.settings-btn:active {
-  transform: scale(0.88);
-}
-
-.today-date {
-  cursor: pointer;
-  padding: 0.5rem;
-  background: var(--today-btn-bg);
-  color: var(--today-btn-text);
-  border-radius: 4px;
-  white-space: pre-line;
-  text-align: center;
-  font-size: 0.9rem;
-}
-
-.today-date:hover {
-  background: var(--today-btn-hover-bg);
-}
 
 .calendar-container {
   flex: 1;
@@ -838,7 +525,13 @@ header h1 {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
+  display: grid;
+  grid-template-columns: 1fr var(--month-w);
+}
+
+.main-calendar-area {
   position: relative;
+  overflow: hidden;
 }
 
 .calendar-content {
@@ -846,33 +539,52 @@ header h1 {
   width: 100%;
 }
 
-.month-name-label {
+.month-column-area {
+  position: relative;
+  cursor: ns-resize;
+}
+
+.month-labels-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.month-label {
   position: absolute;
-  right: 0;
+  left: 0;
-  width: 3rem; /* Match jogwheel width */
+  width: 100%;
+  background-image: linear-gradient(to bottom, rgba(186, 186, 186, 0.3), rgba(186, 186, 186, 0.2));
   font-size: 2em;
   font-weight: 700;
   color: var(--muted);
   display: flex;
   align-items: center;
   justify-content: center;
-  pointer-events: none;
   z-index: 15;
-  overflow: visible;
+  overflow: hidden;
+  cursor: ns-resize;
+  user-select: none;
+  touch-action: none;
 }
 
-.month-name-label > span {
+.month-label > span {
   display: inline-block;
   white-space: nowrap;
   writing-mode: vertical-rl;
   text-orientation: mixed;
-  transform: rotate(180deg);
   transform-origin: center;
+  pointer-events: none;
 }
 
-.month-name-label.no-rotate > span {
+.bottomup {
-  transform: none;
+  transform: rotate(180deg);
 }
 
-.row-height-probe { position: absolute; visibility: hidden; height: var(--cell-h); pointer-events: none; }
+.row-height-probe {
+  position: absolute;
+  visibility: hidden;
+  height: var(--row-h);
+  pointer-events: none;
+}
 </style>

src/components/CalendarWeek.vue

@@ -33,6 +33,16 @@ const handleDayTouchStart = (dateStr) => {
 const handleEventClick = (payload) => {
   emit('event-click', payload)
 }
+
+// Only apply upside-down rotation (bottomup) for Latin script month labels
+function shouldRotateMonth(label) {
+  if (!label) return false
+  try {
+    return /\p{Script=Latin}/u.test(label)
+  } catch (e) {
+    return /[A-Za-z\u00C0-\u024F\u1E00-\u1EFF]/u.test(label)
+  }
+}
 </script>
 
 <template>
@@ -57,9 +67,9 @@ const handleEventClick = (payload) => {
 <style scoped>
 .week-row {
   display: grid;
-  grid-template-columns: var(--label-w) repeat(7, 1fr) 3rem;
+  grid-template-columns: var(--week-w) repeat(7, 1fr);
   position: absolute;
-  height: var(--cell-h);
+  height: var(--row-h);
   width: 100%;
 }
 
@@ -70,13 +80,8 @@ const handleEventClick = (payload) => {
   color: var(--muted);
   font-size: 1.2em;
   font-weight: 500;
-  /* Prevent text selection */
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
-  -webkit-touch-callout: none;
+  height: var(--row-h);
-  -webkit-tap-highlight-color: transparent;
 }
 
 .days-grid {
@@ -86,10 +91,4 @@ const handleEventClick = (payload) => {
   height: 100%;
   width: 100%;
 }
-
-/* Fixed heights for cells and labels (from cells.css) */
-.week-row :deep(.cell),
-.week-label {
-  height: var(--cell-h);
-}
 </style>

src/components/EventDialog.vue

@@ -23,10 +23,13 @@ const emit = defineEmits(['clear-selection'])
 const calendarStore = useCalendarStore()
 
 const showDialog = ref(false)
+// Anchoring: element of the DayCell representing the event's start date.
+const anchorElement = ref(null)
 const dialogMode = ref('create') // 'create' or 'edit'
 const editingEventId = ref(null)
 const unsavedCreateId = ref(null)
 const occurrenceContext = ref(null) // { baseId, occurrenceIndex, weekday, occurrenceDate }
+const initialWeekday = ref(null)
 const title = computed({
   get() {
     if (editingEventId.value && calendarStore.events?.has(editingEventId.value)) {
@@ -61,10 +64,13 @@ function getStartingWeekday(selectionData = null) {
 }
 
 const fallbackWeekdays = computed(() => {
-  const startingDay = getStartingWeekday()
+  let weekday = initialWeekday.value
-  const fallback = [false, false, false, false, false, false, false]
+  if (weekday == null) {
-  fallback[startingDay] = true
+    weekday = getStartingWeekday()
-  return fallback
+  }
+  const fb = [false, false, false, false, false, false, false]
+  fb[weekday] = true
+  return fb
 })
 
 // Maps UI frequency display (including years) to store frequency (weeks/months only)
@@ -138,14 +144,24 @@ const selectedColor = computed({
 const repeatCountBinding = computed({
   get() {
     if (editingEventId.value && calendarStore.events?.has(editingEventId.value)) {
-      const rc = calendarStore.events.get(editingEventId.value).repeatCount
+      const ev = calendarStore.events.get(editingEventId.value)
+      const rc = ev.recur?.count ?? 'unlimited'
       return rc === 'unlimited' ? 0 : parseInt(rc, 10) || 0
     }
     return recurrenceOccurrences.value
   },
   set(v) {
     if (editingEventId.value && calendarStore.events?.has(editingEventId.value)) {
-      calendarStore.events.get(editingEventId.value).repeatCount = v === 0 ? 'unlimited' : String(v)
+      const ev = calendarStore.events.get(editingEventId.value)
+      if (!ev.recur && v !== 0) {
+        ev.recur = {
+          freq: recurrenceFrequency.value,
+          interval: recurrenceInterval.value,
+          count: 'unlimited',
+          weekdays: recurrenceFrequency.value === 'weeks' ? buildStoreWeekdayPattern() : null,
+        }
+      }
+      if (ev.recur) ev.recur.count = v === 0 ? 'unlimited' : String(v)
       calendarStore.touchEvents()
     }
     recurrenceOccurrences.value = v
@@ -176,14 +192,7 @@ const repeat = computed({
 })
 
 function buildStoreWeekdayPattern() {
-  let sunFirst = [...recurrenceWeekdays.value]
+  return [...recurrenceWeekdays.value]
-
-  if (!sunFirst.some(Boolean)) {
-    const startingDay = getStartingWeekday()
-    sunFirst[startingDay] = true
-  }
-
-  return sunFirst
 }
 
 function loadWeekdayPatternFromStore(storePattern) {
@@ -191,6 +200,12 @@ function loadWeekdayPatternFromStore(storePattern) {
   recurrenceWeekdays.value = [...storePattern]
 }
 
+function resolveAnchorFromDate(dateStr) {
+  if (!dateStr) return null
+  // Expect day cells to have data-date attribute (see CalendarDay / DayCell components)
+  return document.querySelector(`[data-date='${dateStr}']`)
+}
+
 function openCreateDialog(selectionData = null) {
   calendarStore.$history?.beginCompound()
   if (unsavedCreateId.value && !eventSaved.value) {
@@ -214,6 +229,7 @@ function openCreateDialog(selectionData = null) {
   }
 
   occurrenceContext.value = null
+  initialWeekday.value = null
   dialogMode.value = 'create'
   recurrenceEnabled.value = false
   recurrenceInterval.value = 1
@@ -226,20 +242,34 @@ function openCreateDialog(selectionData = null) {
 
   const startingDay = getStartingWeekday({ start, end })
   recurrenceWeekdays.value[startingDay] = true
+  initialWeekday.value = startingDay
 
+  let days = 1
+  if (start && end && start <= end) {
+    const s = fromLocalString(start, DEFAULT_TZ)
+    const e = fromLocalString(end, DEFAULT_TZ)
+    days = Math.max(1, (e - s) / 86400000 + 1)
+  }
   editingEventId.value = calendarStore.createEvent({
     title: '',
     startDate: start,
-    endDate: end,
+    days,
     colorId: colorId.value,
-    repeat: repeat.value,
+    recur:
-    repeatInterval: recurrenceInterval.value,
+      recurrenceEnabled.value && repeat.value !== 'none'
-    repeatCount:
+        ? {
-      recurrenceOccurrences.value === 0 ? 'for now' : String(recurrenceOccurrences.value),
+            freq: recurrenceFrequency.value,
-    repeatWeekdays: buildStoreWeekdayPattern(),
+            interval: recurrenceInterval.value,
+            count:
+              recurrenceOccurrences.value === 0 ? 'unlimited' : String(recurrenceOccurrences.value),
+            weekdays: recurrenceFrequency.value === 'weeks' ? buildStoreWeekdayPattern() : null,
+          }
+        : null,
   })
   unsavedCreateId.value = editingEventId.value
 
+  // anchor to the starting day cell
+  anchorElement.value = resolveAnchorFromDate(start)
   showDialog.value = true
 
   nextTick(() => {
@@ -267,6 +297,7 @@ function openEditDialog(payload) {
     unsavedCreateId.value = null
   }
   occurrenceContext.value = null
+  initialWeekday.value = null
   if (!payload) return
 
   const baseId = payload.id
@@ -277,16 +308,17 @@ function openEditDialog(payload) {
   const event = calendarStore.getEventById(baseId)
   if (!event) return
 
-  if (event.isRepeating) {
+  if (event.recur) {
-    if (event.repeat === 'weeks' && occurrenceIndex >= 0) {
+    if (event.recur.freq === 'weeks' && occurrenceIndex >= 0) {
-      const pattern = event.repeatWeekdays || []
+      const pattern = event.recur.weekdays || []
       const baseStart = fromLocalString(event.startDate, DEFAULT_TZ)
-      const baseEnd = fromLocalString(event.endDate, DEFAULT_TZ)
+      const baseEnd = new Date(fromLocalString(event.startDate, DEFAULT_TZ))
+      baseEnd.setDate(baseEnd.getDate() + (event.days || 1) - 1)
       if (occurrenceIndex === 0) {
         occurrenceDate = baseStart
         weekday = baseStart.getDay()
       } else {
-        const interval = event.repeatInterval || 1
+        const interval = event.recur.interval || 1
         const WEEK_MS = 7 * 86400000
         const baseBlockStart = getMondayOfISOWeek(baseStart)
         function isAligned(d) {
@@ -308,22 +340,24 @@ function openEditDialog(payload) {
         occurrenceDate = cur
         weekday = cur.getDay()
       }
-    } else if (event.repeat === 'months' && occurrenceIndex >= 0) {
+    } else if (event.recur.freq === 'months' && occurrenceIndex >= 0) {
       const baseDate = fromLocalString(event.startDate, DEFAULT_TZ)
       occurrenceDate = addMonths(baseDate, occurrenceIndex)
     }
   }
   dialogMode.value = 'edit'
   editingEventId.value = baseId
-  loadWeekdayPatternFromStore(event.repeatWeekdays)
+  loadWeekdayPatternFromStore(event.recur?.weekdays)
-  repeat.value = event.repeat // triggers setter mapping into recurrence state
+  initialWeekday.value =
-  if (event.repeatInterval) recurrenceInterval.value = event.repeatInterval
+    weekday != null ? weekday : fromLocalString(event.startDate, DEFAULT_TZ).getDay()
+  repeat.value = event.recur ? event.recur.freq : 'none'
+  if (event.recur?.interval) recurrenceInterval.value = event.recur.interval
 
   // Set UI display frequency based on loaded data
-  if (event.repeat === 'weeks') {
+  if (event.recur?.freq === 'weeks') {
     uiDisplayFrequency.value = 'weeks'
-  } else if (event.repeat === 'months') {
+  } else if (event.recur?.freq === 'months') {
-    if (event.repeatInterval && event.repeatInterval % 12 === 0 && event.repeatInterval >= 12) {
+    if (event.recur.interval && event.recur.interval % 12 === 0 && event.recur.interval >= 12) {
       uiDisplayFrequency.value = 'years'
     } else {
       uiDisplayFrequency.value = 'months'
@@ -332,18 +366,20 @@ function openEditDialog(payload) {
     uiDisplayFrequency.value = 'weeks'
   }
 
-  const rc = event.repeatCount ?? 'unlimited'
+  const rc = event.recur?.count ?? 'unlimited'
   recurrenceOccurrences.value = rc === 'unlimited' ? 0 : parseInt(rc, 10) || 0
   colorId.value = event.colorId
   eventSaved.value = false
 
-  if (event.isRepeating) {
+  if (event.recur) {
-    if (event.repeat === 'weeks' && occurrenceIndex >= 0) {
+    if (event.recur.freq === 'weeks' && occurrenceIndex >= 0) {
       occurrenceContext.value = { baseId, occurrenceIndex, weekday, occurrenceDate }
-    } else if (event.repeat === 'months' && occurrenceIndex > 0) {
+    } else if (event.recur.freq === 'months' && occurrenceIndex > 0) {
       occurrenceContext.value = { baseId, occurrenceIndex, weekday: null, occurrenceDate }
     }
   }
+  // anchor to base event start date
+  anchorElement.value = resolveAnchorFromDate(event.startDate)
   showDialog.value = true
 
   nextTick(() => {
@@ -367,12 +403,17 @@ function updateEventInStore() {
   if (calendarStore.events?.has(editingEventId.value)) {
     const event = calendarStore.events.get(editingEventId.value)
     event.colorId = colorId.value
-    event.repeat = repeat.value
+    if (recurrenceEnabled.value && repeat.value !== 'none') {
-    event.repeatInterval = recurrenceInterval.value
+      event.recur = {
-    event.repeatWeekdays = buildStoreWeekdayPattern()
+        freq: recurrenceFrequency.value,
-    event.repeatCount =
+        interval: recurrenceInterval.value,
-      recurrenceOccurrences.value === 0 ? 'unlimited' : String(recurrenceOccurrences.value)
+        count:
-    event.isRepeating = recurrenceEnabled.value && repeat.value !== 'none'
+          recurrenceOccurrences.value === 0 ? 'unlimited' : String(recurrenceOccurrences.value),
+        weekdays: recurrenceFrequency.value === 'weeks' ? buildStoreWeekdayPattern() : null,
+      }
+    } else {
+      event.recur = null
+    }
     calendarStore.touchEvents()
   }
 }
@@ -456,11 +497,9 @@ const isRepeatingBaseEdit = computed(() => isRepeatingEdit.value && !occurrenceC
 const isLastOccurrence = computed(() => {
   if (!occurrenceContext.value || !editingEventId.value) return false
   const event = calendarStore.getEventById(editingEventId.value)
-  if (!event || !event.isRepeating) return false
+  if (!event || !event.recur) return false
-
+  if (event.recur.count === 'unlimited' || recurrenceOccurrences.value === 0) return false
-  if (event.repeatCount === 'unlimited' || recurrenceOccurrences.value === 0) return false
+  const totalCount = parseInt(event.recur.count, 10) || 0
-
-  const totalCount = parseInt(event.repeatCount, 10) || 0
   return occurrenceContext.value.occurrenceIndex === totalCount - 1
 })
 const formattedOccurrenceShort = computed(() => {
@@ -553,7 +592,7 @@ const recurrenceSummary = computed(() => {
 </script>
 
 <template>
-  <BaseDialog v-model="showDialog" @submit="saveEvent">
+  <BaseDialog v-model="showDialog" :anchor-el="anchorElement" @submit="saveEvent">
     <template #title>
       {{ dialogMode === 'create' ? 'Create Event' : 'Edit Event'
       }}<template v-if="headerDateShort"> · {{ headerDateShort }}</template>
@@ -696,7 +735,7 @@ const recurrenceSummary = computed(() => {
   outline-offset: 0.125em;
   cursor: pointer;
   appearance: none;
-  width: 3em;
+  width: 80%;
   height: 1em;
 }
 
@@ -711,8 +750,8 @@ const recurrenceSummary = computed(() => {
 }
 
 .ec-btn {
-  border: 0.0625em solid var(--muted);
   background: transparent;
+  border: none;
   color: var(--ink);
   padding: 0.5em 0.8em;
   border-radius: 0.4em;
@@ -883,63 +922,6 @@ const recurrenceSummary = computed(() => {
     0 0 0 1px var(--input-focus),
     0 0 0 4px rgba(37, 99, 235, 0.15);
 }
-.mini-stepper {
-  display: inline-flex;
-  align-items: center;
-  background: var(--panel-alt);
-  border: 1px solid var(--input-border);
-  border-radius: 0.5rem;
-  overflow: hidden;
-  font-size: 0.7rem;
-  height: 1.9rem;
-}
-.mini-stepper .step {
-  background: transparent;
-  border: none;
-  color: var(--ink);
-  padding: 0 0.55rem;
-  cursor: pointer;
-  font-size: 0.9rem;
-  line-height: 1;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  transition:
-    background-color 0.15s ease,
-    color 0.15s ease;
-}
-.mini-stepper .step:hover:not(:disabled) {
-  background: var(--pill-hover-bg);
-}
-.mini-stepper .step:disabled {
-  opacity: 0.35;
-  cursor: default;
-}
-.mini-stepper .value {
-  min-width: 1.6rem;
-  text-align: center;
-  font-variant-numeric: tabular-nums;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-}
-.mini-stepper:focus-within {
-  border-color: var(--input-focus);
-  box-shadow:
-    0 0 0 1px var(--input-focus),
-    0 0 0 4px rgba(37, 99, 235, 0.15);
-}
-.mini-stepper.occ .value {
-  min-width: 2rem;
-}
-.occ-stepper.mini-stepper.occ .value {
-  min-width: 2rem;
-}
-.mini-stepper .step:focus-visible {
-  outline: 2px solid var(--input-focus);
-  outline-offset: -2px;
-}
 .hint {
   font-size: 0.65rem;
   opacity: 0.65;

src/components/EventOverlay.vue

@@ -101,6 +101,24 @@ function handleEventPointerDown(span, event) {
   const hasVirtualMarker = typeof idStr === 'string' && idStr.includes('_v_')
   const baseId = hasVirtualMarker ? idStr.slice(0, idStr.lastIndexOf('_v_')) : idStr
   const isVirtual = hasVirtualMarker
+  // Determine which day within the span was grabbed so we maintain relative position
+  let anchorDate = span.startDate
+  try {
+    const spanDays = daysInclusive(span.startDate, span.endDate)
+    const targetEl = event.currentTarget
+    if (targetEl && spanDays > 0) {
+      const rect = targetEl.getBoundingClientRect()
+      const relX = event.clientX - rect.left
+      const dayWidth = rect.width / spanDays
+      let dayIndex = Math.floor(relX / dayWidth)
+      if (!isFinite(dayIndex)) dayIndex = 0
+      if (dayIndex < 0) dayIndex = 0
+      if (dayIndex >= spanDays) dayIndex = spanDays - 1
+      anchorDate = addDaysStr(span.startDate, dayIndex)
+    }
+  } catch (e) {
+    // Fallback to startDate if any calculation fails
+  }
   startLocalDrag(
     {
       id: baseId,
@@ -109,7 +127,7 @@ function handleEventPointerDown(span, event) {
       mode: 'move',
       pointerStartX: event.clientX,
       pointerStartY: event.clientY,
-      anchorDate: span.startDate,
+      anchorDate,
       startDate: span.startDate,
       endDate: span.endDate,
     },
@@ -149,6 +167,24 @@ function startLocalDrag(init, evt) {
     else anchorOffset = daysInclusive(init.startDate, init.anchorDate) - 1
   }
 
+  // Capture original repeating pattern & weekday (for weekly repeats) so we can rotate relative to original
+  let originalWeekday = null
+  let originalPattern = null
+  if (init.mode === 'move') {
+    try {
+      originalWeekday = new Date(init.startDate + 'T00:00:00').getDay()
+      const baseEv = store.getEventById(init.id)
+      if (
+        baseEv &&
+        baseEv.recur &&
+        baseEv.recur.freq === 'weeks' &&
+        Array.isArray(baseEv.recur.weekdays)
+      ) {
+        originalPattern = [...baseEv.recur.weekdays]
+      }
+    } catch {}
+  }
+
   dragState.value = {
     ...init,
     anchorOffset,
@@ -156,6 +192,9 @@ function startLocalDrag(init, evt) {
     eventMoved: false,
     tentativeStart: init.startDate,
     tentativeEnd: init.endDate,
+    originalWeekday,
+    originalPattern,
+    realizedId: null, // for virtual occurrence converted to real during drag
   }
 
   // Begin compound history session (single snapshot after drag completes)
@@ -220,13 +259,61 @@ function onDragPointerMove(e) {
   if (ns === st.tentativeStart && ne === st.tentativeEnd) return
   st.tentativeStart = ns
   st.tentativeEnd = ne
-  // Real-time update only for non-virtual events (avoid repeated split operations)
+  if (st.mode === 'move') {
-  if (!st.isVirtual) {
+    if (st.isVirtual) {
+      // On first movement convert virtual occurrence into a real new event (split series)
+      if (!st.realizedId) {
+        const newId = store.splitMoveVirtualOccurrence(st.id, st.startDate, ns, ne)
+        if (newId) {
+          st.realizedId = newId
+          st.id = newId
+          st.isVirtual = false
+        } else {
+          return
+        }
+      } else {
+        // Subsequent moves: update range without rotating pattern automatically
+        store.setEventRange(st.id, ns, ne, { mode: 'move', rotatePattern: false })
+      }
+    } else {
+      // Normal non-virtual move; rotate handled in setEventRange
+      store.setEventRange(st.id, ns, ne, { mode: 'move', rotatePattern: false })
+    }
+    // Manual rotation relative to original pattern (keeps pattern anchored to initially grabbed weekday)
+    if (st.originalPattern && st.originalWeekday != null) {
+      try {
+        const currentWeekday = new Date(ns + 'T00:00:00').getDay()
+        const shift = currentWeekday - st.originalWeekday
+        const rotated = store._rotateWeekdayPattern([...st.originalPattern], shift)
+        const ev = store.getEventById(st.id)
+        if (ev && ev.recur && ev.recur.freq === 'weeks') {
+          ev.recur.weekdays = rotated
+          store.touchEvents()
+        }
+      } catch {}
+    }
+  } else if (!st.isVirtual) {
+    // Resizes on real events update immediately
     applyRangeDuringDrag(
       { id: st.id, isVirtual: st.isVirtual, mode: st.mode, startDate: ns, endDate: ne },
       ns,
       ne,
     )
+  } else if (st.isVirtual && (st.mode === 'resize-left' || st.mode === 'resize-right')) {
+    // For virtual occurrence resize: convert to real once, then adjust range
+    if (!st.realizedId) {
+      const initialStart = ns
+      const initialEnd = ne
+      const newId = store.splitMoveVirtualOccurrence(st.id, st.startDate, initialStart, initialEnd)
+      if (newId) {
+        st.realizedId = newId
+        st.id = newId
+        st.isVirtual = false
+      } else return
+    }
+    // Apply range change; rotate if left edge moved and weekday changed
+    const rotate = st.mode === 'resize-left'
+    store.setEventRange(st.id, ns, ne, { mode: st.mode, rotatePattern: rotate })
   }
 }
 
@@ -329,7 +416,7 @@ function applyRangeDuringDrag(st, startDate, endDate) {
 
 .event-span {
   padding: 0.1em 0.3em;
-  border-radius: 0.2em;
+  border-radius: 1em;
   font-size: clamp(0.45em, 1.8vh, 0.75em);
   font-weight: 600;
   cursor: grab;

src/components/HeaderControls.vue

@@ -0,0 +1,210 @@
+<template>
+  <Transition name="header-controls" appear>
+    <div v-if="isVisible" class="header-controls">
+      <div class="today-date" @click="goToToday">{{ todayString }}</div>
+      <button
+        type="button"
+        class="hist-btn"
+        :disabled="!calendarStore.historyCanUndo"
+        @click="calendarStore.$history?.undo()"
+        title="Undo (Ctrl+Z)"
+        aria-label="Undo"
+      >
+        ↶
+      </button>
+      <button
+        type="button"
+        class="hist-btn"
+        :disabled="!calendarStore.historyCanRedo"
+        @click="calendarStore.$history?.redo()"
+        title="Redo (Ctrl+Shift+Z)"
+        aria-label="Redo"
+      >
+        ↷
+      </button>
+      <button
+        type="button"
+        class="settings-btn"
+        @click="openSettings"
+        aria-label="Open settings"
+        title="Settings"
+      >
+        ⚙
+      </button>
+      <!-- Settings dialog now lives here -->
+      <SettingsDialog ref="settingsDialog" />
+    </div>
+  </Transition>
+  <button
+    type="button"
+    class="toggle-btn"
+    @click="toggleVisibility"
+    :aria-label="isVisible ? 'Hide controls' : 'Show controls'"
+    :title="isVisible ? 'Hide controls' : 'Show controls'"
+  >
+    ⋯
+  </button>
+</template>
+
+<script setup>
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+import { useCalendarStore } from '@/stores/CalendarStore'
+import { formatTodayString } from '@/utils/date'
+import SettingsDialog from '@/components/SettingsDialog.vue'
+
+const calendarStore = useCalendarStore()
+
+const todayString = computed(() => {
+  const d = new Date(calendarStore.now)
+  return formatTodayString(d)
+})
+
+const emit = defineEmits(['go-to-today'])
+
+function goToToday() {
+  // Emit the event so the parent can handle the viewport scrolling logic
+  // since this component doesn't have access to viewport refs
+  emit('go-to-today')
+}
+
+// Screen size detection and visibility toggle
+const isVisible = ref(false)
+
+function checkScreenSize() {
+  const isSmallScreen = window.innerHeight < 600
+  // Default to open on large screens, closed on small screens
+  isVisible.value = !isSmallScreen
+}
+
+function toggleVisibility() {
+  isVisible.value = !isVisible.value
+}
+
+// Settings dialog integration
+const settingsDialog = ref(null)
+function openSettings() {
+  settingsDialog.value?.open()
+}
+
+onMounted(() => {
+  checkScreenSize()
+  window.addEventListener('resize', checkScreenSize)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', checkScreenSize)
+})
+</script>
+
+<style scoped>
+.header-controls {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  margin-right: 1.5rem;
+}
+.toggle-btn {
+  position: fixed;
+  top: 0;
+  right: 0;
+  background: transparent;
+  border: none;
+  color: var(--muted);
+  padding: 0;
+  margin: 0.5em;
+  cursor: pointer;
+  font-size: 1em;
+  font-weight: 700;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+  width: 1em;
+  height: 1em;
+  transition: all 0.2s ease;
+}
+.toggle-btn:hover {
+  color: var(--strong);
+}
+
+.toggle-btn:active {
+  transform: scale(0.9);
+}
+.header-controls-enter-active,
+.header-controls-leave-active {
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+
+.header-controls-enter-from,
+.header-controls-leave-to {
+  opacity: 0;
+  max-height: 0;
+  transform: translateY(-20px);
+}
+
+.header-controls-enter-to,
+.header-controls-leave-from {
+  opacity: 1;
+  max-height: 100px;
+  transform: translateY(0);
+}
+
+.settings-btn {
+  background: transparent;
+  border: none;
+  color: var(--muted);
+  padding: 0;
+  margin: 0;
+  margin-right: 0.6rem;
+  cursor: pointer;
+  font-size: 1.5rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+}
+
+.hist-btn {
+  background: transparent;
+  border: none;
+  color: var(--muted);
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font-size: 1.2rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+  width: 1.9rem;
+  height: 1.9rem;
+}
+
+.hist-btn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.hist-btn:not(:disabled):hover,
+.hist-btn:not(:disabled):focus-visible {
+  color: var(--strong);
+}
+
+.hist-btn:active:not(:disabled) {
+  transform: scale(0.88);
+}
+
+.settings-btn:hover {
+  color: var(--strong);
+}
+
+.today-date {
+  white-space: pre-line;
+  text-align: center;
+  margin-right: 2rem;
+}
+</style>

src/components/Jogwheel.vue

@@ -1,17 +1,21 @@
 <template>
   <div class="jogwheel-viewport" ref="jogwheelViewport" @scroll="handleJogwheelScroll">
-    <div class="jogwheel-content" ref="jogwheelContent" :style="{ height: jogwheelHeight + 'px' }"></div>
+    <div
+      class="jogwheel-content"
+      ref="jogwheelContent"
+      :style="{ height: jogwheelHeight + 'px' }"
+    ></div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
 
 const props = defineProps({
   totalVirtualWeeks: { type: Number, required: true },
   rowHeight: { type: Number, required: true },
   viewportHeight: { type: Number, required: true },
-  scrollTop: { type: Number, required: true }
+  scrollTop: { type: Number, required: true },
 })
 
 const emit = defineEmits(['scroll-to'])
@@ -19,6 +23,12 @@ const emit = defineEmits(['scroll-to'])
 const jogwheelViewport = ref(null)
 const jogwheelContent = ref(null)
 const syncLock = ref(null)
+// Drag state (no momentum, 1:1 mapping)
+const isDragging = ref(false)
+let mainStartScroll = 0
+let dragScale = 1 // mainScrollPixels per mouse pixel
+let accumDelta = 0
+let pointerLocked = false
 
 // Jogwheel content height is 1/10th of main calendar
 const jogwheelHeight = computed(() => {
@@ -30,21 +40,100 @@ const handleJogwheelScroll = () => {
   syncFromJogwheel()
 }
 
+function onDragMouseDown(e) {
+  if (e.button !== 0) return
+  isDragging.value = true
+  mainStartScroll = props.scrollTop
+  accumDelta = 0
+  // Precompute scale between jogwheel scrollable range and main scrollable range
+  const mainScrollable = Math.max(
+    0,
+    props.totalVirtualWeeks * props.rowHeight - props.viewportHeight,
+  )
+  let jogScrollable = 0
+  if (jogwheelViewport.value && jogwheelContent.value) {
+    jogScrollable = Math.max(
+      0,
+      jogwheelContent.value.scrollHeight - jogwheelViewport.value.clientHeight,
+    )
+  }
+  dragScale = jogScrollable > 0 ? mainScrollable / jogScrollable : 1
+  if (!isFinite(dragScale) || dragScale <= 0) dragScale = 1
+  // Attempt pointer lock for relative movement
+  if (jogwheelViewport.value && jogwheelViewport.value.requestPointerLock) {
+    jogwheelViewport.value.requestPointerLock()
+  }
+  window.addEventListener('mousemove', onDragMouseMove, { passive: false })
+  window.addEventListener('mouseup', onDragMouseUp, { passive: false })
+  e.preventDefault()
+}
+
+function onDragMouseMove(e) {
+  if (!isDragging.value) return
+  const dy = pointerLocked ? e.movementY : e.clientY // movementY only valid in pointer lock
+  accumDelta += dy
+  let desired = mainStartScroll - accumDelta * dragScale
+  if (desired < 0) desired = 0
+  const maxScroll = Math.max(0, props.totalVirtualWeeks * props.rowHeight - props.viewportHeight)
+  if (desired > maxScroll) desired = maxScroll
+  emit('scroll-to', desired)
+  e.preventDefault()
+}
+
+function onDragMouseUp(e) {
+  if (!isDragging.value) return
+  isDragging.value = false
+  window.removeEventListener('mousemove', onDragMouseMove)
+  window.removeEventListener('mouseup', onDragMouseUp)
+  if (pointerLocked && document.exitPointerLock) document.exitPointerLock()
+  e.preventDefault()
+}
+
+function handlePointerLockChange() {
+  pointerLocked = document.pointerLockElement === jogwheelViewport.value
+  if (!pointerLocked && isDragging.value) {
+    // Pointer lock lost (Esc) -> end drag gracefully
+    onDragMouseUp(new MouseEvent('mouseup'))
+  }
+}
+
+onMounted(() => {
+  if (jogwheelViewport.value) {
+    jogwheelViewport.value.addEventListener('mousedown', onDragMouseDown)
+  }
+  document.addEventListener('pointerlockchange', handlePointerLockChange)
+})
+
+onBeforeUnmount(() => {
+  if (jogwheelViewport.value) {
+    jogwheelViewport.value.removeEventListener('mousedown', onDragMouseDown)
+  }
+  window.removeEventListener('mousemove', onDragMouseMove)
+  window.removeEventListener('mouseup', onDragMouseUp)
+  document.removeEventListener('pointerlockchange', handlePointerLockChange)
+})
+
 const syncFromJogwheel = () => {
   if (!jogwheelViewport.value || !jogwheelContent.value) return
-  
+
   syncLock.value = 'main'
-  
+
-  const jogScrollable = Math.max(0, jogwheelContent.value.scrollHeight - jogwheelViewport.value.clientHeight)
+  const jogScrollable = Math.max(
-  const mainScrollable = Math.max(0, props.totalVirtualWeeks * props.rowHeight - props.viewportHeight)
+    0,
-  
+    jogwheelContent.value.scrollHeight - jogwheelViewport.value.clientHeight,
+  )
+  const mainScrollable = Math.max(
+    0,
+    props.totalVirtualWeeks * props.rowHeight - props.viewportHeight,
+  )
+
   if (jogScrollable > 0) {
     const ratio = jogwheelViewport.value.scrollTop / jogScrollable
-    
+
     // Emit scroll event to parent to update main viewport
     emit('scroll-to', ratio * mainScrollable)
   }
-  
+
   setTimeout(() => {
     if (syncLock.value === 'main') syncLock.value = null
   }, 50)
@@ -53,29 +142,38 @@ const syncFromJogwheel = () => {
 const syncFromMain = (mainScrollTop) => {
   if (!jogwheelViewport.value || !jogwheelContent.value) return
   if (syncLock.value === 'main') return
-  
+
   syncLock.value = 'jogwheel'
-  
+
-  const mainScrollable = Math.max(0, props.totalVirtualWeeks * props.rowHeight - props.viewportHeight)
+  const mainScrollable = Math.max(
-  const jogScrollable = Math.max(0, jogwheelContent.value.scrollHeight - jogwheelViewport.value.clientHeight)
+    0,
-  
+    props.totalVirtualWeeks * props.rowHeight - props.viewportHeight,
+  )
+  const jogScrollable = Math.max(
+    0,
+    jogwheelContent.value.scrollHeight - jogwheelViewport.value.clientHeight,
+  )
+
   if (mainScrollable > 0) {
     const ratio = mainScrollTop / mainScrollable
     jogwheelViewport.value.scrollTop = ratio * jogScrollable
   }
-  
+
   setTimeout(() => {
     if (syncLock.value === 'jogwheel') syncLock.value = null
   }, 50)
 }
 
 // Watch for main calendar scroll changes
-watch(() => props.scrollTop, (newScrollTop) => {
+watch(
-  syncFromMain(newScrollTop)
+  () => props.scrollTop,
-})
+  (newScrollTop) => {
+    syncFromMain(newScrollTop)
+  },
+)
 
 defineExpose({
-  syncFromMain
+  syncFromMain,
 })
 </script>
 
@@ -85,20 +183,12 @@ defineExpose({
   top: 0;
   right: 0;
   bottom: 0;
-  width: 3rem; /* Use fixed width since minmax() doesn't work for absolute positioning */
+  width: var(--month-w);
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: none;
   z-index: 20;
   cursor: ns-resize;
-  background: rgba(0, 0, 0, 0.05); /* Temporary background to see the area */
-  /* Prevent text selection */
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-touch-callout: none;
-  -webkit-tap-highlight-color: transparent;
 }
 
 .jogwheel-viewport::-webkit-scrollbar {

src/components/Numeric.vue

@@ -2,27 +2,25 @@
   <div
     ref="rootEl"
     class="mini-stepper drag-mode"
-    :class="[extraClass, { dragging, 'pointer-locked': pointerLocked }]"
+    :class="[extraClass, { dragging }]"
     :aria-label="ariaLabel"
     role="spinbutton"
     :aria-valuemin="minValue"
     :aria-valuemax="maxValue"
-    :aria-valuenow="isPrefix(current) ? undefined : current"
+    :aria-valuenow="isPrefix(model) ? undefined : model"
     :aria-valuetext="display"
     tabindex="0"
     @pointerdown="onPointerDown"
     @keydown="onKey"
     @wheel.prevent="onWheel"
   >
-    <span class="value" :title="String(current)">{{ display }}</span>
+    <span class="value" :title="String(model)">{{ display }}</span>
   </div>
 </template>
 
 <script setup>
-import { computed, ref, onBeforeUnmount } from 'vue'
+import { computed, ref } from 'vue'
-
+const model = defineModel({ default: 0 })
-const model = defineModel({ type: Number, default: 0 })
-
 const props = defineProps({
   min: { type: Number, default: 0 },
   max: { type: Number, default: 999 },
@@ -37,85 +35,41 @@ const props = defineProps({
   numberPostfix: { type: String, default: '' },
   clamp: { type: Boolean, default: true },
   pixelsPerStep: { type: Number, default: 16 },
-  // Movement now restricted to horizontal (x). Prop retained for compatibility but ignored.
   axis: { type: String, default: 'x' },
   ariaLabel: { type: String, default: '' },
   extraClass: { type: String, default: '' },
 })
-
 const minValue = computed(() => props.min)
 const maxValue = computed(() => props.max)
-
+const isPrefix = (value) => props.prefixValues.some((p) => p.value === value)
-// Helper to check if a value is in the prefix values
+const getPrefixDisplay = (value) =>
-const isPrefix = (value) => {
+  props.prefixValues.find((p) => p.value === value)?.display ?? null
-  return props.prefixValues.some((prefix) => prefix.value === value)
-}
-
-// Helper to get the display for a prefix value
-const getPrefixDisplay = (value) => {
-  const prefix = props.prefixValues.find((p) => p.value === value)
-  return prefix ? prefix.display : null
-}
-
-// Get all valid values in order: prefixValues, then min to max
 const allValidValues = computed(() => {
   const prefixVals = props.prefixValues.map((p) => p.value)
   const numericVals = []
-  for (let i = props.min; i <= props.max; i += props.step) {
+  for (let i = props.min; i <= props.max; i += props.step) numericVals.push(i)
-    numericVals.push(i)
-  }
   return [...prefixVals, ...numericVals]
 })
-
-const current = computed({
-  get() {
-    return model.value
-  },
-  set(v) {
-    if (props.clamp) {
-      // If it's a prefix value, allow it
-      if (isPrefix(v)) {
-        model.value = v
-        return
-      }
-      // Otherwise clamp to numeric range
-      if (v < props.min) v = props.min
-      if (v > props.max) v = props.max
-    }
-    model.value = v
-  },
-})
-
 const display = computed(() => {
-  const prefixDisplay = getPrefixDisplay(current.value)
+  const prefixDisplay = getPrefixDisplay(model.value)
-  if (prefixDisplay !== null) {
+  if (prefixDisplay !== null) return prefixDisplay
-    // For prefix values, show only the display text without number prefix/postfix
+  return `${props.numberPrefix}${String(model.value)}${props.numberPostfix}`
-    return prefixDisplay
-  }
-  // For numeric values, include prefix and postfix
-  const numericValue = String(current.value)
-  return `${props.numberPrefix}${numericValue}${props.numberPostfix}`
 })
-
-// Drag handling
 const dragging = ref(false)
 const rootEl = ref(null)
 let startX = 0
 let startY = 0
-let accumX = 0 // accumulated horizontal movement since last applied step (works for both locked & unlocked)
+let accumX = 0
-let lastClientX = 0 // previous clientX when not pointer locked
+let lastClientX = 0
 const pointerLocked = ref(false)
-
 function updatePointerLocked() {
   pointerLocked.value =
     typeof document !== 'undefined' && document.pointerLockElement === rootEl.value
-  // Reset baseline if lock just engaged
   if (pointerLocked.value) {
     accumX = 0
-    startX = 0 // not used while locked
+    startX = 0
   }
 }
-
 function addPointerLockListeners() {
   if (typeof document === 'undefined') return
   document.addEventListener('pointerlockchange', updatePointerLocked)
@@ -126,7 +80,6 @@ function removePointerLockListeners() {
   document.removeEventListener('pointerlockchange', updatePointerLocked)
   document.removeEventListener('pointerlockerror', updatePointerLocked)
 }
-
 function onPointerDown(e) {
   e.preventDefault()
   startX = e.clientX
@@ -150,33 +103,44 @@ function onPointerDown(e) {
 function onPointerMove(e) {
   if (!dragging.value) return
   if (e.pointerType === 'touch') e.preventDefault()
-  let dx
+  let dx = pointerLocked.value ? e.movementX || 0 : e.clientX - lastClientX
-  if (pointerLocked.value) {
+  if (!pointerLocked.value) lastClientX = e.clientX
-    dx = e.movementX || 0
-  } else {
-    dx = e.clientX - lastClientX
-    lastClientX = e.clientX
-  }
   if (!dx) return
   accumX += dx
   const stepSize = props.pixelsPerStep || 1
   let steps = Math.trunc(accumX / stepSize)
   if (steps === 0) return
-  // Apply steps relative to current value index each time (dynamic baseline) and keep leftover pixels
   const applySteps = (count) => {
-    const currentIndex = allValidValues.value.indexOf(current.value)
+    if (!count) return
-    if (currentIndex === -1) return
+    let direction = count > 0 ? 1 : -1
-    let targetIndex = currentIndex + count
+    let remaining = Math.abs(count)
-    if (props.clamp) {
+    let curVal = model.value
-      targetIndex = Math.max(0, Math.min(targetIndex, allValidValues.value.length - 1))
+    const isNumeric = typeof curVal === 'number' && !Number.isNaN(curVal)
+    let idx = allValidValues.value.indexOf(curVal)
+    if (idx === -1) {
+      if (!isNumeric) {
+        curVal = props.prefixValues.length ? props.prefixValues[0].value : props.min
+      } else {
+        if (direction > 0) curVal = props.min
+        else
+          curVal = props.prefixValues.length
+            ? props.prefixValues[props.prefixValues.length - 1].value
+            : props.min
+      }
+      remaining--
     }
-    if (targetIndex >= 0 && targetIndex < allValidValues.value.length) {
+    while (remaining > 0) {
-      const next = allValidValues.value[targetIndex]
+      idx = allValidValues.value.indexOf(curVal)
-      if (next !== current.value) current.value = next
+      if (idx === -1) break
+      let targetIdx = idx + direction
+      if (props.clamp) targetIdx = Math.max(0, Math.min(targetIdx, allValidValues.value.length - 1))
+      if (targetIdx < 0 || targetIdx >= allValidValues.value.length || targetIdx === idx) break
+      curVal = allValidValues.value[targetIdx]
+      remaining--
     }
+    model.value = curVal
   }
   applySteps(steps)
-  // Remove consumed distance (works even if clamped; leftover ensures responsiveness keeps consistent feel)
   accumX -= steps * stepSize
 }
 function endDragListeners() {
@@ -196,52 +160,43 @@ function onPointerCancel() {
   dragging.value = false
   endDragListeners()
 }
-
 function onKey(e) {
   const key = e.key
   let handled = false
   let newValue = null
-
+  const currentIndex = allValidValues.value.indexOf(model.value)
-  // Find current value index in all valid values
-  const currentIndex = allValidValues.value.indexOf(current.value)
-
   switch (key) {
     case 'ArrowRight':
     case 'ArrowUp':
-      if (currentIndex !== -1 && currentIndex < allValidValues.value.length - 1) {
+      if (currentIndex !== -1 && currentIndex < allValidValues.value.length - 1)
         newValue = allValidValues.value[currentIndex + 1]
-      } else if (currentIndex === -1) {
+      else if (currentIndex === -1) {
-        // Current value not in list, try to increment normally
+        const curVal = model.value
-        newValue = current.value + props.step
+        const isNumeric = typeof curVal === 'number' && !Number.isNaN(curVal)
+        if (!isNumeric && props.prefixValues.length) newValue = props.prefixValues[0].value
+        else newValue = props.min
       }
       handled = true
       break
     case 'ArrowLeft':
     case 'ArrowDown':
-      if (currentIndex !== -1 && currentIndex > 0) {
+      if (currentIndex !== -1 && currentIndex > 0) newValue = allValidValues.value[currentIndex - 1]
-        newValue = allValidValues.value[currentIndex - 1]
+      else if (currentIndex === -1)
-      } else if (currentIndex === -1) {
+        newValue = props.prefixValues.length
-        // Current value not in list, try to decrement normally
+          ? props.prefixValues[props.prefixValues.length - 1].value
-        newValue = current.value - props.step
+          : props.min
-      }
       handled = true
       break
     case 'PageUp':
-      if (currentIndex !== -1) {
+      if (currentIndex !== -1)
-        const newIndex = Math.min(currentIndex + 10, allValidValues.value.length - 1)
+        newValue =
-        newValue = allValidValues.value[newIndex]
+          allValidValues.value[Math.min(currentIndex + 10, allValidValues.value.length - 1)]
-      } else {
+      else newValue = model.value + props.step * 10
-        newValue = current.value + props.step * 10
-      }
       handled = true
       break
     case 'PageDown':
-      if (currentIndex !== -1) {
+      if (currentIndex !== -1) newValue = allValidValues.value[Math.max(currentIndex - 10, 0)]
-        const newIndex = Math.max(currentIndex - 10, 0)
+      else newValue = model.value - props.step * 10
-        newValue = allValidValues.value[newIndex]
-      } else {
-        newValue = current.value - props.step * 10
-      }
       handled = true
       break
     case 'Home':
@@ -253,31 +208,30 @@ function onKey(e) {
       handled = true
       break
   }
-
+  if (newValue !== null) model.value = newValue
-  if (newValue !== null) {
-    current.value = newValue
-  }
-
   if (handled) {
     e.preventDefault()
     e.stopPropagation()
   }
 }
-
 function onWheel(e) {
-  // Inverted: deltaY < 0 => decrement, > 0 => increment
   const direction = e.deltaY < 0 ? -1 : e.deltaY > 0 ? 1 : 0
   if (direction === 0) return
-  // Use current index in allValidValues list (prefix values included)
+  const idx = allValidValues.value.indexOf(model.value)
-  const idx = allValidValues.value.indexOf(current.value)
   if (idx !== -1) {
     const nextIdx = idx + direction
-    if (nextIdx >= 0 && nextIdx < allValidValues.value.length) {
+    if (nextIdx >= 0 && nextIdx < allValidValues.value.length)
-      current.value = allValidValues.value[nextIdx]
+      model.value = allValidValues.value[nextIdx]
-    }
   } else {
-    // Fallback numeric adjustment if not found
+    const curVal = model.value
-    current.value = current.value + direction * props.step
+    const isNumeric = typeof curVal === 'number' && !Number.isNaN(curVal)
+    if (!isNumeric)
+      model.value = props.prefixValues.length ? props.prefixValues[0].value : props.min
+    else if (direction > 0) model.value = props.min
+    else
+      model.value = props.prefixValues.length
+        ? props.prefixValues[props.prefixValues.length - 1].value
+        : props.min
   }
 }
 </script>
@@ -289,17 +243,12 @@ function onWheel(e) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0 0.4rem;
   gap: 0.25rem;
-  border: 1px solid transparent;
+  background: none;
-  background: transparent;
-  border-radius: 0.4rem;
-  min-height: 1.8rem;
   font-variant-numeric: tabular-nums;
   touch-action: none;
 }
 .mini-stepper.drag-mode:focus-visible {
-  border-color: var(--input-border, var(--muted));
   box-shadow: 0 0 0 2px var(--input-focus, #2563eb);
   outline: none;
 }
@@ -312,7 +261,4 @@ function onWheel(e) {
 .mini-stepper.drag-mode.dragging {
   cursor: grabbing;
 }
-.mini-stepper.drag-mode.pointer-locked.dragging {
-  cursor: none; /* hide cursor for infinite drag */
-}
 </style>

src/components/SettingsDialog.vue

@@ -306,13 +306,4 @@ select {
 .ec-btn.delete-btn:hover {
   background: hsl(0, 70%, 45%);
 }
-/* Global override to ensure settings dialog appears near top by default */
-.ec-modal.settings-modal {
-  top: 4.5rem !important;
-  right: 2rem !important;
-  bottom: auto !important;
-  left: auto !important;
-  transform: none !important;
-}
 </style>
-<!-- settings dialog -->

src/components/WeekRow.vue

@@ -3,9 +3,7 @@
     <div class="week-label">W{{ weekNumber }}</div>
     <div class="days-grid">
       <DayCell v-for="day in days" :key="day.dateStr" :day="day" />
-      <div class="week-overlay">
+      <div class="week-overlay"></div>
-        <!-- Event spans will be rendered here -->
-      </div>
     </div>
     <div
       v-if="monthLabel"

src/components/WeekdaySelector.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import {
   getLocalizedWeekdayNames,
   getLocaleFirstDay,
@@ -44,7 +44,10 @@ import {
 const model = defineModel({
   type: Array,
   default: () => [false, false, false, false, false, false, false],
-})
+}) // external value consumers see
+
+// Internal state preserves the user's explicit picks even if all false
+const internal = ref([false, false, false, false, false, false, false])
 
 const props = defineProps({
   weekend: { type: Array, default: undefined },
@@ -55,12 +58,11 @@ const props = defineProps({
   firstDay: { type: Number, default: null },
 })
 
-// If external model provided is entirely false, keep as-is (user will see fallback styling),
+// Initialize internal from external if it has any true; else keep empty (fallback handled on emit)
-// only overwrite if null/undefined.
+if (model.value?.some?.(Boolean)) internal.value = [...model.value]
-if (!model.value) model.value = [...props.fallback]
 const labelsMondayFirst = getLocalizedWeekdayNames()
 const labels = [labelsMondayFirst[6], ...labelsMondayFirst.slice(0, 6)]
-const anySelected = computed(() => model.value.some(Boolean))
+const anySelected = computed(() => internal.value.some(Boolean))
 const localeFirst = getLocaleFirstDay()
 const localeWeekend = getLocaleWeekendDays()
 const firstDay = computed(() => (props.firstDay ?? localeFirst) % 7)
@@ -71,10 +73,38 @@ const weekendDays = computed(() => {
 })
 
 const displayLabels = computed(() => reorderByFirstDay(labels, firstDay.value))
-const displayValuesCommitted = computed(() => reorderByFirstDay(model.value, firstDay.value))
+const displayValuesCommitted = computed(() => reorderByFirstDay(internal.value, firstDay.value))
 const displayWorking = computed(() => reorderByFirstDay(weekendDays.value, firstDay.value))
 const displayDefault = computed(() => reorderByFirstDay(props.fallback, firstDay.value))
 
+// Expose a normalized pattern (Sunday-first) that substitutes the fallback day if none selected.
+// This keeps UI visually showing fallback (muted) but downstream logic can opt-in by reading this.
+function computeFallbackPattern() {
+  const fb = props.fallback && props.fallback.length === 7 ? props.fallback : null
+  if (fb && fb.some(Boolean)) return [...fb]
+  const arr = [false, false, false, false, false, false, false]
+  const idx = fb ? fb.findIndex(Boolean) : -1
+  if (idx >= 0) arr[idx] = true
+  else arr[0] = true
+  return arr
+}
+function emitExternal() {
+  model.value = internal.value.some(Boolean) ? [...internal.value] : computeFallbackPattern()
+}
+emitExternal()
+watch(
+  () => model.value,
+  (nv) => {
+    if (!nv) return
+    if (!nv.some(Boolean)) return
+    const fb = computeFallbackPattern()
+    const isFallback = fb.every((v, i) => v === nv[i])
+    // If internal is empty and model only reflects fallback, do not sync into internal
+    if (isFallback && !internal.value.some(Boolean)) return
+    internal.value = [...nv]
+  },
+)
+
 // Mapping from display index to original model index
 const orderIndices = computed(() => Array.from({ length: 7 }, (_, i) => (i + firstDay.value) % 7))
 
@@ -135,8 +165,8 @@ function isPressing(di) {
 }
 
 function onPointerDown(di) {
-  originalValues = [...model.value]
+  originalValues = [...internal.value]
-  dragVal.value = !model.value[(di + firstDay.value) % 7]
+  dragVal.value = !internal.value[(di + firstDay.value) % 7]
   dragStart.value = di
   previewEnd.value = di
   dragging.value = true
@@ -155,7 +185,8 @@ function onPointerUp() {
     // simple click: toggle single
     const next = [...originalValues]
     next[(dragStart.value + firstDay.value) % 7] = dragVal.value
-    model.value = next
+    internal.value = next
+    emitExternal()
     cleanupDrag()
   } else {
     commitDrag()
@@ -169,7 +200,8 @@ function commitDrag() {
       : [previewEnd.value, dragStart.value]
   const next = [...originalValues]
   for (let di = s; di <= e; di++) next[orderIndices.value[di]] = dragVal.value
-  model.value = next
+  internal.value = next
+  emitExternal()
   cleanupDrag()
 }
 function cancelDrag() {
@@ -185,14 +217,15 @@ function cleanupDrag() {
 function toggleWeekend(work) {
   const base = weekendDays.value
   const target = work ? base : base.map((v) => !v)
-  const current = model.value
+  const current = internal.value
   const allOn = current.every(Boolean)
   const isTargetActive = current.every((v, i) => v === target[i])
   if (allOn || isTargetActive) {
-    model.value = [false, false, false, false, false, false, false]
+    internal.value = [false, false, false, false, false, false, false]
   } else {
-    model.value = [...target]
+    internal.value = [...target]
   }
+  emitExternal()
 }
 </script>
 

src/plugins/scrollManager.js

@@ -0,0 +1,331 @@
+import { ref } from 'vue'
+
+function createMomentumDrag({
+  viewport,
+  viewportHeight,
+  contentHeight,
+  setScrollTop,
+  speed,
+  reasonDragPointer,
+  reasonDragTouch,
+  reasonMomentum,
+  allowTouch,
+  hitTest,
+}) {
+  let dragging = false
+  let startY = 0
+  let startScroll = 0
+  let velocity = 0
+  let samples = [] // { timestamp, position }
+  let momentumActive = false
+  let momentumFrame = null
+  let dragAccumY = 0 // used when pointer lock active
+  let usingPointerLock = false
+  const frictionPerMs = 0.0018
+  const MIN_V = 0.03
+  const VELOCITY_MS = 50
+
+  function cancelMomentum() {
+    if (!momentumActive) return
+    momentumActive = false
+    if (momentumFrame) cancelAnimationFrame(momentumFrame)
+    momentumFrame = null
+  }
+  function startMomentum() {
+    if (Math.abs(velocity) < MIN_V) return
+    cancelMomentum()
+    momentumActive = true
+    let lastTs = performance.now()
+    const step = () => {
+      if (!momentumActive) return
+      const now = performance.now()
+      const dt = now - lastTs
+      lastTs = now
+      if (dt <= 0) {
+        momentumFrame = requestAnimationFrame(step)
+        return
+      }
+      const decay = Math.exp(-frictionPerMs * dt)
+      velocity *= decay
+      const delta = velocity * dt
+      if (viewport.value) {
+        let cur = viewport.value.scrollTop
+        let target = cur + delta
+        const maxScroll = Math.max(0, contentHeight.value - viewportHeight.value)
+        if (target < 0) {
+          target = 0
+          velocity = 0
+        } else if (target > maxScroll) {
+          target = maxScroll
+          velocity = 0
+        }
+        setScrollTop(target, reasonMomentum)
+      }
+      if (Math.abs(velocity) < MIN_V * 0.6) {
+        momentumActive = false
+        return
+      }
+      momentumFrame = requestAnimationFrame(step)
+    }
+    momentumFrame = requestAnimationFrame(step)
+  }
+  function applyDragByDelta(deltaY, reason) {
+    const now = performance.now()
+    while (samples[0]?.timestamp < now - VELOCITY_MS) samples.shift()
+    samples.push({ timestamp: now, position: deltaY })
+    const newScrollTop = startScroll - deltaY * speed
+    const maxScroll = Math.max(0, contentHeight.value - viewportHeight.value)
+    const clamped = Math.max(0, Math.min(newScrollTop, maxScroll))
+    setScrollTop(clamped, reason)
+  }
+  function applyDragPosition(clientY, reason) {
+    const deltaY = clientY - startY
+    applyDragByDelta(deltaY, reason)
+  }
+  function endDrag() {
+    if (!dragging) return
+    dragging = false
+    window.removeEventListener('pointermove', onPointerMove, true)
+    window.removeEventListener('pointerup', endDrag, true)
+    window.removeEventListener('pointercancel', endDrag, true)
+    if (allowTouch) {
+      window.removeEventListener('touchmove', onTouchMove)
+      window.removeEventListener('touchend', endDrag)
+      window.removeEventListener('touchcancel', endDrag)
+    }
+    document.removeEventListener('pointerlockchange', onPointerLockChange, true)
+    if (usingPointerLock && document.pointerLockElement === viewport.value) {
+      try {
+        document.exitPointerLock()
+      } catch {}
+    }
+    usingPointerLock = false
+    velocity = 0
+    if (samples.length) {
+      const first = samples[0]
+      const now = performance.now()
+      const last = samples[samples.length - 1]
+      const dy = last.position - first.position
+      if (Math.abs(dy) > 5) velocity = (-dy * speed) / (now - first.timestamp)
+    }
+    samples = []
+    startMomentum()
+  }
+  function onPointerMove(e) {
+    if (!dragging || document.pointerLockElement !== viewport.value) return
+    dragAccumY += e.movementY
+    applyDragByDelta(dragAccumY, reasonDragPointer)
+    e.preventDefault()
+  }
+  function onTouchMove(e) {
+    if (!dragging) return
+    if (e.touches.length !== 1) {
+      endDrag()
+      return
+    }
+    applyDragPosition(e.touches[0].clientY, reasonDragTouch)
+    e.preventDefault()
+  }
+  function handlePointerDown(e) {
+    if (e.button !== undefined && e.button !== 0) return
+    if (hitTest && !hitTest(e)) return
+    e.preventDefault()
+    cancelMomentum()
+    dragging = true
+    startY = e.clientY
+    startScroll = viewport.value?.scrollTop || 0
+    velocity = 0
+    dragAccumY = 0
+    samples = [{ timestamp: performance.now(), position: e.clientY }]
+    window.addEventListener('pointermove', onPointerMove, true)
+    window.addEventListener('pointerup', endDrag, true)
+    window.addEventListener('pointercancel', endDrag, true)
+    document.addEventListener('pointerlockchange', onPointerLockChange, true)
+    viewport.value.requestPointerLock({ unadjustedMovement: true })
+  }
+  function handleTouchStart(e) {
+    if (!allowTouch) return
+    if (e.touches.length !== 1) return
+    if (hitTest && !hitTest(e.touches[0])) return
+    cancelMomentum()
+    dragging = true
+    const t = e.touches[0]
+    startY = t.clientY
+    startScroll = viewport.value?.scrollTop || 0
+    velocity = 0
+    dragAccumY = 0
+    samples = [{ timestamp: performance.now(), position: t.clientY }]
+    window.addEventListener('touchmove', onTouchMove, { passive: false })
+    window.addEventListener('touchend', endDrag, { passive: false })
+    window.addEventListener('touchcancel', endDrag, { passive: false })
+    e.preventDefault()
+  }
+  function onPointerLockChange() {
+    const lockedEl = document.pointerLockElement
+    if (dragging && lockedEl === viewport.value) {
+      usingPointerLock = true
+      return
+    }
+    if (dragging && usingPointerLock && lockedEl !== viewport.value) endDrag()
+    if (!dragging) usingPointerLock = false
+  }
+  return { handlePointerDown, handleTouchStart, cancelMomentum }
+}
+
+export function createScrollManager({ viewport, scheduleRebuild }) {
+  const scrollTop = ref(0)
+  let lastProgrammatic = null
+  let pendingTarget = null
+  let pendingAttempts = 0
+  let pendingLoopActive = false
+
+  function setScrollTop(val, reason = 'programmatic') {
+    let applied = val
+    if (viewport.value) {
+      const maxScroll = viewport.value.scrollHeight - viewport.value.clientHeight
+      if (applied > maxScroll) {
+        applied = maxScroll < 0 ? 0 : maxScroll
+        pendingTarget = val
+        pendingAttempts = 0
+        startPendingLoop()
+      }
+      if (applied < 0) applied = 0
+      viewport.value.scrollTop = applied
+    }
+    scrollTop.value = applied
+    lastProgrammatic = applied
+    scheduleRebuild(reason)
+  }
+
+  function onScroll() {
+    if (!viewport.value) return
+    const cur = viewport.value.scrollTop
+    const maxScroll = viewport.value.scrollHeight - viewport.value.clientHeight
+    let effective = cur
+    if (cur < 0) effective = 0
+    else if (cur > maxScroll) effective = maxScroll
+    scrollTop.value = effective
+    if (lastProgrammatic !== null && effective === lastProgrammatic) {
+      lastProgrammatic = null
+      return
+    }
+    if (pendingTarget !== null && Math.abs(effective - pendingTarget) > 4) {
+      pendingTarget = null
+    }
+    scheduleRebuild('scroll')
+  }
+
+  function startPendingLoop() {
+    if (pendingLoopActive || !viewport.value) return
+    pendingLoopActive = true
+    const loop = () => {
+      if (pendingTarget == null || !viewport.value) {
+        pendingLoopActive = false
+        return
+      }
+      const maxScroll = viewport.value.scrollHeight - viewport.value.clientHeight
+      if (pendingTarget <= maxScroll) {
+        setScrollTop(pendingTarget, 'pending-fulfill')
+        pendingTarget = null
+        pendingLoopActive = false
+        return
+      }
+      pendingAttempts++
+      if (pendingAttempts > 120) {
+        pendingTarget = null
+        pendingLoopActive = false
+        return
+      }
+      requestAnimationFrame(loop)
+    }
+    requestAnimationFrame(loop)
+  }
+
+  return { scrollTop, setScrollTop, onScroll }
+}
+
+export function createWeekColumnScrollManager({
+  viewport,
+  viewportHeight,
+  contentHeight,
+  setScrollTop,
+}) {
+  const isWeekColDragging = ref(false)
+  function getWeekLabelRect() {
+    const headerYear = document.querySelector('.calendar-header .year-label')
+    if (headerYear) return headerYear.getBoundingClientRect()
+    const weekLabel = viewport.value?.querySelector('.week-row .week-label')
+    return weekLabel ? weekLabel.getBoundingClientRect() : null
+  }
+  const drag = createMomentumDrag({
+    viewport,
+    viewportHeight,
+    contentHeight,
+    setScrollTop,
+    speed: 1,
+    reasonDragPointer: 'week-col-drag',
+    reasonDragTouch: 'week-col-drag',
+    reasonMomentum: 'week-col-momentum',
+    allowTouch: false,
+    hitTest: (e) => {
+      const rect = getWeekLabelRect()
+      if (!rect) return false
+      const x = e.clientX ?? e.pageX
+      return x >= rect.left && x <= rect.right
+    },
+  })
+  function handleWeekColMouseDown(e) {
+    if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return
+    isWeekColDragging.value = true
+    drag.handlePointerDown(e)
+    const end = () => {
+      isWeekColDragging.value = false
+      window.removeEventListener('pointerup', end, true)
+      window.removeEventListener('pointercancel', end, true)
+    }
+    window.addEventListener('pointerup', end, true)
+    window.addEventListener('pointercancel', end, true)
+  }
+  function handlePointerLockChange() {
+    if (document.pointerLockElement !== viewport.value) {
+      isWeekColDragging.value = false
+    }
+  }
+  return { isWeekColDragging, handleWeekColMouseDown, handlePointerLockChange }
+}
+
+export function createMonthScrollManager({
+  viewport,
+  viewportHeight,
+  contentHeight,
+  setScrollTop,
+}) {
+  const drag = createMomentumDrag({
+    viewport,
+    viewportHeight,
+    contentHeight,
+    setScrollTop,
+    speed: 10,
+    reasonDragPointer: 'month-scroll-drag',
+    reasonDragTouch: 'month-scroll-touch',
+    reasonMomentum: 'month-scroll-momentum',
+    allowTouch: true,
+    hitTest: null,
+  })
+  function handleMonthScrollPointerDown(e) {
+    drag.handlePointerDown(e)
+  }
+  function handleMonthScrollTouchStart(e) {
+    drag.handleTouchStart(e)
+  }
+  function handleMonthScrollWheel(e) {
+    drag.cancelMomentum()
+    const currentScroll = viewport.value?.scrollTop || 0
+    const newScrollTop = currentScroll + e.deltaY * 10
+    const maxScroll = Math.max(0, contentHeight.value - viewportHeight.value)
+    const clamped = Math.max(0, Math.min(newScrollTop, maxScroll))
+    setScrollTop(clamped, 'month-scroll-wheel')
+    e.preventDefault()
+  }
+  return { handleMonthScrollPointerDown, handleMonthScrollTouchStart, handleMonthScrollWheel }
+}

src/plugins/virtualWeeks.js

@@ -0,0 +1,400 @@
+import { ref } from 'vue'
+import { addDays, differenceInWeeks } from 'date-fns'
+import {
+  toLocalString,
+  fromLocalString,
+  DEFAULT_TZ,
+  getISOWeek,
+  addDaysStr,
+  pad,
+  getLocalizedMonthName,
+  monthAbbr,
+  lunarPhaseSymbol,
+  MAX_YEAR,
+  getOccurrenceIndex,
+  getVirtualOccurrenceEndDate,
+} from '@/utils/date'
+import { getHolidayForDate } from '@/utils/holidays'
+
+/**
+ * Factory handling virtual week window & incremental building.
+ * Exposes reactive visibleWeeks plus scheduling functions.
+ */
+export function createVirtualWeekManager({
+  calendarStore,
+  viewport,
+  viewportHeight,
+  rowHeight,
+  selection,
+  baseDate,
+  minVirtualWeek,
+  maxVirtualWeek,
+  contentHeight, // not currently used inside manager but kept for future
+}) {
+  const visibleWeeks = ref([])
+  let lastScrollRange = { startVW: null, endVW: null }
+  let updating = false
+  // Scroll refs injected later to break cyclic dependency with scroll manager
+  let scrollTopRef = null
+  let setScrollTopFn = null
+
+  function attachScroll(scrollTop, setScrollTop) {
+    scrollTopRef = scrollTop
+    setScrollTopFn = setScrollTop
+  }
+
+  function getWeekIndex(date) {
+    const dayOffset = (date.getDay() - calendarStore.config.first_day + 7) % 7
+    const firstDayOfWeek = addDays(date, -dayOffset)
+    return differenceInWeeks(firstDayOfWeek, baseDate.value)
+  }
+  function getFirstDayForVirtualWeek(virtualWeek) {
+    return addDays(baseDate.value, virtualWeek * 7)
+  }
+
+  function createWeek(virtualWeek) {
+    const firstDay = getFirstDayForVirtualWeek(virtualWeek)
+    const isoAnchor = addDays(firstDay, (4 - firstDay.getDay() + 7) % 7)
+    const weekNumber = getISOWeek(isoAnchor)
+    const days = []
+    let cur = new Date(firstDay)
+    let hasFirst = false
+    let monthToLabel = null
+    let labelYear = null
+
+    const repeatingBases = []
+    if (calendarStore.events) {
+      for (const ev of calendarStore.events.values()) {
+        if (ev.recur) repeatingBases.push(ev)
+      }
+    }
+
+    const collectEventsForDate = (dateStr, curDateObj) => {
+      const storedEvents = []
+      for (const ev of calendarStore.events.values()) {
+        if (!ev.recur) {
+          const evEnd = toLocalString(
+            addDays(fromLocalString(ev.startDate, DEFAULT_TZ), (ev.days || 1) - 1),
+            DEFAULT_TZ,
+          )
+          if (dateStr >= ev.startDate && dateStr <= evEnd) {
+            storedEvents.push({ ...ev, endDate: evEnd })
+          }
+        }
+      }
+      const dayEvents = [...storedEvents]
+      for (const base of repeatingBases) {
+        const baseEnd = toLocalString(
+          addDays(fromLocalString(base.startDate, DEFAULT_TZ), (base.days || 1) - 1),
+          DEFAULT_TZ,
+        )
+        if (dateStr >= base.startDate && dateStr <= baseEnd) {
+          dayEvents.push({ ...base, endDate: baseEnd, _recurrenceIndex: 0, _baseId: base.id })
+          continue
+        }
+        const spanDays = (base.days || 1) - 1
+        const currentDate = curDateObj
+        let occurrenceFound = false
+        for (let offset = 0; offset <= spanDays && !occurrenceFound; offset++) {
+          const candidateStart = addDays(currentDate, -offset)
+          const candidateStartStr = toLocalString(candidateStart, DEFAULT_TZ)
+          const occurrenceIndex = getOccurrenceIndex(base, candidateStartStr, DEFAULT_TZ)
+          if (occurrenceIndex !== null) {
+            const virtualEndDate = getVirtualOccurrenceEndDate(base, candidateStartStr, DEFAULT_TZ)
+            if (dateStr >= candidateStartStr && dateStr <= virtualEndDate) {
+              const virtualId = base.id + '_v_' + candidateStartStr
+              const alreadyExists = dayEvents.some((ev) => ev.id === virtualId)
+              if (!alreadyExists) {
+                dayEvents.push({
+                  ...base,
+                  id: virtualId,
+                  startDate: candidateStartStr,
+                  endDate: virtualEndDate,
+                  _recurrenceIndex: occurrenceIndex,
+                  _baseId: base.id,
+                })
+              }
+              occurrenceFound = true
+            }
+          }
+        }
+      }
+      return dayEvents
+    }
+
+    for (let i = 0; i < 7; i++) {
+      const dateStr = toLocalString(cur, DEFAULT_TZ)
+      const dayEvents = collectEventsForDate(dateStr, fromLocalString(dateStr, DEFAULT_TZ))
+      const dow = cur.getDay()
+      const isFirst = cur.getDate() === 1
+      if (isFirst) {
+        hasFirst = true
+        monthToLabel = cur.getMonth()
+        labelYear = cur.getFullYear()
+      }
+      let displayText = String(cur.getDate())
+      if (isFirst) {
+        if (cur.getMonth() === 0) displayText = cur.getFullYear()
+        else displayText = monthAbbr[cur.getMonth()].slice(0, 3).toUpperCase()
+      }
+      let holiday = null
+      if (calendarStore.config.holidays.enabled) {
+        calendarStore._ensureHolidaysInitialized?.()
+        holiday = getHolidayForDate(dateStr)
+      }
+      days.push({
+        date: dateStr,
+        dayOfMonth: cur.getDate(),
+        displayText,
+        monthClass: monthAbbr[cur.getMonth()],
+        isToday: dateStr === calendarStore.today,
+        isWeekend: calendarStore.weekend[dow],
+        isFirstDay: isFirst,
+        lunarPhase: lunarPhaseSymbol(cur),
+        holiday,
+        isHoliday: holiday !== null,
+        isSelected:
+          selection.value.startDate &&
+          selection.value.dayCount > 0 &&
+          dateStr >= selection.value.startDate &&
+          dateStr <= addDaysStr(selection.value.startDate, selection.value.dayCount - 1),
+        events: dayEvents,
+      })
+      cur = addDays(cur, 1)
+    }
+    let monthLabel = null
+    if (hasFirst && monthToLabel !== null) {
+      if (labelYear && labelYear <= MAX_YEAR) {
+        let weeksSpan = 0
+        const d = addDays(cur, -1)
+        for (let i = 0; i < 6; i++) {
+          const probe = addDays(cur, -1 + i * 7)
+          d.setTime(probe.getTime())
+          if (d.getMonth() === monthToLabel) weeksSpan++
+        }
+        const remainingWeeks = Math.max(1, maxVirtualWeek.value - virtualWeek + 1)
+        weeksSpan = Math.max(1, Math.min(weeksSpan, remainingWeeks))
+        const year = String(labelYear).slice(-2)
+        monthLabel = {
+          text: `${getLocalizedMonthName(monthToLabel)} '${year}`,
+          month: monthToLabel,
+          weeksSpan,
+          monthClass: monthAbbr[monthToLabel],
+        }
+      }
+    }
+    return {
+      virtualWeek,
+      weekNumber: pad(weekNumber),
+      days,
+      monthLabel,
+      top: (virtualWeek - minVirtualWeek.value) * rowHeight.value,
+    }
+  }
+
+  function internalWindowCalc() {
+    const buffer = 6
+    const currentScrollTop = viewport.value?.scrollTop ?? scrollTopRef?.value ?? 0
+    const startIdx = Math.floor((currentScrollTop - buffer * rowHeight.value) / rowHeight.value)
+    const endIdx = Math.ceil(
+      (currentScrollTop + viewportHeight.value + buffer * rowHeight.value) / rowHeight.value,
+    )
+    const startVW = Math.max(minVirtualWeek.value, startIdx + minVirtualWeek.value)
+    const endVW = Math.min(maxVirtualWeek.value, endIdx + minVirtualWeek.value)
+    return { startVW, endVW }
+  }
+
+  function updateVisibleWeeks(_reason) {
+    const { startVW, endVW } = internalWindowCalc()
+    // Prune outside
+    if (visibleWeeks.value.length) {
+      while (visibleWeeks.value.length && visibleWeeks.value[0].virtualWeek < startVW) {
+        visibleWeeks.value.shift()
+      }
+      while (
+        visibleWeeks.value.length &&
+        visibleWeeks.value[visibleWeeks.value.length - 1].virtualWeek > endVW
+      ) {
+        visibleWeeks.value.pop()
+      }
+    }
+    // Add at most one week (ensuring contiguity)
+    let added = false
+    if (!visibleWeeks.value.length) {
+      visibleWeeks.value.push(createWeek(startVW))
+      added = true
+    } else {
+      visibleWeeks.value.sort((a, b) => a.virtualWeek - b.virtualWeek)
+      const firstVW = visibleWeeks.value[0].virtualWeek
+      const lastVW = visibleWeeks.value[visibleWeeks.value.length - 1].virtualWeek
+      if (firstVW > startVW) {
+        visibleWeeks.value.unshift(createWeek(firstVW - 1))
+        added = true
+      } else {
+        let gapInserted = false
+        for (let i = 0; i < visibleWeeks.value.length - 1; i++) {
+          const curVW = visibleWeeks.value[i].virtualWeek
+          const nextVW = visibleWeeks.value[i + 1].virtualWeek
+          if (nextVW - curVW > 1 && curVW < endVW) {
+            visibleWeeks.value.splice(i + 1, 0, createWeek(curVW + 1))
+            added = true
+            gapInserted = true
+            break
+          }
+        }
+        if (!gapInserted && lastVW < endVW) {
+          visibleWeeks.value.push(createWeek(lastVW + 1))
+          added = true
+        }
+      }
+    }
+    // Coverage check
+    const firstAfter = visibleWeeks.value[0].virtualWeek
+    const lastAfter = visibleWeeks.value[visibleWeeks.value.length - 1].virtualWeek
+    let contiguous = true
+    for (let i = 0; i < visibleWeeks.value.length - 1; i++) {
+      if (visibleWeeks.value[i + 1].virtualWeek !== visibleWeeks.value[i].virtualWeek + 1) {
+        contiguous = false
+        break
+      }
+    }
+    const coverageComplete =
+      firstAfter <= startVW &&
+      lastAfter >= endVW &&
+      contiguous &&
+      visibleWeeks.value.length === endVW - startVW + 1
+    if (!coverageComplete) return false
+    if (
+      lastScrollRange.startVW === startVW &&
+      lastScrollRange.endVW === endVW &&
+      !added &&
+      visibleWeeks.value.length
+    ) {
+      return true
+    }
+    lastScrollRange = { startVW, endVW }
+    return true
+  }
+
+  function scheduleWindowUpdate(reason) {
+    if (updating) return
+    updating = true
+    const run = () => {
+      updating = false
+      updateVisibleWeeks(reason) || scheduleWindowUpdate('incremental-build')
+    }
+    if ('requestIdleCallback' in window) requestIdleCallback(run, { timeout: 16 })
+    else requestAnimationFrame(run)
+  }
+  function resetWeeks(reason = 'reset') {
+    visibleWeeks.value = []
+    lastScrollRange = { startVW: null, endVW: null }
+    scheduleWindowUpdate(reason)
+  }
+
+  // Reflective update of only events inside currently visible weeks (keeps week objects stable)
+  function refreshEvents(reason = 'events-refresh') {
+    if (!visibleWeeks.value.length) return
+    const repeatingBases = []
+    if (calendarStore.events) {
+      for (const ev of calendarStore.events.values()) if (ev.recur) repeatingBases.push(ev)
+    }
+    const selStart = selection.value.startDate
+    const selCount = selection.value.dayCount
+    const selEnd = selStart && selCount > 0 ? addDaysStr(selStart, selCount - 1) : null
+    for (const week of visibleWeeks.value) {
+      for (const day of week.days) {
+        const dateStr = day.date
+        // Update selection flag
+        if (selStart && selEnd) day.isSelected = dateStr >= selStart && dateStr <= selEnd
+        else day.isSelected = false
+        // Rebuild events list for this day
+        const storedEvents = []
+        for (const ev of calendarStore.events.values()) {
+          if (!ev.recur) {
+            const evEnd = toLocalString(
+              addDays(fromLocalString(ev.startDate, DEFAULT_TZ), (ev.days || 1) - 1),
+              DEFAULT_TZ,
+            )
+            if (dateStr >= ev.startDate && dateStr <= evEnd) {
+              storedEvents.push({ ...ev, endDate: evEnd })
+            }
+          }
+        }
+        const dayEvents = [...storedEvents]
+        for (const base of repeatingBases) {
+          const baseEndStr = toLocalString(
+            addDays(fromLocalString(base.startDate, DEFAULT_TZ), (base.days || 1) - 1),
+            DEFAULT_TZ,
+          )
+          if (dateStr >= base.startDate && dateStr <= baseEndStr) {
+            dayEvents.push({ ...base, endDate: baseEndStr, _recurrenceIndex: 0, _baseId: base.id })
+            continue
+          }
+          const spanDays = (base.days || 1) - 1
+          const currentDate = fromLocalString(dateStr, DEFAULT_TZ)
+          let occurrenceFound = false
+          for (let offset = 0; offset <= spanDays && !occurrenceFound; offset++) {
+            const candidateStart = addDays(currentDate, -offset)
+            const candidateStartStr = toLocalString(candidateStart, DEFAULT_TZ)
+            const occurrenceIndex = getOccurrenceIndex(base, candidateStartStr, DEFAULT_TZ)
+            if (occurrenceIndex !== null) {
+              const virtualEndDate = getVirtualOccurrenceEndDate(
+                base,
+                candidateStartStr,
+                DEFAULT_TZ,
+              )
+              if (dateStr >= candidateStartStr && dateStr <= virtualEndDate) {
+                const virtualId = base.id + '_v_' + candidateStartStr
+                const alreadyExists = dayEvents.some((ev) => ev.id === virtualId)
+                if (!alreadyExists) {
+                  dayEvents.push({
+                    ...base,
+                    id: virtualId,
+                    startDate: candidateStartStr,
+                    endDate: virtualEndDate,
+                    _recurrenceIndex: occurrenceIndex,
+                    _baseId: base.id,
+                  })
+                }
+                occurrenceFound = true
+              }
+            }
+          }
+        }
+        day.events = dayEvents
+      }
+    }
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.debug('[VirtualWeeks] refreshEvents', reason, { weeks: visibleWeeks.value.length })
+    }
+  }
+
+  function goToToday() {
+    const top = addDays(new Date(calendarStore.now), -21)
+    const targetWeekIndex = getWeekIndex(top)
+    const newScrollTop = (targetWeekIndex - minVirtualWeek.value) * rowHeight.value
+    if (setScrollTopFn) setScrollTopFn(newScrollTop, 'go-to-today')
+  }
+
+  function handleHeaderYearChange({ scrollTop }) {
+    const maxScroll = contentHeight.value - viewportHeight.value
+    const clamped = Math.max(0, Math.min(scrollTop, isFinite(maxScroll) ? maxScroll : scrollTop))
+    if (setScrollTopFn) setScrollTopFn(clamped, 'header-year-change')
+    resetWeeks('header-year-change')
+  }
+
+  return {
+    visibleWeeks,
+    scheduleWindowUpdate,
+    resetWeeks,
+    updateVisibleWeeks,
+    refreshEvents,
+    getWeekIndex,
+    getFirstDayForVirtualWeek,
+    goToToday,
+    handleHeaderYearChange,
+    attachScroll,
+  }
+}

src/stores/CalendarStore.js

@@ -37,6 +37,10 @@ export const useCalendarStore = defineStore('calendar', {
     },
   }),
   actions: {
+    _rotateWeekdayPattern(pattern, shift) {
+      const k = (7 - (shift % 7)) % 7
+      return pattern.slice(k).concat(pattern.slice(0, k))
+    },
     _resolveCountry(code) {
       if (!code || code !== 'auto') return code
       const locale = navigator.language || navigator.languages?.[0]
@@ -123,23 +127,33 @@ export const useCalendarStore = defineStore('calendar', {
     },
 
     createEvent(eventData) {
-      const singleDay = eventData.startDate === eventData.endDate
+      let days = 1
+      if (typeof eventData.days === 'number') {
+        days = Math.max(1, Math.floor(eventData.days))
+      }
+      const singleDay = days === 1
       const event = {
         id: this.generateId(),
         title: eventData.title,
         startDate: eventData.startDate,
-        endDate: eventData.endDate,
+        days,
         colorId:
-          eventData.colorId ?? this.selectEventColorId(eventData.startDate, eventData.endDate),
+          eventData.colorId ?? this.selectEventColorId(eventData.startDate, eventData.startDate),
         startTime: singleDay ? eventData.startTime || '09:00' : null,
         durationMinutes: singleDay ? eventData.durationMinutes || 60 : null,
-        repeat: ['weeks', 'months'].includes(eventData.repeat) ? eventData.repeat : 'none',
+        recur:
-        repeatInterval: eventData.repeatInterval || 1,
+          eventData.recur && ['weeks', 'months'].includes(eventData.recur.freq)
-        repeatCount: eventData.repeatCount || 'unlimited',
+            ? {
-        repeatWeekdays: eventData.repeatWeekdays,
+                freq: eventData.recur.freq,
-        isRepeating: eventData.repeat && eventData.repeat !== 'none',
+                interval: eventData.recur.interval || 1,
+                count: eventData.recur.count ?? 'unlimited',
+                weekdays: Array.isArray(eventData.recur.weekdays)
+                  ? [...eventData.recur.weekdays]
+                  : null,
+              }
+            : null,
       }
-      this.events.set(event.id, { ...event, isSpanning: event.startDate < event.endDate })
+      this.events.set(event.id, { ...event, isSpanning: event.days > 1 })
       this.notifyEventsChanged()
       return event.id
     },
@@ -154,7 +168,7 @@ export const useCalendarStore = defineStore('calendar', {
       const endDate = fromLocalString(endDateStr, DEFAULT_TZ)
       for (const ev of this.events.values()) {
         const evStart = fromLocalString(ev.startDate)
-        const evEnd = fromLocalString(ev.endDate)
+        const evEnd = addDays(evStart, (ev.days || 1) - 1)
         if (evEnd < startDate || evStart > endDate) continue
         if (ev.colorId >= 0 && ev.colorId < 8) colorCounts[ev.colorId]++
       }
@@ -177,12 +191,12 @@ export const useCalendarStore = defineStore('calendar', {
     deleteFirstOccurrence(baseId) {
       const base = this.getEventById(baseId)
       if (!base) return
-      if (!base.isRepeating) {
+      if (!base.recur) {
         this.deleteEvent(baseId)
         return
       }
       const numericCount =
-        base.repeatCount === 'unlimited' ? Infinity : parseInt(base.repeatCount, 10)
+        base.recur.count === 'unlimited' ? Infinity : parseInt(base.recur.count, 10)
       if (numericCount <= 1) {
         this.deleteEvent(baseId)
         return
@@ -192,17 +206,10 @@ export const useCalendarStore = defineStore('calendar', {
         this.deleteEvent(baseId)
         return
       }
-      const oldStart = fromLocalString(base.startDate, DEFAULT_TZ)
-      const oldEnd = fromLocalString(base.endDate, DEFAULT_TZ)
-      const durationDays = Math.max(0, differenceInCalendarDays(oldEnd, oldStart))
-      const newEndStr = toLocalString(
-        addDays(fromLocalString(nextStartStr, DEFAULT_TZ), durationDays),
-        DEFAULT_TZ,
-      )
       base.startDate = nextStartStr
-      base.endDate = newEndStr
+      // keep same days length
-      if (numericCount !== Infinity) base.repeatCount = String(Math.max(1, numericCount - 1))
+      if (numericCount !== Infinity) base.recur.count = String(Math.max(1, numericCount - 1))
-      this.events.set(baseId, { ...base, isSpanning: base.startDate < base.endDate })
+      this.events.set(baseId, { ...base, isSpanning: base.days > 1 })
       this.notifyEventsChanged()
     },
 
@@ -211,7 +218,7 @@ export const useCalendarStore = defineStore('calendar', {
       if (occurrenceIndex == null) return
       const base = this.getEventById(baseId)
       if (!base) return
-      if (!base.isRepeating) {
+      if (!base.recur) {
         if (occurrenceIndex === 0) this.deleteEvent(baseId)
         return
       }
@@ -220,19 +227,12 @@ export const useCalendarStore = defineStore('calendar', {
         return
       }
       const snapshot = { ...base }
-      base.repeatCount = occurrenceIndex
+      snapshot.recur = snapshot.recur ? { ...snapshot.recur } : null
+      base.recur.count = occurrenceIndex
       const nextStartStr = getOccurrenceDate(snapshot, occurrenceIndex + 1, DEFAULT_TZ)
       if (!nextStartStr) return
-      const durationDays = Math.max(
-        0,
-        differenceInCalendarDays(
-          fromLocalString(snapshot.endDate),
-          fromLocalString(snapshot.startDate),
-        ),
-      )
-      const newEndStr = toLocalString(addDays(fromLocalString(nextStartStr), durationDays))
       const originalNumeric =
-        snapshot.repeatCount === 'unlimited' ? Infinity : parseInt(snapshot.repeatCount, 10)
+        snapshot.recur.count === 'unlimited' ? Infinity : parseInt(snapshot.recur.count, 10)
       let remainingCount = 'unlimited'
       if (originalNumeric !== Infinity) {
         const rem = originalNumeric - (occurrenceIndex + 1)
@@ -242,12 +242,16 @@ export const useCalendarStore = defineStore('calendar', {
       this.createEvent({
         title: snapshot.title,
         startDate: nextStartStr,
-        endDate: newEndStr,
+        days: snapshot.days,
         colorId: snapshot.colorId,
-        repeat: snapshot.repeat,
+        recur: snapshot.recur
-        repeatInterval: snapshot.repeatInterval,
+          ? {
-        repeatCount: remainingCount,
+              freq: snapshot.recur.freq,
-        repeatWeekdays: snapshot.repeatWeekdays,
+              interval: snapshot.recur.interval,
+              count: remainingCount,
+              weekdays: snapshot.recur.weekdays ? [...snapshot.recur.weekdays] : null,
+            }
+          : null,
       })
       this.notifyEventsChanged()
     },
@@ -255,7 +259,7 @@ export const useCalendarStore = defineStore('calendar', {
     deleteFromOccurrence(ctx) {
       const { baseId, occurrenceIndex } = ctx
       const base = this.getEventById(baseId)
-      if (!base || !base.isRepeating) return
+      if (!base || !base.recur) return
       if (occurrenceIndex === 0) {
         this.deleteEvent(baseId)
         return
@@ -264,12 +268,11 @@ export const useCalendarStore = defineStore('calendar', {
       this.notifyEventsChanged()
     },
 
-    setEventRange(eventId, newStartStr, newEndStr, { mode = 'auto' } = {}) {
+    setEventRange(eventId, newStartStr, newEndStr, { mode = 'auto', rotatePattern = true } = {}) {
       const snapshot = this.events.get(eventId)
       if (!snapshot) return
       const prevStart = fromLocalString(snapshot.startDate, DEFAULT_TZ)
-      const prevEnd = fromLocalString(snapshot.endDate, DEFAULT_TZ)
+      const prevDurationDays = (snapshot.days || 1) - 1
-      const prevDurationDays = Math.max(0, differenceInCalendarDays(prevEnd, prevStart))
       const newStart = fromLocalString(newStartStr, DEFAULT_TZ)
       const newEnd = fromLocalString(newEndStr, DEFAULT_TZ)
       const proposedDurationDays = Math.max(0, differenceInCalendarDays(newEnd, newStart))
@@ -277,49 +280,54 @@ export const useCalendarStore = defineStore('calendar', {
       if (mode === 'resize-left' || mode === 'resize-right')
         finalDurationDays = proposedDurationDays
       snapshot.startDate = newStartStr
-      snapshot.endDate = toLocalString(
+      snapshot.days = finalDurationDays + 1
-        addDays(fromLocalString(newStartStr, DEFAULT_TZ), finalDurationDays),
-        DEFAULT_TZ,
-      )
       if (
-        mode === 'move' &&
+        rotatePattern &&
-        snapshot.isRepeating &&
+        (mode === 'move' || mode === 'resize-left') &&
-        snapshot.repeat === 'weeks' &&
+        snapshot.recur &&
-        Array.isArray(snapshot.repeatWeekdays)
+        snapshot.recur.freq === 'weeks' &&
+        Array.isArray(snapshot.recur.weekdays)
       ) {
         const oldDow = prevStart.getDay()
         const newDow = newStart.getDay()
         const shift = newDow - oldDow
         if (shift !== 0) {
-          const rotated = [false, false, false, false, false, false, false]
+          snapshot.recur.weekdays = this._rotateWeekdayPattern(snapshot.recur.weekdays, shift)
-          for (let i = 0; i < 7; i++) {
-            if (snapshot.repeatWeekdays[i]) {
-              let ni = (i + shift) % 7
-              if (ni < 0) ni += 7
-              rotated[ni] = true
-            }
-          }
-          snapshot.repeatWeekdays = rotated
         }
       }
-      this.events.set(eventId, { ...snapshot, isSpanning: snapshot.startDate < snapshot.endDate })
+      this.events.set(eventId, { ...snapshot, isSpanning: snapshot.days > 1 })
       this.notifyEventsChanged()
     },
 
     splitMoveVirtualOccurrence(baseId, occurrenceDateStr, newStartStr, newEndStr) {
       const base = this.events.get(baseId)
-      if (!base || !base.isRepeating) return
+      if (!base || !base.recur) return
-      const originalCountRaw = base.repeatCount
+      const originalCountRaw = base.recur.count
       const occurrenceDate = fromLocalString(occurrenceDateStr, DEFAULT_TZ)
       const baseStart = fromLocalString(base.startDate, DEFAULT_TZ)
+      // If series effectively has <=1 occurrence, treat as simple move (no split) and flatten
+      let totalOccurrences = Infinity
+      if (originalCountRaw !== 'unlimited') {
+        const parsed = parseInt(originalCountRaw, 10)
+        if (!isNaN(parsed)) totalOccurrences = parsed
+      }
+      if (totalOccurrences <= 1) {
+        // Flatten to non-repeating if not already
+        if (base.recur) {
+          base.recur = null
+          this.events.set(baseId, { ...base })
+        }
+        this.setEventRange(baseId, newStartStr, newEndStr, { mode: 'move', rotatePattern: true })
+        return baseId
+      }
       if (occurrenceDate <= baseStart) {
         this.setEventRange(baseId, newStartStr, newEndStr, { mode: 'move' })
-        return
+        return baseId
       }
       let keptOccurrences = 0
-      if (base.repeat === 'weeks') {
+      if (base.recur.freq === 'weeks') {
-        const interval = base.repeatInterval || 1
+        const interval = base.recur.interval || 1
-        const pattern = base.repeatWeekdays || []
+        const pattern = base.recur.weekdays || []
         if (!pattern.some(Boolean)) return
         const WEEK_MS = 7 * 86400000
         const blockStartBase = getMondayOfISOWeek(baseStart)
@@ -333,17 +341,27 @@ export const useCalendarStore = defineStore('calendar', {
           if (pattern[cursor.getDay()] && isAligned(cursor)) keptOccurrences++
           cursor = addDays(cursor, 1)
         }
-      } else if (base.repeat === 'months') {
+      } else if (base.recur.freq === 'months') {
         const diffMonths =
           (occurrenceDate.getFullYear() - baseStart.getFullYear()) * 12 +
           (occurrenceDate.getMonth() - baseStart.getMonth())
-        const interval = base.repeatInterval || 1
+        const interval = base.recur.interval || 1
         if (diffMonths <= 0 || diffMonths % interval !== 0) return
         keptOccurrences = diffMonths
       } else {
         return
       }
       this._terminateRepeatSeriesAtIndex(baseId, keptOccurrences)
+      // After truncation compute base kept count
+      const truncated = this.events.get(baseId)
+      if (
+        truncated &&
+        truncated.recur &&
+        truncated.recur.count &&
+        truncated.recur.count !== 'unlimited'
+      ) {
+        // keptOccurrences already reflects number before split; adjust not needed further
+      }
       let remainingCount = 'unlimited'
       if (originalCountRaw !== 'unlimited') {
         const total = parseInt(originalCountRaw, 10)
@@ -353,40 +371,54 @@ export const useCalendarStore = defineStore('calendar', {
           remainingCount = String(rem)
         }
       }
-      let repeatWeekdays = base.repeatWeekdays
+      let weekdays = base.recur.weekdays
-      if (base.repeat === 'weeks' && Array.isArray(base.repeatWeekdays)) {
+      if (base.recur.freq === 'weeks' && Array.isArray(base.recur.weekdays)) {
         const origWeekday = occurrenceDate.getDay()
         const newWeekday = fromLocalString(newStartStr, DEFAULT_TZ).getDay()
         const shift = newWeekday - origWeekday
         if (shift !== 0) {
-          const rotated = [false, false, false, false, false, false, false]
+          weekdays = this._rotateWeekdayPattern(base.recur.weekdays, shift)
-          for (let i = 0; i < 7; i++) {
-            if (base.repeatWeekdays[i]) {
-              let ni = (i + shift) % 7
-              if (ni < 0) ni += 7
-              rotated[ni] = true
-            }
-          }
-          repeatWeekdays = rotated
         }
       }
-      this.createEvent({
+      const newId = this.createEvent({
         title: base.title,
         startDate: newStartStr,
-        endDate: newEndStr,
+        days: base.days,
         colorId: base.colorId,
-        repeat: base.repeat,
+        recur: {
-        repeatInterval: base.repeatInterval,
+          freq: base.recur.freq,
-        repeatCount: remainingCount,
+          interval: base.recur.interval,
-        repeatWeekdays,
+          count: remainingCount,
+          weekdays,
+        },
       })
+      // Flatten base if single occurrence now
+      if (truncated && truncated.recur) {
+        const baseCountNum =
+          truncated.recur.count === 'unlimited' ? Infinity : parseInt(truncated.recur.count, 10)
+        if (baseCountNum <= 1) {
+          truncated.recur = null
+          this.events.set(baseId, { ...truncated })
+        }
+      }
+      // Flatten new if single occurrence only
+      const newly = this.events.get(newId)
+      if (newly && newly.recur) {
+        const newCountNum =
+          newly.recur.count === 'unlimited' ? Infinity : parseInt(newly.recur.count, 10)
+        if (newCountNum <= 1) {
+          newly.recur = null
+          this.events.set(newId, { ...newly })
+        }
+      }
       this.notifyEventsChanged()
+      return newId
     },
 
-    splitRepeatSeries(baseId, occurrenceIndex, newStartStr, newEndStr) {
+    splitRepeatSeries(baseId, occurrenceIndex, newStartStr, _newEndStr) {
       const base = this.events.get(baseId)
-      if (!base || !base.isRepeating) return null
+      if (!base || !base.recur) return null
-      const originalCountRaw = base.repeatCount
+      const originalCountRaw = base.recur.count
       this._terminateRepeatSeriesAtIndex(baseId, occurrenceIndex)
       let newSeriesCount = 'unlimited'
       if (originalCountRaw !== 'unlimited') {
@@ -399,23 +431,27 @@ export const useCalendarStore = defineStore('calendar', {
       return this.createEvent({
         title: base.title,
         startDate: newStartStr,
-        endDate: newEndStr,
+        days: base.days,
         colorId: base.colorId,
-        repeat: base.repeat,
+        recur: base.recur
-        repeatInterval: base.repeatInterval,
+          ? {
-        repeatCount: newSeriesCount,
+              freq: base.recur.freq,
-        repeatWeekdays: base.repeatWeekdays,
+              interval: base.recur.interval,
+              count: newSeriesCount,
+              weekdays: base.recur.weekdays ? [...base.recur.weekdays] : null,
+            }
+          : null,
       })
     },
 
     _terminateRepeatSeriesAtIndex(baseId, index) {
       const ev = this.events.get(baseId)
-      if (!ev || !ev.isRepeating) return
+      if (!ev || !ev.recur) return
-      if (ev.repeatCount === 'unlimited') {
+      if (ev.recur.count === 'unlimited') {
-        ev.repeatCount = String(index)
+        ev.recur.count = String(index)
       } else {
-        const rc = parseInt(ev.repeatCount, 10)
+        const rc = parseInt(ev.recur.count, 10)
-        if (!isNaN(rc)) ev.repeatCount = String(Math.min(rc, index))
+        if (!isNaN(rc)) ev.recur.count = String(Math.min(rc, index))
       }
       this.notifyEventsChanged()
     },
@@ -433,11 +469,12 @@ export const useCalendarStore = defineStore('calendar', {
         })
       },
       deserialize(value) {
-        return JSON.parse(value, (_k, v) => {
+        const revived = JSON.parse(value, (_k, v) => {
           if (v && v.__map) return new Map(v.data)
           if (v && v.__set) return new Set(v.data)
           return v
         })
+        return revived
       },
     },
   },

src/utils/date.js

@@ -23,9 +23,8 @@ const monthAbbr = [
   'nov',
   'dec',
 ]
-// Calendar year bounds (used instead of config.min_year / config.max_year)
+const MIN_YEAR = 100 // less than 100 is interpreted as 19xx
-const MIN_YEAR = 1901
+const MAX_YEAR = 9999
-const MAX_YEAR = 2100
 
 // Core helpers ------------------------------------------------------------
 /**
@@ -81,9 +80,14 @@ function countPatternDaysInInterval(startDate, endDate, patternArr) {
 }
 
 // Recurrence: Weekly ------------------------------------------------------
+function _getRecur(event) {
+  return event?.recur ?? null
+}
+
 function getWeeklyOccurrenceIndex(event, dateStr, timeZone = DEFAULT_TZ) {
-  if (!event?.isRepeating || event.repeat !== 'weeks') return null
+  const recur = _getRecur(event)
-  const pattern = event.repeatWeekdays || []
+  if (!recur || recur.freq !== 'weeks') return null
+  const pattern = recur.weekdays || []
   if (!pattern.some(Boolean)) return null
 
   const target = fromLocalString(dateStr, timeZone)
@@ -93,17 +97,22 @@ function getWeeklyOccurrenceIndex(event, dateStr, timeZone = DEFAULT_TZ) {
   const dow = dateFns.getDay(target)
   if (!pattern[dow]) return null // target not active
 
-  const interval = event.repeatInterval || 1
+  const interval = recur.interval || 1
   const baseBlockStart = getMondayOfISOWeek(baseStart, timeZone)
   const currentBlockStart = getMondayOfISOWeek(target, timeZone)
   // Number of weeks between block starts (each block start is a Monday)
   const weekDiff = dateFns.differenceInCalendarWeeks(currentBlockStart, baseBlockStart)
   if (weekDiff < 0 || weekDiff % interval !== 0) return null
 
+  const baseDow = dateFns.getDay(baseStart)
+  const baseCountsAsPattern = !!pattern[baseDow]
+
   // Same ISO week as base: count pattern days from baseStart up to target (inclusive)
   if (weekDiff === 0) {
-    const n = countPatternDaysInInterval(baseStart, target, pattern) - 1
+    let n = countPatternDaysInInterval(baseStart, target, pattern) - 1
-    return n < 0 || n >= event.repeatCount ? null : n
+    if (!baseCountsAsPattern) n += 1
+    const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
+    return n < 0 || n >= maxCount ? null : n
   }
 
   const baseWeekEnd = dateFns.addDays(baseBlockStart, 6)
@@ -114,47 +123,59 @@ function getWeeklyOccurrenceIndex(event, dateStr, timeZone = DEFAULT_TZ) {
   const middleWeeksCount = alignedWeeksBetween > 0 ? alignedWeeksBetween * fullPatternWeekCount : 0
   // Count pattern days in the current (possibly partial) week from currentBlockStart..target
   const currentWeekCount = countPatternDaysInInterval(currentBlockStart, target, pattern)
-  const n = firstWeekCount + middleWeeksCount + currentWeekCount - 1
+  let n = firstWeekCount + middleWeeksCount + currentWeekCount - 1
-  return n >= event.repeatCount ? null : n
+  if (!baseCountsAsPattern) n += 1
+  const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
+  return n >= maxCount ? null : n
 }
 
 // Recurrence: Monthly -----------------------------------------------------
 function getMonthlyOccurrenceIndex(event, dateStr, timeZone = DEFAULT_TZ) {
-  if (!event?.isRepeating || event.repeat !== 'months') return null
+  const recur = _getRecur(event)
+  if (!recur || recur.freq !== 'months') return null
   const baseStart = fromLocalString(event.startDate, timeZone)
   const d = fromLocalString(dateStr, timeZone)
   const diffMonths = dateFns.differenceInCalendarMonths(d, baseStart)
   if (diffMonths < 0) return null
-  const interval = event.repeatInterval || 1
+  const interval = recur.interval || 1
   if (diffMonths % interval !== 0) return null
   const baseDay = dateFns.getDate(baseStart)
   const effectiveDay = Math.min(baseDay, dateFns.getDaysInMonth(d))
   if (dateFns.getDate(d) !== effectiveDay) return null
   const n = diffMonths / interval
-  return n >= event.repeatCount ? null : n
+  const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
+  return n >= maxCount ? null : n
 }
 
 function getOccurrenceIndex(event, dateStr, timeZone = DEFAULT_TZ) {
-  if (!event?.isRepeating || event.repeat === 'none') return null
+  const recur = _getRecur(event)
+  if (!recur) return null
   if (dateStr < event.startDate) return null
-  if (event.repeat === 'weeks') return getWeeklyOccurrenceIndex(event, dateStr, timeZone)
+  if (recur.freq === 'weeks') return getWeeklyOccurrenceIndex(event, dateStr, timeZone)
-  if (event.repeat === 'months') return getMonthlyOccurrenceIndex(event, dateStr, timeZone)
+  if (recur.freq === 'months') return getMonthlyOccurrenceIndex(event, dateStr, timeZone)
   return null
 }
 
 // Reverse lookup: given a recurrence index (0-based) return the occurrence start date string.
 // Returns null if the index is out of range or the event is not repeating.
 function getWeeklyOccurrenceDate(event, occurrenceIndex, timeZone = DEFAULT_TZ) {
-  if (!event?.isRepeating || event.repeat !== 'weeks') return null
+  const recur = _getRecur(event)
+  if (!recur || recur.freq !== 'weeks') return null
   if (occurrenceIndex < 0 || !Number.isInteger(occurrenceIndex)) return null
-  if (event.repeatCount !== 'unlimited' && occurrenceIndex >= event.repeatCount) return null
+  const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
-  const pattern = event.repeatWeekdays || []
+  if (occurrenceIndex >= maxCount) return null
+  const pattern = recur.weekdays || []
   if (!pattern.some(Boolean)) return null
-  const interval = event.repeatInterval || 1
+  const interval = recur.interval || 1
   const baseStart = fromLocalString(event.startDate, timeZone)
   if (occurrenceIndex === 0) return toLocalString(baseStart, timeZone)
   const baseWeekMonday = getMondayOfISOWeek(baseStart, timeZone)
   const baseDow = dateFns.getDay(baseStart)
+  const baseCountsAsPattern = !!pattern[baseDow]
+  // Adjust index if base weekday is not part of the pattern (pattern occurrences shift by +1)
+  let occ = occurrenceIndex
+  if (!baseCountsAsPattern) occ -= 1
+  if (occ < 0) return null
   // Sorted list of active weekday indices
   const patternDays = []
   for (let d = 0; d < 7; d++) if (pattern[d]) patternDays.push(d)
@@ -167,10 +188,10 @@ function getWeeklyOccurrenceDate(event, occurrenceIndex, timeZone = DEFAULT_TZ)
     firstWeekDates.push(date)
   }
   const F = firstWeekDates.length
-  if (occurrenceIndex < F) {
+  if (occ < F) {
-    return toLocalString(firstWeekDates[occurrenceIndex], timeZone)
+    return toLocalString(firstWeekDates[occ], timeZone)
   }
-  const remaining = occurrenceIndex - F
+  const remaining = occ - F
   const P = patternDays.length
   if (P === 0) return null
   // Determine aligned week group (k >= 1) in which the remaining-th occurrence lies
@@ -182,10 +203,12 @@ function getWeeklyOccurrenceDate(event, occurrenceIndex, timeZone = DEFAULT_TZ)
 }
 
 function getMonthlyOccurrenceDate(event, occurrenceIndex, timeZone = DEFAULT_TZ) {
-  if (!event?.isRepeating || event.repeat !== 'months') return null
+  const recur = _getRecur(event)
+  if (!recur || recur.freq !== 'months') return null
   if (occurrenceIndex < 0 || !Number.isInteger(occurrenceIndex)) return null
-  if (event.repeatCount !== 'unlimited' && occurrenceIndex >= event.repeatCount) return null
+  const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
-  const interval = event.repeatInterval || 1
+  if (occurrenceIndex >= maxCount) return null
+  const interval = recur.interval || 1
   const baseStart = fromLocalString(event.startDate, timeZone)
   const targetMonthOffset = occurrenceIndex * interval
   const monthDate = dateFns.addMonths(baseStart, targetMonthOffset)
@@ -198,16 +221,15 @@ function getMonthlyOccurrenceDate(event, occurrenceIndex, timeZone = DEFAULT_TZ)
 }
 
 function getOccurrenceDate(event, occurrenceIndex, timeZone = DEFAULT_TZ) {
-  if (!event?.isRepeating || event.repeat === 'none') return null
+  const recur = _getRecur(event)
-  if (event.repeat === 'weeks') return getWeeklyOccurrenceDate(event, occurrenceIndex, timeZone)
+  if (!recur) return null
-  if (event.repeat === 'months') return getMonthlyOccurrenceDate(event, occurrenceIndex, timeZone)
+  if (recur.freq === 'weeks') return getWeeklyOccurrenceDate(event, occurrenceIndex, timeZone)
+  if (recur.freq === 'months') return getMonthlyOccurrenceDate(event, occurrenceIndex, timeZone)
   return null
 }
 
 function getVirtualOccurrenceEndDate(event, occurrenceStartDate, timeZone = DEFAULT_TZ) {
-  const baseStart = fromLocalString(event.startDate, timeZone)
+  const spanDays = Math.max(0, (event.days || 1) - 1)
-  const baseEnd = fromLocalString(event.endDate, timeZone)
-  const spanDays = Math.max(0, dateFns.differenceInCalendarDays(baseEnd, baseStart))
   const occurrenceStart = fromLocalString(occurrenceStartDate, timeZone)
   return toLocalString(dateFns.addDays(occurrenceStart, spanDays), timeZone)
 }