@hkdigital/lib-core 0.3.1

package/dist/features/image-box/typedef.js

@@ -0,0 +1,32 @@
+/**
+ * @typedef {(
+ *   'contain' |
+ *   'cover' |
+ *   'fill' |
+ *   'none' |
+ *   'scale-down'
+ * )} ObjectFit
+ */
+
+/**
+ * @typedef {(
+ *   'left' |
+ *   'center' |
+ *   'right' |
+ *   'top' |
+ *   'bottom' |
+ *   'left top' |
+ *   'left center' |
+ *   'left bottom' |
+ *   'center top' |
+ *   'center center' |
+ *   'center bottom' |
+ *   'right top' |
+ *   'right center' |
+ *   'right bottom' |
+ *   `${number}% ${number}%` |
+ *   `${number}px ${number}px`
+ * )} ObjectPosition
+ */
+
+export default {};

package/dist/features/index.d.ts

@@ -0,0 +1,11 @@
+export { default as ButtonGroup } from "./button-group/ButtonGroup.svelte";
+export { default as CompareLeftRight } from "./compare-left-right/CompareLeftRight.svelte";
+export { default as GameBox } from "./game-box/GameBox.svelte";
+export { default as HkAppLayout } from "./hk-app-layout/HkAppLayout.svelte";
+export { default as ImageBox } from "./image-box/ImageBox.svelte";
+export { default as Presenter } from "./presenter/Presenter.svelte";
+export { default as ImageSlide } from "./presenter/ImageSlide.svelte";
+export { default as VirtualViewport } from "./virtual-viewport/VirtualViewport.svelte";
+export * from "./button-group/typedef.js";
+export * from "./presenter/typedef.js";
+export { createOrGetState as createOrGetAppLayoutState, createState as createAppLayoutState, getState as getAppLayoutState } from "./hk-app-layout/HkAppLayout.state.svelte.js";

package/dist/features/index.js

@@ -0,0 +1,23 @@
+export { default as ButtonGroup } from './button-group/ButtonGroup.svelte';
+export { default as CompareLeftRight } from './compare-left-right/CompareLeftRight.svelte';
+export { default as GameBox } from './game-box/GameBox.svelte';
+
+export {
+  createOrGetState as createOrGetAppLayoutState,
+  createState as createAppLayoutState,
+  getState as getAppLayoutState
+} from './hk-app-layout/HkAppLayout.state.svelte.js';
+
+export { default as HkAppLayout } from './hk-app-layout/HkAppLayout.svelte';
+
+export { default as ImageBox } from './image-box/ImageBox.svelte';
+
+export { default as Presenter } from './presenter/Presenter.svelte';
+export { default as ImageSlide } from './presenter/ImageSlide.svelte';
+
+export { default as VirtualViewport } from './virtual-viewport/VirtualViewport.svelte';
+
+// > Types
+
+export * from './button-group/typedef.js';
+export * from './presenter/typedef.js';

package/dist/features/presenter/ImageSlide.svelte

@@ -0,0 +1,64 @@
+<script>
+  import { ImageBox } from '../index.js';
+
+  /**
+   * @type {{
+   *   imageMeta?: import('../../typedef').ImageSource,
+   *   slideDuration?: number,
+   *   nextSlideLabel?: string,
+   *   presenter?: { gotoSlide: (name: string) => void, getCurrentSlideName: () => string },
+   *   getLoadingController?: () => { loaded: () => void, cancel: () => void }
+   *   fit?: 'contain' | 'cover' | 'fill',
+   *   position?: string,
+   *   [attr: string]: any
+   * }}
+   */
+  let {
+    imageMeta,
+    slideDuration = 1000,
+    nextSlideLabel,
+    presenter,
+    getLoadingController,
+    fit = 'cover',
+    position = 'center center',
+    ...attrs
+  } = $props();
+
+  let show = $state(false);
+
+  let controller = getLoadingController();
+
+  async function progressListener(progress, id) {
+    // console.log('loadingProgress', { ...progress, id });
+    if (progress.loaded && !show) {
+      setTimeout(() => {
+        show = true;
+        controller.loaded();
+      }, 0);
+    }
+  }
+
+  let timer;
+
+  $effect(() => {
+    if (show && nextSlideLabel && !timer) {
+      timer = setTimeout(() => {
+        presenter.gotoSlide(nextSlideLabel);
+      }, slideDuration);
+    }
+
+    return () => {
+      clearTimeout(timer);
+    };
+  });
+</script>
+
+<div class="justify-self-stretch self-stretch grid" class:invisible={!show}>
+  <ImageBox
+    {imageMeta}
+    {fit}
+    {position}
+    onProgress={progressListener}
+    {...attrs}
+  />
+</div>

package/dist/features/presenter/ImageSlide.svelte.d.ts

@@ -0,0 +1,36 @@
+export default ImageSlide;
+type ImageSlide = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [attr: string]: any;
+        imageMeta?: ImageSource;
+        slideDuration?: number;
+        nextSlideLabel?: string;
+        presenter?: {
+            gotoSlide: (name: string) => void;
+            getCurrentSlideName: () => string;
+        };
+        getLoadingController?: () => {
+            loaded: () => void;
+            cancel: () => void;
+        };
+        fit?: "fill" | "cover" | "contain";
+        position?: string;
+    }>): void;
+};
+declare const ImageSlide: import("svelte").Component<{
+    [attr: string]: any;
+    imageMeta?: import("../../typedef").ImageSource;
+    slideDuration?: number;
+    nextSlideLabel?: string;
+    presenter?: {
+        gotoSlide: (name: string) => void;
+        getCurrentSlideName: () => string;
+    };
+    getLoadingController?: () => {
+        loaded: () => void;
+        cancel: () => void;
+    };
+    fit?: "contain" | "cover" | "fill";
+    position?: string;
+}, {}, "">;

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

@@ -0,0 +1,74 @@
+export class PresenterState {
+    /** @type {Slide[]} */
+    slides: Slide[];
+    /** @type {Layer} */
+    layerA: Layer;
+    /** @type {Layer} */
+    layerB: Layer;
+    /** @type {Slide|null} */
+    slideA: Slide | null;
+    /** @type {Slide|null} */
+    slideB: Slide | null;
+    /** @type {string} */
+    currentLayerLabel: string;
+    /** @type {string} */
+    nextLayerLabel: string;
+    /** @type {HkPromise[]} */
+    transitionPromises: HkPromise[];
+    /** @type {HkPromise} */
+    slideLoadingPromise: HkPromise;
+    /** @type {boolean} */
+    isSlideLoading: boolean;
+    /** @type {boolean} */
+    loadingSpinner: boolean;
+    /** @type {boolean} */
+    busy: boolean;
+    /** @type {string} */
+    currentSlideName: string;
+    /** @type {string} */
+    nextSlideName: string;
+    /** @type {string} */
+    pendingSlideName: string;
+    /** @type {boolean} */
+    configured: boolean;
+    /** @type {Map<Symbol, ( params: ListenerParams ) => void>} */
+    onBeforeListeners: Map<Symbol, (params: ListenerParams) => void>;
+    /** @type {Map<Symbol, ( params: ListenerParams ) => void>} */
+    onShowListeners: Map<Symbol, (params: ListenerParams) => void>;
+    /**
+     * Configure the presentation
+     *
+     * @param {object} _
+     * @param {Slide[]} [_.slides] - Array of slides for the presentation
+     */
+    configure({ slides }: {
+        slides?: Slide[];
+    }): void;
+    /**
+     * Configure the presentation slides
+     *
+     * @param {Slide[]} slides - Array of slides for the presentation
+     */
+    configureSlides(slides: Slide[]): void;
+    /**
+     * Transition to another slide by name
+     *
+     * @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 type Slide = import("./typedef").Slide;
+export type Transition = import("./typedef").Transition;
+export type Layer = import("./typedef").Layer;
+export type PresenterRef = import("./typedef").PresenterRef;
+export type LoadController = import("./typedef").LoadController;
+export type ListenerParams = import("./typedef").ListenerParams;
+import { HkPromise } from '../../classes/promise/index.js';