@hkdigital/lib-sveltekit 0.1.28 → 0.1.30

package/dist/assets/autospuiten/car-paint-picker.d.ts

@@ -0,0 +1,17 @@
+export const carPaintImages: {
+    rusty: import("../../config/typedef.js").ImageMeta[];
+    "army-green": import("../../config/typedef.js").ImageMeta[];
+    "electric-blue": import("../../config/typedef.js").ImageMeta[];
+    "lemon-yellow": import("../../config/typedef.js").ImageMeta[];
+    "opaque-purple": import("../../config/typedef.js").ImageMeta[];
+    "sunset-orange": import("../../config/typedef.js").ImageMeta[];
+    "tomato-red": import("../../config/typedef.js").ImageMeta[];
+};
+import Rusty from './car-paint-picker/rusty.jpg?preset=render&responsive';
+import ArmyGreen from './car-paint-picker/army-green.jpg?preset=render&responsive';
+import ElectricBlue from './car-paint-picker/electric-blue.jpg?preset=render&responsive';
+import LemonYellow from './car-paint-picker/lemon-yellow.jpg?preset=render&responsive';
+import OpaquePurple from './car-paint-picker/opaque-purple.jpg?preset=render&responsive';
+import SunsetOrange from './car-paint-picker/sunset-orange.jpg?preset=render&responsive';
+import TomatoRed from './car-paint-picker/tomato-red.jpg?preset=render&responsive';
+export { Rusty, ArmyGreen, ElectricBlue, LemonYellow, OpaquePurple, SunsetOrange, TomatoRed };

package/dist/assets/autospuiten/car-paint-picker.js

@@ -0,0 +1,41 @@
+import {
+  LABEL_RUSTY,
+  LABEL_ARMY_GREEN,
+  LABEL_ELECTRIC_BLUE,
+  LABEL_LEMON_YELLOW,
+  LABEL_OPAQUE_PURPLE,
+  LABEL_SUNSET_ORANGE,
+  LABEL_TOMATO_RED
+} from './labels.js';
+
+import Rusty from './car-paint-picker/rusty.jpg?preset=render&responsive';
+
+import ArmyGreen from './car-paint-picker/army-green.jpg?preset=render&responsive';
+import ElectricBlue from './car-paint-picker/electric-blue.jpg?preset=render&responsive';
+import LemonYellow from './car-paint-picker/lemon-yellow.jpg?preset=render&responsive';
+import OpaquePurple from './car-paint-picker/opaque-purple.jpg?preset=render&responsive';
+import SunsetOrange from './car-paint-picker/sunset-orange.jpg?preset=render&responsive';
+import TomatoRed from './car-paint-picker/tomato-red.jpg?preset=render&responsive';
+
+// console.log('ArmyGreen', ArmyGreen);
+
+export const carPaintImages = {
+  [LABEL_RUSTY]: Rusty,
+  [LABEL_ARMY_GREEN]: ArmyGreen,
+  [LABEL_ELECTRIC_BLUE]: ElectricBlue,
+  [LABEL_LEMON_YELLOW]: LemonYellow,
+  [LABEL_OPAQUE_PURPLE]: OpaquePurple,
+  [LABEL_SUNSET_ORANGE]: SunsetOrange,
+  [LABEL_TOMATO_RED]: TomatoRed
+};
+
+/* Also export as individual images */
+export {
+  Rusty,
+  ArmyGreen,
+  ElectricBlue,
+  LemonYellow,
+  OpaquePurple,
+  SunsetOrange,
+  TomatoRed
+};

package/dist/assets/autospuiten/labels.d.ts

@@ -0,0 +1,7 @@
+export const LABEL_RUSTY: "rusty";
+export const LABEL_ARMY_GREEN: "army-green";
+export const LABEL_ELECTRIC_BLUE: "electric-blue";
+export const LABEL_LEMON_YELLOW: "lemon-yellow";
+export const LABEL_OPAQUE_PURPLE: "opaque-purple";
+export const LABEL_SUNSET_ORANGE: "sunset-orange";
+export const LABEL_TOMATO_RED: "tomato-red";

package/dist/assets/autospuiten/labels.js

@@ -0,0 +1,7 @@
+export const LABEL_RUSTY = 'rusty';
+export const LABEL_ARMY_GREEN = 'army-green';
+export const LABEL_ELECTRIC_BLUE = 'electric-blue';
+export const LABEL_LEMON_YELLOW = 'lemon-yellow';
+export const LABEL_OPAQUE_PURPLE = 'opaque-purple';
+export const LABEL_SUNSET_ORANGE = 'sunset-orange';
+export const LABEL_TOMATO_RED = 'tomato-red';

package/dist/widgets/presenter/Presenter.state.svelte.d.ts

@@ -27,17 +27,15 @@ export class PresenterState {
     currentSlideName: string;
     /** @type {string} */
     pendingSlideName: string;
+    /** @type {boolean} */
+    configured: boolean;
     /**
      * Configure the presentation
      *
      * @param {object} _
-     * @param {boolean} [_.autostart=false] - Whether to start automatically
-     * @param {string} [_.startSlide] - Name of the slide to start with
      * @param {Slide[]} [_.slides] - Array of slides for the presentation
      */
-    configure({ slides, autostart, startSlide }: {
-        autostart?: boolean;
-        startSlide?: string;
+    configure({ slides }: {
         slides?: Slide[];
     }): void;
     /**
@@ -52,11 +50,15 @@ export class PresenterState {
      * @param {string} name - Name of the slide to transition to
      */
     gotoSlide(name: string): Promise<void>;
+    /**
+     * Returns a simplified presenter reference with essential methods
+     * for slide components to use
+     *
+     * @returns {PresenterRef} A reference object with presenter methods
+     */
+    getPresenterRef(): PresenterRef;
     #private;
 }
-export const createOrGetState: (instanceKey?: string | Symbol) => PresenterState;
-export const createState: (instanceKey?: string | Symbol) => PresenterState;
-export const getState: (instanceKey?: string | Symbol) => PresenterState;
 export type Slide = import("./typedef").Slide;
 export type Transition = import("./typedef").Transition;
 export type Layer = import("./typedef").Layer;

package/dist/widgets/presenter/Presenter.state.svelte.js

@@ -1,15 +1,11 @@
 import { tick } from 'svelte';
 
-import { defineStateContext } from '../../util/svelte/state-context/index.js';
-
 import { findFirst } from '../../util/array/index.js';
 
 import { untrack } from 'svelte';
 
 import { HkPromise } from '../../classes/promise/index.js';
 
-/* ----------------------------------------------------------------- typedefs */
-
 /**
  * @typedef {import("./typedef").Slide} Slide
  */
@@ -34,16 +30,12 @@ import { HkPromise } from '../../classes/promise/index.js';
  * @property {() => string} getCurrentSlideName - Get the current slide name
  */
 
-/* -------------------------------------------------------------- Constants */
-
 const Z_BACK = 0;
 const Z_FRONT = 10;
 
 const LABEL_A = 'A';
 const LABEL_B = 'B';
 
-/* ------------------------------------------------------- Define state class */
-
 export class PresenterState {
   /** @type {Slide[]} */
   slides = $state.raw([]);
@@ -99,11 +91,14 @@ export class PresenterState {
   /** @type {string} */
   pendingSlideName;
 
+  /** @type {boolean} */
+  configured = false;
+
   /**
    * Initialize the presenter state and set up reactivity
    */
   constructor() {
-    this.#setupStageTransitions();
+    // this.#setupStageTransitions();
 
     let timeout;
 
@@ -130,21 +125,21 @@ export class PresenterState {
    * Set up reactivity for stage transitions between the before/after states
    * This handles the animation timing for both layers
    */
-  #setupStageTransitions() {
-    // Handle layer A stage transitions
-    $effect(() => {
-      if (this.layerA.stageBeforeIn || this.layerA.stageBeforeOut) {
-        this.layerA = this.#processStageTransition(this.layerA);
-      }
-    });
+  // #setupStageTransitions() {
+  //   // Handle layer A stage transitions
+  //   $effect(() => {
+  //     if (this.layerA.stageBeforeIn || this.layerA.stageBeforeOut) {
+  //       this.layerA = this.#processStageTransition(this.layerA);
+  //     }
+  //   });
 
-    // Handle layer B stage transitions
-    $effect(() => {
-      if (this.layerB.stageBeforeIn || this.layerB.stageBeforeOut) {
-        this.layerB = this.#processStageTransition(this.layerB);
-      }
-    });
-  }
+  //   // Handle layer B stage transitions
+  //   $effect(() => {
+  //     if (this.layerB.stageBeforeIn || this.layerB.stageBeforeOut) {
+  //       this.layerB = this.#processStageTransition(this.layerB);
+  //     }
+  //   });
+  // }
 
   /**
    * Process a single stage transition for a layer
@@ -166,40 +161,22 @@ export class PresenterState {
     return updatedLayer;
   }
 
-  // /**
-  //  * Set up reactivity for tracking transition promises
-  //  * This handles the completion of animations and layer swapping
-  //  */
-  // #setupTransitionTracking() {
-  //   $effect(() => {
-  //     const promises = this.transitionPromises;
-
-  //     if (promises.length > 0) {
-  //       const nextSlide = this.#getSlide(this.nextLayerLabel);
-
-  //       if (!nextSlide) {
-  //         return;
-  //       }
-
-  //       untrack(() => {
-  //         this.#executeTransition(promises);
-  //       });
-  //     }
-  //   });
-  // }
-
   /**
-   * Execute the transition by waiting for all promises and then
-   * completing the transition
+   * Waiting for all transition timing promises to finish,
+   * this should be the same amount of time as it takes for the real
+   * transitions to finish
    *
-   * @param {HkPromise[]} promises - Array of transition promises to wait for
+   * @param {HkPromise[]} promises
+   *   Array of transition promises to wait for
    */
-  async #executeTransition(promises) {
+  async #waitForTransitionPromises(promises) {
     try {
-      // console.debug('executeTransition');
+      // console.debug('waitForTransitionPromises', promises);
 
       await Promise.allSettled(promises);
 
+      // console.debug('waitForTransitionPromises:done', promises);
+
       untrack(() => {
         this.#completeTransition();
       });
@@ -250,25 +227,15 @@ export class PresenterState {
    * Configure the presentation
    *
    * @param {object} _
-   * @param {boolean} [_.autostart=false] - Whether to start automatically
-   * @param {string} [_.startSlide] - Name of the slide to start with
    * @param {Slide[]} [_.slides] - Array of slides for the presentation
    */
-  configure({ slides, autostart = true, startSlide }) {
-    untrack(() => {
-      if (slides) {
-        // Only update slides if provided
-        this.slides = slides;
-      }
+  configure({ slides }) {
+    this.configured = true;
 
-      if ((autostart || startSlide) && this.slides?.length) {
-        if (startSlide) {
-          this.gotoSlide(startSlide);
-        } else {
-          this.#gotoSlide(this.slides[0]);
-        }
-      }
-    });
+    if (slides) {
+      // Only update slides if provided
+      this.slides = slides;
+    }
   }
 
   /**
@@ -286,6 +253,8 @@ export class PresenterState {
    * @param {string} name - Name of the slide to transition to
    */
   async gotoSlide(name) {
+    // throw new Error('gotoSlide');
+
     untrack(() => {
       const slide = findFirst(this.slides, { name });
 
@@ -304,6 +273,10 @@ export class PresenterState {
    * @param {Slide} slide - The slide to transition to
    */
   async #gotoSlide(slide) {
+    if (!this.configured) {
+      throw new Error('Not configured yet');
+    }
+
     if (this.busy) {
       this.pendingSlideName = slide.name;
       return;
@@ -312,7 +285,7 @@ export class PresenterState {
     this.slideLoadingPromise = null;
 
     // Get a presenter reference to pass to the slide
-    const presenterRef = this.#getPresenterRef();
+    const presenterRef = this.getPresenterRef();
 
     // Create a copy of the slide to avoid mutating the original
     const slideWithProps = {
@@ -356,7 +329,7 @@ export class PresenterState {
     const currentSlide = this.#getSlide(this.currentLayerLabel);
     const nextSlide = this.#getSlide(this.nextLayerLabel);
 
-    // console.debug('Checkpoint 4');
+    // console.debug('Checkpoint 4', currentSlide, nextSlide);
 
     // Make next layer visible, move to front, and prepare for
     // transition in
@@ -378,10 +351,42 @@ export class PresenterState {
 
     // console.debug('Checkpoint 5');
 
+    // Wait briefly to ensure the stageBeforeIn/stageBeforeOut states are rendered
+    await tick();
+
+    // Now manually process the transitions for both layers
+    const layerA = this.layerA;
+    const layerB = this.layerB;
+
+    // Process stageBeforeIn transition for both layers
+    if (layerA.stageBeforeIn) {
+      this.layerA = this.#processStageTransition(layerA);
+    }
+
+    if (layerB.stageBeforeIn) {
+      this.layerB = this.#processStageTransition(layerB);
+    }
+
+    // Wait for another tick to ensure the stageIn states are rendered
+    await tick();
+
+    // Process stageBeforeOut transition for both layers
+    if (layerA.stageBeforeOut) {
+      this.layerA = this.#processStageTransition(layerA);
+    }
+
+    if (layerB.stageBeforeOut) {
+      this.layerB = this.#processStageTransition(layerB);
+    }
+
+    // console.debug('Checkpoint 7');
+
     // Start transitions
-    this.#applyTransitions();
+    this.#createTransitionPromises();
 
-    await this.#executeTransition(this.transitionPromises);
+    // console.debug('Checkpoint 8');
+
+    await this.#waitForTransitionPromises(this.transitionPromises);
 
     // Check if there's a pending slide transition
     if (this.pendingSlideName) {
@@ -398,9 +403,10 @@ export class PresenterState {
   }
 
   /**
-   * Apply transitions between current and next slide
+   * Create transition promises that can be used to determine the timing
+   * of the transitions between current and next slide
    */
-  #applyTransitions() {
+  #createTransitionPromises() {
     // Cancel existing transitions
     let transitionPromises = this.transitionPromises;
 
@@ -417,9 +423,11 @@ export class PresenterState {
     // Apply transitions `out` from currentslide
     const transitionsOut = currentSlide?.outro;
 
+    // console.log('transitionsOut', transitionsOut);
+
     if (transitionsOut) {
       for (const transition of transitionsOut) {
-        const promise = this.#applyTransition(transition);
+        const promise = this.#createTransitionPromise(transition);
         transitionPromises.push(promise);
       }
     }
@@ -427,9 +435,11 @@ export class PresenterState {
     // Apply transitions `in` from next slide
     const transitionsIn = nextSlide?.intro;
 
+    // console.log('transitionsIn', transitionsIn);
+
     if (transitionsIn) {
       for (const transition of transitionsIn) {
-        const promise = this.#applyTransition(transition);
+        const promise = this.#createTransitionPromise(transition);
         transitionPromises.push(promise);
       }
     }
@@ -438,12 +448,16 @@ export class PresenterState {
   }
 
   /**
-   * Apply a transition and return a transition promise
+   * Create a transition promise for the specified transition
+   *
    *
    * @param {Transition} transition - The transition to apply
-   * @returns {HkPromise} Promise that resolves when transition completes
+   *
+   * @returns {HkPromise}
+   *   Promise that resolves after the same amount of time that it
+   *   takes for the transition to finish
    */
-  #applyTransition(transition) {
+  #createTransitionPromise(transition) {
     const delay = (transition.delay ?? 0) + (transition.duration ?? 0);
 
     if (0 === delay) {
@@ -527,7 +541,7 @@ export class PresenterState {
    *
    * @returns {PresenterRef} A reference object with presenter methods
    */
-  #getPresenterRef() {
+  getPresenterRef() {
     return {
       gotoSlide: (name) => this.gotoSlide(name),
       getCurrentSlideName: () => this.currentSlideName
@@ -564,8 +578,3 @@ export class PresenterState {
     };
   }
 }
-
-/* -------------------------------------- Export create & get state functions */
-
-export const [createOrGetState, createState, getState] =
-  defineStateContext(PresenterState);

package/dist/widgets/presenter/Presenter.svelte

@@ -1,13 +1,10 @@
 <script>
-  /* ---------------------------------------------------------------- Imports */
+  import { onMount } from 'svelte';
 
   import { GridLayers } from '../../components/layout/index.js';
 
   import { PresenterState } from './Presenter.state.svelte.js';
-  import { getPresenterState } from './index.js';
-  import { cssBefore, cssDuring } from './util.js';
-
-  /* ------------------------------------------------------------------ Props */
+  import { cssBefore, cssDuring, waitForRender } from './util.js';
 
   /**
    * @typedef {import("./typedef.js").Slide} Slide
@@ -21,10 +18,7 @@
    * @type {{
    *   classes?: string,
    *   slides?: import("./typedef.js").Slide[],
-   *   autostart?: boolean,
-   *   startSlide?: string,
-   *   instanceKey?: Symbol | string,
-   *   presenter?: import('./Presenter.state.svelte.js').PresenterState,
+   *   presenterRef?: import('./Presenter.state.svelte.js').PresenterRef,
    *   layoutSnippet: import('svelte').Snippet<[Slide|null, Layer]>,
    *   loadingSnippet?: import('svelte').Snippet,
    * }}
@@ -35,32 +29,23 @@
 
     // > Functional
     slides,
-    autostart = false,
-    startSlide,
-
-    // State
-    instanceKey,
-
-    presenter = $bindable(new PresenterState()),
+    presenterRef = $bindable(),
 
     // Snippets
     layoutSnippet,
     loadingSnippet
   } = $props();
 
-  // > Create presenter state object and register using setContext
-
-  // FIXME: Using getPresenterState to force creation of presenter outside
-  //        the component. Otherwise transitions doe not work somehow..
-  presenter = getPresenterState(instanceKey);
-
-  // > State
+  const presenter = new PresenterState();
 
-  $effect.pre(() => {
+  onMount(() => {
     // Configure presenter with slides if provided
-    presenter.configure({ slides, autostart, startSlide });
+    presenter.configure({ slides });
+    presenterRef = presenter.getPresenterRef();
   });
 
+  // > State
+
   let classesA = $state('');
   let classesB = $state('');
 
@@ -75,11 +60,18 @@
     const { stageBeforeIn, stageIn, stageBeforeOut, stageOut, transitions } =
       presenter.layerA;
 
-    if (transitions && transitions.length) {
+    if (transitions?.length) {
+      // console.debug('layerA:transitions', transitions, {
+      //   stageBeforeIn,
+      //   stageIn,
+      //   stageBeforeOut,
+      //   stageOut
+      // });
+
       if (stageBeforeIn || stageBeforeOut) {
         ({ style: stylesA, classes: classesA } = cssBefore(transitions));
       } else if (stageIn || stageOut) {
-        setTimeout(() => {
+        waitForRender(() => {
           ({ style: stylesA, classes: classesA } = cssDuring(transitions));
         });
       }
@@ -95,11 +87,18 @@
     const { stageBeforeIn, stageIn, stageBeforeOut, stageOut, transitions } =
       presenter.layerB;
 
-    if (transitions) {
+    if (transitions?.length) {
+      // console.debug('layerB:transitions', transitions, {
+      //   stageBeforeIn,
+      //   stageIn,
+      //   stageBeforeOut,
+      //   stageOut
+      // });
+
       if (stageBeforeIn || stageBeforeOut) {
         ({ style: stylesB, classes: classesB } = cssBefore(transitions));
       } else if (stageIn || stageOut) {
-        setTimeout(() => {
+        waitForRender(() => {
           ({ style: stylesB, classes: classesB } = cssDuring(transitions));
         });
       }

package/dist/widgets/presenter/Presenter.svelte.d.ts

@@ -2,10 +2,7 @@ export default Presenter;
 declare const Presenter: import("svelte").Component<{
     classes?: string;
     slides?: import("./typedef.js").Slide[];
-    autostart?: boolean;
-    startSlide?: string;
-    instanceKey?: Symbol | string;
-    presenter?: import("./Presenter.state.svelte.js").PresenterState;
+    presenterRef?: import("./Presenter.state.svelte.js").PresenterRef;
     layoutSnippet: import("svelte").Snippet<[import("./typedef.js").Slide | null, import("./typedef.js").Layer]>;
     loadingSnippet?: import("svelte").Snippet;
-}, {}, "presenter">;
+}, {}, "presenterRef">;

package/dist/widgets/presenter/index.d.ts

@@ -1,6 +1,6 @@
 export { default as Presenter } from "./Presenter.svelte";
 export { default as ImageSlide } from "./ImageSlide.svelte";
+export { PresenterState } from "./Presenter.state.svelte.js";
 export * from "./typedef.js";
 export * from "./constants.js";
 export * from "./util.js";
-export { PresenterState, createOrGetState as createOrGetPresenterState, createState as createPresenterState, getState as getPresenterState } from "./Presenter.state.svelte.js";

package/dist/widgets/presenter/index.js

@@ -1,12 +1,7 @@
 export { default as Presenter } from './Presenter.svelte';
 export { default as ImageSlide } from './ImageSlide.svelte';
 
-export {
-  PresenterState,
-  createOrGetState as createOrGetPresenterState,
-  createState as createPresenterState,
-  getState as getPresenterState
-} from './Presenter.state.svelte.js';
+export { PresenterState } from './Presenter.state.svelte.js';
 
 export * from './typedef.js';
 export * from './constants.js';

package/dist/widgets/presenter/util.d.ts

@@ -1,8 +1,15 @@
 /**
  * @typedef {import("./typedef").Transition} Transition
  */
-/** ----------------------------------------------------------------- Exports */
-/** ----------------------------------- Generate CSS for lists of transitions */
+/**
+ * Ensures DOM is updated by Svelte and then painted by the browser
+ * before executing the callback function.
+ *
+ * @param {Function} callback - Function to execute after DOM update and paint
+ * @returns {Promise<void>} - Promise that resolves after the callback is executed
+ */
+export function waitForRender(callback: Function): Promise<void>;
+/** === Generate CSS for lists of transitions */
 /**
  * Generates style and class names to be used before the transitions
  * become active
@@ -26,7 +33,7 @@ export function cssDuring(transitions: Transition[]): {
     style: string;
     classes: string;
 };
-/** ------------------------------------- Generate CSS for single transitions */
+/** === Generate CSS for single transitions */
 /**
  * Generates style and class names for specified transition for
  * the stage 'stageBeforeIn'

package/dist/widgets/presenter/util.js

@@ -1,3 +1,5 @@
+import { tick } from 'svelte';
+
 import * as expect from '../../util/expect/index.js';
 
 import { pushNotEmpty } from '../../util/array/index.js';
@@ -8,9 +10,27 @@ import { TRANSITION_CSS, FADE_IN, FADE_OUT } from './constants.js';
  * @typedef {import("./typedef").Transition} Transition
  */
 
-/** ----------------------------------------------------------------- Exports */
+/**
+ * Ensures DOM is updated by Svelte and then painted by the browser
+ * before executing the callback function.
+ *
+ * @param {Function} callback - Function to execute after DOM update and paint
+ * @returns {Promise<void>} - Promise that resolves after the callback is executed
+ */
+export function waitForRender(callback) {
+  return tick().then(() => {
+    return new Promise((resolve) => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          callback();
+          resolve();
+        });
+      });
+    });
+  });
+}
 
-/** ----------------------------------- Generate CSS for lists of transitions */
+/** === Generate CSS for lists of transitions */
 
 /**
  * Generates style and class names to be used before the transitions
@@ -79,7 +99,7 @@ export function cssDuring(transitions) {
   return { style, classes: classesArr.join() };
 }
 
-/** ------------------------------------- Generate CSS for single transitions */
+/** === Generate CSS for single transitions */
 
 /**
  * Generates style and class names for specified transition for

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.1.28",
+	"version": "0.1.30",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"