@hkdigital/lib-sveltekit 0.1.28 → 0.1.29

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.js

@@ -166,28 +166,6 @@ 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
@@ -334,16 +312,16 @@ export class PresenterState {
       }
     };
 
-    // console.debug('Checkpoint 1');
+    console.debug('Checkpoint 1');
 
     // Add next slide to next layer
     this.#updateSlide(this.nextLayerLabel, slideWithProps);
 
-    // console.debug('Checkpoint 2');
+    console.debug('Checkpoint 2');
 
     await tick();
 
-    // console.debug('Checkpoint 3');
+    console.debug('Checkpoint 3');
 
     if (this.slideLoadingPromise) {
       // console.debug('Waiting for slide to load');
@@ -356,7 +334,7 @@ export class PresenterState {
     const currentSlide = this.#getSlide(this.currentLayerLabel);
     const nextSlide = this.#getSlide(this.nextLayerLabel);
 
-    // console.debug('Checkpoint 4');
+    console.debug('Checkpoint 4');
 
     // Make next layer visible, move to front, and prepare for
     // transition in
@@ -376,11 +354,13 @@ export class PresenterState {
       transitions: currentSlide?.outro ?? []
     });
 
-    // console.debug('Checkpoint 5');
+    console.debug('Checkpoint 5');
 
     // Start transitions
     this.#applyTransitions();
 
+    // FIXME: wait?
+
     await this.#executeTransition(this.transitionPromises);
 
     // Check if there's a pending slide transition

package/dist/widgets/presenter/Presenter.svelte

@@ -5,7 +5,7 @@
 
   import { PresenterState } from './Presenter.state.svelte.js';
   import { getPresenterState } from './index.js';
-  import { cssBefore, cssDuring } from './util.js';
+  import { cssBefore, cssDuring, waitForRender } from './util.js';
 
   /* ------------------------------------------------------------------ Props */
 
@@ -41,7 +41,7 @@
     // State
     instanceKey,
 
-    presenter = $bindable(new PresenterState()),
+    // presenter = $bindable(),
 
     // Snippets
     layoutSnippet,
@@ -52,7 +52,7 @@
 
   // FIXME: Using getPresenterState to force creation of presenter outside
   //        the component. Otherwise transitions doe not work somehow..
-  presenter = getPresenterState(instanceKey);
+  const presenter = getPresenterState(instanceKey);
 
   // > State
 
@@ -79,7 +79,7 @@
       if (stageBeforeIn || stageBeforeOut) {
         ({ style: stylesA, classes: classesA } = cssBefore(transitions));
       } else if (stageIn || stageOut) {
-        setTimeout(() => {
+        waitForRender(() => {
           ({ style: stylesA, classes: classesA } = cssDuring(transitions));
         });
       }
@@ -99,7 +99,7 @@
       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

@@ -8,4 +8,4 @@ declare const Presenter: import("svelte").Component<{
     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/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.29",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"