@hkdigital/lib-core 0.3.11 → 0.3.13

package/dist/ui/components/virtual-viewport/VirtualViewport.svelte

@@ -1,196 +1,196 @@
-<script>
-  import { onMount } from 'svelte';
-  import {
-    getRootCssDesignWidth,
-    getRootCssDesignHeight,
-    getClampParams,
-    clamp
-  } from '../../../design/index.js';
-
-  /**
-   * Virtual viewport component that creates a container with its own scaling
-   * system based on its actual dimensions.
-   *
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   classes?: string,
-   *   width?: string,
-   *   height?: string,
-   *   overflow?: string,
-   *   designWidth?: number,
-   *   designHeight?: number,
-   *   scaleViewport?: number,
-   *   scaleW?: number,
-   *   scaleH?: number,
-   *   scaleUI?: number,
-   *   scaleTextBase?: number,
-   *   scaleTextHeading?: number,
-   *   scaleTextUI?: number,
-   *   children?: import('svelte').Snippet,
-   *   [attr: string]: any
-   * }}
-   */
-  let {
-    // Style related props first
-    base,
-    bg,
-    classes,
-    width,
-    height,
-    overflow = 'overflow-clip',
-
-    // Functional bindable props
-    designWidth = $bindable(0),
-    designHeight = $bindable(0),
-    scaleViewport = $bindable(0),
-    scaleW = $bindable(0),
-    scaleH = $bindable(0),
-    scaleUI = $bindable(0),
-    scaleTextBase = $bindable(0),
-    scaleTextHeading = $bindable(0),
-    scaleTextUI = $bindable(0),
-
-    // Snippets
-    children,
-
-    // Rest of attributes
-    ...attrs
-  } = $props();
-
-  /**
-   * References to the container element for measurement
-   * @type {HTMLDivElement}
-   */
-  let container;
-
-  /**
-   * Current scaling variables
-   */
-  let scaleVars = $state('');
-
-  // No separate variables for design dimensions
-
-  /**
-   * Error state for CSS variable parsing
-   */
-  let cssParsingError = $state(null);
-
-  /**
-   * Update scaling based on current dimensions
-   */
-  function updateScaling() {
-    if (!container) return;
-
-    // Get actual container dimensions
-    const rect = container.getBoundingClientRect();
-    const containerWidth = rect.width;
-    const containerHeight = rect.height;
-
-    // Calculate ratios similar to root variables
-    scaleW = containerWidth / designWidth;
-    scaleH = containerHeight / designHeight;
-
-    // Use the smaller ratio to ensure content fits
-    scaleViewport = Math.min(scaleW, scaleH);
-
-    try {
-      // Get clamp parameters from CSS variables
-      const uiParams = getClampParams('scale-ui');
-      const baseParams = getClampParams('scale-text-base');
-      const headingParams = getClampParams('scale-text-heading');
-      const textUIParams = getClampParams('scale-text-ui');
-
-      // Apply scaling according to extracted clamp parameters
-      scaleUI = clamp(uiParams.min, scaleViewport, uiParams.max);
-
-      scaleTextBase = clamp(baseParams.min, scaleViewport, baseParams.max);
-      scaleTextHeading = clamp(
-        headingParams.min,
-        scaleViewport,
-        headingParams.max
-      );
-      scaleTextUI = clamp(textUIParams.min, scaleViewport, textUIParams.max);
-
-      // Clear any previous error
-      cssParsingError = null;
-    } catch (error) {
-      // Store the error for debugging
-      cssParsingError = error;
-      console.error('VirtualViewport scaling error:', error);
-
-      // Fallback to simple scaling without clamping
-      scaleUI = scaleViewport;
-      scaleTextBase = scaleViewport;
-      scaleTextHeading = scaleViewport;
-      scaleTextUI = scaleViewport;
-    }
-
-    // Update the style variables
-    scaleVars = `
-      --scale-w: ${scaleW};
-      --scale-h: ${scaleH};
-      --scale-viewport: ${scaleViewport};
-      --scale-ui: ${scaleUI};
-      --scale-text-base: ${scaleTextBase};
-      --scale-text-heading: ${scaleTextHeading};
-      --scale-text-ui: ${scaleTextUI};
-    `;
-  }
-
-  // Watch for changes and update scaling
-  $effect(() => {
-    updateScaling();
-  });
-
-  onMount(() => {
-    try {
-      // Get design dimensions from CSS variables if props are zero
-      if (designWidth === 0) {
-        designWidth = getRootCssDesignWidth() ?? 1920;
-      }
-
-      if (designHeight === 0) {
-        designHeight = getRootCssDesignHeight() ?? 1080;
-      }
-
-      // Initial calculation
-      updateScaling();
-
-      // Set up ResizeObserver to update scaling when container size changes
-      const resizeObserver = new ResizeObserver(() => {
-        updateScaling();
-      });
-
-      resizeObserver.observe(container);
-
-      // Clean up
-      return () => {
-        resizeObserver.disconnect();
-      };
-    } catch (error) {
-      cssParsingError = error;
-      console.error('VirtualViewport initialization error:', error);
-    }
-  });
-</script>
-
-<div
-  data-component="virtual-viewport"
-  bind:this={container}
-  class="{base} {bg} {width} {height} {overflow} {classes}"
-  style={scaleVars}
-  style:width={width ? width : '100%'}
-  style:height={height ? height : '100%'}
-  {...attrs}
->
-  {#if cssParsingError}
-    <!-- Add a discreet error indicator for development -->
-    <div
-      class="absolute top-0 right-0 p-1 text-red-500 text-xs bg-black bg-opacity-50 rounded-bl"
-    >
-      CSS Parsing Error
-    </div>
-  {/if}
-  {@render children()}
-</div>
+<script>
+  import { onMount } from 'svelte';
+  import {
+    getRootCssDesignWidth,
+    getRootCssDesignHeight,
+    getClampParams,
+    clamp
+  } from '../../../design/index.js';
+
+  /**
+   * Virtual viewport component that creates a container with its own scaling
+   * system based on its actual dimensions.
+   *
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   classes?: string,
+   *   width?: string,
+   *   height?: string,
+   *   overflow?: string,
+   *   designWidth?: number,
+   *   designHeight?: number,
+   *   scaleViewport?: number,
+   *   scaleW?: number,
+   *   scaleH?: number,
+   *   scaleUI?: number,
+   *   scaleTextBase?: number,
+   *   scaleTextHeading?: number,
+   *   scaleTextUI?: number,
+   *   children?: import('svelte').Snippet,
+   *   [attr: string]: any
+   * }}
+   */
+  let {
+    // Style related props first
+    base,
+    bg,
+    classes,
+    width,
+    height,
+    overflow = 'overflow-clip',
+
+    // Functional bindable props
+    designWidth = $bindable(0),
+    designHeight = $bindable(0),
+    scaleViewport = $bindable(0),
+    scaleW = $bindable(0),
+    scaleH = $bindable(0),
+    scaleUI = $bindable(0),
+    scaleTextBase = $bindable(0),
+    scaleTextHeading = $bindable(0),
+    scaleTextUI = $bindable(0),
+
+    // Snippets
+    children,
+
+    // Rest of attributes
+    ...attrs
+  } = $props();
+
+  /**
+   * References to the container element for measurement
+   * @type {HTMLDivElement}
+   */
+  let container;
+
+  /**
+   * Current scaling variables
+   */
+  let scaleVars = $state('');
+
+  // No separate variables for design dimensions
+
+  /**
+   * Error state for CSS variable parsing
+   */
+  let cssParsingError = $state(null);
+
+  /**
+   * Update scaling based on current dimensions
+   */
+  function updateScaling() {
+    if (!container) return;
+
+    // Get actual container dimensions
+    const rect = container.getBoundingClientRect();
+    const containerWidth = rect.width;
+    const containerHeight = rect.height;
+
+    // Calculate ratios similar to root variables
+    scaleW = containerWidth / designWidth;
+    scaleH = containerHeight / designHeight;
+
+    // Use the smaller ratio to ensure content fits
+    scaleViewport = Math.min(scaleW, scaleH);
+
+    try {
+      // Get clamp parameters from CSS variables
+      const uiParams = getClampParams('scale-ui');
+      const baseParams = getClampParams('scale-text-base');
+      const headingParams = getClampParams('scale-text-heading');
+      const textUIParams = getClampParams('scale-text-ui');
+
+      // Apply scaling according to extracted clamp parameters
+      scaleUI = clamp(uiParams.min, scaleViewport, uiParams.max);
+
+      scaleTextBase = clamp(baseParams.min, scaleViewport, baseParams.max);
+      scaleTextHeading = clamp(
+        headingParams.min,
+        scaleViewport,
+        headingParams.max
+      );
+      scaleTextUI = clamp(textUIParams.min, scaleViewport, textUIParams.max);
+
+      // Clear any previous error
+      cssParsingError = null;
+    } catch (error) {
+      // Store the error for debugging
+      cssParsingError = error;
+      console.error('VirtualViewport scaling error:', error);
+
+      // Fallback to simple scaling without clamping
+      scaleUI = scaleViewport;
+      scaleTextBase = scaleViewport;
+      scaleTextHeading = scaleViewport;
+      scaleTextUI = scaleViewport;
+    }
+
+    // Update the style variables
+    scaleVars = `
+      --scale-w: ${scaleW};
+      --scale-h: ${scaleH};
+      --scale-viewport: ${scaleViewport};
+      --scale-ui: ${scaleUI};
+      --scale-text-base: ${scaleTextBase};
+      --scale-text-heading: ${scaleTextHeading};
+      --scale-text-ui: ${scaleTextUI};
+    `;
+  }
+
+  // Watch for changes and update scaling
+  $effect(() => {
+    updateScaling();
+  });
+
+  onMount(() => {
+    try {
+      // Get design dimensions from CSS variables if props are zero
+      if (designWidth === 0) {
+        designWidth = getRootCssDesignWidth() ?? 1920;
+      }
+
+      if (designHeight === 0) {
+        designHeight = getRootCssDesignHeight() ?? 1080;
+      }
+
+      // Initial calculation
+      updateScaling();
+
+      // Set up ResizeObserver to update scaling when container size changes
+      const resizeObserver = new ResizeObserver(() => {
+        updateScaling();
+      });
+
+      resizeObserver.observe(container);
+
+      // Clean up
+      return () => {
+        resizeObserver.disconnect();
+      };
+    } catch (error) {
+      cssParsingError = error;
+      console.error('VirtualViewport initialization error:', error);
+    }
+  });
+</script>
+
+<div
+  data-component="virtual-viewport"
+  bind:this={container}
+  class="{base} {bg} {width} {height} {overflow} {classes}"
+  style={scaleVars}
+  style:width={width ? width : '100%'}
+  style:height={height ? height : '100%'}
+  {...attrs}
+>
+  {#if cssParsingError}
+    <!-- Add a discreet error indicator for development -->
+    <div
+      class="absolute top-0 right-0 p-1 text-red-500 text-xs bg-black bg-opacity-50 rounded-bl"
+    >
+      CSS Parsing Error
+    </div>
+  {/if}
+  {@render children()}
+</div>

package/dist/ui/primitives/area/HkArea.svelte

@@ -1,49 +1,49 @@
-<script>
-  /**
-   * Area component
-   * An area is actually a DIV that can be styled and can contain content
-   *
-   * Following component guidelines from Skeleton
-   * @see https://next.skeleton.dev/docs/resources/contribute/components
-   */
-
-  /**
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   padding?: string,
-   *   margin?: string,
-   *   classes?: string,
-   *   style?: string,
-   *   children: import('svelte').Snippet
-   * } & { [attr: string]: any }}
-   */
-  let {
-    // Style
-    base,
-    bg,
-    padding,
-    margin,
-    classes,
-    style,
-
-    // Snippets
-    children,
-
-    // DOM Element
-    domElem = $bindable(),
-
-    // Attributes
-    ...attrs
-  } = $props();
-</script>
-
-<div
-  data-hk-area
-  class="{base} {bg} {padding} {margin} {classes}"
-  bind:this={domElem}
-  {style}
-  {...attrs}
->
-  {@render children()}
-</div>
+<script>
+  /**
+   * Area component
+   * An area is actually a DIV that can be styled and can contain content
+   *
+   * Following component guidelines from Skeleton
+   * @see https://next.skeleton.dev/docs/resources/contribute/components
+   */
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   padding?: string,
+   *   margin?: string,
+   *   classes?: string,
+   *   style?: string,
+   *   children: import('svelte').Snippet
+   * } & { [attr: string]: any }}
+   */
+  let {
+    // Style
+    base,
+    bg,
+    padding,
+    margin,
+    classes,
+    style,
+
+    // Snippets
+    children,
+
+    // DOM Element
+    domElem = $bindable(),
+
+    // Attributes
+    ...attrs
+  } = $props();
+</script>
+
+<div
+  data-hk-area
+  class="{base} {bg} {padding} {margin} {classes}"
+  bind:this={domElem}
+  {style}
+  {...attrs}
+>
+  {@render children()}
+</div>

package/dist/ui/primitives/area/HkGridArea.svelte

@@ -1,77 +1,77 @@
-<script>
-  /**
-   * Grid area component
-   * This component contains a DIV that has display: grid set. It is
-   * wrapped in a box which makes it possible to add box attributes
-   * such as margins.
-   *
-   * Following component guidelines from Skeleton
-   * @see https://next.skeleton.dev/docs/resources/contribute/components
-   */
-
-  import HkArea from './HkArea.svelte';
-
-  /**
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   padding?: string,
-   *   margin?: string,
-   *   classes?: string,
-   *   style?: string,
-   *   boxBase?: string,
-   *   boxBg?: string,
-   *   boxPadding?: string,
-   *   boxMargin?: string,
-   *   boxClasses?: string,
-   *   boxAttrs?: { [attr: string]: * },
-   *   children: import('svelte').Snippet
-   * } & { [attr: string]: any }}
-   */
-  let {
-    // Style
-    base,
-    bg,
-    padding,
-    margin,
-    classes,
-    style,
-    boxBase,
-    boxBg,
-    boxPadding,
-    boxMargin,
-    boxClasses,
-    boxAttrs,
-
-    // Snippets
-    children,
-
-    // DOM Element's
-    domElem = $bindable(),
-    boxDomElem = $bindable(),
-
-    // Attributes
-    ...attrs
-  } = $props();
-</script>
-
-<div
-  data-hk-grid-area-box
-  class="{boxBase} {boxBg} {boxPadding} {boxMargin} {boxClasses}"
-  {...boxAttrs}
-  bind:this={boxDomElem}
->
-  <HkArea
-    data-hk-grid-area
-    base="grid {base}"
-    bind:domElem
-    {bg}
-    {padding}
-    {margin}
-    {classes}
-    {style}
-    {...attrs}
-  >
-    {@render children()}
-  </HkArea>
-</div>
+<script>
+  /**
+   * Grid area component
+   * This component contains a DIV that has display: grid set. It is
+   * wrapped in a box which makes it possible to add box attributes
+   * such as margins.
+   *
+   * Following component guidelines from Skeleton
+   * @see https://next.skeleton.dev/docs/resources/contribute/components
+   */
+
+  import HkArea from './HkArea.svelte';
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   padding?: string,
+   *   margin?: string,
+   *   classes?: string,
+   *   style?: string,
+   *   boxBase?: string,
+   *   boxBg?: string,
+   *   boxPadding?: string,
+   *   boxMargin?: string,
+   *   boxClasses?: string,
+   *   boxAttrs?: { [attr: string]: * },
+   *   children: import('svelte').Snippet
+   * } & { [attr: string]: any }}
+   */
+  let {
+    // Style
+    base,
+    bg,
+    padding,
+    margin,
+    classes,
+    style,
+    boxBase,
+    boxBg,
+    boxPadding,
+    boxMargin,
+    boxClasses,
+    boxAttrs,
+
+    // Snippets
+    children,
+
+    // DOM Element's
+    domElem = $bindable(),
+    boxDomElem = $bindable(),
+
+    // Attributes
+    ...attrs
+  } = $props();
+</script>
+
+<div
+  data-hk-grid-area-box
+  class="{boxBase} {boxBg} {boxPadding} {boxMargin} {boxClasses}"
+  {...boxAttrs}
+  bind:this={boxDomElem}
+>
+  <HkArea
+    data-hk-grid-area
+    base="grid {base}"
+    bind:domElem
+    {bg}
+    {padding}
+    {margin}
+    {classes}
+    {style}
+    {...attrs}
+  >
+    {@render children()}
+  </HkArea>
+</div>

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

@@ -1,2 +1,2 @@
-export { default as HkArea } from './HkArea.svelte';
-export { default as HkGridArea } from './HkGridArea.svelte';
+export { default as HkArea } from './HkArea.svelte';
+export { default as HkGridArea } from './HkGridArea.svelte';