From 5752855f5217005482b12cf2ab3d0f751ab3e316 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Tue, 26 Aug 2025 09:09:32 -0600
Subject: [PATCH 01/17] Fix RTL handling, holiday names direction and UI
 details for full page RTL.

---
 src/components/CalendarDay.vue    | 78 ++++++++++++++++---------------
 src/components/CalendarView.vue   | 37 +++++++++------
 src/components/HeaderControls.vue |  5 +-
 src/plugins/virtualWeeks.js       | 23 +++++++++
 4 files changed, 88 insertions(+), 55 deletions(-)

diff --git a/src/components/CalendarDay.vue b/src/components/CalendarDay.vue
index fde7669..0b93324 100644
--- a/src/components/CalendarDay.vue
+++ b/src/components/CalendarDay.vue
@@ -21,13 +21,10 @@ const props = defineProps({
     ]"
     :data-date="props.day.date"
   >
-    <h1>{{ props.day.displayText }}</h1>
+    <h1 class="day-number">{{ props.day.displayText }}</h1>
     <span v-if="props.day.lunarPhase" class="lunar-phase">{{ props.day.lunarPhase }}</span>
-
-    <div v-if="props.day.holiday" class="holiday-info">
-      <span class="holiday-name" :title="props.day.holiday.name">
-        {{ props.day.holiday.name }}
-      </span>
+    <div v-if="props.day.holiday" class="holiday-info" dir="auto" :title="props.day.holiday.name">
+      {{ props.day.holiday.name }}
     </div>
   </div>
 </template>
@@ -38,19 +35,27 @@ const props = defineProps({
   border-right: 1px solid var(--border-color);
   border-bottom: 1px solid var(--border-color);
   user-select: none;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: flex-start;
+  display: grid;
+  /* 3 columns: day number, flexible space, lunar phase */
+  grid-template-columns: min-content 1fr min-content;
+  /* 3 rows: header, flexible filler, holiday label */
+  grid-template-rows: auto 1fr auto;
+  /* Named grid areas (only ones actually used) */
+  grid-template-areas:
+    'day-number . lunar-phase'
+    'day-number . lunar-phase'
+    'holiday-info holiday-info holiday-info';
+  /* Explicit areas mainly for clarity */
+  grid-auto-flow: row;
   padding: 0.25em;
   overflow: hidden;
   width: 100%;
   height: var(--row-h);
   font-weight: 700;
   transition: background-color 0.15s ease;
+  align-items: start;
 }
-
-.cell h1 {
+.cell h1.day-number {
   margin: 0;
   padding: 0;
   min-width: 1.5em;
@@ -58,15 +63,16 @@ const props = defineProps({
   font-weight: 700;
   color: var(--ink);
   transition: background-color 0.15s ease;
+  grid-area: day-number;
 }
-.cell.weekend h1 {
+.cell.weekend h1.day-number {
   color: var(--weekend);
 }
-.cell.firstday h1 {
+.cell.firstday h1.day-number {
   color: var(--firstday);
   text-shadow: 0 0 0.1em var(--strong);
 }
-.cell.today h1 {
+.cell.today h1.day-number {
   border-radius: 2em;
   background: var(--today);
   border: 0.2em solid var(--today);
@@ -77,16 +83,9 @@ const props = defineProps({
 .cell.selected {
   filter: hue-rotate(180deg);
 }
-.cell.selected h1 {
+.cell.selected h1.day-number {
   color: var(--strong);
 }
-.lunar-phase {
-  position: absolute;
-  top: 0.5em;
-  right: 0.2em;
-  font-size: 0.8em;
-  opacity: 0.7;
-}
 .cell.holiday {
   background-image: linear-gradient(
     135deg,
@@ -103,27 +102,32 @@ const props = defineProps({
     );
   }
 }
-.cell.holiday h1 {
+.cell.holiday h1.day-number {
   /* 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;
-  left: 0.1em;
-  right: 0.1em;
-  line-height: 1;
-  overflow: hidden;
-  font-size: clamp(1.2vw, 0.6em, 1em);
+.lunar-phase {
+  grid-area: lunar-phase;
+  align-self: start;
+  justify-self: end;
+  margin-top: 0.5em;
+  margin-inline-end: 0.2em;
+  font-size: 0.8em;
+  opacity: 0.7;
 }
 
-.holiday-name {
-  display: block;
-  color: var(--holiday-label);
-  padding: 0.15em 0.35em 0.15em 0.25em;
+.holiday-info {
+  grid-area: holiday-info;
+  align-self: end;
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
+  color: var(--holiday-label);
+  font-size: clamp(1.2vw, 0.6em, 1em);
+  line-height: 1;
+  padding-inline: 0.15em;
+  padding-block-end: 0.05em;
+  pointer-events: auto;
 }
 </style>
diff --git a/src/components/CalendarView.vue b/src/components/CalendarView.vue
index b2912e6..387f5d7 100644
--- a/src/components/CalendarView.vue
+++ b/src/components/CalendarView.vue
@@ -87,7 +87,7 @@ const vwm = createVirtualWeekManager({
   contentHeight,
 })
 const visibleWeeks = vwm.visibleWeeks
-const { scheduleWindowUpdate, resetWeeks, refreshEvents } = vwm
+const { scheduleWindowUpdate, resetWeeks, refreshEvents, refreshHolidays } = vwm
 
 // Scroll managers (after scheduleWindowUpdate available)
 const scrollManager = createScrollManager({ viewport, scheduleRebuild: scheduleWindowUpdate })
@@ -98,8 +98,7 @@ const weekColumnScrollManager = createWeekColumnScrollManager({
   contentHeight,
   setScrollTop,
 })
-const { isWeekColDragging, handleWeekColMouseDown, handlePointerLockChange } =
-  weekColumnScrollManager
+const { handleWeekColMouseDown, handlePointerLockChange } = weekColumnScrollManager
 const monthScrollManager = createMonthScrollManager({
   viewport,
   viewportHeight,
@@ -160,6 +159,25 @@ function clearSelection() {
   selection.value = { startDate: null, dayCount: 0 }
 }
 
+// React to holiday config changes: rebuild or refresh holidays
+watch(
+  () => [
+    calendarStore.config.holidays.enabled,
+    calendarStore.config.holidays.country,
+    calendarStore.config.holidays.state,
+    calendarStore.config.holidays.region,
+  ],
+  (_newVals, _oldVals) => {
+    // If weeks already built, just refresh holiday info
+    if (visibleWeeks.value.length) {
+      refreshHolidays('config-change')
+    } else {
+      resetWeeks('holiday-config-change')
+    }
+  },
+  { deep: false },
+)
+
 function startDrag(dateStr) {
   dateStr = normalizeDate(dateStr)
   if (calendarStore.config.select_days === 0) return
@@ -294,15 +312,6 @@ function calculateSelection(anchorStr, otherStr) {
   }
 }
 
-// ---------------- Week label column drag scrolling ----------------
-function getWeekLabelRect() {
-  // Prefer header year label width as stable reference
-  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
-}
-
 onMounted(() => {
   computeRowHeight()
   calendarStore.updateCurrentDate()
@@ -376,8 +385,6 @@ const handleEventClick = (payload) => {
   emit('edit-event', payload)
 }
 
-// header year change delegated to manager
-
 // 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.
@@ -402,7 +409,7 @@ watch(
   },
 )
 
-// Watch lightweight mutation counter only (not deep events map) and rebuild lazily
+// Event changes
 watch(
   () => calendarStore.events,
   () => {
diff --git a/src/components/HeaderControls.vue b/src/components/HeaderControls.vue
index e61a373..e1ca08a 100644
--- a/src/components/HeaderControls.vue
+++ b/src/components/HeaderControls.vue
@@ -101,12 +101,12 @@ onBeforeUnmount(() => {
   display: flex;
   justify-content: end;
   align-items: center;
-  margin-right: 1.5rem;
+  margin-inline-end: 2rem;
 }
 .toggle-btn {
   position: fixed;
   top: 0;
-  right: 0;
+  inset-inline-end: 0;
   background: transparent;
   border: none;
   color: var(--muted);
@@ -157,7 +157,6 @@ onBeforeUnmount(() => {
   color: var(--muted);
   padding: 0;
   margin: 0;
-  margin-right: 0.6rem;
   cursor: pointer;
   font-size: 1.5rem;
   line-height: 1;
diff --git a/src/plugins/virtualWeeks.js b/src/plugins/virtualWeeks.js
index 6d73466..817228f 100644
--- a/src/plugins/virtualWeeks.js
+++ b/src/plugins/virtualWeeks.js
@@ -371,6 +371,28 @@ export function createVirtualWeekManager({
     }
   }
 
+  // Refresh holiday data for currently visible weeks without rebuilding structure
+  function refreshHolidays(reason = 'holidays-refresh') {
+    if (!visibleWeeks.value.length) return
+    const enabled = calendarStore.config.holidays.enabled
+    if (enabled) calendarStore._ensureHolidaysInitialized?.()
+    for (const week of visibleWeeks.value) {
+      for (const day of week.days) {
+        if (enabled) {
+          const holiday = getHolidayForDate(day.date)
+          ;((day.holiday = holiday), (day.isHoliday = holiday !== null))
+        } else {
+          day.holiday = null
+          day.isHoliday = false
+        }
+      }
+    }
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.debug('[VirtualWeeks] refreshHolidays', reason, { weeks: visibleWeeks.value.length })
+    }
+  }
+
   function goToToday() {
     const top = addDays(new Date(calendarStore.now), -21)
     const targetWeekIndex = getWeekIndex(top)
@@ -391,6 +413,7 @@ export function createVirtualWeekManager({
     resetWeeks,
     updateVisibleWeeks,
     refreshEvents,
+    refreshHolidays,
     getWeekIndex,
     getFirstDayForVirtualWeek,
     goToToday,
-- 
2.49.0


From 4c967e44010453f205952b1e3f94a4229375d376 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Tue, 26 Aug 2025 10:04:32 -0600
Subject: [PATCH 02/17] Replace favicon with calendar

---
 public/favicon.ico | Bin 4286 -> 10503 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/public/favicon.ico b/public/favicon.ico
index df36fcfb72584e00488330b560ebcf34a41c64c2..4bf8806ab1e3047726fac9bc268ec959995079ef 100644
GIT binary patch
literal 10503
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

literal 4286
zcmZQzU}RuqP*4ET3Jfa*7#PGD7#K7d7#I{77#JKFAmR)lAOIqU2X5Zs$bgLL=_@3A
zjhlBkf-u-E^l}5#e(vTSjvJvE#HNe&P`g3?jcVTE_#KKtY>*hu-2k;;s(FXw$>tr7
z|DhPf28q$seyH6be^xc`aQp|g8{`HM8zcsjqlp`k?AB}E;dmd(Zjk*T3=#v$(Zmf<
z`&pZJIL^XiH^_bv2FZccP&Evoc7y!o(Y(X)10MT9av(JzwN!Hh)P8~H9gaKj*bVYO
z2!qss)KbNMsNEp{q&4qw{6&QQAT=PhAUzbj0cyWO^A5*L7<TV;{ND`1h<ph0KL~@=
zg7i>iKh$o<<{gf0*zB%ZV*ek6akv4b2c(xQH$d$Mg`s)#4##Kc_BU;D{GXL$3C18c
zx;#`5NH53?lHCBcpR;*~<1!4hcRKzrpKSX--p3S-L2Mjh0MZLGgCzT*c7xm<)V#y-
z3yS?a9sf71bNHW@Xz@SJ!xW4`Y>*fhH-Pkl%mA51v>TxIi#G3YJcMF5D4p$e{9n{+
z^FPkh6a|CCu-Feuiy$*VW)WpS)NYV_3!8U1{z0*Sr{n+HW%mD*!_C3|hP%PT6f6dk
z!{P>z86dMjW)gG*)P9ZT9geq9><0OLyW{`dGAmTOVd3Cm3YKf$4zCkIeurU@Ss*j<
z+7Gpxxp{}<Bn-QEI{vSmZTCMRzznDTAUTj4EMWk02gpp2*;w5GwHp*h4$V6p-=N#y
zxXIyvW~Sx;Sa;NThsS}ZDOe7q2Ba2UKh#W+*&sVG+yJ$o7uuczxfg+VI{q*1v;80M
zjoWURJ3wkcYH@@CsJ#ZV1I2!*-5__xHt%r!f#UX^j{ob|IQ&nIMN4y_c=s}W8VAB4
zHVk{1g4KfbU~vP;Y>*uwyWnns+ArO_!|@D?-JmqL!|{JXy){Z+gZlMPypL%f2*-Jv
z{(*|Y)q(V2GYe`5$S$z`P`g3ysYPp3f$Nr<MfU%bLNL=@yqD?0!~ip45C*YP?DsGQ
z>jCM-5(c2Q8ptk?oiME5yu<M!x_g_pI{wcow8WO)Kgau+2E=)oGJr6c?P>ZM-3=hU
zAT!X-h1vzO6J$So^A5*3=xSPaIsUJhX8S+E&kP=>F!STRO_wBvm~$isnlXSdhz$~h
z$-`)nUXU3ev(U|l+6l5d9HUJID&yBX{7+ATmhrH(1){x7pC<U4nZ|pYGGwJ$f-#5<
z62q1jL1r|pcL2vFnj1iEHIUt)Hsgur9gfFfxMi2)v9gJ_$Kt(BkHvYS;FIy*rllE)
zmP|>(=HT=LB0y}A7)UP8)AS^=9*`Lzvp{CT%!kq-J3)5yHScf)<w*qI>ByT?WW^if
zV!|8eX^Mgqe9c%vaSpN<8H2>Ya%k#7X5<uE@;2{8vjbu$AF>$(!Tt{e|LXt$|6>oq
zKji=a2jLI=|NlQ=hu{Ou|Nnz<1LOby3=ClWkAa~cg#R!w*n{v71_t>L3=I4r{D6Uh
a9fS`sFffB~17iat17ib}cK|F4vKj!X^7qaF

-- 
2.49.0


From 3ef836813050bd5578fc0a958a728d50201f05e4 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Tue, 26 Aug 2025 10:05:25 -0600
Subject: [PATCH 03/17] Improved locale/rtl handling. Whole calendar now flips
 RTL

---
 index.html                      | 12 +++---------
 src/App.vue                     |  3 +++
 src/components/CalendarView.vue |  3 ++-
 src/components/EventOverlay.vue |  1 +
 src/utils/locale.js             |  4 ++++
 5 files changed, 13 insertions(+), 10 deletions(-)
 create mode 100644 src/utils/locale.js

diff --git a/index.html b/index.html
index 1506caa..3ceea3f 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,6 @@
 <!doctype html>
-<html lang="en">
-<head>
+<script type="module" src="/src/main.js"></script>
 <meta charset="utf-8">
 <title>Calendar</title>
-<meta name="viewport" content="width=device-width,initial-scale=1">
-</head>
-<body>
-<div id="app"></div>
-<script type="module" src="/src/main.js"></script>
-</body>
-</html>
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<div id="app"></div>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 5836a2c..4c0fe18 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,7 @@ import { ref, onMounted, onBeforeUnmount } from 'vue'
 import CalendarView from './components/CalendarView.vue'
 import EventDialog from './components/EventDialog.vue'
 import { useCalendarStore } from './stores/CalendarStore'
+import { lang } from './utils/locale'
 
 const eventDialog = ref(null)
 const calendarStore = useCalendarStore()
@@ -35,6 +36,8 @@ function handleGlobalKey(e) {
 onMounted(() => {
   calendarStore.initializeHolidaysFromConfig()
   document.addEventListener('keydown', handleGlobalKey, { passive: false })
+  // Set document language via shared util
+  if (lang) document.documentElement.setAttribute('lang', lang)
 })
 
 onBeforeUnmount(() => {
diff --git a/src/components/CalendarView.vue b/src/components/CalendarView.vue
index 387f5d7..aa57e68 100644
--- a/src/components/CalendarView.vue
+++ b/src/components/CalendarView.vue
@@ -13,6 +13,7 @@ import { daysInclusive, addDaysStr, MIN_YEAR, MAX_YEAR } from '@/utils/date'
 import { toLocalString, fromLocalString, DEFAULT_TZ } from '@/utils/date'
 import { addDays, differenceInWeeks } from 'date-fns'
 import { createVirtualWeekManager } from '@/plugins/virtualWeeks'
+import { rtl } from '@/utils/locale'
 
 const calendarStore = useCalendarStore()
 const emit = defineEmits(['create-event', 'edit-event'])
@@ -433,7 +434,7 @@ window.addEventListener('resize', () => {
 </script>
 
 <template>
-  <div class="calendar-view-root">
+  <div class="calendar-view-root" :dir="rtl && 'rtl'">
     <div ref="rowProbe" class="row-height-probe" aria-hidden="true"></div>
     <div class="wrap">
       <HeaderControls @go-to-today="goToToday" />
diff --git a/src/components/EventOverlay.vue b/src/components/EventOverlay.vue
index 2b15949..2383f7e 100644
--- a/src/components/EventOverlay.vue
+++ b/src/components/EventOverlay.vue
@@ -4,6 +4,7 @@
       v-for="span in eventSpans"
       :key="span.id"
       class="event-span"
+      dir="auto"
       :class="[`event-color-${span.colorId}`]"
       :data-id="span.id"
       :data-n="span._recurrenceIndex != null ? span._recurrenceIndex : 0"
diff --git a/src/utils/locale.js b/src/utils/locale.js
new file mode 100644
index 0000000..1a6ffdf
--- /dev/null
+++ b/src/utils/locale.js
@@ -0,0 +1,4 @@
+export const lang = navigator.language
+const rtlLangs = new Set(['ar', 'fa', 'he', 'iw', 'ur', 'ps', 'sd', 'ug', 'dv', 'ku', 'yi'])
+const primary = lang.toLowerCase().split(/[-_]/)[0]
+export const rtl = rtlLangs.has(primary)
-- 
2.49.0


From 7ba5494ae506b1c53d4dafa5a9956b1b83f0e4e0 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Tue, 26 Aug 2025 10:14:23 -0600
Subject: [PATCH 04/17] Current date in title

---
 src/App.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 4c0fe18..0f7a129 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,10 @@
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
 import CalendarView from './components/CalendarView.vue'
 import EventDialog from './components/EventDialog.vue'
 import { useCalendarStore } from './stores/CalendarStore'
 import { lang } from './utils/locale'
+import { formatTodayString } from './utils/date'
 
 const eventDialog = ref(null)
 const calendarStore = useCalendarStore()
@@ -38,6 +39,8 @@ onMounted(() => {
   document.addEventListener('keydown', handleGlobalKey, { passive: false })
   // Set document language via shared util
   if (lang) document.documentElement.setAttribute('lang', lang)
+  // Initialize title
+  document.title = formatTodayString(new Date(calendarStore.now))
 })
 
 onBeforeUnmount(() => {
@@ -61,6 +64,15 @@ const handleEditEvent = (eventClickPayload) => {
 }
 
 const handleClearSelection = () => {}
+
+// Watch today's date to update document title
+watch(
+  () => calendarStore.now,
+  (val) => {
+    document.title = formatTodayString(new Date(val))
+  },
+  { immediate: false },
+)
 </script>
 
 <template>
-- 
2.49.0


From 3e8cdf1b754aaf5781ed428beeaaf31cd0548b4d Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Tue, 26 Aug 2025 10:20:26 -0600
Subject: [PATCH 05/17] CSS rewritten to replace left/right with start/end.

---
 src/assets/layout.css             | 2 +-
 src/components/BaseDialog.vue     | 4 ++--
 src/components/CalendarDay.vue    | 2 +-
 src/components/CalendarView.vue   | 2 +-
 src/components/EventDialog.vue    | 2 +-
 src/components/EventOverlay.vue   | 4 ++--
 src/components/HeaderControls.vue | 2 +-
 src/components/Jogwheel.vue       | 2 +-
 src/components/SettingsDialog.vue | 8 ++++----
 9 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/assets/layout.css b/src/assets/layout.css
index b12480f..3635ade 100644
--- a/src/assets/layout.css
+++ b/src/assets/layout.css
@@ -131,7 +131,7 @@ header {
   overflow: visible;
   position: absolute;
   top: 0;
-  right: 0;
+  inset-inline-end: 0;
   width: 100%;
 }
 .month-name-label > span {
diff --git a/src/components/BaseDialog.vue b/src/components/BaseDialog.vue
index de83896..6ce0d8d 100644
--- a/src/components/BaseDialog.vue
+++ b/src/components/BaseDialog.vue
@@ -79,10 +79,10 @@ const modalStyle = computed(() => {
   if (modalRef.value && props.modelValue) {
     const style = {
       transform: 'none',
-      left: modalPosition.value.x + 'px',
+      insetInlineStart: modalPosition.value.x + 'px',
       top: modalPosition.value.y + 'px',
       bottom: 'auto',
-      right: 'auto',
+      insetInlineEnd: 'auto',
     }
     if (hasMoved.value) {
       style.width = dialogWidth.value ? dialogWidth.value + 'px' : undefined
diff --git a/src/components/CalendarDay.vue b/src/components/CalendarDay.vue
index 0b93324..2cb3773 100644
--- a/src/components/CalendarDay.vue
+++ b/src/components/CalendarDay.vue
@@ -32,7 +32,7 @@ const props = defineProps({
 <style scoped>
 .cell {
   position: relative;
-  border-right: 1px solid var(--border-color);
+  border-inline-end: 1px solid var(--border-color);
   border-bottom: 1px solid var(--border-color);
   user-select: none;
   display: grid;
diff --git a/src/components/CalendarView.vue b/src/components/CalendarView.vue
index aa57e68..5a5f7c1 100644
--- a/src/components/CalendarView.vue
+++ b/src/components/CalendarView.vue
@@ -560,7 +560,7 @@ header h1 {
 
 .month-label {
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   width: 100%;
   background-image: linear-gradient(to bottom, rgba(186, 186, 186, 0.3), rgba(186, 186, 186, 0.2));
   font-size: 2em;
diff --git a/src/components/EventDialog.vue b/src/components/EventDialog.vue
index 1f2e569..a4c503d 100644
--- a/src/components/EventDialog.vue
+++ b/src/components/EventDialog.vue
@@ -943,7 +943,7 @@ const recurrenceSummary = computed(() => {
   border-radius: 0.4rem;
   cursor: pointer;
   font-size: 0.9rem;
-  text-align: left;
+  text-align: start;
   transition: background-color 0.15s ease;
 }
 .ec-recurrence-toggle:hover {
diff --git a/src/components/EventOverlay.vue b/src/components/EventOverlay.vue
index 2383f7e..c6413ae 100644
--- a/src/components/EventOverlay.vue
+++ b/src/components/EventOverlay.vue
@@ -464,10 +464,10 @@ function applyRangeDuringDrag(st, startDate, endDate) {
 }
 
 .event-span .resize-handle.left {
-  left: 0;
+  inset-inline-start: 0;
 }
 
 .event-span .resize-handle.right {
-  right: 0;
+  inset-inline-end: 0;
 }
 </style>
diff --git a/src/components/HeaderControls.vue b/src/components/HeaderControls.vue
index e1ca08a..e381536 100644
--- a/src/components/HeaderControls.vue
+++ b/src/components/HeaderControls.vue
@@ -204,6 +204,6 @@ onBeforeUnmount(() => {
 .today-date {
   white-space: pre-line;
   text-align: center;
-  margin-right: 2rem;
+  margin-inline-end: 2rem;
 }
 </style>
diff --git a/src/components/Jogwheel.vue b/src/components/Jogwheel.vue
index 3ef0cc8..5dceeb6 100644
--- a/src/components/Jogwheel.vue
+++ b/src/components/Jogwheel.vue
@@ -181,7 +181,7 @@ defineExpose({
 .jogwheel-viewport {
   position: absolute;
   top: 0;
-  right: 0;
+  inset-inline-end: 0;
   bottom: 0;
   width: var(--month-w);
   overflow-y: auto;
diff --git a/src/components/SettingsDialog.vue b/src/components/SettingsDialog.vue
index 78c6cb2..ff28ad2 100644
--- a/src/components/SettingsDialog.vue
+++ b/src/components/SettingsDialog.vue
@@ -159,7 +159,7 @@ defineExpose({ open })
     v-model="show"
     title="Settings"
     class="settings-modal"
-    :style="{ top: '4.5rem', right: '2rem', bottom: 'auto', left: 'auto', transform: 'none' }"
+  :style="{ top: '4.5rem', insetInlineEnd: '2rem', bottom: 'auto', insetInlineStart: 'auto', transform: 'none' }"
   >
     <div class="setting-group">
       <label class="ec-field">
@@ -242,9 +242,9 @@ defineExpose({ open })
 .holiday-settings {
   display: grid;
   gap: 0.75rem;
-  margin-left: 1rem;
-  padding-left: 1rem;
-  border-left: 2px solid var(--border-color);
+  margin-inline-start: 1rem;
+  padding-inline-start: 1rem;
+  border-inline-start: 2px solid var(--border-color);
 }
 select {
   border: 1px solid var(--muted);
-- 
2.49.0


From 090e564bb0c6d15fb705df5da8dc85097999bb09 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Tue, 26 Aug 2025 10:52:47 -0600
Subject: [PATCH 06/17] RTL fixes for event dialog

---
 src/App.vue                       | 27 +--------------------------
 src/components/CalendarView.vue   | 20 ++++++++++++++++----
 src/components/EventDialog.vue    | 17 ++++++++++-------
 src/components/SettingsDialog.vue |  8 +++++++-
 4 files changed, 34 insertions(+), 38 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0f7a129..4fceb40 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,10 @@
 <script setup>
 import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
 import CalendarView from './components/CalendarView.vue'
-import EventDialog from './components/EventDialog.vue'
 import { useCalendarStore } from './stores/CalendarStore'
 import { lang } from './utils/locale'
 import { formatTodayString } from './utils/date'
 
-const eventDialog = ref(null)
 const calendarStore = useCalendarStore()
 
 // Initialize holidays when app starts
@@ -47,24 +45,6 @@ onBeforeUnmount(() => {
   document.removeEventListener('keydown', handleGlobalKey)
 })
 
-const handleCreateEvent = (eventData) => {
-  if (eventDialog.value) {
-    const selectionData = {
-      startDate: eventData.startDate,
-      dayCount: eventData.dayCount,
-    }
-    setTimeout(() => eventDialog.value.openCreateDialog(selectionData), 50)
-  }
-}
-
-const handleEditEvent = (eventClickPayload) => {
-  if (eventDialog.value) {
-    eventDialog.value.openEditDialog(eventClickPayload)
-  }
-}
-
-const handleClearSelection = () => {}
-
 // Watch today's date to update document title
 watch(
   () => calendarStore.now,
@@ -76,12 +56,7 @@ watch(
 </script>
 
 <template>
-  <CalendarView @create-event="handleCreateEvent" @edit-event="handleEditEvent" />
-  <EventDialog
-    ref="eventDialog"
-    :selection="{ startDate: null, dayCount: 0 }"
-    @clear-selection="handleClearSelection"
-  />
+  <CalendarView />
 </template>
 
 <style scoped></style>
diff --git a/src/components/CalendarView.vue b/src/components/CalendarView.vue
index 5a5f7c1..b34fef2 100644
--- a/src/components/CalendarView.vue
+++ b/src/components/CalendarView.vue
@@ -14,9 +14,20 @@ import { toLocalString, fromLocalString, DEFAULT_TZ } from '@/utils/date'
 import { addDays, differenceInWeeks } from 'date-fns'
 import { createVirtualWeekManager } from '@/plugins/virtualWeeks'
 import { rtl } from '@/utils/locale'
+import EventDialog from '@/components/EventDialog.vue'
 
 const calendarStore = useCalendarStore()
-const emit = defineEmits(['create-event', 'edit-event'])
+defineEmits([]) // previously emitted create/edit events externally
+import { shallowRef } from 'vue'
+const eventDialogRef = shallowRef(null)
+function openCreateEventDialog(eventData) {
+  if (!eventDialogRef.value) return
+  const selectionData = { startDate: eventData.startDate, dayCount: eventData.dayCount }
+  setTimeout(() => eventDialogRef.value?.openCreateDialog(selectionData), 30)
+}
+function openEditEventDialog(eventClickPayload) {
+  eventDialogRef.value?.openEditDialog(eventClickPayload)
+}
 const viewport = ref(null)
 const viewportHeight = ref(600)
 const rowHeight = ref(64)
@@ -207,7 +218,7 @@ function finalizeDragAndCreate() {
   const eventData = createEventFromSelection()
   if (eventData) {
     clearSelection()
-    emit('create-event', eventData)
+    openCreateEventDialog(eventData)
   }
   removeGlobalTouchListeners()
 }
@@ -373,7 +384,7 @@ const handleDayMouseUp = (d) => {
   const ev = createEventFromSelection()
   if (ev) {
     clearSelection()
-    emit('create-event', ev)
+    openCreateEventDialog(ev)
   }
 }
 const handleDayTouchStart = (d) => {
@@ -383,7 +394,7 @@ const handleDayTouchStart = (d) => {
 }
 
 const handleEventClick = (payload) => {
-  emit('edit-event', payload)
+  openEditEventDialog(payload)
 }
 
 // Heuristic: rotate month label (180deg) only for predominantly Latin text.
@@ -489,6 +500,7 @@ window.addEventListener('resize', () => {
           </div>
         </div>
       </div>
+      <EventDialog ref="eventDialogRef" :selection="{ startDate: null, dayCount: 0 }" />
     </div>
   </div>
 </template>
diff --git a/src/components/EventDialog.vue b/src/components/EventDialog.vue
index a4c503d..82712f3 100644
--- a/src/components/EventDialog.vue
+++ b/src/components/EventDialog.vue
@@ -594,8 +594,10 @@ const recurrenceSummary = computed(() => {
 <template>
   <BaseDialog v-model="showDialog" :anchor-el="anchorElement" @submit="saveEvent">
     <template #title>
-      {{ dialogMode === 'create' ? 'Create Event' : 'Edit Event'
-      }}<template v-if="headerDateShort"> · {{ headerDateShort }}</template>
+      <div class="dialog-title-row">
+        {{ dialogMode === 'create' ? 'Create Event' : 'Edit Event' }}
+        <span> · {{ headerDateShort }}</span>
+      </div>
     </template>
     <label class="ec-field">
       <input type="text" v-model="title" autocomplete="off" ref="titleInput" />
@@ -620,9 +622,7 @@ const recurrenceSummary = computed(() => {
         </label>
         <span class="recurrence-summary" v-if="recurrenceEnabled">
           {{ recurrenceSummary }}
-          <template v-if="recurrenceOccurrences > 0">
-            until {{ formattedFinalOccurrence }}</template
-          >
+          <span v-if="recurrenceOccurrences > 0"> until {{ formattedFinalOccurrence }} </span>
         </span>
         <span class="recurrence-summary muted" v-else>Does not recur</span>
       </div>
@@ -668,7 +668,7 @@ const recurrenceSummary = computed(() => {
         <template v-if="showDeleteVariants">
           <div class="ec-delete-group">
             <button type="button" class="ec-btn delete-btn" @click="deleteEventOne">
-              Delete {{ formattedOccurrenceShort }}
+              Delete <span>{{ formattedOccurrenceShort }}</span>
             </button>
             <button
               v-if="!isLastOccurrence"
@@ -676,7 +676,7 @@ const recurrenceSummary = computed(() => {
               class="ec-btn delete-btn"
               @click="deleteEventFrom"
             >
-              Rest
+              + Rest
             </button>
             <button type="button" class="ec-btn delete-btn" @click="deleteEventAll">All</button>
           </div>
@@ -1003,4 +1003,7 @@ const recurrenceSummary = computed(() => {
 .ec-occurrences-field .ec-field input[type='number'] {
   max-width: 6rem;
 }
+span {
+  unicode-bidi: isolate;
+}
 </style>
diff --git a/src/components/SettingsDialog.vue b/src/components/SettingsDialog.vue
index ff28ad2..40c3376 100644
--- a/src/components/SettingsDialog.vue
+++ b/src/components/SettingsDialog.vue
@@ -159,7 +159,13 @@ defineExpose({ open })
     v-model="show"
     title="Settings"
     class="settings-modal"
-  :style="{ top: '4.5rem', insetInlineEnd: '2rem', bottom: 'auto', insetInlineStart: 'auto', transform: 'none' }"
+    :style="{
+      top: '4.5rem',
+      insetInlineEnd: '2rem',
+      bottom: 'auto',
+      insetInlineStart: 'auto',
+      transform: 'none',
+    }"
   >
     <div class="setting-group">
       <label class="ec-field">
-- 
2.49.0


From d8b4639ecd17c35c1a1b796cc49137a116d767cf Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Tue, 26 Aug 2025 11:28:28 -0600
Subject: [PATCH 07/17] Localized weekday names, change arrays to begin with
 Sunday.

---
 src/components/CalendarHeader.vue  |  3 +--
 src/components/SettingsDialog.vue  | 14 +++++++-------
 src/components/WeekdaySelector.vue |  4 ++--
 src/utils/date.js                  | 16 ++++++++++++++--
 4 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/components/CalendarHeader.vue b/src/components/CalendarHeader.vue
index 48f36f0..8f3f3c7 100644
--- a/src/components/CalendarHeader.vue
+++ b/src/components/CalendarHeader.vue
@@ -78,8 +78,7 @@ function changeYear(y) {
 
 const weekdayNames = computed(() => {
   // Reorder names & weekend flags
-  const mondayFirstNames = getLocalizedWeekdayNames()
-  const sundayFirstNames = [mondayFirstNames[6], ...mondayFirstNames.slice(0, 6)]
+  const sundayFirstNames = getLocalizedWeekdayNames()
   const reorderedNames = reorderByFirstDay(sundayFirstNames, calendarStore.config.first_day)
   const reorderedWeekend = reorderByFirstDay(calendarStore.weekend, calendarStore.config.first_day)
 
diff --git a/src/components/SettingsDialog.vue b/src/components/SettingsDialog.vue
index 40c3376..21798a8 100644
--- a/src/components/SettingsDialog.vue
+++ b/src/components/SettingsDialog.vue
@@ -3,10 +3,14 @@ import { ref, computed } from 'vue'
 import BaseDialog from './BaseDialog.vue'
 import { useCalendarStore } from '@/stores/CalendarStore'
 import WeekdaySelector from './WeekdaySelector.vue'
+import { getLocalizedWeekdayNamesLong } from '@/utils/date'
 
 const show = ref(false)
 const calendarStore = useCalendarStore()
 
+// Localized weekday names (now Sunday-first from util) for select 0=Sunday ..6=Saturday
+const weekdayNames = getLocalizedWeekdayNamesLong()
+
 // Reactive bindings to store
 const firstDay = computed({
   get: () => calendarStore.config.first_day,
@@ -171,13 +175,9 @@ defineExpose({ open })
       <label class="ec-field">
         <span>First day of week</span>
         <select v-model.number="firstDay">
-          <option :value="0">Sunday</option>
-          <option :value="1">Monday</option>
-          <option :value="2">Tuesday</option>
-          <option :value="3">Wednesday</option>
-          <option :value="4">Thursday</option>
-          <option :value="5">Friday</option>
-          <option :value="6">Saturday</option>
+            <option v-for="(name, idx) in weekdayNames" :key="idx" :value="idx">
+              {{ name.charAt(0).toUpperCase() + name.slice(1) }}
+            </option>
         </select>
       </label>
       <div class="weekend-select ec-field">
diff --git a/src/components/WeekdaySelector.vue b/src/components/WeekdaySelector.vue
index ef35aa4..c23487b 100644
--- a/src/components/WeekdaySelector.vue
+++ b/src/components/WeekdaySelector.vue
@@ -60,8 +60,8 @@ const props = defineProps({
 
 // Initialize internal from external if it has any true; else keep empty (fallback handled on emit)
 if (model.value?.some?.(Boolean)) internal.value = [...model.value]
-const labelsMondayFirst = getLocalizedWeekdayNames()
-const labels = [labelsMondayFirst[6], ...labelsMondayFirst.slice(0, 6)]
+// getLocalizedWeekdayNames now returns Sunday-first already
+const labels = getLocalizedWeekdayNames()
 const anySelected = computed(() => internal.value.some(Boolean))
 const localeFirst = getLocaleFirstDay()
 const localeWeekend = getLocaleWeekendDays()
diff --git a/src/utils/date.js b/src/utils/date.js
index e8608d3..863ec90 100644
--- a/src/utils/date.js
+++ b/src/utils/date.js
@@ -249,11 +249,22 @@ function addDaysStr(str, n, timeZone = DEFAULT_TZ) {
   return toLocalString(dateFns.addDays(fromLocalString(str, timeZone), n), timeZone)
 }
 
+// Weekday name helpers now return Sunday-first ordering (index 0 = Sunday ... 6 = Saturday)
 function getLocalizedWeekdayNames(timeZone = DEFAULT_TZ) {
-  const monday = makeTZDate(2025, 0, 6, timeZone) // a Monday
+  const sunday = makeTZDate(2025, 0, 5, timeZone) // a Sunday
   return Array.from({ length: 7 }, (_, i) =>
     new Intl.DateTimeFormat(undefined, { weekday: 'short', timeZone }).format(
-      dateFns.addDays(monday, i),
+      dateFns.addDays(sunday, i),
+    ),
+  )
+}
+
+// Long (wide) localized weekday names, Sunday-first ordering
+function getLocalizedWeekdayNamesLong(timeZone = DEFAULT_TZ) {
+  const sunday = makeTZDate(2025, 0, 5, timeZone)
+  return Array.from({ length: 7 }, (_, i) =>
+    new Intl.DateTimeFormat(undefined, { weekday: 'long', timeZone }).format(
+      dateFns.addDays(sunday, i),
     ),
   )
 }
@@ -363,6 +374,7 @@ export {
   daysInclusive,
   addDaysStr,
   getLocalizedWeekdayNames,
+  getLocalizedWeekdayNamesLong,
   getLocaleFirstDay,
   getLocaleWeekendDays,
   reorderByFirstDay,
-- 
2.49.0


From a3066946fce11c8397395abed227ef47b5114249 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Tue, 26 Aug 2025 11:51:08 -0600
Subject: [PATCH 08/17] Don't cut weekday names shown in weekday selector
 (breaks in some languages).

---
 src/components/WeekdaySelector.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/WeekdaySelector.vue b/src/components/WeekdaySelector.vue
index c23487b..ca1b372 100644
--- a/src/components/WeekdaySelector.vue
+++ b/src/components/WeekdaySelector.vue
@@ -16,7 +16,7 @@
       @pointerenter="onDragOver(di)"
       @pointerup="onPointerUp"
     >
-      {{ d.slice(0, 3) }}
+      {{ d }}
     </button>
     <button
       v-for="g in barGroups"
-- 
2.49.0


From 6f8d9d777442fef97b50c85b44229632d88df1b6 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Tue, 26 Aug 2025 11:53:11 -0600
Subject: [PATCH 09/17] Make weekend days shown correctly in event dialog
 (settings still follow locale).

---
 src/components/EventDialog.vue    | 1 +
 src/components/SettingsDialog.vue | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/EventDialog.vue b/src/components/EventDialog.vue
index 82712f3..625b60d 100644
--- a/src/components/EventDialog.vue
+++ b/src/components/EventDialog.vue
@@ -655,6 +655,7 @@ const recurrenceSummary = computed(() => {
             v-model="recurrenceWeekdays"
             :fallback="fallbackWeekdays"
             :first-day="calendarStore.config.first_day"
+            :weekend="calendarStore.weekend"
           />
         </div>
       </div>
diff --git a/src/components/SettingsDialog.vue b/src/components/SettingsDialog.vue
index 21798a8..c6225c2 100644
--- a/src/components/SettingsDialog.vue
+++ b/src/components/SettingsDialog.vue
@@ -175,9 +175,9 @@ defineExpose({ open })
       <label class="ec-field">
         <span>First day of week</span>
         <select v-model.number="firstDay">
-            <option v-for="(name, idx) in weekdayNames" :key="idx" :value="idx">
-              {{ name.charAt(0).toUpperCase() + name.slice(1) }}
-            </option>
+          <option v-for="(name, idx) in weekdayNames" :key="idx" :value="idx">
+            {{ name.charAt(0).toUpperCase() + name.slice(1) }}
+          </option>
         </select>
       </label>
       <div class="weekend-select ec-field">
@@ -275,7 +275,7 @@ select {
   flex: 0 0 auto;
   min-width: 120px;
 }
-/* WeekdaySelector display tweaks */
+
 .footer-row {
   display: flex;
   justify-content: flex-end;
-- 
2.49.0


From 85ce3678edeeda60bd3dd262d1b90765261e825e Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Tue, 26 Aug 2025 12:10:26 -0600
Subject: [PATCH 10/17] Allow recurrent multi day events to overlap themselves.

---
 src/plugins/virtualWeeks.js | 100 +++++++++++++++++++-----------------
 1 file changed, 52 insertions(+), 48 deletions(-)

diff --git a/src/plugins/virtualWeeks.js b/src/plugins/virtualWeeks.js
index 817228f..6ea0550 100644
--- a/src/plugins/virtualWeeks.js
+++ b/src/plugins/virtualWeeks.js
@@ -84,38 +84,42 @@ export function createVirtualWeekManager({
       }
       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 baseEnd = toLocalString(
+          addDays(fromLocalString(base.startDate, DEFAULT_TZ), spanDays),
+          DEFAULT_TZ,
+        )
+        for (let offset = 0; offset <= spanDays; 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) {
+          if (candidateStartStr === base.startDate) {
+            if (dateStr >= base.startDate && dateStr <= baseEnd) {
+              if (!dayEvents.some((ev) => ev.id === base.id)) {
                 dayEvents.push({
                   ...base,
-                  id: virtualId,
-                  startDate: candidateStartStr,
-                  endDate: virtualEndDate,
-                  _recurrenceIndex: occurrenceIndex,
+                  endDate: baseEnd,
+                  _recurrenceIndex: 0,
                   _baseId: base.id,
                 })
               }
-              occurrenceFound = true
             }
+            continue
+          }
+          const occurrenceIndex = getOccurrenceIndex(base, candidateStartStr, DEFAULT_TZ)
+          if (occurrenceIndex === null) continue
+          const virtualEndDate = getVirtualOccurrenceEndDate(base, candidateStartStr, DEFAULT_TZ)
+          if (dateStr < candidateStartStr || dateStr > virtualEndDate) continue
+          const virtualId = base.id + '_v_' + candidateStartStr
+          if (!dayEvents.some((ev) => ev.id === virtualId)) {
+            dayEvents.push({
+              ...base,
+              id: virtualId,
+              startDate: candidateStartStr,
+              endDate: virtualEndDate,
+              _recurrenceIndex: occurrenceIndex,
+              _baseId: base.id,
+            })
           }
         }
       }
@@ -323,42 +327,42 @@ export function createVirtualWeekManager({
         }
         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 baseEndStr = toLocalString(
+            addDays(fromLocalString(base.startDate, DEFAULT_TZ), spanDays),
+            DEFAULT_TZ,
+          )
+          for (let offset = 0; offset <= spanDays; 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) {
+            if (candidateStartStr === base.startDate) {
+              if (dateStr >= base.startDate && dateStr <= baseEndStr) {
+                if (!dayEvents.some((ev) => ev.id === base.id)) {
                   dayEvents.push({
                     ...base,
-                    id: virtualId,
-                    startDate: candidateStartStr,
-                    endDate: virtualEndDate,
-                    _recurrenceIndex: occurrenceIndex,
+                    endDate: baseEndStr,
+                    _recurrenceIndex: 0,
                     _baseId: base.id,
                   })
                 }
-                occurrenceFound = true
               }
+              continue
+            }
+            const occurrenceIndex = getOccurrenceIndex(base, candidateStartStr, DEFAULT_TZ)
+            if (occurrenceIndex === null) continue
+            const virtualEndDate = getVirtualOccurrenceEndDate(base, candidateStartStr, DEFAULT_TZ)
+            if (dateStr < candidateStartStr || dateStr > virtualEndDate) continue
+            const virtualId = base.id + '_v_' + candidateStartStr
+            if (!dayEvents.some((ev) => ev.id === virtualId)) {
+              dayEvents.push({
+                ...base,
+                id: virtualId,
+                startDate: candidateStartStr,
+                endDate: virtualEndDate,
+                _recurrenceIndex: occurrenceIndex,
+                _baseId: base.id,
+              })
             }
           }
         }
-- 
2.49.0


From 57305e531b151e288a0eb0b19d3df4f3bf426644 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Tue, 26 Aug 2025 13:43:35 -0600
Subject: [PATCH 11/17] Improved event compression on tracks of the overlay.

---
 src/components/EventOverlay.vue | 218 ++++++++++++++++++++++----------
 1 file changed, 152 insertions(+), 66 deletions(-)

diff --git a/src/components/EventOverlay.vue b/src/components/EventOverlay.vue
index c6413ae..589759f 100644
--- a/src/components/EventOverlay.vue
+++ b/src/components/EventOverlay.vue
@@ -1,34 +1,41 @@
 <template>
-  <div class="week-overlay">
+  <div class="week-overlay" :style="{ gridColumn: '1 / -1' }" ref="weekOverlayRef">
     <div
-      v-for="span in eventSpans"
-      :key="span.id"
-      class="event-span"
-      dir="auto"
-      :class="[`event-color-${span.colorId}`]"
-      :data-id="span.id"
-      :data-n="span._recurrenceIndex != null ? span._recurrenceIndex : 0"
-      :style="{
-        gridColumn: `${span.startIdx + 1} / ${span.endIdx + 2}`,
-        gridRow: `${span.row}`,
-      }"
-      @click="handleEventClick(span)"
-      @pointerdown="handleEventPointerDown(span, $event)"
+      v-for="seg in eventSegments"
+      :key="'seg-' + seg.startIdx + '-' + seg.endIdx"
+      :class="['segment-grid', { compress: isSegmentCompressed(seg) }]"
+      :style="segmentStyle(seg)"
     >
-      <span class="event-title">{{ span.title }}</span>
       <div
-        class="resize-handle left"
-        @pointerdown="handleResizePointerDown(span, 'resize-left', $event)"
-      ></div>
-      <div
-        class="resize-handle right"
-        @pointerdown="handleResizePointerDown(span, 'resize-right', $event)"
-      ></div>
+        v-for="span in seg.events"
+        :key="span.id"
+        class="event-span"
+        dir="auto"
+        :class="[`event-color-${span.colorId}`]"
+        :data-id="span.id"
+        :data-n="span._recurrenceIndex != null ? span._recurrenceIndex : 0"
+        :style="{
+          gridColumn: `${span.startIdxRel + 1} / ${span.endIdxRel + 2}`,
+          gridRow: `${span.row}`,
+        }"
+        @click="handleEventClick(span)"
+        @pointerdown="handleEventPointerDown(span, $event)"
+      >
+        <span class="event-title">{{ span.title }}</span>
+        <div
+          class="resize-handle left"
+          @pointerdown="handleResizePointerDown(span, 'resize-left', $event)"
+        ></div>
+        <div
+          class="resize-handle right"
+          @pointerdown="handleResizePointerDown(span, 'resize-right', $event)"
+        ></div>
+      </div>
     </div>
   </div>
 </template>
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { useCalendarStore } from '@/stores/CalendarStore'
 import { daysInclusive, addDaysStr } from '@/utils/date'
 
@@ -41,45 +48,123 @@ const store = useCalendarStore()
 // Drag state
 const dragState = ref(null)
 const justDragged = ref(false)
+const weekOverlayRef = ref(null)
+const segmentCompression = ref({}) // key -> boolean
 
-// Consolidate already-provided day.events into contiguous spans (no recurrence generation)
-const eventSpans = computed(() => {
-  const weekEvents = new Map()
-  props.week.days.forEach((day, dayIndex) => {
+// Build event segments: each segment is a contiguous day range with at least one bridging event between any adjacent days within it.
+const eventSegments = computed(() => {
+  // Construct spans across the week
+  const spanMap = new Map()
+  props.week.days.forEach((day, di) => {
     day.events.forEach((ev) => {
-      const key = ev.id
-      if (!weekEvents.has(key)) {
-        weekEvents.set(key, { ...ev, startIdx: dayIndex, endIdx: dayIndex })
-      } else {
-        const ref = weekEvents.get(key)
-        ref.endIdx = Math.max(ref.endIdx, dayIndex)
-      }
+      const k = ev.id
+      if (!spanMap.has(k)) spanMap.set(k, { ...ev, startIdx: di, endIdx: di })
+      else spanMap.get(k).endIdx = Math.max(spanMap.get(k).endIdx, di)
     })
   })
-  const arr = Array.from(weekEvents.values())
-  arr.sort((a, b) => {
-    const spanA = a.endIdx - a.startIdx
-    const spanB = b.endIdx - b.startIdx
-    if (spanA !== spanB) return spanB - spanA
+  const spans = Array.from(spanMap.values())
+  // Sort so longer multi-day first, then earlier, then id for stability
+  spans.sort((a, b) => {
+    const la = a.endIdx - a.startIdx
+    const lb = b.endIdx - b.startIdx
+    if (la !== lb) return lb - la
     if (a.startIdx !== b.startIdx) return a.startIdx - b.startIdx
-    // For one-day events that are otherwise equal, sort by color (0 first)
-    if (spanA === 0 && spanB === 0 && a.startIdx === b.startIdx) {
-      const colorA = a.colorId || 0
-      const colorB = b.colorId || 0
-      if (colorA !== colorB) return colorA - colorB
-    }
+    const ca = a.colorId != null ? a.colorId : 0
+    const cb = b.colorId != null ? b.colorId : 0
+    if (ca !== cb) return ca - cb
     return String(a.id).localeCompare(String(b.id))
   })
-  // Assign non-overlapping rows
-  const rowsLastEnd = []
-  arr.forEach((ev) => {
-    let row = 0
-    while (row < rowsLastEnd.length && !(ev.startIdx > rowsLastEnd[row])) row++
-    if (row === rowsLastEnd.length) rowsLastEnd.push(-1)
-    rowsLastEnd[row] = ev.endIdx
-    ev.row = row + 1
+  // Identify breaks
+  const breaks = []
+  for (let d = 0; d < 6; d++) {
+    const bridged = spans.some((sp) => sp.startIdx <= d && sp.endIdx >= d + 1)
+    if (!bridged) breaks.push(d)
+  }
+  const rawSegments = []
+  let segStart = 0
+  for (const b of breaks) {
+    rawSegments.push([segStart, b])
+    segStart = b + 1
+  }
+  rawSegments.push([segStart, 6])
+
+  const segments = rawSegments.map(([s, e]) => {
+    const evs = spans.filter((sp) => sp.startIdx >= s && sp.endIdx <= e)
+    // Row packing in this segment (gap fill)
+    const rows = [] // each row: intervals
+    function fits(row, a, b) {
+      return row.every((iv) => b < iv.start || a > iv.end)
+    }
+    function addInterval(row, a, b) {
+      let inserted = false
+      for (let i = 0; i < row.length; i++) {
+        if (b < row[i].start) {
+          row.splice(i, 0, { start: a, end: b })
+          inserted = true
+          break
+        }
+      }
+      if (!inserted) row.push({ start: a, end: b })
+    }
+    evs.forEach((ev) => {
+      let placed = false
+      for (let r = 0; r < rows.length; r++) {
+        if (fits(rows[r], ev.startIdx, ev.endIdx)) {
+          addInterval(rows[r], ev.startIdx, ev.endIdx)
+          ev.row = r + 1
+          placed = true
+          break
+        }
+      }
+      if (!placed) {
+        rows.push([{ start: ev.startIdx, end: ev.endIdx }])
+        ev.row = rows.length
+      }
+      ev.startIdxRel = ev.startIdx - s
+      ev.endIdxRel = ev.endIdx - s
+    })
+    return { startIdx: s, endIdx: e, events: evs, rowsCount: rows.length }
   })
-  return arr
+  return segments
+})
+
+function segmentStyle(seg) {
+  return { gridColumn: `${seg.startIdx + 1} / ${seg.endIdx + 2}` }
+}
+
+function segmentKey(seg) {
+  return seg.startIdx + '-' + seg.endIdx
+}
+
+function isSegmentCompressed(seg) {
+  return !!segmentCompression.value[segmentKey(seg)]
+}
+
+function recomputeCompression() {
+  const el = weekOverlayRef.value
+  if (!el) return
+  const available = el.clientHeight || 0
+  if (!available) return
+  const cs = getComputedStyle(el)
+  const fontSize = parseFloat(cs.fontSize) || 16
+  const baseRowPx = fontSize * 1.5 // desired row height (matches CSS 1.5em)
+  const marginTop = 0 // already applied outside height
+  const usable = Math.max(0, available - marginTop)
+  const nextMap = {}
+  for (const seg of eventSegments.value) {
+    const desired = (seg.rowsCount || 1) * baseRowPx
+    nextMap[segmentKey(seg)] = desired > usable
+  }
+  segmentCompression.value = nextMap
+}
+
+watch(eventSegments, () => nextTick(() => recomputeCompression()))
+onMounted(() => {
+  nextTick(() => recomputeCompression())
+  window.addEventListener('resize', recomputeCompression)
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', recomputeCompression)
 })
 
 function handleEventClick(span) {
@@ -403,16 +488,22 @@ function applyRangeDuringDrag(st, startDate, endDate) {
 .week-overlay {
   position: absolute;
   inset: 0;
-  pointer-events: none;
-  z-index: 15;
   display: grid;
-  /* Prevent content from expanding tracks beyond container width */
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-  grid-auto-rows: minmax(0, 1.5em);
-
-  row-gap: 0.05em;
+  grid-template-columns: repeat(7, 1fr);
   margin-top: 1.8em;
+  pointer-events: none;
+}
+.segment-grid {
+  display: grid;
+  gap: 2px;
   align-content: start;
+  pointer-events: none;
+  overflow: hidden;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1.5em;
+}
+.segment-grid.compress {
+  grid-auto-rows: 1fr;
 }
 
 .event-span {
@@ -430,13 +521,8 @@ function applyRangeDuringDrag(st, startDate, endDate) {
   align-items: center;
   position: relative;
   user-select: none;
-  height: 100%;
-  width: 100%;
-  max-width: 100%;
-  box-sizing: border-box;
   z-index: 1;
   text-align: center;
-  min-width: 0;
 }
 
 /* Inner title wrapper ensures proper ellipsis within flex/grid constraints */
-- 
2.49.0


From e13fc7fe9b3ef71fb891472cc239ca027b7f349a Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Tue, 26 Aug 2025 17:07:59 -0600
Subject: [PATCH 12/17] Event dragging UX improvement: now hits days even
 through other elements.

---
 src/components/EventOverlay.vue | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/components/EventOverlay.vue b/src/components/EventOverlay.vue
index 589759f..3de07bb 100644
--- a/src/components/EventOverlay.vue
+++ b/src/components/EventOverlay.vue
@@ -307,19 +307,16 @@ function startLocalDrag(init, evt) {
 
 // Determine date under pointer: traverse DOM to find day cell carrying data-date attribute
 function getDateUnderPointer(x, y, el) {
-  let cur = el
-  while (cur) {
-    if (cur.dataset && cur.dataset.date) {
-      return { date: cur.dataset.date }
+  for (let cur = el; cur; cur = cur.parentElement)
+    if (cur.dataset?.date) return { date: cur.dataset.date }
+  // The event overlay may block seeing the day under it, so we need a fallback
+  const overlayEl = weekOverlayRef.value
+  const container = overlayEl?.parentElement // .days-grid
+  if (container) {
+    for (const d of container.querySelectorAll('[data-date]')) {
+      const { left, right, top, bottom } = d.getBoundingClientRect()
+      if (y >= top && y <= bottom && x >= left && x <= right) return { date: d.dataset.date }
     }
-    cur = cur.parentElement
-  }
-  // Fallback: elementFromPoint scan
-  const probe = document.elementFromPoint(x, y)
-  let p = probe
-  while (p) {
-    if (p.dataset && p.dataset.date) return { date: p.dataset.date }
-    p = p.parentElement
   }
   return null
 }
-- 
2.49.0


From b3b2391dfbe35584d4df5891e3ad885302abe6f7 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Wed, 27 Aug 2025 05:46:14 -0600
Subject: [PATCH 13/17] Rewrite recurrence handling, much cleanup.

---
 src/components/CalendarView.vue   |  36 ++---
 src/components/EventDialog.vue    |  51 ++-----
 src/components/EventOverlay.vue   |  80 ++++-------
 src/components/HeaderControls.vue |   1 -
 src/plugins/virtualWeeks.js       | 213 +++++++-----------------------
 src/stores/CalendarStore.js       |  12 +-
 src/utils/date.js                 | 170 +-----------------------
 src/utils/events.js               | 171 ++++++++++++++++++++++++
 8 files changed, 275 insertions(+), 459 deletions(-)
 create mode 100644 src/utils/events.js

diff --git a/src/components/CalendarView.vue b/src/components/CalendarView.vue
index b34fef2..31448d8 100644
--- a/src/components/CalendarView.vue
+++ b/src/components/CalendarView.vue
@@ -457,26 +457,21 @@ window.addEventListener('resize', () => {
       />
       <div class="calendar-container">
         <div class="calendar-viewport" ref="viewport">
-          <!-- Main calendar content (weeks and days) -->
-          <div class="main-calendar-area">
-            <div class="calendar-content" :style="{ height: contentHeight + 'px' }">
-              <CalendarWeek
-                v-for="week in visibleWeeks"
-                :key="week.virtualWeek"
-                :week="week"
-                :dragging="isDragging"
-                :style="{ top: week.top + 'px' }"
-                @day-mousedown="handleDayMouseDown"
-                @day-mouseenter="handleDayMouseEnter"
-                @day-mouseup="handleDayMouseUp"
-                @day-touchstart="handleDayTouchStart"
-                @event-click="handleEventClick"
-              />
-            </div>
+          <div class="calendar-content">
+            <CalendarWeek
+              v-for="week in visibleWeeks"
+              :key="week.virtualWeek"
+              :week="week"
+              :dragging="isDragging"
+              :style="{ top: week.top + 'px' }"
+              @day-mousedown="handleDayMouseDown"
+              @day-mouseenter="handleDayMouseEnter"
+              @day-mouseup="handleDayMouseUp"
+              @day-touchstart="handleDayTouchStart"
+              @event-click="handleEventClick"
+            />
           </div>
-          <!-- Month column area -->
           <div class="month-column-area">
-            <!-- Month labels -->
             <div class="month-labels-container" :style="{ height: contentHeight + 'px' }">
               <template v-for="monthWeek in visibleWeeks" :key="monthWeek.virtualWeek + '-month'">
                 <div
@@ -549,11 +544,6 @@ header h1 {
   grid-template-columns: 1fr var(--month-w);
 }
 
-.main-calendar-area {
-  position: relative;
-  overflow: hidden;
-}
-
 .calendar-content {
   position: relative;
   width: 100%;
diff --git a/src/components/EventDialog.vue b/src/components/EventDialog.vue
index 625b60d..2d04cce 100644
--- a/src/components/EventDialog.vue
+++ b/src/components/EventDialog.vue
@@ -12,6 +12,7 @@ import {
   formatDateLong,
   DEFAULT_TZ,
 } from '@/utils/date'
+import { getDate as getOccurrenceDate } from '@/utils/events'
 import { addDays, addMonths } from 'date-fns'
 
 const props = defineProps({
@@ -301,48 +302,18 @@ function openEditDialog(payload) {
   if (!payload) return
 
   const baseId = payload.id
-  let occurrenceIndex = payload.occurrenceIndex || 0
+  let n = payload.n || 0
   let weekday = null
   let occurrenceDate = null
 
   const event = calendarStore.getEventById(baseId)
   if (!event) return
 
-  if (event.recur) {
-    if (event.recur.freq === 'weeks' && occurrenceIndex >= 0) {
-      const pattern = event.recur.weekdays || []
-      const baseStart = fromLocalString(event.startDate, 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.recur.interval || 1
-        const WEEK_MS = 7 * 86400000
-        const baseBlockStart = getMondayOfISOWeek(baseStart)
-        function isAligned(d) {
-          const blk = getMondayOfISOWeek(d)
-          const diff = Math.floor((blk - baseBlockStart) / WEEK_MS)
-          return diff % interval === 0
-        }
-        let cur = addDays(baseEnd, 1)
-        let found = 0
-        let safety = 0
-        while (found < occurrenceIndex && safety < 20000) {
-          if (pattern[cur.getDay()] && isAligned(cur)) {
-            found++
-            if (found === occurrenceIndex) break
-          }
-          cur = addDays(cur, 1)
-          safety++
-        }
-        occurrenceDate = cur
-        weekday = cur.getDay()
-      }
-    } else if (event.recur.freq === 'months' && occurrenceIndex >= 0) {
-      const baseDate = fromLocalString(event.startDate, DEFAULT_TZ)
-      occurrenceDate = addMonths(baseDate, occurrenceIndex)
+  if (event.recur && n >= 0) {
+    const occStr = getOccurrenceDate(event, n, DEFAULT_TZ)
+    if (occStr) {
+      occurrenceDate = fromLocalString(occStr, DEFAULT_TZ)
+      weekday = occurrenceDate.getDay()
     }
   }
   dialogMode.value = 'edit'
@@ -372,10 +343,10 @@ function openEditDialog(payload) {
   eventSaved.value = false
 
   if (event.recur) {
-    if (event.recur.freq === 'weeks' && occurrenceIndex >= 0) {
-      occurrenceContext.value = { baseId, occurrenceIndex, weekday, occurrenceDate }
-    } else if (event.recur.freq === 'months' && occurrenceIndex > 0) {
-      occurrenceContext.value = { baseId, occurrenceIndex, weekday: null, occurrenceDate }
+    if (event.recur.freq === 'weeks' && n >= 0) {
+      occurrenceContext.value = { baseId, occurrenceIndex: n, weekday, occurrenceDate }
+    } else if (event.recur.freq === 'months' && n > 0) {
+      occurrenceContext.value = { baseId, occurrenceIndex: n, weekday: null, occurrenceDate }
     }
   }
   // anchor to base event start date
diff --git a/src/components/EventOverlay.vue b/src/components/EventOverlay.vue
index 3de07bb..4a4482b 100644
--- a/src/components/EventOverlay.vue
+++ b/src/components/EventOverlay.vue
@@ -8,12 +8,12 @@
     >
       <div
         v-for="span in seg.events"
-        :key="span.id"
+        :key="span.id + '-' + (span.n != null ? span.n : 0)"
         class="event-span"
         dir="auto"
         :class="[`event-color-${span.colorId}`]"
         :data-id="span.id"
-        :data-n="span._recurrenceIndex != null ? span._recurrenceIndex : 0"
+        :data-n="span.n != null ? span.n : 0"
         :style="{
           gridColumn: `${span.startIdxRel + 1} / ${span.endIdxRel + 2}`,
           gridRow: `${span.row}`,
@@ -57,12 +57,17 @@ const eventSegments = computed(() => {
   const spanMap = new Map()
   props.week.days.forEach((day, di) => {
     day.events.forEach((ev) => {
-      const k = ev.id
-      if (!spanMap.has(k)) spanMap.set(k, { ...ev, startIdx: di, endIdx: di })
-      else spanMap.get(k).endIdx = Math.max(spanMap.get(k).endIdx, di)
+      const key = ev.id + '|' + (ev.n ?? 0)
+      if (!spanMap.has(key)) spanMap.set(key, { ...ev, startIdx: di, endIdx: di })
+      else spanMap.get(key).endIdx = Math.max(spanMap.get(key).endIdx, di)
     })
   })
   const spans = Array.from(spanMap.values())
+  // Derive span start/end date strings from week day indices (removes need for per-day stored endDate)
+  spans.forEach((sp) => {
+    sp.startDate = props.week.days[sp.startIdx].date
+    sp.endDate = props.week.days[sp.endIdx].date
+  })
   // Sort so longer multi-day first, then earlier, then id for stability
   spans.sort((a, b) => {
     const la = a.endIdx - a.startIdx
@@ -169,25 +174,13 @@ onBeforeUnmount(() => {
 
 function handleEventClick(span) {
   if (justDragged.value) return
-  // Emit composite payload: base id (without virtual marker), instance id, occurrence index (data-n)
-  const idStr = span.id
-  const hasVirtualMarker = typeof idStr === 'string' && idStr.includes('_v_')
-  const baseId = hasVirtualMarker ? idStr.slice(0, idStr.lastIndexOf('_v_')) : idStr
-  emit('event-click', {
-    id: baseId,
-    instanceId: span.id,
-    occurrenceIndex: span._recurrenceIndex != null ? span._recurrenceIndex : 0,
-  })
+  emit('event-click', { id: span.id, n: span.n != null ? span.n : 0 })
 }
 
 function handleEventPointerDown(span, event) {
   if (event.target.classList.contains('resize-handle')) return
   event.stopPropagation()
-  const idStr = span.id
-  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
+  const baseId = span.id
   let anchorDate = span.startDate
   try {
     const spanDays = daysInclusive(span.startDate, span.endDate)
@@ -202,14 +195,11 @@ function handleEventPointerDown(span, event) {
       if (dayIndex >= spanDays) dayIndex = spanDays - 1
       anchorDate = addDaysStr(span.startDate, dayIndex)
     }
-  } catch (e) {
-    // Fallback to startDate if any calculation fails
-  }
+  } catch (e) {}
   startLocalDrag(
     {
       id: baseId,
       originalId: span.id,
-      isVirtual,
       mode: 'move',
       pointerStartX: event.clientX,
       pointerStartY: event.clientY,
@@ -223,15 +213,11 @@ function handleEventPointerDown(span, event) {
 
 function handleResizePointerDown(span, mode, event) {
   event.stopPropagation()
-  const idStr = span.id
-  const hasVirtualMarker = typeof idStr === 'string' && idStr.includes('_v_')
-  const baseId = hasVirtualMarker ? idStr.slice(0, idStr.lastIndexOf('_v_')) : idStr
-  const isVirtual = hasVirtualMarker
+  const baseId = span.id
   startLocalDrag(
     {
       id: baseId,
       originalId: span.id,
-      isVirtual,
       mode,
       pointerStartX: event.clientX,
       pointerStartY: event.clientY,
@@ -253,7 +239,6 @@ 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') {
@@ -280,13 +265,11 @@ function startLocalDrag(init, evt) {
     tentativeEnd: init.endDate,
     originalWeekday,
     originalPattern,
-    realizedId: null, // for virtual occurrence converted to real during drag
+    realizedId: null,
   }
 
-  // Begin compound history session (single snapshot after drag completes)
   store.$history?.beginCompound()
 
-  // Capture pointer events globally
   if (evt.currentTarget && evt.pointerId !== undefined) {
     try {
       evt.currentTarget.setPointerCapture(evt.pointerId)
@@ -295,7 +278,6 @@ function startLocalDrag(init, evt) {
     }
   }
 
-  // Prevent default for mouse/pen to avoid text selection. For touch we skip so the user can still scroll.
   if (!(evt.pointerType === 'touch')) {
     evt.preventDefault()
   }
@@ -309,7 +291,6 @@ function startLocalDrag(init, evt) {
 function getDateUnderPointer(x, y, el) {
   for (let cur = el; cur; cur = cur.parentElement)
     if (cur.dataset?.date) return { date: cur.dataset.date }
-  // The event overlay may block seeing the day under it, so we need a fallback
   const overlayEl = weekOverlayRef.value
   const container = overlayEl?.parentElement // .days-grid
   if (container) {
@@ -333,7 +314,6 @@ function onDragPointerMove(e) {
   const hitEl = document.elementFromPoint(e.clientX, e.clientY)
   const hit = getDateUnderPointer(e.clientX, e.clientY, hitEl)
 
-  // If we can't find a date, don't update the range but keep the drag active
   if (!hit || !hit.date) return
 
   const [ns, ne] = computeTentativeRangeFromPointer(st, hit.date)
@@ -343,26 +323,22 @@ function onDragPointerMove(e) {
   st.tentativeStart = ns
   st.tentativeEnd = ne
   if (st.mode === 'move') {
-    if (st.isVirtual) {
-      // On first movement convert virtual occurrence into a real new event (split series)
+    if (st.n && st.n > 0) {
       if (!st.realizedId) {
         const newId = store.splitMoveVirtualOccurrence(st.id, st.startDate, ns, ne)
         if (newId) {
           st.realizedId = newId
           st.id = newId
-          st.isVirtual = false
+          // converted to standalone event
         } 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()
@@ -375,15 +351,9 @@ function onDragPointerMove(e) {
         }
       } 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
+  } else if (!(st.n && st.n > 0)) {
+    applyRangeDuringDrag({ id: st.id, mode: st.mode, startDate: ns, endDate: ne }, ns, ne)
+  } else if (st.n && st.n > 0 && (st.mode === 'resize-left' || st.mode === 'resize-right')) {
     if (!st.realizedId) {
       const initialStart = ns
       const initialEnd = ne
@@ -391,10 +361,9 @@ function onDragPointerMove(e) {
       if (newId) {
         st.realizedId = newId
         st.id = newId
-        st.isVirtual = false
+        // converted
       } 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 })
   }
@@ -404,7 +373,6 @@ function onDragPointerUp(e) {
   const st = dragState.value
   if (!st) return
 
-  // Release pointer capture if it was set
   if (e.target && e.pointerId !== undefined) {
     try {
       e.target.releasePointerCapture(e.pointerId)
@@ -424,11 +392,10 @@ function onDragPointerUp(e) {
 
   if (moved) {
     // Apply final mutation if virtual (we deferred) or if non-virtual no further change (rare)
-    if (st.isVirtual) {
+    if (st.n && st.n > 0) {
       applyRangeDuringDrag(
         {
           id: st.id,
-          isVirtual: st.isVirtual,
           mode: st.mode,
           startDate: finalStart,
           endDate: finalEnd,
@@ -442,7 +409,6 @@ function onDragPointerUp(e) {
       justDragged.value = false
     }, 120)
   }
-  // End compound session (snapshot if changed)
   store.$history?.endCompound()
 }
 
@@ -471,7 +437,7 @@ function normalizeDateOrder(aStr, bStr) {
 }
 
 function applyRangeDuringDrag(st, startDate, endDate) {
-  if (st.isVirtual) {
+  if (st.n && st.n > 0) {
     if (st.mode !== 'move') return // no resize for virtual occurrence
     // Split-move: occurrence being dragged treated as first of new series
     store.splitMoveVirtualOccurrence(st.id, st.startDate, startDate, endDate)
diff --git a/src/components/HeaderControls.vue b/src/components/HeaderControls.vue
index e381536..46ecdf6 100644
--- a/src/components/HeaderControls.vue
+++ b/src/components/HeaderControls.vue
@@ -31,7 +31,6 @@
       >
         ⚙
       </button>
-      <!-- Settings dialog now lives here -->
       <SettingsDialog ref="settingsDialog" />
     </div>
   </Transition>
diff --git a/src/plugins/virtualWeeks.js b/src/plugins/virtualWeeks.js
index 6ea0550..c68852f 100644
--- a/src/plugins/virtualWeeks.js
+++ b/src/plugins/virtualWeeks.js
@@ -1,5 +1,5 @@
 import { ref } from 'vue'
-import { addDays, differenceInWeeks } from 'date-fns'
+import { addDays, differenceInWeeks, isBefore, isAfter } from 'date-fns'
 import {
   toLocalString,
   fromLocalString,
@@ -11,9 +11,8 @@ import {
   monthAbbr,
   lunarPhaseSymbol,
   MAX_YEAR,
-  getOccurrenceIndex,
-  getVirtualOccurrenceEndDate,
 } from '@/utils/date'
+import { buildDayEvents } from '@/utils/events'
 import { getHolidayForDate } from '@/utils/holidays'
 
 /**
@@ -54,81 +53,16 @@ export function createVirtualWeekManager({
 
   function createWeek(virtualWeek) {
     const firstDay = getFirstDayForVirtualWeek(virtualWeek)
-    const isoAnchor = addDays(firstDay, (4 - firstDay.getDay() + 7) % 7)
-    const weekNumber = getISOWeek(isoAnchor)
+    const thu = addDays(firstDay, (4 - firstDay.getDay() + 7) % 7)
+    const weekNumber = getISOWeek(thu)
     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 spanDays = (base.days || 1) - 1
-        const currentDate = curDateObj
-        const baseEnd = toLocalString(
-          addDays(fromLocalString(base.startDate, DEFAULT_TZ), spanDays),
-          DEFAULT_TZ,
-        )
-        for (let offset = 0; offset <= spanDays; offset++) {
-          const candidateStart = addDays(currentDate, -offset)
-          const candidateStartStr = toLocalString(candidateStart, DEFAULT_TZ)
-          if (candidateStartStr === base.startDate) {
-            if (dateStr >= base.startDate && dateStr <= baseEnd) {
-              if (!dayEvents.some((ev) => ev.id === base.id)) {
-                dayEvents.push({
-                  ...base,
-                  endDate: baseEnd,
-                  _recurrenceIndex: 0,
-                  _baseId: base.id,
-                })
-              }
-            }
-            continue
-          }
-          const occurrenceIndex = getOccurrenceIndex(base, candidateStartStr, DEFAULT_TZ)
-          if (occurrenceIndex === null) continue
-          const virtualEndDate = getVirtualOccurrenceEndDate(base, candidateStartStr, DEFAULT_TZ)
-          if (dateStr < candidateStartStr || dateStr > virtualEndDate) continue
-          const virtualId = base.id + '_v_' + candidateStartStr
-          if (!dayEvents.some((ev) => ev.id === virtualId)) {
-            dayEvents.push({
-              ...base,
-              id: virtualId,
-              startDate: candidateStartStr,
-              endDate: virtualEndDate,
-              _recurrenceIndex: occurrenceIndex,
-              _baseId: base.id,
-            })
-          }
-        }
-      }
-      return dayEvents
-    }
-
     for (let i = 0; i < 7; i++) {
       const dateStr = toLocalString(cur, DEFAULT_TZ)
-      const dayEvents = collectEventsForDate(dateStr, fromLocalString(dateStr, DEFAULT_TZ))
+      const events = buildDayEvents(calendarStore.events.values(), dateStr, DEFAULT_TZ)
       const dow = cur.getDay()
       const isFirst = cur.getDate() === 1
       if (isFirst) {
@@ -137,10 +71,11 @@ export function createVirtualWeekManager({
         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()
-      }
+      if (isFirst)
+        displayText =
+          cur.getMonth() === 0
+            ? cur.getFullYear()
+            : monthAbbr[cur.getMonth()].slice(0, 3).toUpperCase()
       let holiday = null
       if (calendarStore.config.holidays.enabled) {
         calendarStore._ensureHolidaysInitialized?.()
@@ -157,36 +92,12 @@ export function createVirtualWeekManager({
         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,
+        isSelected: isDateSelected(dateStr),
+        events,
       })
       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],
-        }
-      }
-    }
+    const monthLabel = buildMonthLabel({ hasFirst, monthToLabel, labelYear, cur, virtualWeek })
     return {
       virtualWeek,
       weekNumber: pad(weekNumber),
@@ -196,6 +107,36 @@ export function createVirtualWeekManager({
     }
   }
 
+  function isDateSelected(dateStr) {
+    if (!selection.value.startDate || selection.value.dayCount <= 0) return false
+    const startDateObj = fromLocalString(selection.value.startDate, DEFAULT_TZ)
+    const endDateStr = addDaysStr(selection.value.startDate, selection.value.dayCount - 1)
+    const endDateObj = fromLocalString(endDateStr, DEFAULT_TZ)
+    const d = fromLocalString(dateStr, DEFAULT_TZ)
+    return !isBefore(d, startDateObj) && !isAfter(d, endDateObj)
+  }
+
+  function buildMonthLabel({ hasFirst, monthToLabel, labelYear, cur, virtualWeek }) {
+    if (!hasFirst || monthToLabel === null) return null
+    if (!labelYear || labelYear > MAX_YEAR) return null
+    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)
+    return {
+      text: `${getLocalizedMonthName(monthToLabel)} '${year}`,
+      month: monthToLabel,
+      weeksSpan,
+      monthClass: monthAbbr[monthToLabel],
+    }
+  }
+
   function internalWindowCalc() {
     const buffer = 6
     const currentScrollTop = viewport.value?.scrollTop ?? scrollTopRef?.value ?? 0
@@ -299,10 +240,6 @@ export function createVirtualWeekManager({
   // 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
@@ -310,63 +247,13 @@ export function createVirtualWeekManager({
       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 spanDays = (base.days || 1) - 1
-          const currentDate = fromLocalString(dateStr, DEFAULT_TZ)
-          const baseEndStr = toLocalString(
-            addDays(fromLocalString(base.startDate, DEFAULT_TZ), spanDays),
-            DEFAULT_TZ,
-          )
-          for (let offset = 0; offset <= spanDays; offset++) {
-            const candidateStart = addDays(currentDate, -offset)
-            const candidateStartStr = toLocalString(candidateStart, DEFAULT_TZ)
-            if (candidateStartStr === base.startDate) {
-              if (dateStr >= base.startDate && dateStr <= baseEndStr) {
-                if (!dayEvents.some((ev) => ev.id === base.id)) {
-                  dayEvents.push({
-                    ...base,
-                    endDate: baseEndStr,
-                    _recurrenceIndex: 0,
-                    _baseId: base.id,
-                  })
-                }
-              }
-              continue
-            }
-            const occurrenceIndex = getOccurrenceIndex(base, candidateStartStr, DEFAULT_TZ)
-            if (occurrenceIndex === null) continue
-            const virtualEndDate = getVirtualOccurrenceEndDate(base, candidateStartStr, DEFAULT_TZ)
-            if (dateStr < candidateStartStr || dateStr > virtualEndDate) continue
-            const virtualId = base.id + '_v_' + candidateStartStr
-            if (!dayEvents.some((ev) => ev.id === virtualId)) {
-              dayEvents.push({
-                ...base,
-                id: virtualId,
-                startDate: candidateStartStr,
-                endDate: virtualEndDate,
-                _recurrenceIndex: occurrenceIndex,
-                _baseId: base.id,
-              })
-            }
-          }
-        }
-        day.events = dayEvents
+        if (selStart && selEnd) {
+          const d = fromLocalString(dateStr, DEFAULT_TZ),
+            s = fromLocalString(selStart, DEFAULT_TZ),
+            e = fromLocalString(selEnd, DEFAULT_TZ)
+          day.isSelected = !isBefore(d, s) && !isAfter(d, e)
+        } else day.isSelected = false
+        day.events = buildDayEvents(dateStr)
       }
     }
     if (process.env.NODE_ENV !== 'production') {
diff --git a/src/stores/CalendarStore.js b/src/stores/CalendarStore.js
index 5b5adab..04a25ce 100644
--- a/src/stores/CalendarStore.js
+++ b/src/stores/CalendarStore.js
@@ -4,7 +4,6 @@ import {
   fromLocalString,
   getLocaleWeekendDays,
   getMondayOfISOWeek,
-  getOccurrenceDate,
   DEFAULT_TZ,
 } from '@/utils/date'
 import { differenceInCalendarDays, addDays } from 'date-fns'
@@ -201,11 +200,6 @@ export const useCalendarStore = defineStore('calendar', {
         this.deleteEvent(baseId)
         return
       }
-      const nextStartStr = getOccurrenceDate(base, 1, DEFAULT_TZ)
-      if (!nextStartStr) {
-        this.deleteEvent(baseId)
-        return
-      }
       base.startDate = nextStartStr
       // keep same days length
       if (numericCount !== Infinity) base.recur.count = String(Math.max(1, numericCount - 1))
@@ -228,9 +222,11 @@ export const useCalendarStore = defineStore('calendar', {
       }
       const snapshot = { ...base }
       snapshot.recur = snapshot.recur ? { ...snapshot.recur } : null
+      if (base.recur.count === occurrenceIndex + 1) {
+        base.recur.count = occurrenceIndex
+        return
+      }
       base.recur.count = occurrenceIndex
-      const nextStartStr = getOccurrenceDate(snapshot, occurrenceIndex + 1, DEFAULT_TZ)
-      if (!nextStartStr) return
       const originalNumeric =
         snapshot.recur.count === 'unlimited' ? Infinity : parseInt(snapshot.recur.count, 10)
       let remainingCount = 'unlimited'
diff --git a/src/utils/date.js b/src/utils/date.js
index 863ec90..50dfa0a 100644
--- a/src/utils/date.js
+++ b/src/utils/date.js
@@ -23,7 +23,8 @@ const monthAbbr = [
   'nov',
   'dec',
 ]
-const MIN_YEAR = 100 // less than 100 is interpreted as 19xx
+// Browser safe range
+const MIN_YEAR = 100
 const MAX_YEAR = 9999
 
 // Core helpers ------------------------------------------------------------
@@ -70,169 +71,7 @@ function getMondayOfISOWeek(date, timeZone = DEFAULT_TZ) {
 
 const mondayIndex = (d) => (dateFns.getDay(d) + 6) % 7
 
-// Count how many days in [startDate..endDate] match the boolean `pattern` array
-function countPatternDaysInInterval(startDate, endDate, patternArr) {
-  const days = dateFns.eachDayOfInterval({
-    start: dateFns.startOfDay(startDate),
-    end: dateFns.startOfDay(endDate),
-  })
-  return days.reduce((c, d) => c + (patternArr[dateFns.getDay(d)] ? 1 : 0), 0)
-}
-
-// Recurrence: Weekly ------------------------------------------------------
-function _getRecur(event) {
-  return event?.recur ?? null
-}
-
-function getWeeklyOccurrenceIndex(event, dateStr, timeZone = DEFAULT_TZ) {
-  const recur = _getRecur(event)
-  if (!recur || recur.freq !== 'weeks') return null
-  const pattern = recur.weekdays || []
-  if (!pattern.some(Boolean)) return null
-
-  const target = fromLocalString(dateStr, timeZone)
-  const baseStart = fromLocalString(event.startDate, timeZone)
-  if (target < baseStart) return null
-
-  const dow = dateFns.getDay(target)
-  if (!pattern[dow]) return null // target not active
-
-  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) {
-    let n = countPatternDaysInInterval(baseStart, target, pattern) - 1
-    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)
-  // Count pattern days in the first (possibly partial) week from baseStart..baseWeekEnd
-  const firstWeekCount = countPatternDaysInInterval(baseStart, baseWeekEnd, pattern)
-  const alignedWeeksBetween = weekDiff / interval - 1
-  const fullPatternWeekCount = pattern.filter(Boolean).length
-  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)
-  let n = firstWeekCount + middleWeeksCount + currentWeekCount - 1
-  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) {
-  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 = 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
-  const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
-  return n >= maxCount ? null : n
-}
-
-function getOccurrenceIndex(event, dateStr, timeZone = DEFAULT_TZ) {
-  const recur = _getRecur(event)
-  if (!recur) return null
-  if (dateStr < event.startDate) return null
-  if (recur.freq === 'weeks') return getWeeklyOccurrenceIndex(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) {
-  const recur = _getRecur(event)
-  if (!recur || recur.freq !== 'weeks') return null
-  if (occurrenceIndex < 0 || !Number.isInteger(occurrenceIndex)) return null
-  const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
-  if (occurrenceIndex >= maxCount) return null
-  const pattern = recur.weekdays || []
-  if (!pattern.some(Boolean)) return null
-  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)
-  // First (possibly partial) week: only pattern days >= baseDow and >= baseStart date
-  const firstWeekDates = []
-  for (const d of patternDays) {
-    if (d < baseDow) continue
-    const date = dateFns.addDays(baseWeekMonday, d)
-    if (date < baseStart) continue
-    firstWeekDates.push(date)
-  }
-  const F = firstWeekDates.length
-  if (occ < F) {
-    return toLocalString(firstWeekDates[occ], timeZone)
-  }
-  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
-  const k = Math.floor(remaining / P) + 1 // 1-based aligned week count after base week
-  const indexInWeek = remaining % P
-  const dow = patternDays[indexInWeek]
-  const occurrenceDate = dateFns.addDays(baseWeekMonday, k * interval * 7 + dow)
-  return toLocalString(occurrenceDate, timeZone)
-}
-
-function getMonthlyOccurrenceDate(event, occurrenceIndex, timeZone = DEFAULT_TZ) {
-  const recur = _getRecur(event)
-  if (!recur || recur.freq !== 'months') return null
-  if (occurrenceIndex < 0 || !Number.isInteger(occurrenceIndex)) return null
-  const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
-  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)
-  // Adjust day for shorter months (clamp like forward logic)
-  const baseDay = dateFns.getDate(baseStart)
-  const daysInTargetMonth = dateFns.getDaysInMonth(monthDate)
-  const day = Math.min(baseDay, daysInTargetMonth)
-  const actual = makeTZDate(dateFns.getYear(monthDate), dateFns.getMonth(monthDate), day, timeZone)
-  return toLocalString(actual, timeZone)
-}
-
-function getOccurrenceDate(event, occurrenceIndex, timeZone = DEFAULT_TZ) {
-  const recur = _getRecur(event)
-  if (!recur) return null
-  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 spanDays = Math.max(0, (event.days || 1) - 1)
-  const occurrenceStart = fromLocalString(occurrenceStartDate, timeZone)
-  return toLocalString(dateFns.addDays(occurrenceStart, spanDays), timeZone)
-}
+// (Recurrence utilities moved to events.js)
 
 // Utility formatting & localization ---------------------------------------
 const pad = (n) => String(n).padStart(2, '0')
@@ -366,9 +205,6 @@ export {
   // recurrence
   getMondayOfISOWeek,
   mondayIndex,
-  getOccurrenceIndex,
-  getOccurrenceDate,
-  getVirtualOccurrenceEndDate,
   // formatting & localization
   pad,
   daysInclusive,
diff --git a/src/utils/events.js b/src/utils/events.js
new file mode 100644
index 0000000..bc79b4b
--- /dev/null
+++ b/src/utils/events.js
@@ -0,0 +1,171 @@
+import * as dateFns from 'date-fns'
+import { fromLocalString, toLocalString, getMondayOfISOWeek, makeTZDate, DEFAULT_TZ } from './date'
+import { addDays, isBefore, isAfter, differenceInCalendarDays } from 'date-fns'
+
+function countPatternDaysInInterval(startDate, endDate, patternArr) {
+  const days = dateFns.eachDayOfInterval({
+    start: dateFns.startOfDay(startDate),
+    end: dateFns.startOfDay(endDate),
+  })
+  return days.reduce((c, d) => c + (patternArr[dateFns.getDay(d)] ? 1 : 0), 0)
+}
+
+export function getNWeekly(event, dateStr, timeZone = DEFAULT_TZ) {
+  const { recur } = event
+  if (!recur || recur.freq !== 'weeks') return null
+  const pattern = recur.weekdays || []
+  if (!pattern.some(Boolean)) return null
+  const target = fromLocalString(dateStr, timeZone)
+  const baseStart = fromLocalString(event.startDate, timeZone)
+  if (dateFns.isBefore(target, baseStart)) return null
+  const dow = dateFns.getDay(target)
+  if (!pattern[dow]) return null
+  const interval = recur.interval || 1
+  const baseBlockStart = getMondayOfISOWeek(baseStart, timeZone)
+  const currentBlockStart = getMondayOfISOWeek(target, timeZone)
+  const weekDiff = dateFns.differenceInCalendarWeeks(currentBlockStart, baseBlockStart)
+  if (weekDiff < 0 || weekDiff % interval !== 0) return null
+  const baseDow = dateFns.getDay(baseStart)
+  const baseCountsAsPattern = !!pattern[baseDow]
+  if (weekDiff === 0) {
+    let n = countPatternDaysInInterval(baseStart, target, pattern) - 1
+    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)
+  const firstWeekCount = countPatternDaysInInterval(baseStart, baseWeekEnd, pattern)
+  const alignedWeeksBetween = weekDiff / interval - 1
+  const fullPatternWeekCount = pattern.filter(Boolean).length
+  const middleWeeksCount = alignedWeeksBetween > 0 ? alignedWeeksBetween * fullPatternWeekCount : 0
+  const currentWeekCount = countPatternDaysInInterval(currentBlockStart, target, pattern)
+  let n = firstWeekCount + middleWeeksCount + currentWeekCount - 1
+  if (!baseCountsAsPattern) n += 1
+  const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
+  return n >= maxCount ? null : n
+}
+
+function getNMonthly(event, dateStr, timeZone = DEFAULT_TZ) {
+  const { recur } = 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 = 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
+  const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
+  return n >= maxCount ? null : n
+}
+
+function getN(event, dateStr, timeZone = DEFAULT_TZ) {
+  const { recur } = event
+  if (!recur) return null
+  const targetDate = fromLocalString(dateStr, timeZone)
+  const eventStartDate = fromLocalString(event.startDate, timeZone)
+  if (dateFns.isBefore(targetDate, eventStartDate)) return null
+  if (recur.freq === 'weeks') return getNWeekly(event, dateStr, timeZone)
+  if (recur.freq === 'months') return getNMonthly(event, dateStr, timeZone)
+  return null
+}
+
+// Reverse lookup: occurrence index -> start date string
+function getDateWeekly(event, n, timeZone = DEFAULT_TZ) {
+  const { recur } = event
+  if (!recur || recur.freq !== 'weeks') return null
+  if (n < 0 || !Number.isInteger(n)) return null
+  const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
+  if (n >= maxCount) return null
+  const pattern = recur.weekdays || []
+  if (!pattern.some(Boolean)) return null
+  const interval = recur.interval || 1
+  const baseStart = fromLocalString(event.startDate, timeZone)
+  if (n === 0) return toLocalString(baseStart, timeZone)
+  const baseWeekMonday = getMondayOfISOWeek(baseStart, timeZone)
+  const baseDow = dateFns.getDay(baseStart)
+  const baseCountsAsPattern = !!pattern[baseDow]
+  let occ = n
+  if (!baseCountsAsPattern) occ -= 1
+  if (occ < 0) return null
+  const patternDays = []
+  for (let d = 0; d < 7; d++) if (pattern[d]) patternDays.push(d)
+  const firstWeekDates = []
+  for (const d of patternDays) {
+    if (d < baseDow) continue
+    const date = dateFns.addDays(baseWeekMonday, d)
+    if (date < baseStart) continue
+    firstWeekDates.push(date)
+  }
+  const F = firstWeekDates.length
+  if (occ < F) return toLocalString(firstWeekDates[occ], timeZone)
+  const remaining = occ - F
+  const P = patternDays.length
+  if (P === 0) return null
+  const k = Math.floor(remaining / P) + 1
+  const indexInWeek = remaining % P
+  const dow = patternDays[indexInWeek]
+  const occurrenceDate = dateFns.addDays(baseWeekMonday, k * interval * 7 + dow)
+  return toLocalString(occurrenceDate, timeZone)
+}
+
+function getDateMonthly(event, n, timeZone = DEFAULT_TZ) {
+  const { recur } = event
+  if (!recur || recur.freq !== 'months') return null
+  if (n < 0 || !Number.isInteger(n)) return null
+  const maxCount = recur.count === 'unlimited' ? Infinity : parseInt(recur.count, 10)
+  if (n >= maxCount) return null
+  const interval = recur.interval || 1
+  const baseStart = fromLocalString(event.startDate, timeZone)
+  const targetMonthOffset = n * interval
+  const monthDate = dateFns.addMonths(baseStart, targetMonthOffset)
+  const baseDay = dateFns.getDate(baseStart)
+  const daysInTargetMonth = dateFns.getDaysInMonth(monthDate)
+  const day = Math.min(baseDay, daysInTargetMonth)
+  const actual = makeTZDate(dateFns.getYear(monthDate), dateFns.getMonth(monthDate), day, timeZone)
+  return toLocalString(actual, timeZone)
+}
+
+export function getDate(event, n, timeZone = DEFAULT_TZ) {
+  const { recur } = event
+  if (!recur) return null
+  if (recur.freq === 'weeks') return getDateWeekly(event, n, timeZone)
+  if (recur.freq === 'months') return getDateMonthly(event, n, timeZone)
+  return null
+}
+
+export function buildDayEvents(events, dateStr, timeZone = DEFAULT_TZ) {
+  const date = fromLocalString(dateStr, timeZone)
+  const out = []
+  for (const ev of events) {
+    const spanDays = ev.days || 1
+    if (!ev.recur) {
+      const baseStart = fromLocalString(ev.startDate, timeZone)
+      const baseEnd = addDays(baseStart, spanDays - 1)
+      if (!isBefore(date, baseStart) && !isAfter(date, baseEnd)) {
+        const diffDays = differenceInCalendarDays(date, baseStart)
+        out.push({ ...ev, n: 0, nDay: diffDays })
+      }
+      continue
+    }
+    // Recurring: gather all events whose start for any recurrence lies within spanDays window
+    const maxBack = Math.min(spanDays - 1, spanScanCap(spanDays))
+    for (let back = 0; back <= maxBack; back++) {
+      const candidateStart = addDays(date, -back)
+      const candidateStartStr = toLocalString(candidateStart, timeZone)
+      const n = getN(ev, candidateStartStr, timeZone)
+      if (n === null) continue
+      if (back >= spanDays) continue
+      out.push({ ...ev, n, nDay: back })
+    }
+  }
+  return out
+}
+
+function spanScanCap(spanDays) {
+  if (spanDays <= 31) return spanDays - 1
+  return Math.min(spanDays - 1, 90)
+}
-- 
2.49.0


From 354893342d70ed86abcbfae61fc0744875203063 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Wed, 27 Aug 2025 06:03:15 -0600
Subject: [PATCH 14/17] Fix refactoring

---
 src/plugins/virtualWeeks.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/virtualWeeks.js b/src/plugins/virtualWeeks.js
index c68852f..59763c7 100644
--- a/src/plugins/virtualWeeks.js
+++ b/src/plugins/virtualWeeks.js
@@ -253,7 +253,7 @@ export function createVirtualWeekManager({
             e = fromLocalString(selEnd, DEFAULT_TZ)
           day.isSelected = !isBefore(d, s) && !isAfter(d, e)
         } else day.isSelected = false
-        day.events = buildDayEvents(dateStr)
+        day.events = buildDayEvents(calendarStore.events.values(), dateStr, DEFAULT_TZ)
       }
     }
     if (process.env.NODE_ENV !== 'production') {
-- 
2.49.0


From b539c71611e24a7ca521c36ceb1666f438252710 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Wed, 27 Aug 2025 06:03:41 -0600
Subject: [PATCH 15/17] Firefox compatibility

---
 src/components/CalendarView.vue | 6 +++---
 src/utils/date.js               | 3 +--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/CalendarView.vue b/src/components/CalendarView.vue
index 31448d8..1e57c7d 100644
--- a/src/components/CalendarView.vue
+++ b/src/components/CalendarView.vue
@@ -457,7 +457,7 @@ window.addEventListener('resize', () => {
       />
       <div class="calendar-container">
         <div class="calendar-viewport" ref="viewport">
-          <div class="calendar-content">
+          <div class="calendar-content" :style="{ height: contentHeight + 'px' }">
             <CalendarWeek
               v-for="week in visibleWeeks"
               :key="week.virtualWeek"
@@ -471,8 +471,8 @@ window.addEventListener('resize', () => {
               @event-click="handleEventClick"
             />
           </div>
-          <div class="month-column-area">
-            <div class="month-labels-container" :style="{ height: contentHeight + 'px' }">
+          <div class="month-column-area" :style="{ height: contentHeight + 'px' }">
+            <div class="month-labels-container" :style="{ height: '100%' }">
               <template v-for="monthWeek in visibleWeeks" :key="monthWeek.virtualWeek + '-month'">
                 <div
                   v-if="monthWeek && monthWeek.monthLabel"
diff --git a/src/utils/date.js b/src/utils/date.js
index 50dfa0a..7409e94 100644
--- a/src/utils/date.js
+++ b/src/utils/date.js
@@ -23,8 +23,7 @@ const monthAbbr = [
   'nov',
   'dec',
 ]
-// Browser safe range
-const MIN_YEAR = 100
+const MIN_YEAR = 1000
 const MAX_YEAR = 9999
 
 // Core helpers ------------------------------------------------------------
-- 
2.49.0


From b2bb6b2cde9bb6084b58f43af054425e020ffc30 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Wed, 27 Aug 2025 06:18:16 -0600
Subject: [PATCH 16/17] Simple find

---
 src/components/CalendarView.vue | 270 +++++++++++++++++++++++++++++++-
 1 file changed, 269 insertions(+), 1 deletion(-)

diff --git a/src/components/CalendarView.vue b/src/components/CalendarView.vue
index 1e57c7d..3bfdaac 100644
--- a/src/components/CalendarView.vue
+++ b/src/components/CalendarView.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
+import { ref, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue'
 import { useCalendarStore } from '@/stores/CalendarStore'
 import CalendarHeader from '@/components/CalendarHeader.vue'
 import CalendarWeek from '@/components/CalendarWeek.vue'
@@ -397,6 +397,154 @@ const handleEventClick = (payload) => {
   openEditEventDialog(payload)
 }
 
+// ------------------------------
+// Event Search (Ctrl/Cmd+F)
+// ------------------------------
+const searchOpen = ref(false)
+const searchQuery = ref('')
+const searchResults = ref([]) // [{ id, title, startDate }]
+const searchIndex = ref(0)
+const searchInputRef = ref(null)
+
+function isEditableElement(el) {
+  if (!el) return false
+  const tag = el.tagName
+  if (tag === 'INPUT' || tag === 'TEXTAREA' || el.isContentEditable) return true
+  return false
+}
+
+function buildSearchResults() {
+  const q = searchQuery.value.trim().toLowerCase()
+  if (!q) {
+    searchResults.value = []
+    searchIndex.value = 0
+    return
+  }
+  const out = []
+  for (const ev of calendarStore.events.values()) {
+    const title = (ev.title || '').trim()
+    if (!title) continue
+    if (title.toLowerCase().includes(q)) {
+      out.push({ id: ev.id, title: title, startDate: ev.startDate })
+    }
+  }
+  out.sort((a, b) => (a.startDate < b.startDate ? -1 : a.startDate > b.startDate ? 1 : 0))
+  searchResults.value = out
+  if (searchIndex.value >= out.length) searchIndex.value = 0
+}
+
+watch(searchQuery, buildSearchResults)
+watch(
+  () => calendarStore.eventsMutation,
+  () => {
+    if (searchOpen.value && searchQuery.value.trim()) buildSearchResults()
+  },
+)
+
+function openSearch(prefill = '') {
+  searchOpen.value = true
+  if (prefill) searchQuery.value = prefill
+  nextTick(() => {
+    if (searchInputRef.value) {
+      searchInputRef.value.focus()
+      searchInputRef.value.select()
+    }
+  })
+  buildSearchResults()
+}
+function closeSearch() {
+  searchOpen.value = false
+}
+function navigateSearch(delta) {
+  const n = searchResults.value.length
+  if (!n) return
+  searchIndex.value = (searchIndex.value + delta + n) % n
+  scrollToCurrentResult()
+}
+function scrollToCurrentResult() {
+  const cur = searchResults.value[searchIndex.value]
+  if (!cur) return
+  // Scroll so week containing event is near top (offset 2 weeks for context)
+  try {
+    const dateObj = fromLocalString(cur.startDate, DEFAULT_TZ)
+    const weekIndex = getWeekIndex(dateObj)
+    const offsetWeeks = 2
+    const targetScrollWeek = Math.max(minVirtualWeek.value, weekIndex - offsetWeeks)
+    const newScrollTop = (targetScrollWeek - minVirtualWeek.value) * rowHeight.value
+    setScrollTop(newScrollTop, 'search-jump')
+    scheduleWindowUpdate('search-jump')
+  } catch {}
+}
+function activateCurrentResult() {
+  scrollToCurrentResult()
+}
+
+function handleGlobalFind(e) {
+  if (!(e.ctrlKey || e.metaKey)) return
+  const k = e.key
+  if (k === 'f' || k === 'F') {
+    if (isEditableElement(e.target)) return
+    e.preventDefault()
+    if (!searchOpen.value) openSearch('')
+    else {
+      // If already open, select input text for quick overwrite
+      nextTick(() => {
+        if (searchInputRef.value) {
+          searchInputRef.value.focus()
+          searchInputRef.value.select()
+        }
+      })
+    }
+  }
+  // While open: Enter confirms current selection & closes dialog
+  if (searchOpen.value && (k === 'Enter' || k === 'Return')) {
+    e.preventDefault()
+    activateCurrentResult()
+    closeSearch()
+  }
+}
+
+function handleSearchKeydown(e) {
+  if (!searchOpen.value) return
+  if (e.key === 'Escape') {
+    e.preventDefault()
+    closeSearch()
+  } else if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    navigateSearch(1)
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    navigateSearch(-1)
+  } else if (e.key === 'Enter') {
+    // Enter inside input: activate current and close
+    e.preventDefault()
+    activateCurrentResult()
+    closeSearch()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', handleGlobalFind, { passive: false })
+})
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', handleGlobalFind)
+})
+
+// Ensure focus when (re)opening via reactive watch (catches programmatic toggles too)
+watch(
+  () => searchOpen.value,
+  (v) => {
+    if (v) {
+      nextTick(() => {
+        if (searchInputRef.value) {
+          searchInputRef.value.focus()
+          searchInputRef.value.select()
+        }
+      })
+    }
+  },
+)
+
 // 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.
@@ -496,6 +644,37 @@ window.addEventListener('resize', () => {
         </div>
       </div>
       <EventDialog ref="eventDialogRef" :selection="{ startDate: null, dayCount: 0 }" />
+      <!-- Event Search Overlay -->
+      <div v-if="searchOpen" class="event-search" @keydown.capture="handleSearchKeydown">
+        <div class="search-row">
+          <input
+            ref="searchInputRef"
+            v-model="searchQuery"
+            type="text"
+            placeholder="Search events..."
+            aria-label="Search events"
+            autofocus
+          />
+          <button type="button" @click="closeSearch" title="Close (Esc)">✕</button>
+        </div>
+        <ul class="results" v-if="searchResults.length">
+          <li
+            v-for="(r, i) in searchResults"
+            :key="r.id"
+            :class="{ active: i === searchIndex }"
+            @click="
+              searchIndex = i
+              activateCurrentResult()
+              closeSearch()
+            "
+          >
+            <span class="title">{{ r.title }}</span>
+            <span class="date">{{ r.startDate }}</span>
+          </li>
+        </ul>
+        <div v-else class="no-results">{{ searchQuery ? 'No matches' : 'Type to search' }}</div>
+        <div class="hint">Enter to go, Esc to close, ↑/↓ to browse</div>
+      </div>
     </div>
   </div>
 </template>
@@ -597,4 +776,93 @@ header h1 {
   height: var(--row-h);
   pointer-events: none;
 }
+
+/* Search overlay */
+.event-search {
+  position: fixed;
+  top: 0.75rem;
+  inset-inline-end: 0.75rem;
+  z-index: 1200;
+  background: color-mix(in srgb, var(--panel) 90%, transparent);
+  backdrop-filter: blur(0.75em);
+  -webkit-backdrop-filter: blur(0.75em);
+  color: var(--ink);
+  padding: 0.75rem 0.75rem 0.6rem 0.75rem;
+  border-radius: 0.6rem;
+  width: min(28rem, 80vw);
+  box-shadow: 0 0.5em 1.25em rgba(0, 0, 0, 0.35);
+  border: 1px solid color-mix(in srgb, var(--muted) 40%, transparent);
+  font-size: 0.9rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.event-search .search-row {
+  display: flex;
+  gap: 0.4rem;
+}
+.event-search input[type='text'] {
+  flex: 1;
+  padding: 0.45rem 0.6rem;
+  border-radius: 0.4rem;
+  border: 1px solid color-mix(in srgb, var(--muted) 40%, transparent);
+  background: color-mix(in srgb, var(--panel) 85%, transparent);
+  color: inherit;
+}
+.event-search button {
+  background: color-mix(in srgb, var(--accent, #4b7) 70%, transparent);
+  color: var(--ink, #111);
+  border: 0;
+  border-radius: 0.4rem;
+  padding: 0.45rem 0.6rem;
+  cursor: pointer;
+}
+.event-search button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.event-search .results {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-height: 14rem;
+  overflow: auto;
+  border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
+  border-radius: 0.4rem;
+}
+.event-search .results li {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.4rem 0.55rem;
+  cursor: pointer;
+  font-size: 0.85rem;
+  line-height: 1.2;
+}
+.event-search .results li.active {
+  background: color-mix(in srgb, var(--accent, #4b7) 45%, transparent);
+  color: var(--ink, #111);
+  font-weight: 600;
+}
+.event-search .results li:hover:not(.active) {
+  background: color-mix(in srgb, var(--panel) 70%, transparent);
+}
+.event-search .results .title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.event-search .results .date {
+  opacity: 0.6;
+  font-family: monospace;
+}
+.event-search .no-results {
+  padding: 0.25rem 0.1rem;
+  opacity: 0.7;
+}
+.event-search .hint {
+  opacity: 0.55;
+  font-size: 0.7rem;
+}
 </style>
-- 
2.49.0


From 4e816a2cdef86789a3bf53d5b6c1b393caaf9f26 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Wed, 27 Aug 2025 06:26:23 -0600
Subject: [PATCH 17/17] Autoformatter broke formatting, needs , between
 statements.

---
 src/components/CalendarView.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/CalendarView.vue b/src/components/CalendarView.vue
index 3bfdaac..7a95939 100644
--- a/src/components/CalendarView.vue
+++ b/src/components/CalendarView.vue
@@ -662,11 +662,7 @@ window.addEventListener('resize', () => {
             v-for="(r, i) in searchResults"
             :key="r.id"
             :class="{ active: i === searchIndex }"
-            @click="
-              searchIndex = i
-              activateCurrentResult()
-              closeSearch()
-            "
+            @click="((searchIndex = i), activateCurrentResult(), closeSearch())"
           >
             <span class="title">{{ r.title }}</span>
             <span class="date">{{ r.startDate }}</span>
-- 
2.49.0