@hkdigital/lib-sveltekit 0.1.80 → 0.1.81

package/dist/components/drag-drop/{PreviewController.d.ts → DragController.d.ts}

@@ -1,7 +1,8 @@
 /**
- * Controller for customizing drag preview images
+ * Controller for customizing drag
+ * E.g. set a custom preview image
  */
-export class PreviewController {
+export class DragController {
     /**
      * @param {DragEvent} event - The drag event
      */

package/dist/components/drag-drop/{PreviewController.js → DragController.js}

@@ -1,7 +1,8 @@
 /**
- * Controller for customizing drag preview images
+ * Controller for customizing drag
+ * E.g. set a custom preview image
  */
-export class PreviewController {
+export class DragController {
   /**
    * @param {DragEvent} event - The drag event
    */

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

@@ -1,12 +1,9 @@
 <script>
   import { toStateClasses } from '../../util/design-system/index.js';
-
   import { createOrGetDragState } from './drag-state.svelte.js';
-
-  import { PreviewController } from './PreviewController.js';
-
+  import { DragController } from './DragController.js';
   import { generateLocalId } from '../../util/unique';
-
+  import { onDestroy } from 'svelte';
   import {
     IDLE,
     DRAGGING,
@@ -25,6 +22,10 @@
    *   base?: string,
    *   classes?: string,
    *   children: import('svelte').Snippet,
+   *   draggingSnippet?: import('svelte').Snippet<[{
+   *     element: HTMLElement,
+   *     rect: DOMRect
+   *   }]>,
    *   contextKey?: import('../../typedef').ContextKey,
    *   isDragging?: boolean,
    *   isDropping?: boolean,
@@ -34,7 +35,7 @@
    *     item: any,
    *     source: string,
    *     group: string,
-   *     getPreviewController: () => PreviewController
+   *     getController: () => DragController
    *   }) => void,
    *   onDragging?: (detail: {
    *     event: DragEvent,
@@ -63,6 +64,7 @@
     base = '',
     classes = '',
     children,
+    draggingSnippet,
     contextKey,
     isDragging = $bindable(false),
     isDropping = $bindable(false),
@@ -79,11 +81,21 @@
 
   const draggableId = generateLocalId();
 
-  // console.debug('Draggable contextKey:', contextKey);
+  // svelte-ignore non_reactive_update
+  let draggableElement;
 
   let dragTimeout = null;
   let currentState = $state(IDLE);
 
+  // Custom preview follower state
+  let showPreview = $state(false);
+  let previewX = $state(0);
+  let previewY = $state(0);
+  let dragOffsetX = $state(0);
+  let dragOffsetY = $state(0);
+  let customPreviewSet = $state(false);
+  let elementRect = $state(null);
+
   // Computed state object for CSS classes
   let stateObject = $derived({
     idle: currentState === IDLE,
@@ -102,6 +114,28 @@
     isDragPreview = currentState === DRAG_PREVIEW;
   });
 
+  // Clean up on component destroy
+  onDestroy(() => {
+    if (showPreview) {
+      document.removeEventListener('dragover', handleDocumentDragOver);
+    }
+  });
+
+  /**
+   * Handle document level dragover to ensure we get position updates
+   * @param {DragEvent} event
+   */
+  function handleDocumentDragOver(event) {
+    if (showPreview && currentState === DRAGGING) {
+      // Update position for the custom preview
+      previewX = event.clientX - dragOffsetX;
+      previewY = event.clientY - dragOffsetY;
+
+      // Prevent default to allow drop
+      event.preventDefault();
+    }
+  }
+
   /**
    * Handle drag start
    * @param {DragEvent} event
@@ -147,20 +181,50 @@
     event.dataTransfer.setData('application/json', JSON.stringify(dragData));
 
     // Create the preview controller with natural offsets already calculated
-    const previewController = new PreviewController(event);
+    const previewController = new DragController(event);
 
     // Function to get the preview controller
-    const getPreviewController = () => previewController;
-
-    // Call onDragStart with the getPreviewController function
-    onDragStart?.({ event, item, source, group, getPreviewController });
-
-    // Apply default preview if no custom one was set
-    if (!previewController.hasCustomPreview()) {
+    const getController = () => previewController;
+
+    // Call onDragStart with the getController function
+    onDragStart?.({ event, item, source, group, getController });
+
+    // Check if we have a preview snippet and no custom preview was set by preview controller
+    if (draggingSnippet && !previewController.hasCustomPreview()) {
+      try {
+        // Get the element's bounding rectangle
+        const rect = draggableElement.getBoundingClientRect();
+        elementRect = rect;
+
+        // Calculate offsets - this is the natural position where the user grabbed
+        dragOffsetX = event.clientX - rect.left;
+        dragOffsetY = event.clientY - rect.top;
+
+        // Set initial position
+        previewX = event.clientX - dragOffsetX;
+        previewY = event.clientY - dragOffsetY;
+
+        // Set a transparent 1x1 pixel image as drag preview to hide browser preview
+        const emptyImg = new Image();
+        emptyImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+        event.dataTransfer.setDragImage(emptyImg, 0, 0);
+
+        // Add document level event listener to catch all dragover events
+        document.addEventListener('dragover', handleDocumentDragOver);
+
+        // Show our custom preview
+        showPreview = true;
+        customPreviewSet = true;
+      } catch (err) {
+        console.error('Error setting up custom preview:', err);
+        // Fallback to default preview
+        previewController.applyDefaultPreview();
+      }
+    }
+    // Apply default preview if no custom preview was set and no snippet
+    else if (!previewController.hasCustomPreview() && !customPreviewSet) {
       previewController.applyDefaultPreview();
     }
-
-    // Additional handlers can be left unchanged
   }
 
   /**
@@ -183,6 +247,14 @@
     // Clear global drag state
     dragState.end(draggableId);
 
+    // Clean up document event listener
+    if (customPreviewSet) {
+      document.removeEventListener('dragover', handleDocumentDragOver);
+      showPreview = false;
+      customPreviewSet = false;
+      elementRect = null;
+    }
+
     // Check if drop was successful
     const wasDropped = event.dataTransfer.dropEffect !== 'none';
 
@@ -226,6 +298,7 @@
 <div
   data-component="draggable"
   data-id={draggableId}
+  bind:this={draggableElement}
   draggable={!disabled && canDrag(item)}
   ondragstart={handleDragStart}
   ondrag={handleDrag}
@@ -237,3 +310,14 @@
 >
   {@render children()}
 </div>
+
+{#if draggingSnippet && showPreview && elementRect}
+  <div
+    data-companion="drag-preview-follower"
+    style="position: fixed; z-index: 9999; pointer-events: none;"
+    style:left="{previewX}px"
+    style:top="{previewY}px"
+  >
+    {@render draggingSnippet({ element: draggableElement, rect: elementRect })}
+  </div>
+{/if}

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

@@ -11,6 +11,10 @@ type Draggable = {
         base?: string;
         classes?: string;
         children: Snippet<[]>;
+        draggingSnippet?: Snippet<[{
+            element: HTMLElement;
+            rect: DOMRect;
+        }]>;
         contextKey?: ContextKey;
         isDragging?: boolean;
         isDropping?: boolean;
@@ -20,7 +24,7 @@ type Draggable = {
             item: any;
             source: string;
             group: string;
-            getPreviewController: () => PreviewController;
+            getController: () => DragController;
         }) => void;
         onDragging?: (detail: {
             event: DragEvent;
@@ -49,6 +53,10 @@ declare const Draggable: import("svelte").Component<{
     base?: string;
     classes?: string;
     children: import("svelte").Snippet;
+    draggingSnippet?: import("svelte").Snippet<[{
+        element: HTMLElement;
+        rect: DOMRect;
+    }]>;
     contextKey?: import("../../typedef").ContextKey;
     isDragging?: boolean;
     isDropping?: boolean;
@@ -58,7 +66,7 @@ declare const Draggable: import("svelte").Component<{
         item: any;
         source: string;
         group: string;
-        getPreviewController: () => PreviewController;
+        getController: () => DragController;
     }) => void;
     onDragging?: (detail: {
         event: DragEvent;
@@ -76,4 +84,4 @@ declare const Draggable: import("svelte").Component<{
     }) => void;
     canDrag?: (item: any) => boolean;
 }, {}, "isDragging" | "isDropping" | "isDragPreview">;
-import { PreviewController } from './PreviewController.js';
+import { DragController } from './DragController.js';

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

@@ -4,6 +4,8 @@
 
   import { createOrGetDragState } from './drag-state.svelte.js';
 
+  import { GridLayers } from '../layout';
+
   import {
     findDraggableSource,
     getDraggableIdFromEvent,
@@ -15,32 +17,26 @@
     DRAG_OVER,
     CAN_DROP,
     CANNOT_DROP,
-    DROP_DISABLED,
-    ACTIVE_DROP
+    DROP_DISABLED
   } from '../../constants/state-labels/drop-states.js';
 
+  /** @typedef {import('../../typedef').DragData} DragData */
+
   /**
    * @type {{
    *   zone?: string,
    *   group?: string,
    *   disabled?: boolean,
    *   accepts?: (item: any) => boolean,
-   *   maxItems?: number,
    *   base?: string,
    *   classes?: string,
+   *   height?: string,
+   *   autoHeight?: boolean,
    *   children?: import('svelte').Snippet,
    *   contextKey?: import('../../typedef').ContextKey,
-   *   empty?: import('svelte').Snippet,
-   *   preview?: import('svelte').Snippet<[{
-   *     item: any,
-   *     source: string,
-   *     group: string,
-   *     metadata?: any
-   *   }]>,
+   *   dropPreviewSnippet?: import('svelte').Snippet<[DragData]>,
    *   isDragOver?: boolean,
    *   canDrop?: boolean,
-   *   isDropping?: boolean,
-   *   itemCount?: number,
    *   onDragEnter?: (detail: {
    *     event: DragEvent,
    *     zone: string,
@@ -81,17 +77,15 @@
     group = 'default',
     disabled = false,
     accepts = () => true,
-    maxItems = Infinity,
     base = '',
     classes = '',
+    height = 'h-min',
+    autoHeight= false,
     children,
     contextKey,
-    empty,
-    preview,
+    dropPreviewSnippet,
     isDragOver = $bindable(false),
     canDrop = $bindable(false),
-    isDropping = $bindable(false),
-    itemCount = $bindable(0),
     onDragEnter,
     onDragOver,
     onDragLeave,
@@ -140,8 +134,7 @@
     'drag-over': currentState === DRAG_OVER,
     'can-drop': currentState === CAN_DROP,
     'cannot-drop': currentState === CANNOT_DROP,
-    'drop-disabled': disabled,
-    'active-drop': currentState === ACTIVE_DROP
+    'drop-disabled': disabled
   });
 
   let stateClasses = $derived(toStateClasses(stateObject));
@@ -155,7 +148,6 @@
     ].includes(currentState);
 
     canDrop = currentState === CAN_DROP;
-    isDropping = currentState === ACTIVE_DROP;
   });
 
   /**
@@ -172,7 +164,6 @@
     if (!data) return false;
     if (data.group !== group) return false;
     if (!accepts(data.item)) return false;
-    if (itemCount >= maxItems) return false;
     return true;
   }
 
@@ -321,8 +312,7 @@ function handleDrop(event) {
 
     // Check if we can accept this drop
     if (dragData && canAcceptDrop(dragData)) {
-      // Update state and notify listeners
-      currentState = ACTIVE_DROP;
+      // Notify listener
       onDropStart?.({ event, zone, data: dragData });
 
       // Call the onDrop handler and handle Promise resolution
@@ -361,17 +351,41 @@ function handleDrop(event) {
   ondragover={handleDragOver}
   ondragleave={handleDragLeave}
   ondrop={handleDrop}
-  class="{base} {classes} {stateClasses}"
+  class="{base} {height} {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}
+  <GridLayers heightFrom={autoHeight ? 'content' : null}>
+    {#if children}
+      <div data-layer="content" class:auto-height={autoHeight}>
+        {@render children()}
+      </div>
+    {/if}
+
+    {#if currentState === CAN_DROP && dropPreviewSnippet}
+      <div data-layer="preview">
+        {@render dropPreviewSnippet(dragState.current)}
+      </div>
+    {/if}
+
+  </GridLayers>
 </div>
+
+<style>
+  [data-layer='content']:not(.auto-height) {
+    position: absolute;
+    left: 0; right: 0; top: 0; bottom: 0;
+  }
+
+  [data-layer='content'].auto-height {
+    position: relative;
+    width: 100%;
+  }
+
+  [data-layer='preview']
+  {
+    position: absolute;
+    left: 0; right: 0; top: 0; bottom: 0;
+    pointer-events: none;
+  }
+</style>

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

@@ -7,22 +7,15 @@ type DropZone = {
         group?: string;
         disabled?: boolean;
         accepts?: (item: any) => boolean;
-        maxItems?: number;
         base?: string;
         classes?: string;
+        height?: string;
+        autoHeight?: boolean;
         children?: Snippet<[]>;
         contextKey?: ContextKey;
-        empty?: Snippet<[]>;
-        preview?: Snippet<[{
-            item: any;
-            source: string;
-            group: string;
-            metadata?: any;
-        }]>;
+        dropPreviewSnippet?: Snippet<[DragData]>;
         isDragOver?: boolean;
         canDrop?: boolean;
-        isDropping?: boolean;
-        itemCount?: number;
         onDragEnter?: (detail: {
             event: DragEvent;
             zone: string;
@@ -63,22 +56,15 @@ declare const DropZone: import("svelte").Component<{
     group?: string;
     disabled?: boolean;
     accepts?: (item: any) => boolean;
-    maxItems?: number;
     base?: string;
     classes?: string;
+    height?: string;
+    autoHeight?: boolean;
     children?: import("svelte").Snippet;
     contextKey?: import("../../typedef").ContextKey;
-    empty?: import("svelte").Snippet;
-    preview?: import("svelte").Snippet<[{
-        item: any;
-        source: string;
-        group: string;
-        metadata?: any;
-    }]>;
+    dropPreviewSnippet?: import("svelte").Snippet<[import("../../typedef").DragData]>;
     isDragOver?: boolean;
     canDrop?: boolean;
-    isDropping?: boolean;
-    itemCount?: number;
     onDragEnter?: (detail: {
         event: DragEvent;
         zone: string;
@@ -111,4 +97,4 @@ declare const DropZone: import("svelte").Component<{
         success: boolean;
         error?: Error;
     }) => void;
-}, {}, "isDropping" | "isDragOver" | "canDrop" | "itemCount">;
+}, {}, "isDragOver" | "canDrop">;

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

@@ -1,167 +1,186 @@
 <script>
-	/**
-	 * Grid Layers Component
-	 *
-	 * A component that creates a single-cell grid where all children exist
-	 * in the same grid cell, allowing them to be positioned independently
-	 * and stacked on top of each other. Perfect for complex layouts like
-	 * overlaying text on images, card stacks, positioning UI elements, etc.
-	 *
-	 * Each child can use grid positioning properties (justify-self-*, self-*)
-	 * for precise placement. Children can control stacking order with z-index.
-	 *
-	 * @example Basic usage with 9-position grid
-	 * ```html
-	 * <GridLayers classes="border w-[500px] h-[500px]">
-	 *   <!-- Top Row -->
-	 *   <div class="justify-self-start self-start">
-	 *     <div class="bg-blue-500 w-[100px] h-[100px]">
-	 *       Top Left
-	 *     </div>
-	 *   </div>
-	 *   <div class="justify-self-center self-start">
-	 *     <div class="bg-blue-300 w-[100px] h-[100px]">
-	 *       Top Center
-	 *     </div>
-	 *   </div>
-	 *   <div class="justify-self-end self-start">
-	 *     <div class="bg-blue-500 w-[100px] h-[100px]">
-	 *       Top Right
-	 *     </div>
-	 *   </div>
-	 *
-	 *   <!-- Middle Row -->
-	 *   <div class="justify-self-start self-center">
-	 *     <div class="bg-green-500 w-[100px] h-[100px]">
-	 *       Middle Left
-	 *     </div>
-	 *   </div>
-	 *   <div class="justify-self-center self-center">
-	 *     <div class="bg-green-300 w-[100px] h-[100px]">
-	 *       Middle Center
-	 *     </div>
-	 *   </div>
-	 *   <div class="justify-self-end self-center">
-	 *     <div class="bg-green-500 w-[100px] h-[100px]">
-	 *       Middle Right
-	 *     </div>
-	 *   </div>
-	 *
-	 *   <!-- Bottom Row -->
-	 *   <div class="justify-self-start self-end">
-	 *     <div class="bg-red-500 w-[100px] h-[100px]">
-	 *       Bottom Left
-	 *     </div>
-	 *   </div>
-	 *   <div class="justify-self-center self-end">
-	 *     <div class="bg-red-300 w-[100px] h-[100px]">
-	 *       Bottom Center
-	 *     </div>
-	 *   </div>
-	 *   <div class="justify-self-end self-end">
-	 *     <div class="bg-red-500 w-[100px] h-[100px]">
-	 *       Bottom Right
-	 *     </div>
-	 *   </div>
-	 * </GridLayers>
-	 * ```
-	 *
-	 * @example Text over image
-	 * ```html
-	 * <GridLayers classes="w-full h-[300px]">
-	 *   <!-- Background image layer -->
-	 *   <div class="justify-self-stretch self-stretch z-0">
-	 *     <img
-	 *       src="/images/landscape.jpg"
-	 *       alt="Landscape"
-	 *       class="w-full h-full object-cover"
-	 *     />
-	 *   </div>
-	 *
-	 *   <!-- Text overlay layer -->
-	 *   <div class="justify-self-center self-center z-10">
-	 *     <div class="bg-black/50 p-16up text-white
-	 *                 font-ui rounded-md">
-	 *       <h2 class="text-2xl">Explore Nature</h2>
-	 *       <p>Discover the beauty of the outdoors</p>
-	 *     </div>
-	 *   </div>
-	 * </GridLayers>
-	 * ```
-	 */
-
-	/**
-	 * @type {{
-	 *   base?: string,
-	 *   bg?: string,
-	 *   padding?: string,
-	 *   margin?: string,
-	 *   height?: string,
-	 *   classes?: string,
-	 *   style?: string,
-	 *   cellBase?: string,
-	 *   cellBg?: string,
-	 *   cellPadding?: string,
-	 *   cellMargin?: string,
-	 *   cellClasses?: string,
-	 *   cellStyle?: string,
-	 *   children: import('svelte').Snippet,
-	 *   cellAttrs?: { [attr: string]: * },
-	 *   [attr: string]: any
-	 * }}
-	 */
-	const {
-		// Style
-		base,
-		bg,
-		padding,
-		margin,
-		height,
-		classes,
-		style,
-		cellBase,
-		cellBg,
-		cellPadding,
-		cellMargin,
-		cellClasses,
-		cellStyle,
-
-		cellAttrs,
-
-		// Snippets
-		children,
-
-		// Attributes
-		...attrs
-	} = $props();
+  import { onMount, onDestroy } from 'svelte';
+  import { setupLayerObserver, measureTargetLayer } from './util.js';
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   padding?: string,
+   *   margin?: string,
+   *   height?: string,
+   *   classes?: string,
+   *   style?: string,
+   *   cellBase?: string,
+   *   cellBg?: string,
+   *   cellPadding?: string,
+   *   cellMargin?: string,
+   *   cellClasses?: string,
+   *   cellStyle?: string,
+   *   heightFrom?: string|null,
+   *   children: import('svelte').Snippet,
+   *   cellAttrs?: { [attr: string]: any },
+   *   [attr: string]: any
+   * }}
+   */
+  const {
+    // Style
+    base = '',
+    bg = '',
+    padding = '',
+    margin = '',
+    height = '',
+    classes = '',
+    style = '',
+    cellBase = '',
+    cellBg = '',
+    cellPadding = '',
+    cellMargin = '',
+    cellClasses = '',
+    cellStyle = '',
+
+    // Behavior
+    heightFrom = null,
+
+    // Props
+    cellAttrs = {},
+    children,
+
+    // Attributes
+    ...attrs
+  } = $props();
+
+  // Component state
+  let gridContainer = $state(null);
+  let gridContent = $state(null);
+  let calculatedHeight = $state(0);
+  let observer = $state(null);
+  let targetLayer = $state(null);
+  let isFirstRender = $state(heightFrom !== null); // Start with true if heightFrom is provided
+  let preCalculatedHeight = $state(0);
+
+  // Derived container style that updates reactively when dependencies change
+  let containerStyle = $derived.by(() => {
+    const styles = [];
+
+    if (style) {
+      styles.push(style);
+    }
+
+    if (heightFrom && calculatedHeight > 0) {
+      styles.push(`height: ${calculatedHeight}px;`);
+    }
+
+    return styles.join(' ');
+  });
+
+  /**
+   * Handler for height changes detected by the observer
+   * @param {number} newHeight - The new calculated height
+   */
+  function handleHeightChange(newHeight) {
+    calculatedHeight = newHeight;
+  }
+
+  /**
+   * Initialize height measurement and observation
+   */
+  function initializeHeightTracking() {
+    if (!heightFrom || !gridContent) return;
+
+    // Measure the layer initially
+    const { element, height } = measureTargetLayer(gridContent, heightFrom);
+
+    if (element) {
+      targetLayer = element;
+      calculatedHeight = height;
+
+      // Setup observer for future changes
+      observer = setupLayerObserver(element, handleHeightChange);
+    }
+  }
+
+  // Initialize on mount with the two-pass rendering approach
+  onMount(() => {
+    if (heightFrom) {
+      // First render: measure invisibly
+      requestAnimationFrame(() => {
+        if (gridContent) {
+          const { element, height } = measureTargetLayer(gridContent, heightFrom);
+
+          if (element) {
+            targetLayer = element;
+            preCalculatedHeight = height;
+
+            // Second render: show with correct height
+            requestAnimationFrame(() => {
+              calculatedHeight = preCalculatedHeight;
+              isFirstRender = false;
+
+              // Setup observer for future changes
+              observer = setupLayerObserver(element, handleHeightChange);
+            });
+          } else {
+            // No target layer found, just show the component
+            isFirstRender = false;
+          }
+        } else {
+          // No grid content, just show the component
+          isFirstRender = false;
+        }
+      });
+    } else {
+      // No heightFrom, no need for measurement
+      isFirstRender = false;
+    }
+  });
+
+  // Effect to re-setup observer when either the target layer or heightFrom changes
+  $effect(() => {
+    // Only handle changes after initial setup
+    if (!isFirstRender && heightFrom && gridContent && !observer) {
+      initializeHeightTracking();
+    }
+  });
+
+  // Clean up on destroy
+  onDestroy(() => {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  });
 </script>
 
 <div
-	data-component="grid-layers"
-	class="relative {base} {bg} {height} {classes} {margin} {padding}"
-	{style}
-	{...attrs}
+  data-component="grid-layers"
+  bind:this={gridContainer}
+  class="relative {isFirstRender ? 'invisible' : ''} {base} {bg} {!heightFrom ? height : ''} {classes} {margin} {padding}"
+  style={containerStyle}
+  {...attrs}
 >
-	<div
-		data-section="grid"
-		class="absolute inset-0 grid {cellBase} {cellBg} {cellPadding} {cellMargin} {cellClasses}"
-		style={cellStyle}
-	>
-		{@render children()}
-	</div>
+  <div
+    data-section="grid"
+    bind:this={gridContent}
+    class="absolute inset-0 grid {cellBase} {cellBg} {cellPadding} {cellMargin} {cellClasses}"
+    style={cellStyle}
+    {...cellAttrs}
+  >
+    {@render children()}
+  </div>
 </div>
 
 <style>
-	/* All children of the layer share the same grid area
-	   but aren't absolutely positioned */
-	[data-section='grid'] {
-		grid-template-columns: 1fr;
-		grid-template-rows: 1fr;
-	}
-
-	[data-section='grid'] > :global(*) {
-		grid-column: 1;
-		grid-row: 1;
-		z-index: 0; /* Base z-index to allow explicit stacking order */
-	}
+  /* All children of the layer share the same grid area
+     but aren't absolutely positioned */
+  [data-section='grid'] {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+  }
+
+  [data-section='grid'] > :global(*) {
+    grid-column: 1;
+    grid-row: 1;
+    z-index: 0; /* Base z-index to allow explicit stacking order */
+  }
 </style>

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

@@ -16,6 +16,7 @@ type GridLayers = {
         cellMargin?: string;
         cellClasses?: string;
         cellStyle?: string;
+        heightFrom?: string;
         children: Snippet<[]>;
         cellAttrs?: {
             [attr: string]: any;
@@ -37,6 +38,7 @@ declare const GridLayers: import("svelte").Component<{
     cellMargin?: string;
     cellClasses?: string;
     cellStyle?: string;
+    heightFrom?: string | null;
     children: import("svelte").Snippet;
     cellAttrs?: {
         [attr: string]: any;

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

@@ -0,0 +1,167 @@
+<script>
+	/**
+	 * Grid Layers Component
+	 *
+	 * A component that creates a single-cell grid where all children exist
+	 * in the same grid cell, allowing them to be positioned independently
+	 * and stacked on top of each other. Perfect for complex layouts like
+	 * overlaying text on images, card stacks, positioning UI elements, etc.
+	 *
+	 * Each child can use grid positioning properties (justify-self-*, self-*)
+	 * for precise placement. Children can control stacking order with z-index.
+	 *
+	 * @example Basic usage with 9-position grid
+	 * ```html
+	 * <GridLayers classes="border w-[500px] h-[500px]">
+	 *   <!-- Top Row -->
+	 *   <div class="justify-self-start self-start">
+	 *     <div class="bg-blue-500 w-[100px] h-[100px]">
+	 *       Top Left
+	 *     </div>
+	 *   </div>
+	 *   <div class="justify-self-center self-start">
+	 *     <div class="bg-blue-300 w-[100px] h-[100px]">
+	 *       Top Center
+	 *     </div>
+	 *   </div>
+	 *   <div class="justify-self-end self-start">
+	 *     <div class="bg-blue-500 w-[100px] h-[100px]">
+	 *       Top Right
+	 *     </div>
+	 *   </div>
+	 *
+	 *   <!-- Middle Row -->
+	 *   <div class="justify-self-start self-center">
+	 *     <div class="bg-green-500 w-[100px] h-[100px]">
+	 *       Middle Left
+	 *     </div>
+	 *   </div>
+	 *   <div class="justify-self-center self-center">
+	 *     <div class="bg-green-300 w-[100px] h-[100px]">
+	 *       Middle Center
+	 *     </div>
+	 *   </div>
+	 *   <div class="justify-self-end self-center">
+	 *     <div class="bg-green-500 w-[100px] h-[100px]">
+	 *       Middle Right
+	 *     </div>
+	 *   </div>
+	 *
+	 *   <!-- Bottom Row -->
+	 *   <div class="justify-self-start self-end">
+	 *     <div class="bg-red-500 w-[100px] h-[100px]">
+	 *       Bottom Left
+	 *     </div>
+	 *   </div>
+	 *   <div class="justify-self-center self-end">
+	 *     <div class="bg-red-300 w-[100px] h-[100px]">
+	 *       Bottom Center
+	 *     </div>
+	 *   </div>
+	 *   <div class="justify-self-end self-end">
+	 *     <div class="bg-red-500 w-[100px] h-[100px]">
+	 *       Bottom Right
+	 *     </div>
+	 *   </div>
+	 * </GridLayers>
+	 * ```
+	 *
+	 * @example Text over image
+	 * ```html
+	 * <GridLayers classes="w-full h-[300px]">
+	 *   <!-- Background image layer -->
+	 *   <div class="justify-self-stretch self-stretch z-0">
+	 *     <img
+	 *       src="/images/landscape.jpg"
+	 *       alt="Landscape"
+	 *       class="w-full h-full object-cover"
+	 *     />
+	 *   </div>
+	 *
+	 *   <!-- Text overlay layer -->
+	 *   <div class="justify-self-center self-center z-10">
+	 *     <div class="bg-black/50 p-16up text-white
+	 *                 font-ui rounded-md">
+	 *       <h2 class="text-2xl">Explore Nature</h2>
+	 *       <p>Discover the beauty of the outdoors</p>
+	 *     </div>
+	 *   </div>
+	 * </GridLayers>
+	 * ```
+	 */
+
+	/**
+	 * @type {{
+	 *   base?: string,
+	 *   bg?: string,
+	 *   padding?: string,
+	 *   margin?: string,
+	 *   height?: string,
+	 *   classes?: string,
+	 *   style?: string,
+	 *   cellBase?: string,
+	 *   cellBg?: string,
+	 *   cellPadding?: string,
+	 *   cellMargin?: string,
+	 *   cellClasses?: string,
+	 *   cellStyle?: string,
+	 *   children: import('svelte').Snippet,
+	 *   cellAttrs?: { [attr: string]: * },
+	 *   [attr: string]: any
+	 * }}
+	 */
+	const {
+		// Style
+		base,
+		bg,
+		padding,
+		margin,
+		height,
+		classes,
+		style,
+		cellBase,
+		cellBg,
+		cellPadding,
+		cellMargin,
+		cellClasses,
+		cellStyle,
+
+		cellAttrs,
+
+		// Snippets
+		children,
+
+		// Attributes
+		...attrs
+	} = $props();
+</script>
+
+<div
+	data-component="grid-layers"
+	class="relative {base} {bg} {height} {classes} {margin} {padding}"
+	{style}
+	{...attrs}
+>
+	<div
+		data-section="grid"
+		class="absolute inset-0 grid {cellBase} {cellBg} {cellPadding} {cellMargin} {cellClasses}"
+		style={cellStyle}
+	>
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	/* All children of the layer share the same grid area
+	   but aren't absolutely positioned */
+	[data-section='grid'] {
+		grid-template-columns: 1fr;
+		grid-template-rows: 1fr;
+	}
+
+	[data-section='grid'] > :global(*) {
+		grid-column: 1;
+		grid-row: 1;
+		z-index: 0; /* Base z-index to allow explicit stacking order */
+	}
+</style>

package/dist/components/layout/grid-layers/util.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Sets up a ResizeObserver on the target layer
+ *
+ * @param {HTMLElement|null} targetLayer - The layer element to observe
+ * @param {Function} onHeightChange - Callback when height changes
+ * @returns {ResizeObserver|null} - The created observer or null
+ */
+export function setupLayerObserver(targetLayer: HTMLElement | null, onHeightChange: Function): ResizeObserver | null;
+/**
+ * Measures the height of the specified layer, including margins
+ *
+ * @param {HTMLElement|null} container - The container to search in
+ * @param {string} layerId - The data-layer attribute value to find
+ * @returns {{ element: HTMLElement|null, height: number }} The element and its height
+ */
+export function measureTargetLayer(container: HTMLElement | null, layerId: string): {
+    element: HTMLElement | null;
+    height: number;
+};

package/dist/components/layout/grid-layers/util.js

@@ -0,0 +1,74 @@
+// lib/components/layout/gridLayers.utils.js
+
+/**
+ * Sets up a ResizeObserver on the target layer
+ * 
+ * @param {HTMLElement|null} targetLayer - The layer element to observe
+ * @param {Function} onHeightChange - Callback when height changes
+ * @returns {ResizeObserver|null} - The created observer or null
+ */
+export function setupLayerObserver(targetLayer, onHeightChange) {
+  if (!targetLayer || !window.ResizeObserver) return null;
+
+  // Create new observer
+  const observer = new ResizeObserver(entries => {
+    for (const entry of entries) {
+      if (entry.target === targetLayer) {
+        // Get the computed style to access margin values
+        const computedStyle = window.getComputedStyle(targetLayer);
+        const marginTop = parseInt(computedStyle.marginTop, 10);
+        const marginBottom = parseInt(computedStyle.marginBottom, 10);
+
+        // Calculate height including border box and margins
+        let elementHeight = 0;
+
+        if (entry.borderBoxSize) {
+          const borderBoxSize = Array.isArray(entry.borderBoxSize)
+            ? entry.borderBoxSize[0]
+            : entry.borderBoxSize;
+          elementHeight = borderBoxSize.blockSize;
+        } else {
+          // Fallback to getBoundingClientRect
+          const rect = targetLayer.getBoundingClientRect();
+          elementHeight = rect.height;
+        }
+
+        // Add margins to the height
+        const totalHeight = elementHeight + marginTop + marginBottom;
+        onHeightChange(totalHeight);
+      }
+    }
+  });
+
+  // Start observing
+  observer.observe(targetLayer);
+  return observer;
+}
+
+/**
+ * Measures the height of the specified layer, including margins
+ * 
+ * @param {HTMLElement|null} container - The container to search in
+ * @param {string} layerId - The data-layer attribute value to find
+ * @returns {{ element: HTMLElement|null, height: number }} The element and its height
+ */
+export function measureTargetLayer(container, layerId) {
+  if (!layerId || !container) return { element: null, height: 0 };
+
+  const layerElement = container.querySelector(`[data-layer="${layerId}"]`);
+  
+  if (!layerElement) return { element: null, height: 0 };
+  
+  // Get the computed style to access margin values
+  const computedStyle = window.getComputedStyle(layerElement);
+  const marginTop = parseInt(computedStyle.marginTop, 10);
+  const marginBottom = parseInt(computedStyle.marginBottom, 10);
+  
+  // Get the element's border box height
+  const rect = layerElement.getBoundingClientRect();
+  
+  // Calculate total height including margins
+  const height = rect.height > 0 ? rect.height + marginTop + marginBottom : 0;
+  
+  return { element: layerElement, height };
+}

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

@@ -57,4 +57,8 @@
       opacity: 1;
     }
   }
+
+  & [data-companion="drag-preview-follower"] {
+    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+  }
 }

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

@@ -1,73 +1,49 @@
 @define-mixin component-dropzone {
+  /* Visual styling and customizable aspects */
   [data-component='dropzone'] {
-    min-height: 100px;
+    /*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);
-  }
+    /* State-based styling using state classes - visual aspects only */
+    &.state-ready {
+      border-color: rgb(var(--color-surface-400));
+      background-color: transparent;
+    }
 
-  [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;
-  }
+    &.state-drag-over {
+      border-color: rgb(var(--color-primary-400));
+      background-color: rgb(var(--color-primary-500) / 0.05);
+    }
 
-  [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);
-  }
+    &.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-drop-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    background-color: rgb(var(--color-surface-100));
-  }
+    &.state-cannot-drop {
+      border-color: rgb(var(--color-error-500));
+      background-color: rgb(var(--color-error-500) / 0.08);
+      cursor: not-allowed;
+    }
 
-  /* 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;
+    &.state-drop-disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      background-color: rgb(var(--color-surface-100));
+    }
   }
 
-  /* 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);
-    }
+  /* Default styling for inner elements - all visual/customizable */
+  [data-layer='content'],
+  [data-layer='preview'],
+  [data-layer='empty'] {
+    @apply type-base-md;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.1.80",
+	"version": "0.1.81",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"