@hkdigital/lib-sveltekit 0.2.4 → 0.2.6

package/dist/classes/logging/Logger.js

@@ -34,7 +34,7 @@
 
 import { EventEmitter } from '../events';
 
-import { DEBUG, INFO, WARN, ERROR, FATAL, NONE, LEVELS } from './constants.js';
+import { DEBUG, INFO, WARN, ERROR, FATAL, LEVELS } from './constants.js';
 
 /**
  * Logger class for consistent logging across services

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

@@ -8,8 +8,7 @@
     IDLE,
     DRAGGING,
     DRAG_PREVIEW,
-    DROPPING,
-    DRAG_DISABLED
+    DROPPING
   } from '../../constants/state-labels/drag-states.js';
 
 
@@ -99,14 +98,24 @@
   let customPreviewSet = $state(false);
   let elementRect = $state(null);
 
-  // Computed state object for CSS classes
-  let stateObject = $derived({
-    idle: currentState === IDLE,
-    dragging: currentState === DRAGGING,
-    'drag-preview': currentState === DRAG_PREVIEW,
-    dropping: currentState === DROPPING,
-    'drag-disabled': disabled || !canDrag(item)
-  });
+// Track if current draggable can drop in the active zone
+let canDropInActiveZone = $derived.by(() => {
+  if (currentState !== DRAGGING || !dragState.activeDropZone) return false;
+
+  const activeZone = dragState.dropZones.get(dragState.activeDropZone);
+  return activeZone?.canDrop || false;
+});
+
+// Computed state object for CSS classes
+let stateObject = $derived({
+  idle: currentState === IDLE,
+  dragging: currentState === DRAGGING,
+  'drag-preview': currentState === DRAG_PREVIEW,
+  dropping: currentState === DROPPING,
+  'drag-disabled': disabled || !canDrag(item),
+  'can-drop': currentState === DRAGGING && canDropInActiveZone,
+  'cannot-drop': currentState === DRAGGING && dragState.activeDropZone && !canDropInActiveZone
+});
 
   let stateClasses = $derived(toStateClasses(stateObject));
 
@@ -465,6 +474,7 @@ function handleTouchMove(event) {
 {#if draggingSnippet && showPreview && elementRect}
   <div
     data-companion="drag-preview-follower"
+    class={stateClasses}
     style="position: fixed; z-index: 9999; pointer-events: none;"
     style:left="{previewX}px"
     style:top="{previewY}px"

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

@@ -1,187 +1,63 @@
 <script>
-  import { onMount, onDestroy } from 'svelte';
-  import { setupLayerObserver, measureTargetLayer } from './util.js';
-
   /**
+   * GridLayers Component
+   *
+   * Creates a single-cell grid where all children occupy the same space,
+   * enabling layered layouts with natural height behavior.
+   *
    * @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,
+   *   overflow?: string,
    *   children: import('svelte').Snippet,
-   *   cellAttrs?: { [attr: string]: any },
    *   [attr: string]: any
    * }}
    */
   const {
-    // Style
+    // Container styles
     base = '',
     bg = '',
     padding = '',
     margin = '',
-    height = 'h-full',
     classes = '',
     style = '',
-    cellBase = '',
-    cellBg = '',
-    cellPadding = '',
-    cellMargin = '',
-    cellClasses = '',
-    cellStyle = '',
-
-    // Behavior
-    heightFrom = null,
+    overflow = '',
 
-    // Props
-    cellAttrs = {},
+    // Content
     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
+  // Build the inline style
   let containerStyle = $derived.by(() => {
-    const styles = [];
+    const styles = ['grid-template: 1fr / 1fr;'];
 
     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"
-  bind:this={gridContainer}
-  class="relative {isFirstRender ? 'invisible' : ''} {base} {bg} {heightFrom ? '' : height} {classes} {margin} {padding}"
+  class="grid {base} {bg} {classes} {margin} {padding} {overflow}"
   style={containerStyle}
   {...attrs}
 >
-  <div
-    data-section="grid"
-    bind:this={gridContent}
-    class="absolute inset-0 grid {cellBase} {cellBg} {cellPadding} {cellMargin} {cellClasses}"
-    style={cellStyle}
-    {...cellAttrs}
-  >
-    {@render children()}
-  </div>
+  {@render children()}
 </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 direct children occupy the same grid area */
+  div > :global(*) {
+    grid-area: 1 / 1;
   }
 </style>

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

@@ -7,20 +7,10 @@ type GridLayers = {
         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;
+        overflow?: string;
         children: Snippet<[]>;
-        cellAttrs?: {
-            [attr: string]: any;
-        };
     }>): void;
 };
 declare const GridLayers: import("svelte").Component<{
@@ -29,18 +19,8 @@ declare const GridLayers: import("svelte").Component<{
     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;
+    overflow?: string;
     children: import("svelte").Snippet;
-    cellAttrs?: {
-        [attr: string]: any;
-    };
 }, {}, "">;

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

@@ -0,0 +1,372 @@
+<script>
+  import { onMount, onDestroy } from 'svelte';
+  import { setupLayerObserver, measureTargetLayer } from './util.js';
+
+  /**
+   * # GridLayers Component
+   *
+   * A Svelte 5 component that creates a layered grid layout where all
+   * children occupy the same grid area, allowing for overlapping content with
+   * precise positioning control.
+   *
+   * ## Overview
+   *
+   * GridLayers uses CSS Grid to stack multiple elements in the same grid cell
+   * (1x1 grid), enabling layered layouts without absolute positioning on the
+   * children. This approach maintains the natural flow and sizing behavior of
+   * grid items while allowing them to overlap.
+   *
+   * ## Height Control
+   *
+   * The component offers two methods for controlling height:
+   *
+   * ### 1. Fixed Height (default)
+   *
+   * Use the `height` prop with Tailwind classes:
+   * ```svelte
+   * <GridLayers height="h-[500px]">
+   *    <!-- content -->
+   * </GridLayers>
+   * ```
+   *
+   * ### 2. Dynamic Height
+   * Use the `heightFrom` prop to make the container's height match a specific
+   * child layer:
+   *
+   * ```svelte
+   * <GridLayers heightFrom="content">
+   *   <div data-layer="content">
+   *     <!-- This layer's height determines the container height -->
+   *   </div>
+   *   <div data-layer="overlay">
+   *     <!-- Other layers adapt to the container -->
+   *   </div>
+   * </GridLayers>
+   * ```
+   *
+   * The `heightFrom` value should match a child's `data-layer` attribute.
+   * The component will:
+   *    - Initially render invisibly to measure the target layer
+   *    - Apply the measured height to the container
+   *    - Watch for changes and update automatically
+   *
+   * ## Positioning Layers
+   *
+   * Each child element can be positioned within the grid cell using Tailwind's
+   * alignment utilities:
+   *
+   * ### justify-self (Horizontal Alignment)
+   *   - `justify-self-start` - Align to the left
+   *   - `justify-self-center` - Center horizontally
+   *   - `justify-self-end` - Align to the right
+   *   - `justify-self-stretch` - Stretch to full width (default)
+   *
+   * ### self (Vertical Alignment)
+   *   - `self-start` - Align to the top
+   *   - `self-center` - Center vertically
+   *   - `self-end` - Align to the bottom
+   *   - `self-stretch` - Stretch to full height (default)
+   *
+   * ### Combining Positions
+   * ```svelte
+   * <GridLayers height="h-[400px]">
+   *   <div class="justify-self-start self-start">Top Left</div>
+   *     <div class="justify-self-center self-center">Centered</div>
+   *     <div class="justify-self-end self-end">Bottom Right</div>
+   * </GridLayers>
+   * ```
+   *
+   * ### Fine-tuning with Margins
+   * For precise positioning adjustments, use margins:
+   * ```svelte
+   * <div class="justify-self-end self-end mr-4 mb-4">
+   *   <!-- Positioned at bottom-right with 1rem spacing -->
+   * </div>
+   * ```
+   *
+   * ## Technical Implementation
+   *
+   * ### The Grid Container
+   * The inner grid container uses `absolute inset-0` which:
+   *   - Positions it absolutely within the relative parent
+   *   - `inset-0` is shorthand for `top: 0, right: 0, bottom: 0, left: 0`
+   *   - Makes the grid fill the entire parent container
+   *   - Ensures the grid respects the parent's dimensions (fixed or dynamic)
+   *
+   * This approach creates a stable positioning context while maintaining the
+   * parent's flow in the document.
+   *
+   *    ### Grid Structure
+   *    All children are assigned to the same grid cell:
+   *    ```css
+   *    grid-template-columns: 1fr;
+   *    grid-template-rows: 1fr;
+   *    grid-column: 1;
+   *    grid-row: 1;
+   *    ```
+   *
+   *    ## Overflow Behavior
+   *
+   *    When a layer's content exceeds the container bounds:
+   *
+   *    ### Default Behavior
+   *    - Content will overflow and be visible outside the container
+   *    - This can break layouts or create unwanted scrollbars
+   *
+   *    ### Controlling Overflow
+   *    Add overflow utilities to the container:
+   *    ```svelte
+   *    <!-- Hide overflow -->
+   *    <GridLayers classes="overflow-hidden">
+   *
+   *    <!-- Scroll if needed -->
+   *    <GridLayers classes="overflow-auto">
+   *
+   *    <!-- Scroll specific layer -->
+   *    <GridLayers>
+   *      <div class="overflow-auto">
+   *        <!-- Scrollable content -->
+   *      </div>
+   *    </GridLayers>
+   *    ```
+   *
+   *    ### Best Practices for Overflow
+   *    1. Use `overflow-hidden` on the container when layers should be clipped
+   *    2. Apply `overflow-auto` to specific layers that need scrolling
+   *    3. Consider using `max-h-*` classes on content layers
+   *    4. Test with different content sizes to ensure proper behavior
+   *
+   *    ## Z-Index Stacking
+   *
+   *    Layers have a base `z-index: 0` and stack in DOM order. Control stacking with:
+   *    ```svelte
+   *    <div class="z-10">Top layer</div>
+   *    <div class="z-0">Base layer</div>
+   *    <div class="z-20">Topmost layer</div>
+   *    ```
+   *
+   *    ## Common Patterns
+   *
+   *    ### Header/Content/Footer
+   *    ```svelte
+   *    <GridLayers heightFrom="content">
+   *      <div data-layer="header" class="self-start">
+   *        <header>Fixed header</header>
+   *      </div>
+   *      <div data-layer="content" class="self-center">
+   *        <main>Dynamic content</main>
+   *      </div>
+   *      <div data-layer="footer" class="self-end">
+   *        <footer>Fixed footer</footer>
+   *      </div>
+   *    </GridLayers>
+   *    ```
+   *
+   *    ### Centered Overlay
+   *    ```svelte
+   *    <GridLayers height="h-screen">
+   *      <div class="z-0">
+   *        <img src="background.jpg" class="w-full h-full object-cover" />
+   *      </div>
+   *      <div class="z-10 justify-self-center self-center">
+   *        <div class="bg-white p-8 rounded shadow-lg">
+   *          Centered content over background
+   *        </div>
+   *      </div>
+   *    </GridLayers>
+   *    ```
+   *
+   *    ### Corner Badges
+   *    ```svelte
+   *    <GridLayers height="h-64">
+   *      <div class="justify-self-end self-start m-4 z-10">
+   *        <span class="badge">New</span>
+   *      </div>
+   *      <div>
+   *        Main content
+   *      </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,
+   *   heightFrom?: string|null,
+   *   children: import('svelte').Snippet,
+   *   cellAttrs?: { [attr: string]: any },
+   *   [attr: string]: any
+   * }}
+   */
+  const {
+    // Style
+    base = '',
+    bg = '',
+    padding = '',
+    margin = '',
+    height = 'h-full',
+    classes = '',
+    style = '',
+    cellBase = '',
+    cellBg = '',
+    cellPadding = '',
+    cellMargin = '',
+    cellClasses = '',
+    cellStyle = '',
+
+    // Behavior
+    heightFrom = null,
+
+    // Props
+    cellAttrs = {},
+    children,
+
+    // Attributes
+    ...attrs
+  } = $props();
+
+  // Component state
+  let gridContent = $state(null);
+  let calculatedHeight = $state(0);
+  let observer = $state(null);
+
+  // Start with true if heightFrom is provided
+  let isFirstRender = $state(heightFrom !== null);
+
+  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) {
+      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) {
+            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 {isFirstRender ? 'invisible' : ''} {base} {bg} {heightFrom ? '' : height} {classes} {margin} {padding}"
+  style={containerStyle}
+  {...attrs}
+>
+  <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 */
+  }
+</style>

package/dist/features/presenter/ImageSlide.svelte

@@ -3,7 +3,7 @@
 
   /**
    * @type {{
-   *   imageMeta?: import('@hkdigital/lib-sveltekit/config/typedef.js').ImageMeta | import('@hkdigital/lib-sveltekit/config/typedef.js').ImageMeta[],
+   *   imageMeta?: import('../../typedef').ImageSource,
    *   slideDuration?: number,
    *   nextSlideLabel?: string,
    *   presenter?: { gotoSlide: (name: string) => void, getCurrentSlideName: () => string },
@@ -53,7 +53,7 @@
   });
 </script>
 
-<div class="absolute inset-0" class:invisible={!show}>
+<div class="justify-self-stretch self-stretch grid" class:invisible={!show}>
   <ImageBox
     {imageMeta}
     {fit}

package/dist/features/presenter/ImageSlide.svelte.d.ts

@@ -3,7 +3,7 @@ type ImageSlide = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
         [attr: string]: any;
-        imageMeta?: any;
+        imageMeta?: ImageSource;
         slideDuration?: number;
         nextSlideLabel?: string;
         presenter?: {
@@ -20,7 +20,7 @@ type ImageSlide = {
 };
 declare const ImageSlide: import("svelte").Component<{
     [attr: string]: any;
-    imageMeta?: any | any[];
+    imageMeta?: import("../../typedef").ImageSource;
     slideDuration?: number;
     nextSlideLabel?: string;
     presenter?: {

package/dist/features/presenter/Presenter.svelte

@@ -109,8 +109,9 @@
   });
 </script>
 
-<GridLayers data-component="presenter" {classes}>
+<GridLayers data-feature="presenter" {classes}>
   <div
+    data-layer="layer1"
     style:z-index={presenter.layerA.z}
     style:visibility={presenter.layerA.visible ? 'visible' : 'hidden'}
     inert={presenter.busy}
@@ -122,6 +123,7 @@
   </div>
 
   <div
+    data-layer="layer2"
     style:z-index={presenter.layerB.z}
     style:visibility={presenter.layerB.visible ? 'visible' : 'hidden'}
     inert={presenter.busy}
@@ -133,7 +135,7 @@
   </div>
 
   {#if loadingSnippet && presenter.loadingSpinner}
-    <div class="h-full w-full" style="z-index:20;">
+    <div class="justify-self-stretch self-stretch overflow-hidden grid z-[20]">
       {@render loadingSnippet()}
     </div>
   {/if}

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

@@ -7,10 +7,9 @@
   }
 
   [data-component='draggable']:not(.state-dragging):not(.state-drag-disabled) {
-    cursor: grab;  /* Open hand when hovering draggable items */
+    cursor: grab; /* Open hand when hovering draggable items */
   }
 
-
   /*[data-component='draggable']:active {
     cursor: grabbing;
   }*/
@@ -42,6 +41,20 @@
     filter: grayscale(0.5);
   }
 
+  /* Preview follower */
+
+  [data-companion='drag-preview-follower'] {
+    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/
+  }
+
+  [data-companion='drag-preview-follower'].state-can-drop {
+    box-shadow: 0 0 12px rgba(74, 222, 128, 0.5);
+  }
+
+  [data-companion='drag-preview-follower'].state-cannot-drop {
+    box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
+  }
+
   /* Animations */
   @keyframes drop-finish {
     0% {
@@ -57,8 +70,4 @@
       opacity: 1;
     }
   }
-
-  & [data-companion="drag-preview-follower"] {
-    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
-  }
 }

package/package.json

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

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

@@ -1,167 +0,0 @@
-<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>