@hkdigital/lib-core 0.3.10 → 0.3.11

package/dist/{primitives → ui/primitives}/layout/grid-layers/util.js

@@ -1,74 +1,74 @@
-// lib/primitives/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 };
-}
+// lib/primitives/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/{primitives → ui/primitives}/layout/index.js

@@ -1 +1 @@
-export { default as GridLayers } from './grid-layers/GridLayers.svelte';
+export { default as GridLayers } from './grid-layers/GridLayers.svelte';

package/dist/{primitives → ui/primitives}/panels/index.js

@@ -1 +1 @@
-export { default as Panel } from './panel/Panel.svelte';
+export { default as Panel } from './panel/Panel.svelte';

package/dist/{primitives → ui/primitives}/panels/panel/Panel.svelte

@@ -1,43 +1,43 @@
-<script>
-  /**
-   * @example
-   *
-   *
-   */
-
-  /**
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   classes?: string,
-   *   width?: 'sm' | 'md' | 'lg',
-   *   variant?: string,
-   *   children?: import('svelte').Snippet,
-   * } & { [attr: string]: any }}
-   */
-  const {
-    // Style
-    base,
-    bg,
-    classes,
-
-    width = 'md',
-    variant = 'light',
-
-    // Snippets
-    children,
-
-    // Attributes
-    ...attrs
-  } = $props();
-</script>
-
-<div
-  data-component="panel"
-  data-width={width}
-  data-variant={variant}
-  class="{base} {bg} {classes}"
-  {...attrs}
->
-  {@render children()}
-</div>
+<script>
+  /**
+   * @example
+   *
+   *
+   */
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   classes?: string,
+   *   width?: 'sm' | 'md' | 'lg',
+   *   variant?: string,
+   *   children?: import('svelte').Snippet,
+   * } & { [attr: string]: any }}
+   */
+  const {
+    // Style
+    base,
+    bg,
+    classes,
+
+    width = 'md',
+    variant = 'light',
+
+    // Snippets
+    children,
+
+    // Attributes
+    ...attrs
+  } = $props();
+</script>
+
+<div
+  data-component="panel"
+  data-width={width}
+  data-variant={variant}
+  class="{base} {bg} {classes}"
+  {...attrs}
+>
+  {@render children()}
+</div>

package/dist/{primitives → ui/primitives}/rows/index.js

@@ -1,3 +1,3 @@
-export { default as PanelGridRow } from './panel-grid-row/PanelGridRow.svelte';
-
-export { default as PanelRow2 } from './panel-row-2/PanelRow2.svelte';
+export { default as PanelGridRow } from './panel-grid-row/PanelGridRow.svelte';
+
+export { default as PanelRow2 } from './panel-row-2/PanelRow2.svelte';

package/dist/{primitives → ui/primitives}/rows/panel-grid-row/PanelGridRow.svelte

@@ -1,104 +1,104 @@
-<script>
-  /**
-   * @example
-   *
-   */
-
-  /**
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   justify?: 'start'|'center'|'end'|'between'|'around'|'evenly'|'stretch'|'normal',
-   *   justifyItems?: 'start'|'center'|'end'|'stretch',
-   *   gap?: string,
-   *   classes?: string,
-   *   children?: import('svelte').Snippet,
-   * } & { [attr: string]: any }}
-   */
-  const {
-    // Style
-    base,
-    bg,
-    justify,
-    justifyItems,
-    flow = 'col',
-    gap,
-    classes,
-
-    // Snippets
-    children,
-
-    // Attributes
-    ...attrs
-  } = $props();
-
-  let colsCls = $derived.by(() => {
-    //
-    // The CSS classes to apply for the desired column layout
-    //
-    let out = '';
-
-    /* @note justify-end won't work with auto-cols-fr! */
-
-    if (justifyItems && justify !== 'end') {
-      out += 'auto-cols-fr';
-    } else {
-      out += 'auto-cols-auto';
-    }
-
-    if (flow) {
-      out += ` grid-flow-${flow}`;
-    }
-
-    // TODO: CSS for a specific number of columns
-
-    return out.replace(/\s{2,}/g, ' ').trim();
-  });
-
-  let justifyCls = $derived.by(() => {
-    //
-    // Determine justify classes
-    //
-    if (justify) {
-      return `justify-${justify}`;
-    }
-
-    return '';
-  });
-
-  let justifyItemsCls = $derived.by(() => {
-    //
-    // Determine justify-items classes
-    //
-    if (justifyItems) {
-      return `justify-items-${justifyItems}`;
-    }
-
-    return '';
-  });
-</script>
-
-<div
-  data-row="panel-grid-row"
-  class="{base} {bg} {gap} {classes} grid {colsCls} {justifyCls} {justifyItemsCls}"
-  {...attrs}
->
-  {@render children()}
-</div>
-
-<style>
-  /* This rule makes justify-items-start behave like
-     justify-items-center and justify-items-end */
-  /*[data-row='panel-grid-row'] {
-    & > :global(*) {
-      width: fit-content;
-      height: fit-content;
-    }
-  }*/
-
-  /*[data-row='panel-grid-row'] {
-    & > :global(*) {
-      min-width: 0;
-    }
-  }*/
-</style>
+<script>
+  /**
+   * @example
+   *
+   */
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   justify?: 'start'|'center'|'end'|'between'|'around'|'evenly'|'stretch'|'normal',
+   *   justifyItems?: 'start'|'center'|'end'|'stretch',
+   *   gap?: string,
+   *   classes?: string,
+   *   children?: import('svelte').Snippet,
+   * } & { [attr: string]: any }}
+   */
+  const {
+    // Style
+    base,
+    bg,
+    justify,
+    justifyItems,
+    flow = 'col',
+    gap,
+    classes,
+
+    // Snippets
+    children,
+
+    // Attributes
+    ...attrs
+  } = $props();
+
+  let colsCls = $derived.by(() => {
+    //
+    // The CSS classes to apply for the desired column layout
+    //
+    let out = '';
+
+    /* @note justify-end won't work with auto-cols-fr! */
+
+    if (justifyItems && justify !== 'end') {
+      out += 'auto-cols-fr';
+    } else {
+      out += 'auto-cols-auto';
+    }
+
+    if (flow) {
+      out += ` grid-flow-${flow}`;
+    }
+
+    // TODO: CSS for a specific number of columns
+
+    return out.replace(/\s{2,}/g, ' ').trim();
+  });
+
+  let justifyCls = $derived.by(() => {
+    //
+    // Determine justify classes
+    //
+    if (justify) {
+      return `justify-${justify}`;
+    }
+
+    return '';
+  });
+
+  let justifyItemsCls = $derived.by(() => {
+    //
+    // Determine justify-items classes
+    //
+    if (justifyItems) {
+      return `justify-items-${justifyItems}`;
+    }
+
+    return '';
+  });
+</script>
+
+<div
+  data-row="panel-grid-row"
+  class="{base} {bg} {gap} {classes} grid {colsCls} {justifyCls} {justifyItemsCls}"
+  {...attrs}
+>
+  {@render children()}
+</div>
+
+<style>
+  /* This rule makes justify-items-start behave like
+     justify-items-center and justify-items-end */
+  /*[data-row='panel-grid-row'] {
+    & > :global(*) {
+      width: fit-content;
+      height: fit-content;
+    }
+  }*/
+
+  /*[data-row='panel-grid-row'] {
+    & > :global(*) {
+      min-width: 0;
+    }
+  }*/
+</style>

package/dist/{primitives → ui/primitives}/rows/panel-row-2/PanelRow2.svelte

@@ -1,40 +1,40 @@
-<script>
-  import { PanelGridRow } from '../index.js';
-
-  /**
-   * @example
-   */
-
-  /**
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   justify?: 'start'|'center'|'end'|'between'|'around'|'evenly'|'stretch'|'normal',
-   *   justifyItems?: 'start'|'center'|'end'|'stretch',
-   *   gap?: string,
-   *   classes?: string,
-   *   children?: import('svelte').Snippet,
-   * } & { [attr: string]: any }}
-   */
-  const {
-    // Style
-    // base,
-    // bg,
-    // justify,
-    // justifyItems,
-    // flow = 'col',
-    // gap,
-    // classes,
-
-    // // Snippets
-    // children,
-
-    // Attributes
-    ...attrs
-  } = $props();
-</script>
-
-<!-- class="test-small mb-8p mt-8 grid auto-cols-fr grid-flow-col justify-stretch gap-20p" -->
-
-<PanelGridRow data-wrapper="panel-row-2" gap="gap-20p" {...attrs}
-></PanelGridRow>
+<script>
+  import { PanelGridRow } from '../index.js';
+
+  /**
+   * @example
+   */
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   justify?: 'start'|'center'|'end'|'between'|'around'|'evenly'|'stretch'|'normal',
+   *   justifyItems?: 'start'|'center'|'end'|'stretch',
+   *   gap?: string,
+   *   classes?: string,
+   *   children?: import('svelte').Snippet,
+   * } & { [attr: string]: any }}
+   */
+  const {
+    // Style
+    // base,
+    // bg,
+    // justify,
+    // justifyItems,
+    // flow = 'col',
+    // gap,
+    // classes,
+
+    // // Snippets
+    // children,
+
+    // Attributes
+    ...attrs
+  } = $props();
+</script>
+
+<!-- class="test-small mb-8p mt-8 grid auto-cols-fr grid-flow-col justify-stretch gap-20p" -->
+
+<PanelGridRow data-wrapper="panel-row-2" gap="gap-20p" {...attrs}
+></PanelGridRow>

package/dist/{primitives → ui/primitives}/tab-bar/HkTabBar.state.svelte.d.ts

@@ -48,7 +48,7 @@ export class HkTabBarState {
      */
     linkTab(index: number, tabElement: HTMLElement): void;
 }
-export const createOrGetState: (contextKey?: import("../../typedef/context.js").ContextKey) => HkTabBarState;
-export const createState: (contextKey?: import("../../typedef/context.js").ContextKey) => HkTabBarState;
-export const getState: (contextKey?: import("../../typedef/context.js").ContextKey) => HkTabBarState;
+export const createOrGetState: (contextKey?: import("../../../typedef/context.js").ContextKey) => HkTabBarState;
+export const createState: (contextKey?: import("../../../typedef/context.js").ContextKey) => HkTabBarState;
+export const getState: (contextKey?: import("../../../typedef/context.js").ContextKey) => HkTabBarState;
 export type Tab = import("./typedef.js").Tab;