@hkdigital/lib-sveltekit 0.1.91 → 0.1.93

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

@@ -0,0 +1,125 @@
+<script>
+  import { DropZone } from './index.js';
+
+  /**
+   * @type {{
+   *   zone?: string,
+   *   group?: string,
+   *   disabled?: boolean,
+   *   accepts?: (item: any) => boolean,
+   *   minHeight?: string,
+   *   maxHeight?: string,
+   *   gap?: string,
+   *   direction?: 'vertical' | 'horizontal',
+   *   base?: string,
+   *   classes?: string,
+   *   children?: import('svelte').Snippet,
+   *   contextKey?: import('../../typedef').ContextKey,
+   *   dropPreviewSnippet?: import('svelte').Snippet<[import('../../typedef').DragData]>,
+   *   isDragOver?: boolean,
+   *   canDrop?: boolean,
+   *   onDragEnter?: (detail: {
+   *     event: DragEvent,
+   *     zone: string,
+   *     canDrop: boolean
+   *   }) => void,
+   *   onDragOver?: (detail: {
+   *     event: DragEvent,
+   *     zone: string
+   *   }) => void,
+   *   onDragLeave?: (detail: {
+   *     event: DragEvent,
+   *     zone: string
+   *   }) => void,
+   *   onDrop?: (detail: import('../../typedef').DropData) => any | Promise<any>,
+   *   onDropStart?: (detail: {
+   *     event: DragEvent,
+   *     zone: string,
+   *     data: any
+   *   }) => void,
+   *   onDropEnd?: (detail: {
+   *     event: DragEvent,
+   *     zone: string,
+   *     data: any,
+   *     success: boolean,
+   *     error?: Error
+   *   }) => void,
+   *   [key: string]: any
+   * }}
+   */
+  let {
+    zone = 'default',
+    group = 'default',
+    disabled = false,
+    accepts = () => true,
+    minHeight = 'min-h-[200px]',
+    maxHeight = '',
+    gap = 'gap-2',
+    direction = 'vertical',
+    base = '',
+    classes = '',
+    children,
+    contextKey,
+    dropPreviewSnippet,
+    isDragOver = $bindable(false),
+    canDrop = $bindable(false),
+    onDragEnter,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+    onDropStart,
+    onDropEnd,
+    ...attrs
+  } = $props();
+
+  // Build flex layout classes based on direction
+  let layoutClasses = $derived.by(() => {
+    const layoutParts = ['flex'];
+
+    if (direction === 'vertical') {
+      layoutParts.push('flex-col');
+    } else {
+      layoutParts.push('flex-row', 'flex-wrap');
+    }
+
+    if (gap) {
+      layoutParts.push(gap);
+    }
+
+    return layoutParts.join(' ');
+  });
+
+  // Combine all classes for the drop zone
+  let combinedClasses = $derived(
+    `${layoutClasses} ${classes}`.trim()
+  );
+</script>
+
+<DropZone
+  data-component="drop-zone"
+  data-type="list"
+  {zone}
+  {group}
+  {disabled}
+  {accepts}
+  {minHeight}
+  {maxHeight}
+  heightMode="flexible"
+  {base}
+  classes={combinedClasses}
+  {contextKey}
+  {dropPreviewSnippet}
+  bind:isDragOver
+  bind:canDrop
+  {onDragEnter}
+  {onDragOver}
+  {onDragLeave}
+  {onDrop}
+  {onDropStart}
+  {onDropEnd}
+  {...attrs}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</DropZone>

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

@@ -0,0 +1,92 @@
+export default DropZoneList;
+type DropZoneList = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [key: string]: any;
+        zone?: string;
+        group?: string;
+        disabled?: boolean;
+        accepts?: (item: any) => boolean;
+        minHeight?: string;
+        maxHeight?: string;
+        gap?: string;
+        direction?: "vertical" | "horizontal";
+        base?: string;
+        classes?: string;
+        children?: Snippet<[]>;
+        contextKey?: ContextKey;
+        dropPreviewSnippet?: Snippet<[DragData]>;
+        isDragOver?: boolean;
+        canDrop?: boolean;
+        onDragEnter?: (detail: {
+            event: DragEvent;
+            zone: string;
+            canDrop: boolean;
+        }) => void;
+        onDragOver?: (detail: {
+            event: DragEvent;
+            zone: string;
+        }) => void;
+        onDragLeave?: (detail: {
+            event: DragEvent;
+            zone: string;
+        }) => void;
+        onDrop?: (detail: DropData) => any;
+        onDropStart?: (detail: {
+            event: DragEvent;
+            zone: string;
+            data: any;
+        }) => void;
+        onDropEnd?: (detail: {
+            event: DragEvent;
+            zone: string;
+            data: any;
+            success: boolean;
+            error?: Error;
+        }) => void;
+    }>): void;
+};
+declare const DropZoneList: import("svelte").Component<{
+    [key: string]: any;
+    zone?: string;
+    group?: string;
+    disabled?: boolean;
+    accepts?: (item: any) => boolean;
+    minHeight?: string;
+    maxHeight?: string;
+    gap?: string;
+    direction?: "vertical" | "horizontal";
+    base?: string;
+    classes?: string;
+    children?: import("svelte").Snippet;
+    contextKey?: import("../../typedef").ContextKey;
+    dropPreviewSnippet?: import("svelte").Snippet<[import("../../typedef").DragData]>;
+    isDragOver?: boolean;
+    canDrop?: boolean;
+    onDragEnter?: (detail: {
+        event: DragEvent;
+        zone: string;
+        canDrop: boolean;
+    }) => void;
+    onDragOver?: (detail: {
+        event: DragEvent;
+        zone: string;
+    }) => void;
+    onDragLeave?: (detail: {
+        event: DragEvent;
+        zone: string;
+    }) => void;
+    onDrop?: (detail: import("../../typedef").DropData) => any | Promise<any>;
+    onDropStart?: (detail: {
+        event: DragEvent;
+        zone: string;
+        data: any;
+    }) => void;
+    onDropEnd?: (detail: {
+        event: DragEvent;
+        zone: string;
+        data: any;
+        success: boolean;
+        error?: Error;
+    }) => void;
+}, {}, "isDragOver" | "canDrop">;

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

@@ -1,8 +1,63 @@
 export const createOrGetDragState: (contextKey?: import("../../typedef").ContextKey) => DragState;
 export const createDragState: (contextKey?: import("../../typedef").ContextKey) => DragState;
 export const getDragState: (contextKey?: import("../../typedef").ContextKey) => DragState;
+export type SimulatedDragEvent = import("../../typedef").SimulatedDragEvent;
+/** @typedef {import('../../typedef').SimulatedDragEvent} SimulatedDragEvent */
 declare class DragState {
     draggables: Map<any, any>;
+    dropZones: Map<any, any>;
+    activeDropZone: any;
+    lastActiveDropZone: any;
+    /**
+     * 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: string, config: {
+        zone: string;
+        group: string;
+        accepts: Function;
+        onDragEnter: Function;
+        onDragOver: Function;
+        onDragLeave: Function;
+        onDrop: (DropData: any) => void;
+        element: HTMLElement;
+    }): void;
+    /**
+     * Unregister a dropzone
+     * @param {string} zoneId
+     */
+    unregisterDropZone(zoneId: string): void;
+    /**
+     * Get dropzone at coordinates
+     * @param {number} x
+     * @param {number} y
+     * @returns {Object|null}
+     */
+    getDropZoneAtPoint(x: number, y: number): any | null;
+    /**
+     * Update active dropzone based on coordinates
+     *
+     * @param {number} x
+     * @param {number} y
+     * @param {DragEvent|SimulatedDragEvent} event
+     */
+    updateActiveDropZone(x: number, y: number, event: DragEvent | SimulatedDragEvent): void;
+    /**
+     * Handle drop at coordinates
+     * @param {number} x
+     * @param {number} y
+     * @param {DragEvent|SimulatedDragEvent} event
+     */
+    handleDropAtPoint(x: number, y: number, event: DragEvent | SimulatedDragEvent): void;
     /**
      * @param {string} draggableId
      * @param {import('../../typedef/drag.js').DragData} dragData
@@ -13,10 +68,20 @@ declare class DragState {
      */
     end(draggableId: string): void;
     /**
+     * Get a drag data by draggable id
+     *
      * @param {string} draggableId
      * @returns {import('../../typedef/drag.js').DragData|undefined}
      */
-    getDraggable(draggableId: string): import("../../typedef/drag.js").DragData | undefined;
+    getDraggableById(draggableId: string): import("../../typedef/drag.js").DragData | undefined;
+    /**
+     * 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: DragEvent | SimulatedDragEvent): any | null;
     /**
      * Get the most recently started drag operation (convenience method)
      * @returns {import('../../typedef/drag.js').DragData|undefined}

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

@@ -1,10 +1,213 @@
 // drag-state.svelte.js
 import { defineStateContext } from '../../util/svelte/state-context/index.js';
 
+/** @typedef {import('../../typedef').SimulatedDragEvent} SimulatedDragEvent */
+
 class DragState {
-  // Replace the single 'current' with a Map of draggable IDs
+  // 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('../../typedef/drag.js').DragData} dragData
@@ -18,22 +221,92 @@ class DragState {
    */
   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('../../typedef/drag.js').DragData|undefined}
    */
-  getDraggable(draggableId) {
+  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('../../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;
   }

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

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

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

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

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

@@ -1,3 +1,5 @@
+import { createOrGetDragState } from './drag-state.svelte.js';
+
 /**
  * Find the source draggable element from an event
  *
@@ -48,13 +50,11 @@ export function getDraggableIdFromEvent(event) {
  * @param {Function} options.setState Function to update component state
  * @returns {Promise<boolean>} Success status
  */
-export async function processDropWithData(event, data, {
-  onDropStart,
-  onDrop,
-  onDropEnd,
-  zone,
-  setState
-}) {
+export async function processDropWithData(
+  event,
+  data,
+  { onDropStart, onDrop, onDropEnd, zone, setState }
+) {
   try {
     // Update state and notify listeners
     setState('ACTIVE_DROP');

package/dist/components/layout/grid-layers/GridLayers.svelte

@@ -29,7 +29,7 @@
     bg = '',
     padding = '',
     margin = '',
-    height = '',
+    height = 'h-full',
     classes = '',
     style = '',
     cellBase = '',
@@ -150,12 +150,15 @@
       observer = null;
     }
   });
+
+  $inspect('heightFrom', heightFrom);
+  $inspect('containerStyle', containerStyle);
 </script>
 
 <div
   data-component="grid-layers"
   bind:this={gridContainer}
-  class="relative {isFirstRender ? 'invisible' : ''} {base} {bg} {!heightFrom ? height : ''} {classes} {margin} {padding}"
+  class="relative {isFirstRender ? 'invisible' : ''} {base} {bg} {heightFrom ? '' : height} {classes} {margin} {padding}"
   style={containerStyle}
   {...attrs}
 >

package/dist/features/image-box/ImageBox.svelte

@@ -13,7 +13,7 @@
 	 *   aspect?: string,
 	 *   overflow?: string,
 	 *   fit?: 'contain' | 'cover' | 'fill',
-	 *   position?: string,
+	 *   position?: import('../../typedef/image.js').ObjectPosition,
 	 *   imageMeta?: import('../../typedef').ImageSource,
 	 *   imageLoader?: import('../../classes/svelte/image/index.js').ImageLoader,
 	 *   alt?: string,

package/dist/features/image-box/ImageBox.svelte.d.ts

@@ -29,7 +29,7 @@ declare const ImageBox: import("svelte").Component<{
     aspect?: string;
     overflow?: string;
     fit?: "contain" | "cover" | "fill";
-    position?: string;
+    position?: import("../../typedef/image.js").ObjectPosition;
     imageMeta?: import("../../typedef").ImageSource;
     imageLoader?: import("../../classes/svelte/image/index.js").ImageLoader;
     alt?: string;