From 895d635fa43148a7b0d2d5098984a118733aa3e7 Mon Sep 17 00:00:00 2001
From: TLock <tlock@armyofbees.com>
Date: Tue, 4 Apr 2023 13:44:52 +0900
Subject: [PATCH 01/13] Implement default range for Range Picker

---
 src/components/DatePicker.svelte   | 4 +++-
 src/components/lib/sanitization.js | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/DatePicker.svelte b/src/components/DatePicker.svelte
index 43a34ea..24ca061 100644
--- a/src/components/DatePicker.svelte
+++ b/src/components/DatePicker.svelte
@@ -9,6 +9,7 @@
   import View from './view/View.svelte'
 
   export let range = false
+  export let defaultRange = [1, "month"]
   export let placeholder = 'Choose Date'
   export let format = 'DD / MM / YYYY'
   export let start = dayjs().subtract(1, 'year')
@@ -33,6 +34,7 @@
     start: dayjs(start),
     end: dayjs(end),
     isRangePicker: range,
+    defaultRange,
     isTimePicker: time,
     closeOnFocusLoss,
     format,
@@ -66,7 +68,7 @@
     highlighted.set($selectedStartDate)
     dispatch('open')
   }
-  
+
   function setRangeValue () {
     selected = [ $selectedStartDate, $selectedEndDate ]
     dispatch('range-selected', {
diff --git a/src/components/lib/sanitization.js b/src/components/lib/sanitization.js
index f6152eb..188c1b2 100644
--- a/src/components/lib/sanitization.js
+++ b/src/components/lib/sanitization.js
@@ -21,7 +21,7 @@ function sanitizeInitialValue (value, config) {
   if (config.isRangePicker) {
     const [ from, to ] = value || []
     isDateChosen = Boolean(from).valueOf() && Boolean(to).valueOf()
-    chosen = isDateChosen ? value.map(dayjs) : [ dayjs.max(dayjs(), config.start), dayjs.min(dayjs().add(1, 'month'), config.end) ]
+    chosen = isDateChosen ? value.map(dayjs) : [ dayjs.max(dayjs(), config.start), dayjs.min(dayjs().add(...config.defaultRange), config.end) ]
   } else {
     isDateChosen = Boolean(value).valueOf()
     chosen = [ isDateChosen ? dayjs(value) : dayjs.max(dayjs(), config.start) ]

From 58920377b3d39cf9614b9ef91bceb51215443bda Mon Sep 17 00:00:00 2001
From: Antony Jones <ant@enzy.org>
Date: Mon, 10 Apr 2023 08:41:31 +0100
Subject: [PATCH 02/13] Update src/components/DatePicker.svelte

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

diff --git a/src/components/DatePicker.svelte b/src/components/DatePicker.svelte
index 24ca061..a3fb854 100644
--- a/src/components/DatePicker.svelte
+++ b/src/components/DatePicker.svelte
@@ -9,7 +9,7 @@
   import View from './view/View.svelte'
 
   export let range = false
-  export let defaultRange = [1, "month"]
+  export let defaultRange = [ 1, 'month' ]
   export let placeholder = 'Choose Date'
   export let format = 'DD / MM / YYYY'
   export let start = dayjs().subtract(1, 'year')

From 6585cd449060be104ea4996170d97af26652baa0 Mon Sep 17 00:00:00 2001
From: TLock <tlock@armyofbees.com>
Date: Thu, 31 Aug 2023 13:49:17 +0900
Subject: [PATCH 03/13] Allow external components to udpate dates

In the parent component, bind to the selected prop, and update with a tuple of JS date objects
---
 src/components/DatePicker.svelte | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/components/DatePicker.svelte b/src/components/DatePicker.svelte
index a3fb854..79491c0 100644
--- a/src/components/DatePicker.svelte
+++ b/src/components/DatePicker.svelte
@@ -116,6 +116,21 @@
       dispatch('change')
     }
   }
+
+  /**
+   * Allow external sources to update dates by binding to selected prop
+   * and updating with JS Date objects
+  */
+  $: {
+    if (config.isRangePicker) {
+      if (selected[0] instanceof Date) {
+        selectedStartDate.set(dayjs(selected[0]))
+      }
+      if (selected[1] instanceof Date) {
+        selectedEndDate.set(dayjs(selected[1]))
+      }
+    }
+  }
 </script>
 
 <style>

From acad3543d6ba26935ab89cd1c202b468330ec1c4 Mon Sep 17 00:00:00 2001
From: TLock <tlock@armyofbees.com>
Date: Thu, 31 Aug 2023 16:59:58 +0900
Subject: [PATCH 04/13] Forward internal selection events to parents

---
 src/components/DatePicker.svelte | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/DatePicker.svelte b/src/components/DatePicker.svelte
index 79491c0..53f1dad 100644
--- a/src/components/DatePicker.svelte
+++ b/src/components/DatePicker.svelte
@@ -131,6 +131,16 @@
       }
     }
   }
+
+  /**
+   * Allow external sources to react to internal selections via event forwarding
+  */
+  $: {
+    if ($selectedStartDate) dispatch('updateStart', $selectedStartDate.toDate())
+  }
+  $: {
+    if ($selectedEndDate) dispatch('updateEnd', $selectedEndDate.toDate())
+  }
 </script>
 
 <style>

From 0be4f7821b75199ab1923fbaede65a71771ca474 Mon Sep 17 00:00:00 2001
From: Tim Wheelock <tlock@armyofbees.com>
Date: Tue, 20 Aug 2024 14:46:41 +0900
Subject: [PATCH 05/13] Fix bug with range pickers without pre-selected dates

---
 src/components/DatePicker.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/DatePicker.svelte b/src/components/DatePicker.svelte
index 53f1dad..ebf0502 100644
--- a/src/components/DatePicker.svelte
+++ b/src/components/DatePicker.svelte
@@ -1,10 +1,10 @@
 <script>
-  import Popover from './Popover.svelte'
-  import { dayjs } from './lib/date-utils'
-  import { contextKey, setup } from './lib/context'
-  import { createEventDispatcher, setContext, getContext } from 'svelte'
+  import { createEventDispatcher, getContext, setContext } from 'svelte'
   import { CalendarStyle } from '../calendar-style.js'
+  import { contextKey, setup } from './lib/context'
+  import { dayjs } from './lib/date-utils'
   import { createViewContext } from './lib/view-context.js'
+  import Popover from './Popover.svelte'
   import Toolbar from './Toolbar.svelte'
   import View from './view/View.svelte'
 
@@ -122,7 +122,7 @@
    * and updating with JS Date objects
   */
   $: {
-    if (config.isRangePicker) {
+    if (config.isRangePicker && selected) {
       if (selected[0] instanceof Date) {
         selectedStartDate.set(dayjs(selected[0]))
       }

From b2a2f2e72106ce940ce0dc704bfb1358a8194c55 Mon Sep 17 00:00:00 2001
From: Tim Wheelock <tlock@armyofbees.com>
Date: Tue, 20 Aug 2024 14:48:02 +0900
Subject: [PATCH 06/13] Add cursor loading state during initialization.

The initialization function in this library blocks the main thread with a synchronous loop over all possible months. This commit doesn't fix that, it just shows a loading spinner instead.
---
 src/components/DatePicker.svelte      | 247 ++------------------------
 src/components/DatePickerInner.svelte | 235 ++++++++++++++++++++++++
 src/components/lib/context.js         |  31 +++-
 3 files changed, 281 insertions(+), 232 deletions(-)
 create mode 100644 src/components/DatePickerInner.svelte

diff --git a/src/components/DatePicker.svelte b/src/components/DatePicker.svelte
index ebf0502..d4f9d2c 100644
--- a/src/components/DatePicker.svelte
+++ b/src/components/DatePicker.svelte
@@ -1,235 +1,22 @@
 <script>
-  import { createEventDispatcher, getContext, setContext } from 'svelte'
-  import { CalendarStyle } from '../calendar-style.js'
-  import { contextKey, setup } from './lib/context'
-  import { dayjs } from './lib/date-utils'
-  import { createViewContext } from './lib/view-context.js'
-  import Popover from './Popover.svelte'
-  import Toolbar from './Toolbar.svelte'
-  import View from './view/View.svelte'
+  import { onMount } from 'svelte'
+  import DatePickerInner from './DatePickerInner.svelte'
+  import { setLoadingCursor } from './lib/context'
 
-  export let range = false
-  export let defaultRange = [ 1, 'month' ]
-  export let placeholder = 'Choose Date'
-  export let format = 'DD / MM / YYYY'
-  export let start = dayjs().subtract(1, 'year')
-  export let end = dayjs().add(1, 'year')
-  export let trigger = null
-  export let selectableCallback = null
-  export let styling = new CalendarStyle()
-  export let selected
-  export let closeOnFocusLoss = true
-  export let time = false
-  export let morning = 7
-  export let night = 19
-  export let minuteStep = 5
-  export let continueText = 'Continue'
+  let ready = false
 
-  const dispatch = createEventDispatcher()
-
-  const startContextKey = {}
-  const endContextKey = {}
-
-  const config = {
-    start: dayjs(start),
-    end: dayjs(end),
-    isRangePicker: range,
-    defaultRange,
-    isTimePicker: time,
-    closeOnFocusLoss,
-    format,
-    morning,
-    night,
-    selectableCallback,
-    minuteStep: parseInt(minuteStep)
-  }
-
-  setContext(contextKey, setup(selected, config))
-  const {
-    selectedStartDate,
-    selectedEndDate,
-    isOpen,
-    isClosing,
-    highlighted,
-    formatter,
-    isDateChosen,
-    isSelectingFirstDate
-  } = getContext(contextKey)
-
-  setContext(startContextKey, createViewContext(true, getContext(contextKey)))
-
-  if (config.isRangePicker) {
-    setContext(endContextKey, createViewContext(false, getContext(contextKey)))
-  }
-
-  let popover
-
-  function initialisePicker () {
-    highlighted.set($selectedStartDate)
-    dispatch('open')
-  }
-
-  function setRangeValue () {
-    selected = [ $selectedStartDate, $selectedEndDate ]
-    dispatch('range-selected', {
-      from: $selectedStartDate.toDate(),
-      to: $selectedEndDate.toDate()
-    })
-  }
-
-  function setDateValue () {
-    selected = $selectedStartDate.toDate()
-    dispatch('date-selected', {
-      date: $selectedStartDate.toDate()
-    })
-  }
-
-  function swapDatesIfRequired () {
-    if (!config.isRangePicker) { return }
-    const from = $selectedStartDate
-    const to = $selectedEndDate
-    if (to.isBefore(from)) {
-      selectedStartDate.set(to)
-      selectedEndDate.set(from)
-    }
-  }
-
-  function addDate (e) {
-    const { date } = e.detail
-    if ($isSelectingFirstDate) {
-      selectedStartDate.set(date)
-    } else {
-      selectedEndDate.set(date)
-    }
-    swapDatesIfRequired()
-    config.isRangePicker && isSelectingFirstDate.update(v => !v)
-  }
-
-  function close () {
-    swapDatesIfRequired()
-    popover.close()
-  }
-
-  $: {
-    if ($isDateChosen) {
-      config.isRangePicker ? setRangeValue() : setDateValue()
-      dispatch('change')
-    }
-  }
-
-  /**
-   * Allow external sources to update dates by binding to selected prop
-   * and updating with JS Date objects
-  */
-  $: {
-    if (config.isRangePicker && selected) {
-      if (selected[0] instanceof Date) {
-        selectedStartDate.set(dayjs(selected[0]))
-      }
-      if (selected[1] instanceof Date) {
-        selectedEndDate.set(dayjs(selected[1]))
-      }
-    }
-  }
-
-  /**
-   * Allow external sources to react to internal selections via event forwarding
-  */
-  $: {
-    if ($selectedStartDate) dispatch('updateStart', $selectedStartDate.toDate())
-  }
-  $: {
-    if ($selectedEndDate) dispatch('updateEnd', $selectedEndDate.toDate())
-  }
+  onMount(async () => {
+    await setLoadingCursor()
+    ready = true
+  })
 </script>
 
-<style>
-  .datepicker {
-    display: inline-block;
-    text-align: center;
-    overflow: visible;
-    width: var(--datepicker-width);
-  }
-
-  .calendar-button {
-    padding: 10px 20px;
-    border: 1px solid var(--button-border-color);
-    display: block;
-    text-align: center;
-    width: var(--button-width);
-    text-decoration: none;
-    cursor: pointer;
-    background: var(--button-background-color);
-    color: var(--button-text-color);
-    border-radius: 7px;
-    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
-  }
-
-  *,
-  *:before,
-  *:after {
-    box-sizing: inherit;
-  }
-
-  .contents {
-    min-width: 320px;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    background: var(--content-background);
-  }
-
-  .view {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  @media (min-width: 680px) {
-    .view {
-      flex-direction: row;
-      justify-content: center;
-    }
-  }
-</style>
-
-<div
-  class="datepicker"
-  class:open={$isOpen}
-  class:closing={$isClosing}
-  style={styling.toWrapperStyle()}>
-  <Popover
-    {trigger}
-    bind:this={popover}
-    on:opened={initialisePicker}
-    on:closed={() => dispatch('close')}>
-    <div slot="trigger">
-      <slot formatted={$formatter}>
-        {#if !trigger}
-          <button class="calendar-button" type="button">
-            {#if $isDateChosen}
-              {$formatter.formattedCombined}
-            {:else}
-              {placeholder}
-            {/if}
-          </button>
-        {/if}
-      </slot>
-    </div>
-    <div class="contents" slot="contents" class:is-range-picker={config.isRangePicker}>
-      <div class="view">
-        <View
-          viewContextKey={startContextKey}
-          on:chosen={addDate}
-        />
-        {#if config.isRangePicker}
-        <View
-          viewContextKey={endContextKey}
-          on:chosen={addDate}
-        />
-        {/if}
-      </div>
-      <Toolbar continueText={continueText} on:close={close} />
-    </div>
-  </Popover>
-</div>
+{#if ready}
+  {#if $$slots.default}
+    <DatePickerInner {...$$props} on:*>
+      <slot />
+    </DatePickerInner>
+  {:else}
+    <DatePickerInner {...$$props} on:* />
+  {/if}
+{/if}
diff --git a/src/components/DatePickerInner.svelte b/src/components/DatePickerInner.svelte
new file mode 100644
index 0000000..ebf0502
--- /dev/null
+++ b/src/components/DatePickerInner.svelte
@@ -0,0 +1,235 @@
+<script>
+  import { createEventDispatcher, getContext, setContext } from 'svelte'
+  import { CalendarStyle } from '../calendar-style.js'
+  import { contextKey, setup } from './lib/context'
+  import { dayjs } from './lib/date-utils'
+  import { createViewContext } from './lib/view-context.js'
+  import Popover from './Popover.svelte'
+  import Toolbar from './Toolbar.svelte'
+  import View from './view/View.svelte'
+
+  export let range = false
+  export let defaultRange = [ 1, 'month' ]
+  export let placeholder = 'Choose Date'
+  export let format = 'DD / MM / YYYY'
+  export let start = dayjs().subtract(1, 'year')
+  export let end = dayjs().add(1, 'year')
+  export let trigger = null
+  export let selectableCallback = null
+  export let styling = new CalendarStyle()
+  export let selected
+  export let closeOnFocusLoss = true
+  export let time = false
+  export let morning = 7
+  export let night = 19
+  export let minuteStep = 5
+  export let continueText = 'Continue'
+
+  const dispatch = createEventDispatcher()
+
+  const startContextKey = {}
+  const endContextKey = {}
+
+  const config = {
+    start: dayjs(start),
+    end: dayjs(end),
+    isRangePicker: range,
+    defaultRange,
+    isTimePicker: time,
+    closeOnFocusLoss,
+    format,
+    morning,
+    night,
+    selectableCallback,
+    minuteStep: parseInt(minuteStep)
+  }
+
+  setContext(contextKey, setup(selected, config))
+  const {
+    selectedStartDate,
+    selectedEndDate,
+    isOpen,
+    isClosing,
+    highlighted,
+    formatter,
+    isDateChosen,
+    isSelectingFirstDate
+  } = getContext(contextKey)
+
+  setContext(startContextKey, createViewContext(true, getContext(contextKey)))
+
+  if (config.isRangePicker) {
+    setContext(endContextKey, createViewContext(false, getContext(contextKey)))
+  }
+
+  let popover
+
+  function initialisePicker () {
+    highlighted.set($selectedStartDate)
+    dispatch('open')
+  }
+
+  function setRangeValue () {
+    selected = [ $selectedStartDate, $selectedEndDate ]
+    dispatch('range-selected', {
+      from: $selectedStartDate.toDate(),
+      to: $selectedEndDate.toDate()
+    })
+  }
+
+  function setDateValue () {
+    selected = $selectedStartDate.toDate()
+    dispatch('date-selected', {
+      date: $selectedStartDate.toDate()
+    })
+  }
+
+  function swapDatesIfRequired () {
+    if (!config.isRangePicker) { return }
+    const from = $selectedStartDate
+    const to = $selectedEndDate
+    if (to.isBefore(from)) {
+      selectedStartDate.set(to)
+      selectedEndDate.set(from)
+    }
+  }
+
+  function addDate (e) {
+    const { date } = e.detail
+    if ($isSelectingFirstDate) {
+      selectedStartDate.set(date)
+    } else {
+      selectedEndDate.set(date)
+    }
+    swapDatesIfRequired()
+    config.isRangePicker && isSelectingFirstDate.update(v => !v)
+  }
+
+  function close () {
+    swapDatesIfRequired()
+    popover.close()
+  }
+
+  $: {
+    if ($isDateChosen) {
+      config.isRangePicker ? setRangeValue() : setDateValue()
+      dispatch('change')
+    }
+  }
+
+  /**
+   * Allow external sources to update dates by binding to selected prop
+   * and updating with JS Date objects
+  */
+  $: {
+    if (config.isRangePicker && selected) {
+      if (selected[0] instanceof Date) {
+        selectedStartDate.set(dayjs(selected[0]))
+      }
+      if (selected[1] instanceof Date) {
+        selectedEndDate.set(dayjs(selected[1]))
+      }
+    }
+  }
+
+  /**
+   * Allow external sources to react to internal selections via event forwarding
+  */
+  $: {
+    if ($selectedStartDate) dispatch('updateStart', $selectedStartDate.toDate())
+  }
+  $: {
+    if ($selectedEndDate) dispatch('updateEnd', $selectedEndDate.toDate())
+  }
+</script>
+
+<style>
+  .datepicker {
+    display: inline-block;
+    text-align: center;
+    overflow: visible;
+    width: var(--datepicker-width);
+  }
+
+  .calendar-button {
+    padding: 10px 20px;
+    border: 1px solid var(--button-border-color);
+    display: block;
+    text-align: center;
+    width: var(--button-width);
+    text-decoration: none;
+    cursor: pointer;
+    background: var(--button-background-color);
+    color: var(--button-text-color);
+    border-radius: 7px;
+    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: inherit;
+  }
+
+  .contents {
+    min-width: 320px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background: var(--content-background);
+  }
+
+  .view {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  @media (min-width: 680px) {
+    .view {
+      flex-direction: row;
+      justify-content: center;
+    }
+  }
+</style>
+
+<div
+  class="datepicker"
+  class:open={$isOpen}
+  class:closing={$isClosing}
+  style={styling.toWrapperStyle()}>
+  <Popover
+    {trigger}
+    bind:this={popover}
+    on:opened={initialisePicker}
+    on:closed={() => dispatch('close')}>
+    <div slot="trigger">
+      <slot formatted={$formatter}>
+        {#if !trigger}
+          <button class="calendar-button" type="button">
+            {#if $isDateChosen}
+              {$formatter.formattedCombined}
+            {:else}
+              {placeholder}
+            {/if}
+          </button>
+        {/if}
+      </slot>
+    </div>
+    <div class="contents" slot="contents" class:is-range-picker={config.isRangePicker}>
+      <div class="view">
+        <View
+          viewContextKey={startContextKey}
+          on:chosen={addDate}
+        />
+        {#if config.isRangePicker}
+        <View
+          viewContextKey={endContextKey}
+          on:chosen={addDate}
+        />
+        {/if}
+      </div>
+      <Toolbar continueText={continueText} on:close={close} />
+    </div>
+  </Popover>
+</div>
diff --git a/src/components/lib/context.js b/src/components/lib/context.js
index 56a6a2c..b3116f8 100644
--- a/src/components/lib/context.js
+++ b/src/components/lib/context.js
@@ -7,6 +7,27 @@ import { ensureFutureMonth } from './date-manipulation.js'
 
 const contextKey = {}
 
+async function setLoadingCursor () {
+  const loadingStyle = document.createElement('style')
+
+  loadingStyle.dataset.styleName = 'loading-style'
+
+  loadingStyle.innerHTML = '* { cursor: wait !important; }'
+
+  document.head.appendChild(loadingStyle)
+
+  await new Promise((resolve) => setTimeout(resolve, 20))
+}
+
+function clearLoadingCursor () {
+  const loadingStyles = document.querySelectorAll('[data-style-name="loading-style"]')
+  if (loadingStyles.length) {
+    setTimeout(() => {
+      loadingStyles.forEach(styletag => styletag.remove())
+    }, 20)
+  }
+}
+
 function setup (given, config) {
   const today = dayjs().startOf('day')
 
@@ -21,7 +42,7 @@ function setup (given, config) {
   ).startOf('month')
   const rightDate = config.isRangePicker ? ensureFutureMonth(leftDate, preSelectedEnd).startOf('month') : null
 
-  return {
+  const setupObj = {
     months: getMonths(config),
     component,
     today,
@@ -41,9 +62,15 @@ function setup (given, config) {
     },
     isSelectingFirstDate: writable(true)
   }
+
+  clearLoadingCursor()
+
+  return setupObj
 }
 
 export {
   contextKey,
-  setup
+  setup,
+  setLoadingCursor,
+  clearLoadingCursor
 }

From b6b7d653d5a3b4635ff27d9317d3ff56fc30fde4 Mon Sep 17 00:00:00 2001
From: Tim Wheelock <tlock@armyofbees.com>
Date: Tue, 20 Aug 2024 17:29:10 +0900
Subject: [PATCH 07/13] Fix event forwarding

---
 src/App.svelte                   |  9 +++++----
 src/components/DatePicker.svelte | 32 +++++++++++++++++++++++++++++---
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index b5c89b3..17f8793 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -59,13 +59,13 @@
         <div class="row">
           <aside>
             <div class="menu-box">
-              <h4>Navigation</h4>	
+              <h4>Navigation</h4>
               <nav class="side-nav">
                 <ul>
                   <li><a href="/">Home</a></li>
                   <li><a href="/date-picker">Date Picker</a></li>
                   <li><a href="/range-picker">Range Picker</a></li>
-                </ul>					
+                </ul>
               </nav>
             </div>
           </aside>
@@ -273,6 +273,7 @@
                     range={true}
                     time={true}
                     on:range-selected={e => {
+                      console.log(e)
                       firedEvents = [
                         ...firedEvents,
                         `Picked range ${e.detail.from} to ${e.detail.to}`
@@ -314,7 +315,7 @@
     <div class="container">
       <div class="row">
         <div class="col-lg-12 center">
-          
+
         </div>
       </div>
     </div>
@@ -446,4 +447,4 @@
       background-position: 100%;
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/DatePicker.svelte b/src/components/DatePicker.svelte
index d4f9d2c..96c8f8d 100644
--- a/src/components/DatePicker.svelte
+++ b/src/components/DatePicker.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from 'svelte'
+  import { createEventDispatcher, onMount } from 'svelte'
   import DatePickerInner from './DatePickerInner.svelte'
   import { setLoadingCursor } from './lib/context'
 
@@ -9,14 +9,40 @@
     await setLoadingCursor()
     ready = true
   })
+
+  /**
+   * ! WARNING
+   *
+   * The only events forwarded here are the ones we are currently using in
+   * Real Rev...
+   *
+   * Forwarding both Date and Date Range events bricked our build.
+  */
+  const dispatch = createEventDispatcher()
+  function forwardEvent (event) {
+    console.log('Forwarding event:', event.type)
+    dispatch(event.type, event.detail)
+  }
 </script>
 
 {#if ready}
   {#if $$slots.default}
-    <DatePickerInner {...$$props} on:*>
+    <DatePickerInner {...$$restProps}
+      on:range-selected={forwardEvent}
+      on:open={forwardEvent}
+      on:close={forwardEvent}
+      on:updateStart={forwardEvent}
+      on:updateEnd={forwardEvent}
+    >
       <slot />
     </DatePickerInner>
   {:else}
-    <DatePickerInner {...$$props} on:* />
+    <DatePickerInner {...$$restProps}
+      on:range-selected={forwardEvent}
+      on:open={forwardEvent}
+      on:close={forwardEvent}
+      on:updateStart={forwardEvent}
+      on:updateEnd={forwardEvent}
+    />
   {/if}
 {/if}

From fccdd4434a4a1cd4ea2de1865ace5edd8a01e5fa Mon Sep 17 00:00:00 2001
From: Tim Wheelock <tlock@armyofbees.com>
Date: Tue, 20 Aug 2024 21:18:20 +0900
Subject: [PATCH 08/13] Move to slot props

---
 src/components/DatePicker.svelte      | 40 ++++++++++-----------------
 src/components/DatePickerInner.svelte | 16 +++++++++--
 2 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/src/components/DatePicker.svelte b/src/components/DatePicker.svelte
index 96c8f8d..e5c0f88 100644
--- a/src/components/DatePicker.svelte
+++ b/src/components/DatePicker.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { createEventDispatcher, onMount } from 'svelte'
+  import { onMount } from 'svelte'
   import DatePickerInner from './DatePickerInner.svelte'
   import { setLoadingCursor } from './lib/context'
 
@@ -9,40 +9,28 @@
     await setLoadingCursor()
     ready = true
   })
-
-  /**
-   * ! WARNING
-   *
-   * The only events forwarded here are the ones we are currently using in
-   * Real Rev...
-   *
-   * Forwarding both Date and Date Range events bricked our build.
-  */
-  const dispatch = createEventDispatcher()
-  function forwardEvent (event) {
-    console.log('Forwarding event:', event.type)
-    dispatch(event.type, event.detail)
-  }
 </script>
 
 {#if ready}
   {#if $$slots.default}
     <DatePickerInner {...$$restProps}
-      on:range-selected={forwardEvent}
-      on:open={forwardEvent}
-      on:close={forwardEvent}
-      on:updateStart={forwardEvent}
-      on:updateEnd={forwardEvent}
+      on:open
+      on:range-selected
+      on:date-selected
+      on:change
+      on:close
+      let:selectedStart
+      let:selectedEnd
     >
-      <slot />
+      <slot {selectedStart} {selectedEnd} />
     </DatePickerInner>
   {:else}
     <DatePickerInner {...$$restProps}
-      on:range-selected={forwardEvent}
-      on:open={forwardEvent}
-      on:close={forwardEvent}
-      on:updateStart={forwardEvent}
-      on:updateEnd={forwardEvent}
+      on:open
+      on:range-selected
+      on:date-selected
+      on:change
+      on:close
     />
   {/if}
 {/if}
diff --git a/src/components/DatePickerInner.svelte b/src/components/DatePickerInner.svelte
index ebf0502..2b05301 100644
--- a/src/components/DatePickerInner.svelte
+++ b/src/components/DatePickerInner.svelte
@@ -135,11 +135,21 @@
   /**
    * Allow external sources to react to internal selections via event forwarding
   */
+  let selectedStart = null
   $: {
-    if ($selectedStartDate) dispatch('updateStart', $selectedStartDate.toDate())
+    if ($selectedStartDate) {
+      selectedStart = $selectedStartDate.toDate()
+    } else {
+      selectedStart = null
+    }
   }
+  let selectedEnd = null
   $: {
-    if ($selectedEndDate) dispatch('updateEnd', $selectedEndDate.toDate())
+    if ($selectedEndDate) {
+      selectedEnd = $selectedEndDate.toDate()
+    } else {
+      selectedEnd = null
+    }
   }
 </script>
 
@@ -204,7 +214,7 @@
     on:opened={initialisePicker}
     on:closed={() => dispatch('close')}>
     <div slot="trigger">
-      <slot formatted={$formatter}>
+      <slot formatted={$formatter} {selectedStart} {selectedEnd}>
         {#if !trigger}
           <button class="calendar-button" type="button">
             {#if $isDateChosen}

From 9848001ae5ea664d8230b0e3735519789bf3cf75 Mon Sep 17 00:00:00 2001
From: Tim Wheelock <tlock@armyofbees.com>
Date: Tue, 20 Aug 2024 23:24:02 +0900
Subject: [PATCH 09/13] Add named slot for before contents in open view

---
 src/App.svelte                        | 12 ++++-
 src/components/DatePicker.svelte      |  3 ++
 src/components/DatePickerInner.svelte |  3 ++
 src/components/Popover.svelte         | 71 ++++++++++++++-------------
 4 files changed, 53 insertions(+), 36 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 17f8793..215f359 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -285,7 +285,17 @@
                         'Change fired'
                       ]
                     }}
-                  />
+                    let:selectedStart
+                    let:selectedEnd
+                  >
+                    <div style="border: 1px solid black; padding: 10px; border-radius: 4px;">
+                      <p>{selectedStart}</p>
+                      <p>{selectedEnd}</p>
+                    </div>
+                    <div slot="beforeContents">
+                      <h1>hell yeah!</h1>
+                    </div>
+                  </DatePicker>
                   </div>
                   <ul>
                   {#each firedEvents as fired}
diff --git a/src/components/DatePicker.svelte b/src/components/DatePicker.svelte
index e5c0f88..b251f74 100644
--- a/src/components/DatePicker.svelte
+++ b/src/components/DatePicker.svelte
@@ -23,6 +23,9 @@
       let:selectedEnd
     >
       <slot {selectedStart} {selectedEnd} />
+      <div slot="beforeContents">
+       <slot name="beforeContents" {selectedStart} {selectedEnd} />
+      </div>
     </DatePickerInner>
   {:else}
     <DatePickerInner {...$$restProps}
diff --git a/src/components/DatePickerInner.svelte b/src/components/DatePickerInner.svelte
index 2b05301..cd54cd7 100644
--- a/src/components/DatePickerInner.svelte
+++ b/src/components/DatePickerInner.svelte
@@ -226,6 +226,9 @@
         {/if}
       </slot>
     </div>
+    <div slot="beforeContents">
+      <slot name="beforeContents" {selectedStart} {selectedEnd} />
+    </div>
     <div class="contents" slot="contents" class:is-range-picker={config.isRangePicker}>
       <div class="view">
         <View
diff --git a/src/components/Popover.svelte b/src/components/Popover.svelte
index 6df8034..b4a6d00 100644
--- a/src/components/Popover.svelte
+++ b/src/components/Popover.svelte
@@ -70,34 +70,35 @@
     <slot name="trigger">
     </slot>
   </div>
-  <div 
-    class="contents-wrapper" 
+  <div
+    class="contents-wrapper"
     class:visible={$isOpen}
     class:shrink={$isClosing}
     class:is-fullscreen={isFullscreen}
-    style="top: {translateY}px; left: {translateX}px" 
+    style="top: {translateY}px; left: {translateX}px"
     bind:this={contentsWrapper}>
     <div class="wrapper" bind:this={contentsAnimated}>
       <div class="contents-inner">
-        <slot name="contents"></slot>
+        <slot name="beforeContents" />
+        <slot name="contents" />
       </div>
     </div>
   </div>
 </div>
 
 <style>
-  .sc-popover { 
+  .sc-popover {
     position: relative;
   }
 
-  .contents-wrapper { 
+  .contents-wrapper {
     position: fixed;
     transition: none;
     z-index: 2;
     display: none;
   }
 
-  .contents-wrapper.visible { 
+  .contents-wrapper.visible {
     display: block;
   }
 
@@ -109,65 +110,65 @@
     overflow: scroll;
   }
 
-  .contents-wrapper.visible .wrapper { 
-    opacity: 1; 
+  .contents-wrapper.visible .wrapper {
+    opacity: 1;
     transform: scale(1);
     display: block;
   }
-  
-  .contents-wrapper.shrink .wrapper { 
+
+  .contents-wrapper.shrink .wrapper {
     animation: shrink 150ms forwards cubic-bezier(.92,.09,.18,1.05);
   }
 
-  .wrapper { 
+  .wrapper {
     background: #fff;
     box-shadow: 0px 10px 26px rgba(0,0,0,0.4) ;
-    opacity: .8; 
+    opacity: .8;
     padding-top: 0;
     display: none;
     animation: grow 200ms forwards cubic-bezier(.92,.09,.18,1.05);
   }
 
-  .contents-inner { 
+  .contents-inner {
     animation: fadeIn 400ms forwards;
   }
 
-  @keyframes grow { 
-    0% { 
-      transform: scale(.9,.1); 
-      opacity: 0; 
+  @keyframes grow {
+    0% {
+      transform: scale(.9,.1);
+      opacity: 0;
     }
-    30% { 
-      opacity: 1; 
+    30% {
+      opacity: 1;
     }
-    100% { 
+    100% {
       transform: scale(1);
     }
   }
 
-  @keyframes shrink { 
-    0% { 
-      transform: scale(1); 
-      opacity: 1; 
+  @keyframes shrink {
+    0% {
+      transform: scale(1);
+      opacity: 1;
     }
-    70% { 
-      opacity: 1; 
+    70% {
+      opacity: 1;
     }
-    100% { 
-      opacity: 0; 
+    100% {
+      opacity: 0;
       transform: scale(.9,.1);
     }
   }
 
-  @keyframes fadeIn { 
-    0% { 
-      opacity: 0; 
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
     }
-    50% { 
+    50% {
       opacity: 0;
     }
-    100% { 
-      opacity: 1; 
+    100% {
+      opacity: 1;
     }
   }
 </style>

From a11c3510a01b7a7d783fcdb5babf1922a893926a Mon Sep 17 00:00:00 2001
From: Tim Wheelock <tlock@armyofbees.com>
Date: Tue, 20 Aug 2024 23:28:01 +0900
Subject: [PATCH 10/13] Re-do file structure

---
 src/components/DatePicker.svelte             | 275 ++++++++++++++++---
 src/components/DatePickerAsyncWrapper.svelte |  39 +++
 src/components/DatePickerInner.svelte        | 248 -----------------
 src/main.js                                  |   2 +-
 4 files changed, 282 insertions(+), 282 deletions(-)
 create mode 100644 src/components/DatePickerAsyncWrapper.svelte
 delete mode 100644 src/components/DatePickerInner.svelte

diff --git a/src/components/DatePicker.svelte b/src/components/DatePicker.svelte
index b251f74..69fa8e8 100644
--- a/src/components/DatePicker.svelte
+++ b/src/components/DatePicker.svelte
@@ -1,39 +1,248 @@
 <script>
-  import { onMount } from 'svelte'
-  import DatePickerInner from './DatePickerInner.svelte'
-  import { setLoadingCursor } from './lib/context'
+  import { createEventDispatcher, getContext, setContext } from 'svelte'
+  import { CalendarStyle } from '../calendar-style'
+  import { contextKey, setup } from './lib/context'
+  import { dayjs } from './lib/date-utils'
+  import { createViewContext } from './lib/view-context'
+  import Popover from './Popover.svelte'
+  import Toolbar from './Toolbar.svelte'
+  import View from './view/View.svelte'
 
-  let ready = false
+  export let range = false
+  export let defaultRange = [ 1, 'month' ]
+  export let placeholder = 'Choose Date'
+  export let format = 'DD / MM / YYYY'
+  export let start = dayjs().subtract(1, 'year')
+  export let end = dayjs().add(1, 'year')
+  export let trigger = null
+  export let selectableCallback = null
+  export let styling = new CalendarStyle()
+  export let selected
+  export let closeOnFocusLoss = true
+  export let time = false
+  export let morning = 7
+  export let night = 19
+  export let minuteStep = 5
+  export let continueText = 'Continue'
 
-  onMount(async () => {
-    await setLoadingCursor()
-    ready = true
-  })
+  const dispatch = createEventDispatcher()
+
+  const startContextKey = {}
+  const endContextKey = {}
+
+  const config = {
+    start: dayjs(start),
+    end: dayjs(end),
+    isRangePicker: range,
+    defaultRange,
+    isTimePicker: time,
+    closeOnFocusLoss,
+    format,
+    morning,
+    night,
+    selectableCallback,
+    minuteStep: parseInt(minuteStep)
+  }
+
+  setContext(contextKey, setup(selected, config))
+  const {
+    selectedStartDate,
+    selectedEndDate,
+    isOpen,
+    isClosing,
+    highlighted,
+    formatter,
+    isDateChosen,
+    isSelectingFirstDate
+  } = getContext(contextKey)
+
+  setContext(startContextKey, createViewContext(true, getContext(contextKey)))
+
+  if (config.isRangePicker) {
+    setContext(endContextKey, createViewContext(false, getContext(contextKey)))
+  }
+
+  let popover
+
+  function initialisePicker () {
+    highlighted.set($selectedStartDate)
+    dispatch('open')
+  }
+
+  function setRangeValue () {
+    selected = [ $selectedStartDate, $selectedEndDate ]
+    dispatch('range-selected', {
+      from: $selectedStartDate.toDate(),
+      to: $selectedEndDate.toDate()
+    })
+  }
+
+  function setDateValue () {
+    selected = $selectedStartDate.toDate()
+    dispatch('date-selected', {
+      date: $selectedStartDate.toDate()
+    })
+  }
+
+  function swapDatesIfRequired () {
+    if (!config.isRangePicker) { return }
+    const from = $selectedStartDate
+    const to = $selectedEndDate
+    if (to.isBefore(from)) {
+      selectedStartDate.set(to)
+      selectedEndDate.set(from)
+    }
+  }
+
+  function addDate (e) {
+    const { date } = e.detail
+    if ($isSelectingFirstDate) {
+      selectedStartDate.set(date)
+    } else {
+      selectedEndDate.set(date)
+    }
+    swapDatesIfRequired()
+    config.isRangePicker && isSelectingFirstDate.update(v => !v)
+  }
+
+  function close () {
+    swapDatesIfRequired()
+    popover.close()
+  }
+
+  $: {
+    if ($isDateChosen) {
+      config.isRangePicker ? setRangeValue() : setDateValue()
+      dispatch('change')
+    }
+  }
+
+  /**
+   * Allow external sources to update dates by binding to selected prop
+   * and updating with JS Date objects
+  */
+  $: {
+    if (config.isRangePicker && selected) {
+      if (selected[0] instanceof Date) {
+        selectedStartDate.set(dayjs(selected[0]))
+      }
+      if (selected[1] instanceof Date) {
+        selectedEndDate.set(dayjs(selected[1]))
+      }
+    }
+  }
+
+  /**
+   * Allow external sources to react to internal selections via event forwarding
+  */
+  let selectedStart = null
+  $: {
+    if ($selectedStartDate) {
+      selectedStart = $selectedStartDate.toDate()
+    } else {
+      selectedStart = null
+    }
+  }
+  let selectedEnd = null
+  $: {
+    if ($selectedEndDate) {
+      selectedEnd = $selectedEndDate.toDate()
+    } else {
+      selectedEnd = null
+    }
+  }
 </script>
 
-{#if ready}
-  {#if $$slots.default}
-    <DatePickerInner {...$$restProps}
-      on:open
-      on:range-selected
-      on:date-selected
-      on:change
-      on:close
-      let:selectedStart
-      let:selectedEnd
-    >
-      <slot {selectedStart} {selectedEnd} />
-      <div slot="beforeContents">
-       <slot name="beforeContents" {selectedStart} {selectedEnd} />
+<style>
+  .datepicker {
+    display: inline-block;
+    text-align: center;
+    overflow: visible;
+    width: var(--datepicker-width);
+  }
+
+  .calendar-button {
+    padding: 10px 20px;
+    border: 1px solid var(--button-border-color);
+    display: block;
+    text-align: center;
+    width: var(--button-width);
+    text-decoration: none;
+    cursor: pointer;
+    background: var(--button-background-color);
+    color: var(--button-text-color);
+    border-radius: 7px;
+    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: inherit;
+  }
+
+  .contents {
+    min-width: 320px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background: var(--content-background);
+  }
+
+  .view {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  @media (min-width: 680px) {
+    .view {
+      flex-direction: row;
+      justify-content: center;
+    }
+  }
+</style>
+
+<div
+  class="datepicker"
+  class:open={$isOpen}
+  class:closing={$isClosing}
+  style={styling.toWrapperStyle()}>
+  <Popover
+    {trigger}
+    bind:this={popover}
+    on:opened={initialisePicker}
+    on:closed={() => dispatch('close')}>
+    <div slot="trigger">
+      <slot formatted={$formatter} {selectedStart} {selectedEnd}>
+        {#if !trigger}
+          <button class="calendar-button" type="button">
+            {#if $isDateChosen}
+              {$formatter.formattedCombined}
+            {:else}
+              {placeholder}
+            {/if}
+          </button>
+        {/if}
+      </slot>
+    </div>
+    <div slot="beforeContents">
+      <slot name="beforeContents" {selectedStart} {selectedEnd} />
+    </div>
+    <div class="contents" slot="contents" class:is-range-picker={config.isRangePicker}>
+      <div class="view">
+        <View
+          viewContextKey={startContextKey}
+          on:chosen={addDate}
+        />
+        {#if config.isRangePicker}
+        <View
+          viewContextKey={endContextKey}
+          on:chosen={addDate}
+        />
+        {/if}
       </div>
-    </DatePickerInner>
-  {:else}
-    <DatePickerInner {...$$restProps}
-      on:open
-      on:range-selected
-      on:date-selected
-      on:change
-      on:close
-    />
-  {/if}
-{/if}
+      <Toolbar continueText={continueText} on:close={close} />
+    </div>
+  </Popover>
+</div>
diff --git a/src/components/DatePickerAsyncWrapper.svelte b/src/components/DatePickerAsyncWrapper.svelte
new file mode 100644
index 0000000..46d7926
--- /dev/null
+++ b/src/components/DatePickerAsyncWrapper.svelte
@@ -0,0 +1,39 @@
+<script>
+  import { onMount } from 'svelte'
+  import DatePickerInner from './DatePicker.svelte'
+  import { setLoadingCursor } from './lib/context'
+
+  let ready = false
+
+  onMount(async () => {
+    await setLoadingCursor()
+    ready = true
+  })
+</script>
+
+{#if ready}
+  {#if $$slots.default}
+    <DatePickerInner {...$$restProps}
+      on:open
+      on:range-selected
+      on:date-selected
+      on:change
+      on:close
+      let:selectedStart
+      let:selectedEnd
+    >
+      <slot {selectedStart} {selectedEnd} />
+      <div slot="beforeContents">
+       <slot name="beforeContents" {selectedStart} {selectedEnd} />
+      </div>
+    </DatePickerInner>
+  {:else}
+    <DatePickerInner {...$$restProps}
+      on:open
+      on:range-selected
+      on:date-selected
+      on:change
+      on:close
+    />
+  {/if}
+{/if}
diff --git a/src/components/DatePickerInner.svelte b/src/components/DatePickerInner.svelte
deleted file mode 100644
index cd54cd7..0000000
--- a/src/components/DatePickerInner.svelte
+++ /dev/null
@@ -1,248 +0,0 @@
-<script>
-  import { createEventDispatcher, getContext, setContext } from 'svelte'
-  import { CalendarStyle } from '../calendar-style.js'
-  import { contextKey, setup } from './lib/context'
-  import { dayjs } from './lib/date-utils'
-  import { createViewContext } from './lib/view-context.js'
-  import Popover from './Popover.svelte'
-  import Toolbar from './Toolbar.svelte'
-  import View from './view/View.svelte'
-
-  export let range = false
-  export let defaultRange = [ 1, 'month' ]
-  export let placeholder = 'Choose Date'
-  export let format = 'DD / MM / YYYY'
-  export let start = dayjs().subtract(1, 'year')
-  export let end = dayjs().add(1, 'year')
-  export let trigger = null
-  export let selectableCallback = null
-  export let styling = new CalendarStyle()
-  export let selected
-  export let closeOnFocusLoss = true
-  export let time = false
-  export let morning = 7
-  export let night = 19
-  export let minuteStep = 5
-  export let continueText = 'Continue'
-
-  const dispatch = createEventDispatcher()
-
-  const startContextKey = {}
-  const endContextKey = {}
-
-  const config = {
-    start: dayjs(start),
-    end: dayjs(end),
-    isRangePicker: range,
-    defaultRange,
-    isTimePicker: time,
-    closeOnFocusLoss,
-    format,
-    morning,
-    night,
-    selectableCallback,
-    minuteStep: parseInt(minuteStep)
-  }
-
-  setContext(contextKey, setup(selected, config))
-  const {
-    selectedStartDate,
-    selectedEndDate,
-    isOpen,
-    isClosing,
-    highlighted,
-    formatter,
-    isDateChosen,
-    isSelectingFirstDate
-  } = getContext(contextKey)
-
-  setContext(startContextKey, createViewContext(true, getContext(contextKey)))
-
-  if (config.isRangePicker) {
-    setContext(endContextKey, createViewContext(false, getContext(contextKey)))
-  }
-
-  let popover
-
-  function initialisePicker () {
-    highlighted.set($selectedStartDate)
-    dispatch('open')
-  }
-
-  function setRangeValue () {
-    selected = [ $selectedStartDate, $selectedEndDate ]
-    dispatch('range-selected', {
-      from: $selectedStartDate.toDate(),
-      to: $selectedEndDate.toDate()
-    })
-  }
-
-  function setDateValue () {
-    selected = $selectedStartDate.toDate()
-    dispatch('date-selected', {
-      date: $selectedStartDate.toDate()
-    })
-  }
-
-  function swapDatesIfRequired () {
-    if (!config.isRangePicker) { return }
-    const from = $selectedStartDate
-    const to = $selectedEndDate
-    if (to.isBefore(from)) {
-      selectedStartDate.set(to)
-      selectedEndDate.set(from)
-    }
-  }
-
-  function addDate (e) {
-    const { date } = e.detail
-    if ($isSelectingFirstDate) {
-      selectedStartDate.set(date)
-    } else {
-      selectedEndDate.set(date)
-    }
-    swapDatesIfRequired()
-    config.isRangePicker && isSelectingFirstDate.update(v => !v)
-  }
-
-  function close () {
-    swapDatesIfRequired()
-    popover.close()
-  }
-
-  $: {
-    if ($isDateChosen) {
-      config.isRangePicker ? setRangeValue() : setDateValue()
-      dispatch('change')
-    }
-  }
-
-  /**
-   * Allow external sources to update dates by binding to selected prop
-   * and updating with JS Date objects
-  */
-  $: {
-    if (config.isRangePicker && selected) {
-      if (selected[0] instanceof Date) {
-        selectedStartDate.set(dayjs(selected[0]))
-      }
-      if (selected[1] instanceof Date) {
-        selectedEndDate.set(dayjs(selected[1]))
-      }
-    }
-  }
-
-  /**
-   * Allow external sources to react to internal selections via event forwarding
-  */
-  let selectedStart = null
-  $: {
-    if ($selectedStartDate) {
-      selectedStart = $selectedStartDate.toDate()
-    } else {
-      selectedStart = null
-    }
-  }
-  let selectedEnd = null
-  $: {
-    if ($selectedEndDate) {
-      selectedEnd = $selectedEndDate.toDate()
-    } else {
-      selectedEnd = null
-    }
-  }
-</script>
-
-<style>
-  .datepicker {
-    display: inline-block;
-    text-align: center;
-    overflow: visible;
-    width: var(--datepicker-width);
-  }
-
-  .calendar-button {
-    padding: 10px 20px;
-    border: 1px solid var(--button-border-color);
-    display: block;
-    text-align: center;
-    width: var(--button-width);
-    text-decoration: none;
-    cursor: pointer;
-    background: var(--button-background-color);
-    color: var(--button-text-color);
-    border-radius: 7px;
-    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
-  }
-
-  *,
-  *:before,
-  *:after {
-    box-sizing: inherit;
-  }
-
-  .contents {
-    min-width: 320px;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    background: var(--content-background);
-  }
-
-  .view {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  @media (min-width: 680px) {
-    .view {
-      flex-direction: row;
-      justify-content: center;
-    }
-  }
-</style>
-
-<div
-  class="datepicker"
-  class:open={$isOpen}
-  class:closing={$isClosing}
-  style={styling.toWrapperStyle()}>
-  <Popover
-    {trigger}
-    bind:this={popover}
-    on:opened={initialisePicker}
-    on:closed={() => dispatch('close')}>
-    <div slot="trigger">
-      <slot formatted={$formatter} {selectedStart} {selectedEnd}>
-        {#if !trigger}
-          <button class="calendar-button" type="button">
-            {#if $isDateChosen}
-              {$formatter.formattedCombined}
-            {:else}
-              {placeholder}
-            {/if}
-          </button>
-        {/if}
-      </slot>
-    </div>
-    <div slot="beforeContents">
-      <slot name="beforeContents" {selectedStart} {selectedEnd} />
-    </div>
-    <div class="contents" slot="contents" class:is-range-picker={config.isRangePicker}>
-      <div class="view">
-        <View
-          viewContextKey={startContextKey}
-          on:chosen={addDate}
-        />
-        {#if config.isRangePicker}
-        <View
-          viewContextKey={endContextKey}
-          on:chosen={addDate}
-        />
-        {/if}
-      </div>
-      <Toolbar continueText={continueText} on:close={close} />
-    </div>
-  </Popover>
-</div>
diff --git a/src/main.js b/src/main.js
index 0bc801c..e18c282 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,6 @@
 import { polyfill } from 'es6-object-assign'
 import { CalendarStyle } from './calendar-style.js'
-import DatePicker from './components/DatePicker.svelte'
+import DatePicker from './components/DatePickerAsyncWrapper.svelte'
 polyfill()
 
 export {

From 7c4b919a45754f605bc5ab1c9488ca905700a3b5 Mon Sep 17 00:00:00 2001
From: Tim Wheelock <tlock@armyofbees.com>
Date: Wed, 21 Aug 2024 00:12:45 +0900
Subject: [PATCH 11/13] Implement external force close

---
 src/App.svelte                   | 14 +++++++++++++-
 src/components/DatePicker.svelte | 10 ++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/App.svelte b/src/App.svelte
index 215f359..876264f 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -272,6 +272,7 @@
                     format='ddd, DD MMM YYYY'
                     range={true}
                     time={true}
+                    closeOnFocusLoss={false}
                     on:range-selected={e => {
                       console.log(e)
                       firedEvents = [
@@ -287,13 +288,14 @@
                     }}
                     let:selectedStart
                     let:selectedEnd
+                    forceClose={forcedClose}
                   >
                     <div style="border: 1px solid black; padding: 10px; border-radius: 4px;">
                       <p>{selectedStart}</p>
                       <p>{selectedEnd}</p>
                     </div>
                     <div slot="beforeContents">
-                      <h1>hell yeah!</h1>
+                      <h1>Before Contents Slot</h1>
                     </div>
                   </DatePicker>
                   </div>
@@ -304,6 +306,9 @@
                   <li>Pick date to see events</li>
                   {/each}
                   </ul>
+                  <div style="position: fixed; top: 0; right: 0;">
+                    <button on:click={forceClose}>click to force closed</button>
+                  </div>
                 </Route>
               </Route>
             </Route>
@@ -346,6 +351,13 @@
   let firedEvents = []
   let firedEventsValue = null
   let customSelected = null
+
+  let forcedClose = false
+  async function forceClose () {
+    forcedClose = true
+    await new Promise((resolve) => setTimeout(resolve, 100))
+    forcedClose = false
+  }
 </script>
 
 <style>
diff --git a/src/components/DatePicker.svelte b/src/components/DatePicker.svelte
index 69fa8e8..5358e9b 100644
--- a/src/components/DatePicker.svelte
+++ b/src/components/DatePicker.svelte
@@ -24,6 +24,7 @@
   export let night = 19
   export let minuteStep = 5
   export let continueText = 'Continue'
+  export let forceClose = false
 
   const dispatch = createEventDispatcher()
 
@@ -151,6 +152,15 @@
       selectedEnd = null
     }
   }
+
+  /**
+   * Allow forceful closing from outside
+  */
+  $: {
+    if ($isOpen && forceClose) {
+      close()
+    }
+  }
 </script>
 
 <style>

From 56f2c7d9532335a22fd0cc8fc184d4a57c6f2061 Mon Sep 17 00:00:00 2001
From: Tim Wheelock <tlock@armyofbees.com>
Date: Fri, 12 Dec 2025 12:53:46 +0900
Subject: [PATCH 12/13] Make external changes to date/date-range pickers'
 value(s) also move the "view"

---
 src/components/DatePicker.svelte | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/DatePicker.svelte b/src/components/DatePicker.svelte
index 5358e9b..49fc683 100644
--- a/src/components/DatePicker.svelte
+++ b/src/components/DatePicker.svelte
@@ -3,6 +3,7 @@
   import { CalendarStyle } from '../calendar-style'
   import { contextKey, setup } from './lib/context'
   import { dayjs } from './lib/date-utils'
+  import { ensureFutureMonth } from './lib/date-manipulation'
   import { createViewContext } from './lib/view-context'
   import Popover from './Popover.svelte'
   import Toolbar from './Toolbar.svelte'
@@ -49,6 +50,8 @@
   const {
     selectedStartDate,
     selectedEndDate,
+    leftCalendarDate,
+    rightCalendarDate,
     isOpen,
     isClosing,
     highlighted,
@@ -120,16 +123,25 @@
 
   /**
    * Allow external sources to update dates by binding to selected prop
-   * and updating with JS Date objects
+   * and updating with JS Date objects. Also update the calendar view
+   * to show the selected dates.
   */
   $: {
     if (config.isRangePicker && selected) {
       if (selected[0] instanceof Date) {
-        selectedStartDate.set(dayjs(selected[0]))
+        const startDate = dayjs(selected[0])
+        selectedStartDate.set(startDate)
+        leftCalendarDate.set(startDate.startOf('month'))
       }
       if (selected[1] instanceof Date) {
-        selectedEndDate.set(dayjs(selected[1]))
+        const endDate = dayjs(selected[1])
+        selectedEndDate.set(endDate)
+        rightCalendarDate.set(ensureFutureMonth($leftCalendarDate, endDate).startOf('month'))
       }
+    } else if (selected instanceof Date) {
+      const date = dayjs(selected)
+      selectedStartDate.set(date)
+      leftCalendarDate.set(date.startOf('month'))
     }
   }
 

From cdb7efa6aca72753d9479c7c015735b38565ef37 Mon Sep 17 00:00:00 2001
From: Tim Wheelock <tlock@armyofbees.com>
Date: Fri, 13 Mar 2026 14:14:16 +0900
Subject: [PATCH 13/13] Get ready for use in Svelte 4

---
 package.json                                 | 9 ++++++++-
 src/components/DatePickerAsyncWrapper.svelte | 2 +-
 src/components/Popover.svelte                | 1 +
 src/components/view/time-view/Chevron.svelte | 1 +
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 3ed8fe2..b81bd92 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,13 @@
   "svelte": "src/main.js",
   "version": "12.0.1",
   "license": "MIT",
+  "exports": {
+    ".": {
+      "svelte": "./src/main.js",
+      "default": "./src/main.js"
+    },
+    "./*": "./*"
+  },
   "scripts": {
     "dev": "snowpack dev",
     "build": "snowpack build",
@@ -13,7 +20,7 @@
   "dependencies": {
     "dayjs": "^1.10.7",
     "es6-object-assign": "^1.1.0",
-    "svelte": "^3.24.0"
+    "svelte": "^3.24.0 || ^4.0.0"
   },
   "devDependencies": {
     "@beyonk/eslint-config": "^4.2.0",
diff --git a/src/components/DatePickerAsyncWrapper.svelte b/src/components/DatePickerAsyncWrapper.svelte
index 46d7926..08ca817 100644
--- a/src/components/DatePickerAsyncWrapper.svelte
+++ b/src/components/DatePickerAsyncWrapper.svelte
@@ -23,7 +23,7 @@
       let:selectedEnd
     >
       <slot {selectedStart} {selectedEnd} />
-      <div slot="beforeContents">
+      <div slot="beforeContents" let:selectedStart let:selectedEnd>
        <slot name="beforeContents" {selectedStart} {selectedEnd} />
       </div>
     </DatePickerInner>
diff --git a/src/components/Popover.svelte b/src/components/Popover.svelte
index b4a6d00..a15851c 100644
--- a/src/components/Popover.svelte
+++ b/src/components/Popover.svelte
@@ -66,6 +66,7 @@
 
 <svelte:window bind:innerWidth={w} />
 <div class="sc-popover" bind:this={popover}>
+  <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
   <div class="trigger" on:click={doOpen} bind:this={triggerContainer}>
     <slot name="trigger">
     </slot>
diff --git a/src/components/view/time-view/Chevron.svelte b/src/components/view/time-view/Chevron.svelte
index 4b99d69..e8e0ab9 100644
--- a/src/components/view/time-view/Chevron.svelte
+++ b/src/components/view/time-view/Chevron.svelte
@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
 <span class="chevron" class:bottom={!up} on:click></span>
   
 <script>