@hkdigital/lib-core 0.3.13 → 0.3.15

package/dist/design/generators/index.js

@@ -1,3 +1,92 @@
+/**
+ * Generate complete Tailwind CSS theme extensions from design configuration
+ *
+ * Takes design configuration objects and generates complete Tailwind theme extensions.
+ * Users can define their own design-config.js with custom values and pass them here.
+ *
+ * @param {Object} designConfig - Design configuration object
+ * @param {Object} designConfig.TEXT_POINT_SIZES - Array of text point sizes for spacing
+ * @param {Object} designConfig.VIEWPORT_POINT_SIZES - Array of viewport point sizes
+ * @param {Object} designConfig.TEXT_BASE_SIZES - Base text size configurations
+ * @param {Object} designConfig.TEXT_HEADING_SIZES - Heading text size configurations
+ * @param {Object} designConfig.TEXT_UI_SIZES - UI text size configurations
+ * @param {Object} designConfig.RADIUS_SIZES - Border radius configurations
+ * @param {Object} designConfig.BORDER_WIDTH_SIZES - Border width configurations
+ * @param {Object} designConfig.STROKE_WIDTH_SIZES - Stroke width configurations
+ *
+ * @returns {Object} Complete Tailwind theme extension object
+ *
+ * @example Basic usage
+ * ```javascript
+ * // your-project/src/lib/design/design-config.js
+ * export const DESIGN = { width: 1440, height: 900 };
+ * export const TEXT_BASE_SIZES = {
+ *   sm: { size: 12, lineHeight: 1.3 },
+ *   md: { size: 16, lineHeight: 1.4 }
+ * };
+ * // ... other exports
+ *
+ * // your-project/tailwind.config.js
+ * import { generateTailwindThemeExtensions } from '@hkdigital/lib-core/design/index.js';
+ * import { customUtilitiesPlugin } from '@hkdigital/lib-core/design/index.js';
+ * import * as designConfig from './src/lib/design/design-config.js';
+ *
+ * export default {
+ *   theme: {
+ *     extend: generateTailwindThemeExtensions(designConfig)
+ *   },
+ *   plugins: [customUtilitiesPlugin]
+ * };
+ * ```
+ */
+export function generateTailwindThemeExtensions({
+  TEXT_POINT_SIZES,
+  VIEWPORT_POINT_SIZES,
+  TEXT_BASE_SIZES,
+  TEXT_HEADING_SIZES,
+  TEXT_UI_SIZES,
+  RADIUS_SIZES,
+  BORDER_WIDTH_SIZES,
+  STROKE_WIDTH_SIZES
+}) {
+  const textBasedSpacing = generateTextBasedSpacing(TEXT_POINT_SIZES);
+  const viewportBasedSpacing = generateViewportBasedSpacing(VIEWPORT_POINT_SIZES);
+
+  return {
+    spacing: {
+      ...viewportBasedSpacing,
+      ...textBasedSpacing
+    },
+
+    fontSize: {
+      ...textBasedSpacing,
+      ...generateTextStyles(TEXT_BASE_SIZES, 'base'),
+      ...generateTextStyles(TEXT_HEADING_SIZES, 'heading'),
+      ...generateTextStyles(TEXT_UI_SIZES, 'ui')
+    },
+
+    borderRadius: {
+      ...generateBorderRadiusStyles(RADIUS_SIZES)
+    },
+
+    borderWidth: {
+      ...generateWidthStyles(BORDER_WIDTH_SIZES, 'width')
+    },
+
+    strokeWidth: {
+      ...generateWidthStyles(STROKE_WIDTH_SIZES, 'width')
+    },
+
+    outlineWidth: {
+      ...generateWidthStyles(STROKE_WIDTH_SIZES, '')
+    },
+
+    outlineOffset: {
+      ...generateWidthStyles(STROKE_WIDTH_SIZES, '')
+    }
+  };
+}
+
 /**
  * Generates text-based spacing units with with different scaling
  * units (ut, bt, ht)

package/dist/design/index.d.ts

@@ -1,8 +1,7 @@
+export { designTokens } from "./config/design-tokens.js";
 export { customUtilitiesPlugin } from "./plugins/skeleton.js";
 export { toStateClasses } from "./utils/states.js";
-export { DESIGN, CLAMPING, 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";
-export { generateTextBasedSpacing, generateViewportBasedSpacing, generateTextStyles, generateBorderRadiusStyles, generateWidthStyles } from "./generators/index.js";
-export { spacing, fontSize, borderRadius, borderWidth, strokeWidth, outlineWidth, outlineOffset } from "./tailwind-theme-extend.js";
-export { rootDesignVarsHTML, getRootCssDesignWidth, getRootCssDesignHeight, getAllRootScalingVars } from "./utils/root-vars.js";
+export { generateTailwindThemeExtensions, generateTextBasedSpacing, generateViewportBasedSpacing, generateTextStyles, generateBorderRadiusStyles, generateWidthStyles } from "./generators/index.js";
+export { designTokensToRootCssVars, getRootCssDesignWidth, getRootCssDesignHeight, getAllRootScalingVars } from "./utils/root-vars.js";
 export { getClampParams, clamp } from "./utils/clamp.js";
 export { enableContainerScaling, enableScalingUI } from "./utils/scaling.js";

package/dist/design/index.js

@@ -2,53 +2,49 @@
  * @fileoverview HKdigital Core Design System
  * 
  * This module provides a comprehensive design system for building consistent,
- * responsive interfaces. It includes configuration objects, generator functions,
- * and ready-to-use Tailwind theme extensions.
+ * responsive interfaces. It includes design tokens, generator functions,
+ * and utility functions for creating custom Tailwind theme extensions.
  * 
- * @example Basic usage in tailwind.config.js
+ * @example Basic usage with default tokens
  * ```javascript
- * import { spacing, fontSize, customUtilitiesPlugin } from '@hkdigital/lib-core/design';
+ * import { generateTailwindThemeExtensions, designTokens, customUtilitiesPlugin } from '@hkdigital/lib-core/design/index.js';
+ *
+ * const themeExtensions = generateTailwindThemeExtensions(designTokens);
  * 
  * export default {
  *   theme: {
- *     extend: { spacing, fontSize }
+ *     extend: themeExtensions
  *   },
  *   plugins: [customUtilitiesPlugin]
  * };
  * ```
  * 
- * @example Advanced customization
+ * @example Custom design tokens
  * ```javascript
- * import { 
- *   generateTextBasedSpacing, 
- *   DESIGN, 
- *   TEXT_POINT_SIZES 
- * } from '@hkdigital/lib-core/design';
+ * import { generateTailwindThemeExtensions } from '@hkdigital/lib-core/design/index.js';
+ *
+ * const myTokens = {
+ *   TEXT_POINT_SIZES: [4, 8, 12, 16, 24],
+ *   TEXT_BASE_SIZES: {
+ *     sm: { size: 12, lineHeight: 1.3 }
+ *   }
+ *   // ... other tokens
+ * };
  * 
- * const customSpacing = generateTextBasedSpacing([8, 12, 16, 24]);
+ * const themeExtensions = generateTailwindThemeExtensions(myTokens);
  * ```
  */
 
-// === Configuration Objects ===
-// Projects can import and customize these for their own design systems
+// === Design Tokens ===
+// Default design tokens - projects can import and customize for their own design systems
 
-export {
-  DESIGN,
-  CLAMPING,
-  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';
+export { designTokens } from './config/design-tokens.js';
 
 // === Generator Functions ===
 // Essential tools for projects to build custom Tailwind extensions
 
 export {
+  generateTailwindThemeExtensions,
   generateTextBasedSpacing,
   generateViewportBasedSpacing,
   generateTextStyles,
@@ -56,19 +52,6 @@ export {
   generateWidthStyles
 } from './generators/index.js';
 
-// === Ready-to-use Tailwind Extensions ===
-// Built using default configuration - projects can use directly or as reference
-
-export {
-  spacing,
-  fontSize,
-  borderRadius,
-  borderWidth,
-  strokeWidth,
-  outlineWidth,
-  outlineOffset
-} from './tailwind-theme-extend.js';
-
 // === Plugins & Utilities ===
 // Framework integration tools
 
@@ -78,7 +61,7 @@ export { customUtilitiesPlugin } from './plugins/skeleton.js';
 // Essential utility functions for design system implementation
 
 export { 
-  rootDesignVarsHTML,
+  designTokensToRootCssVars,
   getRootCssDesignWidth,
   getRootCssDesignHeight,
   getAllRootScalingVars
@@ -94,4 +77,4 @@ export { toStateClasses } from './utils/states.js';
 export {
   enableContainerScaling,
   enableScalingUI
-} from './utils/scaling.js';
+} from './utils/scaling.js';

package/dist/design/plugins/skeleton.d.ts

@@ -33,9 +33,11 @@
  *   ]
  * };
  *
- * @param {Object} api - Tailwind plugin API
- * @param {Function} api.addUtilities - Function to add utilities
+ * @param {object} _ - Tailwind plugin API
+ * @param {function} _.addUtilities - Function to add utilities
+ * @param {*} _.theme
  */
 export function customUtilitiesPlugin({ addUtilities, theme }: {
     addUtilities: Function;
+    theme: any;
 }): void;

package/dist/design/plugins/skeleton.js

@@ -33,8 +33,9 @@
  *   ]
  * };
  *
- * @param {Object} api - Tailwind plugin API
- * @param {Function} api.addUtilities - Function to add utilities
+ * @param {object} _ - Tailwind plugin API
+ * @param {function} _.addUtilities - Function to add utilities
+ * @param {*} _.theme
  */
 export function customUtilitiesPlugin({ addUtilities, theme }) {
   const fontFamilyUtilities = {

package/dist/design/themes/hkdev/components/buttons/button-text.css

@@ -1,32 +1,26 @@
-@define-mixin component-button-text {
 
-  /* @note using CSS vars defined in the parent button postcss */
+/* Type-based styling for text buttons */
+[data-component='button'][data-type='text'] {
+  /* Typography settings */
+  @apply font-ui text-ui-md;
+  @apply uppercase;
+  @apply whitespace-nowrap;
 
-  /* Type-based styling for text buttons */
-  [data-component="button"][data-type="text"] {
+  /* Size settings */
 
-    /* Typography settings */
-    @apply font-ui text-ui-md;
-    @apply uppercase;
-    @apply whitespace-nowrap;
-
-    /* Size settings */
-
-    &[data-size="md"] {
-      @apply rounded-sm;
-      @apply py-8ut px-16ut;
-      min-width: var(--btn-min-width);
-      min-height: var(--btn-min-height);
-    }
-
-    /* Role-specific text adjustments */
-    &[data-role="primary"] {
-      @apply font-extrabold;
-    }
+  &[data-size='md'] {
+    @apply rounded-sm;
+    @apply py-8ut px-16ut;
+    min-width: var(--btn-min-width);
+    min-height: var(--btn-min-height);
+  }
 
-    &[data-role="secondary"] {
-      @apply font-bold;
-    }
+  /* Role-specific text adjustments */
+  &[data-role='primary'] {
+    @apply font-extrabold;
   }
 
+  &[data-role='secondary'] {
+    @apply font-bold;
+  }
 }

package/dist/design/utils/clamp.js

@@ -1,4 +1,4 @@
-import { getRootCssVar } from '../../util/css/index.js';
+import { getRootCssVar } from './root-vars.js';
 
 /**
  * Cache to that ensures we parse CSS clamp parameters only once

package/dist/design/utils/root-vars.d.ts

@@ -1,60 +1,62 @@
 /**
  * Generates a complete HTML style tag with CSS custom properties for
- * the design system based on provided configuration.
+ * the design system based on provided design tokens configuration.
  *
- * @param {Object} design - Design dimensions configuration
- * @param {number} design.width - The design width in pixels
- * @param {number} design.height - The design height in pixels
- * @param {Object} clamping - Scaling configuration parameters
- * @param {Object} clamping.ui - UI clamping configuration
- * @param {number} clamping.ui.min - Minimum UI scaling factor
- * @param {number} clamping.ui.max - Maximum UI scaling factor
- * @param {Object} clamping.textBase - Base text scaling configuration
- * @param {number} clamping.textBase.min - Minimum base text scaling
- * @param {number} clamping.textBase.max - Maximum base text scaling
- * @param {Object} clamping.textHeading - Heading text clamping configuration
- * @param {number} clamping.textHeading.min - Minimum heading text scaling
- * @param {number} clamping.textHeading.max - Maximum heading text scaling
- * @param {Object} clamping.textUi - UI text clamping configuration
- * @param {number} clamping.textUi.min - Minimum UI text scaling
- * @param {number} clamping.textUi.max - Maximum UI text scaling
+ * @param {Object} designTokens - Complete design tokens object
+ * @param {Object} designTokens.DESIGN - Design dimensions configuration
+ * @param {number} designTokens.DESIGN.width - The design width in pixels
+ * @param {number} designTokens.DESIGN.height - The design height in pixels
+ * @param {Object} designTokens.CLAMPING - Scaling configuration parameters
+ * @param {Object} designTokens.CLAMPING.ui - UI clamping configuration
+ * @param {number} designTokens.CLAMPING.ui.min - Minimum UI scaling factor
+ * @param {number} designTokens.CLAMPING.ui.max - Maximum UI scaling factor
+ * @param {Object} designTokens.CLAMPING.textBase - Base text scaling configuration
+ * @param {number} designTokens.CLAMPING.textBase.min - Minimum base text scaling
+ * @param {number} designTokens.CLAMPING.textBase.max - Maximum base text scaling
+ * @param {Object} designTokens.CLAMPING.textHeading - Heading text clamping configuration
+ * @param {number} designTokens.CLAMPING.textHeading.min - Minimum heading text scaling
+ * @param {number} designTokens.CLAMPING.textHeading.max - Maximum heading text scaling
+ * @param {Object} designTokens.CLAMPING.textUi - UI text clamping configuration
+ * @param {number} designTokens.CLAMPING.textUi.min - Minimum UI text scaling
+ * @param {number} designTokens.CLAMPING.textUi.max - Maximum UI text scaling
  *
  * @returns {string} Complete HTML style tag with design system CSS variables
  *
  * @example
  * // +layout.svelte
  * <script>
- * import { DESIGN, CLAMPING } from '../config/design-config.js';
- *
- * import { rootDesignVarsHTML } from './root-vars.js';
+ * import { designTokens, designTokensToRootCssVars } from '@hkdigital/lib-core/design/index.js';
  * </script>
  *
  * <svelte:head>
- * {@html rootDesignVarsHTML(DESIGN, CLAMPING)}
+ * {@html designTokensToRootCssVars(designTokens)}
  * </svelte:head>
  *
  * // Generates style tag for use in svelte:head
  * // <style>:root { --design-width: 1920; ... }</style>
  */
-export function rootDesignVarsHTML(design: {
-    width: number;
-    height: number;
-}, clamping: {
-    ui: {
-        min: number;
-        max: number;
-    };
-    textBase: {
-        min: number;
-        max: number;
+export function designTokensToRootCssVars(designTokens: {
+    DESIGN: {
+        width: number;
+        height: number;
     };
-    textHeading: {
-        min: number;
-        max: number;
-    };
-    textUi: {
-        min: number;
-        max: number;
+    CLAMPING: {
+        ui: {
+            min: number;
+            max: number;
+        };
+        textBase: {
+            min: number;
+            max: number;
+        };
+        textHeading: {
+            min: number;
+            max: number;
+        };
+        textUi: {
+            min: number;
+            max: number;
+        };
     };
 }): string;
 /**
@@ -75,3 +77,12 @@ export function getRootCssDesignHeight(): number;
  * @returns {Object} An object containing all scaling factors
  */
 export function getAllRootScalingVars(): any;
+/**
+ * Extract a CSS variable value from document root
+ *
+ * @param {string} varName - CSS variable name without '--'
+ * @param {boolean} [useCache=false]
+ *
+ * @returns {any} Parsed value or default
+ */
+export function getRootCssVar(varName: string, useCache?: boolean): any;

package/dist/design/utils/root-vars.js

@@ -1,48 +1,136 @@
-import { getRootCssVar } from '../../util/css/css-vars.js';
+/**
+ * CSS Variables Utilities
+ * Copied from $lib/util/css/css-vars.js to make design system self-contained
+ */
+
+let cssVarCache = {};
+
+/**
+ * Normalizes a CSS variable name to ensure it has the -- prefix
+ *
+ * @param {string} varName - The CSS variable name
+ * @returns {string} Normalized variable name with -- prefix
+ */
+function normalizeCssVarName(varName) {
+  if (typeof varName !== 'string') {
+    throw new Error('Variable name must be a string');
+  }
+  return varName.startsWith('--') ? varName : `--${varName}`;
+}
+
+/**
+ * Extract a CSS variable value from document root
+ *
+ * @param {string} varName - CSS variable name without '--'
+ * @param {boolean} [useCache=false]
+ *
+ * @returns {any} Parsed value or default
+ */
+function getRootCssVar(varName, useCache = false) {
+  if (cssVarCache[varName] !== undefined && useCache) {
+    return cssVarCache[varName];
+  }
+
+  // Get computed style from document root
+  const rootStyle = getComputedStyle(document.documentElement);
+  const declaration = rootStyle.getPropertyValue(`--${varName}`).trim();
+
+  if (!declaration) {
+    return null;
+  }
+
+  let result;
+
+  // Try to parse as number
+  if (!isNaN(parseFloat(declaration))) {
+    result = parseFloat(declaration);
+  } else {
+    // Return string value
+    result = declaration;
+  }
+
+  // Cache the result
+  cssVarCache[varName] = result;
+  return result;
+}
+
+/**
+ * Sets a CSS variable in :root to a new value
+ *
+ * @param {string} varName - The CSS variable name (with or without --)
+ * @param {string|number} value - The new value to set
+ * @returns {boolean} True if successful, false otherwise
+ */
+function setRootCssVar(varName, value) {
+  try {
+    if (varName === undefined || varName === null) {
+      throw new Error('Variable name cannot be null or undefined');
+    }
+
+    if (value === undefined || value === null) {
+      throw new Error('Value cannot be null or undefined');
+    }
+
+    const normalizedName = normalizeCssVarName(varName);
+
+    // Convert to string if numeric
+    const formattedValue = typeof value === 'number' ? `${value}` : value;
+
+    document.documentElement.style.setProperty(normalizedName, formattedValue);
+
+    delete cssVarCache[varName];
+
+    return true;
+  } catch (error) {
+    console.error(`Error setting CSS variable ${varName}:`, error);
+    return false;
+  }
+}
 
 /**
  * Generates a complete HTML style tag with CSS custom properties for
- * the design system based on provided configuration.
+ * the design system based on provided design tokens configuration.
  *
- * @param {Object} design - Design dimensions configuration
- * @param {number} design.width - The design width in pixels
- * @param {number} design.height - The design height in pixels
- * @param {Object} clamping - Scaling configuration parameters
- * @param {Object} clamping.ui - UI clamping configuration
- * @param {number} clamping.ui.min - Minimum UI scaling factor
- * @param {number} clamping.ui.max - Maximum UI scaling factor
- * @param {Object} clamping.textBase - Base text scaling configuration
- * @param {number} clamping.textBase.min - Minimum base text scaling
- * @param {number} clamping.textBase.max - Maximum base text scaling
- * @param {Object} clamping.textHeading - Heading text clamping configuration
- * @param {number} clamping.textHeading.min - Minimum heading text scaling
- * @param {number} clamping.textHeading.max - Maximum heading text scaling
- * @param {Object} clamping.textUi - UI text clamping configuration
- * @param {number} clamping.textUi.min - Minimum UI text scaling
- * @param {number} clamping.textUi.max - Maximum UI text scaling
+ * @param {Object} designTokens - Complete design tokens object
+ * @param {Object} designTokens.DESIGN - Design dimensions configuration
+ * @param {number} designTokens.DESIGN.width - The design width in pixels
+ * @param {number} designTokens.DESIGN.height - The design height in pixels
+ * @param {Object} designTokens.CLAMPING - Scaling configuration parameters
+ * @param {Object} designTokens.CLAMPING.ui - UI clamping configuration
+ * @param {number} designTokens.CLAMPING.ui.min - Minimum UI scaling factor
+ * @param {number} designTokens.CLAMPING.ui.max - Maximum UI scaling factor
+ * @param {Object} designTokens.CLAMPING.textBase - Base text scaling configuration
+ * @param {number} designTokens.CLAMPING.textBase.min - Minimum base text scaling
+ * @param {number} designTokens.CLAMPING.textBase.max - Maximum base text scaling
+ * @param {Object} designTokens.CLAMPING.textHeading - Heading text clamping configuration
+ * @param {number} designTokens.CLAMPING.textHeading.min - Minimum heading text scaling
+ * @param {number} designTokens.CLAMPING.textHeading.max - Maximum heading text scaling
+ * @param {Object} designTokens.CLAMPING.textUi - UI text clamping configuration
+ * @param {number} designTokens.CLAMPING.textUi.min - Minimum UI text scaling
+ * @param {number} designTokens.CLAMPING.textUi.max - Maximum UI text scaling
  *
  * @returns {string} Complete HTML style tag with design system CSS variables
  *
  * @example
  * // +layout.svelte
  * <script>
- * import { DESIGN, CLAMPING } from '../config/design-config.js';
- *
- * import { rootDesignVarsHTML } from './root-vars.js';
+ * import { designTokens, designTokensToRootCssVars } from '@hkdigital/lib-core/design/index.js';
  * </script>
  *
  * <svelte:head>
- * {@html rootDesignVarsHTML(DESIGN, CLAMPING)}
+ * {@html designTokensToRootCssVars(designTokens)}
  * </svelte:head>
  *
  * // Generates style tag for use in svelte:head
  * // <style>:root { --design-width: 1920; ... }</style>
  */
-export function rootDesignVarsHTML(design, clamping) {
+export function designTokensToRootCssVars(designTokens) {
+  const { DESIGN, CLAMPING } = designTokens;
+
   return `<style>:root {
       /* Design dimensions */
-      --design-width: ${design.width};
-      --design-height: ${design.height};
+      --design-width: ${DESIGN.width};
+      --design-height: ${DESIGN.height};
 
       /* Scaling factors */
       --scale-w: 1;
@@ -52,10 +140,10 @@ export function rootDesignVarsHTML(design, clamping) {
       --scale-viewport: 1;
 
       /* Base clamping units */
-      --scale-ui: clamp(${clamping.ui.min}, var(--scale-viewport), ${clamping.ui.max});
-      --scale-text-base: clamp(${clamping.textBase.min}, var(--scale-viewport), ${clamping.textBase.max});
-      --scale-text-heading: clamp(${clamping.textHeading.min}, var(--scale-viewport), ${clamping.textHeading.max});
-      --scale-text-ui: clamp(${clamping.textUi.min}, var(--scale-viewport), ${clamping.textUi.max});
+      --scale-ui: clamp(${CLAMPING.ui.min}, var(--scale-viewport), ${CLAMPING.ui.max});
+      --scale-text-base: clamp(${CLAMPING.textBase.min}, var(--scale-viewport), ${CLAMPING.textBase.max});
+      --scale-text-heading: clamp(${CLAMPING.textHeading.min}, var(--scale-viewport), ${CLAMPING.textHeading.max});
+      --scale-text-ui: clamp(${CLAMPING.textUi.min}, var(--scale-viewport), ${CLAMPING.textUi.max});
     }</style>`;
 }
 
@@ -68,6 +156,16 @@ export function getRootCssDesignWidth() {
   return getRootCssVar('design-width');
 }
 
+/**
+ * Extract a CSS variable value from document root (exported for use by other design system utilities)
+ *
+ * @param {string} varName - CSS variable name without '--'
+ * @param {boolean} [useCache=false]
+ *
+ * @returns {any} Parsed value or default
+ */
+export { getRootCssVar };
+
 /**
  * Get design height from CSS variables
  *

package/dist/logging/index.d.ts

@@ -1,6 +1,5 @@
 export { createServerLogger } from "./internal/factories/server.js";
 export { createClientLogger } from "./internal/factories/client.js";
-export { createLogger } from "./internal/factories/universal.js";
 export { Logger } from "./internal/logger/index.js";
-export * from "./internal/constants.js";
-export * from "./internal/typedef.js";
+export * from "./constants.js";
+export * from "./typedef.js";

package/dist/logging/index.js

@@ -1,11 +1,10 @@
 // Factories
 export { createServerLogger } from './internal/factories/server.js';
 export { createClientLogger } from './internal/factories/client.js';
-export { createLogger } from './internal/factories/universal.js';
 
-// Logger (advanced usage)
+// Logger (for advanced usage)
 export { Logger } from './internal/logger/index.js';
 
 // Constants and typedefs
-export * from './internal/constants.js';
-export * from './internal/typedef.js';
+export * from './constants.js';
+export * from './typedef.js';

package/dist/logging/internal/adapters/console.js

@@ -1,4 +1,4 @@
-import { LEVELS } from '../constants.js';
+import { LEVELS } from '../../constants.js';
 
 /**
  * (Browser) console adapter that uses native DevTools styling
@@ -35,12 +35,8 @@ export class ConsoleAdapter {
     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;
+    // Process details for better error formatting
+    const logData = this._processLogData(details);
 
     if (logData) {
       console[this._getConsoleMethod(level)](prefix, styles, message, logData);