@hkdigital/lib-core 0.3.11 → 0.3.12

package/dist/ui/primitives/buttons/button/Button.svelte

@@ -1,82 +1,82 @@
-<script>
-  import { toStateClasses } from '../../../../design/index.js';
-
-  /**
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   classes?: string,
-   *   type?: string,
-   *   role?: 'primary' | 'secondary' | 'tertiary' | 'custom',
-   *   size?: 'sm' | 'md' | 'lg',
-   *   variant?: string,
-   *   mode?: 'light'|'dark'
-   *   buttonType?: 'button' | 'submit' | 'reset',
-   *   active?: boolean,
-   *   selected?: boolean,
-   *   loading?: boolean,
-   *   error?: boolean,
-   *   disabled?: boolean,
-   *   snippetLoading?: import('svelte').Snippet,
-   *   snippetError?: import('svelte').Snippet,
-   *   children: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  const {
-    // Style
-    base,
-    bg,
-    classes,
-
-    type = '',
-    role = 'primary',
-    size = 'md',
-    variant = '',
-    mode = 'light',
-
-    buttonType = 'button',
-
-    // States
-    active = $bindable(false),
-    selected = $bindable(false),
-    loading = $bindable(false),
-    error = $bindable(false),
-    disabled = $bindable(false),
-
-    // Snippets
-    snippetLoading,
-    snippetError,
-    children,
-
-    // Attributes
-    ...attrs
-  } = $props();
-
-  let stateClasses = $derived.by(() => {
-    return toStateClasses({ active, selected, loading, error, disabled });
-  });
-</script>
-
-<button
-  data-component="button"
-  data-type={type}
-  data-role={role}
-  data-size={size}
-  data-variant={variant}
-  data-mode={mode}
-  type={buttonType}
-  class="{base} {bg} {classes} {stateClasses}"
-  disabled={disabled || loading}
-  aria-busy={loading}
-  aria-pressed={selected}
-  {...attrs}
->
-  {#if loading && snippetLoading}
-    {@render snippetLoading()}
-  {:else if error && snippetError}
-    {@render snippetError()}
-  {:else}
-    {@render children()}
-  {/if}
-</button>
+<script>
+  import { toStateClasses } from '../../../../design/index.js';
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   classes?: string,
+   *   type?: string,
+   *   role?: 'primary' | 'secondary' | 'tertiary' | 'custom',
+   *   size?: 'sm' | 'md' | 'lg',
+   *   variant?: string,
+   *   mode?: 'light'|'dark'
+   *   buttonType?: 'button' | 'submit' | 'reset',
+   *   active?: boolean,
+   *   selected?: boolean,
+   *   loading?: boolean,
+   *   error?: boolean,
+   *   disabled?: boolean,
+   *   snippetLoading?: import('svelte').Snippet,
+   *   snippetError?: import('svelte').Snippet,
+   *   children: import('svelte').Snippet,
+   *   [key: string]: any
+   * }}
+   */
+  const {
+    // Style
+    base,
+    bg,
+    classes,
+
+    type = '',
+    role = 'primary',
+    size = 'md',
+    variant = '',
+    mode = 'light',
+
+    buttonType = 'button',
+
+    // States
+    active = $bindable(false),
+    selected = $bindable(false),
+    loading = $bindable(false),
+    error = $bindable(false),
+    disabled = $bindable(false),
+
+    // Snippets
+    snippetLoading,
+    snippetError,
+    children,
+
+    // Attributes
+    ...attrs
+  } = $props();
+
+  let stateClasses = $derived.by(() => {
+    return toStateClasses({ active, selected, loading, error, disabled });
+  });
+</script>
+
+<button
+  data-component="button"
+  data-type={type}
+  data-role={role}
+  data-size={size}
+  data-variant={variant}
+  data-mode={mode}
+  type={buttonType}
+  class="{base} {bg} {classes} {stateClasses}"
+  disabled={disabled || loading}
+  aria-busy={loading}
+  aria-pressed={selected}
+  {...attrs}
+>
+  {#if loading && snippetLoading}
+    {@render snippetLoading()}
+  {:else if error && snippetError}
+    {@render snippetError()}
+  {:else}
+    {@render children()}
+  {/if}
+</button>

package/dist/ui/primitives/buttons/button-icon-steeze/SteezeIconButton.svelte

@@ -1,30 +1,30 @@
-<script>
-  import Button from '../button/Button.svelte';
-
-  import { SteezeIcon } from '../../icons/index.js';
-
-  /**
-   * @type {{
-   *   src: import('../../icons/typedef.js').IconSource,
-   *   iconSize?: string,
-   *   theme?: string,
-   *   [key: string]: any
-   * }}
-   */
-  const {
-    // Icon
-    src,
-    iconSize,
-    theme,
-
-    // Snippets
-    children,
-
-    // Attributes
-    ...attrs
-  } = $props();
-</script>
-
-<Button type="icon-steeze" {...attrs}>
-  <SteezeIcon {src} size={iconSize} {theme} />
-</Button>
+<script>
+  import Button from '../button/Button.svelte';
+
+  import { SteezeIcon } from '../../icons/index.js';
+
+  /**
+   * @type {{
+   *   src: import('../../icons/typedef.js').IconSource,
+   *   iconSize?: string,
+   *   theme?: string,
+   *   [key: string]: any
+   * }}
+   */
+  const {
+    // Icon
+    src,
+    iconSize,
+    theme,
+
+    // Snippets
+    children,
+
+    // Attributes
+    ...attrs
+  } = $props();
+</script>
+
+<Button type="icon-steeze" {...attrs}>
+  <SteezeIcon {src} size={iconSize} {theme} />
+</Button>

package/dist/ui/primitives/buttons/button-text/TextButton.svelte

@@ -1,21 +1,21 @@
-<script>
-  import Button from '../button/Button.svelte';
-
-  /**
-   * @type {{
-   *   children: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  const {
-    // Snippets
-    children,
-
-    // Attributes
-    ...attrs
-  } = $props();
-</script>
-
-<Button type="text" {...attrs}>
-  {@render children()}
-</Button>
+<script>
+  import Button from '../button/Button.svelte';
+
+  /**
+   * @type {{
+   *   children: import('svelte').Snippet,
+   *   [key: string]: any
+   * }}
+   */
+  const {
+    // Snippets
+    children,
+
+    // Attributes
+    ...attrs
+  } = $props();
+</script>
+
+<Button type="text" {...attrs}>
+  {@render children()}
+</Button>

package/dist/ui/primitives/buttons/index.js

@@ -1,3 +1,3 @@
-export { default as Button } from './button/Button.svelte';
-export { default as TextButton } from './button-text/TextButton.svelte';
-export { default as SteezeIconButton } from './button-icon-steeze/SteezeIconButton.svelte';
+export { default as Button } from './button/Button.svelte';
+export { default as TextButton } from './button-text/TextButton.svelte';
+export { default as SteezeIconButton } from './button-icon-steeze/SteezeIconButton.svelte';

package/dist/ui/primitives/debug/debug-panel-design-scaling/DebugPanelDesignScaling.svelte

@@ -1,146 +1,146 @@
-<script>
-  import { onMount } from 'svelte';
-  import { DESIGN, CLAMPING } from '../../../../design/config/design-config.js';
-  import {
-    enableScalingUI,
-    getAllRootScalingVars
-  } from '../../../../design/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/config/design-config.js';
+  import {
+    enableScalingUI,
+    getAllRootScalingVars
+  } from '../../../../design/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/ui/primitives/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/ui/primitives/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;
+    }
+  }
+}