@hkdigital/lib-core 0.3.14 → 0.4.3

package/dist/design/tailwind-theme-extend.js

@@ -1,158 +0,0 @@
-/**
- * Design System Configuration
- * Using CSS Custom Properties (variables) for consistent scaling
- *
- * @note
- * The tailwind theme extensions require CSS custom
- * properties (variables) to be set at the root level
- * of your application to function properly.
- *
- * @example Implementation in SvelteKit +layout.svelte
- * <script>
- *   import { onMount } from 'svelte';
- *
- *   import '../app.css';
- *
- *   let { children } = $props();
- *
- *   import { DESIGN, CLAMPING }
- *     from './config/design-config.js';
- *
- *   import { rootDesignVarsHTML }
- *     from '@hkdigital/lib-core/design/utils/root-vars.js';
- * </script>
- *
- * <svelte:head>
- *   {@html rootDesignVarsHTML(DESIGN, CLAMPING)}
- * </svelte:head>
- *
- * Base units:
- * --scale-w: 0.052vw  (Viewport Width Point)
- * --scale-h: 0.09259vh (Viewport Height Point)
- * --scale-viewport: min(var(--scale-w), var(--scale-h)) (Viewport Point)
- * --scale-ui: clamp(0.3, var(--scale-viewport), 2) (UI Point)
- * --scale-text-base: clamp(0.75, var(--scale-viewport), 1.5) (Base Text)
- * --scale-text-heading: clamp(0.75, var(--scale-viewport), 2.25) (Heading Text)
- * --scale-text-ui: clamp(0.5, var(--scale-viewport), 1.25) (UI Text)
- *
- * --
- *
- * UI Points (up) - Clamped scaling values
- * Based on viewport scaling with minimum and maximum bounds
- * to ensure usability across all screen sizes
- *
- * > PREFERRED METHOD FOR UI ELEMENT SCALING
- *
- * Examples:
- * 5up  = 5px  at design size (clamps between 1.5px and 10px)
- * 10up = 10px at design size (clamps between 3px and 20px)
- * 20up = 20px at design size (clamps between 6px and 40px)
- *
- * Used for:
- * - Component padding and margins
- * - Interface element sizing
- * - Any UI element that needs responsive scaling with guardrails
- *
- * --
- *
- * Text-Based Spacing Units (ut, bt, ht)
- * Scaled by their respective text scaling variables
- *
- * > PREFERRED METHOD FOR TEXT-RELATED SPACING
- *
- * Examples:
- * 4ut = calc(4px * var(--scale-text-ui))       // UI text spacing
- * 4bt = calc(4px * var(--scale-text-base))  // Base text spacing
- * 4ht = calc(4px * var(--scale-text-heading))  // Heading text spacing
- *
- * Used for:
- * - ut: Button padding, form spacing, UI component margins
- * - bt: Paragraph margins, list spacing, base gaps
- * - ht: Heading margins, title spacing
- *
- * --
- *
- * Viewport Points (wp, hp) - Responsive scaling values
- * wp: Uses width-based scaling (1920px reference)
- * hp: Uses height-based scaling (1080px reference)
- *
- * > ALTERNATIVE SCALING METHODS
- *
- * Examples:
- * 10wp = calc(10px * var(--scale-w))
- * 10hp = calc(10px * var(--scale-h))
- *
- * Used for:
- * - Interface scaling that needs to fit both width and height
- * - Maintaining aspect ratio of design
- * - Preventing overflow in either direction
- */
-import {
-  generateTextBasedSpacing,
-  generateViewportBasedSpacing,
-  generateTextStyles,
-  generateBorderRadiusStyles,
-  generateWidthStyles
-} from './generators/index.js';
-
-import {
-  TEXT_POINT_SIZES,
-  VIEWPORT_POINT_SIZES,
-  TEXT_BASE_SIZES,
-  TEXT_HEADING_SIZES,
-  TEXT_UI_SIZES,
-  RADIUS_SIZES,
-  BORDER_WIDTH_SIZES,
-  STROKE_WIDTH_SIZES
-} from './config/design-config.js';
-
-/* == Internals */
-
-const TEXT_BASED_SPACING = generateTextBasedSpacing(TEXT_POINT_SIZES);
-const VIEWPORT_BASED_SPACING =
-  generateViewportBasedSpacing(VIEWPORT_POINT_SIZES);
-
-/* == Exports */
-
-export const spacing = {
-  ...VIEWPORT_BASED_SPACING,
-  ...TEXT_BASED_SPACING
-};
-
-export const fontSize = {
-  ...TEXT_BASED_SPACING,
-
-  // Named styles
-  ...generateTextStyles(TEXT_BASE_SIZES, 'base'),
-  ...generateTextStyles(TEXT_HEADING_SIZES, 'heading'),
-  ...generateTextStyles(TEXT_UI_SIZES, 'ui')
-};
-
-export const borderRadius = {
-  // Named styles
-  ...generateBorderRadiusStyles(RADIUS_SIZES)
-};
-
-export const borderWidth = {
-  // Named styles
-  ...generateWidthStyles(BORDER_WIDTH_SIZES, 'width')
-};
-
-export const strokeWidth = {
-  // Named styles
-  ...generateWidthStyles(STROKE_WIDTH_SIZES, 'width')
-};
-
-export const outlineWidth = {
-  // Named styles
-  ...generateWidthStyles(STROKE_WIDTH_SIZES, '')
-};
-
-export const outlineOffset = {
-  // Named styles
-  ...generateWidthStyles(STROKE_WIDTH_SIZES, '')
-};
-
-// console.log('borderWidth', borderWidth);
-// console.log('outlineWidth', outlineWidth);
-// console.log('outlineOffset', outlineOffset);

package/dist/errors/index.d.ts

@@ -1,5 +0,0 @@
-export * from "./api.js";
-export * from "./generic.js";
-export * from "./http.js";
-export * from "./jwt.js";
-export * from "./promise.js";

package/dist/errors/index.js

@@ -1,5 +0,0 @@
-export * from './api.js';
-export * from './generic.js';
-export * from './http.js';
-export * from './jwt.js';
-export * from './promise.js';

package/dist/logging/internal/factories/universal.d.ts

@@ -1,9 +0,0 @@
-/**
- * Create a logger that works in both server and client environments
- *
- * @param {string} serviceName - Name of the service
- * @param {string} [level] - Initial log level
- * @param {Object} [options] - Additional options
- * @returns {import('../logger').Logger} Configured logger instance
- */
-export function createLogger(serviceName: string, level?: string, options?: any): import("../logger").Logger;

package/dist/logging/internal/factories/universal.js

@@ -1,22 +0,0 @@
-/**
- * Universal logger factory that auto-detects environment
- */
-import { browser } from '$app/environment';
-import { createServerLogger } from './server.js';
-import { createClientLogger } from './client.js';
-
-/**
- * Create a logger that works in both server and client environments
- *
- * @param {string} serviceName - Name of the service
- * @param {string} [level] - Initial log level
- * @param {Object} [options] - Additional options
- * @returns {import('../logger').Logger} Configured logger instance
- */
-export function createLogger(serviceName, level, options = {}) {
-  if (browser) {
-    return createClientLogger(serviceName, level, options);
-  } else {
-    return createServerLogger(serviceName, level, options);
-  }
-}

package/dist/services/service-base/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./ServiceBase.js";
-export * from "./constants.js";
-export * from "./typedef.js";

package/dist/services/service-base/index.js

@@ -1,3 +0,0 @@
-export * from './ServiceBase.js';
-export * from './constants.js';
-export * from './typedef.js';

package/dist/states/index.d.ts

@@ -1 +0,0 @@
-export * from "./navigation.svelte.js";

package/dist/states/index.js

@@ -1 +0,0 @@
-export * from './navigation.svelte.js';

package/dist/stores/index.d.ts

@@ -1 +0,0 @@
-export * as theme from "./theme.js";

package/dist/stores/index.js

@@ -1 +0,0 @@
-export * as theme from './theme.js';

package/dist/typedef/index.d.ts

@@ -1,4 +0,0 @@
-export * from "./context.js";
-export * from "./drag.js";
-export * from "./drop.js";
-export * from "../network/typedef.js";

package/dist/typedef/index.js

@@ -1,4 +0,0 @@
-export * from './context.js';
-export * from './drag.js';
-export * from './drop.js';
-export * from '../network/typedef.js';

package/dist/ui/primitives/debug/index.d.ts

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

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

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

package/dist/ui/primitives/index.js

@@ -1,2 +0,0 @@
-// export * as area from "./area/index.js";
-// export * as icon from "./icon/index.js";

package/dist/ui/primitives/layout/grid-layers/GridLayers.svelte__heightFrom__

@@ -1,372 +0,0 @@
-<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/ui/primitives/layout/index.d.ts

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

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

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

package/dist/ui/primitives/tab-bar/HkTabBarSelector.state.svelte.d.ts

@@ -1,19 +0,0 @@
-export class HkTabBarSelectorState {
-    /** @type {HTMLElement|undefined} */
-    /** @type {number} */
-    selectorWidth: number;
-    selectorStyle: string;
-    /** @type {DOMRect[]} */
-    iconSizes: DOMRect[];
-    /**
-     * Link the tab bar selector to a tab bar state
-     *
-     * @param {import('./HkTabBar.svelte').TabBarState} tabBarState
-     */
-    linkToTabBarState(tabBarState: import("./HkTabBar.svelte").TabBarState): void;
-    tabBarState: any;
-    #private;
-}
-export const createOrGetState: (contextKey?: import("../../../typedef").ContextKey) => HkTabBarSelectorState;
-export const createState: (contextKey?: import("../../../typedef").ContextKey) => HkTabBarSelectorState;
-export const getState: (contextKey?: import("../../../typedef").ContextKey) => HkTabBarSelectorState;