@hkdigital/lib-sveltekit 0.0.96 → 0.0.98

package/dist/classes/svelte/image/ImageVariantsLoader.svelte.d.ts

@@ -8,9 +8,16 @@ export default class ImageVariantsLoader {
     /**
      * Set new optimal image variant or keep current
      *
-     * @param {number} containerWidth
+     * @param {object} params
+     * @param {number} [params.containerWidth] Container width
+     * @param {number} [params.containerHeight] Container height
+     * @param {'cover'|'contain'|'fill'} [params.fit='contain'] Fit mode
      */
-    updateOptimalImageMeta(containerWidth: number): void;
+    updateOptimalImageMeta({ containerWidth, containerHeight, fit }: {
+        containerWidth?: number;
+        containerHeight?: number;
+        fit?: "cover" | "contain" | "fill";
+    }): void;
     get loaded(): boolean;
     get variant(): import("./typedef.js").ImageMeta;
     /**

package/dist/classes/svelte/image/ImageVariantsLoader.svelte.js

@@ -2,6 +2,8 @@
 
 // import * as expect from '../../../util/expect/index.js';
 
+import { calculateEffectiveWidth } from '../../../util/image/index.js';
+
 import { untrack } from 'svelte';
 
 import ImageLoader from './ImageLoader.svelte.js';
@@ -21,57 +23,60 @@ export default class ImageVariantsLoader {
 
   #progress = $derived.by(() => {
     if (this.#imageLoader) {
-      // const progress = this.#imageLoader.progress;
-
       return this.#imageLoader.progress;
     } else {
       return { bytesLoaded: 0, size: 0, loaded: false };
     }
   });
 
-  #loaded = $derived(this.#progress.loaded);
+  #loaded = $derived.by(() => this.#progress?.loaded || false);
 
   /**
    * @param {ImageMeta[]} imagesMeta
    */
   constructor(imagesMeta, { devicePixelRatio = 1 } = {}) {
-    // expect.notEmptyArray( imagesMeta );
-
     this.#devicePixelRatio = devicePixelRatio ?? 1;
-
-    // Sort images meta by width ascending
     this.#imagesMeta = [...imagesMeta].sort((a, b) => a.width - b.width);
-
-    $effect(() => {
-      const variant = this.#imageVariant;
-
-      if (variant) {
-        // console.log('Load new variant', $state.snapshot(variant));
-
-        // TODO: abort loading if imageLoader exists
-
-        untrack(() => {
-          const loader = (this.#imageLoader = new ImageLoader({
-            url: variant.src
-          }));
-
-          loader.load();
-        });
-      }
-    });
   }
 
   /**
    * Set new optimal image variant or keep current
    *
-   * @param {number} containerWidth
+   * @param {object} params
+   * @param {number} [params.containerWidth] Container width
+   * @param {number} [params.containerHeight] Container height
+   * @param {'cover'|'contain'|'fill'} [params.fit='contain'] Fit mode
    */
-  updateOptimalImageMeta(containerWidth) {
-    const newVariant = this.getOptimalImageMeta(containerWidth);
+  updateOptimalImageMeta({ containerWidth, containerHeight, fit = 'contain' }) {
+    const baseImage = this.#imagesMeta[0];
+    const imageAspectRatio = baseImage.width / baseImage.height;
+
+    const effectiveWidth = calculateEffectiveWidth({
+      containerWidth,
+      containerHeight,
+      imageAspectRatio,
+      fit
+    });
+
+    const newVariant = this.getOptimalImageMeta(effectiveWidth);
 
-    if (!newVariant || !this.#imageVariant || newVariant.width > this.#imageVariant.width) {
-      // Only update imageVariant is width is larger
+    if (
+      !newVariant ||
+      !this.#imageVariant ||
+      newVariant.width > this.#imageVariant.width
+    ) {
       this.#imageVariant = newVariant;
+
+      // Create and start loader here directly when variant changes
+      if (this.#imageLoader?.initial) {
+        this.#imageLoader.unload();
+      }
+
+      this.#imageLoader = new ImageLoader({
+        imageMeta: newVariant
+      });
+
+      this.#imageLoader.load();
     }
   }
 
@@ -137,7 +142,9 @@ export default class ImageVariantsLoader {
 
     // Find the smallest image that's larger than our required width
 
-    const optimal = imagesMeta.find((current) => current.width >= requiredWidth);
+    const optimal = imagesMeta.find(
+      (current) => current.width >= requiredWidth
+    );
 
     // Fall back to the largest image if nothing is big enough
     return optimal || imagesMeta[imagesMeta.length - 1];

package/dist/components/image/ImageBox.svelte

@@ -1,93 +1,26 @@
 <script>
-	import { onMount } from 'svelte';
-
 	import { ImageLoader } from '../../classes/svelte/image/index.js';
-
+	import { ImageVariantsLoader } from '../../classes/svelte/image/index.js';
 	import { toSingleImageMeta } from '../../util/image/index.js';
 
 	/**
-	 * @example
-	 * import { ImageBox } from '/path/to/ImageBox/index.js';
-	 *
-	 * // @note 'as=metadata' is set by the preset
-	 * import NeonLightsOff from '../../img/NeonLightsOff.jpg?preset=gradient';
-	 *
-   * <!-- Example that fits in an outer-box -->
-   *
-   * <div class="outer-box">
-   *   <ImageBox image={ArmyGreen} fit="contain" position="center center" />
-   * </div>
-   *
-   * <!-- Examples that has have width, height or aspect set -->
-   *
-   * <ImageBox
-   *   image={ArmyGreen}
-   *   fit="contain"
-   *   position="center center"
-   *   width="w-[200px]"
-   *   height="h-[200px]"
-   *   classes="border-8 border-green-500"
-   * />
-   *
-   * <ImageBox
-   *   image={ArmyGreen}
-   *   fit="contain"
-   *   position="center center"
-   *   width="w-[200px]"
-   *   aspect="aspect-square"
-   *   classes="border-8 border-green-500"
-   * />
-   *
-   * <ImageBox
-   *   image={ArmyGreen}
-   *   fit="contain"
-   *   position="center center"
-   *   height="h-[200px]"
-   *   aspect="aspect-square"
-   *   classes="border-8 border-green-500"
-   * />
-   *
-   * <!-- Or hack it using !important -->
-   *
-   * <ImageBox
-   *   image={ArmyGreen}
-   *   fit="contain"
-   *   position="center center"
-   *   classes="!w-[200px] !h-[200px] border-8 border-green-500"
-   * />
+	 * @type {{
+	 *   base?: string,
+	 *   bg?: string,
+	 *   classes?: string,
+	 *   width?: string,
+	 *   height?: string,
+	 *   aspect?: string,
+	 *   overflow?: string,
+	 *   fit?: 'contain' | 'cover' | 'fill',
+	 *   position?: string,
+	 *   imageMeta: import('../../config/typedef.js').ImageMeta | import('../../config/typedef.js').ImageMeta[],
+	 *   imageLoader?: import('../../classes/svelte/image/index.js').ImageLoader,
+	 *   alt?: string,
+	 *   onProgress?: (progress: import('../../classes/svelte/network-loader/typedef.js').LoadingProgress) => void,
+	 *   [attr: string]: any
+	 * }}
 	 */
-
-	/**
-   * @typedef {import('./typedef.js').ObjectFit} ObjectFit
-   * @typedef {import('./typedef.js').ObjectPosition} ObjectPosition
-   *
-   * @typedef {import('../../classes/svelte/network-loader/typedef.js').LoadingProgress} LoadingProgress
-   *
-   * @typedef {import('../../config/typedef.js').ImageMeta} ImageMeta
-   *
-   * @typedef {Object} Props
-   * @property {string} [base] - Base styling class
-   * @property {string} [bg] - Background styling class
-   * @property {string} [classes] - Additional CSS classes
-   * @property {string} [width] - Width of the image container
-   * @property {string} [height] - Height of the image container
-   * @property {string} [aspect] - Aspect ratio of the image container
-   * @property {string} [overflow] - Overflow behavior
-   * @property {ObjectFit} [fit] - Object-fit property
-   * @property {ObjectPosition} [position] - Object-position property
-   *
-   * @property {ImageMeta|ImageMeta[]} [imageMeta]
-   *   Image metadata, TODO: array of image metadata for responsive image
-   *
-   * @property {ImageLoader} [imageLoader]
-   *   Image loader
-   *
-   * @property {string} [alt] - Alternative text for the image
-   * @property {() => LoadingProgress} [onProgress] - Progress callback function
-   * @property {*} [attr] - Additional arbitrary attributes
-   */
-
-	/** @type {Props} */
 	let {
 		// Style
 		base,
@@ -95,111 +28,101 @@
 		classes,
 		width,
 		height,
-    aspect,
+		aspect,
 		overflow = 'overflow-clip',
 
-    // Fitting and positioning of image in its container
+		// Fitting and positioning of image in its container
 		fit = 'contain',
 		position = 'left top',
 
-    // Image meta data
+		// Image data
 		imageMeta,
-
 		imageLoader,
 
+		// Accessibility
 		alt = '',
 
-		// Attributes
+		// Events
+		onProgress,
+
+		// Additional attributes
 		...attrs
 	} = $props();
 
-  if( !imageMeta )
-  {
-    throw new Error('Missing [imageMeta]');
-  }
-
-	// let show = $state(false);
+	if (!imageMeta) {
+		throw new Error('Missing [imageMeta]');
+	}
 
 	/** @type {HTMLDivElement|undefined} */
-	let imgBoxElem = $state();
-
-	/** @type {HTMLImageElement|undefined} */
-	let imgElem = $state();
+	let containerElem = $state();
 
-	let aspectStyle = $state('');
-
-	// > Loading
+	let imageMeta_ = $state();
+	let variantsLoader = $state();
+	let variantObjectUrl = $state(null);
+	let objectUrl = $state(null);
 
+	// For single image meta
 	let metaWidth = $state(0);
 	let metaHeight = $state(0);
 
-	let imageMeta_ = $state();
+	/** @type {ImageLoader|undefined} */
+	let imageLoader_ = $state();
 
 	$effect(() => {
-		if( imageMeta )
-		{
-			imageMeta_ = toSingleImageMeta( imageMeta );
+		// Setup variants loader for responsive images
+		if (Array.isArray(imageMeta) && !imageLoader && !variantsLoader) {
+			variantsLoader = new ImageVariantsLoader(imageMeta, {
+				devicePixelRatio: window.devicePixelRatio
+			});
+		}
+		// Handle single image meta
+		else if (imageMeta && !variantsLoader) {
+			imageMeta_ = toSingleImageMeta(imageMeta);
 		}
 	});
 
+	// Handle progress reporting
 	$effect(() => {
-		//
-		// Set meta width and height
-		//
-		if (imageMeta_) {
-			if (imageMeta_.width) {
-				metaWidth = imageMeta_.width;
-			}
+		if (!onProgress) return;
 
-			if (imageMeta_.height) {
-				metaHeight = imageMeta_.height;
-			}
+		// Report progress from variants loader
+		if (variantsLoader) {
+			onProgress(variantsLoader.progress);
+		}
+		// Report progress from single image loader
+		else if (imageLoader_) {
+			onProgress(imageLoader_.progress);
 		}
 	});
 
-	/** @type {ImageLoader|undefined} */
-	let imageLoader_ = $state();
+	$effect(() => {
+		if (imageMeta_) {
+			metaWidth = imageMeta_.width ?? 0;
+			metaHeight = imageMeta_.height ?? 0;
+		}
+	});
 
-	$effect( () => {
-		//
-		// User supplied imageLoader instead of imageMeta
-		//
-		if( !imageMeta && imageLoader && !imageLoader_ )
-		{
+	$effect(() => {
+		if (!imageMeta && imageLoader && !imageLoader_) {
 			imageLoader_ = imageLoader;
 			imageMeta_ = imageLoader.imageMeta;
 		}
-	} );
-
-	/** @type {string|null} */
-	let objectUrl = $state(null);
+	});
 
 	$effect(() => {
-		//
-		// Create image loader
-		//
 		if (imageMeta_ && !imageLoader_) {
 			imageLoader_ = new ImageLoader({ imageMeta: imageMeta_ });
 		}
 	});
 
 	$effect(() => {
-		//
-		// Start loading if imageLoader_ is in state 'initial'
-		//
-		// TODO: implement lazy flag
-		//
 		if (imageLoader_?.initial) {
 			imageLoader_.load();
 		}
 	});
 
 	$effect(() => {
-		//
-		// Get objectUrl when the image has finished loading
-		//
-		if (imageLoader_.loaded) {
-			// @ts-ignore
+		if (imageLoader_?.loaded) {
 			objectUrl = imageLoader_.getObjectURL();
 		}
 
@@ -211,26 +134,62 @@
 		};
 	});
 
+	$effect(() => {
+		if (!containerElem || !variantsLoader) return;
+
+		const resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const { width, height } = entry.contentRect;
+				variantsLoader.updateOptimalImageMeta({
+					containerWidth: width,
+					containerHeight: height,
+					fit
+				});
+			}
+		});
+
+		resizeObserver.observe(containerElem);
+		return () => resizeObserver.disconnect();
+	});
+
+	$effect(() => {
+		if (variantsLoader?.loaded) {
+			variantObjectUrl = variantsLoader.getObjectURL();
+		}
+
+		return () => {
+			if (variantObjectUrl) {
+				URL.revokeObjectURL(variantObjectUrl);
+				variantObjectUrl = null;
+			}
+		};
+	});
 </script>
 
 <div
 	data-image="box"
-	bind:this={imgBoxElem}
+	bind:this={containerElem}
 	class="{base} {bg} {aspect} {overflow} {width} {height} {classes}"
 	style:--fit={fit}
 	style:--pos={position}
-	style:aspect-ratio={aspectStyle}
 	style:width={width || (height && aspect) ? undefined : '100%'}
 	style:height={height || (width && aspect) ? undefined : '100%'}
 	{...attrs}
 >
-	{#if metaWidth && metaHeight}
+	{#if variantsLoader?.loaded && variantObjectUrl}
+		<img
+			src={variantObjectUrl}
+			{alt}
+			width={variantsLoader.variant.width}
+			height={variantsLoader.variant.height}
+		/>
+	{:else if objectUrl && metaWidth && metaHeight}
 		<img src={objectUrl} {alt} width={metaWidth} height={metaHeight} />
 	{/if}
 </div>
 
 <style>
-	[data-image="box"] {
+	[data-image='box'] {
 		max-width: 100%;
 		max-height: 100%;
 	}

package/dist/components/image/ImageBox.svelte.d.ts

@@ -1,60 +1,17 @@
 export default ImageBox;
 declare const ImageBox: import("svelte").Component<{
-    /**
-     * - Base styling class
-     */
+    [attr: string]: any;
     base?: string;
-    /**
-     * - Background styling class
-     */
     bg?: string;
-    /**
-     * - Additional CSS classes
-     */
     classes?: string;
-    /**
-     * - Width of the image container
-     */
     width?: string;
-    /**
-     * - Height of the image container
-     */
     height?: string;
-    /**
-     * - Aspect ratio of the image container
-     */
     aspect?: string;
-    /**
-     * - Overflow behavior
-     */
     overflow?: string;
-    /**
-     * - Object-fit property
-     */
-    fit?: import("./typedef.js").ObjectFit;
-    /**
-     * - Object-position property
-     */
-    position?: import("./typedef.js").ObjectPosition;
-    /**
-     * Image metadata, TODO: array of image metadata for responsive image
-     */
-    imageMeta?: import("../../config/typedef.js").ImageMeta | import("../../config/typedef.js").ImageMeta[];
-    /**
-     * Image loader
-     */
-    imageLoader?: ImageLoader;
-    /**
-     * - Alternative text for the image
-     */
+    fit?: "contain" | "cover" | "fill";
+    position?: string;
+    imageMeta: import("../../config/typedef.js").ImageMeta | import("../../config/typedef.js").ImageMeta[];
+    imageLoader?: import("../../classes/svelte/image/index.js").ImageLoader;
     alt?: string;
-    /**
-     * - Progress callback function
-     */
-    onProgress?: () => import("../../classes/svelte/network-loader/typedef.js").LoadingProgress;
-    /**
-     * - Additional arbitrary attributes
-     */
-    attr?: any;
+    onProgress?: (progress: import("../../classes/svelte/network-loader/typedef.js").LoadingProgress) => void;
 }, {}, "">;
-import { ImageLoader } from '../../classes/svelte/image/index.js';

package/dist/components/image/ResponsiveImage.svelte

@@ -37,7 +37,7 @@
 	let imageVariant = $state(null);
 
 	$effect(() => {
-		variantsLoader.updateOptimalImageMeta(containerWidth);
+		variantsLoader.updateOptimalImageMeta({ containerWidth });
 	});
 
 	// $effect(() => {
@@ -53,22 +53,9 @@
 		if (variantsLoader.loaded) {
 			// @ts-ignore
 			imageUrl = variantsLoader.getObjectURL();
-
-			// image = new Image();
-			// image.src = url;
-
-			// image.onload = () => {
-			//   console.log('loaded');
-			//   imageUrl = url;
-			// };
 		}
 
 		return () => {
-			// if (image) {
-			//   image.onload = null;
-			//   image = undefined;
-			// }
-
 			if (imageUrl) {
 				URL.revokeObjectURL(imageUrl);
 				imageUrl = null;
@@ -81,6 +68,7 @@
 	// let image = $derived(variantsLoader.image);
 </script>
 
+™
 <div
 	bind:clientWidth={containerWidth}
 	class="{boxBase} {boxClasses}"

package/dist/components/image/ResponsiveImage.svelte__

@@ -0,0 +1,90 @@
+<script>
+	/** @typedef {import('$lib/config/typedef.js').ImageMeta} ImageMeta */
+
+	import { ImageVariantsLoader } from '$lib/classes/svelte/image/index.js';
+
+	/**
+	 * @type {{
+	 *   base?: string,
+	 *   classes?: string
+	 *   boxBase?: string,
+	 *   boxClasses?: string
+	 *   boxAttrs?: { [attr: string]: * },
+	 *   images: ImageMeta[],
+	 *   alt?: string
+	 * } & { [attr: string]: * }}
+	 */
+	const {
+		base,
+		classes,
+		boxBase,
+		boxClasses,
+		boxAttrs,
+
+		// Functional
+		images,
+		alt = '',
+
+		// Attributes
+		...attrs
+	} = $props();
+
+	let variantsLoader = new ImageVariantsLoader(images);
+
+	let containerWidth = $state(0);
+
+	/** @type {ImageMeta|null} */
+	let imageVariant = $state(null);
+
+	$effect(() => {
+		variantsLoader.updateOptimalImageMeta({ containerWidth });
+	});
+
+	// $effect(() => {
+	//   console.log('imageVariant', $state.snapshot(imageVariant));
+	// });
+
+	/** @type {string|null} */
+	let imageUrl = $state(null);
+
+	$effect(() => {
+		let image;
+
+		if (variantsLoader.loaded) {
+			// @ts-ignore
+			imageUrl = variantsLoader.getObjectURL();
+		}
+
+		return () => {
+			if (imageUrl) {
+				URL.revokeObjectURL(imageUrl);
+				imageUrl = null;
+			}
+		};
+	});
+
+	let variant = $derived(variantsLoader.variant);
+
+	// let image = $derived(variantsLoader.image);
+</script>
+
+™
+<div
+	bind:clientWidth={containerWidth}
+	class="{boxBase} {boxClasses}"
+	{...boxAttrs}
+>
+	<!-- <p class="p text-white">variant: {JSON.stringify(variant)}</p> -->
+
+	{#if variant}
+		<img
+			data-image="responsive"
+			src={imageUrl ? imageUrl : ''}
+			width={variant.width}
+			height={variant.height}
+			{alt}
+			class="{boxBase} {boxClasses}"
+			{...attrs}
+		/>
+	{/if}
+</div>

package/dist/util/image/index.d.ts

@@ -7,3 +7,19 @@
  * @param {ImageMeta|ImageMeta[]} imageMeta
  */
 export function toSingleImageMeta(imageMeta: ImageMeta | ImageMeta[]): import("../../config/typedef").ImageMeta;
+/**
+ * Calculate effective width based on container dimensions and fit mode
+ *
+ * @param {object} params
+ * @param {number} [params.containerWidth] Container width in pixels
+ * @param {number} [params.containerHeight] Container height in pixels
+ * @param {number} params.imageAspectRatio Original image aspect ratio (width/height)
+ * @param {'cover'|'contain'|'fill'} [params.fit='contain'] Fit mode
+ * @returns {number} Effective width needed
+ */
+export function calculateEffectiveWidth({ containerWidth, containerHeight, imageAspectRatio, fit }: {
+    containerWidth?: number;
+    containerHeight?: number;
+    imageAspectRatio: number;
+    fit?: "cover" | "contain" | "fill";
+}): number;

package/dist/util/image/index.js

@@ -22,3 +22,65 @@ export function toSingleImageMeta(imageMeta) {
 
   throw new Error('Invalid value for parameter [imageMeta]');
 }
+
+/**
+ * Calculate effective width based on container dimensions and fit mode
+ *
+ * @param {object} params
+ * @param {number} [params.containerWidth] Container width in pixels
+ * @param {number} [params.containerHeight] Container height in pixels
+ * @param {number} params.imageAspectRatio Original image aspect ratio (width/height)
+ * @param {'cover'|'contain'|'fill'} [params.fit='contain'] Fit mode
+ * @returns {number} Effective width needed
+ */
+export function calculateEffectiveWidth({
+  containerWidth,
+  containerHeight,
+  imageAspectRatio,
+  fit = 'contain'
+}) {
+  if (containerWidth && !containerHeight) {
+    // If only width is provided, use it
+
+    return containerWidth;
+  }
+
+  if (!containerWidth && containerHeight) {
+    // If only height is provided, calculate width based on aspect ratio
+
+    return containerHeight * imageAspectRatio;
+  }
+
+  if (containerWidth && containerHeight) {
+    // If both dimensions are provided, calculate based on fit mode
+
+    const containerAspectRatio = containerWidth / containerHeight;
+
+    switch (fit) {
+      case 'fill':
+        return containerWidth;
+
+      case 'contain':
+        if (containerAspectRatio > imageAspectRatio) {
+          // Height constrained, scale width accordingly
+
+          return containerHeight * imageAspectRatio;
+        }
+        return containerWidth;
+
+      case 'cover':
+        if (containerAspectRatio < imageAspectRatio) {
+          // Height constrained, scale width accordingly
+
+          return containerHeight * imageAspectRatio;
+        }
+        return containerWidth;
+
+      default:
+        return containerWidth;
+    }
+  }
+
+  // Fallback if neither dimension is provided
+  throw new Error('Either containerWidth or containerHeight must be provided');
+}

package/dist/util/sveltekit/index.d.ts

@@ -0,0 +1 @@
+export * from "./route-folders/index.js";

package/dist/util/sveltekit/index.js

@@ -0,0 +1 @@
+export * from './route-folders/index.js';

package/dist/util/sveltekit/route-folders/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Validates if a path is within the project's src/routes directory
+ * @param {string} path - Path to validate
+ * @returns {boolean}
+ */
+export function isValidRoutePath(path: string): boolean;
+/**
+ * Scans route folders recursively, only including folders with +page.svelte
+ * @param {Object} options - Scan options
+ * @param {string} options.dirPath - Directory path to scan
+ * @param {number} [options.maxDepth=1] - Maximum depth to scan
+ * @param {Set<string>} [options.skipFolders=new Set(['assets'])] - Folders to skip
+ * @returns {Promise<Array<{displayName: string, path: string}>>}
+ * @throws {Error} If path is outside project routes directory
+ */
+export function scanRouteFolders({ dirPath, maxDepth, skipFolders }: {
+    dirPath: string;
+    maxDepth?: number;
+    skipFolders?: Set<string>;
+}): Promise<Array<{
+    displayName: string;
+    path: string;
+}>>;

package/dist/util/sveltekit/route-folders/index.js

@@ -0,0 +1,82 @@
+import { readdir } from 'node:fs/promises';
+import { join, resolve } from 'node:path';
+
+/**
+ * Validates if a path is within the project's src/routes directory
+ * @param {string} path - Path to validate
+ * @returns {boolean}
+ */
+export function isValidRoutePath(path) {
+  const normalizedPath = resolve(path);
+  const routesPath = resolve(process.cwd(), 'src/routes');
+  return normalizedPath.startsWith(routesPath);
+}
+
+/**
+ * Scans route folders recursively, only including folders with +page.svelte
+ * @param {Object} options - Scan options
+ * @param {string} options.dirPath - Directory path to scan
+ * @param {number} [options.maxDepth=1] - Maximum depth to scan
+ * @param {Set<string>} [options.skipFolders=new Set(['assets'])] - Folders to skip
+ * @returns {Promise<Array<{displayName: string, path: string}>>}
+ * @throws {Error} If path is outside project routes directory
+ */
+export async function scanRouteFolders({
+  dirPath,
+  maxDepth = 1,
+  skipFolders = new Set(['assets'])
+}) {
+  if (!isValidRoutePath(dirPath)) {
+    throw new Error('Invalid path: Must be within src/routes directory');
+  }
+
+  if (maxDepth < 1) return [];
+
+  try {
+    const entries = await readdir(dirPath, { withFileTypes: true });
+    const results = [];
+
+    for (const entry of entries) {
+      if (
+        !entry.isDirectory() ||
+        skipFolders.has(entry.name) ||
+        entry.name.startsWith('.')
+      ) {
+        continue;
+      }
+
+      const fullPath = join(dirPath, entry.name);
+      const currentPath = entry.name;
+
+      const dirContents = await readdir(fullPath);
+      const hasPageFile = dirContents.includes('+page.svelte');
+
+      if (hasPageFile) {
+        results.push({
+          displayName: entry.name,
+          path: currentPath
+        });
+      }
+
+      if (maxDepth > 1) {
+        const subFolders = await scanRouteFolders({
+          dirPath: fullPath,
+          maxDepth: maxDepth - 1,
+          skipFolders
+        });
+
+        for (const subFolder of subFolders) {
+          results.push({
+            displayName: `${entry.name}/${subFolder.displayName}`,
+            path: `${currentPath}/${subFolder.path}`
+          });
+        }
+      }
+    }
+
+    return results;
+  } catch (err) {
+    console.error(err);
+    throw new Error('Failed to scan directory');
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.0.96",
+	"version": "0.0.98",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"
@@ -70,6 +70,7 @@
 		"@sveltejs/adapter-auto": "^3.3.1",
 		"@sveltejs/package": "^2.3.7",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@tailwindcss/typography": "^0.5.16",
 		"@types/eslint": "^9.6.1",
 		"autoprefixer": "^10.4.20",
 		"cross-env": "^7.0.3",
@@ -94,7 +95,6 @@
 		"vitest": "^2.1.8"
 	},
 	"dependencies": {
-		"@tailwindcss/typography": "^0.5.16",
 		"zod": "^3.24.1"
 	}
 }

package/dist/components/inputs/text-input/TestTextInput.svelte__

@@ -1,102 +0,0 @@
-<script>
-  /**
-   * @type {{
-   *   base?: string,
-   *   error?: string,
-   *   classes?: string,
-   *   fieldClasses?: string,
-   *   fieldError?: string,
-   *   legendBase?: string,
-   *   legendClasses?: string,
-   *   legendError?: string,
-   *   value?: string,
-   *   type?: 'text' | 'url' | 'email' | 'number',
-   *   pattern?: string,
-   *   required?: boolean,
-   *   title?: string,
-   *   valid?: boolean,
-   *   pristine?: boolean,
-   *   validate?: (value: string) => string | undefined,
-   * } & { [attr: string]: * }}
-   */
-  let {
-    base = '',
-    error = '',
-    classes = '',
-
-    fieldClasses,
-    fieldError,
-
-    legendBase = 'ml-16p px-8p',
-    legendClasses,
-    legendError,
-
-    value = $bindable(''),
-    type = 'text',
-    pattern,
-    required = false,
-
-    title = '',
-
-    valid = $bindable(true),
-    pristine = $bindable(true),
-
-    validate,
-
-    ...attrs
-  } = $props();
-
-  let inputRef = $state();
-  let validationMessage = $state('');
-  let initialValue = $state('');
-
-  $effect(() => {
-    if (!inputRef) return;
-    initialValue = value;
-    validateInput(inputRef, value);
-  });
-
-  function validateInput(input, currentValue) {
-    input.setCustomValidity('');
-    const isBuiltInValid = input.checkValidity();
-
-    if (isBuiltInValid && validate) {
-      const customError = validate(currentValue);
-      input.setCustomValidity(customError || '');
-    }
-
-    pristine = currentValue === initialValue;
-    valid = input.validity.valid;
-    validationMessage = input.validationMessage;
-  }
-
-  function handleInput(event) {
-    validateInput(event.target, event.target.value);
-  }
-</script>
-
-<fieldset
-  data-inputs="text-input"
-  class="flex w-full items-center rounded {fieldClasses}"
->
-  <legend class="{legendBase} {legendClasses}">{title}</legend>
-
-  <input
-    bind:this={inputRef}
-    {type}
-    {pattern}
-    {required}
-    {value}
-    class="w-full border-none bg-transparent {base} {classes}"
-    aria-invalid={!valid}
-    aria-errormessage={!valid ? 'validation-message' : undefined}
-    oninput={handleInput}
-    {...attrs}
-  />
-
-  {#if !valid}
-    <small id="validation-message" class="text-error" role="alert">
-      {validationMessage}
-    </small>
-  {/if}
-</fieldset>

package/dist/components/inputs/text-input/TextInput.svelte___

@@ -1,83 +0,0 @@
-<script>
-	/**
-	 * @type {{
-	 *   classes?: string,
-	 *   fieldClasses?: string,
-	 *   legendClasses?: string,
-	 *   legendTitle?: string,
-	 *   error?: boolean,
-	 *   type?: string,
-	 *   placeholder: string,
-	 *   required: boolean,
-	 *   snippetWarning?: import('svelte').Snippet,
-	 * } & { [attr: string]: * }}
-	 */
-	let {
-		// Style
-		classes,
-		fieldClasses,
-		legendClasses,
-
-		// Functionality
-		name,
-		disabled,
-		required,
-
-		// initialValue
-		// value
-		// readonly
-		// pattern
-		// minlength
-		// maxlength
-
-		// Text placeholders
-		legendTitle,
-		placeholder,
-
-		type,
-		snippetWarning,
-
-		// Attributes
-		...attrs
-	} = $props();
-</script>
-
-{#snippet defaultWarning()}
-	<svg
-		width="17"
-		height="16"
-		viewBox="0 0 17 16"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<path
-			fill-rule="evenodd"
-			clip-rule="evenodd"
-			d="M6.36747 1.28014C7.3152 -0.426712 9.68492 -0.426712 10.6318 1.28014L16.6669 12.1596C17.6138 13.8664 16.429 16 14.5343 16H2.46497C0.570331 16 -0.613713 13.8664 0.333194 12.1596L6.36665 1.28014H6.36747ZM8.50006 5.75805C8.66328 5.75805 8.81981 5.82549 8.93522 5.94553C9.05063 6.06556 9.11547 6.22837 9.11547 6.39812V9.59846C9.11547 9.76822 9.05063 9.93102 8.93522 10.0511C8.81981 10.1711 8.66328 10.2385 8.50006 10.2385C8.33684 10.2385 8.18031 10.1711 8.0649 10.0511C7.94949 9.93102 7.88465 9.76822 7.88465 9.59846V6.39812C7.88465 6.22837 7.94949 6.06556 8.0649 5.94553C8.18031 5.82549 8.33684 5.75805 8.50006 5.75805ZM8.50006 12.7988C8.66328 12.7988 8.81981 12.7314 8.93522 12.6113C9.05063 12.4913 9.11547 12.3285 9.11547 12.1587C9.11547 11.989 9.05063 11.8262 8.93522 11.7061C8.81981 11.5861 8.66328 11.5187 8.50006 11.5187C8.33684 11.5187 8.18031 11.5861 8.0649 11.7061C7.94949 11.8262 7.88465 11.989 7.88465 12.1587C7.88465 12.3285 7.94949 12.4913 8.0649 12.6113C8.18031 12.7314 8.33684 12.7988 8.50006 12.7988Z"
-			fill="#F8705E"
-		/>
-	</svg>
-{/snippet}
-
-<fieldset
-	data-input="text-input"
-	class="flex w-full items-center rounded {fieldClasses}"
->
-	<legend class="px-2 {legendClasses}" class:error>{legendTitle}</legend>
-	<input
-		class="w-full border-none bg-transparent {classes}"
-		{type}
-		{placeholder}
-		{name}
-		{required}
-		{...attrs}
-	/>
-	{#if error}
-		{#if snippetWarning}
-			{@render snippetWarning()}
-		{:else}
-			{@render defaultWarning()}
-		{/if}
-		<!-- <img src={warningSymbol} class="mb-2 mr-8" alt="Warning" /> -->
-	{/if}
-</fieldset>

package/dist/css/tw-prose.postcss__

@@ -1,259 +0,0 @@
-/* Base prose styles */
-.prose {
-  font-size: 1rem;
-  line-height: 1.75;
-  max-width: 65ch;
-}
-
-.prose > * + * {
-  margin-top: 1.25em;
-}
-
-/* Headings */
-.prose h1 {
-  font-size: 2.25em;
-  line-height: 1.1111111;
-  margin-top: 0;
-  margin-bottom: 0.8888889em;
-  font-weight: 800;
-}
-
-.prose h2 {
-  font-size: 1.5em;
-  line-height: 1.3333333;
-  margin-top: 2em;
-  margin-bottom: 1em;
-  font-weight: 700;
-}
-
-.prose h3 {
-  font-size: 1.25em;
-  line-height: 1.6;
-  margin-top: 1.6em;
-  margin-bottom: 0.6em;
-  font-weight: 600;
-}
-
-.prose h4 {
-  font-size: 1.125em;
-  line-height: 1.5;
-  margin-top: 1.5em;
-  margin-bottom: 0.5em;
-  font-weight: 600;
-}
-
-/* Paragraphs */
-.prose p {
-  margin-top: 1.25em;
-  margin-bottom: 1.25em;
-}
-
-/* Lists */
-.prose ul,
-.prose ol {
-  padding-left: 1.625em;
-  margin-top: 1.25em;
-  margin-bottom: 1.25em;
-}
-
-.prose li {
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-
-.prose > ul > li p {
-  margin-top: 0.75em;
-  margin-bottom: 0.75em;
-}
-
-.prose > ul > li > *:first-child {
-  margin-top: 1.25em;
-}
-
-.prose > ul > li > *:last-child {
-  margin-bottom: 1.25em;
-}
-
-/* Nested lists */
-.prose ul ul, 
-.prose ul ol,
-.prose ol ul,
-.prose ol ol {
-  margin-top: 0.75em;
-  margin-bottom: 0.75em;
-}
-
-/* Links */
-.prose a {
-  color: #111827;
-  text-decoration: underline;
-  font-weight: 500;
-}
-
-.prose a:hover {
-  text-decoration-thickness: 2px;
-}
-
-/* Code blocks */
-.prose code {
-  color: #111827;
-  font-weight: 600;
-  font-size: 0.875em;
-}
-
-.prose pre {
-  color: #e5e7eb;
-  background-color: #1f2937;
-  overflow-x: auto;
-  font-size: 0.875em;
-  line-height: 1.7142857;
-  margin-top: 1.7142857em;
-  margin-bottom: 1.7142857em;
-  border-radius: 0.375rem;
-  padding: 0.8571429em 1.1428571em;
-}
-
-.prose pre code {
-  background-color: transparent;
-  border-radius: 0;
-  padding: 0;
-  font-weight: 400;
-  color: inherit;
-  font-size: inherit;
-  font-family: inherit;
-  line-height: inherit;
-}
-
-/* Blockquotes */
-.prose blockquote {
-  font-weight: 500;
-  font-style: italic;
-  color: #111827;
-  border-left-width: 0.25rem;
-  border-left-color: #e5e7eb;
-  margin-top: 1.6em;
-  margin-bottom: 1.6em;
-  padding-left: 1em;
-}
-
-/* Tables */
-.prose table {
-  width: 100%;
-  table-layout: auto;
-  text-align: left;
-  margin-top: 2em;
-  margin-bottom: 2em;
-  font-size: 0.875em;
-  line-height: 1.7142857;
-}
-
-.prose thead {
-  font-weight: 600;
-  border-bottom-width: 1px;
-  border-bottom-color: #d1d5db;
-}
-
-.prose thead th {
-  vertical-align: bottom;
-  padding-right: 0.5714286em;
-  padding-bottom: 0.5714286em;
-  padding-left: 0.5714286em;
-}
-
-.prose tbody tr {
-  border-bottom-width: 1px;
-  border-bottom-color: #e5e7eb;
-}
-
-.prose tbody td {
-  vertical-align: top;
-  padding: 0.5714286em;
-}
-
-/* Size variations */
-.prose-sm {
-  font-size: 0.875rem;
-  line-height: 1.7142857;
-}
-
-.prose-lg {
-  font-size: 1.125rem;
-  line-height: 1.7777778;
-}
-
-.prose-xl {
-  font-size: 1.25rem;
-  line-height: 1.8;
-}
-
-/* Dark mode */
-.prose-invert {
-  color: #d1d5db;
-}
-
-.prose-invert a {
-  color: #fff;
-}
-
-.prose-invert strong {
-  color: #fff;
-}
-
-.prose-invert code {
-  color: #fff;
-}
-
-.prose-invert thead {
-  border-bottom-color: #4b5563;
-}
-
-.prose-invert tbody tr {
-  border-bottom-color: #374151;
-}
-
-.prose-invert blockquote {
-  color: #9ca3af;
-  border-left-color: #4b5563;
-}
-
-/* Images */
-.prose img {
-  margin-top: 2em;
-  margin-bottom: 2em;
-}
-
-.prose figure > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.prose figure figcaption {
-  color: #6b7280;
-  font-size: 0.875em;
-  line-height: 1.4285714;
-  margin-top: 0.8571429em;
-}
-
-/* Custom elements */
-.prose hr {
-  border-color: #e5e7eb;
-  border-top-width: 1px;
-  margin-top: 3em;
-  margin-bottom: 3em;
-}
-
-.prose strong {
-  font-weight: 600;
-  color: #111827;
-}
-
-.prose em {
-  font-style: italic;
-}
-
-/* Focus styles */
-.prose a:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  text-decoration-thickness: 2px;
-}

package/dist/themes/hkdev/global/text.postcss__

@@ -1,35 +0,0 @@
-/**
- * Tailwind defaults
- *
- * text-sm 14px;
- * text-base 16px;
- * text-lg 18px;
- * text-xl 20px;
- * text-2xl 24px;
- * text-3xl 30px;
- * text-4xl 36px;
- * text-5xl 48px;
- * text-6xl 60px;
- * text-7xl 72px;
- * text-8xl 96px;
- * text-9xl 128px;
- *
- * @see https://tailwindcss.com/docs/font-size
- */
-
-@define-mixin all_text {
-
-  a {
-    @apply text-sm font-bold underline;
-  }
-
-  p {
-    @apply text-xl;
-  }
-
-  h1 {
-    &.text-presenter-title {      
-      @apply text-5xl;
-    }
-  }
-}

package/dist/themes/hkdev/global/vars.postcss__

@@ -1,7 +0,0 @@
-
-@define-mixin all_vars {
-
-  /* --tab-bar-height: 72px;  
-  --tab-bar-selector-width: 132px;
-  --tab-bar-selector-height: var(--tab-bar-height, 72px); */
-}