@hkdigital/lib-sveltekit 0.1.16 → 0.1.18

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

@@ -7,7 +7,7 @@
    *   bg?: string,
    *   classes?: string,
    *   type?: string,
-   *   role?: 'primary' | 'secondary',
+   *   role?: 'primary' | 'secondary' | 'tertiary' | 'custom',
    *   size?: 'sm' | 'md' | 'lg',
    *   variant?: string,
    *   active?: boolean,

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

@@ -7,7 +7,7 @@ type Button = {
         bg?: string;
         classes?: string;
         type?: string;
-        role?: "primary" | "secondary";
+        role?: "custom" | "primary" | "secondary" | "tertiary";
         size?: "sm" | "md" | "lg";
         variant?: string;
         active?: boolean;
@@ -26,7 +26,7 @@ declare const Button: import("svelte").Component<{
     bg?: string;
     classes?: string;
     type?: string;
-    role?: "primary" | "secondary";
+    role?: "primary" | "secondary" | "tertiary" | "custom";
     size?: "sm" | "md" | "lg";
     variant?: string;
     active?: boolean;

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

@@ -0,0 +1,146 @@
+<script>
+  import { onMount } from 'svelte';
+  import { DESIGN, CLAMPING } from '../../../design/design-config.js';
+  import {
+    enableScalingUI,
+    getAllRootScalingVars
+  } from '../../../util/design-system/index.js';
+
+  /**
+   * Holds the current scaling values for the debug panel
+   * @type {Object}
+   */
+  let scalingValues = $state({
+    scaleW: 0,
+    scaleH: 0,
+    scaleViewport: 0,
+    scaleUI: 0,
+    scaleTextBase: 0,
+    scaleTextHeading: 0,
+    scaleTextUI: 0
+  });
+
+  /**
+   * Controls visibility of the debug panel
+   */
+  let showDebugPanel = $state(false);
+
+  /**
+   * Updates scaling values for the debug panel
+   */
+  function updateDebugValues() {
+    // Get scaling values
+    scalingValues = getAllRootScalingVars();
+
+    // Update window size display if in browser context
+    if (typeof window !== 'undefined') {
+      const windowSizeElement = document.getElementById('window-size');
+      if (windowSizeElement) {
+        windowSizeElement.textContent = `${window.innerWidth}×${window.innerHeight}px`;
+      }
+    }
+  }
+
+  onMount(() => {
+    // Initialize the design scaling system
+    //const cleanup = () => {};
+    const cleanup = enableScalingUI(DESIGN, CLAMPING);
+
+    // Update debug values initially
+    updateDebugValues();
+
+    // Set up event listener for updating debug values on resize
+    window.addEventListener('resize', updateDebugValues);
+
+    // Return combined cleanup function
+    return () => {
+      cleanup();
+      window.removeEventListener('resize', updateDebugValues);
+    };
+  });
+
+  /**
+   * Toggle debug panel visibility
+   */
+  function toggleDebugPanel() {
+    showDebugPanel = !showDebugPanel;
+  }
+
+  /**
+   * Format a number to 2 decimal places
+   * @param {number} value - The number to format
+   * @returns {string} Formatted number
+   */
+  function formatNumber(value) {
+    return value.toFixed(2);
+  }
+</script>
+
+<!-- Debug Panel -->
+{#if showDebugPanel}
+  <div
+    class="fixed bottom-0 right-0 bg-black bg-opacity-75 text-white p-2 text-ui-md z-50 font-mono"
+  >
+    <div class="flex justify-between items-center mb-1">
+      <h3 class="font-bold">Design System Scaling</h3>
+      <button
+        onclick={toggleDebugPanel}
+        class="ml-2 px-1.5 bg-gray-700 hover:bg-gray-600 rounded"
+      >
+        &times;
+      </button>
+    </div>
+    <div class="grid grid-cols-2 gap-x-2 gap-y-0.5">
+      <div class="text-gray-400">Design Width:</div>
+      <div>{DESIGN.width}px</div>
+
+      <div class="text-gray-400">Design Height:</div>
+      <div>{DESIGN.height}px</div>
+
+      <div class="text-gray-400">Window:</div>
+      <div id="window-size">...</div>
+
+      <div class="text-gray-400">Scale W:</div>
+      <div>{formatNumber(scalingValues.scaleW)}</div>
+
+      <div class="text-gray-400">Scale H:</div>
+      <div>{formatNumber(scalingValues.scaleH)}</div>
+
+      <div class="text-gray-400">Viewport:</div>
+      <div>{formatNumber(scalingValues.scaleViewport)}</div>
+
+      <div class="text-gray-400">UI:</div>
+      <div>{formatNumber(scalingValues.scaleUI)}</div>
+
+      <div class="text-gray-400">Text Content:</div>
+      <div>{formatNumber(scalingValues.scaleTextBase)}</div>
+
+      <div class="text-gray-400">Text Heading:</div>
+      <div>{formatNumber(scalingValues.scaleTextHeading)}</div>
+
+      <div class="text-gray-400">Text UI:</div>
+      <div>{formatNumber(scalingValues.scaleTextUI)}</div>
+    </div>
+
+    <div class="mt-1 pt-1 border-t border-gray-600 text-gray-400">
+      <div>Clamping:</div>
+      <div class="grid grid-cols-3 text-2xs">
+        <div>UI: {CLAMPING.ui.min} - {CLAMPING.ui.max}</div>
+        <div>
+          Content: {CLAMPING.textBase.min} - {CLAMPING.textBase.max}
+        </div>
+        <div>
+          Heading: {CLAMPING.textHeading.min} - {CLAMPING.textHeading.max}
+        </div>
+      </div>
+    </div>
+  </div>
+{:else}
+  <!-- Debug Panel Toggle Button -->
+  <button
+    onclick={toggleDebugPanel}
+    class="fixed bottom-0 right-0 bg-black bg-opacity-75 text-white p-16ut py-8ut text-ui-md z-50 font-mono hover:bg-opacity-90"
+  >
+    Show Debug
+  </button>
+{/if}

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

@@ -0,0 +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/debug/index.d.ts

@@ -0,0 +1 @@
+export { default as DebugPanelDesignScaling } from "./debug-panel-design-scaling/DebugPanelDesignScaling.svelte";

package/dist/components/debug/index.js

@@ -0,0 +1 @@
+export { default as DebugPanelDesignScaling } from './debug-panel-design-scaling/DebugPanelDesignScaling.svelte';

package/dist/components/layout/HkAppLayout.svelte

@@ -241,11 +241,11 @@
 		grid-area: 1 / 1 / 2 / 2; /* row-start, col-start, row-end, col-end */
 	}
 
-	:global(html:not(.no-scrollbar-shift-fix)) {
-		/*
+	/*
     * Shift contents of page to the left when scrollbar appears,
     * so content like tab bars stay centered
     */
+	/*:global(html:not(.no-scrollbar-shift-fix)) {
 		padding-left: calc(100vw - 100%);
-	}
+	}*/
 </style>

package/dist/components/layout/game-box/GameBox.svelte

@@ -0,0 +1,167 @@
+<script>
+  import { onMount } from 'svelte';
+  import {
+    getGameWidthOnLandscape,
+    getGameWidthOnPortrait
+  } from './gamebox.util.js';
+  import { enableContainerScaling } from '../../../util/design-system/index.js';
+
+  /**
+   * @type {{
+   *   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?: import('svelte').Snippet,
+   *   snippetPortrait?: import('svelte').Snippet,
+   *   [attr: string]: any
+   * }}
+   */
+  const {
+    // > Style
+    base = '',
+    bg = '',
+    classes = '',
+    style = '',
+
+    // > Functional properties
+    aspectOnLandscape,
+    aspectOnPortrait,
+
+    // > Scaling options
+    enableScaling = false,
+    designLandscape = { width: 1920, height: 1080 },
+    designPortrait = { width: 1080, height: 1920 },
+    clamping = {
+      ui: { min: 0.3, max: 2 },
+      textBase: { min: 0.75, max: 1.5 },
+      textHeading: { min: 0.75, max: 2.25 },
+      textUi: { min: 0.5, max: 1.25 }
+    },
+
+    // > Snippets
+    snippetLandscape,
+    snippetPortrait
+  } = $props();
+
+  // > Game dimensions and state
+  let windowWidth = $state();
+  let windowHeight = $state();
+  let gameWidth = $state();
+  let gameHeight = $state();
+  let isLandscape = $derived(windowWidth > windowHeight);
+
+  // Game container reference
+  let gameContainer = $state();
+
+  // Update game dimensions based on window size and orientation
+  $effect(() => {
+    if (!windowWidth || !windowHeight) return;
+
+    let gameAspect;
+
+    if (windowWidth > windowHeight) {
+      gameWidth = getGameWidthOnLandscape({
+        windowWidth,
+        windowHeight,
+        aspectOnLandscape
+      });
+      gameAspect = aspectOnLandscape;
+    } else {
+      gameWidth = getGameWidthOnPortrait({
+        windowWidth,
+        windowHeight,
+        aspectOnPortrait
+      });
+      gameAspect = aspectOnPortrait;
+    }
+
+    if (gameAspect) {
+      gameHeight = gameWidth / gameAspect;
+    } else {
+      gameHeight = windowHeight;
+    }
+  });
+
+  // Set up scaling if enabled, with orientation awareness
+  $effect(() => {
+    if (!enableScaling || !gameContainer || !gameWidth || !gameHeight) {
+      return () => {}; // No-op cleanup if scaling not enabled or required elements missing
+    }
+
+    // Select the appropriate design based on orientation
+    const activeDesign = isLandscape ? designLandscape : designPortrait;
+
+    // Log to help debug
+    console.debug(
+      `GameBox scaling [${isLandscape ? 'landscape' : 'portrait'}]:`,
+      `game: ${gameWidth}x${gameHeight}`,
+      `design: ${activeDesign.width}x${activeDesign.height}`
+    );
+
+    // Apply scaling with the current design based on orientation
+    return enableContainerScaling({
+      container: gameContainer,
+      design: activeDesign,
+      clamping,
+      getDimensions: () => ({
+        width: gameWidth,
+        height: gameHeight
+      })
+    });
+  });
+
+  onMount(() => {
+    const gameBoxNoScroll = 'game-box-no-scroll';
+    const html = document.documentElement;
+    html.classList.add(gameBoxNoScroll);
+
+    return () => {
+      html.classList.remove(gameBoxNoScroll);
+    };
+  });
+</script>
+
+<svelte:window bind:innerWidth={windowWidth} bind:innerHeight={windowHeight} />
+
+{#if gameHeight}
+  <div
+    data-component="game-box"
+    data-orientation={isLandscape ? 'landscape' : 'portrait'}
+    bind:this={gameContainer}
+    class="{base} {bg} {classes}"
+    style:width="{gameWidth}px"
+    style:height="{gameHeight}px"
+    style:--game-width={gameWidth}
+    style:--game-height={gameHeight}
+    {style}
+  >
+    {#if isLandscape}
+      {@render snippetLandscape()}
+    {:else}
+      {@render snippetPortrait()}
+    {/if}
+  </div>
+{/if}
+
+<style>
+  :global(html.game-box-no-scroll) {
+    overflow: clip;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+  }
+  :global(html.game-box-no-scroll::-webkit-scrollbar) {
+    display: none;
+  }
+</style>

package/dist/components/layout/game-box/GameBox.svelte.d.ts

@@ -0,0 +1,80 @@
+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;
+    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?: import("svelte").Snippet;
+    snippetPortrait?: import("svelte").Snippet;
+}, {}, "">;

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

@@ -0,0 +1,167 @@
+<script>
+	/**
+	 * Grid Layers Component
+	 *
+	 * A component that creates a single-cell grid where all children exist
+	 * in the same grid cell, allowing them to be positioned independently
+	 * and stacked on top of each other. Perfect for complex layouts like
+	 * overlaying text on images, card stacks, positioning UI elements, etc.
+	 *
+	 * Each child can use grid positioning properties (justify-self-*, self-*)
+	 * for precise placement. Children can control stacking order with z-index.
+	 *
+	 * @example Basic usage with 9-position grid
+	 * ```html
+	 * <GridLayers classes="border w-[500px] h-[500px]">
+	 *   <!-- Top Row -->
+	 *   <div class="justify-self-start self-start">
+	 *     <div class="bg-blue-500 w-[100px] h-[100px]">
+	 *       Top Left
+	 *     </div>
+	 *   </div>
+	 *   <div class="justify-self-center self-start">
+	 *     <div class="bg-blue-300 w-[100px] h-[100px]">
+	 *       Top Center
+	 *     </div>
+	 *   </div>
+	 *   <div class="justify-self-end self-start">
+	 *     <div class="bg-blue-500 w-[100px] h-[100px]">
+	 *       Top Right
+	 *     </div>
+	 *   </div>
+	 *
+	 *   <!-- Middle Row -->
+	 *   <div class="justify-self-start self-center">
+	 *     <div class="bg-green-500 w-[100px] h-[100px]">
+	 *       Middle Left
+	 *     </div>
+	 *   </div>
+	 *   <div class="justify-self-center self-center">
+	 *     <div class="bg-green-300 w-[100px] h-[100px]">
+	 *       Middle Center
+	 *     </div>
+	 *   </div>
+	 *   <div class="justify-self-end self-center">
+	 *     <div class="bg-green-500 w-[100px] h-[100px]">
+	 *       Middle Right
+	 *     </div>
+	 *   </div>
+	 *
+	 *   <!-- Bottom Row -->
+	 *   <div class="justify-self-start self-end">
+	 *     <div class="bg-red-500 w-[100px] h-[100px]">
+	 *       Bottom Left
+	 *     </div>
+	 *   </div>
+	 *   <div class="justify-self-center self-end">
+	 *     <div class="bg-red-300 w-[100px] h-[100px]">
+	 *       Bottom Center
+	 *     </div>
+	 *   </div>
+	 *   <div class="justify-self-end self-end">
+	 *     <div class="bg-red-500 w-[100px] h-[100px]">
+	 *       Bottom Right
+	 *     </div>
+	 *   </div>
+	 * </GridLayers>
+	 * ```
+	 *
+	 * @example Text over image
+	 * ```html
+	 * <GridLayers classes="w-full h-[300px]">
+	 *   <!-- Background image layer -->
+	 *   <div class="justify-self-stretch self-stretch z-0">
+	 *     <img
+	 *       src="/images/landscape.jpg"
+	 *       alt="Landscape"
+	 *       class="w-full h-full object-cover"
+	 *     />
+	 *   </div>
+	 *
+	 *   <!-- Text overlay layer -->
+	 *   <div class="justify-self-center self-center z-10">
+	 *     <div class="bg-black/50 p-16up text-white
+	 *                 font-ui rounded-md">
+	 *       <h2 class="text-2xl">Explore Nature</h2>
+	 *       <p>Discover the beauty of the outdoors</p>
+	 *     </div>
+	 *   </div>
+	 * </GridLayers>
+	 * ```
+	 */
+
+	/**
+	 * @type {{
+	 *   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: import('svelte').Snippet,
+	 *   cellAttrs?: { [attr: string]: * },
+	 *   [attr: string]: any
+	 * }}
+	 */
+	const {
+		// Style
+		base,
+		bg,
+		padding,
+		margin,
+		height,
+		classes,
+		style,
+		cellBase,
+		cellBg,
+		cellPadding,
+		cellMargin,
+		cellClasses,
+		cellStyle,
+
+		cellAttrs,
+
+		// Snippets
+		children,
+
+		// Attributes
+		...attrs
+	} = $props();
+</script>
+
+<div
+	data-component="grid-layers"
+	class="relative {base} {bg} {height} {classes} {margin} {padding}"
+	{style}
+	{...attrs}
+>
+	<div
+		data-section="layer"
+		class="absolute inset-0 grid {cellBase} {cellBg} {cellPadding} {cellMargin} {cellClasses}"
+		style={cellStyle}
+	>
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	/* All children of the layer share the same grid area
+	   but aren't absolutely positioned */
+	[data-section='layer'] {
+		grid-template-columns: 1fr;
+		grid-template-rows: 1fr;
+	}
+
+	[data-section='layer'] > :global(*) {
+		grid-column: 1;
+		grid-row: 1;
+		z-index: 0; /* Base z-index to allow explicit stacking order */
+	}
+</style>

package/dist/components/layout/{HkGridLayers.svelte.d.ts → grid-layers/GridLayers.svelte.d.ts}

@@ -1,7 +1,8 @@
-export default HkGridLayers;
-type HkGridLayers = {
+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;
@@ -9,20 +10,20 @@ type HkGridLayers = {
         height?: string;
         classes?: string;
         style?: string;
-        boxBase?: string;
-        boxBg?: string;
-        boxPadding?: string;
-        boxMargin?: string;
-        boxClasses?: string;
-        boxAttrs?: {
+        cellBase?: string;
+        cellBg?: string;
+        cellPadding?: string;
+        cellMargin?: string;
+        cellClasses?: string;
+        cellStyle?: string;
+        children: Snippet<[]>;
+        cellAttrs?: {
             [attr: string]: any;
         };
-        children: Snippet<[]>;
-    } & {
-        [attr: string]: any;
     }>): void;
 };
-declare const HkGridLayers: import("svelte").Component<{
+declare const GridLayers: import("svelte").Component<{
+    [attr: string]: any;
     base?: string;
     bg?: string;
     padding?: string;
@@ -30,15 +31,14 @@ declare const HkGridLayers: import("svelte").Component<{
     height?: string;
     classes?: string;
     style?: string;
-    boxBase?: string;
-    boxBg?: string;
-    boxPadding?: string;
-    boxMargin?: string;
-    boxClasses?: string;
-    boxAttrs?: {
+    cellBase?: string;
+    cellBg?: string;
+    cellPadding?: string;
+    cellMargin?: string;
+    cellClasses?: string;
+    cellStyle?: string;
+    children: import("svelte").Snippet;
+    cellAttrs?: {
         [attr: string]: any;
     };
-    children: import("svelte").Snippet;
-} & {
-    [attr: string]: any;
 }, {}, "">;

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

@@ -1,3 +1,5 @@
 export { default as HkAppLayout } from "./HkAppLayout.svelte";
-export { default as HkGridLayers } from "./HkGridLayers.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

@@ -6,4 +6,6 @@ export {
 
 export { default as HkAppLayout } from './HkAppLayout.svelte';
 
-export { default as HkGridLayers } from './HkGridLayers.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/util/design-system/layout/scaling.d.ts

@@ -1,3 +1,57 @@
+/**
+ * Manages responsive design scaling by calculating and applying scale factors
+ * based on container dimensions and design system requirements.
+ *
+ * @param {Object} options - Configuration options
+ * @param {HTMLElement} options.container - The container element to apply scaling to
+ * @param {Object} options.design - The base design dimensions
+ * @param {number} options.design.width - The reference design width
+ * @param {number} options.design.height - The reference design height
+ * @param {Object} options.clamping - The min/max values for various scale factors
+ * @param {Object} options.clamping.ui - UI element scaling constraints
+ * @param {number} options.clamping.ui.min - Minimum UI scale factor
+ * @param {number} options.clamping.ui.max - Maximum UI scale factor
+ * @param {Object} options.clamping.textBase - Base text scaling constraints
+ * @param {number} options.clamping.textBase.min - Minimum base text scale factor
+ * @param {number} options.clamping.textBase.max - Maximum base text scale factor
+ * @param {Object} options.clamping.textHeading - Heading text scaling constraints
+ * @param {number} options.clamping.textHeading.min - Minimum heading text scale factor
+ * @param {number} options.clamping.textHeading.max - Maximum heading text scale factor
+ * @param {Object} options.clamping.textUi - UI text scaling constraints
+ * @param {number} options.clamping.textUi.min - Minimum UI text scale factor
+ * @param {number} options.clamping.textUi.max - Maximum UI text scale factor
+ * @param {Function} [options.getDimensions] - Optional function to get width and height
+ * @param {boolean} [options.useResizeObserver=true] - Whether to use ResizeObserver
+ *
+ * @returns {()=>void} A cleanup function that removes event listeners and observers
+ */
+export function enableContainerScaling({ container, design, clamping, getDimensions, useResizeObserver }: {
+    container: HTMLElement;
+    design: {
+        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;
+        };
+    };
+    getDimensions?: Function;
+    useResizeObserver?: boolean;
+}): () => void;
 /**
  * Manages responsive design scaling by calculating and applying scale factors
  * based on viewport dimensions and design system requirements.

package/dist/util/design-system/layout/scaling.js

@@ -1,5 +1,136 @@
 import { clamp } from '../css/clamp.js';
 
+/**
+ * Manages responsive design scaling by calculating and applying scale factors
+ * based on container dimensions and design system requirements.
+ *
+ * @param {Object} options - Configuration options
+ * @param {HTMLElement} options.container - The container element to apply scaling to
+ * @param {Object} options.design - The base design dimensions
+ * @param {number} options.design.width - The reference design width
+ * @param {number} options.design.height - The reference design height
+ * @param {Object} options.clamping - The min/max values for various scale factors
+ * @param {Object} options.clamping.ui - UI element scaling constraints
+ * @param {number} options.clamping.ui.min - Minimum UI scale factor
+ * @param {number} options.clamping.ui.max - Maximum UI scale factor
+ * @param {Object} options.clamping.textBase - Base text scaling constraints
+ * @param {number} options.clamping.textBase.min - Minimum base text scale factor
+ * @param {number} options.clamping.textBase.max - Maximum base text scale factor
+ * @param {Object} options.clamping.textHeading - Heading text scaling constraints
+ * @param {number} options.clamping.textHeading.min - Minimum heading text scale factor
+ * @param {number} options.clamping.textHeading.max - Maximum heading text scale factor
+ * @param {Object} options.clamping.textUi - UI text scaling constraints
+ * @param {number} options.clamping.textUi.min - Minimum UI text scale factor
+ * @param {number} options.clamping.textUi.max - Maximum UI text scale factor
+ * @param {Function} [options.getDimensions] - Optional function to get width and height
+ * @param {boolean} [options.useResizeObserver=true] - Whether to use ResizeObserver
+ *
+ * @returns {()=>void} A cleanup function that removes event listeners and observers
+ */
+export function enableContainerScaling({
+  container,
+  design,
+  clamping,
+  getDimensions,
+  useResizeObserver = true
+}) {
+  if (!container) {
+    throw new Error('Container element is required for enableContainerScaling');
+  }
+
+  let resizeObserver;
+
+  /**
+   * Updates CSS scale variables based on container dimensions
+   * and design system constraints
+   */
+  function updateScaleValues() {
+    try {
+      let containerWidth, containerHeight;
+
+      // Use custom dimension getter if provided
+      if (typeof getDimensions === 'function') {
+        const dimensions = getDimensions();
+        containerWidth = dimensions.width;
+        containerHeight = dimensions.height;
+      } else {
+        // Otherwise use container's client dimensions
+        const rect = container.getBoundingClientRect();
+        containerWidth = rect.width;
+        containerHeight = rect.height;
+      }
+
+      // Skip update if dimensions are zero (container not visible)
+      if (containerWidth <= 0 || containerHeight <= 0) {
+        return;
+      }
+
+      // Calculate scale factors based on container size relative to design dimensions
+      const scaleW = containerWidth / design.width;
+      const scaleH = containerHeight / design.height;
+
+      // Use the smaller scale factor to ensure content fits within container
+      const scaleViewport = Math.min(scaleW, scaleH);
+
+      // Apply clamping to different element types
+      const scaleUI = clamp(clamping.ui.min, scaleViewport, clamping.ui.max);
+
+      const scaleTextBase = clamp(
+        clamping.textBase.min,
+        scaleViewport,
+        clamping.textBase.max
+      );
+
+      const scaleTextHeading = clamp(
+        clamping.textHeading.min,
+        scaleViewport,
+        clamping.textHeading.max
+      );
+
+      const scaleTextUi = clamp(
+        clamping.textUi.min,
+        scaleViewport,
+        clamping.textUi.max
+      );
+
+      // Set CSS custom properties on the container
+      container.style.setProperty('--scale-w', String(scaleW));
+      container.style.setProperty('--scale-h', String(scaleH));
+      container.style.setProperty('--scale-viewport', String(scaleViewport));
+      container.style.setProperty('--scale-ui', String(scaleUI));
+      container.style.setProperty('--scale-text-base', String(scaleTextBase));
+      container.style.setProperty(
+        '--scale-text-heading',
+        String(scaleTextHeading)
+      );
+      container.style.setProperty('--scale-text-ui', String(scaleTextUi));
+    } catch (error) {
+      console.error('Error updating container scale values:', error);
+    }
+  }
+
+  // Initialize scales
+  updateScaleValues();
+
+  // Set up ResizeObserver for container resize detection
+  if (useResizeObserver && typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver(updateScaleValues);
+    resizeObserver.observe(container);
+  } else {
+    // Fallback to window resize event
+    window.addEventListener('resize', updateScaleValues);
+  }
+
+  // Return cleanup function
+  return function cleanup() {
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+    } else {
+      window.removeEventListener('resize', updateScaleValues);
+    }
+  };
+}
+
 /**
  * Manages responsive design scaling by calculating and applying scale factors
  * based on viewport dimensions and design system requirements.

package/package.json

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

package/dist/components/boxes/game-box/GameBox.svelte

@@ -1,112 +0,0 @@
-<script>
-  import {
-    getGameWidthOnLandscape,
-    getGameWidthOnPortrait
-  } from './gamebox.util.js';
-
-  /**
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   classes?: string,
-   *   style?: string,
-   *   aspectOnLandscape? :number,
-   *   aspectOnPortrait? :number,
-   *   onLandscape?: import('svelte').Snippet,
-   *   onPortrait?: import('svelte').Snippet
-   * } & { [attr: string]: any }}
-   */
-  const {
-    // > Style
-    base,
-    bg,
-    classes,
-    style,
-
-    // > Functional
-    aspectOnLandscape,
-    aspectOnPortrait,
-
-    // >Snippets
-    snippetLandscape,
-    snippetPortrait
-  } = $props();
-
-  // > Game width and height
-
-  let windowWidth = $state();
-  let windowHeight = $state();
-
-  let gameWidth = $state();
-  let gameHeight = $state();
-
-  let isLandscape = $derived(gameWidth > gameHeight);
-
-  $effect(() => {
-    // Determine game width and height from
-    // window dimensions and desired game aspect
-
-    let gameAspect;
-
-    if (windowWidth > windowHeight) {
-      gameWidth = getGameWidthOnLandscape({
-        windowWidth,
-        windowHeight,
-        aspectOnLandscape
-      });
-
-      gameAspect = aspectOnLandscape;
-    } else {
-      gameWidth = getGameWidthOnPortrait({
-        windowWidth,
-        windowHeight,
-        aspectOnPortrait
-      });
-
-      gameAspect = aspectOnPortrait;
-    }
-
-    if (gameAspect) {
-      gameHeight = gameWidth / gameAspect;
-    } else {
-      gameHeight = windowHeight;
-    }
-  });
-
-  // $inspect({ windowWidth, windowHeight, gameWidth, gameHeight, isLandscape });
-
-  // $effect(() => {
-  //   console.log({
-  //     windowWidth,
-  //     windowHeight,
-  //     gameWidth,
-  //     gameHeight,
-  //     isLandscape
-  //   });
-  // });
-</script>
-
-<svelte:window bind:innerWidth={windowWidth} bind:innerHeight={windowHeight} />
-
-{#if gameHeight}
-  <!-- <div
-    data-boxes="game-box"
-    class="{base} {bg} {classes}"
-    style="width: {gameWidth}px; height: {gameHeight}px;--game-width={gameWidth};--game-height={gameHeight}; {style}" -->
-
-  <div
-    data-boxes="game-box"
-    class="{base} {bg} {classes}"
-    style:width="{gameWidth}px"
-    style:height="{gameHeight}px"
-    style:--game-width={gameWidth}
-    style:--game-height={gameHeight}
-    {style}
-  >
-    {#if isLandscape}
-      {@render snippetLandscape()}
-    {:else}
-      {@render snippetPortrait()}
-    {/if}
-  </div>
-{/if}

package/dist/components/boxes/game-box/GameBox.svelte.d.ts

@@ -1,28 +0,0 @@
-export default GameBox;
-type GameBox = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<{
-        base?: string;
-        bg?: string;
-        classes?: string;
-        style?: string;
-        aspectOnLandscape?: number;
-        aspectOnPortrait?: number;
-        onLandscape?: Snippet<[]>;
-        onPortrait?: Snippet<[]>;
-    } & {
-        [attr: string]: any;
-    }>): void;
-};
-declare const GameBox: import("svelte").Component<{
-    base?: string;
-    bg?: string;
-    classes?: string;
-    style?: string;
-    aspectOnLandscape?: number;
-    aspectOnPortrait?: number;
-    onLandscape?: import("svelte").Snippet;
-    onPortrait?: import("svelte").Snippet;
-} & {
-    [attr: string]: any;
-}, {}, "">;

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

@@ -1,2 +0,0 @@
-export { default as GameBox } from "./game-box/GameBox.svelte";
-export { default as VirtualViewport } from "./virtual-viewport/VirtualViewport.svelte";

package/dist/components/boxes/index.js

@@ -1,2 +0,0 @@
-export { default as GameBox } from './game-box/GameBox.svelte';
-export { default as VirtualViewport } from './virtual-viewport/VirtualViewport.svelte';

package/dist/components/layout/HkGridLayers.svelte

@@ -1,82 +0,0 @@
-<script>
-	/**
-	 * Grid Layers component
-	 * This is a grid with only one cell. All direct children are
-	 * place in the same cell and form a visually stacked component.
-	 *
-	 * This can be used to place e.g. texts over an image. Place the
-	 * image in a layer and the text in another. The standard grid
-	 * content placement options can be used.
-	 *
-	 * Following component guidelines from Skeleton
-	 * @see https://next.skeleton.dev/docs/resources/contribute/components
-	 */
-
-	/**
-	 * @type {{
-	 *   base?: string,
-	 *   bg?: string,
-	 *   padding?: string,
-	 *   margin?: string,
-	 *   height?: string,
-	 *   classes?: string,
-	 *   style?: string,
-	 *   boxBase?: string,
-	 *   boxBg?: string,
-	 *   boxPadding?: string,
-	 *   boxMargin?: string,
-	 *   boxClasses?: string,
-	 *   boxAttrs?: { [attr: string]: * },
-	 *   children: import('svelte').Snippet
-	 * } & { [attr: string]: any }}
-	 */
-	const {
-		// Style
-		base,
-		bg,
-		padding,
-		margin,
-		height = 'h-full',
-		classes,
-		style,
-		boxBase,
-		boxBg,
-		boxPadding,
-		boxMargin,
-		boxClasses,
-
-		// Snippets
-		children,
-
-		// Attributes
-		...attrs
-	} = $props();
-</script>
-
-<div
-	data-hk-grid-layers-box
-	class="{boxBase} {boxBg} {boxPadding} {boxMargin} {boxClasses}"
-	{...attrs}
->
-	<div
-		data-hk-grid-layers
-		class="grid grid-cols-1 grid-rows-1 {base} {bg} {height} {classes} {margin} {padding}"
-		{style}
-	>
-		{@render children()}
-	</div>
-</div>
-
-<style>
-	[data-hk-grid-layers] > :global(.area-above) {
-		grid-area: 1/1/2/2;
-	}
-
-	[data-hk-grid-layers] > :global(*) {
-		grid-area: 2/1/3/2;
-	}
-
-	[data-hk-grid-layers] > :global(.area-below) {
-		grid-area: 3/1/4/2;
-	}
-</style>