@hkdigital/lib-core 0.3.1

package/dist/features/virtual-viewport/VirtualViewport.svelte

@@ -0,0 +1,196 @@
+<script>
+  import { onMount } from 'svelte';
+  import {
+    getRootCssDesignWidth,
+    getRootCssDesignHeight,
+    getClampParams,
+    clamp
+  } from '../../util/design-system/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/features/virtual-viewport/VirtualViewport.svelte.d.ts

@@ -0,0 +1,42 @@
+export default VirtualViewport;
+type VirtualViewport = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [attr: string]: any;
+        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?: Snippet<[]>;
+    }>): void;
+};
+declare const VirtualViewport: import("svelte").Component<{
+    [attr: string]: any;
+    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;
+}, {}, "designWidth" | "designHeight" | "scaleViewport" | "scaleW" | "scaleH" | "scaleUI" | "scaleTextBase" | "scaleTextHeading" | "scaleTextUI">;

package/dist/logging/adapters/console.d.ts

@@ -0,0 +1,48 @@
+/**
+ * (Browser) console adapter that uses native DevTools styling
+ */
+export class ConsoleAdapter {
+    /**
+     * Create a new ConsoleAdapter
+     *
+     * @param {Object} [options] - Browser configuration options
+     * @param {string} [options.level] - Minimum log level
+     * @param {Object} [options.context]
+     *   Additional context data to include with all logs
+     */
+    constructor(options?: {
+        level?: string;
+        context?: any;
+    });
+    level: string;
+    context: any;
+    /**
+     * Handle log events from Logger
+     *
+     * @param {Object} logEvent - Log event from Logger
+     */
+    handleLog(logEvent: any): void;
+    /**
+     * Get CSS styles for browser console
+     *
+     * @param {string} level - Log level
+     * @returns {string} CSS styles
+     * @private
+     */
+    private _getStyles;
+    /**
+     * Get appropriate console method for log level
+     *
+     * @param {string} level - Log level
+     * @returns {string} Console method name
+     * @private
+     */
+    private _getConsoleMethod;
+    /**
+     * Create a child logger with additional context
+     *
+     * @param {Object} context - Additional context data
+     * @returns {ConsoleAdapter} New adapter instance with context
+     */
+    child(context: any): ConsoleAdapter;
+}

package/dist/logging/adapters/console.js

@@ -0,0 +1,114 @@
+import { LEVELS } from '../constants.js';
+
+/**
+ * (Browser) console adapter that uses native DevTools styling
+ */
+export class ConsoleAdapter {
+  /**
+   * Create a new ConsoleAdapter
+   *
+   * @param {Object} [options] - Browser configuration options
+   * @param {string} [options.level] - Minimum log level
+   * @param {Object} [options.context]
+   *   Additional context data to include with all logs
+   */
+  constructor(options = {}) {
+    this.level = options.level || 'info';
+    this.context = options.context || {};
+  }
+
+  /**
+   * Handle log events from Logger
+   *
+   * @param {Object} logEvent - Log event from Logger
+   */
+  handleLog(logEvent) {
+    // eslint-disable-next-line no-unused-vars
+    const { level, message, details, source, timestamp } = logEvent;
+
+    // Filter by level
+    if (LEVELS[level] < LEVELS[this.level]) {
+      return;
+    }
+
+    // Use browser console styling
+    const styles = this._getStyles(level);
+    const prefix = `%c[${source}]`;
+
+    // Merge context with details
+    const logData = details
+      ? { ...this.context, ...details }
+      : Object.keys(this.context).length > 0
+        ? this.context
+        : undefined;
+
+    if (logData) {
+      console[this._getConsoleMethod(level)](prefix, styles, message, logData);
+    } else {
+      console[this._getConsoleMethod(level)](prefix, styles, message);
+    }
+  }
+
+  /**
+   * Get CSS styles for browser console
+   *
+   * @param {string} level - Log level
+   * @returns {string} CSS styles
+   * @private
+   */
+  _getStyles(level) {
+    const baseStyle =
+      'padding: 2px 4px; border-radius: 2px; font-weight: bold;';
+
+    switch (level) {
+      case 'debug':
+        return `${baseStyle} background: #e3f2fd; color: #1976d2;`;
+      case 'info':
+        return `${baseStyle} background: #e8f5e8; color: #2e7d32;`;
+      case 'warn':
+        return `${baseStyle} background: #fff3e0; color: #f57c00;`;
+      case 'error':
+        return `${baseStyle} background: #ffebee; color: #d32f2f;`;
+      case 'fatal':
+        return `${baseStyle} background: #d32f2f; color: white;`;
+      default:
+        return baseStyle;
+    }
+  }
+
+  /**
+   * Get appropriate console method for log level
+   *
+   * @param {string} level - Log level
+   * @returns {string} Console method name
+   * @private
+   */
+  _getConsoleMethod(level) {
+    switch (level) {
+      case 'debug':
+        return 'debug';
+      case 'info':
+        return 'info';
+      case 'warn':
+        return 'warn';
+      case 'error':
+      case 'fatal':
+        return 'error';
+      default:
+        return 'log';
+    }
+  }
+
+  /**
+   * Create a child logger with additional context
+   *
+   * @param {Object} context - Additional context data
+   * @returns {ConsoleAdapter} New adapter instance with context
+   */
+  child(context) {
+    return new ConsoleAdapter({
+      level: this.level,
+      context: { ...this.context, ...context }
+    });
+  }
+}

package/dist/logging/adapters/pino.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Pino adapter that bridges Logger events to pino
+ */
+export class PinoAdapter {
+    /**
+     * Create a new PinoAdapter
+     *
+     * @param {Object} [options] - Pino configuration options
+     */
+    constructor(options?: any);
+    pino: import("pino").Logger<never, boolean>;
+    /**
+     * Handle log events from Logger
+     *
+     * @param {Object} logEvent - Log event from Logger
+     */
+    handleLog(logEvent: any): void;
+    /**
+     * Create a child logger with additional context
+     *
+     * @param {Object} context - Additional context data
+     * @returns {PinoAdapter} New adapter instance with context
+     */
+    child(context: any): PinoAdapter;
+}

package/dist/logging/adapters/pino.js

@@ -0,0 +1,60 @@
+/**
+ * Pino adapter for server-side logging
+ */
+
+import pino from 'pino';
+import { dev } from '$app/environment';
+
+/**
+ * Pino adapter that bridges Logger events to pino
+ */
+export class PinoAdapter {
+  /**
+   * Create a new PinoAdapter
+   *
+   * @param {Object} [options] - Pino configuration options
+   */
+  constructor(options = {}) {
+    const defaultOptions = dev ? {
+      level: 'debug',
+      transport: {
+        target: 'pino-pretty',
+        options: {
+          colorize: true
+        }
+      }
+    } : {};
+
+    this.pino = pino({ ...defaultOptions, ...options });
+  }
+
+  /**
+   * Handle log events from Logger
+   *
+   * @param {Object} logEvent - Log event from Logger
+   */
+  handleLog(logEvent) {
+    const { level, message, details, source, timestamp } = logEvent;
+
+    const logData = {
+      source,
+      timestamp,
+      ...(details && { details })
+    };
+
+    this.pino[level](logData, message);
+  }
+
+  /**
+   * Create a child logger with additional context
+   *
+   * @param {Object} context - Additional context data
+   * @returns {PinoAdapter} New adapter instance with context
+   */
+  child(context) {
+    const childPino = this.pino.child(context);
+    const adapter = new PinoAdapter();
+    adapter.pino = childPino;
+    return adapter;
+  }
+}

package/dist/logging/constants.d.ts

@@ -0,0 +1 @@
+export * from "../classes/logging/constants.js";

package/dist/logging/constants.js

@@ -0,0 +1 @@
+export * from '../classes/logging/constants.js';

package/dist/logging/factories/client.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Create a client-side logger with console adapter
+ *
+ * @param {string} name
+ * @param {string} [level=INFO] - Initial log level
+ * @param {Object} [consoleOptions] - Additional console options
+ * @returns {Logger} Configured logger instance
+ */
+export function createClientLogger(name: string, level?: string, consoleOptions?: any): Logger;
+import { Logger } from '../../classes/logging';

package/dist/logging/factories/client.js

@@ -0,0 +1,21 @@
+import { Logger } from '../../classes/logging';
+import { ConsoleAdapter } from '../adapters/console.js';
+import { INFO } from '../constants.js';
+
+/**
+ * Create a client-side logger with console adapter
+ *
+ * @param {string} name
+ * @param {string} [level=INFO] - Initial log level
+ * @param {Object} [consoleOptions] - Additional console options
+ * @returns {Logger} Configured logger instance
+ */
+export function createClientLogger(name, level = INFO, consoleOptions = {}) {
+  const logger = new Logger(name, level);
+  const adapter = new ConsoleAdapter({ ...consoleOptions, level });
+
+  // Connect adapter to logger events
+  logger.on('log', (logEvent) => adapter.handleLog(logEvent));
+
+  return logger;
+}

package/dist/logging/factories/server.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Create a server-side logger with pino adapter
+ *
+ * @param {string} name
+ * @param {string} [level=INFO] - Initial log level
+ * @param {Object} [pinoOptions] - Additional pino options
+ * @returns {Logger} Configured logger instance
+ */
+export function createServerLogger(name: string, level?: string, pinoOptions?: any): Logger;
+import { Logger } from '../../classes/logging';

package/dist/logging/factories/server.js

@@ -0,0 +1,22 @@
+import { Logger } from '../../classes/logging';
+
+import { PinoAdapter } from '../adapters/pino.js';
+import { INFO } from '../constants.js';
+
+/**
+ * Create a server-side logger with pino adapter
+ *
+ * @param {string} name
+ * @param {string} [level=INFO] - Initial log level
+ * @param {Object} [pinoOptions] - Additional pino options
+ * @returns {Logger} Configured logger instance
+ */
+export function createServerLogger(name, level = INFO, pinoOptions = {}) {
+  const logger = new Logger(name, level);
+  const adapter = new PinoAdapter(pinoOptions);
+
+  // Connect adapter to logger events
+  logger.on('log', (logEvent) => adapter.handleLog(logEvent));
+
+  return logger;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * 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 {Logger} Configured logger instance
+ */
+export function createLogger(serviceName: string, level?: string, options?: any): Logger;

package/dist/logging/factories/universal.js

@@ -0,0 +1,23 @@
+/**
+ * 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 {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/logging/index.d.ts

@@ -0,0 +1,5 @@
+export { createServerLogger } from "./factories/server.js";
+export { createClientLogger } from "./factories/client.js";
+export { createLogger } from "./factories/universal.js";
+export * from "../classes/logging/typedef.js";
+export { DEBUG, INFO, WARN, ERROR, NONE, LEVELS } from "./constants.js";

package/dist/logging/index.js

@@ -0,0 +1,8 @@
+export { DEBUG, INFO, WARN, ERROR, NONE, LEVELS } from './constants.js';
+
+// Factories
+export { createServerLogger } from './factories/server.js';
+export { createClientLogger } from './factories/client.js';
+export { createLogger } from './factories/universal.js';
+
+export * from '../classes/logging/typedef.js';

package/dist/schemas/index.d.ts

@@ -0,0 +1 @@
+export * from "./validate-url.js";

package/dist/schemas/index.js

@@ -0,0 +1 @@
+export * from './validate-url.js';

package/dist/schemas/validate-url.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Schema to validate an URL
+ */
+export const ValidateUrl: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.UrlAction<string, undefined>, v.CustomSchema<any, undefined>]>;
+/**
+ * Schema to validate an URL or empty string.
+ */
+export const ValidateUrlOrEmptyString: v.UnionSchema<[v.LiteralSchema<"", undefined>, v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.UrlAction<string, undefined>]>], undefined>;
+/**
+ * Schema to validate an URL path
+ */
+export const ValidateUrlPath: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.CustomSchema<any, undefined>, v.TransformAction<any, {
+    url: URL;
+    value: any;
+}>, v.CustomSchema<{
+    url: URL;
+    value: any;
+}, "Value should not contain search path">, v.CustomSchema<{
+    url: URL;
+    value: any;
+}, "Value should not contain hash path">, v.TransformAction<{
+    url: URL;
+    value: any;
+}, string>]>;
+/**
+ * Schema to validate a relative URL
+ */
+export const ValidateRelativeUrl: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.CustomSchema<any, undefined>, v.CustomSchema<any, undefined>]>;
+export const ValidateAbsOrRelUrl: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.CustomSchema<any, undefined>, v.CustomSchema<any, undefined>]>;
+import * as v from 'valibot';