@hkdigital/lib-sveltekit 0.2.7 → 0.2.8

package/package.json

@@ -1,112 +1,112 @@
-{
-	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.2.7",
-	"author": {
-		"name": "HKdigital",
-		"url": "https://hkdigital.nl"
-	},
-	"license": "ISC",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/HKdigital/hkdigital--lib-sveltekit.git"
-	},
-	"keywords": [
-		"component-library",
-		"sveltekit",
-		"skeleton",
-		"tailwindcss",
-		"runed",
-		"valibot"
-	],
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run package",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
-		"publish:npm": "npm version patch && npm publish --access public && git push",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint .",
-		"test:unit": "vitest",
-		"test": "npm run test:unit -- --run && npm run test:e2e",
-		"test:e2e": "playwright test",
-		"upgrade:all": "ncu -u && pnpm install"
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*",
-		"!dist/**/testdata.*",
-		"!dist/**/*.testdata.*"
-	],
-	"sideEffects": [
-		"**/*.css"
-	],
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js",
-			"default": "./dist/index.js"
-		},
-		"./*": "./dist/*",
-		"./typedef": "./dist/typedef/index.js"
-	},
-	"peerDependencies": {
-		"@eslint/js": "^9.28.0",
-		"@steeze-ui/heroicons": "^2.4.2",
-		"@sveltejs/kit": "^2.21.2",
-		"eslint-plugin-import": "^2.31.0",
-		"pino": "^9.7.0",
-		"pino-pretty": "^13.0.0",
-		"runed": "^0.23.1",
-		"svelte": "^5.33.16",
-		"svelte-preprocess": "^6.0.3",
-		"valibot": "^1.1.0",
-		"zod": "^3.24.2"
-	},
-	"devDependencies": {
-		"@eslint/js": "^9.28.0",
-		"@playwright/test": "^1.52.0",
-		"@skeletonlabs/skeleton": "3.0.0-next.2",
-		"@skeletonlabs/skeleton-svelte": "1.0.0-next.4",
-		"@steeze-ui/heroicons": "^2.4.2",
-		"@sveltejs/adapter-auto": "^6.0.1",
-		"@sveltejs/package": "^2.3.11",
-		"@sveltejs/vite-plugin-svelte": "^5.1.0",
-		"@tailwindcss/typography": "^0.5.16",
-		"@testing-library/svelte": "^5.2.7",
-		"@testing-library/user-event": "^14.6.1",
-		"@types/eslint": "^9.6.1",
-		"autoprefixer": "^10.4.21",
-		"eslint": "^9.28.0",
-		"eslint-config-prettier": "^10.1.5",
-		"eslint-plugin-import": "^2.31.0",
-		"eslint-plugin-svelte": "^3.9.1",
-		"fake-indexeddb": "^6.0.0",
-		"globals": "^16.2.0",
-		"jsdom": "^26.1.0",
-		"pino": "^9.7.0",
-		"pino-pretty": "^13.0.0",
-		"postcss": "^8.5.4",
-		"postcss-mixins": "^11.0.3",
-		"prettier": "^3.5.3",
-		"prettier-plugin-svelte": "^3.4.0",
-		"prettier-plugin-tailwindcss": "^0.6.12",
-		"publint": "^0.3.12",
-		"standardized-audio-context-mock": "^9.7.22",
-		"svelte": "^5.33.16",
-		"svelte-check": "^4.2.1",
-		"svelte-preprocess": "^6.0.3",
-		"tailwindcss": "^3.4.17",
-		"typescript": "^5.8.3",
-		"vite": "^6.3.5",
-		"vite-imagetools": "^7.1.0",
-		"vitest": "^3.2.2",
-		"zod": "^3.24.2"
-	}
-}
+{
+	"name": "@hkdigital/lib-sveltekit",
+	"version": "0.2.8",
+	"author": {
+		"name": "HKdigital",
+		"url": "https://hkdigital.nl"
+	},
+	"license": "ISC",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/HKdigital/hkdigital--lib-sveltekit.git"
+	},
+	"keywords": [
+		"component-library",
+		"sveltekit",
+		"skeleton",
+		"tailwindcss",
+		"runed",
+		"valibot"
+	],
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"publish:npm": "npm version patch && npm publish --access public && git push",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run && npm run test:e2e",
+		"test:e2e": "playwright test",
+		"upgrade:all": "ncu -u && pnpm install"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*",
+		"!dist/**/testdata.*",
+		"!dist/**/*.testdata.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./*": "./dist/*",
+		"./typedef": "./dist/typedef/index.js"
+	},
+	"peerDependencies": {
+		"@eslint/js": "^9.28.0",
+		"@steeze-ui/heroicons": "^2.4.2",
+		"@sveltejs/kit": "^2.21.2",
+		"eslint-plugin-import": "^2.31.0",
+		"pino": "^9.7.0",
+		"pino-pretty": "^13.0.0",
+		"runed": "^0.23.1",
+		"svelte": "^5.33.16",
+		"svelte-preprocess": "^6.0.3",
+		"valibot": "^1.1.0",
+		"zod": "^3.24.2"
+	},
+	"devDependencies": {
+		"@eslint/js": "^9.28.0",
+		"@playwright/test": "^1.52.0",
+		"@skeletonlabs/skeleton": "3.0.0-next.2",
+		"@skeletonlabs/skeleton-svelte": "1.0.0-next.4",
+		"@steeze-ui/heroicons": "^2.4.2",
+		"@sveltejs/adapter-auto": "^6.0.1",
+		"@sveltejs/package": "^2.3.11",
+		"@sveltejs/vite-plugin-svelte": "^5.1.0",
+		"@tailwindcss/typography": "^0.5.16",
+		"@testing-library/svelte": "^5.2.7",
+		"@testing-library/user-event": "^14.6.1",
+		"@types/eslint": "^9.6.1",
+		"autoprefixer": "^10.4.21",
+		"eslint": "^9.28.0",
+		"eslint-config-prettier": "^10.1.5",
+		"eslint-plugin-import": "^2.31.0",
+		"eslint-plugin-svelte": "^3.9.1",
+		"fake-indexeddb": "^6.0.0",
+		"globals": "^16.2.0",
+		"jsdom": "^26.1.0",
+		"pino": "^9.7.0",
+		"pino-pretty": "^13.0.0",
+		"postcss": "^8.5.4",
+		"postcss-mixins": "^11.0.3",
+		"prettier": "^3.5.3",
+		"prettier-plugin-svelte": "^3.4.0",
+		"prettier-plugin-tailwindcss": "^0.6.12",
+		"publint": "^0.3.12",
+		"standardized-audio-context-mock": "^9.7.22",
+		"svelte": "^5.33.16",
+		"svelte-check": "^4.2.1",
+		"svelte-preprocess": "^6.0.3",
+		"tailwindcss": "^3.4.17",
+		"typescript": "^5.8.3",
+		"vite": "^6.3.5",
+		"vite-imagetools": "^7.1.0",
+		"vitest": "^3.2.2",
+		"zod": "^3.24.2"
+	}
+}

package/dist/components/drag-drop/drag-state.svelte.js__

@@ -1,323 +0,0 @@
-// drag-state.svelte.js
-import { defineStateContext } from '$lib/util/svelte/state-context/index.js';
-
-/** @typedef {import('$lib/typedef').SimulatedDragEvent} SimulatedDragEvent */
-
-class DragState {
-  // Existing draggables map
-  draggables = $state(new Map());
-
-  // New: Registry for dropzones
-  dropZones = $state(new Map());
-
-  // Track which dropzone is currently active
-  activeDropZone = $state(null);
-
-  // Track the last active drop zone
-  // - activeDropZone gets cleared by dragLeavr
-  // - but we need it in 'end'
-  lastActiveDropZone = null;
-
-  /**
-   * Register a dropzone
-   * @param {string} zoneId
-   * @param {Object} config
-   * @param {string} config.zone
-   * @param {string} config.group
-   * @param {Function} config.accepts
-   * @param {Function} config.onDragEnter
-   * @param {Function} config.onDragOver
-   * @param {Function} config.onDragLeave
-   * @param {(DropData) => void} config.onDrop
-   * @param {HTMLElement} config.element
-   */
-  registerDropZone(zoneId, config) {
-    if (this.dropZones.has(zoneId)) {
-      throw new Error(`Zone [${zoneId}] is already registered`);
-    }
-
-    this.dropZones.set(zoneId, {
-      ...config,
-      isOver: false,
-      canDrop: false
-    });
-  }
-
-  /**
-   * Unregister a dropzone
-   * @param {string} zoneId
-   */
-  unregisterDropZone(zoneId) {
-    if (this.activeDropZone === zoneId) {
-      this.activeDropZone = null;
-    }
-    this.dropZones.delete(zoneId);
-  }
-
-  /**
-   * Get dropzone at coordinates
-   * @param {number} x
-   * @param {number} y
-   * @returns {Object|null}
-   */
-  getDropZoneAtPoint(x, y) {
-    // Check all registered dropzones
-    for (const [zoneId, config] of this.dropZones) {
-      const rect = config.element.getBoundingClientRect();
-
-      if (
-        x >= rect.left &&
-        x <= rect.right &&
-        y >= rect.top &&
-        y <= rect.bottom
-      ) {
-        // Found a dropzone at this point
-        // Check if it's the deepest one (for nested zones)
-        let deepestZone = { zoneId, config, depth: 0 };
-
-        // Check for nested dropzones
-        for (const [otherId, otherConfig] of this.dropZones) {
-          if (otherId === zoneId) continue;
-
-          const otherRect = otherConfig.element.getBoundingClientRect();
-          if (
-            x >= otherRect.left &&
-            x <= otherRect.right &&
-            y >= otherRect.top &&
-            y <= otherRect.bottom
-          ) {
-            // Check if this zone is nested inside our current zone
-            if (config.element.contains(otherConfig.element)) {
-              deepestZone = {
-                zoneId: otherId,
-                config: otherConfig,
-                depth: deepestZone.depth + 1
-              };
-            }
-          }
-        }
-
-        return { zoneId: deepestZone.zoneId, config: deepestZone.config };
-      }
-    }
-
-    return null;
-  }
-
-  /**
-   * Update active dropzone based on coordinates
-   *
-   * @param {number} x
-   * @param {number} y
-   * @param {DragEvent|SimulatedDragEvent} event
-   */
-  updateActiveDropZone(x, y, event) {
-    const dropZone = this.getDropZoneAtPoint(x, y);
-    const newActiveId = dropZone?.zoneId || null;
-
-    // Handle leave/enter transitions
-    if (this.activeDropZone !== newActiveId) {
-      // Leave previous zone
-      if (this.activeDropZone) {
-        this.lastActiveDropZone = this.activeDropZone;
-
-        const prevConfig = this.dropZones.get(this.activeDropZone);
-        if (prevConfig) {
-          prevConfig.isOver = false;
-          prevConfig.canDrop = false;
-          prevConfig.onDragLeave?.({ event, zone: prevConfig.zone });
-        }
-      }
-
-      // Enter new zone
-      if (newActiveId && dropZone) {
-        const dragData = this.getDraggable(event);
-        const canDrop = dragData && dropZone.config.accepts(dragData);
-
-        dropZone.config.isOver = true;
-        dropZone.config.canDrop = canDrop;
-        dropZone.config.onDragEnter?.({
-          event,
-          zone: dropZone.config.zone,
-          canDrop
-        });
-      }
-
-      this.activeDropZone = newActiveId;
-    } else if (newActiveId) {
-      // Still in the same zone, just send dragOver
-      dropZone.config.onDragOver?.({ event, zone: dropZone.config.zone });
-    }
-  }
-
-  /**
-   * Handle drop at coordinates
-   * @param {number} x
-   * @param {number} y
-   * @param {DragEvent|SimulatedDragEvent} event
-   */
-  handleDropAtPoint(x, y, event) {
-    const dropZone = this.getDropZoneAtPoint(x, y);
-
-    if (dropZone && dropZone.config.canDrop) {
-      const dragData = this.getDraggable(event);
-
-      if (dragData && dropZone.config.element) {
-        // Calculate drop position relative to dropzone
-        const rect = dropZone.config.element.getBoundingClientRect();
-
-        const style = window.getComputedStyle(dropZone.config.element);
-
-        const borderLeftWidth = parseInt(style.borderLeftWidth, 10) || 0;
-        const borderTopWidth = parseInt(style.borderTopWidth, 10) || 0;
-
-        const dropOffsetX = x - rect.left - borderLeftWidth;
-        const dropOffsetY = y - rect.top - borderTopWidth;
-
-        const dropX = dropOffsetX - (dragData.offsetX ?? 0);
-        const dropY = dropOffsetY - (dragData.offsetY ?? 0);
-
-        // Call the dropzone's drop handler
-        dropZone.config.onDrop?.({
-          zone: dropZone.config.zone,
-          source: dragData.source,
-          item: dragData.item,
-          x: dropX,
-          y: dropY,
-          drag: dragData,
-          drop: {
-            offsetX: dropOffsetX,
-            offsetY: dropOffsetY,
-            target: dropZone.config.element
-          }
-        });
-      }
-    }
-
-    // Ensure we notify the active dropzone that drag ended
-    if (this.activeDropZone) {
-      const config = this.dropZones.get(this.activeDropZone);
-      if (config) {
-        config.isOver = false;
-        config.canDrop = false;
-        config.onDragLeave?.({ event, zone: config.zone });
-      }
-    }
-
-    // Reset active dropzone
-    this.activeDropZone = null;
-  }
-
-  /**
-   * @param {string} draggableId
-   * @param {import('$lib/typedef/drag.js').DragData} dragData
-   */
-  start(draggableId, dragData) {
-    this.draggables.set(draggableId, dragData);
-  }
-
-  /**
-   * @param {string} draggableId
-   */
-  end(draggableId) {
-    this.draggables.delete(draggableId);
-
-    // Check both current AND last active dropzone
-    const zoneToNotify = this.activeDropZone || this.lastActiveDropZone;
-
-    if (zoneToNotify) {
-      const config = this.dropZones.get(zoneToNotify);
-      if (config && (config.isOver || config.canDrop)) {
-        config.isOver = false;
-        config.canDrop = false;
-        config.onDragLeave?.({
-          event: new DragEvent('dragend'),
-          zone: config.zone
-        });
-      }
-    }
-
-    this.activeDropZone = null;
-    this.lastActiveDropZone = null;
-  }
-
-  /**
-   * Get a drag data by draggable id
-   *
-   * @param {string} draggableId
-   * @returns {import('$lib/typedef/drag.js').DragData|undefined}
-   */
-  getDraggableById(draggableId) {
-    return this.draggables.get(draggableId);
-  }
-
-  /**
-   * Get a drag data. Extracts draggable id from the supplied DragEvent
-   *
-   * @param {DragEvent|SimulatedDragEvent} event
-   *
-   * @returns {Object|null} The drag data, or null for file drops
-   */
-  getDraggable(event) {
-    // Check if this is a touch-simulated event
-    if (event.dataTransfer && !event.dataTransfer.files) {
-      try {
-        const jsonData = event.dataTransfer.getData('application/json');
-        if (jsonData) {
-          const transferData = JSON.parse(jsonData);
-          const draggableId = transferData.draggableId;
-
-          if (draggableId) {
-            return this.getDraggableById(draggableId);
-          }
-        }
-      } catch (error) {
-        console.error('Error getting drag data:', error);
-      }
-    }
-
-    // Check if this is a file drop
-    if (event.dataTransfer.types.includes('Files')) {
-      return null;
-    }
-
-    // Handle internal drag operations
-    try {
-      const jsonData = event.dataTransfer.getData('application/json');
-      if (jsonData) {
-        const transferData = JSON.parse(jsonData);
-        const draggableId = transferData.draggableId;
-
-        if (draggableId) {
-          const dragData = this.getDraggableById(draggableId);
-          if (dragData) {
-            return dragData;
-          }
-        }
-      }
-    } catch (error) {
-      console.error('Error getting drag data:', error);
-    }
-
-    return null;
-  }
-
-  /**
-   * Get the most recently started drag operation (convenience method)
-   * @returns {import('$lib/typedef/drag.js').DragData|undefined}
-   */
-  get current() {
-    const entries = Array.from(this.draggables.entries());
-    return entries.length > 0 ? entries[entries.length - 1][1] : undefined;
-  }
-
-  /**
-   * @returns {boolean}
-   */
-  isDragging() {
-    return this.draggables.size > 0;
-  }
-}
-
-export const [createOrGetDragState, createDragState, getDragState] =
-  defineStateContext(DragState);