@hkdigital/lib-sveltekit 0.1.80 → 0.1.82

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/constants/state-labels/drop-states.d.ts

@@ -2,5 +2,3 @@ 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

@@ -2,5 +2,5 @@ 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
+// 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

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