@hkdigital/lib-sveltekit 0.1.19 → 0.1.21

package/dist/components/layout/index.d.ts

@@ -1,5 +1 @@
-export { default as HkAppLayout } from "./HkAppLayout.svelte";
-export { default as GameBox } from "./game-box/GameBox.svelte";
 export { default as GridLayers } from "./grid-layers/GridLayers.svelte";
-export { default as VirtualViewport } from "./virtual-viewport/VirtualViewport.svelte";
-export { createOrGetState as createOrGetAppLayoutState, createState as createAppLayoutState, getState as getAppLayoutState } from "./HkAppLayout.state.svelte.js";

package/dist/components/layout/index.js

@@ -1,11 +1 @@
-export {
-	createOrGetState as createOrGetAppLayoutState,
-	createState as createAppLayoutState,
-	getState as getAppLayoutState
-} from './HkAppLayout.state.svelte.js';
-
-export { default as HkAppLayout } from './HkAppLayout.svelte';
-
-export { default as GameBox } from './game-box/GameBox.svelte';
 export { default as GridLayers } from './grid-layers/GridLayers.svelte';
-export { default as VirtualViewport } from './virtual-viewport/VirtualViewport.svelte';

package/dist/components/rows/panel-grid-row/PanelGridRow.svelte.d.ts

@@ -4,8 +4,8 @@ type PanelGridRow = {
     $set?(props: Partial<{
         base?: string;
         bg?: string;
-        justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | "stretch" | "normal";
-        justifyItems?: "center" | "start" | "end" | "stretch";
+        justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch" | "normal";
+        justifyItems?: "start" | "center" | "end" | "stretch";
         gap?: string;
         classes?: string;
         children?: Snippet<[]>;

package/dist/components/rows/panel-row-2/PanelRow2.svelte.d.ts

@@ -4,8 +4,8 @@ type PanelRow2 = {
     $set?(props: Partial<{
         base?: string;
         bg?: string;
-        justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | "stretch" | "normal";
-        justifyItems?: "center" | "start" | "end" | "stretch";
+        justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch" | "normal";
+        justifyItems?: "start" | "center" | "end" | "stretch";
         gap?: string;
         classes?: string;
         children?: Snippet<[]>;

package/dist/themes/hkdev/theme-ext.js

@@ -1,6 +1,6 @@
 import theme from '../hkdev/theme.js';
 
-import { theme as themeStore } from '@hkdigital/lib-sveltekit/stores/index.js';
+import { theme as themeStore } from '../../stores/index.js';
 
 /**
  * Set meta them color for the current theme

package/dist/widgets/button-group/ButtonGroup.svelte

@@ -0,0 +1,62 @@
+<script>
+  /**
+   * ButtonGroup component
+   * A group of toggle buttons where only one can be active at
+   * a time.
+   */
+
+  /** @typedef {{text: string, disabled?: boolean, props?: Object}} ButtonDef */
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   classes?: string,
+   *   buttons: Array<ButtonDef>,
+   *   selected?: (ButtonDef|null)
+   *   buttonSnippet: import('svelte').Snippet<[{text: string, props: Object}]>,
+   *   [attr: string]: any
+   * }}
+   */
+  let {
+    base = '',
+    bg = '',
+    classes = '',
+    buttons = [],
+    selected = $bindable(null),
+    buttonSnippet,
+    ...attrs
+  } = $props();
+
+  let selectedIndex = $state(-1);
+
+  /**
+   * Handle button selection
+   */
+  function handleSelect(index) {
+    if (!buttons[index].disabled) {
+      selectedIndex = index;
+      selected = buttons[selectedIndex] ?? null;
+    }
+  }
+</script>
+
+<div
+  data-component="button-group"
+  class="{base} {bg} {classes} flex"
+  role="group"
+  aria-label="Button Group"
+  {...attrs}
+>
+  {#each buttons as button, index}
+    {@render buttonSnippet?.({
+      text: button.text,
+      props: {
+        ...(button.props || {}),
+        disabled: button.disabled,
+        active: index === selectedIndex,
+        onclick: () => handleSelect(index)
+      }
+    })}
+  {/each}
+</div>

package/dist/widgets/button-group/ButtonGroup.svelte.d.ts

@@ -0,0 +1,41 @@
+export default ButtonGroup;
+type ButtonGroup = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [attr: string]: any;
+        base?: string;
+        bg?: string;
+        classes?: string;
+        buttons: ButtonDef[];
+        selected?: ButtonDef;
+        buttonSnippet: Snippet<[{
+            text: string;
+            props: any;
+        }]>;
+    }>): void;
+};
+declare const ButtonGroup: import("svelte").Component<{
+    [attr: string]: any;
+    base?: string;
+    bg?: string;
+    classes?: string;
+    buttons: Array<{
+        text: string;
+        disabled?: boolean;
+        props?: any;
+    }>;
+    selected?: ({
+        text: string;
+        disabled?: boolean;
+        props?: any;
+    } | null);
+    buttonSnippet: import("svelte").Snippet<[{
+        text: string;
+        props: any;
+    }]>;
+}, {}, "selected">;
+type ButtonDef = {
+    text: string;
+    disabled?: boolean;
+    props?: any;
+};

package/dist/{components/layout → widgets}/game-box/GameBox.svelte

@@ -4,7 +4,7 @@
     getGameWidthOnLandscape,
     getGameWidthOnPortrait
   } from './gamebox.util.js';
-  import { enableContainerScaling } from '../../../util/design-system/index.js';
+  import { enableContainerScaling } from '../../util/design-system/index.js';
 
   /**
    * @type {{

package/dist/widgets/index.d.ts

@@ -0,0 +1,9 @@
+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 { createOrGetState as createOrGetAppLayoutState, createState as createAppLayoutState, getState as getAppLayoutState } from "./hk-app-layout/HkAppLayout.state.svelte.js";

package/dist/widgets/index.js

@@ -0,0 +1,18 @@
+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';

package/dist/widgets/presenter/ImageSlide.svelte

@@ -0,0 +1,13 @@
+<script>
+  import { ImageBox } from '../index.js';
+
+  const { ...attrs } = $props();
+
+  // console.log('attrs:', attrs.imageMeta);
+
+  if (!attrs.imageMeta) {
+    throw new Error('Missing property [imageMeta]');
+  }
+</script>
+
+<ImageBox {...attrs} />

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

@@ -0,0 +1,6 @@
+export default ImageSlide;
+type ImageSlide = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, any>>): void;
+};
+declare const ImageSlide: import("svelte").Component<Record<string, any>, {}, "">;

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

@@ -0,0 +1,100 @@
+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 {boolean} */
+    isSlideLoading: boolean;
+    /** @type {boolean} */
+    controllerRequested: boolean;
+    /** @type {number} Loading timeout in milliseconds (0 = disabled) */
+    loadingTimeout: number;
+    /** @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
+     *
+     * @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;
+        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>;
+    #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;
+export type LoadController = {
+    /**
+     * - Function to call when loading is complete
+     */
+    loaded: () => void;
+    /**
+     * - Function to return to the previous slide
+     */
+    cancel: () => void;
+};
+export type PresenterRef = {
+    /**
+     * - Navigate to a slide by name
+     */
+    gotoSlide: (name: string) => void;
+    /**
+     * - Get the current slide name
+     */
+    getCurrentSlideName: () => string;
+};
+import { HkPromise } from '../../classes/promise/index.js';