accomadesc 0.4.3 → 0.4.4

package/dist/BookingRequest.svelte

@@ -4,11 +4,12 @@
   import Notes from './basic/Notes.svelte';
   import Spinner from './basic/Spinner.svelte';
   import TextInput from './basic/TextInput.svelte';
-  import { getOccupationState, OccupationState } from './occuplan/state.svelte.js';
+  import { contextKey, OccupationState } from './occuplan/state.svelte.js';
   import OccuPlanPicker from './occuplan/OccuPlanPicker.svelte';
   import { fade } from 'svelte/transition';
   import type { DateTime } from 'luxon';
   import { randomID } from './names/gen.js';
+  import { getContext, setContext, untrack } from 'svelte';
 
   const {
     endpoint,
@@ -54,7 +55,16 @@
   let sending = $state(false);
   let disabled = $derived(preview || errored || successfullySent);
 
-  let occupationState: OccupationState = $derived(getOccupationState(calUrl));
+  const stateID = contextKey(untrack(() => calUrl));
+  let ss: OccupationState = getContext(stateID);
+  if (!ss) {
+    ss = new OccupationState(() => {
+      return { iCalURL: calUrl, debug: false };
+    });
+    setContext(stateID, ss);
+  }
+
+  let occupationState: OccupationState = $derived(ss);
   let invalid = $derived(
     occupationState && arrival && leave ? !occupationState.validRequest(arrival, leave) : false,
   );

package/dist/MainNav.svelte

@@ -82,7 +82,7 @@
   }
 
   nav.main-nav {
-    z-index: 998;
+    z-index: 1001; /*needs to be higher then leaflet notice*/
     position: fixed;
     padding-right: 1rem;
     top: 0;

package/dist/occuplan/OccuPlanAvailableInfo.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">
   import { DateTime } from 'luxon';
   import { normalizeDate } from '../helpers/normalizeDate.js';
-  import { onMount, type Snippet } from 'svelte';
-  import {
-    OccupationState,
-    getOccupationState,
-    type AvailableSpans,
-  } from './state.svelte.js';
+  import { getContext, onMount, untrack, setContext, type Snippet } from 'svelte';
+  import { OccupationState, contextKey, type AvailableSpans } from './state.svelte.js';
   import Spinner from '../basic/Spinner.svelte';
 
   let {
@@ -17,13 +13,22 @@
     children,
   }: {
     url: string;
-    debug?: boolean;
+    debug?: boolean | undefined;
     search?: number[];
     maxFutureDate?: DateTime;
     children: Snippet<[AvailableSpans]>;
   } = $props();
 
-  let occupationState: OccupationState = $derived(getOccupationState(url, debug));
+  const stateID = contextKey(untrack(() => url));
+  let ss: OccupationState = getContext(stateID);
+  if (!ss) {
+    ss = new OccupationState(() => {
+      return { iCalURL: url, debug };
+    });
+    setContext(stateID, ss);
+  }
+
+  let occupationState: OccupationState = $derived(ss);
   let av = $derived(occupationState ? occupationState.calcAvailability(search, maxFutureDate) : {});
 
   onMount(() => {

package/dist/occuplan/OccuPlanAvailableInfo.svelte.d.ts

@@ -3,7 +3,7 @@ import { type Snippet } from 'svelte';
 import { type AvailableSpans } from './state.svelte.js';
 type $$ComponentProps = {
     url: string;
-    debug?: boolean;
+    debug?: boolean | undefined;
     search?: number[];
     maxFutureDate?: DateTime;
     children: Snippet<[AvailableSpans]>;

package/dist/occuplan/OccuPlanGrid.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { DateTime, type MonthNumbers } from 'luxon';
   import {
+    contextKey,
     defaultMonthHeaderFormat,
     defaultMonthLabels,
     defaultWeekdayLabels,
     OccupationState,
-    getOccupationState,
     occupationTypeFormatting,
     realFirstMonth,
     type FirstMonth,
@@ -15,7 +15,7 @@
   import Button from '../basic/Button.svelte';
   import Spinner from '../basic/Spinner.svelte';
   import { randomID } from '../names/gen.js';
-  import { onMount } from 'svelte';
+  import { getContext, onMount, setContext, untrack } from 'svelte';
 
   let {
     url,
@@ -49,7 +49,15 @@
 
   const id = randomID();
 
-  let occupationState: OccupationState = $derived(getOccupationState(url, debug));
+  const stateID = contextKey(untrack(() => url));
+  let ss: OccupationState = getContext(stateID);
+  if (!ss) {
+    ss = new OccupationState(() => {
+      return { iCalURL: url, debug };
+    });
+    setContext(stateID, ss);
+  }
+  let occupationState: OccupationState = $derived(ss);
 
   //let formatFun = $derived(Sqrl.compile(monthHeaderFormat, { useWith: true }));
   const monthHeader = (monthNum: MonthNumbers, year: number): string => {

package/dist/occuplan/OccuPlanPicker.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   import { DateTime, type MonthNumbers } from 'luxon';
   import {
+    contextKey,
     defaultMonthHeaderFormat,
     defaultMonthLabels,
     defaultWeekdayLabels,
     OccupationState,
-    getOccupationState,
     realFirstMonth,
     type OccuplanTranslations,
   } from './state.svelte.js';
-  import { onMount, untrack } from 'svelte';
+  import { getContext, onMount, setContext, untrack } from 'svelte';
   import Button from '../basic/Button.svelte';
   import Spinner from '../basic/Spinner.svelte';
   import { normalizeDate } from '../helpers/normalizeDate.js';
@@ -56,7 +56,16 @@
     dateSelected?: (arrival: DateTime, leave: DateTime) => void;
   } = $props();
 
-  let occupationState: OccupationState = $derived(getOccupationState(url, debug));
+  const stateID = contextKey(untrack(() => url));
+  let ss: OccupationState = getContext(stateID);
+  if (!ss) {
+    ss = new OccupationState(() => {
+      return { iCalURL: url, debug };
+    });
+    setContext(stateID, ss);
+  }
+
+  let occupationState: OccupationState = $derived(ss);
 
   const monthHeader = (monthNum: MonthNumbers, year: number): string => {
     const monthLabel = monthLabels[monthNum];

package/dist/occuplan/OccuPlanRows.svelte

@@ -4,19 +4,19 @@
     defaultMonthLabels,
     defaultWeekendLabel,
     OccupationState,
-    getOccupationState,
     occupationTypeFormatting,
     type OccupationType,
     type OccuplanTranslations,
     type DayHelper,
     type FirstMonth,
     realFirstMonth,
+    contextKey,
   } from './state.svelte.js';
   import Button from '../basic/Button.svelte';
   import { browser } from '$app/environment';
   import Spinner from '../basic/Spinner.svelte';
   import { randomID } from '../names/gen.js';
-  import { onMount } from 'svelte';
+  import { getContext, onMount, setContext, untrack } from 'svelte';
 
   let {
     url,
@@ -47,7 +47,15 @@
 
   const id = randomID();
 
-  let occupationState: OccupationState = $derived(getOccupationState(url, debug));
+  const stateID = contextKey(untrack(() => url));
+  let ss: OccupationState = getContext(stateID);
+  if (!ss) {
+    ss = new OccupationState(() => {
+      return { iCalURL: url, debug };
+    });
+    setContext(stateID, ss);
+  }
+  let occupationState: OccupationState = $derived(ss);
 
   let page: number = $state(0);
   let rfMonth: number | DateTime = $derived(

package/dist/occuplan/OccuPlanWrapper.svelte

@@ -8,8 +8,11 @@
     defaultMonthLabels,
     defaultWeekdayLabels,
     defaultMonthHeaderFormat,
+    contextKey,
+    OccupationState,
   } from './state.svelte.js';
   import { DateTime } from 'luxon';
+  import { getContext, setContext, untrack } from 'svelte';
 
   let {
     url,
@@ -58,6 +61,15 @@
       showGrid = false;
     }
   });
+
+  const stateID = contextKey(untrack(() => url));
+  let ss: OccupationState = getContext(stateID);
+  if (!ss) {
+    ss = new OccupationState(() => {
+      return { iCalURL: url, debug };
+    });
+    setContext(stateID, ss);
+  }
 </script>
 
 <div class="calendar-wrapper" bind:clientWidth={w}>

package/dist/occuplan/state.svelte.d.ts

@@ -1,4 +1,5 @@
 import { DateTime, type MonthNumbers, type WeekdayNumbers } from 'luxon';
+export declare const contextKey: (id: string) => string;
 export interface AvailableSpans {
     [key: number]: DateTime | null;
 }
@@ -15,7 +16,6 @@ export type MonthLabels = {
     [key in MonthNumbers]: string;
 };
 export type OccupationType = 'one' | 'two' | 'three';
-export declare const OCCUPATION_STATE = "occupation-state";
 export declare const occupationTypeFormattingByOccupation: (o?: Occupation) => {
     fontColor: string;
     bgColor: string;
@@ -73,7 +73,10 @@ export declare class OccupationState {
     occupations: Occupation[];
     loading: boolean;
     debug: boolean;
-    constructor(iCalURL: string, debug?: boolean);
+    constructor(iniFn: () => {
+        iCalURL: string;
+        debug: boolean | undefined;
+    });
     loadOccupations: () => Promise<boolean>;
     private eventsIncomingCallback;
     private dayKey;
@@ -89,4 +92,3 @@ export declare class OccupationState {
     validRequest: (from: DateTime, to: DateTime) => boolean;
     occupationStyle: (d: DayHelper, highlightWeekend: boolean | undefined, maxDate: DateTime) => string;
 }
-export declare const getOccupationState: (url: string, debug?: boolean) => OccupationState;

package/dist/occuplan/state.svelte.js

@@ -1,9 +1,7 @@
 import { normalizeDate } from '../helpers/normalizeDate.js';
 import { getEvents } from '../helpers/readICS.js';
 import { DateTime } from 'luxon';
-import { DateTime as luxon } from 'luxon';
-import { getContext, setContext } from 'svelte';
-export const OCCUPATION_STATE = 'occupation-state';
+export const contextKey = (id) => `SS_${id}_CONTEXT`;
 export const occupationTypeFormattingByOccupation = (o) => {
     return occupationTypeFormatting(o?.type);
 };
@@ -161,8 +159,8 @@ export const realFirstMonth = (firstMonth, firstMonthYear, numberOfMonth, page)
         .plus({ month: monthToAdd });
 };
 const validDay = (d) => {
-    const today = luxon.utc();
-    const m = luxon.local(d.year, d.month, d.day);
+    const today = DateTime.utc();
+    const m = DateTime.local(d.year, d.month, d.day);
     if (m < today) {
         return false;
     }
@@ -199,11 +197,12 @@ export class OccupationState {
     occupations = $state([]);
     loading = $state(false);
     debug = $state(false);
-    constructor(iCalURL, debug = false) {
-        this.debug = debug;
+    constructor(iniFn) {
+        const data = iniFn();
+        this.debug = data.debug ?? false;
         if (this.debug)
-            console.log('Constructing OState with CalUrl: ', iCalURL);
-        this.iCalURL = iCalURL;
+            console.log('Constructing OState with CalUrl: ', data.iCalURL);
+        this.iCalURL = data.iCalURL;
         //this.loadOccupations();
     }
     loadOccupations = async () => {
@@ -274,7 +273,7 @@ export class OccupationState {
         let foundFirst = false;
         let firstDate;
         let consecutive = 0;
-        let d = normalizeDate(luxon.utc());
+        let d = normalizeDate(DateTime.utc());
         while (d <= maxFutureDate) {
             const key = `${d.year}-${d.month}-${d.day}`;
             if (this.occupiedDays[key]) {
@@ -336,7 +335,7 @@ export class OccupationState {
         if (!valid) {
             return 'background-color: var(--occuplan-invalid-days-bg-color); color: var(--occuplan-invalid-days-font-color);';
         }
-        const day = luxon.utc(d.year, d.month, d.day);
+        const day = DateTime.utc(d.year, d.month, d.day);
         const outOfScope = day >= maxDate;
         if (outOfScope) {
             return 'background-color: var(--occuplan-invalid-days-bg-color); color: var(--occuplan-invalid-days-font-color);';
@@ -412,13 +411,3 @@ export class OccupationState {
       `;
     };
 }
-export const getOccupationState = (url, debug = false) => {
-    if (debug)
-        console.log('Get OState /w url', url);
-    const stateID = `i-${url}-${OCCUPATION_STATE}`;
-    let _instance = getContext(stateID);
-    if (_instance)
-        return _instance;
-    setContext(stateID, new OccupationState(url, debug));
-    return getContext(stateID);
-};

package/dist/occusplan-link/OccuPlanAvailableInfo.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">
   import { DateTime } from 'luxon';
   import { normalizeDate } from '../helpers/normalizeDate.js';
-  import { onMount, type Snippet } from 'svelte';
-  import {
-    OccupationState,
-    getOccupationState,
-    type AvailableSpans,
-  } from '../occuplan/state.svelte.js';
+  import { getContext, onMount, untrack, setContext, type Snippet } from 'svelte';
+  import { OccupationState, contextKey, type AvailableSpans } from '../occuplan/state.svelte.js';
   import Spinner from '../basic/Spinner.svelte';
 
   let {
@@ -17,13 +13,22 @@
     children,
   }: {
     url: string;
-    debug?: boolean;
+    debug?: boolean | undefined;
     search?: number[];
     maxFutureDate?: DateTime;
     children: Snippet<[AvailableSpans]>;
   } = $props();
 
-  let occupationState: OccupationState = $derived(getOccupationState(url, debug));
+  const stateID = contextKey(untrack(() => url));
+  let ss: OccupationState = getContext(stateID);
+  if (!ss) {
+    ss = new OccupationState(() => {
+      return { iCalURL: url, debug };
+    });
+    setContext(stateID, ss);
+  }
+
+  let occupationState: OccupationState = $derived(ss);
   let av = $derived(occupationState ? occupationState.calcAvailability(search, maxFutureDate) : {});
 
   onMount(() => {

package/dist/occusplan-link/OccuPlanGrid.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { DateTime, type MonthNumbers } from 'luxon';
   import {
+    contextKey,
     defaultMonthHeaderFormat,
     defaultMonthLabels,
     defaultWeekdayLabels,
     OccupationState,
-    getOccupationState,
     occupationTypeFormatting,
     realFirstMonth,
     type FirstMonth,
@@ -15,7 +15,7 @@
   import Button from '../basic/Button.svelte';
   import Spinner from '../basic/Spinner.svelte';
   import { randomID } from '../names/gen.js';
-  import { onMount } from 'svelte';
+  import { getContext, onMount, setContext, untrack } from 'svelte';
 
   let {
     url,
@@ -49,7 +49,15 @@
 
   const id = randomID();
 
-  let occupationState: OccupationState = $derived(getOccupationState(url, debug));
+  const stateID = contextKey(untrack(() => url));
+  let ss: OccupationState = getContext(stateID);
+  if (!ss) {
+    ss = new OccupationState(() => {
+      return { iCalURL: url, debug };
+    });
+    setContext(stateID, ss);
+  }
+  let occupationState: OccupationState = $derived(ss);
 
   //let formatFun = $derived(Sqrl.compile(monthHeaderFormat, { useWith: true }));
   const monthHeader = (monthNum: MonthNumbers, year: number): string => {

package/dist/occusplan-link/OccuPlanPicker.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   import { DateTime, type MonthNumbers } from 'luxon';
   import {
+    contextKey,
     defaultMonthHeaderFormat,
     defaultMonthLabels,
     defaultWeekdayLabels,
     OccupationState,
-    getOccupationState,
     realFirstMonth,
     type OccuplanTranslations,
   } from '../occuplan/state.svelte.js';
-  import { onMount, untrack } from 'svelte';
+  import { getContext, onMount, setContext, untrack } from 'svelte';
   import Button from '../basic/Button.svelte';
   import Spinner from '../basic/Spinner.svelte';
   import { normalizeDate } from '../helpers/normalizeDate.js';
@@ -56,7 +56,16 @@
     dateSelected?: (arrival: DateTime, leave: DateTime) => void;
   } = $props();
 
-  let occupationState: OccupationState = $derived(getOccupationState(url, debug));
+  const stateID = contextKey(untrack(() => url));
+  let ss: OccupationState = getContext(stateID);
+  if (!ss) {
+    ss = new OccupationState(() => {
+      return { iCalURL: url, debug };
+    });
+    setContext(stateID, ss);
+  }
+
+  let occupationState: OccupationState = $derived(ss);
 
   const monthHeader = (monthNum: MonthNumbers, year: number): string => {
     const monthLabel = monthLabels[monthNum];

package/dist/occusplan-link/OccuPlanRows.svelte

@@ -4,19 +4,19 @@
     defaultMonthLabels,
     defaultWeekendLabel,
     OccupationState,
-    getOccupationState,
     occupationTypeFormatting,
     type OccupationType,
     type OccuplanTranslations,
     type DayHelper,
     type FirstMonth,
     realFirstMonth,
+    contextKey,
   } from '../occuplan/state.svelte.js';
   import Button from '../basic/Button.svelte';
   import { browser } from '$app/environment';
   import Spinner from '../basic/Spinner.svelte';
   import { randomID } from '../names/gen.js';
-  import { onMount } from 'svelte';
+  import { getContext, onMount, setContext, untrack } from 'svelte';
 
   let {
     url,
@@ -47,7 +47,15 @@
 
   const id = randomID();
 
-  let occupationState: OccupationState = $derived(getOccupationState(url, debug));
+  const stateID = contextKey(untrack(() => url));
+  let ss: OccupationState = getContext(stateID);
+  if (!ss) {
+    ss = new OccupationState(() => {
+      return { iCalURL: url, debug };
+    });
+    setContext(stateID, ss);
+  }
+  let occupationState: OccupationState = $derived(ss);
 
   let page: number = $state(0);
   let rfMonth: number | DateTime = $derived(

package/dist/occusplan-link/OccuPlanWrapper.svelte

@@ -8,8 +8,11 @@
     defaultMonthLabels,
     defaultWeekdayLabels,
     defaultMonthHeaderFormat,
+    contextKey,
+    OccupationState,
   } from '../occuplan/state.svelte.js';
   import { DateTime } from 'luxon';
+  import { getContext, setContext, untrack } from 'svelte';
 
   let {
     url,
@@ -58,6 +61,15 @@
       showGrid = false;
     }
   });
+
+  const stateID = contextKey(untrack(() => url));
+  let ss: OccupationState = getContext(stateID);
+  if (!ss) {
+    ss = new OccupationState(() => {
+      return { iCalURL: url, debug };
+    });
+    setContext(stateID, ss);
+  }
 </script>
 
 <div class="calendar-wrapper" bind:clientWidth={w}>

package/dist/occusplan-link/state.svelte.d.ts

@@ -1,4 +1,5 @@
 import { DateTime, type MonthNumbers, type WeekdayNumbers } from 'luxon';
+export declare const contextKey: (id: string) => string;
 export interface AvailableSpans {
     [key: number]: DateTime | null;
 }
@@ -15,7 +16,6 @@ export type MonthLabels = {
     [key in MonthNumbers]: string;
 };
 export type OccupationType = 'one' | 'two' | 'three';
-export declare const OCCUPATION_STATE = "occupation-state";
 export declare const occupationTypeFormattingByOccupation: (o?: Occupation) => {
     fontColor: string;
     bgColor: string;
@@ -73,7 +73,10 @@ export declare class OccupationState {
     occupations: Occupation[];
     loading: boolean;
     debug: boolean;
-    constructor(iCalURL: string, debug?: boolean);
+    constructor(iniFn: () => {
+        iCalURL: string;
+        debug: boolean | undefined;
+    });
     loadOccupations: () => Promise<boolean>;
     private eventsIncomingCallback;
     private dayKey;
@@ -89,4 +92,3 @@ export declare class OccupationState {
     validRequest: (from: DateTime, to: DateTime) => boolean;
     occupationStyle: (d: DayHelper, highlightWeekend: boolean | undefined, maxDate: DateTime) => string;
 }
-export declare const getOccupationState: (url: string, debug?: boolean) => OccupationState;

package/dist/occusplan-link/state.svelte.js

@@ -1,9 +1,7 @@
 import { normalizeDate } from '../helpers/normalizeDate.js';
 import { getEvents } from '../helpers/readICS.js';
 import { DateTime } from 'luxon';
-import { DateTime as luxon } from 'luxon';
-import { getContext, setContext } from 'svelte';
-export const OCCUPATION_STATE = 'occupation-state';
+export const contextKey = (id) => `SS_${id}_CONTEXT`;
 export const occupationTypeFormattingByOccupation = (o) => {
     return occupationTypeFormatting(o?.type);
 };
@@ -161,8 +159,8 @@ export const realFirstMonth = (firstMonth, firstMonthYear, numberOfMonth, page)
         .plus({ month: monthToAdd });
 };
 const validDay = (d) => {
-    const today = luxon.utc();
-    const m = luxon.local(d.year, d.month, d.day);
+    const today = DateTime.utc();
+    const m = DateTime.local(d.year, d.month, d.day);
     if (m < today) {
         return false;
     }
@@ -199,11 +197,12 @@ export class OccupationState {
     occupations = $state([]);
     loading = $state(false);
     debug = $state(false);
-    constructor(iCalURL, debug = false) {
-        this.debug = debug;
+    constructor(iniFn) {
+        const data = iniFn();
+        this.debug = data.debug ?? false;
         if (this.debug)
-            console.log('Constructing OState with CalUrl: ', iCalURL);
-        this.iCalURL = iCalURL;
+            console.log('Constructing OState with CalUrl: ', data.iCalURL);
+        this.iCalURL = data.iCalURL;
         //this.loadOccupations();
     }
     loadOccupations = async () => {
@@ -274,7 +273,7 @@ export class OccupationState {
         let foundFirst = false;
         let firstDate;
         let consecutive = 0;
-        let d = normalizeDate(luxon.utc());
+        let d = normalizeDate(DateTime.utc());
         while (d <= maxFutureDate) {
             const key = `${d.year}-${d.month}-${d.day}`;
             if (this.occupiedDays[key]) {
@@ -336,7 +335,7 @@ export class OccupationState {
         if (!valid) {
             return 'background-color: var(--occuplan-invalid-days-bg-color); color: var(--occuplan-invalid-days-font-color);';
         }
-        const day = luxon.utc(d.year, d.month, d.day);
+        const day = DateTime.utc(d.year, d.month, d.day);
         const outOfScope = day >= maxDate;
         if (outOfScope) {
             return 'background-color: var(--occuplan-invalid-days-bg-color); color: var(--occuplan-invalid-days-font-color);';
@@ -412,13 +411,3 @@ export class OccupationState {
       `;
     };
 }
-export const getOccupationState = (url, debug = false) => {
-    if (debug)
-        console.log('Get OState /w url', url);
-    const stateID = `i-${url}-${OCCUPATION_STATE}`;
-    let _instance = getContext(stateID);
-    if (_instance)
-        return _instance;
-    setContext(stateID, new OccupationState(url, debug));
-    return getContext(stateID);
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "accomadesc",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -33,14 +33,14 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.3.1",
     "@types/luxon": "^3.7.1",
-    "@types/node": "^25.2.1",
+    "@types/node": "^25.2.3",
     "@vitest/ui": "^4.0.18",
     "gdpr-cooco-banner": "^0.0.13",
     "jsdom": "^27.4.0",
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.4.1",
     "publint": "^0.3.17",
-    "svelte": "^5.49.2",
+    "svelte": "^5.50.2",
     "svelte-check": "^4.3.6",
     "typescript": "^5.9.3",
     "vite": "^6.4.1",