@hkdigital/lib-sveltekit 0.0.92 → 0.0.94

package/README.md

@@ -66,7 +66,7 @@ Vite should include postcss-import, but the only solution to get it working for
 For example:
 
 ```css
-/* src/app.css */
+/* src/app.postcss */
 @import '../node_modules/@hkdigital/lib-sveltekit/dist/css/utilities.postcss';
 ```
 

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

@@ -79,10 +79,7 @@ export default class ImageScene {
   });
 
   /**
-   * Construct AudioScene
-   *
-   * @param {object} _
-   * @param {AudioContext} _.audioContext
+   * Construct ImageScene
    */
   constructor() {
     const state = this.#state;

package/dist/components/image/ImageBox.svelte

@@ -113,6 +113,11 @@
 		...attrs
 	} = $props();
 
+  if( !imageMeta )
+  {
+    throw new Error('Missing [imageMeta]');
+  }
+
 	// let show = $state(false);
 
 	/** @type {HTMLDivElement|undefined} */

package/dist/components/image/ResponsiveImage.svelte

@@ -1,5 +1,5 @@
 <script>
-	/** @typedef {import('../../types/imagetools.js').ImageMeta} ImageMeta */
+	/** @typedef {import('../../config/typedef.js').ImageMeta} ImageMeta */
 
 	import { ImageVariantsLoader } from '../../classes/svelte/image/index.js';
 

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

@@ -1,5 +1,5 @@
 export default ResponsiveImage;
-export type ImageMeta = any;
+export type ImageMeta = import("../../config/typedef.js").ImageMeta;
 declare const ResponsiveImage: import("svelte").Component<{
     base?: string;
     classes?: string;

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

@@ -1,4 +1,5 @@
+export { default as ImageBox } from "./ImageBox.svelte";
 export { default as ResponsiveImage } from "./ResponsiveImage.svelte";
 declare const _default: {};
 export default _default;
-export type ImageMeta = any;
+export type ImageMeta = import("../../config/typedef.js").ImageMeta;

package/dist/components/image/index.js

@@ -1,5 +1,6 @@
-/** @typedef {import('../../types/imagetools.js').ImageMeta} ImageMeta */
+/** @typedef {import('../../config/typedef.js').ImageMeta} ImageMeta */
 
+export { default as ImageBox } from './ImageBox.svelte';
 export { default as ResponsiveImage } from './ResponsiveImage.svelte';
 
 export default {};

package/dist/components/widgets/compare-left-right/CompareLeftRight.svelte

@@ -0,0 +1,175 @@
+<!-- CompareLeftRight.svelte -->
+<script>
+  /** @type {HTMLElement | null} */
+  let container = $state(null);
+  let isMouseDown = $state(false);
+  let position = $state(50);
+
+  /** @type {{
+    leftContent?: import('svelte').Snippet,
+    rightContent?: import('svelte').Snippet,
+    classes?: string,
+    dividerColor?: string,
+    handleColor?: string
+  } & Record<string, any>} */
+  let {
+    leftContent,
+    rightContent,
+    classes = '',
+    dividerColor = 'bg-surface-500',
+    handleColor = 'bg-surface-700',
+    ...attrs
+  } = $props();
+
+  const leftStyle = $derived(`clip-path: inset(0 ${100 - position}% 0 0)`);
+  const rightStyle = $derived(`clip-path: inset(0 0 0 ${position}%)`);
+  const dividerStyle = $derived(`left: ${position}%`);
+
+  /**
+   * Updates the position with keyboard navigation
+   * @param {number} newPosition - The new position to set
+   */
+  function updatePosition(newPosition) {
+    position = Math.max(0, Math.min(100, newPosition));
+  }
+
+  /**
+   * Handles the mouse down event on the divider
+   * @param {MouseEvent} event - The mouse event
+   */
+  function handleMouseDown(event) {
+    event.preventDefault();
+    isMouseDown = true;
+  }
+
+  /**
+   * Updates the divider position based on mouse movement
+   * @param {MouseEvent} event - The mouse event
+   */
+  function handleMouseMove(event) {
+    if (!isMouseDown || !container) return;
+
+    const rect = container.getBoundingClientRect();
+    const x = Math.min(Math.max(0, event.clientX - rect.left), rect.width);
+    updatePosition((x / rect.width) * 100);
+  }
+
+  /**
+   * Handles keyboard navigation for the slider
+   * @param {KeyboardEvent} event - The keyboard event
+   */
+  function handleKeyDown(event) {
+    const step = event.shiftKey ? 10 : 1;
+
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'ArrowDown':
+        event.preventDefault();
+        updatePosition(position - step);
+        break;
+      case 'ArrowRight':
+      case 'ArrowUp':
+        event.preventDefault();
+        updatePosition(position + step);
+        break;
+      case 'Home':
+        event.preventDefault();
+        updatePosition(0);
+        break;
+      case 'End':
+        event.preventDefault();
+        updatePosition(100);
+        break;
+      case 'PageDown':
+        event.preventDefault();
+        updatePosition(position - 10);
+        break;
+      case 'PageUp':
+        event.preventDefault();
+        updatePosition(position + 10);
+        break;
+    }
+  }
+
+  /**
+   * Resets the mouse down state
+   */
+  function handleMouseUp() {
+    isMouseDown = false;
+  }
+
+  // Effect to handle document-level mouse events
+  $effect(() => {
+    if (isMouseDown) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+    }
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  });
+</script>
+
+<div
+  bind:this={container}
+  class="relative flex h-full w-full overflow-hidden {classes}"
+  role="group"
+  aria-label="Content comparison"
+  {...attrs}
+>
+  <!-- Content container - both pieces of content are positioned absolutely -->
+  <div class="relative h-full w-full">
+    <!-- Left content -->
+    <div
+      class="absolute h-full w-full"
+      style={leftStyle}
+    >
+      {@render leftContent()}
+    </div>
+
+    <!-- Right content -->
+    <div
+      class="absolute h-full w-full"
+      style={rightStyle}
+    >
+      {@render rightContent()}
+    </div>
+  </div>
+
+  <!-- Slider control -->
+  <div
+    class="absolute inset-y-0 z-10 flex w-1 cursor-col-resize items-center justify-center {dividerColor}"
+    style={dividerStyle}
+  >
+    <!-- Vertical separator line -->
+    <div class="absolute inset-y-0 w-0.5 bg-current opacity-50"></div>
+
+    <button
+      class="flex h-10 w-10 items-center justify-center rounded-full shadow-lg hover:scale-110 transition-transform focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 {handleColor}"
+      on:mousedown={handleMouseDown}
+      on:keydown={handleKeyDown}
+      role="slider"
+      aria-orientation="vertical"
+      aria-valuenow={position}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label="Adjust divider position"
+    >
+      <svg
+        class="h-6 w-6 stroke-surface-50"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M7 16l-4-4 4-4" />
+        <path d="M17 8l4 4-4 4" />
+        <path d="M3 12h18" />
+      </svg>
+    </button>
+  </div>
+</div>

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

@@ -0,0 +1,8 @@
+export default CompareLeftRight;
+declare const CompareLeftRight: import("svelte").Component<{
+    leftContent?: import("svelte").Snippet;
+    rightContent?: import("svelte").Snippet;
+    classes?: string;
+    dividerColor?: string;
+    handleColor?: string;
+} & Record<string, any>, {}, "">;

package/dist/components/widgets/compare-left-right/index.d.ts

@@ -0,0 +1 @@
+export { default as CompareLeftRight } from "./CompareLeftRight.svelte";

package/dist/components/widgets/compare-left-right/index.js

@@ -0,0 +1 @@
+export { default as CompareLeftRight } from "./CompareLeftRight.svelte";

package/dist/config/imagetools.d.ts

@@ -1,9 +1,3 @@
-// export interface ImageMeta {
-//   src: string;
-//   width: number;
-//   height: number;
-// }
-
 type ImageMeta = import('./typedef.js').ImageMeta;
 
 declare module '*?responsive' {

package/package.json

@@ -1,7 +1,10 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.0.92",
-	"author": "Jens Kleinhout, HKdigital (https://hkdigital.nl)",
+	"version": "0.0.94",
+	"author": {
+		"name": "HKdigital",
+		"url": "https://hkdigital.nl"
+	},
 	"license": "ISC",
 	"repository": {
 		"type": "git",
@@ -45,14 +48,23 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
 		"./*": "./dist/*"
 	},
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.15.2",
-		"svelte": "^5.0.0"
+		"svelte": "^5.0.0",
+		"runed": "^0.23.0",
+		"valibot": "^0.42.1"
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.49.1",
+		"@skeletonlabs/skeleton": "3.0.0-next.2",
+		"@skeletonlabs/skeleton-svelte": "1.0.0-next.4",
 		"@sveltejs/adapter-auto": "^3.3.1",
 		"@sveltejs/package": "^2.3.7",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
@@ -64,6 +76,8 @@
 		"eslint-plugin-svelte": "^2.46.1",
 		"globals": "^15.14.0",
 		"jsdom": "^26.0.0",
+		"postcss": "^8.5.1",
+		"postcss-mixins": "^11.0.3",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.9",
@@ -78,8 +92,6 @@
 		"vitest": "^2.1.8"
 	},
 	"dependencies": {
-		"runed": "^0.23.0",
-		"valibot": "^0.42.1",
 		"zod": "^3.24.1"
 	}
 }

package/dist/components/image/EnhancedImage.svelte__

@@ -1,162 +0,0 @@
-<script>
-  import { onMount } from 'svelte';
-
-  /**
-   * @example
-   * import { EnhancedImage }
-   *   from '$lib/components/EnhancedImage/index.js';
-   *
-   * <EnhancedImage
-   *   classes="aspect-video max-h-svh w-full border-8 border-pink-500"
-   *   src={NeonLightsOff}
-   *   onload={() => {
-   *     console.log('loaded');
-   *   }}
-   * />
-   */
-
-  /**
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   classes?: string,
-   *   overflow?: string,
-   *   aspect?: string,
-   *   fit?: string,
-   *   position?: string,
-   *   src: string | import('$lib/typedef/image.js').Picture,
-   *   alt?: string,
-   *   onload?: ( e: (Event|{ type: string, target: HTMLImageElement }) ) => void,
-   *   onerror?: ( e: (Event|{ type: string, target: HTMLImageElement }) ) => void,
-   *   loading?: string
-   * } & { [attr: string]: * }}
-   */
-  let {
-    // Style
-    base,
-    bg,
-    classes,
-
-    overflow = 'overflow-clip',
-    aspect,
-
-    fit = 'contain',
-    position = 'left top',
-
-    src,
-    alt = '',
-    onload,
-    onerror,
-    loading,
-
-    // Attributes
-    ...attrs
-  } = $props();
-
-  // let show = $state(false);
-
-  /** @type {HTMLDivElement|undefined} */
-  let imgBoxElem = $state();
-
-  /** @type {HTMLImageElement|undefined} */
-  let imgElem = $state();
-
-  /** @type {string | import('$lib/typedef/image.js').Picture} */
-  let src_;
-
-  $effect(() => {
-    if (src_ && src !== src_) {
-      throw new Error('Property [src] change is not supported');
-    }
-  });
-
-  let aspectStyle = $state('');
-
-  // > Event names
-  const LOAD = 'load';
-  const ERROR = 'error';
-
-  // > onMount
-
-  onMount(() => {
-    // show = true;
-
-    imgElem = imgBoxElem?.getElementsByTagName('img')[0];
-
-    if (!imgElem) {
-      throw new Error('Missing IMG element');
-    }
-
-    // > Auto set box aspect to same as image aspect if not set
-
-    if (!aspect) {
-      aspectStyle = `${imgElem.width / imgElem.height}`;
-    } else {
-      aspectStyle = '';
-    }
-
-    // > Register image onload and onerror handlers
-
-    /** @type {( e: Event ) => void} */
-    let onloadFn;
-
-    if (onload) {
-      if (imgElem?.complete) {
-        onload({ type: LOAD, target: imgElem });
-      } else {
-        onloadFn = onload;
-        imgElem?.addEventListener(LOAD, onloadFn);
-      }
-    }
-
-    /** @type {( e: Event ) => void} */
-    let onerrorFn;
-
-    if (onerror) {
-      onerrorFn = onerror;
-      imgElem?.addEventListener(ERROR, onerrorFn);
-    }
-
-    return () => {
-      if (onloadFn) {
-        imgElem?.removeEventListener(LOAD, onloadFn);
-      }
-
-      if (onerrorFn) {
-        imgElem?.removeEventListener(ERROR, onerrorFn);
-      }
-    };
-  });
-</script>
-
-<div
-  data-hk-enhanced-image
-  bind:this={imgBoxElem}
-  class="{base} {bg} {aspect} {overflow} {classes}"
-  style:--fit={fit}
-  style:--pos={position}
-  style:aspect-ratio={aspectStyle}
-  {...attrs}
->
-  <enhanced:img {src} {alt} />
-</div>
-
-<style>
-  [data-hk-enhanced-image],
-  :global([data-hk-enhanced-image] picture),
-  :global([data-hk-enhanced-image] img) {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-  :global([data-hk-enhanced-image] picture),
-  :global([data-hk-enhanced-image] img) {
-    max-width: 100%;
-    max-height: 100%;
-  }
-
-  :global([data-hk-enhanced-image] img) {
-    object-fit: var(--fit);
-    object-position: var(--pos);
-  }
-</style>