@hkdigital/lib-sveltekit 0.1.75 → 0.1.77

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

@@ -0,0 +1,112 @@
+export default Dropzone;
+type Dropzone = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [key: string]: any;
+        zone?: string;
+        group?: string;
+        disabled?: boolean;
+        accepts?: (item: any) => boolean;
+        maxItems?: number;
+        base?: string;
+        classes?: string;
+        children?: Snippet<[]>;
+        empty?: Snippet<[]>;
+        preview?: Snippet<[{
+            item: any;
+            source: string;
+            group: string;
+            metadata?: any;
+        }]>;
+        isDragOver?: boolean;
+        canDrop?: boolean;
+        isDropping?: boolean;
+        itemCount?: number;
+        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: {
+            event: DragEvent;
+            zone: string;
+            item: any;
+            source: string;
+            metadata?: any;
+        }) => 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 Dropzone: import("svelte").Component<{
+    [key: string]: any;
+    zone?: string;
+    group?: string;
+    disabled?: boolean;
+    accepts?: (item: any) => boolean;
+    maxItems?: number;
+    base?: string;
+    classes?: string;
+    children?: import("svelte").Snippet;
+    empty?: import("svelte").Snippet;
+    preview?: import("svelte").Snippet<[{
+        item: any;
+        source: string;
+        group: string;
+        metadata?: any;
+    }]>;
+    isDragOver?: boolean;
+    canDrop?: boolean;
+    isDropping?: boolean;
+    itemCount?: number;
+    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: {
+        event: DragEvent;
+        zone: string;
+        item: any;
+        source: string;
+        metadata?: any;
+    }) => 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;
+}, {}, "isDropping" | "isDragOver" | "canDrop" | "itemCount">;

package/dist/components/drag-drop/Dropzone.svelte__

@@ -0,0 +1,282 @@
+<script>
+  import { onMount, onDestroy } from 'svelte';
+  import { toStateClasses } from '$lib/util/design-system/index.js';
+  import { useDragState } from './drag-state.svelte.js';
+
+  import {
+    READY,
+    DRAG_OVER,
+    CAN_DROP,
+    CANNOT_DROP,
+    DROP_DISABLED,
+    ACTIVE_DROP
+  } from '$lib/constants/state-labels/drop-states.js';
+
+  const dragState = useDragState();
+
+  /**
+   * @type {{
+   *   zone?: string,
+   *   group?: string,
+   *   disabled?: boolean,
+   *   accepts?: (item: any) => boolean,
+   *   maxItems?: number,
+   *   base?: string,
+   *   classes?: string,
+   *   children?: import('svelte').Snippet,
+   *   empty?: import('svelte').Snippet,
+   *   preview?: import('svelte').Snippet<[{
+   *     item: any,
+   *     source: string,
+   *     group: string,
+   *     metadata?: any
+   *   }]>,
+   *   isDragOver?: boolean,
+   *   canDrop?: boolean,
+   *   isDropping?: boolean,
+   *   itemCount?: number,
+   *   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: {
+   *     event: DragEvent,
+   *     zone: string,
+   *     item: any,
+   *     source: string,
+   *     metadata?: any
+   *   }) => 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,
+    maxItems = Infinity,
+    base = '',
+    classes = '',
+    children,
+    empty,
+    preview,
+    isDragOver = $bindable(false),
+    canDrop = $bindable(false),
+    isDropping = $bindable(false),
+    itemCount = $bindable(0),
+    onDragEnter,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+    onDropStart,
+    onDropEnd,
+    ...attrs
+  } = $props();
+
+  let currentState = $state(READY);
+  let dragCounter = 0;
+
+  // Cleanup function
+  let cleanup;
+
+  onMount(() => {
+    // Global dragend listener to ensure state cleanup
+    const handleGlobalDragEnd = () => {
+      dragCounter = 0;
+      currentState = READY;
+    };
+
+    document.addEventListener('dragend', handleGlobalDragEnd);
+
+    cleanup = () => {
+      document.removeEventListener('dragend', handleGlobalDragEnd);
+    };
+  });
+
+  onDestroy(() => {
+    cleanup?.();
+  });
+
+  // Computed state object for CSS classes
+  let stateObject = $derived({
+    ready: currentState === READY,
+    'drag-over': currentState === DRAG_OVER,
+    'can-drop': currentState === CAN_DROP,
+    'cannot-drop': currentState === CANNOT_DROP,
+    'drop-disabled': disabled,
+    'active-drop': currentState === ACTIVE_DROP
+  });
+
+  let stateClasses = $derived(toStateClasses(stateObject));
+
+  // Update bindable props
+  $effect(() => {
+    isDragOver = [
+      DRAG_OVER,
+      CAN_DROP,
+      CANNOT_DROP
+    ].includes(currentState);
+
+    canDrop = currentState === CAN_DROP;
+    isDropping = currentState === ACTIVE_DROP;
+  });
+
+  /**
+   * Check if we can accept the dragged item
+   * @param {Object} data
+   * @returns {boolean}
+   */
+  function canAcceptDrop(data) {
+    if (disabled) return false;
+    if (!data) return false;
+    if (data.group !== group) return false;
+    if (!accepts(data.item)) return false;
+    if (itemCount >= maxItems) return false;
+    return true;
+  }
+
+  /**
+   * Handle drag enter
+   * @param {DragEvent} event
+   */
+  function handleDragEnter(event) {
+    event.preventDefault();
+    dragCounter++;
+
+    if (dragCounter === 1) {
+      const dragData = dragState.current;
+
+      if (dragData) {
+        currentState = canAcceptDrop(dragData)
+          ? CAN_DROP
+          : CANNOT_DROP;
+      } else {
+        currentState = DRAG_OVER;
+      }
+
+      onDragEnter?.({ event, zone, canDrop: currentState === CAN_DROP });
+    }
+  }
+
+  /**
+   * Handle drag over
+   * @param {DragEvent} event
+   */
+  function handleDragOver(event) {
+    event.preventDefault();
+
+    // Re-evaluate on each dragover in case state changed
+    const dragData = dragState.current;
+
+    if (dragData && currentState === DRAG_OVER) {
+      currentState = canAcceptDrop(dragData)
+        ? CAN_DROP
+        : CANNOT_DROP;
+    }
+
+    if (currentState === CAN_DROP) {
+      event.dataTransfer.dropEffect = 'move';
+    } else if (currentState === CANNOT_DROP) {
+      event.dataTransfer.dropEffect = 'none';
+    }
+
+    onDragOver?.({ event, zone });
+  }
+
+  /**
+   * Handle drag leave
+   * @param {DragEvent} event
+   */
+  function handleDragLeave(event) {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      dragCounter--;
+
+      if (dragCounter <= 0) {
+        dragCounter = 0;
+        currentState = READY;
+        onDragLeave?.({ event, zone });
+      }
+    }
+  }
+
+  /**
+   * Handle drop
+   * @param {DragEvent} event
+   */
+  function handleDrop(event) {
+    event.preventDefault();
+    dragCounter = 0;
+
+    try {
+      const data = JSON.parse(event.dataTransfer.getData('application/json'));
+
+      if (canAcceptDrop(data)) {
+        currentState = ACTIVE_DROP;
+        onDropStart?.({ event, zone, data });
+
+        const dropResult = onDrop?.({
+          event,
+          zone,
+          item: data.item,
+          source: data.source,
+          metadata: data.metadata
+        });
+
+        Promise.resolve(dropResult).then(() => {
+          currentState = READY;
+          onDropEnd?.({ event, zone, data, success: true });
+        }).catch((error) => {
+          currentState = READY;
+          onDropEnd?.({ event, zone, data, success: false, error });
+        });
+      } else {
+        currentState = READY;
+      }
+    } catch (error) {
+      console.error('Drop error:', error);
+      currentState = READY;
+    }
+  }
+</script>
+
+<div
+  data-component="dropzone"
+  ondragenter={handleDragEnter}
+  ondragover={handleDragOver}
+  ondragleave={handleDragLeave}
+  ondrop={handleDrop}
+  class="{base} {classes} {stateClasses}"
+  data-zone={zone}
+  {...attrs}
+>
+  {#if children}
+    {@render children()}
+  {:else if currentState === CAN_DROP && preview}
+    {@render preview(dragState.current)}
+  {:else if itemCount === 0 && empty}
+    {@render empty()}
+  {:else}
+    <div data-element="drop-zone-empty">Drop items here</div>
+  {/if}
+</div>

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

@@ -0,0 +1,6 @@
+export function useDragState(): {
+    readonly current: any;
+    start(item: any, source: any, group: any): void;
+    end(): void;
+    isDragging(): boolean;
+};

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

@@ -0,0 +1,19 @@
+let currentDrag = $state(null);
+
+export function useDragState() {
+  return {
+    get current() { return currentDrag; },
+    
+    start(item, source, group) {
+      currentDrag = { item, source, group };
+    },
+    
+    end() {
+      currentDrag = null;
+    },
+    
+    isDragging() {
+      return currentDrag !== null;
+    }
+  };
+}

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

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

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

@@ -0,0 +1,2 @@
+export { default as Draggable } from './Draggable.svelte';
+export { default as DropZone } from './DropZone.svelte';

package/dist/config/imagetools.d.ts

@@ -1,4 +1,5 @@
-type ImageMeta = import('./typedef.js').ImageMeta;
+type ImageMeta = import('../typedef').ImageMeta;
+type ImageSource = import('../typedef').ImageSource;
 
 declare module '*?responsive' {
   const out: ImageMeta[];
@@ -11,61 +12,61 @@ declare module '*&responsive' {
 }
 
 declare module '*?preset=photo' {
-  const out: ImageMeta | ImageMeta[];
+  const out: ImageSource;
   export default out;
 }
 
 declare module '*&preset=photo' {
-  const out: ImageMeta | ImageMeta[];
+  const out: ImageSource;
   export default out;
 }
 
 declare module '*?preset=render' {
-  const out: ImageMeta | ImageMeta[];
+  const out: ImageSource;
   export default out;
 }
 
 declare module '*&preset=render' {
-  const out: ImageMeta | ImageMeta[];
+  const out: ImageSource;
   export default out;
 }
 
 declare module '*?preset=gradient' {
-  const out: ImageMeta | ImageMeta[];
+  const out: ImageSource;
   export default out;
 }
 
 declare module '*&preset=gradient' {
-  const out: ImageMeta | ImageMeta[];
+  const out: ImageSource;
   export default out;
 }
 
 declare module '*?preset=drawing' {
-  const out: ImageMeta | ImageMeta[];
+  const out: ImageSource;
   export default out;
 }
 
 declare module '*&preset=drawing' {
-  const out: ImageMeta | ImageMeta[];
+  const out: ImageSource;
   export default out;
 }
 
 declare module '*?preset=savedata' {
-  const out: ImageMeta | ImageMeta[];
+  const out: ImageSource;
   export default out;
 }
 
 declare module '*&preset=savedata' {
-  const out: ImageMeta | ImageMeta[];
+  const out: IImageSource;
   export default out;
 }
 
 declare module '*?preset=blur' {
-  const out: ImageMeta | ImageMeta[];
+  const out: ImageSource;
   export default out;
 }
 
 declare module '*&preset=blur' {
-  const out: ImageMeta | ImageMeta[];
+  const out: ImageSource;
   export default out;
 }

package/dist/constants/state-labels/drag-states.d.ts

@@ -0,0 +1,5 @@
+export const IDLE: "idle";
+export const DRAGGING: "dragging";
+export const DRAG_PREVIEW: "drag-preview";
+export const DROPPING: "dropping";
+export const DRAG_DISABLED: "drag-disabled";

package/dist/constants/state-labels/drag-states.js

@@ -0,0 +1,6 @@
+// Draggable states
+export const IDLE = 'idle';                     // Not being dragged
+export const DRAGGING = 'dragging';             // Currently being dragged
+export const DRAG_PREVIEW = 'drag-preview';     // Mouse down, before drag
+export const DROPPING = 'dropping';             // Just dropped, animating
+export const DRAG_DISABLED = 'drag-disabled';   // Dragging not allowed

package/dist/constants/state-labels/drop-states.d.ts

@@ -0,0 +1,6 @@
+export const READY: "ready";
+export const DRAG_OVER: "drag-over";
+export const CAN_DROP: "can-drop";
+export const CANNOT_DROP: "cannot-drop";
+export const DROP_DISABLED: "drop-disabled";
+export const ACTIVE_DROP: "active-drop";

package/dist/constants/state-labels/drop-states.js

@@ -0,0 +1,6 @@
+export const READY = 'ready';                   // Waiting for drag
+export const DRAG_OVER = 'drag-over';           // Item dragged over zone
+export const CAN_DROP = 'can-drop';             // Valid drop target
+export const CANNOT_DROP = 'cannot-drop';       // Invalid drop target
+export const DROP_DISABLED = 'drop-disabled';   // Dropping not allowed
+export const ACTIVE_DROP = 'active-drop';       // Currently processing drop

package/dist/themes/hkdev/components/drag-drop/draggable.css

@@ -0,0 +1,51 @@
+@define-mixin component-draggable {
+  [data-component='draggable'] {
+    cursor: move;
+    user-select: none;
+    transition:
+      opacity 0.2s ease,
+      transform 0.2s ease;
+  }
+
+  /* State-based styling using state classes */
+  [data-component='draggable'].state-idle {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  [data-component='draggable'].state-dragging {
+    opacity: 0.5;
+    transform: scale(0.95);
+  }
+
+  [data-component='draggable'].state-drag-preview {
+    transform: scale(0.98);
+    filter: brightness(0.95);
+  }
+
+  [data-component='draggable'].state-dropping {
+    animation: drop-finish 0.2s ease-out;
+  }
+
+  [data-component='draggable'].state-drag-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    filter: grayscale(0.5);
+  }
+
+  /* Animations */
+  @keyframes drop-finish {
+    0% {
+      transform: scale(0.95);
+      opacity: 0.8;
+    }
+    50% {
+      transform: scale(1.05);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+}

package/dist/themes/hkdev/components/drag-drop/dropzone.css

@@ -0,0 +1,73 @@
+@define-mixin component-dropzone {
+  [data-component='dropzone'] {
+    min-height: 100px;
+    border: 2px dashed rgb(var(--color-surface-400));
+    border-radius: var(--theme-rounded-container);
+    padding: 1rem;
+    transition: all 0.2s ease;
+    position: relative;
+    background-color: rgb(var(--color-surface-50) / 0.5);
+  }
+
+  /* State-based styling using state classes */
+  [data-component='dropzone'].state-ready {
+    border-color: rgb(var(--color-surface-400));
+    background-color: transparent;
+  }
+
+  [data-component='dropzone'].state-drag-over {
+    border-color: rgb(var(--color-primary-400));
+    background-color: rgb(var(--color-primary-500) / 0.05);
+  }
+
+  [data-component='dropzone'].state-can-drop {
+    border-color: rgb(var(--color-success-500));
+    background-color: rgb(var(--color-success-500) / 0.08);
+    transform: scale(1.01);
+    box-shadow: 0 0 0 3px rgb(var(--color-success-500) / 0.2);
+  }
+
+  [data-component='dropzone'].state-cannot-drop {
+    border-color: rgb(var(--color-error-500));
+    background-color: rgb(var(--color-error-500) / 0.08);
+    cursor: not-allowed;
+  }
+
+  [data-component='dropzone'].state-active-drop {
+    animation: drop-pulse 0.3s ease-out;
+    border-color: rgb(var(--color-success-500));
+    background-color: rgb(var(--color-success-500) / 0.1);
+  }
+
+  [data-component='dropzone'].state-drop-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color: rgb(var(--color-surface-100));
+  }
+
+  /* Empty state */
+  [data-element='drop-zone-empty'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: rgb(var(--color-surface-500));
+    font-style: italic;
+  }
+
+  /* Animations */
+  @keyframes drop-pulse {
+    0% {
+      transform: scale(1);
+      box-shadow: 0 0 0 0 rgb(var(--color-success-500) / 0.4);
+    }
+    50% {
+      transform: scale(1.02);
+      box-shadow: 0 0 0 8px rgb(var(--color-success-500) / 0);
+    }
+    100% {
+      transform: scale(1);
+      box-shadow: 0 0 0 0 rgb(var(--color-success-500) / 0);
+    }
+  }
+}

package/dist/themes/hkdev/components.css

@@ -11,6 +11,9 @@
 
 /*@import "./components/buttons/skip-button.css";*/
 
+@import './components/drag-drop/draggable.css';
+@import './components/drag-drop/dropzone.css';
+
 /* Icons */
 @import './components/icons/icon-steeze.css';
 
@@ -36,6 +39,9 @@
   @mixin component-button-icon-steeze;
   /*  @mixin buttons-skip-button;*/
 
+  @mixin component-draggable;
+  @mixin component-dropzone;
+
   @mixin component-icon-steeze;
 
   @mixin component-panel;