npm - @event-calendar/core - Versions diffs - 5.1.2 → 5.1.4 - Mend

@event-calendar/core 5.1.2 → 5.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/README.md +2 -2
package/dist/index.css +7 -4
package/dist/index.js +133 -93
package/package.json +1 -1
package/src/Calendar.svelte +8 -2
package/src/lib/date.js +4 -2
package/src/lib/utils.js +12 -4
package/src/plugins/day-grid/Popup.svelte +1 -2
package/src/plugins/resource-timeline/View.svelte +23 -14
package/src/plugins/resource-timeline/derived.js +5 -3
package/src/plugins/resource-timeline/lib.js +25 -11
package/src/plugins/resource-timeline/state.svelte.js +1 -1
package/src/storage/effects.js +2 -2
package/src/storage/state.svelte.js +1 -1
package/src/styles/popup.css +6 -3

package/README.md CHANGED Viewed

@@ -246,8 +246,8 @@ This bundle contains a version of the calendar that includes all plugins and is
 The first step is to include the following lines of code in the `<head>` section of your page:
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.1.2/dist/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.1.2/dist/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.1.4/dist/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.1.4/dist/event-calendar.min.js"></script>
 ```
 <details>

package/dist/index.css CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.1.2
+ * EventCalendar v5.1.4
  * https://github.com/vkurko/calendar
  */
 .ec {
@@ -596,10 +596,11 @@
     position: relative;
     display: flex;
     flex-direction: column;
+    box-sizing: border-box;
     block-size: max-content;
-    inline-size: 110%;
-    min-block-size: 6em;
-    min-inline-size: 10em;
+    inline-size: 125%;
+    min-block-size: 8em;
+    min-inline-size: 12em;
     padding: .375rem .75rem .75rem;
     background-color: var(--ec-popup-bg-color);
     border: 1px solid var(--ec-border-color);
@@ -620,6 +621,8 @@
     .ec-events {
         --ec-event-col-gap: 0;
         display: block;
+        overflow-y: auto;
+        pointer-events: auto;
     }
 }
 .ec {

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.1.2
+ * EventCalendar v5.1.4
  * https://github.com/vkurko/calendar
  */
 import { untrack, getAbortSignal, tick, getContext, setContext, onMount, mount, unmount } from "svelte";
@@ -63,10 +63,70 @@ function intersectionObserver(callback, options) {
     };
   };
 }
+function assign(...args) {
+  return Object.assign(...args);
+}
+function keys(object) {
+  return Object.keys(object);
+}
+function entries(object) {
+  return Object.entries(object);
+}
+function floor(value) {
+  return Math.floor(value);
+}
+function ceil(value) {
+  return Math.ceil(value);
+}
+function min(...args) {
+  return Math.min(...args);
+}
+function max(...args) {
+  return Math.max(...args);
+}
+function symbol() {
+  return /* @__PURE__ */ Symbol("ec");
+}
+function isArray(value) {
+  return Array.isArray(value);
+}
+function isFunction(value) {
+  return typeof value === "function";
+}
+function isPlainObject(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === null || prototype === Object.prototype;
+}
+function isDate(value) {
+  return value instanceof Date;
+}
+function run(fn) {
+  return fn();
+}
+function runAll(fns) {
+  fns.forEach(run);
+}
+function noop() {
+}
+const identity = (x) => x;
+function stopPropagation(fn, _this = void 0) {
+  return function(event) {
+    event.stopPropagation();
+    if (fn) {
+      fn.call(_this, event);
+    }
+  };
+}
+function isRtl() {
+  return window.getComputedStyle(document.documentElement).direction === "rtl";
+}
 const DAY_IN_SECONDS = 86400;
 function createDate(input = void 0) {
   if (input !== void 0) {
-    return input instanceof Date ? _fromLocalDate(input) : _fromISOString(input);
+    return isDate(input) ? _fromLocalDate(input) : _fromISOString(input);
   }
   return _fromLocalDate(/* @__PURE__ */ new Date());
 }
@@ -79,7 +139,7 @@ function createDuration(input) {
       seconds += parseInt(part, 10) * Math.pow(60, exp--);
     }
     input = { seconds };
-  } else if (input instanceof Date) {
+  } else if (isDate(input)) {
     input = { hours: input.getUTCHours(), minutes: input.getUTCMinutes(), seconds: input.getUTCSeconds() };
   }
   let weeks = input.weeks || input.week || 0;
@@ -203,56 +263,6 @@ function _fromISOString(str) {
     Number(parts[5] || 0)
   ));
 }
-function assign(...args) {
-  return Object.assign(...args);
-}
-function keys(object) {
-  return Object.keys(object);
-}
-function entries(object) {
-  return Object.entries(object);
-}
-function floor(value) {
-  return Math.floor(value);
-}
-function ceil(value) {
-  return Math.ceil(value);
-}
-function min(...args) {
-  return Math.min(...args);
-}
-function max(...args) {
-  return Math.max(...args);
-}
-function symbol() {
-  return /* @__PURE__ */ Symbol("ec");
-}
-function isArray(value) {
-  return Array.isArray(value);
-}
-function isFunction(value) {
-  return typeof value === "function";
-}
-function run(fn) {
-  return fn();
-}
-function runAll(fns) {
-  fns.forEach(run);
-}
-function noop() {
-}
-const identity = (x) => x;
-function stopPropagation(fn, _this = void 0) {
-  return function(event) {
-    event.stopPropagation();
-    if (fn) {
-      fn.call(_this, event);
-    }
-  };
-}
-function isRtl() {
-  return window.getComputedStyle(document.documentElement).direction === "rtl";
-}
 let payloadProp = symbol();
 function setPayload(obj, payload) {
   obj[payloadProp] = payload;
@@ -1013,7 +1023,7 @@ function loadEvents(mainState) {
           }
           ++fetching;
         }
-        mainState.fetchedRange = activeRange2;
+        assign(fetchedRange, activeRange2);
       }
     });
   };
@@ -1065,7 +1075,7 @@ function runEventAllUpdated(mainState) {
 }
 function runViewDidMount(mainState) {
   return () => {
-    let { viewComponent, options: { viewDidMount } } = mainState;
+    let { options: { view: view2, viewDidMount } } = mainState;
     untrack(() => {
       if (isFunction(viewDidMount)) {
         tick().then(() => viewDidMount({
@@ -1202,7 +1212,7 @@ class State {
     return $.get(this.#fetchedRange);
   }
   set fetchedRange(value) {
-    $.set(this.#fetchedRange, value, true);
+    $.set(this.#fetchedRange, value);
   }
   #events;
   get events() {
@@ -1338,7 +1348,7 @@ class State {
     this.#auxComponents = $.state($.proxy([]));
     this.#currentRange = $.derived(currentRange(this));
     this.#activeRange = $.derived(activeRange(this));
-    this.#fetchedRange = $.state($.proxy({ start: void 0, end: void 0 }));
+    this.#fetchedRange = $.state({ start: void 0, end: void 0 });
     this.#events = $.state([]);
     this.#filteredEvents = $.derived(filteredEvents(this));
     this.#mainEl = $.state();
@@ -1676,12 +1686,18 @@ function Calendar($$anchor, $$props) {
     assign(prevOptions, options());
   });
   function setOption(name, value) {
+    if (isPlainObject(value)) {
+      value = { ...value };
+    }
+    if (isArray(value)) {
+      value = [...value];
+    }
     mainState.setOption(name, value, false);
     return this;
   }
   function getOption(name) {
     let value = mainState.options[name];
-    return value instanceof Date ? toLocalDate(value) : value;
+    return isDate(value) ? toLocalDate(value) : value;
   }
   function refetchEvents() {
     mainState.fetchedRange = { start: void 0, end: void 0 };
@@ -2506,8 +2522,7 @@ function Popup($$anchor, $$props) {
     let top;
     if (popupRect.height >= gridRect.height) {
       top = gridRect.top - dayRect.top;
-      let bottom = dayRect.bottom - gridRect.bottom;
-      $.set(style, $.get(style) + `inset-block-end:${bottom}px;`);
+      $.set(style, $.get(style) + `block-size:${gridRect.height}px;`);
     } else {
       top = (dayRect.height - popupRect.height) / 2;
       if (dayRect.top + top < gridRect.top) {
@@ -4988,7 +5003,7 @@ function initViewComponent$2(mainState) {
   setExtensions(mainState);
   return View_1;
 }
-function createChunks(event, days) {
+function createChunks(event, days, monthView2) {
   let dates = [];
   let firstStart;
   let lastEnd;
@@ -4996,17 +5011,31 @@ function createChunks(event, days) {
   let gridRow;
   let left;
   let width = 0;
-  for (let { gridColumn: column, gridRow: row, resource, dayStart, start, end, disabled } of days) {
-    if (!disabled && eventIntersects(event, start, end, resource)) {
-      if (!dates.length) {
-        firstStart = start;
-        gridColumn = column;
-        gridRow = row;
-        left = max(event.start - start, 0) / 1e3;
+  for (let { gridColumn: column, gridRow: row, resource, dayStart, dayEnd, start, end, disabled } of days) {
+    if (!disabled) {
+      if (monthView2) {
+        if (eventIntersects(event, dayStart, dayEnd, resource)) {
+          if (!dates.length) {
+            firstStart = dayStart;
+            gridColumn = column;
+            gridRow = row;
+          }
+          dates.push(dayStart);
+          lastEnd = end;
+        }
+      } else {
+        if (eventIntersects(event, start, end, resource)) {
+          if (!dates.length) {
+            firstStart = start;
+            gridColumn = column;
+            gridRow = row;
+            left = max(event.start - start, 0) / 1e3;
+          }
+          dates.push(dayStart);
+          lastEnd = end;
+          width += (min(end, event.end) - max(start, event.start)) / 1e3;
+        }
       }
-      dates.push(dayStart);
-      lastEnd = end;
-      width += (min(end, event.end) - max(start, event.start)) / 1e3;
     }
   }
   if (dates.length) {
@@ -5088,16 +5117,18 @@ function grid(mainState, viewState) {
 function eventChunks(mainState, viewState) {
   return () => {
     let { filteredEvents: filteredEvents2 } = mainState;
-    let { grid: grid2 } = viewState;
+    let { grid: grid2, monthView: monthView2 } = viewState;
     let chunks = [];
     let bgChunks = [];
     untrack(() => {
       for (let event of filteredEvents2) {
         for (let days of grid2) {
           if (bgEvent(event.display)) {
-            bgChunks = bgChunks.concat(createChunks(event, days));
+            if (!monthView2 || event.allDay) {
+              bgChunks = bgChunks.concat(createChunks(event, days, monthView2));
+            }
           } else {
-            chunks = chunks.concat(createChunks(event, days));
+            chunks = chunks.concat(createChunks(event, days, monthView2));
           }
         }
       }
@@ -5198,6 +5229,13 @@ class ViewState5 extends RRState(TRRState()) {
   set grid(value) {
     $.set(this.#grid, value);
   }
+  #monthView;
+  get monthView() {
+    return $.get(this.#monthView);
+  }
+  set monthView(value) {
+    $.set(this.#monthView, value);
+  }
   #chunks;
   get chunks() {
     return $.get(this.#chunks);
@@ -5219,13 +5257,6 @@ class ViewState5 extends RRState(TRRState()) {
   set iChunks(value) {
     $.set(this.#iChunks, value);
   }
-  #monthView;
-  get monthView() {
-    return $.get(this.#monthView);
-  }
-  set monthView(value) {
-    $.set(this.#monthView, value);
-  }
   #nestedResources;
   get nestedResources() {
     return $.get(this.#nestedResources);
@@ -5241,11 +5272,11 @@ class ViewState5 extends RRState(TRRState()) {
     );
     this.#daySlots = $.derived(daySlots(mainState, this));
     this.#grid = $.derived(grid(mainState, this));
+    this.#monthView = $.derived(monthView(mainState));
     let $$d = $.derived(eventChunks(mainState, this)), chunks = $.derived(() => $.get($$d).chunks), bgChunks = $.derived(() => $.get($$d).bgChunks);
     this.#chunks = $.derived(() => $.get(chunks));
     this.#bgChunks = $.derived(() => $.get(bgChunks));
     this.#iChunks = $.derived(iEventChunks(mainState, this));
-    this.#monthView = $.derived(monthView(mainState));
     this.#nestedResources = $.derived(nestedResources(mainState));
   }
 }
@@ -5487,21 +5518,30 @@ function View($$anchor, $$props) {
     tick().then(scrollToTime);
   });
   function scrollToTime() {
-    if ($.get(monthView2)) {
-      return;
-    }
     let scrollLeft = 0;
     let todayOutOfView = $.get(today) < $.get(viewDates2)[0] || $.get(today) > $.get(viewDates2).at(-1);
-    for (let date of $.get(viewDates2)) {
-      let slotTimeLimits2 = getSlotTimeLimits($.get(dayTimeLimits2), date);
-      if (todayOutOfView || datesEqual(date, $.get(today))) {
-        scrollLeft += max(min(toSeconds($.get(scrollTime)), toSeconds(slotTimeLimits2.max)) - toSeconds(slotTimeLimits2.min), 0);
-        break;
-      } else {
-        scrollLeft += toSeconds(slotTimeLimits2.max) - toSeconds(slotTimeLimits2.min);
+    if ($.get(monthView2)) {
+      if (!todayOutOfView) {
+        let days = $.get(grid2)[0];
+        for (let day of days) {
+          if (datesEqual(day.dayStart, $.get(today))) {
+            $.get(mainEl).scrollLeft = ($.get(mainEl).scrollWidth - $.get(sidebarWidth)) / days.length * (day.gridColumn - 1) * (isRtl() ? -1 : 1);
+            break;
+          }
+        }
+      }
+    } else {
+      for (let date of $.get(viewDates2)) {
+        let slotTimeLimits2 = getSlotTimeLimits($.get(dayTimeLimits2), date);
+        if (todayOutOfView || datesEqual(date, $.get(today))) {
+          scrollLeft += max(min(toSeconds($.get(scrollTime)), toSeconds(slotTimeLimits2.max)) - toSeconds(slotTimeLimits2.min), 0);
+          break;
+        } else {
+          scrollLeft += toSeconds(slotTimeLimits2.max) - toSeconds(slotTimeLimits2.min);
+        }
       }
+      $.get(mainEl).scrollLeft = scrollLeft / toSeconds($.get(slotDuration)) * $.get(slotWidth) * (isRtl() ? -1 : 1);
     }
-    $.get(mainEl).scrollLeft = scrollLeft / toSeconds($.get(slotDuration)) * $.get(slotWidth) * (isRtl() ? -1 : 1);
   }
   let refs = [];
   function reposition() {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "5.1.2",
+  "version": "5.1.4",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource & timeline views",
   "keywords": [

package/src/Calendar.svelte CHANGED Viewed

@@ -2,7 +2,7 @@
     import './styles/index.css';
     import {setContext, untrack} from 'svelte';
     import {
-        assign, cloneDate, createEvents, getElementWithPayload, getPayload, nextDate,
+        assign, cloneDate, createEvents, getElementWithPayload, getPayload, isArray, isDate, isPlainObject, nextDate,
         prevDate, toEventWithLocalDates, toLocalDate, toViewWithLocalDates
     } from '#lib';
     import MainState from './storage/state.svelte.js';
@@ -33,13 +33,19 @@
     });
     export function setOption(name, value) {
+        if (isPlainObject(value)) {
+            value = {...value};
+        }
+        if (isArray(value)) {
+            value = [...value];
+        }
         mainState.setOption(name, value, false);
         return this;
     }
     export function getOption(name) {
         let value = mainState.options[name];
-        return value instanceof Date ? toLocalDate(value) : value;
+        return isDate(value) ? toLocalDate(value) : value;
     }
     export function refetchEvents() {

package/src/lib/date.js CHANGED Viewed

@@ -1,8 +1,10 @@
+import {isDate} from './utils.js';
 export const DAY_IN_SECONDS = 86400;
 export function createDate(input = undefined) {
     if (input !== undefined) {
-        return input instanceof Date ? _fromLocalDate(input) : _fromISOString(input);
+        return isDate(input) ? _fromLocalDate(input) : _fromISOString(input);
     }
     return _fromLocalDate(new Date());
@@ -18,7 +20,7 @@ export function createDuration(input) {
             seconds += parseInt(part, 10) * Math.pow(60, exp--);
         }
         input = {seconds};
-    } else if (input instanceof Date) {
+    } else if (isDate(input)) {
         input = {hours: input.getUTCHours(), minutes: input.getUTCMinutes(), seconds: input.getUTCSeconds()};
     }

package/src/lib/utils.js CHANGED Viewed

@@ -10,10 +10,6 @@ export function entries(object) {
     return Object.entries(object);
 }
-export function hasOwn(object, property) {
-    return Object.hasOwn(object, property);
-}
 export function floor(value) {
     return Math.floor(value);
 }
@@ -42,6 +38,18 @@ export function isFunction(value) {
     return typeof value === 'function';
 }
+export function isPlainObject(value) {
+    if (typeof value !== 'object' || value === null) {
+        return false;
+    }
+    const prototype = Object.getPrototypeOf(value);
+    return prototype === null || prototype === Object.prototype;
+}
+export function isDate(value) {
+    return value instanceof Date;
+}
 export function run(fn) {
     return fn();
 }

package/src/plugins/day-grid/Popup.svelte CHANGED Viewed

@@ -62,8 +62,7 @@
         let top;
         if (popupRect.height >= gridRect.height) {
             top = gridRect.top - dayRect.top;
-            let bottom = dayRect.bottom - gridRect.bottom;
-            style += `inset-block-end:${bottom}px;`;
+            style += `block-size:${gridRect.height}px;`;
         } else {
             top = (dayRect.height - popupRect.height) / 2;
             if (dayRect.top + top < gridRect.top) {

package/src/plugins/resource-timeline/View.svelte CHANGED Viewed

@@ -27,24 +27,33 @@
         tick().then(scrollToTime);
     });
     function scrollToTime() {
-        if (monthView) {
-            return;
-        }
         let scrollLeft = 0;
         let todayOutOfView = today < viewDates[0] || today > viewDates.at(-1);
-        for (let date of viewDates) {
-            let slotTimeLimits = getSlotTimeLimits(dayTimeLimits, date);
-            if (todayOutOfView || datesEqual(date, today)) {
-                scrollLeft += max(
-                    min(toSeconds(scrollTime), toSeconds(slotTimeLimits.max)) - toSeconds(slotTimeLimits.min),
-                    0
-                );
-                break;
-            } else {
-                scrollLeft += toSeconds(slotTimeLimits.max) - toSeconds(slotTimeLimits.min);
+        if (monthView) {
+            if (!todayOutOfView) {
+                let days = grid[0];
+                for (let day of days) {
+                    if (datesEqual(day.dayStart, today)) {
+                        mainEl.scrollLeft = (mainEl.scrollWidth - sidebarWidth) / days.length * (day.gridColumn - 1) * (isRtl() ? -1 : 1);
+                        break;
+                    }
+                }
+            }
+        } else {
+            for (let date of viewDates) {
+                let slotTimeLimits = getSlotTimeLimits(dayTimeLimits, date);
+                if (todayOutOfView || datesEqual(date, today)) {
+                    scrollLeft += max(
+                        min(toSeconds(scrollTime), toSeconds(slotTimeLimits.max)) - toSeconds(slotTimeLimits.min),
+                        0
+                    );
+                    break;
+                } else {
+                    scrollLeft += toSeconds(slotTimeLimits.max) - toSeconds(slotTimeLimits.min);
+                }
             }
+            mainEl.scrollLeft = scrollLeft / toSeconds(slotDuration) * slotWidth * (isRtl() ? -1 : 1);
         }
-        mainEl.scrollLeft = scrollLeft / toSeconds(slotDuration) * slotWidth * (isRtl() ? -1 : 1);
     }
     // Events reposition

package/src/plugins/resource-timeline/derived.js CHANGED Viewed

@@ -46,7 +46,7 @@ export function eventChunks(mainState, viewState) {
     return () => {
         // Dependencies
         let {filteredEvents} = mainState;
-        let {grid} = viewState;
+        let {grid, monthView} = viewState;
         let chunks = [];
         let bgChunks = [];
@@ -55,9 +55,11 @@ export function eventChunks(mainState, viewState) {
             for (let event of filteredEvents) {
                 for (let days of grid) {
                     if (bgEvent(event.display)) {
-                        bgChunks = bgChunks.concat(createChunks(event, days));
+                        if (!monthView || event.allDay) {
+                            bgChunks = bgChunks.concat(createChunks(event, days, monthView));
+                        }
                     } else {
-                        chunks = chunks.concat(createChunks(event, days));
+                        chunks = chunks.concat(createChunks(event, days, monthView));
                     }
                 }
             }

package/src/plugins/resource-timeline/lib.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import {assign, createDuration, createEventChunk, eventIntersects, max, min} from '#lib';
-export function createChunks(event, days) {
+export function createChunks(event, days, monthView) {
     let dates = [];
     let firstStart;
     let lastEnd;
@@ -8,17 +8,31 @@ export function createChunks(event, days) {
     let gridRow;
     let left;
     let width = 0;
-    for (let {gridColumn: column, gridRow: row, resource, dayStart, start, end, disabled} of days) {
-        if (!disabled && eventIntersects(event, start, end, resource)) {
-            if (!dates.length) {
-                firstStart = start;
-                gridColumn = column;
-                gridRow = row;
-                left = max(event.start - start, 0) / 1000;
+    for (let {gridColumn: column, gridRow: row, resource, dayStart, dayEnd, start, end, disabled} of days) {
+        if (!disabled) {
+            if (monthView) {
+                if (eventIntersects(event, dayStart, dayEnd, resource)) {
+                    if (!dates.length) {
+                        firstStart = dayStart;
+                        gridColumn = column;
+                        gridRow = row;
+                    }
+                    dates.push(dayStart);
+                    lastEnd = end;
+                }
+            } else {
+                if (eventIntersects(event, start, end, resource)) {
+                    if (!dates.length) {
+                        firstStart = start;
+                        gridColumn = column;
+                        gridRow = row;
+                        left = max(event.start - start, 0) / 1000;
+                    }
+                    dates.push(dayStart);
+                    lastEnd = end;
+                    width += (min(end, event.end) - max(start, event.start)) / 1000;
+                }
             }
-            dates.push(dayStart);
-            lastEnd = end;
-            width += (min(end, event.end) - max(start, event.start)) / 1000;
         }
     }
     if (dates.length) {

package/src/plugins/resource-timeline/state.svelte.js CHANGED Viewed

@@ -8,11 +8,11 @@ export default class ViewState extends RRState(TRRState()) {
         this.dayTimeLimits = $derived.by(dayTimeLimits(mainState));  // flexible time limits per day
         this.daySlots = $derived.by(daySlots(mainState, this));
         this.grid = $derived.by(grid(mainState, this));
+        this.monthView = $derived.by(monthView(mainState));
         let {chunks, bgChunks} = $derived.by(eventChunks(mainState, this));
         this.chunks = $derived(chunks);
         this.bgChunks = $derived(bgChunks);
         this.iChunks = $derived.by(iEventChunks(mainState, this));
-        this.monthView = $derived.by(monthView(mainState));
         this.nestedResources = $derived.by(nestedResources(mainState));
     }
 }

package/src/storage/effects.js CHANGED Viewed

@@ -80,7 +80,7 @@ export function loadEvents(mainState) {
                     ++fetching;
                 }
                 // Save current range for future requests
-                mainState.fetchedRange = activeRange;
+                assign(fetchedRange, activeRange);
             }
         });
     };
@@ -143,7 +143,7 @@ export function runEventAllUpdated(mainState) {
 export function runViewDidMount(mainState) {
     return () => {
         // Dependencies
-        let {viewComponent, options: {viewDidMount}} = mainState;
+        let {options: {view, viewDidMount}} = mainState;
         untrack(() => {
             if (isFunction(viewDidMount)) {

package/src/storage/state.svelte.js CHANGED Viewed

@@ -18,7 +18,7 @@ export default class State {
         this.auxComponents = $state([]);
         this.currentRange = $derived.by(currentRange(this));
         this.activeRange = $derived.by(activeRange(this));
-        this.fetchedRange = $state({start: undefined, end: undefined});
+        this.fetchedRange = $state.raw({start: undefined, end: undefined});
         this.events = $state.raw([]);
         this.filteredEvents = $derived.by(filteredEvents(this));
         this.mainEl = $state();

package/src/styles/popup.css CHANGED Viewed

@@ -2,10 +2,11 @@
     position: relative;
     display: flex;
     flex-direction: column;
+    box-sizing: border-box;
     block-size: max-content;
-    inline-size: 110%;
-    min-block-size: 6em;
-    min-inline-size: 10em;
+    inline-size: 125%;
+    min-block-size: 8em;
+    min-inline-size: 12em;
     padding: .375rem .75rem .75rem;
     background-color: var(--ec-popup-bg-color);
     border: 1px solid var(--ec-border-color);
@@ -26,5 +27,7 @@
     .ec-events {
         --ec-event-col-gap: 0;
         display: block;
+        overflow-y: auto;
+        pointer-events: auto;
     }
 }