@hkdigital/lib-sveltekit 0.1.55 → 0.1.57

package/dist/classes/svelte/audio/AudioScene.svelte.d.ts

@@ -28,14 +28,20 @@ export default class AudioScene {
     }): void;
     /**
      * Start loading all audio sources
+     */
+    load(): void;
+    /**
+     * Set an audio context to use
      *
-     * @param {AudioContext} audioContext
+     * @param {AudioContext} [audioContext]
      */
-    load(audioContext: AudioContext): void;
+    setAudioContext(audioContext?: AudioContext): void;
     /**
      * Get a source that can be used to play the audio once
      *
      * @param {string} label
+     *
+     * @returns {Promise<AudioBufferSourceNode>}
      */
     getSourceNode(label: string): Promise<AudioBufferSourceNode>;
     #private;

package/dist/classes/svelte/audio/AudioScene.svelte.js

@@ -81,9 +81,6 @@ export default class AudioScene {
 
 	/**
 	 * Construct AudioScene
-	 *
-	 * @param {object} _
-	 * @param {AudioContext} _.audioContext
 	 */
 	constructor() {
 		const state = this.#state;
@@ -172,12 +169,8 @@ export default class AudioScene {
 
 	/**
 	 * Start loading all audio sources
-	 *
-	 * @param {AudioContext} audioContext
 	 */
-	load(audioContext) {
-		this.#audioContext = audioContext;
-		// console.log(123);
+	load() {
 		this.#state.send(LOAD);
 
 		// FIXME: in unit test when moved to startloading it hangs!
@@ -187,6 +180,15 @@ export default class AudioScene {
 		}
 	}
 
+	/**
+ 	 * Set an audio context to use
+ 	 *
+	 * @param {AudioContext} [audioContext]
+	 */
+	setAudioContext( audioContext ) {
+		this.#audioContext = audioContext;
+	}
+
 	async #startLoading() {
 		console.log('#startLoading');
 
@@ -200,6 +202,8 @@ export default class AudioScene {
 	 * Get a source that can be used to play the audio once
 	 *
 	 * @param {string} label
+	 *
+	 * @returns {Promise<AudioBufferSourceNode>}
 	 */
 	async getSourceNode(label) {
 		// @note Gain setup
@@ -212,12 +216,11 @@ export default class AudioScene {
 		}
 
 		const sourceNode = await audioLoader.getAudioBufferSourceNode(
-			// @ts-ignore
-			this.#audioContext
+			this.#getAudioContext()
 		);
 
 		// @ts-ignore
-		sourceNode.connect(this.#audioContext.destination);
+		sourceNode.connect(this.#getAudioContext().destination);
 
 		// Clean up
 		sourceNode.onended = () => {
@@ -228,6 +231,16 @@ export default class AudioScene {
 		return sourceNode;
 	}
 
+	#getAudioContext()
+	{
+		if( !this.#audioContext )
+		{
+			this.#audioContext = new AudioContext();
+		}
+
+		return this.#audioContext;
+	}
+
 	/**
 	 * Get memory source
 	 *

package/dist/components/area/HkArea.svelte.d.ts

@@ -1,4 +1,18 @@
 export default HkArea;
+type HkArea = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        bg?: string;
+        padding?: string;
+        margin?: string;
+        classes?: string;
+        style?: string;
+        children: Snippet<[]>;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const HkArea: import("svelte").Component<{
     base?: string;
     bg?: string;

package/dist/components/area/HkGridArea.svelte.d.ts

@@ -1,4 +1,26 @@
 export default HkGridArea;
+type HkGridArea = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        bg?: string;
+        padding?: string;
+        margin?: string;
+        classes?: string;
+        style?: string;
+        boxBase?: string;
+        boxBg?: string;
+        boxPadding?: string;
+        boxMargin?: string;
+        boxClasses?: string;
+        boxAttrs?: {
+            [attr: string]: any;
+        };
+        children: Snippet<[]>;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const HkGridArea: import("svelte").Component<{
     base?: string;
     bg?: string;

package/dist/components/buttons/button/Button.svelte.d.ts

@@ -1,4 +1,27 @@
 export default Button;
+type Button = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [key: string]: any;
+        base?: string;
+        bg?: string;
+        classes?: string;
+        type?: string;
+        role?: "custom" | "primary" | "secondary" | "tertiary";
+        size?: "sm" | "md" | "lg";
+        variant?: string;
+        mode?: "light" | "dark";
+        buttonType?: "reset" | "submit" | "button";
+        active?: boolean;
+        selected?: boolean;
+        loading?: boolean;
+        error?: boolean;
+        disabled?: boolean;
+        snippetLoading?: Snippet<[]>;
+        snippetError?: Snippet<[]>;
+        children: Snippet<[]>;
+    }>): void;
+};
 declare const Button: import("svelte").Component<{
     [key: string]: any;
     base?: string;

package/dist/components/buttons/button-icon-steeze/SteezeIconButton.svelte.d.ts

@@ -1,4 +1,13 @@
 export default SteezeIconButton;
+type SteezeIconButton = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [key: string]: any;
+        src: IconSource;
+        iconSize?: string;
+        theme?: string;
+    }>): void;
+};
 declare const SteezeIconButton: import("svelte").Component<{
     [key: string]: any;
     src: import("../../icons/typedef.js").IconSource;

package/dist/components/buttons/button-text/TextButton.svelte.d.ts

@@ -1,4 +1,11 @@
 export default TextButton;
+type TextButton = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [key: string]: any;
+        children: Snippet<[]>;
+    }>): void;
+};
 declare const TextButton: import("svelte").Component<{
     [key: string]: any;
     children: import("svelte").Snippet;

package/dist/components/debug/debug-panel-design-scaling/DebugPanelDesignScaling.svelte.d.ts

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

package/dist/components/hkdev/blocks/TextBlock.svelte.d.ts

@@ -1,4 +1,17 @@
 export default TextBlock;
+type TextBlock = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        bg?: string;
+        classes?: string;
+        title?: Snippet<[]>;
+        content?: Snippet<[]>;
+        footer?: Snippet<[]>;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const TextBlock: import("svelte").Component<{
     base?: string;
     bg?: string;

package/dist/components/hkdev/buttons/CheckButton.svelte.d.ts

@@ -1,4 +1,22 @@
 export default CheckButton;
+type CheckButton = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        checked?: boolean;
+        activeChild?: boolean;
+        inactiveChild?: boolean;
+        iconActiveBase?: string;
+        classes?: string;
+        disabled?: boolean;
+        title: string;
+        iconInactiveBase?: string;
+        inactiveClasses?: string;
+        activeClasses: string;
+        onclick?: () => void;
+        onchange?: () => void;
+        topic?: string;
+    }>): void;
+};
 declare const CheckButton: import("svelte").Component<{
     checked?: boolean;
     activeChild?: boolean;

package/dist/components/icons/HkIcon.svelte.d.ts

@@ -1,4 +1,16 @@
 export default HkIcon;
+type HkIcon = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        src: IconSource;
+        size?: string;
+        theme?: string;
+        base?: string;
+        classes?: string;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const HkIcon: import("svelte").Component<{
     src: import("./typedef.js").IconSource;
     size?: string;

package/dist/components/icons/HkTabIcon.svelte.d.ts

@@ -1,4 +1,25 @@
 export default HkTabIcon;
+type HkTabIcon = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        src: IconSource;
+        iconTheme?: string;
+        label?: string;
+        route?: string;
+        active?: boolean;
+        base?: string;
+        bg?: string;
+        padding?: string;
+        margin?: string;
+        classes?: string;
+        iconClasses?: string;
+        iconHeight?: string;
+        labelClasses?: string;
+        rect?: DOMRect;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const HkTabIcon: import("svelte").Component<{
     src: import("./typedef.js").IconSource;
     iconTheme?: string;

package/dist/components/icons/SteezeIcon.svelte.d.ts

@@ -1,4 +1,16 @@
 export default SteezeIcon;
+type SteezeIcon = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        src: IconSource;
+        size?: string;
+        theme?: string;
+        base?: string;
+        classes?: string;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const SteezeIcon: import("svelte").Component<{
     src: import("./typedef.js").IconSource;
     size?: string;

package/dist/components/inputs/text-input/TextInput.svelte.d.ts

@@ -1,4 +1,32 @@
 export default TextInput;
+type TextInput = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        borderShape?: string;
+        classes?: string;
+        inputBase?: string;
+        inputClasses?: string;
+        legendBase?: string;
+        legendClasses?: string;
+        iconClasses?: string;
+        value?: string;
+        type?: "number" | "url" | "text" | "email";
+        pattern?: string;
+        required?: boolean;
+        title?: string;
+        placeholder?: string;
+        isValid?: boolean;
+        isPristine?: boolean;
+        hasFocus?: boolean;
+        validate?: (value: string) => string;
+        iconRequired?: Snippet<[]>;
+        iconValid?: Snippet<[]>;
+        iconInvalid?: Snippet<[]>;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const TextInput: import("svelte").Component<{
     base?: string;
     borderShape?: string;

package/dist/components/layout/grid-layers/GridLayers.svelte.d.ts

@@ -1,4 +1,27 @@
 export default GridLayers;
+type GridLayers = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [attr: string]: any;
+        base?: string;
+        bg?: string;
+        padding?: string;
+        margin?: string;
+        height?: string;
+        classes?: string;
+        style?: string;
+        cellBase?: string;
+        cellBg?: string;
+        cellPadding?: string;
+        cellMargin?: string;
+        cellClasses?: string;
+        cellStyle?: string;
+        children: Snippet<[]>;
+        cellAttrs?: {
+            [attr: string]: any;
+        };
+    }>): void;
+};
 declare const GridLayers: import("svelte").Component<{
     [attr: string]: any;
     base?: string;

package/dist/components/panels/panel/Panel.svelte.d.ts

@@ -1,4 +1,17 @@
 export default Panel;
+type Panel = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        bg?: string;
+        classes?: string;
+        width?: "sm" | "md" | "lg";
+        variant?: string;
+        children?: Snippet<[]>;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const Panel: import("svelte").Component<{
     base?: string;
     bg?: string;

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

@@ -1,4 +1,18 @@
 export default PanelGridRow;
+type PanelGridRow = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        bg?: string;
+        justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch" | "normal";
+        justifyItems?: "start" | "center" | "end" | "stretch";
+        gap?: string;
+        classes?: string;
+        children?: Snippet<[]>;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const PanelGridRow: import("svelte").Component<{
     base?: string;
     bg?: string;

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

@@ -1,4 +1,18 @@
 export default PanelRow2;
+type PanelRow2 = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        bg?: string;
+        justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch" | "normal";
+        justifyItems?: "start" | "center" | "end" | "stretch";
+        gap?: string;
+        classes?: string;
+        children?: Snippet<[]>;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const PanelRow2: import("svelte").Component<{
     base?: string;
     bg?: string;

package/dist/components/tab-bar/HkTabBar.svelte.d.ts

@@ -1,4 +1,22 @@
 export default HkTabBar;
+type HkTabBar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        cols?: number;
+        base?: string;
+        bg?: string;
+        padding?: string;
+        margin?: string;
+        classes?: string;
+        style?: string;
+        instanceKey?: string | Symbol;
+        children: Snippet<[]>;
+        onmount?: Function;
+        domElem?: HTMLElement;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const HkTabBar: import("svelte").Component<{
     cols?: number;
     base?: string;

package/dist/components/tab-bar/HkTabBarSelector.svelte.d.ts

@@ -1,4 +1,23 @@
 export default HkTabBarSelector;
+type HkTabBarSelector = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        bg?: string;
+        classes?: string;
+        boxBase?: string;
+        boxBg?: string;
+        boxPadding?: string;
+        boxMargin?: string;
+        boxClasses?: string;
+        boxAttrs?: {
+            [attr: string]: any;
+        };
+        instanceKey?: string | Symbol;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const HkTabBarSelector: import("svelte").Component<{
     base?: string;
     bg?: string;

package/dist/design/tailwind-theme-extend.d.ts

@@ -10,14 +10,14 @@ export const borderRadius: {
     [x: string]: string;
 };
 export const borderWidth: {
-    [x: string]: string;
+    [key: string]: string;
 };
 export const strokeWidth: {
-    [x: string]: string;
+    [key: string]: string;
 };
 export const outlineWidth: {
-    [x: string]: string;
+    [key: string]: string;
 };
 export const outlineOffset: {
-    [x: string]: string;
+    [key: string]: string;
 };

package/dist/server/logger.d.ts

@@ -22,3 +22,4 @@ export type LoggerExtension = {
  */
 /** @type {pino.Logger & LoggerExtension} */
 export const logger: pino.Logger & LoggerExtension;
+import pino from 'pino';

package/dist/util/design-system/skeleton.d.ts

@@ -36,6 +36,6 @@
  * @param {Object} api - Tailwind plugin API
  * @param {Function} api.addUtilities - Function to add utilities
  */
-export function customUtilitiesPlugin({ addUtilities }: {
+export function customUtilitiesPlugin({ addUtilities, theme }: {
     addUtilities: Function;
 }): void;

package/dist/util/design-system/skeleton.js

@@ -36,8 +36,8 @@
  * @param {Object} api - Tailwind plugin API
  * @param {Function} api.addUtilities - Function to add utilities
  */
-export function customUtilitiesPlugin({ addUtilities }) {
-  const utilities = {
+export function customUtilitiesPlugin({ addUtilities, theme }) {
+  const fontFamilyUtilities = {
     '.font-heading': {
       'font-family': 'var(--heading-font-family)'
     },
@@ -46,7 +46,10 @@ export function customUtilitiesPlugin({ addUtilities }) {
     },
     '.font-ui': {
       'font-family': 'var(--ui-font-family, var(--base-font-family))'
-    },
+    }
+  };
+
+  const textColorUtilities = {
     '.text-base-color': {
       color: 'rgb( var(--base-font-color) )'
     },
@@ -67,5 +70,139 @@ export function customUtilitiesPlugin({ addUtilities }) {
     }
   };
 
-  addUtilities(utilities);
+  const typographyUtilities = generateTypographyUtilities(theme);
+
+  addUtilities({
+    ...typographyUtilities,
+    ...fontFamilyUtilities,
+    ...textColorUtilities
+  });
+}
+
+/**
+ * Generates typography utility classes based on fontSize entries in the
+ * Tailwind theme
+ *
+ * This function creates typography utility classes for entries in the
+ * theme's fontSize configuration that start with 'heading-', 'base-', or
+ * 'ui-' prefixes. Each class includes font size, line height, font weight,
+ * font family, and color properties.
+ *
+ * @param {Function} theme - Tailwind's theme function to access configuration
+ * @returns {Object} An object containing the generated typography utility classes
+ *
+ * @example
+ * // In your Tailwind plugin:
+ * const typographyUtils = generateTypographyUtilities(theme);
+ * addUtilities(typographyUtils);
+ *
+ * @example
+ * // Example output format:
+ * // {
+ * //   '.type-heading-h1': {
+ * //     fontSize: 'calc(32px * var(--scale-text-heading))',
+ * //     lineHeight: '1.25',
+ * //     fontWeight: '700',
+ * //     fontFamily: 'var(--heading-font-family)',
+ * //     fontStyle: 'var(--heading-font-style)',
+ * //     letterSpacing: 'var(--heading-letter-spacing)',
+ * //     color: 'rgb(var(--heading-font-color))'
+ * //   }
+ * // }
+ */
+function generateTypographyUtilities(theme) {
+  // Get font sizes from theme
+  const fontSizes = theme('fontSize');
+
+  // Create typography utilities
+  const typographyUtilities = {};
+
+  // Process all fontSize entries and create type- classes for them
+  Object.entries(fontSizes).forEach(([key, value]) => {
+    // Skip entries that don't match our prefixes
+    if (
+      !key.startsWith('heading-') &&
+      !key.startsWith('base-') &&
+      !key.startsWith('ui-')
+    ) {
+      return;
+    }
+
+    const [size, options] = Array.isArray(value) ? value : [value, {}];
+
+    // Determine properties based on the prefix
+    let properties = {};
+
+    let propertiesDark;
+
+    if (key.startsWith('heading-')) {
+      properties = {
+        lineHeight: options.lineHeight || 'normal',
+        fontFamily: 'var(--heading-font-family)',
+        fontStyle: 'var(--heading-font-style)',
+        fontWeight: 'var(--heading-font-weight)',
+        letterSpacing: 'var(--heading-letter-spacing)',
+        color: 'rgb(var(--heading-font-color))'
+      };
+
+      propertiesDark = {
+        ...properties,
+        color: 'rgb(var(--heading-font-color-dark))'
+      };
+    } else if (key.startsWith('base-')) {
+      properties = {
+        lineHeight: options.lineHeight || 'normal',
+        fontFamily: 'var(--base-font-family)',
+        fontWeight: 'var(--base-font-weight)',
+        letterSpacing: 'var(--base-letter-spacing)',
+        color: 'rgb(var(--base-font-color))'
+      };
+
+      propertiesDark = {
+        ...properties,
+        color: 'rgb(var(--base-font-color-dark))'
+      };
+    } else if (key.startsWith('ui-')) {
+      properties = {
+        lineHeight: options.lineHeight || 'normal',
+        fontFamily: 'var(--ui-font-family, var(--base-font-family))',
+        fontWeight: 'var(--ui-font-weight)',
+        letterSpacing: 'var(--ui-letter-spacing, var(--base-letter-spacing))',
+        color: 'rgb(var(--ui-font-color, var(--base-font-color)))'
+      };
+
+      propertiesDark = {
+        ...properties,
+        color: 'rgb(var(--ui-font-color-dark, var(--base-font-color-dark)))'
+      };
+    }
+
+    // Create the utility class using the original key
+    typographyUtilities[`.type-${key}`] = {
+      fontSize: size,
+      ...properties,
+      // Include any other properties defined in the fontSize options
+      ...Object.fromEntries(
+        Object.entries(options).filter(
+          ([k]) => !['lineHeight'].includes(k)
+        )
+      )
+    };
+
+    // Create the utility class using the original key for dark
+    typographyUtilities[`.type-${key}-dark`] = {
+      fontSize: size,
+      ...propertiesDark,
+      // Include any other properties defined in the fontSize options
+      ...Object.fromEntries(
+        Object.entries(options).filter(
+          ([k]) => !['lineHeight'].includes(k)
+        )
+      )
+    };
+  });
+
+  // console.debug(typographyUtilities);
+
+  return typographyUtilities;
 }

package/dist/util/design-system/tailwind.d.ts

@@ -54,12 +54,18 @@ export function generateTextBasedSpacing(values: number[]): {
 export function generateViewportBasedSpacing(values: number[]): {
     [x: string]: string;
 };
+/**
+ * @typedef {{
+ *   size?: number,
+ *   lineHeight?: number|string
+ *  }} TextStyleSizes
+ */
 /**
  * Generates semantic text style definitions for a specific text category
  * (base, UI, or heading). Each style includes a scaled font size and
  * line height.
  *
- * @param {{[key: string]: {size: number, lineHeight?: number}}} sizes
+ * @param {{[key: string]: TextStyleSizes}} configs
  *   Set of text sizes to generate styles for
  *
  * @param {'base' | 'ui' | 'heading'} category
@@ -73,7 +79,7 @@ export function generateViewportBasedSpacing(values: number[]): {
  * @example
  * const TEXT_BASE_SIZES = {
  *   sm: { size: 16, lineHeight: 1.5 },
- *   base: { size: 20, lineHeight: 1.5 },
+ *   md: { size: 20, lineHeight: 1.5 },
  *   lg: { size: 24, lineHeight: 1.4 }
  * };
  *
@@ -82,18 +88,13 @@ export function generateViewportBasedSpacing(values: number[]): {
  * // {
  * //   'base-sm':
  * //     ['calc(16px * var(--scale-text-base))', { lineHeight: 1.5 }],
- * //   'base-base':
+ * //   'base-md':
  * //     ['calc(20px * var(--scale-text-base))', { lineHeight: 1.5 }],
  * //   'base-lg':
  * //     ['calc(24px * var(--scale-text-base))', { lineHeight: 1.4 }]
  * // }
  */
-export function generateTextStyles(sizes: {
-    [key: string]: {
-        size: number;
-        lineHeight?: number;
-    };
-}, category: "base" | "ui" | "heading"): {
+export function generateTextStyles(sizes: any, category: "base" | "ui" | "heading"): {
     [key: string]: [string, {
         lineHeight: number;
     }];
@@ -174,3 +175,7 @@ export function generateWidthStyles(sizes: {
 }, prefix?: string, scaleVar?: string): {
     [key: string]: string;
 };
+export type TextStyleSizes = {
+    size?: number;
+    lineHeight?: number | string;
+};

package/dist/util/design-system/tailwind.js

@@ -93,12 +93,19 @@ export function generateViewportBasedSpacing(values) {
   }, {});
 }
 
+/**
+ * @typedef {{
+ *   size?: number,
+ *   lineHeight?: number|string
+ *  }} TextStyleSizes
+ */
+
 /**
  * Generates semantic text style definitions for a specific text category
  * (base, UI, or heading). Each style includes a scaled font size and
  * line height.
  *
- * @param {{[key: string]: {size: number, lineHeight?: number}}} sizes
+ * @param {{[key: string]: TextStyleSizes}} configs
  *   Set of text sizes to generate styles for
  *
  * @param {'base' | 'ui' | 'heading'} category
@@ -112,7 +119,7 @@ export function generateViewportBasedSpacing(values) {
  * @example
  * const TEXT_BASE_SIZES = {
  *   sm: { size: 16, lineHeight: 1.5 },
- *   base: { size: 20, lineHeight: 1.5 },
+ *   md: { size: 20, lineHeight: 1.5 },
  *   lg: { size: 24, lineHeight: 1.4 }
  * };
  *
@@ -121,7 +128,7 @@ export function generateViewportBasedSpacing(values) {
  * // {
  * //   'base-sm':
  * //     ['calc(16px * var(--scale-text-base))', { lineHeight: 1.5 }],
- * //   'base-base':
+ * //   'base-md':
  * //     ['calc(20px * var(--scale-text-base))', { lineHeight: 1.5 }],
  * //   'base-lg':
  * //     ['calc(24px * var(--scale-text-base))', { lineHeight: 1.4 }]
@@ -129,7 +136,7 @@ export function generateViewportBasedSpacing(values) {
  */
 export function generateTextStyles(sizes, category) {
   if (!sizes || typeof sizes !== 'object') {
-    throw new Error('sizes must be an object');
+    throw new Error('configs must be an object');
   }
 
   if (!['base', 'ui', 'heading'].includes(category)) {
@@ -150,20 +157,12 @@ export function generateTextStyles(sizes, category) {
       );
     }
 
-    if (
-      config.lineHeight !== undefined &&
-      typeof config.lineHeight !== 'number'
-    ) {
-      throw new Error(
-        `Invalid lineHeight for "${category}-${variant}": must be a number`
-      );
-    }
-
-    const { size, lineHeight = 1.5 } = config;
+    const extraProps = { ...config };
+    delete extraProps.size;
 
     result[`${category}-${variant}`] = [
-      `calc(${size}px * var(--scale-text-${category}))`,
-      { lineHeight }
+      `calc(${config.size}px * var(--scale-text-${category}))`,
+      extraProps
     ];
 
     return result;

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

@@ -1,4 +1,20 @@
 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;
+        select?: (label: string) => void;
+        buttonSnippet: Snippet<[{
+            text: string;
+            props: any;
+        }]>;
+    }>): void;
+};
 declare const ButtonGroup: import("svelte").Component<{
     [attr: string]: any;
     base?: string;

package/dist/widgets/compare-left-right/CompareLeftRight.svelte.d.ts

@@ -1,4 +1,14 @@
 export default CompareLeftRight;
+type CompareLeftRight = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        leftContent?: Snippet<[]>;
+        rightContent?: Snippet<[]>;
+        classes?: string;
+        dividerColor?: string;
+        handleColor?: string;
+    } & Record<string, any>>): void;
+};
 declare const CompareLeftRight: import("svelte").Component<{
     leftContent?: import("svelte").Snippet;
     rightContent?: import("svelte").Snippet;

package/dist/widgets/game-box/GameBox.svelte.d.ts

@@ -1,4 +1,45 @@
 export default GameBox;
+type GameBox = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [attr: string]: any;
+        base?: string;
+        bg?: string;
+        classes?: string;
+        style?: string;
+        aspectOnLandscape?: number;
+        aspectOnPortrait?: number;
+        enableScaling?: boolean;
+        designLandscape?: {
+            width: number;
+            height: number;
+        };
+        designPortrait?: {
+            width: number;
+            height: number;
+        };
+        clamping?: {
+            ui: {
+                min: number;
+                max: number;
+            };
+            textBase: {
+                min: number;
+                max: number;
+            };
+            textHeading: {
+                min: number;
+                max: number;
+            };
+            textUi: {
+                min: number;
+                max: number;
+            };
+        };
+        snippetLandscape?: Snippet<[]>;
+        snippetPortrait?: Snippet<[]>;
+    }>): void;
+};
 declare const GameBox: import("svelte").Component<{
     [attr: string]: any;
     base?: string;

package/dist/widgets/hk-app-layout/HkAppLayout.svelte.d.ts

@@ -1,4 +1,8 @@
 export default HkAppLayout;
+type HkAppLayout = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<AppLayoutProps>): void;
+};
 declare const HkAppLayout: import("svelte").Component<{
     bgPageSnippet?: import("svelte").Snippet | undefined;
     bgSnippet?: import("svelte").Snippet | undefined;
@@ -6,3 +10,10 @@ declare const HkAppLayout: import("svelte").Component<{
     bottomSnippet?: import("svelte").Snippet | undefined;
     children: import("svelte").Snippet;
 }, {}, "">;
+type AppLayoutProps = {
+    bgPageSnippet?: import("svelte").Snippet | undefined;
+    bgSnippet?: import("svelte").Snippet | undefined;
+    topSnippet?: import("svelte").Snippet | undefined;
+    bottomSnippet?: import("svelte").Snippet | undefined;
+    children: import("svelte").Snippet;
+};

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

@@ -1,4 +1,24 @@
 export default ImageBox;
+type ImageBox = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [attr: string]: any;
+        base?: string;
+        bg?: string;
+        classes?: string;
+        width?: string;
+        height?: string;
+        aspect?: string;
+        overflow?: string;
+        fit?: "fill" | "cover" | "contain";
+        position?: string;
+        imageMeta?: ImageMeta | ImageMeta[];
+        imageLoader?: ImageLoader;
+        alt?: string;
+        id?: string | Symbol;
+        onProgress?: (progress: LoadingProgress, id: string | Symbol) => void;
+    }>): void;
+};
 declare const ImageBox: import("svelte").Component<{
     [attr: string]: any;
     base?: string;

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

@@ -1,4 +1,23 @@
 export default ImageSlide;
+type ImageSlide = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [attr: string]: any;
+        imageMeta?: any;
+        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?: any | any[];

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

@@ -1,4 +1,14 @@
 export default Presenter;
+type Presenter = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        classes?: string;
+        slides?: Slide[];
+        presenterRef?: PresenterRef;
+        layoutSnippet: Snippet<[Slide, Layer]>;
+        loadingSnippet?: Snippet<[]>;
+    }>): void;
+};
 declare const Presenter: import("svelte").Component<{
     classes?: string;
     slides?: import("./typedef.js").Slide[];

package/dist/widgets/virtual-viewport/VirtualViewport.svelte.d.ts

@@ -1,4 +1,26 @@
 export default VirtualViewport;
+type VirtualViewport = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [attr: string]: any;
+        base?: string;
+        bg?: string;
+        classes?: string;
+        width?: string;
+        height?: string;
+        overflow?: string;
+        designWidth?: number;
+        designHeight?: number;
+        scaleViewport?: number;
+        scaleW?: number;
+        scaleH?: number;
+        scaleUI?: number;
+        scaleTextBase?: number;
+        scaleTextHeading?: number;
+        scaleTextUI?: number;
+        children?: Snippet<[]>;
+    }>): void;
+};
 declare const VirtualViewport: import("svelte").Component<{
     [attr: string]: any;
     base?: string;

package/package.json

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