@hkdigital/lib-sveltekit 0.2.8 → 0.2.9

package/dist/components/debug/debug-panel-design-scaling/DebugPanelDesignScaling.svelte

@@ -1,146 +1,146 @@
-<script>
-  import { onMount } from 'svelte';
-  import { DESIGN, CLAMPING } from '../../../design/design-config.js';
-  import {
-    enableScalingUI,
-    getAllRootScalingVars
-  } from '../../../util/design-system/index.js';
-
-  /**
-   * Holds the current scaling values for the debug panel
-   * @type {Object}
-   */
-  let scalingValues = $state({
-    scaleW: 0,
-    scaleH: 0,
-    scaleViewport: 0,
-    scaleUI: 0,
-    scaleTextBase: 0,
-    scaleTextHeading: 0,
-    scaleTextUI: 0
-  });
-
-  /**
-   * Controls visibility of the debug panel
-   */
-  let showDebugPanel = $state(false);
-
-  /**
-   * Updates scaling values for the debug panel
-   */
-  function updateDebugValues() {
-    // Get scaling values
-    scalingValues = getAllRootScalingVars();
-
-    // Update window size display if in browser context
-    if (typeof window !== 'undefined') {
-      const windowSizeElement = document.getElementById('window-size');
-      if (windowSizeElement) {
-        windowSizeElement.textContent = `${window.innerWidth}×${window.innerHeight}px`;
-      }
-    }
-  }
-
-  onMount(() => {
-    // Initialize the design scaling system
-    //const cleanup = () => {};
-    const cleanup = enableScalingUI(DESIGN, CLAMPING);
-
-    // Update debug values initially
-    updateDebugValues();
-
-    // Set up event listener for updating debug values on resize
-    window.addEventListener('resize', updateDebugValues);
-
-    // Return combined cleanup function
-    return () => {
-      cleanup();
-      window.removeEventListener('resize', updateDebugValues);
-    };
-  });
-
-  /**
-   * Toggle debug panel visibility
-   */
-  function toggleDebugPanel() {
-    showDebugPanel = !showDebugPanel;
-  }
-
-  /**
-   * Format a number to 2 decimal places
-   * @param {number} value - The number to format
-   * @returns {string} Formatted number
-   */
-  function formatNumber(value) {
-    return value.toFixed(2);
-  }
-</script>
-
-<!-- Debug Panel -->
-{#if showDebugPanel}
-  <div
-    class="fixed bottom-0 right-0 bg-black bg-opacity-75 text-white p-2 text-ui-md z-50 font-mono"
-  >
-    <div class="flex justify-between items-center mb-1">
-      <h3 class="font-bold">Design System Scaling</h3>
-      <button
-        onclick={toggleDebugPanel}
-        class="ml-2 px-1.5 bg-gray-700 hover:bg-gray-600 rounded"
-      >
-        &times;
-      </button>
-    </div>
-    <div class="grid grid-cols-2 gap-x-2 gap-y-0.5">
-      <div class="text-gray-400">Design Width:</div>
-      <div>{DESIGN.width}px</div>
-
-      <div class="text-gray-400">Design Height:</div>
-      <div>{DESIGN.height}px</div>
-
-      <div class="text-gray-400">Window:</div>
-      <div id="window-size">...</div>
-
-      <div class="text-gray-400">Scale W:</div>
-      <div>{formatNumber(scalingValues.scaleW)}</div>
-
-      <div class="text-gray-400">Scale H:</div>
-      <div>{formatNumber(scalingValues.scaleH)}</div>
-
-      <div class="text-gray-400">Viewport:</div>
-      <div>{formatNumber(scalingValues.scaleViewport)}</div>
-
-      <div class="text-gray-400">UI:</div>
-      <div>{formatNumber(scalingValues.scaleUI)}</div>
-
-      <div class="text-gray-400">Text Content:</div>
-      <div>{formatNumber(scalingValues.scaleTextBase)}</div>
-
-      <div class="text-gray-400">Text Heading:</div>
-      <div>{formatNumber(scalingValues.scaleTextHeading)}</div>
-
-      <div class="text-gray-400">Text UI:</div>
-      <div>{formatNumber(scalingValues.scaleTextUI)}</div>
-    </div>
-
-    <div class="mt-1 pt-1 border-t border-gray-600 text-gray-400">
-      <div>Clamping:</div>
-      <div class="grid grid-cols-3 text-2xs">
-        <div>UI: {CLAMPING.ui.min} - {CLAMPING.ui.max}</div>
-        <div>
-          Content: {CLAMPING.textBase.min} - {CLAMPING.textBase.max}
-        </div>
-        <div>
-          Heading: {CLAMPING.textHeading.min} - {CLAMPING.textHeading.max}
-        </div>
-      </div>
-    </div>
-  </div>
-{:else}
-  <!-- Debug Panel Toggle Button -->
-  <button
-    onclick={toggleDebugPanel}
-    class="fixed bottom-0 right-0 bg-black bg-opacity-75 text-white p-16ut py-8ut text-ui-md z-50 font-mono hover:bg-opacity-90"
-  >
-    Show Debug
-  </button>
-{/if}
+<script>
+  import { onMount } from 'svelte';
+  import { DESIGN, CLAMPING } from '../../../design/design-config.js';
+  import {
+    enableScalingUI,
+    getAllRootScalingVars
+  } from '../../../util/design-system/index.js';
+
+  /**
+   * Holds the current scaling values for the debug panel
+   * @type {Object}
+   */
+  let scalingValues = $state({
+    scaleW: 0,
+    scaleH: 0,
+    scaleViewport: 0,
+    scaleUI: 0,
+    scaleTextBase: 0,
+    scaleTextHeading: 0,
+    scaleTextUI: 0
+  });
+
+  /**
+   * Controls visibility of the debug panel
+   */
+  let showDebugPanel = $state(false);
+
+  /**
+   * Updates scaling values for the debug panel
+   */
+  function updateDebugValues() {
+    // Get scaling values
+    scalingValues = getAllRootScalingVars();
+
+    // Update window size display if in browser context
+    if (typeof window !== 'undefined') {
+      const windowSizeElement = document.getElementById('window-size');
+      if (windowSizeElement) {
+        windowSizeElement.textContent = `${window.innerWidth}×${window.innerHeight}px`;
+      }
+    }
+  }
+
+  onMount(() => {
+    // Initialize the design scaling system
+    //const cleanup = () => {};
+    const cleanup = enableScalingUI(DESIGN, CLAMPING);
+
+    // Update debug values initially
+    updateDebugValues();
+
+    // Set up event listener for updating debug values on resize
+    window.addEventListener('resize', updateDebugValues);
+
+    // Return combined cleanup function
+    return () => {
+      cleanup();
+      window.removeEventListener('resize', updateDebugValues);
+    };
+  });
+
+  /**
+   * Toggle debug panel visibility
+   */
+  function toggleDebugPanel() {
+    showDebugPanel = !showDebugPanel;
+  }
+
+  /**
+   * Format a number to 2 decimal places
+   * @param {number} value - The number to format
+   * @returns {string} Formatted number
+   */
+  function formatNumber(value) {
+    return value.toFixed(2);
+  }
+</script>
+
+<!-- Debug Panel -->
+{#if showDebugPanel}
+  <div
+    class="fixed bottom-0 right-0 bg-black bg-opacity-75 text-white p-2 text-ui-md z-50 font-mono"
+  >
+    <div class="flex justify-between items-center mb-1">
+      <h3 class="font-bold">Design System Scaling</h3>
+      <button
+        onclick={toggleDebugPanel}
+        class="ml-2 px-1.5 bg-gray-700 hover:bg-gray-600 rounded"
+      >
+        &times;
+      </button>
+    </div>
+    <div class="grid grid-cols-2 gap-x-2 gap-y-0.5">
+      <div class="text-gray-400">Design Width:</div>
+      <div>{DESIGN.width}px</div>
+
+      <div class="text-gray-400">Design Height:</div>
+      <div>{DESIGN.height}px</div>
+
+      <div class="text-gray-400">Window:</div>
+      <div id="window-size">...</div>
+
+      <div class="text-gray-400">Scale W:</div>
+      <div>{formatNumber(scalingValues.scaleW)}</div>
+
+      <div class="text-gray-400">Scale H:</div>
+      <div>{formatNumber(scalingValues.scaleH)}</div>
+
+      <div class="text-gray-400">Viewport:</div>
+      <div>{formatNumber(scalingValues.scaleViewport)}</div>
+
+      <div class="text-gray-400">UI:</div>
+      <div>{formatNumber(scalingValues.scaleUI)}</div>
+
+      <div class="text-gray-400">Text Content:</div>
+      <div>{formatNumber(scalingValues.scaleTextBase)}</div>
+
+      <div class="text-gray-400">Text Heading:</div>
+      <div>{formatNumber(scalingValues.scaleTextHeading)}</div>
+
+      <div class="text-gray-400">Text UI:</div>
+      <div>{formatNumber(scalingValues.scaleTextUI)}</div>
+    </div>
+
+    <div class="mt-1 pt-1 border-t border-gray-600 text-gray-400">
+      <div>Clamping:</div>
+      <div class="grid grid-cols-3 text-2xs">
+        <div>UI: {CLAMPING.ui.min} - {CLAMPING.ui.max}</div>
+        <div>
+          Content: {CLAMPING.textBase.min} - {CLAMPING.textBase.max}
+        </div>
+        <div>
+          Heading: {CLAMPING.textHeading.min} - {CLAMPING.textHeading.max}
+        </div>
+      </div>
+    </div>
+  </div>
+{:else}
+  <!-- Debug Panel Toggle Button -->
+  <button
+    onclick={toggleDebugPanel}
+    class="fixed bottom-0 right-0 bg-black bg-opacity-75 text-white p-16ut py-8ut text-ui-md z-50 font-mono hover:bg-opacity-90"
+  >
+    Show Debug
+  </button>
+{/if}

package/dist/components/debug/index.js

@@ -1 +1 @@
-export { default as DebugPanelDesignScaling } from './debug-panel-design-scaling/DebugPanelDesignScaling.svelte';
+export { default as DebugPanelDesignScaling } from './debug-panel-design-scaling/DebugPanelDesignScaling.svelte';

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

@@ -1,44 +1,44 @@
-/**
- * Controller for customizing drag
- * E.g. set a custom preview image
- */
-export class DragController {
-  /**
-   * @param {DragEvent} event - The drag event
-   */
-  constructor(event) {
-    this.event = event;
-    this.dataTransfer = event.dataTransfer;
-    this.targetElement = /** @type {HTMLElement} */ (event.currentTarget);
-
-    // Calculate natural offsets by default (to prevent "jumping")
-    const rect = this.targetElement.getBoundingClientRect();
-    this.offsetX = event.clientX - rect.left;
-    this.offsetY = event.clientY - rect.top;
-  }
-
-  /**
-   * Apply the default preview (uses the draggable element itself)
-   * @returns {boolean}
-   */
-  applyDefaultPreview() {
-    if (
-      !this.dataTransfer ||
-      !this.dataTransfer.setDragImage
-    ) {
-      return false;
-    }
-
-    try {
-      this.dataTransfer.setDragImage(
-        this.targetElement,
-        this.offsetX,
-        this.offsetY
-      );
-      return true;
-    } catch (err) {
-      console.error('Failed to set default drag preview:', err);
-      return false;
-    }
-  }
-}
+/**
+ * Controller for customizing drag
+ * E.g. set a custom preview image
+ */
+export class DragController {
+  /**
+   * @param {DragEvent} event - The drag event
+   */
+  constructor(event) {
+    this.event = event;
+    this.dataTransfer = event.dataTransfer;
+    this.targetElement = /** @type {HTMLElement} */ (event.currentTarget);
+
+    // Calculate natural offsets by default (to prevent "jumping")
+    const rect = this.targetElement.getBoundingClientRect();
+    this.offsetX = event.clientX - rect.left;
+    this.offsetY = event.clientY - rect.top;
+  }
+
+  /**
+   * Apply the default preview (uses the draggable element itself)
+   * @returns {boolean}
+   */
+  applyDefaultPreview() {
+    if (
+      !this.dataTransfer ||
+      !this.dataTransfer.setDragImage
+    ) {
+      return false;
+    }
+
+    try {
+      this.dataTransfer.setDragImage(
+        this.targetElement,
+        this.offsetX,
+        this.offsetY
+      );
+      return true;
+    } catch (err) {
+      console.error('Failed to set default drag preview:', err);
+      return false;
+    }
+  }
+}

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

@@ -1,110 +1,112 @@
-<script>
-  import { createDragState } from './drag-state.svelte.js';
-
-  /**
-   * @type {{
-   *   contextKey?: import('../../typedef').ContextKey,
-   *   base?: string,
-   *   classes?: string,
-   *   children: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let { contextKey, base = '', classes = '', children, ...attrs } = $props();
-
-  // Create the state context at this level to ensure all children
-  // have access to the same state instance
-  const dragState = createDragState(contextKey);
-
-  /**
-   * Handle drag enter at context level
-   * @param {DragEvent} event
-   */
-  function onDragEnter(event) {
-    event.preventDefault();
-    dragState.updateActiveDropZone(event.clientX, event.clientY, event);
-  }
-
-/**
-   * Handle drag over at context level
-   * @param {DragEvent} event
-   */
-  function onDragOver(event) {
-    event.preventDefault();
-    dragState.updateActiveDropZone(event.clientX, event.clientY, event);
-
-    // Set appropriate drop effect based on current drag operation
-    if (dragState.isDragging()) {
-      const activeZone = dragState.activeDropZone;
-      if (activeZone) {
-        const config = dragState.dropZones.get(activeZone);
-        if (config?.canDrop) {
-          event.dataTransfer.dropEffect = 'move';
-        } else {
-          event.dataTransfer.dropEffect = 'none';
-        }
-      } else {
-        event.dataTransfer.dropEffect = 'none';
-      }
-    } else {
-      // No internal drag operation, might be file drag
-      event.dataTransfer.dropEffect = 'copy';
-    }
-  }
-
-  /**
-   * Handle drag leave at context level
-   * @param {DragEvent} event
-   */
-  function onDragLeave(event) {
-    // Only handle if we're leaving the entire context
-    const rect =
-      /** @type {Element} */ (event.currentTarget).getBoundingClientRect();
-
-
-    const x = event.clientX;
-    const y = event.clientY;
-
-    // Check if we're truly leaving the context bounds
-    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
-      dragState.updateActiveDropZone(-1, -1, event);
-    }
-  }
-
-  /**
-   * Handle drop at context level
-   * @param {DragEvent} event
-   */
-  function onDrop(event) {
-    event.preventDefault();
-    dragState.handleDropAtPoint(event.clientX, event.clientY, event);
-  }
-
-  /**
-   * Handle drag end to clean up
-   * @param {DragEvent} event
-   */
-  function onDragEnd(event) {
-    // This will trigger cleanup in drag state
-    dragState.updateActiveDropZone(-1, -1, event);
-  }
-</script>
-
-<div
-  data-component="drag-drop-context"
-  ondragenter={onDragEnter}
-  ondragover={onDragOver}
-  ondragleave={onDragLeave}
-  ondrop={onDrop}
-  ondragend={onDragEnd}
-  ontouchmove={(e) => {
-    // Prevent scrolling if we're dragging
-    if (dragState.isDragging()) {
-      e.preventDefault();
-    }
-  }}
-  class="{base} {classes}"
-  {...attrs}
->
-  {@render children()}
-</div>
+<script>
+  import { createDragState } from './drag-state.svelte.js';
+
+  import { activeDragOver, activeTouchMove } from './actions.js';
+
+  /**
+   * @type {{
+   *   contextKey?: import('../../typedef').ContextKey,
+   *   base?: string,
+   *   classes?: string,
+   *   children: import('svelte').Snippet,
+   *   [key: string]: any
+   * }}
+   */
+  let { contextKey, base = '', classes = '', children, ...attrs } = $props();
+
+  // Create the state context at this level to ensure all children
+  // have access to the same state instance
+  const dragState = createDragState(contextKey);
+
+  /**
+   * Handle drag enter at context level
+   * @param {DragEvent} event
+   */
+  function onDragEnter(event) {
+    event.preventDefault();
+    dragState.updateActiveDropZone(event.clientX, event.clientY, event);
+  }
+
+/**
+   * Handle drag over at context level
+   * @param {DragEvent} event
+   */
+  function onDragOver(event) {
+    event.preventDefault();
+    dragState.updateActiveDropZone(event.clientX, event.clientY, event);
+
+    // Set appropriate drop effect based on current drag operation
+    if (dragState.isDragging()) {
+      const activeZone = dragState.activeDropZone;
+      if (activeZone) {
+        const config = dragState.dropZones.get(activeZone);
+        if (config?.canDrop) {
+          event.dataTransfer.dropEffect = 'move';
+        } else {
+          event.dataTransfer.dropEffect = 'none';
+        }
+      } else {
+        event.dataTransfer.dropEffect = 'none';
+      }
+    } else {
+      // No internal drag operation, might be file drag
+      event.dataTransfer.dropEffect = 'copy';
+    }
+  }
+
+  /**
+   * Handle drag leave at context level
+   * @param {DragEvent} event
+   */
+  function onDragLeave(event) {
+    // Only handle if we're leaving the entire context
+    const rect =
+      /** @type {Element} */ (event.currentTarget).getBoundingClientRect();
+
+
+    const x = event.clientX;
+    const y = event.clientY;
+
+    // Check if we're truly leaving the context bounds
+    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
+      dragState.updateActiveDropZone(-1, -1, event);
+    }
+  }
+
+  /**
+   * Handle drop at context level
+   * @param {DragEvent} event
+   */
+  function onDrop(event) {
+    event.preventDefault();
+    dragState.handleDropAtPoint(event.clientX, event.clientY, event);
+  }
+
+  /**
+   * Handle drag end to clean up
+   * @param {DragEvent} event
+   */
+  function onDragEnd(event) {
+    // This will trigger cleanup in drag state
+    dragState.updateActiveDropZone(-1, -1, event);
+  }
+</script>
+
+<div
+  data-component="drag-drop-context"
+  ondragenter={onDragEnter}
+  use:activeDragOver={onDragOver}
+  ondragleave={onDragLeave}
+  ondrop={onDrop}
+  ondragend={onDragEnd}
+  use:activeTouchMove={(e) => {
+    // Prevent scrolling if we're dragging
+    if (dragState.isDragging()) {
+      e.preventDefault();
+    }
+  }}
+  class="{base} {classes}"
+  {...attrs}
+>
+  {@render children()}
+</div>