@hkdigital/lib-sveltekit 0.1.23 → 0.1.24

package/dist/widgets/image-box/ImageBox.svelte

@@ -17,7 +17,8 @@
 	 *   imageMeta?: import('../../config/typedef.js').ImageMeta | import('../../config/typedef.js').ImageMeta[],
 	 *   imageLoader?: import('../../classes/svelte/image/index.js').ImageLoader,
 	 *   alt?: string,
-	 *   onProgress?: (progress: import('../../classes/svelte/network-loader/typedef.js').LoadingProgress) => void,
+	 *   id?: string|Symbol
+	 *   onProgress?: (progress: import('../../classes/svelte/network-loader/typedef.js').LoadingProgress, id: string|Symbol) => void,
 	 *   [attr: string]: any
 	 * }}
 	 */
@@ -42,6 +43,9 @@
 		// Accessibility
 		alt = '',
 
+		// Identification
+		id = Symbol('ImageBox'),
+
 		// Events
 		onProgress,
 
@@ -87,11 +91,11 @@
 
 		// Report progress from variants loader
 		if (variantsLoader) {
-			onProgress(variantsLoader.progress);
+			onProgress(variantsLoader.progress, id);
 		}
 		// Report progress from single image loader
 		else if (imageLoader_) {
-			onProgress(imageLoader_.progress);
+			onProgress(imageLoader_.progress, id);
 		}
 	});
 

package/dist/widgets/image-box/ImageBox.svelte.d.ts

@@ -13,5 +13,6 @@ declare const ImageBox: import("svelte").Component<{
     imageMeta?: import("../../config/typedef.js").ImageMeta | import("../../config/typedef.js").ImageMeta[];
     imageLoader?: import("../../classes/svelte/image/index.js").ImageLoader;
     alt?: string;
-    onProgress?: (progress: import("../../classes/svelte/network-loader/typedef.js").LoadingProgress) => void;
+    id?: string | Symbol;
+    onProgress?: (progress: import("../../classes/svelte/network-loader/typedef.js").LoadingProgress, id: string | Symbol) => void;
 }, {}, "">;

package/dist/widgets/presenter/(broken) Presenter.state.svelte.js__

@@ -0,0 +1,613 @@
+import { defineStateContext } from '$lib/util/svelte/state-context/index.js';
+
+import { findFirst } from '$lib/util/array/index.js';
+
+import { untrack } from 'svelte';
+
+import { HkPromise } from '$lib/classes/promise/index.js';
+
+/* ----------------------------------------------------------------- typedefs */
+
+/**
+ * @typedef {import("./typedef").Slide} Slide
+ */
+
+/**
+ * @typedef {import("./typedef").Transition} Transition
+ */
+
+/**
+ * @typedef {import("./typedef").Layer} Layer
+ */
+
+/**
+ * @typedef {Object} LoadController
+ * @property {() => void} loaded - Function to call when loading is complete
+ * @property {() => void} cancel - Function to return to the previous slide
+ */
+
+/**
+ * @typedef {Object} PresenterRef
+ * @property {(name: string) => void} gotoSlide - Navigate to a slide by name
+ * @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([]);
+
+  /** @type {Layer} */
+  layerA = $state.raw({ z: Z_BACK, visible: false, stageIdle: true });
+
+  /** @type {Layer} */
+  layerB = $state.raw({ z: Z_FRONT, visible: false, stageIdle: true });
+
+  /** @type {Slide|null} */
+  slideA = $state.raw(null);
+
+  /** @type {Slide|null} */
+  slideB = $state.raw(null);
+
+  /** @type {string} */
+  currentLayerLabel = $state(LABEL_B);
+
+  /** @type {string} */
+  nextLayerLabel = $state(LABEL_A);
+
+  /** @type {HkPromise[]} */
+  transitionPromises = $state.raw([]);
+
+  /** @type {boolean} */
+  isSlideLoading = $state(false);
+
+  /** @type {boolean} */
+  controllerRequested = $state(false);
+
+  /** @type {number} Loading timeout in milliseconds (0 = disabled) */
+  loadingTimeout = $state(1000);
+
+  /** @type {boolean} */
+  busy = $derived.by(() => {
+    const { layerA, layerB } = this;
+
+    const layerAStable =
+      layerA.stageShow || layerA.stageAfter || layerA.stageIdle;
+
+    const layerBStable =
+      layerB.stageShow || layerB.stageAfter || layerB.stageIdle;
+
+    return !(layerAStable && layerBStable);
+  });
+
+  /** @type {string} */
+  currentSlideName = $derived.by(() => {
+    const currentSlide = this.#getSlide(this.currentLayerLabel);
+    return currentSlide?.name || '';
+  });
+
+  /**
+   * Initialize the presenter state and set up reactivity
+   */
+  constructor() {
+    this.#setupStageTransitions();
+    this.#setupTransitionTracking();
+    this.#setupLoadingTransitions();
+  }
+
+  /**
+   * Returns a simplified presenter reference with essential methods
+   * for slide components to use
+   *
+   * @returns {PresenterRef} A reference object with presenter methods
+   */
+  getPresenterRef() {
+    return {
+      gotoSlide: (name) => this.gotoSlide(name),
+      getCurrentSlideName: () => this.currentSlideName
+    };
+  }
+
+  /**
+   * 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);
+      }
+    });
+
+    // 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
+   *
+   * @param {Layer} layer - The layer to process
+   * @returns {Layer} - The updated layer with new stage
+   */
+  #processStageTransition(layer) {
+    const updatedLayer = { ...layer };
+
+    if (updatedLayer.stageBeforeIn) {
+      delete updatedLayer.stageBeforeIn;
+      updatedLayer.stageIn = true;
+    } else if (updatedLayer.stageBeforeOut) {
+      delete updatedLayer.stageBeforeOut;
+      updatedLayer.stageOut = true;
+    }
+
+    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);
+        });
+      }
+    });
+  }
+
+  /**
+   * Set up reactivity to start transitions after component loading is complete
+   */
+  #setupLoadingTransitions() {
+    $effect(() => {
+      // Only start transitions when loading is complete and we have a next slide
+      if (!this.isSlideLoading && this.#getSlide(this.nextLayerLabel)) {
+        const currentSlide = this.#getSlide(this.currentLayerLabel);
+        const nextSlide = this.#getSlide(this.nextLayerLabel);
+
+        // Prepare the next layer for its entrance transition
+        this.#updateLayer(this.nextLayerLabel, {
+          z: Z_FRONT,
+          visible: true,
+          stageBeforeIn: true,
+          transitions: nextSlide?.intro ?? []
+        });
+
+        // Prepare the current layer for its exit transition
+        this.#updateLayer(this.currentLayerLabel, {
+          z: Z_BACK,
+          visible: true,
+          stageBeforeOut: true,
+          transitions: currentSlide?.outro ?? []
+        });
+
+        // Start transitions
+        this.#applyTransitions();
+      }
+    });
+  }
+
+  /**
+   * Execute the transition by waiting for all promises and then
+   * completing the transition
+   *
+   * @param {HkPromise[]} promises - Array of transition promises to wait for
+   */
+  async #executeTransition(promises) {
+    try {
+      await Promise.allSettled(promises);
+
+      untrack(() => {
+        this.#completeTransition();
+      });
+    } catch (error) {
+      console.log('transition promises cancelled', error);
+    }
+  }
+
+  /**
+   * Complete the transition by updating layers and swapping them
+   */
+  #completeTransition() {
+    // Hide current layer and set stage to AFTER
+    this.#updateLayer(this.currentLayerLabel, {
+      z: Z_BACK,
+      visible: false,
+      stageAfter: true
+    });
+
+    // Set next layer stage to SHOW
+    this.#updateLayer(this.nextLayerLabel, {
+      z: Z_FRONT,
+      visible: true,
+      stageShow: true
+    });
+
+    // Remove slide from current layer
+    this.#updateSlide(this.currentLayerLabel, null);
+
+    // Swap current and next layer labels
+    this.#swapLayers();
+  }
+
+  // /**
+  //  * Complete the transition by updating layers and swapping them
+  //  * Ensures proper cleanup of all stage states
+  //  */
+  // #completeTransition() {
+  //   // Update current layer: hide it and set to AFTER state
+  //   this.#updateLayer(this.currentLayerLabel, {
+  //     z: Z_BACK,
+  //     visible: false,
+  //     stageIdle: false,
+  //     stageBeforeIn: false,
+  //     stageIn: false,
+  //     stageBeforeOut: false,
+  //     stageOut: false,
+  //     stageShow: false,
+  //     stageAfter: true
+  //   });
+
+  //   // Update next layer: show it and set to SHOW state
+  //   this.#updateLayer(this.nextLayerLabel, {
+  //     z: Z_FRONT,
+  //     visible: true,
+  //     stageIdle: false,
+  //     stageBeforeIn: false,
+  //     stageIn: false,
+  //     stageBeforeOut: false,
+  //     stageOut: false,
+  //     stageAfter: false,
+  //     stageShow: true
+  //   });
+
+  //   // Remove slide from current layer
+  //   this.#updateSlide(this.currentLayerLabel, null);
+
+  //   // Swap current and next layer labels
+  //   this.#swapLayers();
+
+  //   // Reset layer states after swap - crucial for next transition cycle
+  //   // Reset former next layer (now current) to idle after showing
+  //   setTimeout(() => {
+  //     this.#updateLayer(this.currentLayerLabel, {
+  //       stageShow: false,
+  //       stageIdle: true,
+  //       transitions: [] // Clear any lingering transitions
+  //     });
+
+  //     // Reset former current layer (now next) to idle after being hidden
+  //     this.#updateLayer(this.nextLayerLabel, {
+  //       stageAfter: false,
+  //       stageIdle: true,
+  //       transitions: [] // Clear any lingering transitions
+  //     });
+  //   }, 50); // Small delay to ensure DOM updates have completed
+  // }
+
+  /**
+   * Swap the current and next layer labels
+   */
+  #swapLayers() {
+    if (this.currentLayerLabel === LABEL_A) {
+      this.currentLayerLabel = LABEL_B;
+      this.nextLayerLabel = LABEL_A;
+    } else {
+      this.currentLayerLabel = LABEL_A;
+      this.nextLayerLabel = LABEL_B;
+    }
+  }
+
+  /**
+   * Mark the slide as loaded, which triggers transitions to begin
+   */
+  finishSlideLoading() {
+    this.isSlideLoading = false;
+  }
+
+  /**
+   * Returns a controller object for managing manual loading
+   * Components can use this to signal when they're done loading
+   * or to cancel and go back to the previous slide
+   *
+   * @returns {LoadController} Object with loaded() and cancel() methods
+   */
+  getLoadingController() {
+    // Mark that the controller was requested
+    this.controllerRequested = true;
+
+    console.debug('controllerRequested');
+
+    return {
+      /**
+       * Call when component has finished loading
+       */
+      loaded: () => {
+        this.finishSlideLoading();
+        console.debug('finishSlideLoading');
+      },
+
+      /**
+       * Call to cancel loading and return to previous slide
+       */
+      cancel: () => {
+        // Return to previous slide if available
+        const currentSlideName = this.currentSlideName;
+        if (currentSlideName) {
+          this.gotoSlide(currentSlideName);
+        } else if (this.slides.length > 0) {
+          // Fallback to first slide if no current slide
+          this.gotoSlide(this.slides[0].name);
+        }
+      }
+    };
+  }
+
+  /**
+   * 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;
+      }
+
+      if ((autostart || startSlide) && this.slides?.length) {
+        if (startSlide) {
+          this.gotoSlide(startSlide);
+        } else {
+          this.#gotoSlide(this.slides[0]);
+        }
+      }
+    });
+  }
+
+  /**
+   * Configure the presentation slides
+   *
+   * @param {Slide[]} slides - Array of slides for the presentation
+   */
+  configureSlides(slides) {
+    this.slides = slides ?? [];
+  }
+
+  /**
+   * Transition to another slide by name
+   *
+   * @param {string} name - Name of the slide to transition to
+   */
+  async gotoSlide(name) {
+    untrack(() => {
+      const slide = findFirst(this.slides, { name });
+
+      if (!slide) {
+        console.log('available slides', this.slides);
+        throw new Error(`Slide [${name}] has not been defined`);
+      }
+
+      this.#gotoSlide(slide);
+    });
+  }
+
+  /**
+   * Internal method to transition to another slide
+   *
+   * @param {Slide} slide - The slide to transition to
+   */
+  async #gotoSlide(slide) {
+    if (this.busy) {
+      throw new Error('Transition in progress');
+    }
+
+    // Reset controller requested flag
+    this.controllerRequested = false;
+
+    // Set loading state to true before starting transition
+    this.isSlideLoading = true;
+
+    // Add controller function to slide props if it has a component
+    if (slide.data?.component) {
+      // Get a presenter reference to pass to the slide
+      const presenterRef = this.getPresenterRef();
+
+      // Create a copy of the slide to avoid mutating the original
+      const slideWithExtras = {
+        ...slide,
+        data: {
+          ...slide.data,
+          props: {
+            ...(slide.data.props || {}),
+            getLoadingController: () => this.getLoadingController(),
+            presenter: presenterRef // Add presenter reference to props
+          }
+        }
+      };
+
+      // Add next slide to next layer with controller and presenter included
+      this.#updateSlide(this.nextLayerLabel, slideWithExtras);
+
+      // If a timeout is configured, automatically finish loading after delay
+      if (this.loadingTimeout > 0) {
+        setTimeout(() => {
+          // Only auto-finish if the controller wasn't requested
+          if (!this.controllerRequested && this.isSlideLoading) {
+            // console.debug(
+            //   `Slide '${slide.name}' didn't request loading controller, auto-finishing.`
+            // );
+            this.finishSlideLoading();
+          }
+        }, this.loadingTimeout);
+      }
+    } else {
+      // No component, so just use the slide as is
+      this.#updateSlide(this.nextLayerLabel, slide);
+      // No component to load, so finish loading immediately
+      this.finishSlideLoading();
+    }
+
+    // Make next layer visible, move to front
+    this.#updateLayer(this.nextLayerLabel, {
+      z: Z_FRONT,
+      visible: true
+    });
+  }
+
+  /**
+   * Apply transitions between current and next slide
+   */
+  #applyTransitions() {
+    // Cancel existing transitions
+    let transitionPromises = this.transitionPromises;
+
+    for (const current of transitionPromises) {
+      current.tryCancel();
+    }
+
+    // Start new transitions
+    transitionPromises = [];
+
+    const currentSlide = this.#getSlide(this.currentLayerLabel);
+    const nextSlide = this.#getSlide(this.nextLayerLabel);
+
+    // Apply transitions `out` from currentslide
+    const transitionsOut = currentSlide?.outro;
+
+    if (transitionsOut) {
+      for (const transition of transitionsOut) {
+        const promise = this.#applyTransition(transition);
+        transitionPromises.push(promise);
+      }
+    }
+
+    // Apply transitions `in` from next slide
+    const transitionsIn = nextSlide?.intro;
+
+    if (transitionsIn) {
+      for (const transition of transitionsIn) {
+        const promise = this.#applyTransition(transition);
+        transitionPromises.push(promise);
+      }
+    }
+
+    this.transitionPromises = transitionPromises;
+  }
+
+  /**
+   * Apply a transition and return a transition promise
+   *
+   * @param {Transition} transition - The transition to apply
+   * @returns {HkPromise} Promise that resolves when transition completes
+   */
+  #applyTransition(transition) {
+    const delay = (transition.delay ?? 0) + (transition.duration ?? 0);
+
+    if (0 === delay) {
+      const promise = new HkPromise(() => {});
+      promise.resolve(true);
+      return promise;
+    }
+
+    let promise = new HkPromise((/** @type {function} */ resolve) => {
+      if (delay) {
+        setTimeout(() => {
+          resolve(true);
+        }, delay);
+      }
+    });
+
+    return promise;
+  }
+
+  /**
+   * Get slide by layer label
+   *
+   * @param {string} label - Layer label (A or B)
+   * @returns {Slide|null} The slide for the specified layer or null
+   */
+  #getSlide(label) {
+    if (label === LABEL_A) {
+      return this.slideA;
+    }
+
+    if (label === LABEL_B) {
+      return this.slideB;
+    }
+
+    return null;
+  }
+
+  /**
+   * Update layer by label
+   *
+   * @param {string} label - Layer label (A or B)
+   * @param {Layer} data - Layer data to update
+   */
+  #updateLayer(label, data) {
+    if (label === LABEL_A) {
+      this.layerA = data;
+      return;
+    }
+
+    if (label === LABEL_B) {
+      this.layerB = data;
+      return;
+    }
+
+    throw new Error(`Missing layer [${label}]`);
+  }
+
+  /**
+   * Update slide by label
+   *
+   * @param {string} label - Layer label (A or B)
+   * @param {Slide|null} data - Slide data to update or null to clear
+   */
+  #updateSlide(label, data) {
+    if (label === LABEL_A) {
+      this.slideA = data;
+      return;
+    }
+
+    if (label === LABEL_B) {
+      this.slideB = data;
+      return;
+    }
+
+    throw new Error(`Missing slide [${label}]`);
+  }
+}
+
+/* -------------------------------------- Export create & get state functions */
+
+export const [createOrGetState, createState, getState] =
+  defineStateContext(PresenterState);

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

@@ -15,35 +15,16 @@ export class PresenterState {
     nextLayerLabel: string;
     /** @type {HkPromise[]} */
     transitionPromises: HkPromise[];
+    /** @type {HkPromise} */
+    slideLoadingPromise: HkPromise;
     /** @type {boolean} */
     isSlideLoading: boolean;
     /** @type {boolean} */
-    controllerRequested: boolean;
-    /** @type {number} Loading timeout in milliseconds (0 = disabled) */
-    loadingTimeout: number;
+    loadingSpinner: boolean;
     /** @type {boolean} */
     busy: boolean;
     /** @type {string} */
     currentSlideName: string;
-    /**
-     * Returns a simplified presenter reference with essential methods
-     * for slide components to use
-     *
-     * @returns {PresenterRef} A reference object with presenter methods
-     */
-    getPresenterRef(): PresenterRef;
-    /**
-     * Mark the slide as loaded, which triggers transitions to begin
-     */
-    finishSlideLoading(): void;
-    /**
-     * Returns a controller object for managing manual loading
-     * Components can use this to signal when they're done loading
-     * or to cancel and go back to the previous slide
-     *
-     * @returns {LoadController} Object with loaded() and cancel() methods
-     */
-    getLoadingController(): LoadController;
     /**
      * Configure the presentation
      *

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

@@ -1,3 +1,5 @@
+import { tick } from 'svelte';
+
 import { defineStateContext } from '../../util/svelte/state-context/index.js';
 
 import { findFirst } from '../../util/array/index.js';
@@ -67,24 +69,25 @@ export class PresenterState {
   /** @type {HkPromise[]} */
   transitionPromises = $state.raw([]);
 
+  /** @type {HkPromise} */
+  slideLoadingPromise = null;
+
   /** @type {boolean} */
   isSlideLoading = $state(false);
 
   /** @type {boolean} */
-  controllerRequested = $state(false);
-
-  /** @type {number} Loading timeout in milliseconds (0 = disabled) */
-  loadingTimeout = $state(1000);
+  loadingSpinner = $state(false);
 
   /** @type {boolean} */
   busy = $derived.by(() => {
-    const { layerA, layerB } = this;
+    const { layerA, layerB, isSlideLoading } = this;
+
     const layerAStable =
       layerA.stageShow || layerA.stageAfter || layerA.stageIdle;
     const layerBStable =
       layerB.stageShow || layerB.stageAfter || layerB.stageIdle;
 
-    return !(layerAStable && layerBStable);
+    return !(layerAStable && layerBStable) || isSlideLoading;
   });
 
   /** @type {string} */
@@ -98,21 +101,26 @@ export class PresenterState {
    */
   constructor() {
     this.#setupStageTransitions();
-    this.#setupTransitionTracking();
-    this.#setupLoadingTransitions();
-  }
 
-  /**
-   * Returns a simplified presenter reference with essential methods
-   * for slide components to use
-   *
-   * @returns {PresenterRef} A reference object with presenter methods
-   */
-  getPresenterRef() {
-    return {
-      gotoSlide: (name) => this.gotoSlide(name),
-      getCurrentSlideName: () => this.currentSlideName
-    };
+    let timeout;
+
+    $effect((slideLoadingPromise) => {
+      if (this.isSlideLoading) {
+        // Enable spinner after a short delay
+        clearTimeout(timeout);
+        setTimeout(() => {
+          untrack(() => {
+            if (this.isSlideLoading) {
+              this.loadingSpinner = true;
+            } else {
+              this.loadingSpinner = false;
+            }
+          });
+        }, 500);
+      } else {
+        this.loadingSpinner = false;
+      }
+    });
   }
 
   /**
@@ -155,59 +163,27 @@ 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;
+  // /**
+  //  * 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 (promises.length > 0) {
+  //       const nextSlide = this.#getSlide(this.nextLayerLabel);
 
-        if (!nextSlide) {
-          return;
-        }
+  //       if (!nextSlide) {
+  //         return;
+  //       }
 
-        untrack(() => {
-          this.#executeTransition(promises);
-        });
-      }
-    });
-  }
-
-  /**
-   * Set up reactivity to start transitions after component loading is complete
-   */
-  #setupLoadingTransitions() {
-    $effect(() => {
-      // Only start transitions when loading is complete and we have a next slide
-      if (!this.isSlideLoading && this.#getSlide(this.nextLayerLabel)) {
-        const currentSlide = this.#getSlide(this.currentLayerLabel);
-        const nextSlide = this.#getSlide(this.nextLayerLabel);
-
-        // Prepare the next layer for its entrance transition
-        this.#updateLayer(this.nextLayerLabel, {
-          z: Z_FRONT,
-          visible: true,
-          stageBeforeIn: true,
-          transitions: nextSlide?.intro ?? []
-        });
-
-        // Prepare the current layer for its exit transition
-        this.#updateLayer(this.currentLayerLabel, {
-          z: Z_BACK,
-          visible: true,
-          stageBeforeOut: true,
-          transitions: currentSlide?.outro ?? []
-        });
-
-        // Start transitions
-        this.#applyTransitions();
-      }
-    });
-  }
+  //       untrack(() => {
+  //         this.#executeTransition(promises);
+  //       });
+  //     }
+  //   });
+  // }
 
   /**
    * Execute the transition by waiting for all promises and then
@@ -217,6 +193,8 @@ export class PresenterState {
    */
   async #executeTransition(promises) {
     try {
+      // console.debug('executeTransition');
+
       await Promise.allSettled(promises);
 
       untrack(() => {
@@ -265,48 +243,6 @@ export class PresenterState {
     }
   }
 
-  /**
-   * Mark the slide as loaded, which triggers transitions to begin
-   */
-  finishSlideLoading() {
-    this.isSlideLoading = false;
-  }
-
-  /**
-   * Returns a controller object for managing manual loading
-   * Components can use this to signal when they're done loading
-   * or to cancel and go back to the previous slide
-   *
-   * @returns {LoadController} Object with loaded() and cancel() methods
-   */
-  getLoadingController() {
-    // Mark that the controller was requested
-    this.controllerRequested = true;
-
-    return {
-      /**
-       * Call when component has finished loading
-       */
-      loaded: () => {
-        this.finishSlideLoading();
-      },
-
-      /**
-       * Call to cancel loading and return to previous slide
-       */
-      cancel: () => {
-        // Return to previous slide if available
-        const currentSlideName = this.currentSlideName;
-        if (currentSlideName) {
-          this.gotoSlide(currentSlideName);
-        } else if (this.slides.length > 0) {
-          // Fallback to first slide if no current slide
-          this.gotoSlide(this.slides[0].name);
-        }
-      }
-    };
-  }
-
   /**
    * Configure the presentation
    *
@@ -369,57 +305,79 @@ export class PresenterState {
       throw new Error('Transition in progress');
     }
 
-    // Reset controller requested flag
-    this.controllerRequested = false;
-
-    // Set loading state to true before starting transition
-    this.isSlideLoading = true;
-
-    // Add controller function to slide props if it has a component
-    if (slide.data?.component) {
-      // Get a presenter reference to pass to the slide
-      const presenterRef = this.getPresenterRef();
-
-      // Create a copy of the slide to avoid mutating the original
-      const slideWithExtras = {
-        ...slide,
-        data: {
-          ...slide.data,
-          props: {
-            ...(slide.data.props || {}),
-            getLoadingController: () => this.getLoadingController(),
-            presenter: presenterRef // Add presenter reference to props
-          }
+    this.slideLoadingPromise = null;
+
+    // Get a presenter reference to pass to the slide
+    const presenterRef = this.#getPresenterRef();
+
+    // Create a copy of the slide to avoid mutating the original
+    const slideWithProps = {
+      ...slide,
+      data: {
+        ...slide.data,
+        props: {
+          ...(slide.data.props || {}),
+          getLoadingController: () => {
+            this.isSlideLoading = true;
+            this.slideLoadingPromise = new HkPromise(() => {});
+
+            return this.#getLoadingController();
+            // this.slideLoadingPromise should be a HkPromise now
+            // console.log('slideLoadingPromise', this.slideLoadingPromise);
+          },
+          presenter: presenterRef // Add presenter reference to props
         }
-      };
+      }
+    };
 
-      // Add next slide to next layer with controller and presenter included
-      this.#updateSlide(this.nextLayerLabel, slideWithExtras);
+    // console.debug('Checkpoint 1');
 
-      // If a timeout is configured, automatically finish loading after delay
-      if (this.loadingTimeout > 0) {
-        setTimeout(() => {
-          // Only auto-finish if the controller wasn't requested
-          if (!this.controllerRequested && this.isSlideLoading) {
-            // console.debug(
-            //   `Slide '${slide.name}' didn't request loading controller, auto-finishing.`
-            // );
-            this.finishSlideLoading();
-          }
-        }, this.loadingTimeout);
-      }
-    } else {
-      // No component, so just use the slide as is
-      this.#updateSlide(this.nextLayerLabel, slide);
-      // No component to load, so finish loading immediately
-      this.finishSlideLoading();
+    // Add next slide to next layer
+    this.#updateSlide(this.nextLayerLabel, slideWithProps);
+
+    // console.debug('Checkpoint 2');
+
+    await tick();
+
+    // console.debug('Checkpoint 3');
+
+    if (this.slideLoadingPromise) {
+      // console.debug('Waiting for slide to load');
+      // @ts-ignore
+      await this.slideLoadingPromise;
+      this.isSlideLoading = false;
+      // console.debug('Done waiting for slide loading');
     }
 
-    // Make next layer visible, move to front
+    const currentSlide = this.#getSlide(this.currentLayerLabel);
+    const nextSlide = this.#getSlide(this.nextLayerLabel);
+
+    // console.debug('Checkpoint 4');
+
+    // Make next layer visible, move to front, and prepare for
+    // transition in
     this.#updateLayer(this.nextLayerLabel, {
       z: Z_FRONT,
-      visible: true
+      visible: true,
+      stageBeforeIn: true,
+      transitions: nextSlide?.intro ?? []
     });
+
+    // Move current layer to back, keep visible, and prepare for
+    // transition out
+    this.#updateLayer(this.currentLayerLabel, {
+      z: Z_BACK,
+      visible: true,
+      stageBeforeOut: true,
+      transitions: currentSlide?.outro ?? []
+    });
+
+    // console.debug('Checkpoint 5');
+
+    // Start transitions
+    this.#applyTransitions();
+
+    await this.#executeTransition(this.transitionPromises);
   }
 
   /**
@@ -545,6 +503,49 @@ export class PresenterState {
 
     throw new Error(`Missing slide [${label}]`);
   }
+
+  /**
+   * Returns a simplified presenter reference with essential methods
+   * for slide components to use
+   *
+   * @returns {PresenterRef} A reference object with presenter methods
+   */
+  #getPresenterRef() {
+    return {
+      gotoSlide: (name) => this.gotoSlide(name),
+      getCurrentSlideName: () => this.currentSlideName
+    };
+  }
+
+  /**
+   * Returns a controller object for managing manual loading
+   * Components can use this to signal when they're done loading
+   * or to cancel and go back to the previous slide
+   *
+   * @returns {LoadController}
+   *  Object with loaded() and cancel() methods
+   */
+  #getLoadingController() {
+    // console.debug('getLoadingController was called');
+
+    return {
+      /**
+       * Call when component has finished loading
+       */
+      loaded: () => {
+        // console.debug('Slide said loading has completed');
+        this.slideLoadingPromise?.tryResolve();
+      },
+
+      /**
+       * Call to cancel loading and return to previous slide
+       */
+      cancel: () => {
+        // console.debug('Slide said loading has cancelled');
+        this.slideLoadingPromise?.tryReject();
+      }
+    };
+  }
 }
 
 /* -------------------------------------- Export create & get state functions */

package/dist/widgets/presenter/Presenter.svelte

@@ -3,7 +3,8 @@
 
   import { GridLayers } from '../../components/layout/index.js';
 
-  import { createOrGetPresenterState } from './index.js';
+  import { PresenterState } from './Presenter.state.svelte.js';
+  import { getPresenterState } from './index.js';
   import { cssBefore, cssDuring } from './util.js';
 
   /* ------------------------------------------------------------------ Props */
@@ -23,7 +24,9 @@
    *   autostart?: boolean,
    *   startSlide?: string,
    *   instanceKey?: Symbol | string,
-   *   layoutSnippet: import('svelte').Snippet<[Slide|null, Layer]>
+   *   presenter?: import('./Presenter.state.svelte.js').PresenterState,
+   *   layoutSnippet: import('svelte').Snippet<[Slide|null, Layer]>,
+   *   loadingSnippet?: import('svelte').Snippet,
    * }}
    */
   let {
@@ -38,13 +41,20 @@
     // State
     instanceKey,
 
+    presenter = $bindable(new PresenterState()),
+
     // Snippets
-    layoutSnippet
+    layoutSnippet,
+    loadingSnippet
   } = $props();
 
-  /* ------------------------------------------------------------------ State */
+  // > 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);
 
-  const presenter = createOrGetPresenterState(instanceKey);
+  // > State
 
   $effect.pre(() => {
     // Configure presenter with slides if provided
@@ -107,7 +117,7 @@
     inert={presenter.busy}
     class="justify-self-stretch self-stretch overflow-hidden"
   >
-    <div class={classesA} style={stylesA}>
+    <div class="{classesA} h-full w-full" style={stylesA}>
       {@render layoutSnippet(presenter.slideA, presenter.layerA)}
     </div>
   </div>
@@ -118,8 +128,14 @@
     inert={presenter.busy}
     class="justify-self-stretch self-stretch overflow-hidden"
   >
-    <div class={classesB} style={stylesB}>
+    <div class="{classesB} h-full w-full" style={stylesB}>
       {@render layoutSnippet(presenter.slideB, presenter.layerB)}
     </div>
   </div>
+
+  {#if loadingSnippet && presenter.loadingSpinner}
+    <div class="h-full w-full" style="z-index:20;">
+      {@render loadingSnippet()}
+    </div>
+  {/if}
 </GridLayers>

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

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

package/dist/widgets/presenter/Presenter.svelte__

@@ -0,0 +1,125 @@
+<script>
+  /* ---------------------------------------------------------------- Imports */
+
+  import { GridLayers } from '$lib/components/layout/index.js';
+
+  import { createOrGetPresenterState } from './index.js';
+  import { cssBefore, cssDuring } from './util.js';
+
+  /* ------------------------------------------------------------------ Props */
+
+  /**
+   * @typedef {import("./typedef.js").Slide} Slide
+   */
+
+  /**
+   * @typedef {import("./typedef.js").Layer} Layer
+   */
+
+  /**
+   * @type {{
+   *   classes?: string,
+   *   slides?: import("./typedef.js").Slide[],
+   *   autostart?: boolean,
+   *   startSlide?: string,
+   *   instanceKey?: Symbol | string,
+   *   layoutSnippet: import('svelte').Snippet<[Slide|null, Layer]>
+   * }}
+   */
+  let {
+    // > Style
+    classes,
+
+    // > Functional
+    slides,
+    autostart = false,
+    startSlide,
+
+    // State
+    instanceKey,
+
+    // Snippets
+    layoutSnippet
+  } = $props();
+
+  /* ------------------------------------------------------------------ State */
+
+  const presenter = createOrGetPresenterState(instanceKey);
+
+  $effect.pre(() => {
+    // Configure presenter with slides if provided
+    presenter.configure({ slides, autostart, startSlide });
+  });
+
+  let classesA = $state('');
+  let classesB = $state('');
+
+  let stylesA = $state('');
+  let stylesB = $state('');
+
+  //> Apply stage classes and styles
+
+  $effect(() => {
+    // > layerA
+
+    const { stageBeforeIn, stageIn, stageBeforeOut, stageOut, transitions } =
+      presenter.layerA;
+
+    if (transitions && transitions.length) {
+      if (stageBeforeIn || stageBeforeOut) {
+        ({ style: stylesA, classes: classesA } = cssBefore(transitions));
+      } else if (stageIn || stageOut) {
+        setTimeout(() => {
+          ({ style: stylesA, classes: classesA } = cssDuring(transitions));
+        });
+      }
+    } else {
+      stylesA = '';
+      classesA = '';
+    }
+  });
+
+  $effect(() => {
+    // > layerB
+
+    const { stageBeforeIn, stageIn, stageBeforeOut, stageOut, transitions } =
+      presenter.layerB;
+
+    if (transitions) {
+      if (stageBeforeIn || stageBeforeOut) {
+        ({ style: stylesB, classes: classesB } = cssBefore(transitions));
+      } else if (stageIn || stageOut) {
+        setTimeout(() => {
+          ({ style: stylesB, classes: classesB } = cssDuring(transitions));
+        });
+      }
+    } else {
+      stylesB = '';
+      classesB = '';
+    }
+  });
+</script>
+
+<GridLayers data-component="presenter" {classes}>
+  <div
+    style:z-index={presenter.layerA.z}
+    style:visibility={presenter.layerA.visible ? 'visible' : 'hidden'}
+    inert={presenter.busy}
+    class="justify-self-stretch self-stretch overflow-hidden"
+  >
+    <div class={classesA} style={stylesA}>
+      {@render layoutSnippet(presenter.slideA, presenter.layerA)}
+    </div>
+  </div>
+
+  <div
+    style:z-index={presenter.layerB.z}
+    style:visibility={presenter.layerB.visible ? 'visible' : 'hidden'}
+    inert={presenter.busy}
+    class="justify-self-stretch self-stretch overflow-hidden"
+  >
+    <div class={classesB} style={stylesB}>
+      {@render layoutSnippet(presenter.slideB, presenter.layerB)}
+    </div>
+  </div>
+</GridLayers>

package/package.json

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