@hkdigital/lib-sveltekit 0.1.77 → 0.1.79

package/dist/components/drag-drop/DragDropContext.svelte

@@ -0,0 +1,26 @@
+<script>
+  import { createDragState } from './drag-state.svelte.js';
+
+  /**
+   * @type {{
+   *   contextKey?: import('../../typedef').ContextKey,
+   *   base?: string,
+   *   classes?: string,
+   *   children: import('svelte').Snippet,
+   *   [key: string]: any
+   * }}
+   */
+  let { contextKey, base = '', classes = '', children, ...attrs } = $props();
+
+  // Create the state context at this level to ensure all children
+  // have access to the same state instance
+  const dragState = createDragState(contextKey);
+</script>
+
+<div
+  data-component="drag-drop-context"
+  class="{base} {classes}"
+  {...attrs}
+>
+  {@render children()}
+</div>

package/dist/components/drag-drop/DragDropContext.svelte.d.ts

@@ -0,0 +1,18 @@
+export default DragDropContext;
+type DragDropContext = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [key: string]: any;
+        contextKey?: ContextKey;
+        base?: string;
+        classes?: string;
+        children: Snippet<[]>;
+    }>): void;
+};
+declare const DragDropContext: import("svelte").Component<{
+    [key: string]: any;
+    contextKey?: import("../../typedef").ContextKey;
+    base?: string;
+    classes?: string;
+    children: import("svelte").Snippet;
+}, {}, "">;

package/dist/components/drag-drop/Draggable.svelte

@@ -1,6 +1,9 @@
 <script>
   import { toStateClasses } from '../../util/design-system/index.js';
-  import { useDragState } from './drag-state.svelte.js';
+
+  import { createOrGetDragState } from './drag-state.svelte.js';
+
+  import { generateLocalId } from '../../util/unique';
 
   import {
     IDLE,
@@ -10,8 +13,6 @@
     DRAG_DISABLED
   } from '../../constants/state-labels/drag-states.js';
 
-  const dragState = useDragState();
-
   /**
    * @type {{
    *   item: any,
@@ -22,6 +23,7 @@
    *   base?: string,
    *   classes?: string,
    *   children: import('svelte').Snippet,
+   *   contextKey?: import('../../typedef').ContextKey,
    *   isDragging?: boolean,
    *   isDropping?: boolean,
    *   isDragPreview?: boolean,
@@ -58,6 +60,7 @@
     base = '',
     classes = '',
     children,
+    contextKey,
     isDragging = $bindable(false),
     isDropping = $bindable(false),
     isDragPreview = $bindable(false),
@@ -69,6 +72,12 @@
     ...attrs
   } = $props();
 
+  const dragState = createOrGetDragState(contextKey);
+
+  const draggableId = generateLocalId();
+
+  // console.debug('Draggable contextKey:', contextKey);
+
   let dragTimeout = null;
   let currentState = $state(IDLE);
 
@@ -128,15 +137,27 @@
       metadata: { timestamp: Date.now() }
     };
 
-    // Set global drag state
-    dragState.start(item, source, group);
+    // Set shared drag state
+    dragState.start(draggableId, dragData);
 
     event.dataTransfer.effectAllowed = 'move';
     event.dataTransfer.setData('application/json', JSON.stringify(dragData));
 
     // Set custom drag image if needed
     if (event.dataTransfer.setDragImage) {
-      // Could set custom drag image here
+      // Custom drag image
+      const dragEl = /** @type {HTMLElement} */ (event.currentTarget);
+
+
+      // Get the bounding rectangle of the element
+      const rect = dragEl.getBoundingClientRect();
+
+      // Calculate offsets relative to the element's top-left corner
+      const offsetX = event.clientX - rect.left;
+      const offsetY = event.clientY - rect.top;
+
+      // Use the element as drag image with calculated offsets
+      event.dataTransfer.setDragImage(dragEl, offsetX, offsetY);
     }
 
     onDragStart?.({ event, item, source, group });
@@ -152,34 +173,34 @@
     }
   }
 
-  /**
-   * Handle drag end
-   * @param {DragEvent} event
-   */
-  function handleDragEnd(event) {
-    clearTimeout(dragTimeout);
+/**
+ * Handle drag end
+ * @param {DragEvent} event
+ */
+function handleDragEnd(event) {
+  clearTimeout(dragTimeout);
 
-    // Clear global drag state
-    dragState.end();
+  // Clear global drag state
+  dragState.end(draggableId);
 
-    // Check if drop was successful
-    const wasDropped = event.dataTransfer.dropEffect !== 'none';
+  // Check if drop was successful
+  const wasDropped = event.dataTransfer.dropEffect !== 'none';
 
-    if (wasDropped) {
-      currentState = DROPPING;
-      onDrop?.({ event, item, wasDropped: true });
+  if (wasDropped) {
+    currentState = DROPPING;
+    onDrop?.({ event, item, wasDropped: true });
 
-      // Brief dropping state before returning to idle
-      setTimeout(() => {
-        currentState = IDLE;
-      }, 100);
-    } else {
+    // Brief dropping state before returning to idle
+    setTimeout(() => {
       currentState = IDLE;
-    }
-
-    onDragEnd?.({ event, item, wasDropped });
+    }, 100);
+  } else {
+    currentState = IDLE;
   }
 
+  onDragEnd?.({ event, item, wasDropped });
+}
+
   /**
    * Handle mouse down for drag delay
    * @param {MouseEvent} event
@@ -204,6 +225,7 @@
 
 <div
   data-component="draggable"
+  data-id={draggableId}
   draggable={!disabled && canDrag(item)}
   ondragstart={handleDragStart}
   ondrag={handleDrag}

package/dist/components/drag-drop/Draggable.svelte.d.ts

@@ -11,6 +11,7 @@ type Draggable = {
         base?: string;
         classes?: string;
         children: Snippet<[]>;
+        contextKey?: ContextKey;
         isDragging?: boolean;
         isDropping?: boolean;
         isDragPreview?: boolean;
@@ -47,6 +48,7 @@ declare const Draggable: import("svelte").Component<{
     base?: string;
     classes?: string;
     children: import("svelte").Snippet;
+    contextKey?: import("../../typedef").ContextKey;
     isDragging?: boolean;
     isDropping?: boolean;
     isDragPreview?: boolean;

package/dist/components/drag-drop/{Dropzone.svelte → DropZone.svelte}

@@ -1,7 +1,14 @@
 <script>
   import { onMount, onDestroy } from 'svelte';
   import { toStateClasses } from '../../util/design-system/index.js';
-  import { useDragState } from './drag-state.svelte.js';
+
+  import { createOrGetDragState } from './drag-state.svelte.js';
+
+  import {
+    findDraggableSource,
+    getDraggableIdFromEvent,
+    processDropWithData
+  } from './util.js';
 
   import {
     READY,
@@ -12,8 +19,6 @@
     ACTIVE_DROP
   } from '../../constants/state-labels/drop-states.js';
 
-  const dragState = useDragState();
-
   /**
    * @type {{
    *   zone?: string,
@@ -24,6 +29,7 @@
    *   base?: string,
    *   classes?: string,
    *   children?: import('svelte').Snippet,
+   *   contextKey?: import('../../typedef').ContextKey,
    *   empty?: import('svelte').Snippet,
    *   preview?: import('svelte').Snippet<[{
    *     item: any,
@@ -79,6 +85,7 @@
     base = '',
     classes = '',
     children,
+    contextKey,
     empty,
     preview,
     isDragOver = $bindable(false),
@@ -94,6 +101,11 @@
     ...attrs
   } = $props();
 
+
+  const dragState = createOrGetDragState(contextKey);
+
+  // console.debug('DropZone contextKey:', contextKey);
+
   let currentState = $state(READY);
   let dropzoneElement; // Reference to the dropzone DOM element
 
@@ -148,10 +160,14 @@
 
   /**
    * Check if we can accept the dragged item
+   *
    * @param {Object} data
+   *
    * @returns {boolean}
    */
   function canAcceptDrop(data) {
+    // console.debug('canAcceptDrop', data, {group});
+
     if (disabled) return false;
     if (!data) return false;
     if (data.group !== group) return false;
@@ -160,22 +176,26 @@
     return true;
   }
 
-  /**
-   * Handle drag enter with improved DOM traversal check
-   * @param {DragEvent} event
-   */
-  function handleDragEnter(event) {
-    // Prevent default to allow drop
-    event.preventDefault();
+/**
+ * Handle drag enter with improved DOM traversal check
+ * @param {DragEvent} event
+ */
+function handleDragEnter(event) {
+  // Prevent default to allow drop
+  event.preventDefault();
 
-    // If we're already in a drag-over state, don't reset anything
-    if (isCurrentlyOver) return;
+  // If we're already in a drag-over state, don't reset anything
+  if (isCurrentlyOver) return;
 
-    // Now we're over this dropzone
-    isCurrentlyOver = true;
+  // Now we're over this dropzone
+  isCurrentlyOver = true;
 
-    // Get the current drag data
-    const dragData = dragState.current;
+  // Get the draggable ID from the event
+  const draggableId = getDraggableIdFromEvent(event);
+
+  if (draggableId) {
+    // Get the drag data for this specific draggable
+    const dragData = dragState.getDraggable(draggableId);
 
     // Update state based on acceptance
     if (dragData) {
@@ -185,46 +205,68 @@
     } else {
       currentState = DRAG_OVER;
     }
-
-    // Notify listeners
-    onDragEnter?.({ event, zone, canDrop: currentState === CAN_DROP });
-  }
-
-  /**
-   * Handle drag over
-   * @param {DragEvent} event
-   */
-  function handleDragOver(event) {
-    // Prevent default to allow drop
-    event.preventDefault();
-
-    // If we're not currently over this dropzone (despite dragover firing),
-    // treat it as an enter event
-    if (!isCurrentlyOver) {
-      handleDragEnter(event);
-      return;
-    }
-
-    // Re-evaluate acceptance on each dragover in case state changed
+  } else {
+    // Fallback to the current drag data (for compatibility)
     const dragData = dragState.current;
 
-    if (dragData && [DRAG_OVER, CAN_DROP, CANNOT_DROP].includes(currentState)) {
+    if (dragData) {
       currentState = canAcceptDrop(dragData)
         ? CAN_DROP
         : CANNOT_DROP;
+    } else {
+      currentState = DRAG_OVER;
     }
+  }
 
-    // Set visual feedback based on drop acceptance
-    if (currentState === CAN_DROP) {
-      event.dataTransfer.dropEffect = 'move';
-    } else if (currentState === CANNOT_DROP) {
-      event.dataTransfer.dropEffect = 'none';
-    }
+  // Notify listeners
+  onDragEnter?.({ event, zone, canDrop: currentState === CAN_DROP });
+}
+
+/**
+ * Handle drag over
+ * @param {DragEvent} event
+ */
+function handleDragOver(event) {
+  // Prevent default to allow drop
+  event.preventDefault();
+
+  // If we're not currently over this dropzone (despite dragover firing),
+  // treat it as an enter event
+  if (!isCurrentlyOver) {
+    handleDragEnter(event);
+    return;
+  }
+
+  // Get the draggable ID from the event
+  const draggableId = getDraggableIdFromEvent(event);
+  let dragData;
 
-    // Notify listeners
-    onDragOver?.({ event, zone });
+  if (draggableId) {
+    // Get the drag data for this specific draggable
+    dragData = dragState.getDraggable(draggableId);
+  } else {
+    // Fallback to the current drag data (for compatibility)
+    dragData = dragState.current;
   }
 
+  // Re-evaluate acceptance
+  if (dragData && [DRAG_OVER, CAN_DROP, CANNOT_DROP].includes(currentState)) {
+    currentState = canAcceptDrop(dragData)
+      ? CAN_DROP
+      : CANNOT_DROP;
+  }
+
+  // Set visual feedback based on drop acceptance
+  if (currentState === CAN_DROP) {
+    event.dataTransfer.dropEffect = 'move';
+  } else if (currentState === CANNOT_DROP) {
+    event.dataTransfer.dropEffect = 'none';
+  }
+
+  // Notify listeners
+  onDragOver?.({ event, zone });
+}
+
   /**
    * Handle drag leave with improved DOM traversal check
    * @param {DragEvent} event
@@ -247,54 +289,69 @@
     }
   }
 
-  /**
-   * Handle drop
-   * @param {DragEvent} event
-   */
-  function handleDrop(event) {
-    // Prevent default browser actions
-    event.preventDefault();
-
-    // Reset our tracking state
-    isCurrentlyOver = false;
-
-    try {
-      // Parse the JSON data from the dataTransfer object
-      const data = JSON.parse(event.dataTransfer.getData('application/json'));
-
-      // Check if we can accept this drop
-      if (canAcceptDrop(data)) {
-        // Update state and notify listeners
-        currentState = ACTIVE_DROP;
-        onDropStart?.({ event, zone, data });
-
-        // Call the onDrop handler and handle Promise resolution
-        const dropResult = onDrop?.({
-          event,
-          zone,
-          item: data.item,
-          source: data.source,
-          metadata: data.metadata
-        });
-
-        // Handle async or sync results
-        Promise.resolve(dropResult).then(() => {
-          currentState = READY;
-          onDropEnd?.({ event, zone, data, success: true });
-        }).catch((error) => {
-          currentState = READY;
-          onDropEnd?.({ event, zone, data, success: false, error });
-        });
-      } else {
-        // Not a valid drop, reset state
-        currentState = READY;
+/**
+ * Handle drop
+ * @param {DragEvent} event
+ */
+function handleDrop(event) {
+  // Prevent default browser actions
+  event.preventDefault();
+
+  // Reset our tracking state
+  isCurrentlyOver = false;
+
+  try {
+    // First try to get the draggable ID from the event
+    const draggableId = getDraggableIdFromEvent(event);
+    let dragData;
+
+    if (draggableId) {
+      // Get the drag data from state using the draggable ID
+      dragData = dragState.getDraggable(draggableId);
+    }
+
+    // If we couldn't get it from the element attribute, try dataTransfer
+    if (!dragData) {
+      // Parse the JSON data from the dataTransfer object (only works during drop)
+      const jsonData = event.dataTransfer.getData('application/json');
+      if (jsonData) {
+        dragData = JSON.parse(jsonData);
       }
-    } catch (error) {
-      // Handle parsing errors
-      console.error('Drop error:', error);
+    }
+
+    // Check if we can accept this drop
+    if (dragData && canAcceptDrop(dragData)) {
+      // Update state and notify listeners
+      currentState = ACTIVE_DROP;
+      onDropStart?.({ event, zone, data: dragData });
+
+      // Call the onDrop handler and handle Promise resolution
+      const dropResult = onDrop?.({
+        event,
+        zone,
+        item: dragData.item,
+        source: dragData.source,
+        metadata: dragData.metadata
+      });
+
+      // Handle async or sync results
+      Promise.resolve(dropResult).then(() => {
+        currentState = READY;
+        onDropEnd?.({ event, zone, data: dragData, success: true });
+      }).catch((error) => {
+        currentState = READY;
+        onDropEnd?.({ event, zone, data: dragData, success: false, error });
+      });
+    } else {
+      // Not a valid drop, reset state
       currentState = READY;
     }
+  } catch (error) {
+    // Handle parsing errors
+    console.error('Drop error:', error);
+    currentState = READY;
   }
+}
 </script>
 
 <div

package/dist/components/drag-drop/{Dropzone.svelte.d.ts → DropZone.svelte.d.ts}

@@ -1,5 +1,5 @@
-export default Dropzone;
-type Dropzone = {
+export default DropZone;
+type DropZone = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
         [key: string]: any;
@@ -11,6 +11,7 @@ type Dropzone = {
         base?: string;
         classes?: string;
         children?: Snippet<[]>;
+        contextKey?: ContextKey;
         empty?: Snippet<[]>;
         preview?: Snippet<[{
             item: any;
@@ -56,7 +57,7 @@ type Dropzone = {
         }) => void;
     }>): void;
 };
-declare const Dropzone: import("svelte").Component<{
+declare const DropZone: import("svelte").Component<{
     [key: string]: any;
     zone?: string;
     group?: string;
@@ -66,6 +67,7 @@ declare const Dropzone: import("svelte").Component<{
     base?: string;
     classes?: string;
     children?: import("svelte").Snippet;
+    contextKey?: import("../../typedef").ContextKey;
     empty?: import("svelte").Snippet;
     preview?: import("svelte").Snippet<[{
         item: any;

package/dist/components/drag-drop/drag-state.svelte.d.ts

@@ -1,6 +1,30 @@
-export function useDragState(): {
-    readonly current: any;
-    start(item: any, source: any, group: any): void;
-    end(): void;
+export const createOrGetDragState: (contextKey: import("../../typedef").ContextKey) => DragState;
+export const createDragState: (contextKey: import("../../typedef").ContextKey) => DragState;
+export const getDragState: (contextKey: import("../../typedef").ContextKey) => DragState;
+declare class DragState {
+    draggables: Map<any, any>;
+    /**
+     * @param {string} draggableId
+     * @param {import('../../typedef/drag.js').DragData} dragData
+     */
+    start(draggableId: string, dragData: import("../../typedef/drag.js").DragData): void;
+    /**
+     * @param {string} draggableId
+     */
+    end(draggableId: string): void;
+    /**
+     * @param {string} draggableId
+     * @returns {import('../../typedef/drag.js').DragData|undefined}
+     */
+    getDraggable(draggableId: string): import("../../typedef/drag.js").DragData | undefined;
+    /**
+     * Get the most recently started drag operation (convenience method)
+     * @returns {import('../../typedef/drag.js').DragData|undefined}
+     */
+    get current(): import("../../typedef/drag.js").DragData | undefined;
+    /**
+     * @returns {boolean}
+     */
     isDragging(): boolean;
-};
+}
+export {};

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

@@ -1,19 +1,50 @@
-let currentDrag = $state(null);
+// drag-state.svelte.js
+import { defineStateContext } from '../../util/svelte/state-context/index.js';
 
-export function useDragState() {
-  return {
-    get current() { return currentDrag; },
-    
-    start(item, source, group) {
-      currentDrag = { item, source, group };
-    },
-    
-    end() {
-      currentDrag = null;
-    },
-    
-    isDragging() {
-      return currentDrag !== null;
-    }
-  };
+class DragState {
+  // Replace the single 'current' with a Map of draggable IDs
+  draggables = $state(new Map());
+
+  /**
+   * @param {string} draggableId
+   * @param {import('../../typedef/drag.js').DragData} dragData
+   */
+  start(draggableId, dragData) {
+    this.draggables.set(draggableId, dragData);
+  }
+
+  /**
+   * @param {string} draggableId
+   */
+  end(draggableId) {
+    this.draggables.delete(draggableId);
+  }
+
+  /**
+   * @param {string} draggableId
+   * @returns {import('../../typedef/drag.js').DragData|undefined}
+   */
+  getDraggable(draggableId) {
+    return this.draggables.get(draggableId);
+  }
+
+  /**
+   * Get the most recently started drag operation (convenience method)
+   * @returns {import('../../typedef/drag.js').DragData|undefined}
+   */
+  get current() {
+    // For backward compatibility with existing code
+    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);

package/dist/components/drag-drop/index.d.ts

@@ -1,2 +1,4 @@
 export { default as Draggable } from "./Draggable.svelte";
 export { default as DropZone } from "./DropZone.svelte";
+export { default as DragDropContext } from "./DragDropContext.svelte";
+export * from "./drag-state.svelte.js";

package/dist/components/drag-drop/index.js

@@ -1,2 +1,5 @@
 export { default as Draggable } from './Draggable.svelte';
 export { default as DropZone } from './DropZone.svelte';
+export { default as DragDropContext } from './DragDropContext.svelte';
+
+export * from './drag-state.svelte.js';