@hkdigital/lib-core 0.5.10 → 0.5.12

package/README.md

@@ -32,6 +32,9 @@ pnpm add @skeletonlabs/skeleton
 # UI icons
 pnpm add @steeze-ui/heroicons
 
+# CSS processing (Tailwind and PostCSS)
+pnpm add tailwindcss @tailwindcss/postcss postcss autoprefixer
+
 # Logging
 pnpm add pino pino-pretty
 
@@ -42,13 +45,13 @@ pnpm add jsonwebtoken
 pnpm add @eslint/js eslint-plugin-import
 
 # Image processing
-pnpm add vite-imagetools
+pnpm add -D vite-imagetools
 ```
 
 **For other libraries**, install as dev dependencies and declare as peer dependencies:
 ```bash
 # Install as dev dependencies and peer dependencies
-pnpm add -D --save-peer @sveltejs/kit svelte svelte-preprocess runed valibot @skeletonlabs/skeleton @steeze-ui/heroicons pino pino-pretty jsonwebtoken @eslint/js eslint-plugin-import vite-imagetools
+pnpm add -D --save-peer @sveltejs/kit svelte svelte-preprocess runed valibot @skeletonlabs/skeleton @steeze-ui/heroicons tailwindcss @tailwindcss/postcss postcss autoprefixer pino pino-pretty jsonwebtoken @eslint/js eslint-plugin-import vite-imagetools
 ```
 
 ### Design System & Configuration
@@ -135,7 +138,8 @@ This library includes a complete design system with Tailwind CSS integration. Ba
    export default config;
    ```
 
-5. **TypeScript support for imagetools** - Add image import definitions to `app.d.ts`:
+5. **Image import type definitions** - Add imagetools type support to
+   `app.d.ts`:
    ```typescript
    // src/app.d.ts
    import '@hkdigital/lib-core/config/imagetools.d.ts';
@@ -179,6 +183,59 @@ This library includes a complete design system with Tailwind CSS integration. Ba
    import heroResponsive from '$lib/assets/hero.jpg?preset=photo&responsive';
    ```
 
+6. **(meta) folder setup** - Copy and configure PWA/favicon generation:
+
+   The library includes a complete `(meta)` folder with PWA configuration,
+   favicon generation, manifest.json, sitemap.xml, and robots.txt endpoints.
+
+   **Copy the folder to your project:**
+   ```bash
+   cp -r node_modules/@hkdigital/lib-core/src/routes/\(meta\) src/routes/
+   ```
+
+   **Customize for your app:**
+   - Replace `src/routes/(meta)/favicon.png` with your 512×512px image
+   - Edit `src/routes/(meta)/config.js`:
+     ```javascript
+     export const name = 'Your App Name';
+     export const shortName = 'App';
+     export const description = 'Your app description';
+     export const backgroundAndThemeColor = '#082962';
+
+     // Add your site routes for sitemap
+     export const siteRoutes = ['/', '/about', '/contact'];
+
+     // Configure robots.txt (prevent test sites from being indexed)
+     export const robotsConfig = {
+       allowedHosts: ['mysite.com', 'www.mysite.com'],
+       disallowedPaths: ['/admin/*'],
+       includeSitemap: true
+     };
+     ```
+
+   **Integrate into root layout:**
+   ```svelte
+   <!-- src/routes/+layout.svelte -->
+   <script>
+     import { Favicons, PWA } from './(meta)/index.js';
+   </script>
+
+   <Favicons />
+   <PWA />
+
+   {@render children()}
+   ```
+
+   **What you get:**
+   - Automatic favicon generation (16, 32, 192, 512px)
+   - Apple touch icons (120, 152, 167, 180px)
+   - Dynamic `/manifest.json` endpoint
+   - Dynamic `/sitemap.xml` endpoint
+   - Dynamic `/robots.txt` with host filtering
+
+   See [src/routes/(meta)/README.md](./src/routes/(meta)/README.md) for
+   complete documentation.
+
 ### Logging System
 
 The library includes a comprehensive logging system that provides:
@@ -220,34 +277,112 @@ pnpm run upgrade:all # Update all packages
 pnpm run publish:npm # Version bump and publish to npm
 ```
 
-### Import JS, Svelte files and Typedefs
+### Import Patterns and Export Structure
 
-Main folders in lib have an index.js, but may also have a more specific export file e.g. http.js or cache.js (@see $lib/network).
+**Public exports use domain-specific files matching folder names:**
 
-Main folders (should) have a typedef.js that can be used in JSdoc comments.
+```js
+// Standard pattern: folder → matching .js export file
+import { httpGet, httpPost } from '@hkdigital/lib-core/network/http.js';
+import { CacheManager } from '@hkdigital/lib-core/network/cache.js';
+import { LCHAR } from '@hkdigital/lib-core/constants/regexp.js';
+import { Button } from '@hkdigital/lib-core/ui/primitives.js';
+```
+
+**Pattern:**
+- Folder `$lib/network/http/` → Export file `$lib/network/http.js`
+- Folder `$lib/network/cache/` → Export file `$lib/network/cache.js`
+- Folder `$lib/constants/regexp/` → Export file `$lib/constants/regexp.js`
+
+**Rare exception - index.js for aggregated APIs:**
 
 ```js
-// Import Latin char constant for use in regular expressions
-import { LCHAR } from '@hkdigital/lib-core/constants/regexp/index.js';
+// Only used for large subsystems with public-facing aggregated APIs
+import { designTokens } from '@hkdigital/lib-core/design/index.js';
 ```
 
+**TypeDefs for JSDoc:**
+
 ```js
 /**
- * @param {import('@hkdigital/lib-core/network/typedef.js').JsonGetOptions} JsonGetOptions
+ * @param {import('@hkdigital/lib-core/network/typedef.js').HttpGetOptions}
+ *   options
  */
+function fetchData(options) {
+  // ...
+}
 ```
 
-### Import CSS
+### CSS Architecture (app.css)
 
-Vite should include postcss-import, but the only solution to get it working for now is to use a relative path to the node_modules folder.
+**CRITICAL**: Your `src/app.css` must include the complete design system
+architecture. Incomplete imports will cause build failures.
 
-For example:
+**Required structure:**
 
 ```css
 /* src/app.css */
-@import '../node_modules/@hkdigital/lib-core/dist/css/utilities.css';
+
+/* 1. CSS Layers - Controls style precedence */
+@layer theme, base, utilities, components;
+
+/* 2. Tailwind CSS Core */
+@import 'tailwindcss';
+
+/* 3. HKdigital Design System Theme (ALL required for colors to work) */
+@import '../node_modules/@hkdigital/lib-core/dist/design/themes/hkdev/theme.css' layer(theme);
+@import '../node_modules/@hkdigital/lib-core/dist/design/themes/hkdev/globals.css';
+@import '../node_modules/@hkdigital/lib-core/dist/design/themes/hkdev/components.css' layer(components);
+@import '../node_modules/@hkdigital/lib-core/dist/design/themes/hkdev/responsive.css';
+
+/* 4. Skeleton UI Framework */
+@import '@skeletonlabs/skeleton' source('../node_modules/@skeletonlabs/skeleton-svelte/dist');
+@import '@skeletonlabs/skeleton/optional/presets' source('../node_modules/@skeletonlabs/skeleton-svelte/dist');
+
+/* 5. Tailwind Configuration Reference */
+@config "../tailwind.config.js";
+
+/* 6. Optional: Additional utilities */
+/*@import '../node_modules/@hkdigital/lib-core/dist/css/utilities.css';*/
 ```
 
+**Why all theme files are required:**
+- Missing any theme file will cause "Cannot apply unknown utility class"
+  errors
+- Classes like `bg-surface-100`, `text-primary-500` won't work without
+  complete theme
+- All four theme files (theme.css, globals.css, components.css,
+  responsive.css) are needed
+
+See [src/lib/design/README.md](./src/lib/design/README.md) for complete
+CSS architecture documentation.
+
+### Critical: data-theme Attribute
+
+**IMPORTANT**: Add `data-theme="hkdev"` to your `<body>` element in
+`src/app.html`. Without this, theme colors will not work correctly.
+
+```html
+<!-- src/app.html -->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body data-theme="hkdev" data-sveltekit-preload-data="hover">
+    <div>%sveltekit.body%</div>
+  </body>
+</html>
+```
+
+**Why this is required:**
+- Theme CSS custom properties are scoped to `[data-theme='hkdev']`
+- Without this attribute, colors fall back to browser defaults
+- **Symptom**: Colors like `bg-primary-500` show grey instead of magenta
+- **Solution**: Add `data-theme="hkdev"` to `<body>` element
+
 ## Building the library
 
 To build your library:

package/dist/config/generators/imagetools.js

@@ -2,6 +2,25 @@ const DEFAULT_WIDTHS = [1920, 1536, 1024, 640];
 
 const DEFAULT_THUMBNAIL_WIDTH = 150;
 
+const FAVICON_SIZES = [
+  16,  // classic browser tab icon
+  32,  // high-resolution browser support
+  48,  // Windows desktop shortcuts
+  120, // iPhone older retina
+  152, // iPad retina, iOS Safari bookmarks
+  167, // iPad Pro
+  180, // iPhone retina, iOS home screen
+  192, // Android home screen, Chrome PWA
+  512  // PWA application icon, Android splash
+];
+
+const APPLE_TOUCH_SIZES = [
+  120, // iPhone older retina
+  152, // iPad retina, iOS Safari bookmarks
+  167, // iPad Pro
+  180  // iPhone retina, iOS home screen
+];
+
 const DEFAULT_PRESETS = {
 	default: {
 		format: 'avif',
@@ -74,9 +93,15 @@ export function generateResponseConfigs(options) {
 
 		// @ts-ignore
 		const responsiveConfig = entries.find(([key]) => key === 'responsive');
+		// @ts-ignore
+		const faviconsConfig = entries.find(([key]) => key === 'favicons');
+		// @ts-ignore
+		const appleTouchIconsConfig = entries.find(([key]) => key === 'apple-touch-icons');
 		// console.log('responsiveConfig found:', !!responsiveConfig);
 
 		const widths = options?.widths ?? DEFAULT_WIDTHS;
+		const faviconSizes = options?.faviconSizes ?? FAVICON_SIZES;
+		const appleTouchSizes = options?.appleTouchSizes ?? APPLE_TOUCH_SIZES;
 
 		// Always include the main image(s) and a thumbnail version
 		const thumbnailConfig = {
@@ -84,6 +109,32 @@ export function generateResponseConfigs(options) {
 			w: String(options?.thumbnailWidth ?? DEFAULT_THUMBNAIL_WIDTH)
 		};
 
+		// Handle favicons directive - generate all favicon sizes as PNG
+		if (faviconsConfig) {
+			const faviconConfigs = faviconSizes.map((w) => {
+				return {
+					...configPairs,
+					w: String(w),
+					format: 'png'
+				};
+			});
+			// console.log('Returning favicon configs:', faviconConfigs);
+			return faviconConfigs;
+		}
+
+		// Handle apple-touch-icons directive - generate Apple touch icon sizes as PNG
+		if (appleTouchIconsConfig) {
+			const appleTouchConfigs = appleTouchSizes.map((w) => {
+				return {
+					...configPairs,
+					w: String(w),
+					format: 'png'
+				};
+			});
+			// console.log('Returning apple-touch-icon configs:', appleTouchConfigs);
+			return appleTouchConfigs;
+		}
+
 		if (!responsiveConfig) {
 			// Directive 'responsive' was not set => return original + thumbnail
 			const originalConfig = configPairs; // No 'w' means original dimensions
@@ -129,6 +180,18 @@ export function generateDefaultDirectives(options) {
 			params.set('as', 'metadata');
 		}
 
+		// > Return metadata if directive 'favicons' is set
+
+		if (params.has('favicons')) {
+			params.set('as', 'metadata');
+		}
+
+		// > Return metadata if directive 'apple-touch-icons' is set
+
+		if (params.has('apple-touch-icons')) {
+			params.set('as', 'metadata');
+		}
+
 		// > Process presets
 
 		if (presetName) {

package/dist/config/imagetools.d.ts

@@ -73,56 +73,14 @@ declare module '*&preset=blur' {
 
 /* For favicons */
 
-// Classic browser tab icon
-declare module '*?w=16' {
+// Generate all favicon sizes (16, 32, 48, 120, 152, 167, 180, 192, 512)
+declare module '*?favicons' {
   const out: ImageSource;
   export default out;
 }
 
-// High-resolution browser support
-declare module '*?w=32' {
-  const out: ImageSource;
-  export default out;
-}
-
-// Windows desktop shortcuts
-declare module '*?w=48' {
-  const out: ImageSource;
-  export default out;
-}
-
-// iPhone older retina
-declare module '*?w=120' {
-  const out: ImageSource;
-  export default out;
-}
-
-// iPad retina, iOS Safari bookmarks
-declare module '*?w=152' {
-  const out: ImageSource;
-  export default out;
-}
-
-// iPad Pro
-declare module '*?w=167' {
-  const out: ImageSource;
-  export default out;
-}
-
-// iPhone retina, iOS home screen
-declare module '*?w=180' {
-  const out: ImageSource;
-  export default out;
-}
-
-// Android home screen, Chrome PWA
-declare module '*?w=192' {
-  const out: ImageSource;
-  export default out;
-}
-
-// PWA application icon, Android splash
-declare module '*?w=512' {
+// Generate Apple touch icon sizes (120, 152, 167, 180)
+declare module '*?apple-touch-icons' {
   const out: ImageSource;
   export default out;
 }

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

@@ -21,8 +21,7 @@
    *   requestDevmode:function,
    *   requestFullscreen:function,
    *   gameWidth: number,
-   *   gameHeight: number,
-   *   iosLandscapeHeightQuirk: boolean
+   *   gameHeight: number
    * }} SnippetParams
    */
 
@@ -134,34 +133,6 @@
   let isIos = $derived(os === 'iOS');
   let isAndroid = $derived(os === 'Android');
 
-  /**
-   * Detect iOS landscape height quirk (status bar appears/disappears)
-   *
-   * Detection: in landscape, innerHeight is ~20px less than screen.width
-   *
-   * NOTE: This detection is reactive and will update when dimensions change.
-   * iOS PWA only fires viewport resize events when there's scrollable
-   * overflow content, which we add via CSS ::after when quirk is detected.
-   */
-  let iosLandscapeHeightQuirk = $derived.by(() => {
-    // Force reactivity by accessing these variables
-    const currentLandscape = isLandscape;
-    const currentIos = isIos;
-    const width = iosWindowWidth ?? windowWidth;
-    const height = iosWindowHeight ?? windowHeight;
-
-    if (!currentLandscape || !currentIos) return false;
-
-    if (!width || !height || !window.screen) return false;
-
-    // In landscape: window.innerHeight should equal screen.width
-    // If it's 20px less, the quirk is active
-    const screenWidth = window.screen.width;
-    const heightDifference = screenWidth - height;
-
-    return heightDifference >= 18 && heightDifference <= 22;
-  });
-
   // Debounce window dimensions on iOS to skip intermediate resize events
   let skipNextResize = false;
   let resetTimer;
@@ -343,29 +314,23 @@
     const html = document.documentElement;
     html.classList.add(gameBoxNoScroll);
 
-    // Prevent page scroll while allowing child elements to scroll
-    const preventPageScroll = () => {
-      window.scrollTo(0, 0);
-    };
+    // // Prevent page scroll while allowing child elements to scroll
+    // const preventPageScroll = () => {
+    //   window.scrollTo(0, 0);
+    // };
 
-    window.addEventListener('scroll', preventPageScroll, { passive: true });
+    // window.addEventListener('scroll', preventPageScroll, { passive: true });
 
+    // return () => {
+    //   html.classList.remove(gameBoxNoScroll);
+    //   window.removeEventListener('scroll', preventPageScroll);
+    // };
     return () => {
       html.classList.remove(gameBoxNoScroll);
-      window.removeEventListener('scroll', preventPageScroll);
-    };
-  });
-
-  // Toggle overflow content based on quirk detection
-  $effect(() => {
-    const html = document.documentElement;
-    if (iosLandscapeHeightQuirk) {
-      html.classList.add('ios-height-quirck');
-    } else {
-      html.classList.remove('ios-height-quirck');
     }
   });
 
+
   function getOS() {
     if (isAppleMobile) {
       return 'iOS';
@@ -520,8 +485,7 @@
                 requestDevmode,
                 requestFullscreen,
                 gameWidth,
-                gameHeight,
-                iosLandscapeHeightQuirk
+                gameHeight
               })}
             </ScaledContainer>
             <!-- Portrait content -->
@@ -545,8 +509,7 @@
                 requestDevmode,
                 requestFullscreen,
                 gameWidth,
-                gameHeight,
-                iosLandscapeHeightQuirk
+                gameHeight
               })}
             </ScaledContainer>
           {:else if supportsFullscreen && !isDevMode}
@@ -570,8 +533,7 @@
                 requestDevmode,
                 requestFullscreen,
                 gameWidth,
-                gameHeight,
-                iosLandscapeHeightQuirk
+                gameHeight
               })}
             </ScaledContainer>
           {:else if isMobile && snippetInstallOnHomeScreen && !isDevMode}
@@ -595,8 +557,7 @@
                 requestDevmode,
                 requestFullscreen,
                 gameWidth,
-                gameHeight,
-                iosLandscapeHeightQuirk
+                gameHeight
               })}
             </ScaledContainer>
           {:else}
@@ -621,8 +582,7 @@
                 requestDevmode,
                 requestFullscreen,
                 gameWidth,
-                gameHeight,
-                iosLandscapeHeightQuirk
+                gameHeight
               })}
             </ScaledContainer>
             <!-- Portrait content -->
@@ -646,8 +606,7 @@
                 requestDevmode,
                 requestFullscreen,
                 gameWidth,
-                gameHeight,
-                iosLandscapeHeightQuirk
+                gameHeight
               })}
             </ScaledContainer>
           {/if}
@@ -674,8 +633,7 @@
               requestDevmode,
               requestFullscreen,
               gameWidth,
-              gameHeight,
-              iosLandscapeHeightQuirk
+              gameHeight
             })}
           </ScaledContainer>
           <!-- Portrait content -->
@@ -699,8 +657,7 @@
               requestDevmode,
               requestFullscreen,
               gameWidth,
-              gameHeight,
-              iosLandscapeHeightQuirk
+              gameHeight
             })}
           </ScaledContainer>
         {/if}
@@ -720,16 +677,13 @@
   }
 
   :global(html.game-box-no-scroll) {
-    overflow: hidden; /* allow resize events, prevent via JavaScript */
+    /* Prevent all scrolling - clip is stricter than hidden */
+    overflow: clip;
     scrollbar-width: none; /* Firefox */
     -ms-overflow-style: none; /* IE and Edge */
-  }
-  /* Only add overflow content when quirk is detected */
-  :global(html.game-box-no-scroll.ios-height-quirck::after) {
-    content: '\A'; /* newline character */
-    white-space: pre; /* preserve newline */
-    display: block;
-    height: 20px; /* create overflow to trigger iOS resize events */
+    /* Prevent bounce/overscroll on iOS */
+    overscroll-behavior: none;
+    -webkit-overflow-scrolling: auto;
   }
   :global(html.game-box-no-scroll::-webkit-scrollbar) {
     display: none;

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

@@ -100,7 +100,6 @@ declare const GameBox: import("svelte").Component<{
         requestFullscreen: Function;
         gameWidth: number;
         gameHeight: number;
-        iosLandscapeHeightQuirk: boolean;
     }]>;
     snippetPortrait?: import("svelte").Snippet<[{
         isLandscape: boolean;
@@ -115,7 +114,6 @@ declare const GameBox: import("svelte").Component<{
         requestFullscreen: Function;
         gameWidth: number;
         gameHeight: number;
-        iosLandscapeHeightQuirk: boolean;
     }]>;
     snippetRequireFullscreen?: import("svelte").Snippet<[{
         isLandscape: boolean;
@@ -130,7 +128,6 @@ declare const GameBox: import("svelte").Component<{
         requestFullscreen: Function;
         gameWidth: number;
         gameHeight: number;
-        iosLandscapeHeightQuirk: boolean;
     }]>;
     snippetInstallOnHomeScreen?: import("svelte").Snippet<[{
         isLandscape: boolean;
@@ -145,7 +142,6 @@ declare const GameBox: import("svelte").Component<{
         requestFullscreen: Function;
         gameWidth: number;
         gameHeight: number;
-        iosLandscapeHeightQuirk: boolean;
     }]>;
 }, {}, "">;
 type SnippetParams = {
@@ -161,5 +157,4 @@ type SnippetParams = {
     requestFullscreen: Function;
     gameWidth: number;
     gameHeight: number;
-    iosLandscapeHeightQuirk: boolean;
 };

package/dist/ui/components/game-box/README.md

@@ -248,6 +248,22 @@ The component includes special handling for mobile PWAs:
 - **Screen Orientation**: Listens for orientation changes and updates layout
 - **No Scroll**: Automatically prevents scrolling when active
 
+### iOS Landscape Height Bug
+
+For games and fullscreen applications, use `viewport-fit=cover` in your
+viewport meta tag to prevent iOS landscape height bugs:
+
+```html
+<meta name="viewport"
+  content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,
+           width=device-width, height=device-height, viewport-fit=cover" />
+```
+
+This is handled automatically by the `PWA.svelte` component in the `(meta)`
+folder when `disablePageZoom` is enabled. The `viewport-fit=cover` setting
+ensures the viewport extends into safe areas on iOS devices, preventing a
+common bug where landscape mode shows incorrect viewport heights.
+
 ## Development Mode
 
 The component automatically enables development mode when:

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-core",
-	"version": "0.5.10",
+	"version": "0.5.12",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"

package/dist/ui/components/game-box/GameBox.svelte.with-scaling__

@@ -1,577 +0,0 @@
-<script>
-  import { onMount } from 'svelte';
-
-  import {
-    getGameWidthOnLandscape,
-    getGameWidthOnPortrait
-  } from './gamebox.util.js';
-
-  import { enableContainerScaling } from '$lib/design/index.js';
-  // import { enableContainerScaling } from '@hkdigital/lib-core/design/index.js';
-
-  /**
-   * @typedef {{
-   *   isMobile:boolean,
-   *   os:'Android'|'iOS',
-   *   isFullscreen:boolean,
-   *   isDevMode:boolean,
-   *   requestDevmode:function,
-   *   requestFullscreen:function,
-   *   gameWidth: number,
-   *   gameHeight: number
-   * }} SnippetParams
-   */
-
-  /**
-   * @typedef {import('svelte').Snippet<[SnippetParams]>} GameBoxSnippet
-   */
-
-  /**
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   classes?: string,
-   *   style?: string,
-   *   aspectOnLandscape?: number,
-   *   aspectOnPortrait?: number,
-   *   marginLeft?: number,
-   *   marginRight?: number,
-   *   marginTop?: number,
-   *   marginBottom?: number,
-   *   center?: boolean,
-   *   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?:GameBoxSnippet,
-   *   snippetPortrait?: GameBoxSnippet,
-   *   snippetRequireFullscreen?: GameBoxSnippet,
-   *   snippetInstallOnHomeScreen?: GameBoxSnippet,
-   *   [attr: string]: any
-   * }}
-   */
-  const {
-    // > Style
-    base = '',
-    bg = '',
-    classes = '',
-    style = '',
-
-    // > Functional properties
-    aspectOnLandscape,
-    aspectOnPortrait,
-
-    marginLeft = 0,
-    marginRight = 0,
-
-    marginTop = 0,
-    marginBottom = 0,
-
-    center,
-
-    // > Scaling options
-    enableScaling = false,
-    designLandscape = { width: 1920, height: 1080 },
-    designPortrait = { width: 1920, height: 1080 },
-    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,
-    snippetRequireFullscreen,
-    snippetInstallOnHomeScreen
-  } = $props();
-
-  // > Game dimensions and state
-  let windowWidth = $state();
-  let windowHeight = $state();
-
-  let gameWidth = $state();
-  let gameHeight = $state();
-
-  let iosWindowWidth = $state();
-  let iosWindowHeight = $state();
-
-  function getIsLandscape() {
-    if (isPwa && isAppleMobile) {
-      return iosWindowWidth > iosWindowHeight;
-    } else {
-      return windowWidth > windowHeight;
-    }
-  }
-
-  let isLandscape = $state();
-
-  // $derived.by(getIsLandscape);
-
-  $effect(() => {
-    isLandscape = getIsLandscape();
-  });
-
-  // Game container reference
-  let gameContainer = $state();
-
-  // Update game dimensions based on window size and orientation
-  $effect(() => {
-    const width = iosWindowWidth ?? windowWidth;
-    const height = iosWindowHeight ?? windowHeight;
-
-    if (!width || !height) return;
-
-    const availWidth = width - marginLeft - marginRight;
-    const availHeight = height - marginTop - marginBottom;
-
-    // console.debug('GameBox margins:', {
-    //   marginLeft,
-    //   marginRight,
-    //   marginTop,
-    //   marginBottom
-    // });
-
-    let gameAspect;
-
-    if (availWidth > availHeight) {
-      gameWidth = getGameWidthOnLandscape({
-        windowWidth: availWidth,
-        windowHeight: availHeight,
-        aspectOnLandscape
-      });
-      gameAspect = aspectOnLandscape;
-    } else {
-      gameWidth = getGameWidthOnPortrait({
-        windowWidth: availWidth,
-        windowHeight: availHeight,
-        aspectOnPortrait
-      });
-      gameAspect = aspectOnPortrait;
-    }
-
-    if (gameAspect) {
-      gameHeight = gameWidth / gameAspect;
-    } else {
-      gameHeight = availHeight;
-    }
-  });
-
-  // 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;
-
-    // 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
-      })
-    });
-  });
-
-  let show = $state(false);
-
-  const isAppleMobile = /iPhone|iPod/.test(navigator.userAgent);
-
-  let isPwa = $state(false);
-
-  let os = $state();
-
-  let isMobile = $state(false);
-
-  let isDevMode = $state(false);
-
-  // Check: always true for home app?
-  let isFullscreen = $state(false);
-
-  let supportsFullscreen = $state(false);
-
-  onMount(() => {
-    supportsFullscreen = document.fullscreenEnabled;
-
-    isMobile = getIsMobile();
-
-    os = getOS();
-
-    // Run before show
-    isFullscreen = !!document.fullscreenElement;
-
-    isPwa = window.matchMedia(
-      '(display-mode: fullscreen) or (display-mode: standalone)'
-    ).matches;
-
-    isLandscape = getIsLandscape();
-
-    show = true;
-
-    function updateIosWidthHeight() {
-      // const isPwa = window.matchMedia(
-      //   '(display-mode: fullscreen) or (display-mode: standalone)'
-      // ).matches;
-
-      if (isPwa && isAppleMobile) {
-        const angle = screen.orientation.angle;
-
-        if (angle === 90 || angle === 270) {
-          iosWindowWidth = screen.height;
-          iosWindowHeight = screen.width;
-        } else {
-          iosWindowWidth = screen.width;
-          iosWindowHeight = screen.height;
-        }
-        // console.debug( { iosWindowWidth, iosWindowHeight } );
-      }
-    }
-
-    updateIosWidthHeight();
-
-    function updateOrientation(event) {
-      // console.debug('updateOrientation');
-      const type = event.target.type;
-      const angle = event.target.angle;
-
-      // isPwa = window.matchMedia(
-      //   '(display-mode: fullscreen) or (display-mode: standalone)'
-      // ).matches;
-
-      updateIosWidthHeight();
-
-      console.debug(
-        `ScreenOrientation change: ${type}, ${angle} degrees.`,
-        isPwa,
-        windowWidth,
-        windowHeight,
-        screen.width,
-        screen.height,
-        iosWindowWidth,
-        iosWindowHeight
-      );
-
-      // if( angle
-    }
-
-    $effect(() => {
-      screen.orientation.addEventListener('change', updateOrientation);
-
-      return () => {
-        screen.orientation.removeEventListener('change', updateOrientation);
-      };
-    });
-
-    //
-  });
-
-  onMount(() => {
-    const gameBoxNoScroll = 'game-box-no-scroll';
-    const html = document.documentElement;
-    html.classList.add(gameBoxNoScroll);
-
-    return () => {
-      html.classList.remove(gameBoxNoScroll);
-    };
-  });
-
-  function getOS() {
-    if (isAppleMobile) {
-      return 'iOS';
-    } else if (/Android/.test(navigator.userAgent)) {
-      return 'Android';
-    }
-  }
-
-  /**
-   * Returns true if a device is a mobile phone (or similar)
-   */
-  function getIsMobile() {
-    // @ts-ignore
-    if (navigator?.userAgentData?.mobile !== undefined) {
-      // Supports for mobile flag
-      // @ts-ignore
-      return navigator.userAgentData.mobile;
-    } else if (isAppleMobile) {
-      return true;
-    } else if (/Android/.test(navigator.userAgent)) {
-      return true;
-    }
-
-    return false;
-  }
-
-  /**
-   * Returns true if the window is in full screen
-   * - Checks if CSS thinks we're in fullscreen mode
-   * - Checks if there is a fullscreen element (for safari)
-   */
-  function getIsFullscreen() {
-    if (
-      window.matchMedia(
-        '(display-mode: fullscreen) or (display-mode: standalone)'
-      ).matches
-    ) {
-      return true;
-    } else if (document.fullscreenElement) {
-      // Safari
-      return true;
-    }
-
-    return false;
-  }
-
-  async function requestFullscreen() {
-    console.debug('Request full screen');
-    show = false;
-
-    await document.documentElement.requestFullscreen();
-    isFullscreen = true;
-
-    setTimeout(() => {
-      show = true;
-    }, 1000);
-  }
-
-  // async function exitFullscreen() {
-  //   console.debug('Exit full screen');
-  //   show = false;
-
-  //   await document.exitFullscreen();
-  //   isFullscreen = false;
-
-  //   setTimeout( () => { show = true; }, 1000 );
-  // }
-
-  $effect(() => {
-    // Update isFullscreen if window width or height changes
-
-    windowWidth;
-    windowHeight;
-
-    isFullscreen = getIsFullscreen();
-
-    // if( !isFullscreen )
-    // {
-    //   show = false;
-    //   setTimeout( () => { show = true; }, 1000 );
-    // }
-
-    // console.debug('isFullscreen', isFullscreen);
-  });
-
-  isDevMode = false;
-
-  function requestDevmode() {
-    isDevMode = true;
-    console.debug(isDevMode);
-  }
-
-  $effect(() => {
-    if (location.hostname === 'localhost') {
-      isDevMode = true;
-    }
-  });
-
-  $effect(() => {
-    if (isFullscreen) {
-      const url = new URL(window.location.href);
-      url.searchParams.set('preset', 'cinema');
-      window.history.pushState({}, '', url);
-    }
-  });
-</script>
-
-<svelte:window bind:innerWidth={windowWidth} bind:innerHeight={windowHeight} />
-
-{#if gameHeight}
-  <div class:center>
-    <div
-      data-component="game-box"
-      data-orientation={isLandscape ? 'landscape' : 'portrait'}
-      bind:this={gameContainer}
-      class="{base} {bg} {classes}"
-      class:isMobile
-      style:width="{gameWidth}px"
-      style:height="{gameHeight}px"
-      style:--game-width={gameWidth}
-      style:--game-height={gameHeight}
-      style:margin-left="{marginLeft}px"
-      style:margin-right="{marginRight}px"
-      style:margin-top="{marginTop}px"
-      style:margin-bottom="{marginBottom}px"
-      {style}
-    >
-      {#if show}
-        {#if isLandscape}
-          <!-- Landscape -->
-          {#if snippetRequireFullscreen}
-            <!-- Require fullscreen -->
-            {#if isFullscreen && !isDevMode}
-              {@render snippetLandscape({
-                isMobile,
-                os,
-                isFullscreen,
-                isDevMode,
-                requestDevmode,
-                requestFullscreen,
-                gameWidth,
-                gameHeight
-              })}
-            {:else if supportsFullscreen && !isDevMode}
-              <!-- Require fullscreen (on landscape) -->
-              {@render snippetRequireFullscreen({
-                isMobile,
-                os,
-                isFullscreen,
-                isDevMode,
-                requestDevmode,
-                requestFullscreen,
-                gameWidth,
-                gameHeight
-              })}
-            {:else if isMobile && snippetInstallOnHomeScreen && !isDevMode}
-              <!-- Require install on home screen on mobile -->
-              {@render snippetInstallOnHomeScreen({
-                isMobile,
-                os,
-                isFullscreen,
-                isDevMode,
-                requestDevmode,
-                requestFullscreen,
-                gameWidth,
-                gameHeight
-              })}
-            {:else}
-              {@render snippetLandscape({
-                isMobile,
-                os,
-                isFullscreen,
-                isDevMode,
-                requestDevmode,
-                requestFullscreen,
-                gameWidth,
-                gameHeight
-              })}
-            {/if}
-          {:else}
-            <!-- Do not require fullscreen -->
-            <!-- *we do not try install home app -->
-            {@render snippetLandscape({
-              isMobile,
-              os,
-              isFullscreen,
-              isDevMode,
-              requestDevmode,
-              requestFullscreen,
-              gameWidth,
-              gameHeight
-            })}
-          {/if}
-        {:else}
-          <!-- Portrait -->
-          {#if snippetRequireFullscreen}
-            <!-- Require fullscreen -->
-            {#if isFullscreen && !isDevMode}
-              {@render snippetPortrait({
-                isMobile,
-                os,
-                isFullscreen,
-                isDevMode,
-                requestDevmode,
-                requestFullscreen,
-                gameWidth,
-                gameHeight
-              })}
-            {:else if supportsFullscreen && !isDevMode}
-              <!-- Require fullscreen (on landscape) -->
-              {@render snippetRequireFullscreen({
-                isMobile,
-                os,
-                isFullscreen,
-                isDevMode,
-                requestDevmode,
-                requestFullscreen,
-                gameWidth,
-                gameHeight
-              })}
-            {:else if isMobile && snippetInstallOnHomeScreen && !isDevMode}
-              <!-- Require install on home screen on mobile -->
-              {@render snippetInstallOnHomeScreen({
-                isMobile,
-                os,
-                isFullscreen,
-                isDevMode,
-                requestDevmode,
-                requestFullscreen,
-                gameWidth,
-                gameHeight
-              })}
-            {:else}
-              {@render snippetPortrait({
-                isMobile,
-                os,
-                isFullscreen,
-                isDevMode,
-                requestDevmode,
-                requestFullscreen,
-                gameWidth,
-                gameHeight
-              })}
-            {/if}
-          {:else}
-            <!-- Do not require fullscreen -->
-            <!-- *we do not try install home app -->
-            {@render snippetPortrait({
-              isMobile,
-              os,
-              isFullscreen,
-              isDevMode,
-              requestDevmode,
-              requestFullscreen,
-              gameWidth,
-              gameHeight
-            })}
-          {/if}
-        {/if}
-      {/if}
-    </div>
-  </div>
-{/if}
-
-<style>
-  .center {
-    display: grid;
-    height: 100lvh;
-    display: grid;
-    justify-items: center;
-    align-items: center;
-    /* border: solid 1px red;*/
-  }
-
-  :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>