@hkdigital/lib-sveltekit 0.1.18 → 0.1.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/dist/components/layout/index.d.ts +0 -4
  2. package/dist/components/layout/index.js +0 -10
  3. package/dist/components/rows/panel-grid-row/PanelGridRow.svelte.d.ts +2 -2
  4. package/dist/components/rows/panel-row-2/PanelRow2.svelte.d.ts +2 -2
  5. package/dist/server/logger.d.ts +1 -0
  6. package/dist/themes/hkdev/theme-ext.js +1 -1
  7. package/dist/widgets/button-group/ButtonGroup.svelte +62 -0
  8. package/dist/widgets/button-group/ButtonGroup.svelte.d.ts +41 -0
  9. package/dist/{components/layout → widgets}/game-box/GameBox.svelte +6 -7
  10. package/dist/widgets/index.d.ts +9 -0
  11. package/dist/widgets/index.js +18 -0
  12. package/dist/widgets/presenter/ImageSlide.svelte +13 -0
  13. package/dist/widgets/presenter/ImageSlide.svelte.d.ts +6 -0
  14. package/dist/widgets/presenter/Presenter.state.svelte.d.ts +83 -0
  15. package/dist/widgets/presenter/Presenter.state.svelte.js +530 -0
  16. package/dist/widgets/presenter/Presenter.svelte +125 -0
  17. package/dist/widgets/presenter/Presenter.svelte.d.ts +20 -0
  18. package/dist/widgets/presenter/constants.d.ts +3 -0
  19. package/dist/widgets/presenter/constants.js +4 -0
  20. package/dist/widgets/presenter/index.d.ts +6 -0
  21. package/dist/widgets/presenter/index.js +15 -0
  22. package/dist/widgets/presenter/typedef.d.ts +58 -0
  23. package/dist/widgets/presenter/typedef.js +75 -0
  24. package/dist/widgets/presenter/util.d.ts +56 -0
  25. package/dist/widgets/presenter/util.js +188 -0
  26. package/dist/{components/layout → widgets}/virtual-viewport/VirtualViewport.svelte +1 -1
  27. package/package.json +8 -5
  28. package/dist/components/widgets/scale-control/ScaleControl.svelte +0 -0
  29. package/dist/components/widgets/scale-control/ScaleControl.svelte.d.ts +0 -26
  30. package/dist/components/widgets/scale-control/index.d.ts +0 -1
  31. package/dist/components/widgets/scale-control/index.js +0 -1
  32. /package/dist/{components/widgets → widgets}/compare-left-right/CompareLeftRight.svelte +0 -0
  33. /package/dist/{components/widgets → widgets}/compare-left-right/CompareLeftRight.svelte.d.ts +0 -0
  34. /package/dist/{components/widgets → widgets}/compare-left-right/index.d.ts +0 -0
  35. /package/dist/{components/widgets → widgets}/compare-left-right/index.js +0 -0
  36. /package/dist/{components/layout → widgets}/game-box/GameBox.svelte.d.ts +0 -0
  37. /package/dist/{components/layout → widgets}/game-box/gamebox.util.d.ts +0 -0
  38. /package/dist/{components/layout → widgets}/game-box/gamebox.util.js +0 -0
  39. /package/dist/{components/layout → widgets/hk-app-layout}/HkAppLayout.state.svelte.d.ts +0 -0
  40. /package/dist/{components/layout → widgets/hk-app-layout}/HkAppLayout.state.svelte.js +0 -0
  41. /package/dist/{components/layout → widgets/hk-app-layout}/HkAppLayout.svelte +0 -0
  42. /package/dist/{components/layout → widgets/hk-app-layout}/HkAppLayout.svelte.d.ts +0 -0
  43. /package/dist/{components/image → widgets/image-box}/ImageBox.svelte +0 -0
  44. /package/dist/{components/image → widgets/image-box}/ImageBox.svelte.d.ts +0 -0
  45. /package/dist/{components/image → widgets/image-box}/index.d.ts +0 -0
  46. /package/dist/{components/image → widgets/image-box}/index.js +0 -0
  47. /package/dist/{components/image → widgets/image-box}/typedef.d.ts +0 -0
  48. /package/dist/{components/image → widgets/image-box}/typedef.js +0 -0
  49. /package/dist/{components/layout → widgets}/virtual-viewport/VirtualViewport.svelte.d.ts +0 -0
@@ -1,5 +1 @@
1
- export { default as HkAppLayout } from "./HkAppLayout.svelte";
2
- export { default as GameBox } from "./game-box/GameBox.svelte";
3
1
  export { default as GridLayers } from "./grid-layers/GridLayers.svelte";
4
- export { default as VirtualViewport } from "./virtual-viewport/VirtualViewport.svelte";
5
- export { createOrGetState as createOrGetAppLayoutState, createState as createAppLayoutState, getState as getAppLayoutState } from "./HkAppLayout.state.svelte.js";
@@ -1,11 +1 @@
1
- export {
2
- createOrGetState as createOrGetAppLayoutState,
3
- createState as createAppLayoutState,
4
- getState as getAppLayoutState
5
- } from './HkAppLayout.state.svelte.js';
6
-
7
- export { default as HkAppLayout } from './HkAppLayout.svelte';
8
-
9
- export { default as GameBox } from './game-box/GameBox.svelte';
10
1
  export { default as GridLayers } from './grid-layers/GridLayers.svelte';
11
- export { default as VirtualViewport } from './virtual-viewport/VirtualViewport.svelte';
@@ -4,8 +4,8 @@ type PanelGridRow = {
4
4
  $set?(props: Partial<{
5
5
  base?: string;
6
6
  bg?: string;
7
- justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | "stretch" | "normal";
8
- justifyItems?: "center" | "start" | "end" | "stretch";
7
+ justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch" | "normal";
8
+ justifyItems?: "start" | "center" | "end" | "stretch";
9
9
  gap?: string;
10
10
  classes?: string;
11
11
  children?: Snippet<[]>;
@@ -4,8 +4,8 @@ type PanelRow2 = {
4
4
  $set?(props: Partial<{
5
5
  base?: string;
6
6
  bg?: string;
7
- justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | "stretch" | "normal";
8
- justifyItems?: "center" | "start" | "end" | "stretch";
7
+ justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch" | "normal";
8
+ justifyItems?: "start" | "center" | "end" | "stretch";
9
9
  gap?: string;
10
10
  classes?: string;
11
11
  children?: Snippet<[]>;
@@ -22,3 +22,4 @@ export type LoggerExtension = {
22
22
  */
23
23
  /** @type {pino.Logger & LoggerExtension} */
24
24
  export const logger: pino.Logger & LoggerExtension;
25
+ import pino from 'pino';
@@ -1,6 +1,6 @@
1
1
  import theme from '../hkdev/theme.js';
2
2
 
3
- import { theme as themeStore } from '@hkdigital/lib-sveltekit/stores/index.js';
3
+ import { theme as themeStore } from '../../stores/index.js';
4
4
 
5
5
  /**
6
6
  * Set meta them color for the current theme
@@ -0,0 +1,62 @@
1
+ <script>
2
+ /**
3
+ * ButtonGroup component
4
+ * A group of toggle buttons where only one can be active at
5
+ * a time.
6
+ */
7
+
8
+ /** @typedef {{text: string, disabled?: boolean, props?: Object}} ButtonDef */
9
+
10
+ /**
11
+ * @type {{
12
+ * base?: string,
13
+ * bg?: string,
14
+ * classes?: string,
15
+ * buttons: Array<ButtonDef>,
16
+ * selected?: (ButtonDef|null)
17
+ * buttonSnippet: import('svelte').Snippet<[{text: string, props: Object}]>,
18
+ * [attr: string]: any
19
+ * }}
20
+ */
21
+ let {
22
+ base = '',
23
+ bg = '',
24
+ classes = '',
25
+ buttons = [],
26
+ selected = $bindable(null),
27
+ buttonSnippet,
28
+ ...attrs
29
+ } = $props();
30
+
31
+ let selectedIndex = $state(-1);
32
+
33
+ /**
34
+ * Handle button selection
35
+ */
36
+ function handleSelect(index) {
37
+ if (!buttons[index].disabled) {
38
+ selectedIndex = index;
39
+ selected = buttons[selectedIndex] ?? null;
40
+ }
41
+ }
42
+ </script>
43
+
44
+ <div
45
+ data-component="button-group"
46
+ class="{base} {bg} {classes} flex"
47
+ role="group"
48
+ aria-label="Button Group"
49
+ {...attrs}
50
+ >
51
+ {#each buttons as button, index}
52
+ {@render buttonSnippet?.({
53
+ text: button.text,
54
+ props: {
55
+ ...(button.props || {}),
56
+ disabled: button.disabled,
57
+ active: index === selectedIndex,
58
+ onclick: () => handleSelect(index)
59
+ }
60
+ })}
61
+ {/each}
62
+ </div>
@@ -0,0 +1,41 @@
1
+ export default ButtonGroup;
2
+ type ButtonGroup = {
3
+ $on?(type: string, callback: (e: any) => void): () => void;
4
+ $set?(props: Partial<{
5
+ [attr: string]: any;
6
+ base?: string;
7
+ bg?: string;
8
+ classes?: string;
9
+ buttons: ButtonDef[];
10
+ selected?: ButtonDef;
11
+ buttonSnippet: Snippet<[{
12
+ text: string;
13
+ props: any;
14
+ }]>;
15
+ }>): void;
16
+ };
17
+ declare const ButtonGroup: import("svelte").Component<{
18
+ [attr: string]: any;
19
+ base?: string;
20
+ bg?: string;
21
+ classes?: string;
22
+ buttons: Array<{
23
+ text: string;
24
+ disabled?: boolean;
25
+ props?: any;
26
+ }>;
27
+ selected?: ({
28
+ text: string;
29
+ disabled?: boolean;
30
+ props?: any;
31
+ } | null);
32
+ buttonSnippet: import("svelte").Snippet<[{
33
+ text: string;
34
+ props: any;
35
+ }]>;
36
+ }, {}, "selected">;
37
+ type ButtonDef = {
38
+ text: string;
39
+ disabled?: boolean;
40
+ props?: any;
41
+ };
@@ -4,7 +4,7 @@
4
4
  getGameWidthOnLandscape,
5
5
  getGameWidthOnPortrait
6
6
  } from './gamebox.util.js';
7
- import { enableContainerScaling } from '../../../util/design-system/index.js';
7
+ import { enableContainerScaling } from '../../util/design-system/index.js';
8
8
 
9
9
  /**
10
10
  * @type {{
@@ -103,12 +103,11 @@
103
103
  // Select the appropriate design based on orientation
104
104
  const activeDesign = isLandscape ? designLandscape : designPortrait;
105
105
 
106
- // Log to help debug
107
- console.debug(
108
- `GameBox scaling [${isLandscape ? 'landscape' : 'portrait'}]:`,
109
- `game: ${gameWidth}x${gameHeight}`,
110
- `design: ${activeDesign.width}x${activeDesign.height}`
111
- );
106
+ // console.debug(
107
+ // `GameBox scaling [${isLandscape ? 'landscape' : 'portrait'}]:`,
108
+ // `game: ${gameWidth}x${gameHeight}`,
109
+ // `design: ${activeDesign.width}x${activeDesign.height}`
110
+ // );
112
111
 
113
112
  // Apply scaling with the current design based on orientation
114
113
  return enableContainerScaling({
@@ -0,0 +1,9 @@
1
+ export { default as ButtonGroup } from "./button-group/ButtonGroup.svelte";
2
+ export { default as CompareLeftRight } from "./compare-left-right/CompareLeftRight.svelte";
3
+ export { default as GameBox } from "./game-box/GameBox.svelte";
4
+ export { default as HkAppLayout } from "./hk-app-layout/HkAppLayout.svelte";
5
+ export { default as ImageBox } from "./image-box/ImageBox.svelte";
6
+ export { default as Presenter } from "./presenter/Presenter.svelte";
7
+ export { default as ImageSlide } from "./presenter/ImageSlide.svelte";
8
+ export { default as VirtualViewport } from "./virtual-viewport/VirtualViewport.svelte";
9
+ export { createOrGetState as createOrGetAppLayoutState, createState as createAppLayoutState, getState as getAppLayoutState } from "./hk-app-layout/HkAppLayout.state.svelte.js";
@@ -0,0 +1,18 @@
1
+ export { default as ButtonGroup } from './button-group/ButtonGroup.svelte';
2
+ export { default as CompareLeftRight } from './compare-left-right/CompareLeftRight.svelte';
3
+ export { default as GameBox } from './game-box/GameBox.svelte';
4
+
5
+ export {
6
+ createOrGetState as createOrGetAppLayoutState,
7
+ createState as createAppLayoutState,
8
+ getState as getAppLayoutState
9
+ } from './hk-app-layout/HkAppLayout.state.svelte.js';
10
+
11
+ export { default as HkAppLayout } from './hk-app-layout/HkAppLayout.svelte';
12
+
13
+ export { default as ImageBox } from './image-box/ImageBox.svelte';
14
+
15
+ export { default as Presenter } from './presenter/Presenter.svelte';
16
+ export { default as ImageSlide } from './presenter/ImageSlide.svelte';
17
+
18
+ export { default as VirtualViewport } from './virtual-viewport/VirtualViewport.svelte';
@@ -0,0 +1,13 @@
1
+ <script>
2
+ import { ImageBox } from '../index.js';
3
+
4
+ const { ...attrs } = $props();
5
+
6
+ // console.log('attrs:', attrs.imageMeta);
7
+
8
+ if (!attrs.imageMeta) {
9
+ throw new Error('Missing property [imageMeta]');
10
+ }
11
+ </script>
12
+
13
+ <ImageBox {...attrs} />
@@ -0,0 +1,6 @@
1
+ export default ImageSlide;
2
+ type ImageSlide = {
3
+ $on?(type: string, callback: (e: any) => void): () => void;
4
+ $set?(props: Partial<Record<string, any>>): void;
5
+ };
6
+ declare const ImageSlide: import("svelte").Component<Record<string, any>, {}, "">;
@@ -0,0 +1,83 @@
1
+ export class PresenterState {
2
+ /** @type {Slide[]} */
3
+ slides: Slide[];
4
+ /** @type {Layer} */
5
+ layerA: Layer;
6
+ /** @type {Layer} */
7
+ layerB: Layer;
8
+ /** @type {Slide|null} */
9
+ slideA: Slide | null;
10
+ /** @type {Slide|null} */
11
+ slideB: Slide | null;
12
+ /** @type {string} */
13
+ currentLayerLabel: string;
14
+ /** @type {string} */
15
+ nextLayerLabel: string;
16
+ /** @type {HkPromise[]} */
17
+ transitionPromises: HkPromise[];
18
+ /** @type {boolean} */
19
+ isSlideLoading: boolean;
20
+ /** @type {boolean} */
21
+ controllerRequested: boolean;
22
+ /** @type {number} Loading timeout in milliseconds (0 = disabled) */
23
+ loadingTimeout: number;
24
+ /** @type {boolean} */
25
+ busy: boolean;
26
+ /** @type {string} */
27
+ currentSlideName: string;
28
+ /**
29
+ * Mark the slide as loaded, which triggers transitions to begin
30
+ */
31
+ finishSlideLoading(): void;
32
+ /**
33
+ * Returns a controller object for managing manual loading
34
+ * Components can use this to signal when they're done loading
35
+ * or to cancel and go back to the previous slide
36
+ *
37
+ * @returns {LoadController} Object with loaded() and cancel() methods
38
+ */
39
+ getLoadingController(): LoadController;
40
+ /**
41
+ * Configure the presentation
42
+ *
43
+ * @param {object} _
44
+ * @param {boolean} [_.autostart=false] - Whether to start automatically
45
+ * @param {string} [_.startSlide] - Name of the slide to start with
46
+ * @param {Slide[]} [_.slides] - Array of slides for the presentation
47
+ */
48
+ configure({ slides, autostart, startSlide }: {
49
+ autostart?: boolean;
50
+ startSlide?: string;
51
+ slides?: Slide[];
52
+ }): void;
53
+ /**
54
+ * Configure the presentation slides
55
+ *
56
+ * @param {Slide[]} slides - Array of slides for the presentation
57
+ */
58
+ configureSlides(slides: Slide[]): void;
59
+ /**
60
+ * Transition to another slide by name
61
+ *
62
+ * @param {string} name - Name of the slide to transition to
63
+ */
64
+ gotoSlide(name: string): Promise<void>;
65
+ #private;
66
+ }
67
+ export const createOrGetState: (instanceKey?: string | Symbol) => PresenterState;
68
+ export const createState: (instanceKey?: string | Symbol) => PresenterState;
69
+ export const getState: (instanceKey?: string | Symbol) => PresenterState;
70
+ export type Slide = import("./typedef").Slide;
71
+ export type Transition = import("./typedef").Transition;
72
+ export type Layer = import("./typedef").Layer;
73
+ export type LoadController = {
74
+ /**
75
+ * - Function to call when loading is complete
76
+ */
77
+ loaded: () => void;
78
+ /**
79
+ * - Function to return to the previous slide
80
+ */
81
+ cancel: () => void;
82
+ };
83
+ import { HkPromise } from '../../classes/promise/index.js';