Major new version (#2)

Release Notes

Architecture
- Component refactor: removed monoliths (`Calendar.vue`, `CalendarGrid.vue`); expanded granular view + header/control components.
- Dialog system introduced (`BaseDialog`, `SettingsDialog`).

State & Data
- Store redesigned: Map-based events + recurrence map; mutation counters.
- Local persistence + undo/redo history (custom plugins).

Date & Holidays
- Migrated all date logic to `date-fns` (+ tz).
- Added national holiday support (toggle + loading utilities).

Recurrence & Events
- Consolidated recurrence handling; fixes for monthly edge days (29–31), annual, multi‑day, and complex weekly repeats.
- Reliable splitting/moving/resizing/deletion of repeating and multi‑day events.

Interaction & UX
- Double‑tap to create events; improved drag (multi‑day + position retention).
- Scroll & inertial/momentum navigation; year change via numeric scroller.
- Movable event dialog; live settings application.

Performance
- Progressive / virtual week rendering, reduced off‑screen buffer.
- Targeted repaint strategy; minimized full re-renders.

Plugins Added
- History, undo normalization, persistence, scroll manager, virtual weeks.

Styling & Layout
- Responsive + compact layout refinements; header restructured.
- Simplified visual elements (removed dots/overflow text); holiday styling adjustments.

Reliability / Fixes
- Numerous recurrence, deletion, orientation/rotation, and event indexing corrections.
- Cross-browser fallback (Firefox week info).

Dependencies Added
- date-fns, date-fns-tz, date-holidays, pinia-plugin-persistedstate.

Net Change
- 28 files modified; ~4.4K insertions / ~2.2K deletions (major refactor + feature set).

src/assets/layout.css

@@ -1,53 +1,62 @@
-/* Layout variables */
 :root {
-  /* Layout */
-  --row-h: 2.2em;
-  --label-w: minmax(4em, 8%);
-  --cell-w: 1fr;
-  --cell-h: clamp(4em, 8vh, 8em);
-  --overlay-w: minmax(3rem, 5%);
+  --week-w: 3rem;
+  --day-w: 1fr;
+  --month-w: 2rem;
+  --row-h: 15vh;
+}
+* {
+  box-sizing: border-box;
 }
 
-/* Layout & typography */
-* { box-sizing: border-box }
+html,
+body {
+  height: 100%;
+}
 
 body {
   margin: 0;
-  font: 500 14px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
+  font:
+    500 14px/1.2 ui-sans-serif,
+    system-ui,
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    Inter,
+    Arial;
   background: var(--bg);
   color: var(--ink);
+  overflow: hidden;
 }
-
 header {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
-  margin-bottom: .75rem;
+  margin-bottom: 0.75rem;
   flex-shrink: 0;
 }
 
-.header-controls {
-  display: flex;
-  align-items: center;
-  gap: .75rem;
+.today-date {
+  cursor: pointer;
 }
-
-.today-date { cursor: pointer }
-.today-date::first-line { color: var(--today) }
-.today-button:hover { opacity: .8 }
-
-/* Header row */
-.calendar-header, #calendar-header {
+.today-date::first-line {
+  color: var(--today);
+}
+.today-button:hover {
+  opacity: 0.8;
+}
+.calendar-header,
+#calendar-header {
   display: grid;
-  grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w);
-  border-bottom: .2em solid var(--muted);
+  grid-template-columns: var(--week-w) repeat(7, var(--day-w)) var(--month-w);
+  border-bottom: 0.2em solid var(--muted);
   align-items: last baseline;
   flex-shrink: 0;
   width: 100%;
 }
 
 /* Main container */
-.calendar-container, #calendar-container {
+.calendar-container,
+#calendar-container {
   flex: 1;
   overflow: hidden;
   position: relative;
@@ -56,7 +65,8 @@ header {
 }
 
 /* Viewports (support id or class) */
-.calendar-viewport, #calendar-viewport {
+.calendar-viewport,
+#calendar-viewport {
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
@@ -65,37 +75,27 @@ header {
   scrollbar-width: none;
 }
 .calendar-viewport::-webkit-scrollbar,
-#calendar-viewport::-webkit-scrollbar { display: none }
-
-.jogwheel-viewport, #jogwheel-viewport {
-  position: absolute;
-  top: 0; right: 0; bottom: 0;
-  width: var(--overlay-w);
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-width: none;
-  z-index: 20;
-  cursor: ns-resize;
+#calendar-viewport::-webkit-scrollbar {
+  display: none;
+}
+.calendar-content,
+#calendar-content {
+  position: relative;
 }
-.jogwheel-viewport::-webkit-scrollbar,
-#jogwheel-viewport::-webkit-scrollbar { display: none }
-
-.jogwheel-content, #jogwheel-content { position: relative; width: 100% }
-.calendar-content, #calendar-content { position: relative }
-
 /* Week row: label + 7-day grid + jogwheel column */
 .week-row {
   display: grid;
-  grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w);
+  grid-template-columns: var(--week-w) repeat(7, var(--day-w)) var(--month-w);
   position: relative;
   overflow: visible;
-  height: var(--cell-h);
+  height: var(--row-h);
   scroll-snap-align: start;
   width: 100%;
 }
 
 /* Label cells */
-.year-label, .week-label {
+.year-label,
+.week-label {
   display: grid;
   place-items: center;
   width: 100%;
@@ -105,7 +105,7 @@ header {
 }
 
 .week-label {
-  height: var(--cell-h);
+  height: var(--row-h);
 }
 /* 7-day grid inside each week row */
 .week-row > .days-grid {
@@ -130,7 +130,8 @@ header {
   z-index: 15;
   overflow: visible;
   position: absolute;
-  top: 0; right: 0;
+  top: 0;
+  right: 0;
   width: 100%;
 }
 .month-name-label > span {