@smartnet360/svelte-components 0.0.36 → 0.0.38

package/dist/apps/site-check/SiteCheck.svelte

@@ -2,9 +2,10 @@
 
 <script lang="ts">
 	import { TreeView, createTreeStore } from '../../core/TreeView';
-	import { ChartComponent, type Layout } from '../../core/Charts';
-	import { buildTreeNodes, filterChartData, transformChartData, type CellTrafficRecord } from './index';
+	import { ChartComponent, type Layout, type CellStylingConfig } from '../../core/Charts';
+	import { buildTreeNodes, filterChartData, transformChartData, type CellTrafficRecord, defaultCellStyling } from './index';
 	import { expandLayoutForCells } from './helper';
+	import { log } from '../../core/logger';
 	import { onMount } from 'svelte';
     import type { Mode } from '../../index.js';
 
@@ -13,15 +14,26 @@
 		baseLayout: Layout;
 		baseMetrics: string[];
         mode: Mode;
+		cellStyling?: CellStylingConfig; // Optional cell styling config (defaults to defaultCellStyling)
 	}
 
-	let { rawData, baseLayout, baseMetrics, mode = "scrollspy" }: Props = $props();
+	let { rawData, baseLayout, baseMetrics, mode = "scrollspy", cellStyling = defaultCellStyling }: Props = $props();
 
 	let treeStore = $state<ReturnType<typeof createTreeStore> | null>(null);
 
 	onMount(() => {
+		log('🚀 SiteCheck Initializing', {
+			totalRecords: rawData.length,
+			baseMetrics,
+			mode
+		});
+
 		// Build tree nodes from raw data
 		const treeNodes = buildTreeNodes(rawData);
+		log('🌲 Tree Nodes Built', {
+			nodeCount: treeNodes.length,
+			firstNode: treeNodes[0]
+		});
 
 		// Create tree store
 		treeStore = createTreeStore({
@@ -30,6 +42,7 @@
 			persistState: true,
 			defaultExpandAll: false
 		});
+		log('✅ Tree Store Created', { namespace: 'site-check' });
 	});
 
 	// Derive chart data from tree selection
@@ -37,22 +50,55 @@
 		if (!treeStore) return [];
 		const storeValue = $treeStore;
 		if (!storeValue) return [];
-		return filterChartData(rawData, storeValue.state.checkedPaths);
+		const filtered = filterChartData(rawData, storeValue.state.checkedPaths);
+		log('🔍 Filtered Data:', {
+			totalRaw: rawData.length,
+			checkedPaths: Array.from(storeValue.state.checkedPaths),
+			filteredCount: filtered.length,
+			cells: Array.from(new Set(filtered.map(r => r.cellName)))
+		});
+		return filtered;
 	});
 
 	// Transform data using base metrics from layout
-	let chartData = $derived(transformChartData(filteredData, baseMetrics));
+	let chartData = $derived.by(() => {
+		const transformed = transformChartData(filteredData, baseMetrics);
+		log('📊 Chart Data:', {
+			filteredRows: filteredData.length,
+			transformedRows: transformed.length,
+			baseMetrics,
+			sampleRow: transformed[0],
+			columns: transformed[0] ? Object.keys(transformed[0]) : []
+		});
+		return transformed;
+	});
 
 	// Expand layout based on selected cells
-	let chartLayout = $derived(expandLayoutForCells(baseLayout, filteredData));
-    console.log('chartLayout', chartLayout);
+	let chartLayout = $derived.by(() => {
+		const expanded = expandLayoutForCells(baseLayout, filteredData, cellStyling);
+		log('📐 Chart Layout:', {
+			sectionsCount: expanded.sections.length,
+			totalCharts: expanded.sections.reduce((sum, s) => sum + s.charts.length, 0),
+			firstSection: expanded.sections[0],
+			cellStylingEnabled: !!cellStyling
+		});
+		return expanded;
+	});
 
 	let totalRecords = $derived(rawData.length);
 	let visibleRecords = $derived(filteredData.length);
 
 	// Compute simple stats
-	let totalCells = $derived(new Set(filteredData.map((r) => r.cellName)).size);
-	let totalSites = $derived(new Set(filteredData.map((r) => r.siteName)).size);
+	let totalCells = $derived.by(() => {
+		const count = new Set(filteredData.map((r) => r.cellName)).size;
+		log('📱 Total Cells:', count);
+		return count;
+	});
+	let totalSites = $derived.by(() => {
+		const count = new Set(filteredData.map((r) => r.siteName)).size;
+		log('📡 Total Sites:', count);
+		return count;
+	});
 </script>
 
 <div class="container-fluid vh-100 d-flex flex-column">

package/dist/apps/site-check/SiteCheck.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type Layout } from '../../core/Charts';
+import { type Layout, type CellStylingConfig } from '../../core/Charts';
 import { type CellTrafficRecord } from './index';
 import type { Mode } from '../../index.js';
 interface Props {
@@ -6,6 +6,7 @@ interface Props {
     baseLayout: Layout;
     baseMetrics: string[];
     mode: Mode;
+    cellStyling?: CellStylingConfig;
 }
 declare const SiteCheck: import("svelte").Component<Props, {}, "">;
 type SiteCheck = ReturnType<typeof SiteCheck>;

package/dist/apps/site-check/default-cell-styling.d.ts

@@ -0,0 +1,6 @@
+import type { CellStylingConfig } from '../../core/Charts';
+/**
+ * Default cell styling configuration for SiteCheck component
+ * Provides band colors and sector line styles for network cells
+ */
+export declare const defaultCellStyling: CellStylingConfig;

package/dist/apps/site-check/default-cell-styling.js

@@ -0,0 +1,24 @@
+/**
+ * Default cell styling configuration for SiteCheck component
+ * Provides band colors and sector line styles for network cells
+ */
+export const defaultCellStyling = {
+    bandColors: {
+        "LTE700": "#DC2626",
+        "LTE800": "#EA580C",
+        "LTE900": "#D97706",
+        "LTE1800": "#2563EB",
+        "LTE2100": "#7C3AED",
+        "LTE2600": "#DB2777",
+        "NR700": "#B91C1C",
+        "NR2100": "#059669",
+        "NR3500": "#0891B2",
+        "NR26000": "#BE185D"
+    },
+    sectorLineStyles: {
+        "1": "solid",
+        "2": "dash",
+        "3": "dot",
+        "4": "dashdot"
+    }
+};

package/dist/apps/site-check/default-cell-styling.json

@@ -0,0 +1,20 @@
+{
+  "bandColors": {
+    "LTE700": "#DC2626",
+    "LTE800": "#EA580C",
+    "LTE900": "#D97706",
+    "LTE1800": "#2563EB",
+    "LTE2100": "#7C3AED",
+    "LTE2600": "#DB2777",
+    "NR700": "#B91C1C",
+    "NR2100": "#059669",
+    "NR3500": "#0891B2",
+    "NR26000": "#BE185D"
+  },
+  "sectorLineStyles": {
+    "1": "solid",
+    "2": "dash",
+    "3": "dot",
+    "4": "dashdot"
+  }
+}

package/dist/apps/site-check/helper.d.ts

@@ -1,4 +1,4 @@
-import type { Layout } from '../../core/Charts';
+import type { Layout, CellStylingConfig } from '../../core/Charts';
 import type { CellTrafficRecord } from './';
 /**
  * Expand base layout configuration with dynamic KPIs based on selected cells
@@ -6,9 +6,10 @@ import type { CellTrafficRecord } from './';
  *
  * @param baseLayout - The base layout configuration from JSON
  * @param data - Filtered cell traffic records for selected cells
+ * @param stylingConfig - Optional cell styling configuration (band colors, sector line styles)
  * @returns Expanded layout with cell-specific KPIs
  */
-export declare function expandLayoutForCells(baseLayout: Layout, data: CellTrafficRecord[]): Layout;
+export declare function expandLayoutForCells(baseLayout: Layout, data: CellTrafficRecord[], stylingConfig?: CellStylingConfig): Layout;
 /**
  * Extract base metric names from a layout configuration
  * Returns unique metric rawNames that need to be pivoted

package/dist/apps/site-check/helper.js

@@ -1,12 +1,14 @@
+import { createStyledKPI } from './transforms.js';
 /**
  * Expand base layout configuration with dynamic KPIs based on selected cells
  * Takes a base layout (with one KPI per metric) and expands it to include one KPI per cell
  *
  * @param baseLayout - The base layout configuration from JSON
  * @param data - Filtered cell traffic records for selected cells
+ * @param stylingConfig - Optional cell styling configuration (band colors, sector line styles)
  * @returns Expanded layout with cell-specific KPIs
  */
-export function expandLayoutForCells(baseLayout, data) {
+export function expandLayoutForCells(baseLayout, data, stylingConfig) {
     // Get unique cells and their metadata
     const cellMap = new Map();
     data.forEach((record) => {
@@ -22,8 +24,8 @@ export function expandLayoutForCells(baseLayout, data) {
             ...section,
             charts: section.charts.map((chart) => ({
                 ...chart,
-                yLeft: expandKPIs(chart.yLeft, cells),
-                yRight: expandKPIs(chart.yRight, cells)
+                yLeft: expandKPIs(chart.yLeft, cells, stylingConfig),
+                yRight: expandKPIs(chart.yRight, cells, stylingConfig)
             }))
         }))
     };
@@ -31,22 +33,20 @@ export function expandLayoutForCells(baseLayout, data) {
 }
 /**
  * Expand a single KPI into multiple KPIs (one per cell)
+ * Now uses createStyledKPI to apply band colors and sector line styles
  *
  * @param baseKPIs - Array of base KPIs from layout
  * @param cells - Array of [cellName, record] tuples
- * @returns Expanded array of KPIs with cell-specific rawNames and colors
+ * @param stylingConfig - Optional cell styling configuration
+ * @returns Expanded array of KPIs with cell-specific styling
  */
-function expandKPIs(baseKPIs, cells) {
+function expandKPIs(baseKPIs, cells, stylingConfig) {
     const expandedKPIs = [];
     baseKPIs.forEach((baseKPI) => {
-        cells.forEach(([cellName, record], index) => {
-            expandedKPIs.push({
-                rawName: `${baseKPI.rawName}_${cellName}`,
-                name: `${cellName} (${record.band}) - ${baseKPI.name}`,
-                scale: baseKPI.scale,
-                unit: baseKPI.unit,
-                color: getColorForIndex(index)
-            });
+        cells.forEach(([cellName, record]) => {
+            // Use createStyledKPI to apply band color and sector line style
+            const styledKPI = createStyledKPI(baseKPI.rawName, record, baseKPI.unit, stylingConfig);
+            expandedKPIs.push(styledKPI);
         });
     });
     return expandedKPIs;

package/dist/apps/site-check/index.d.ts

@@ -4,5 +4,6 @@
  */
 export { default as SiteCheck } from './SiteCheck.svelte';
 export { loadCellTrafficData, getUniqueSites, getUniqueCells, groupDataByCell, type CellTrafficRecord } from './data-loader.js';
-export { buildTreeNodes, filterChartData, transformChartData } from './transforms.js';
+export { buildTreeNodes, filterChartData, transformChartData, createStyledKPI } from './transforms.js';
 export { expandLayoutForCells, extractBaseMetrics } from './helper.js';
+export { defaultCellStyling } from './default-cell-styling.js';

package/dist/apps/site-check/index.js

@@ -7,6 +7,8 @@ export { default as SiteCheck } from './SiteCheck.svelte';
 // Data loading
 export { loadCellTrafficData, getUniqueSites, getUniqueCells, groupDataByCell } from './data-loader.js';
 // Data transforms
-export { buildTreeNodes, filterChartData, transformChartData } from './transforms.js';
-// Helper utilities (for external configuration)
+export { buildTreeNodes, filterChartData, transformChartData, createStyledKPI } from './transforms.js';
+// Helper functions
 export { expandLayoutForCells, extractBaseMetrics } from './helper.js';
+// Default cell styling configuration
+export { defaultCellStyling } from './default-cell-styling.js';

package/dist/apps/site-check/transforms.d.ts

@@ -3,6 +3,7 @@
  * Converts raw CSV data to TreeView nodes and Chart configurations
  */
 import type { TreeNode } from '../../core/TreeView';
+import type { KPI, CellStylingConfig } from '../../core/Charts';
 import type { CellTrafficRecord } from './data-loader';
 /**
  * Build hierarchical tree structure: Site → Sector (Azimuth) → Cell (Band)
@@ -22,3 +23,15 @@ export declare function filterChartData(data: CellTrafficRecord[], checkedPaths:
  * @param baseMetrics - Array of metric names to pivot (e.g., ['dlGBytes', 'ulGBytes'])
  */
 export declare function transformChartData(data: CellTrafficRecord[], baseMetrics: string[]): any[];
+/**
+ * Apply cell styling based on band and sector
+ * Modifies KPI objects to include color (from band) and lineStyle (from sector)
+ * Updates KPI name to format: Band_Azimuth°
+ *
+ * @param metricName - Base metric name (e.g., 'dlGBytes')
+ * @param cellRecord - Cell traffic record with band, sector, azimuth metadata
+ * @param unit - Unit string for the metric
+ * @param stylingConfig - Optional cell styling configuration (band colors, sector line styles)
+ * @returns Styled KPI object
+ */
+export declare function createStyledKPI(metricName: string, cellRecord: CellTrafficRecord, unit: string, stylingConfig?: CellStylingConfig): KPI;

package/dist/apps/site-check/transforms.js

@@ -2,10 +2,12 @@
  * Data Transforms for Site Check Component
  * Converts raw CSV data to TreeView nodes and Chart configurations
  */
+import { log } from '../../core/logger';
 /**
  * Build hierarchical tree structure: Site → Sector (Azimuth) → Cell (Band)
  */
 export function buildTreeNodes(data) {
+    log('🔄 Building tree nodes', { recordCount: data.length });
     // Group by site → azimuth → cell
     const siteMap = new Map();
     data.forEach((record) => {
@@ -33,6 +35,7 @@ export function buildTreeNodes(data) {
             // icon: '📡',
             metadata: { type: 'site', siteName },
             defaultExpanded: false,
+            defaultChecked: false, // Don't check parent nodes
             children: []
         };
         Array.from(azimuthMap.entries())
@@ -44,6 +47,7 @@ export function buildTreeNodes(data) {
                 // icon: '📍',
                 metadata: { type: 'sector', azimuth, siteName },
                 defaultExpanded: false,
+                defaultChecked: false, // Don't check parent nodes
                 children: []
             };
             Array.from(cellMap.entries())
@@ -69,6 +73,11 @@ export function buildTreeNodes(data) {
         });
         treeNodes.push(siteNode);
     });
+    log('✅ Tree nodes built', {
+        totalNodes: treeNodes.length,
+        totalSites: siteMap.size,
+        sampleSite: treeNodes[0]?.label
+    });
     return treeNodes;
 }
 /**
@@ -87,6 +96,11 @@ function getBandIcon(band) {
  * Only include cells that are checked in the tree
  */
 export function filterChartData(data, checkedPaths) {
+    log('🔄 Filtering chart data', {
+        totalRecords: data.length,
+        checkedPathsCount: checkedPaths.size,
+        paths: Array.from(checkedPaths)
+    });
     // Extract cell names from checked leaf paths (format: "site:azimuth:cellName")
     const selectedCells = new Set();
     checkedPaths.forEach((path) => {
@@ -97,7 +111,13 @@ export function filterChartData(data, checkedPaths) {
         }
     });
     // Filter data to only include selected cells
-    return data.filter((record) => selectedCells.has(record.cellName));
+    const filtered = data.filter((record) => selectedCells.has(record.cellName));
+    log('✅ Data filtered', {
+        selectedCells: Array.from(selectedCells),
+        filteredRecords: filtered.length,
+        uniqueCells: new Set(filtered.map(r => r.cellName)).size
+    });
+    return filtered;
 }
 /**
  * Transform data for chart component consumption
@@ -108,6 +128,11 @@ export function filterChartData(data, checkedPaths) {
  * @param baseMetrics - Array of metric names to pivot (e.g., ['dlGBytes', 'ulGBytes'])
  */
 export function transformChartData(data, baseMetrics) {
+    log('🔄 Transforming chart data', {
+        inputRecords: data.length,
+        baseMetrics,
+        uniqueCells: new Set(data.map(r => r.cellName)).size
+    });
     // Group data by date
     const dateMap = new Map();
     data.forEach((record) => {
@@ -138,5 +163,53 @@ export function transformChartData(data, baseMetrics) {
     });
     // Sort by date
     pivotedData.sort((a, b) => a.TIMESTAMP.localeCompare(b.TIMESTAMP));
+    log('✅ Data transformed', {
+        outputRows: pivotedData.length,
+        dateRange: pivotedData.length > 0 ?
+            `${pivotedData[0].TIMESTAMP} to ${pivotedData[pivotedData.length - 1].TIMESTAMP}` :
+            'none',
+        columnsPerRow: pivotedData[0] ? Object.keys(pivotedData[0]).length : 0,
+        sampleRow: pivotedData[0]
+    });
     return pivotedData;
 }
+/**
+ * Apply cell styling based on band and sector
+ * Modifies KPI objects to include color (from band) and lineStyle (from sector)
+ * Updates KPI name to format: Band_Azimuth°
+ *
+ * @param metricName - Base metric name (e.g., 'dlGBytes')
+ * @param cellRecord - Cell traffic record with band, sector, azimuth metadata
+ * @param unit - Unit string for the metric
+ * @param stylingConfig - Optional cell styling configuration (band colors, sector line styles)
+ * @returns Styled KPI object
+ */
+export function createStyledKPI(metricName, cellRecord, unit, stylingConfig) {
+    const { band, sector, azimuth, cellName } = cellRecord;
+    // Get color from band (if config provided)
+    const color = stylingConfig?.bandColors?.[band];
+    // Get line style from sector (if config provided)
+    const lineStyle = stylingConfig?.sectorLineStyles?.[sector.toString()];
+    // Format name as: Band_Azimuth°
+    const displayName = `${band}_${azimuth}°`;
+    // Build KPI with cell-specific styling
+    const kpi = {
+        rawName: `${metricName}_${cellName}`, // Column name in pivoted data
+        name: displayName,
+        scale: 'absolute',
+        unit,
+        ...(color && { color }),
+        ...(lineStyle && { lineStyle })
+    };
+    log('🎨 Styled KPI created', {
+        metricName,
+        cellName,
+        displayName,
+        band,
+        sector,
+        azimuth,
+        color,
+        lineStyle
+    });
+    return kpi;
+}

package/dist/core/Charts/ChartCard.svelte

@@ -3,10 +3,11 @@
 <script lang="ts">
 	import { onMount, createEventDispatcher } from 'svelte';
 	import Plotly from 'plotly.js-dist-min';
-	import type { Chart as ChartModel, ChartMarker, MovingAverageConfig } from './charts.model.js';
+	import type { Chart as ChartModel, ChartMarker, MovingAverageConfig, HoverMode } from './charts.model.js';
 	import { createTimeSeriesTraceWithMA, getYAxisTitle, createDefaultPlotlyLayout } from './data-utils.js';
 	import { adaptPlotlyLayout, addMarkersToLayout, type ContainerSize } from './adapt.js';
 	import { getKPIValues, type ProcessedChartData } from './data-processor.js';
+	import { log } from '../logger';
 
 	const dispatch = createEventDispatcher<{
 		chartcontextmenu: {
@@ -26,13 +27,15 @@
 		sectionId?: string;
 		sectionMovingAverage?: MovingAverageConfig; // Section-level MA config
 		layoutMovingAverage?: MovingAverageConfig; // Layout-level MA config
+		layoutHoverMode?: HoverMode; // Layout-level hover mode config
+		layoutColoredHover?: boolean; // Layout-level colored hover config (default: true)
 		runtimeMAOverride?: MovingAverageConfig | null; // Runtime override from global controls
 		runtimeShowOriginal?: boolean; // Runtime control for showing original lines
 		runtimeShowMarkers?: boolean; // Runtime control for showing markers (default: true)
 		runtimeShowLegend?: boolean; // Runtime control for showing legend (default: true)
 	}
 
-	let { chart, processedData, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage, runtimeMAOverride, runtimeShowOriginal, runtimeShowMarkers = true, runtimeShowLegend = true }: Props = $props();
+	let { chart, processedData, markers, plotlyLayout, enableAdaptation = true, sectionId, sectionMovingAverage, layoutMovingAverage, layoutHoverMode, layoutColoredHover = true, runtimeMAOverride, runtimeShowOriginal, runtimeShowMarkers = true, runtimeShowLegend = true }: Props = $props();
 
 	// Chart container div and state
 	let chartDiv: HTMLElement;
@@ -161,7 +164,7 @@
 		// Add left Y-axis traces (with moving average support)
 		resolvedKPIs.left.forEach(kpi => {
 			const values = getKPIValues(processedData, kpi);
-			const kpiTraces = createTimeSeriesTraceWithMA(values, timestamps, kpi, 'y1', colorIndex, chartType, stackGroup);
+			const kpiTraces = createTimeSeriesTraceWithMA(values, timestamps, kpi, 'y1', colorIndex, chartType, stackGroup, layoutColoredHover);
 			traces.push(...kpiTraces);
 			colorIndex++;
 		});
@@ -169,13 +172,13 @@
 		// Add right Y-axis traces (with moving average support)
 		resolvedKPIs.right.forEach(kpi => {
 			const values = getKPIValues(processedData, kpi);
-			const kpiTraces = createTimeSeriesTraceWithMA(values, timestamps, kpi, 'y2', colorIndex, chartType, stackGroup);
+			const kpiTraces = createTimeSeriesTraceWithMA(values, timestamps, kpi, 'y2', colorIndex, chartType, stackGroup, layoutColoredHover);
 			traces.push(...kpiTraces);
 			colorIndex++;
 		});
 
 		// Create default modern layout using the centralized function
-		const defaultLayout: any = createDefaultPlotlyLayout(chart.title);
+		const defaultLayout: any = createDefaultPlotlyLayout(chart.title, layoutHoverMode);
 		
 		// Override specific properties for this chart
 		defaultLayout.yaxis.title = {
@@ -235,9 +238,16 @@
 		// Use Plotly.react() for updates (preserves zoom/pan) or newPlot for initial render
 		if (chartInitialized) {
 			// Update existing chart - much faster, preserves user interactions
+			log('🔄 Updating chart with Plotly.react', { chartTitle: chart.title });
 			Plotly.react(chartDiv, traces, finalLayout, config);
 		} else {
 			// Initial chart creation
+			log('📊 Creating new chart with Plotly.newPlot', {
+				chartTitle: chart.title,
+				traces: traces.length,
+				leftKPIs: chart.yLeft.length,
+				rightKPIs: chart.yRight.length
+			});
 			Plotly.newPlot(chartDiv, traces, finalLayout, config);
 			chartInitialized = true;
 		}
@@ -251,11 +261,23 @@
 	}
 
 	onMount(() => {
+		log('📈 ChartCard mounted', {
+			chartTitle: chart.title,
+			leftKPIs: chart.yLeft.length,
+			rightKPIs: chart.yRight.length
+		});
+
 		// Initial container size measurement
 		if (chartDiv) {
 			const rect = chartDiv.getBoundingClientRect();
 			containerSize.width = rect.width;
 			containerSize.height = rect.height;
+			
+			log('📐 Initial container size', {
+				chartTitle: chart.title,
+				width: rect.width,
+				height: rect.height
+			});
 		}
 
 		renderChart();

package/dist/core/Charts/ChartCard.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Chart as ChartModel, ChartMarker, MovingAverageConfig } from './charts.model.js';
+import type { Chart as ChartModel, ChartMarker, MovingAverageConfig, HoverMode } from './charts.model.js';
 import { type ProcessedChartData } from './data-processor.js';
 interface Props {
     chart: ChartModel;
@@ -9,6 +9,8 @@ interface Props {
     sectionId?: string;
     sectionMovingAverage?: MovingAverageConfig;
     layoutMovingAverage?: MovingAverageConfig;
+    layoutHoverMode?: HoverMode;
+    layoutColoredHover?: boolean;
     runtimeMAOverride?: MovingAverageConfig | null;
     runtimeShowOriginal?: boolean;
     runtimeShowMarkers?: boolean;

package/dist/core/Charts/ChartComponent.svelte

@@ -6,6 +6,7 @@
 	import ChartCard from './ChartCard.svelte';
 	import GlobalControls from './GlobalControls.svelte';
 	import { getPreprocessedData, type ProcessedChartData } from './data-processor.js';
+	import { log } from '../logger';
 
 	interface Props {
 		layout: Layout;
@@ -55,6 +56,19 @@
 
 	let { layout, data, mode, markers, plotlyLayout, enableAdaptation = true, showGlobalControls = true }: Props = $props();
 	
+	// Log component initialization
+	$effect(() => {
+		log('📊 ChartComponent initialized', {
+			mode,
+			dataRows: data.length,
+			sections: layout.sections.length,
+			totalCharts: layout.sections.reduce((sum, s) => sum + s.charts.length, 0),
+			enableAdaptation,
+			showGlobalControls,
+			layoutHoverMode: layout.hoverMode
+		});
+	});
+	
 	// Preprocess raw data once - automatically memoized by Svelte's $derived
 	// This extracts all KPI values and timestamps, cached until data or layout changes
 	let processedData = $derived(getPreprocessedData(data, layout));
@@ -76,6 +90,12 @@
 	
 	// Handler for global controls updates
 	function handleControlsUpdate(updatedControls: GlobalChartControls) {
+		log('🎛️ Global controls updated', {
+			movingAverageEnabled: updatedControls.movingAverage?.enabled,
+			windowOverride: updatedControls.movingAverage?.windowOverride,
+			markersEnabled: updatedControls.markers?.enabled,
+			legendEnabled: updatedControls.legend?.enabled
+		});
 		globalControls = updatedControls;
 	}
 	
@@ -166,12 +186,17 @@
 
 	function zoomSelectedChart() {
 		if (contextMenu.chart && contextMenu.section) {
+			log('🔍 Zooming chart', {
+				chartTitle: contextMenu.chart.title,
+				sectionId: contextMenu.section.id
+			});
 			zoomedChart = { chart: contextMenu.chart, section: contextMenu.section };
 		}
 		closeContextMenu();
 	}
 
 	function exitZoom() {
+		log('🔍 Exiting zoom mode');
 		zoomedChart = null;
 		closeContextMenu();
 	}
@@ -303,6 +328,7 @@
 					sectionId={section.id}
 					sectionMovingAverage={section.movingAverage}
 					layoutMovingAverage={layout.movingAverage}
+					layoutHoverMode={layout.hoverMode}
 					runtimeMAOverride={effectiveMAOverride}
 					runtimeShowOriginal={globalControls.movingAverage?.showOriginal}
 					runtimeShowMarkers={globalControls.markers?.enabled}

package/dist/core/Charts/adapt.js

@@ -4,46 +4,36 @@
  */
 /**
  * Adapts hover behavior based on container size and series count
- * Optimizes tooltip display and performance for different chart sizes
+ * Preserves user's configured hover mode unless adaptation is critical for performance/UX
  */
-function adaptHoverBehavior(layout, containerSize, chartInfo) {
+function adaptHoverBehavior(layout, containerSize, chartInfo, originalHoverMode) {
     const { width, height } = containerSize;
     const isTiny = width < 250 || height < 200;
     const isSmall = width < 400 || height < 300;
     const isMedium = width < 600 || height < 400;
     const totalSeries = chartInfo.leftSeriesCount + chartInfo.rightSeriesCount;
-    // Priority 1: Disable hover in tiny charts (performance + UX)
-    if (isTiny) {
-        layout.hovermode = 'closest'; // Single point instead of unified
-        if (layout.hoverlabel) {
-            layout.hoverlabel.font = layout.hoverlabel.font || {};
-            layout.hoverlabel.font.size = 9; // Smaller font
-        }
-        return layout;
-    }
-    // Priority 2: Simplify hover in small charts
+    // Only override hover mode in critical cases for performance/UX
     if (isSmall) {
-        layout.hovermode = 'x'; // Single point instead of unified
+        // Force 'closest' in small charts for performance and readability
+        layout.hovermode = 'closest';
         if (layout.hoverlabel) {
             layout.hoverlabel.font = layout.hoverlabel.font || {};
-            layout.hoverlabel.font.size = 9; // Smaller font
+            layout.hoverlabel.font.size = 9;
         }
         return layout;
     }
-    // Priority 3: Adaptive hover mode based on series count
-    if (totalSeries > 4 && isMedium) {
-        // Too many series in medium chart - switch to closest
-        layout.hovermode = 'x';
-    }
-    else if (totalSeries > 8) {
-        // Very many series - even in large charts, use x
-        layout.hovermode = 'x';
+    // For all other sizes, preserve the user's configured hover mode
+    if (originalHoverMode !== undefined) {
+        layout.hovermode = originalHoverMode;
     }
-    // Otherwise keep default 'x unified' from base layout
-    // Priority 4: Adaptive hover label font size
+    // If no original hover mode provided, keep whatever is in the layout
+    // Only adapt font sizes, not hover behavior for non-tiny charts
     if (layout.hoverlabel) {
         layout.hoverlabel.font = layout.hoverlabel.font || {};
-        if (isMedium) {
+        if (isSmall) {
+            layout.hoverlabel.font.size = 9;
+        }
+        else if (isMedium) {
             layout.hoverlabel.font.size = 10;
         }
         else {
@@ -62,6 +52,8 @@ export function adaptPlotlyLayout(baseLayout, containerSize, chartInfo, config =
         return baseLayout;
     const { width, height } = containerSize;
     const adaptedLayout = { ...baseLayout };
+    // Preserve the original hover mode before any adaptations
+    const originalHoverMode = baseLayout.hovermode;
     // Size categories for adaptation rules
     const isTiny = width < 250 || height < 200;
     const isSmall = width < 400 || height < 300;
@@ -146,8 +138,8 @@ export function adaptPlotlyLayout(baseLayout, containerSize, chartInfo, config =
             adaptedLayout.legend.font.size = 11;
         }
     }
-    // Apply adaptive hover behavior (disable in tiny, simplify in small, optimize for series count)
-    adaptHoverBehavior(adaptedLayout, containerSize, chartInfo);
+    // Apply adaptive hover behavior (preserve user config except in tiny charts)
+    adaptHoverBehavior(adaptedLayout, containerSize, chartInfo, originalHoverMode);
     return adaptedLayout;
 }
 /**

package/dist/core/Charts/charts.model.d.ts

@@ -1,4 +1,5 @@
 export type Scale = "percent" | "absolute";
+export type LineStyle = 'solid' | 'dash' | 'dot' | 'dashdot' | 'longdash' | 'longdashdot';
 export interface MovingAverageConfig {
     enabled: boolean;
     window: number;
@@ -11,6 +12,7 @@ export interface KPI {
     scale: Scale;
     unit: string;
     color?: string;
+    lineStyle?: LineStyle;
     movingAverage?: MovingAverageConfig;
 }
 export type ChartPosition = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
@@ -33,10 +35,13 @@ export interface Section {
     movingAverage?: MovingAverageConfig;
 }
 export type Mode = "tabs" | "scrollspy";
+export type HoverMode = 'x' | 'y' | 'closest' | 'x unified' | 'y unified' | false;
 export interface Layout {
     layoutName: string;
     sections: Section[];
     movingAverage?: MovingAverageConfig;
+    hoverMode?: HoverMode;
+    coloredHover?: boolean;
 }
 export interface ChartMarker {
     date: string | Date;
@@ -59,3 +64,7 @@ export interface GlobalChartControls {
         enabled: boolean;
     };
 }
+export interface CellStylingConfig {
+    bandColors: Record<string, string>;
+    sectorLineStyles: Record<string, LineStyle>;
+}

package/dist/core/Charts/data-processor.js

@@ -1,3 +1,4 @@
+import { log } from '../logger';
 /**
  * Extract all unique KPI rawNames from a layout configuration
  * This determines which columns we need to extract from raw data
@@ -16,6 +17,10 @@ export function extractKPINames(layout) {
             }
         }
     }
+    log('📋 KPI names extracted', {
+        totalKPIs: kpiNames.size,
+        kpiNames: Array.from(kpiNames)
+    });
     return kpiNames;
 }
 /**
@@ -28,6 +33,11 @@ export function extractKPINames(layout) {
  * @returns Preprocessed data ready for chart rendering
  */
 export function preprocessChartData(data, layout, timestampField = 'TIMESTAMP') {
+    log('🔄 Preprocessing chart data', {
+        rawDataRows: data.length,
+        sections: layout.sections.length,
+        timestampField
+    });
     // Extract all unique KPI names we need to process
     const kpiNames = extractKPINames(layout);
     // Initialize the result map
@@ -42,9 +52,18 @@ export function preprocessChartData(data, layout, timestampField = 'TIMESTAMP')
         })
             .filter(val => !isNaN(val)); // Remove invalid values
         kpiValues.set(kpiName, values);
+        if (values.length === 0) {
+            log('⚠️ No valid values found for KPI', { kpiName });
+        }
     }
     // Extract timestamps once
     const timestamps = data.map(row => row[timestampField]);
+    log('✅ Data preprocessing complete', {
+        processedKPIs: kpiValues.size,
+        timestampCount: timestamps.length,
+        sampleKPI: kpiValues.keys().next().value,
+        sampleValues: kpiValues.values().next().value?.slice(0, 3)
+    });
     return {
         kpiValues,
         timestamps,
@@ -72,9 +91,11 @@ export function getPreprocessedData(data, layout, timestampField = 'TIMESTAMP')
     if (cached) {
         // Verify cache is still valid (data reference matches)
         if (cached._rawDataRef === data) {
+            log('💾 Using cached preprocessed data');
             return cached;
         }
     }
+    log('🔄 Cache miss - preprocessing data');
     // Cache miss or invalid - compute and cache
     const processed = preprocessChartData(data, layout, timestampField);
     preprocessCache.set(data, processed);

package/dist/core/Charts/data-utils.d.ts

@@ -1,7 +1,7 @@
-import type { KPI } from './charts.model.js';
+import type { KPI, HoverMode } from './charts.model.js';
 export declare function processKPIData(data: any[], kpi: KPI): number[];
 export declare function calculateMovingAverage(values: number[], window: number): number[];
-export declare function createTimeSeriesTrace(values: number[], timestamps: any[], kpi: KPI, yaxis?: 'y1' | 'y2', colorIndex?: number, chartType?: string, stackGroup?: string): any;
+export declare function createTimeSeriesTrace(values: number[], timestamps: any[], kpi: KPI, yaxis?: 'y1' | 'y2', colorIndex?: number, chartType?: string, stackGroup?: string, coloredHover?: boolean): any;
 /**
  * Create time series trace(s) with optional moving average
  * @param values - Pre-processed numeric values array for the KPI
@@ -13,7 +13,7 @@ export declare function createTimeSeriesTrace(values: number[], timestamps: any[
  * @param stackGroup - Optional stack group identifier
  * @returns Array of traces (original + MA if configured)
  */
-export declare function createTimeSeriesTraceWithMA(values: number[], timestamps: any[], kpi: KPI, yaxis?: 'y1' | 'y2', colorIndex?: number, chartType?: string, stackGroup?: string): any[];
+export declare function createTimeSeriesTraceWithMA(values: number[], timestamps: any[], kpi: KPI, yaxis?: 'y1' | 'y2', colorIndex?: number, chartType?: string, stackGroup?: string, coloredHover?: boolean): any[];
 export declare function getYAxisTitle(kpis: KPI[]): string;
 export declare function formatValue(value: number, scale: 'percent' | 'absolute', unit: string): string;
-export declare function createDefaultPlotlyLayout(title?: string): any;
+export declare function createDefaultPlotlyLayout(title?: string, hoverMode?: HoverMode, coloredHover?: boolean): any;

package/dist/core/Charts/data-utils.js

@@ -72,7 +72,7 @@ export function calculateMovingAverage(values, window) {
     maCache.set(cacheKey, result);
     return result;
 }
-export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', colorIndex = 0, chartType = 'line', stackGroup) {
+export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', colorIndex = 0, chartType = 'line', stackGroup, coloredHover = true) {
     // Use KPI color if provided, otherwise cycle through modern colors
     const traceColor = kpi.color || modernColors[colorIndex % modernColors.length];
     // Base trace configuration
@@ -85,6 +85,18 @@ export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', col
             `Value: %{y:,.2f} ${kpi.unit}<br>` +
             '<extra></extra>'
     };
+    // Add colored hover styling if enabled
+    if (coloredHover) {
+        baseTrace.hoverlabel = {
+            bgcolor: traceColor,
+            bordercolor: traceColor,
+            font: {
+                color: '#ffffff', // White text for better contrast
+                family: 'Inter, Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
+                size: 11
+            }
+        };
+    }
     // Configure based on chart type
     switch (chartType) {
         case 'stacked-area':
@@ -138,7 +150,7 @@ export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', col
                     width: 3,
                     shape: 'spline',
                     smoothing: 0.3,
-                    dash: yaxis === 'y1' ? 'solid' : 'dot'
+                    dash: kpi.lineStyle || (yaxis === 'y1' ? 'solid' : 'dot')
                 }
             };
     }
@@ -154,12 +166,12 @@ export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', col
  * @param stackGroup - Optional stack group identifier
  * @returns Array of traces (original + MA if configured)
  */
-export function createTimeSeriesTraceWithMA(values, timestamps, kpi, yaxis = 'y1', colorIndex = 0, chartType = 'line', stackGroup) {
+export function createTimeSeriesTraceWithMA(values, timestamps, kpi, yaxis = 'y1', colorIndex = 0, chartType = 'line', stackGroup, coloredHover = true) {
     const traces = [];
     const traceColor = kpi.color || modernColors[colorIndex % modernColors.length];
     // Add original trace (unless explicitly disabled)
     if (!kpi.movingAverage || kpi.movingAverage.showOriginal !== false) {
-        const originalTrace = createTimeSeriesTrace(values, timestamps, kpi, yaxis, colorIndex, chartType, stackGroup);
+        const originalTrace = createTimeSeriesTrace(values, timestamps, kpi, yaxis, colorIndex, chartType, stackGroup, coloredHover);
         // If MA is enabled, make the original line slightly transparent
         if (kpi.movingAverage?.enabled) {
             originalTrace.opacity = 0.4;
@@ -190,7 +202,18 @@ export function createTimeSeriesTraceWithMA(values, timestamps, kpi, yaxis = 'y1
             },
             hovertemplate: `<b>${maLabel}</b><br>` +
                 `Value: %{y:,.2f} ${kpi.unit}<br>` +
-                '<extra></extra>'
+                '<extra></extra>',
+            ...(coloredHover && {
+                hoverlabel: {
+                    bgcolor: traceColor,
+                    bordercolor: traceColor,
+                    font: {
+                        color: '#ffffff',
+                        family: 'Inter, Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
+                        size: 11
+                    }
+                }
+            })
         };
         traces.push(maTrace);
     }
@@ -209,7 +232,7 @@ export function formatValue(value, scale, unit) {
     }
     return `${value.toLocaleString()}${unit}`;
 }
-export function createDefaultPlotlyLayout(title) {
+export function createDefaultPlotlyLayout(title, hoverMode, coloredHover = true) {
     return {
         title: title ? {
             text: title,
@@ -254,8 +277,17 @@ export function createDefaultPlotlyLayout(title) {
         paper_bgcolor: 'rgba(0,0,0,0)',
         plot_bgcolor: 'rgba(0,0,0,0)',
         font: { family: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif' },
-        hovermode: 'x',
-        hoverlabel: {
+        hovermode: hoverMode !== undefined ? hoverMode : 'x',
+        hoverlabel: coloredHover ? {
+            // When coloredHover is enabled, let each trace control its own hover colors
+            font: {
+                family: 'Inter, Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
+                size: 11
+                // color will be set per trace when coloredHover is true
+            }
+            // bgcolor and bordercolor will be set per trace when coloredHover is true
+        } : {
+            // Default hover styling when coloredHover is disabled
             font: {
                 family: 'Inter, Segoe UI, Tahoma, Geneva, Verdana, sans-serif',
                 size: 11,

package/dist/core/Charts/index.d.ts

@@ -1,6 +1,6 @@
 export { default as ChartComponent } from './ChartComponent.svelte';
 export { default as ChartCard } from './ChartCard.svelte';
-export type { Layout, Section, Chart, KPI, Mode, Scale, ChartMarker, ChartGrid, ChartPosition } from './charts.model.js';
+export type { Layout, Section, Chart, KPI, Mode, Scale, ChartMarker, ChartGrid, ChartPosition, HoverMode, LineStyle, CellStylingConfig } from './charts.model.js';
 export { createTimeSeriesTrace, getYAxisTitle, formatValue, processKPIData, createDefaultPlotlyLayout } from './data-utils.js';
 export { adaptPlotlyLayout, getSizeCategory, createMarkerShapes, createMarkerAnnotations, addMarkersToLayout } from './adapt.js';
 export type { ContainerSize, ChartInfo, AdaptationConfig } from './adapt.js';

package/dist/core/TreeView/tree-utils.js

@@ -2,6 +2,7 @@
  * Tree utility functions
  * Helper functions for path manipulation, tree flattening, and state management
  */
+import { log } from '../logger';
 /**
  * Get parent path from a node path
  * @example getParentPath("site-a:sector-1:700", ":") => "site-a:sector-1"
@@ -144,10 +145,18 @@ export function saveStateToStorage(namespace, state) {
     if (!namespace)
         return;
     try {
-        localStorage.setItem(getStorageKey(namespace, 'checked'), JSON.stringify(Array.from(state.checkedPaths)));
-        localStorage.setItem(getStorageKey(namespace, 'expanded'), JSON.stringify(Array.from(state.expandedPaths)));
+        const checkedArray = Array.from(state.checkedPaths);
+        const expandedArray = Array.from(state.expandedPaths);
+        localStorage.setItem(getStorageKey(namespace, 'checked'), JSON.stringify(checkedArray));
+        localStorage.setItem(getStorageKey(namespace, 'expanded'), JSON.stringify(expandedArray));
+        log('💾 State saved to localStorage', {
+            namespace,
+            checkedCount: checkedArray.length,
+            expandedCount: expandedArray.length
+        });
     }
     catch (error) {
+        log('❌ Failed to save tree state', { namespace, error });
         console.warn('Failed to save tree state to localStorage:', error);
     }
 }
@@ -166,14 +175,23 @@ export function loadStateFromStorage(namespace, state) {
             updates.checkedPaths = new Set(checkedArray);
             // Recalculate indeterminate states
             updates.indeterminatePaths = calculateIndeterminateStates(state.nodes, updates.checkedPaths);
+            log('📂 Loaded checked paths from localStorage', {
+                namespace,
+                checkedCount: checkedArray.length
+            });
         }
         if (expandedJson) {
             const expandedArray = JSON.parse(expandedJson);
             updates.expandedPaths = new Set(expandedArray);
+            log('📂 Loaded expanded paths from localStorage', {
+                namespace,
+                expandedCount: expandedArray.length
+            });
         }
         return updates;
     }
     catch (error) {
+        log('❌ Failed to load tree state', { namespace, error });
         console.warn('Failed to load tree state from localStorage:', error);
         return {};
     }
@@ -187,8 +205,10 @@ export function clearStorageForNamespace(namespace) {
     try {
         localStorage.removeItem(getStorageKey(namespace, 'checked'));
         localStorage.removeItem(getStorageKey(namespace, 'expanded'));
+        log('🗑️ Cleared tree state from localStorage', { namespace });
     }
     catch (error) {
+        log('❌ Failed to clear tree state', { namespace, error });
         console.warn('Failed to clear tree state from localStorage:', error);
     }
 }

package/dist/core/TreeView/tree.store.js

@@ -4,19 +4,39 @@
  */
 import { writable } from 'svelte/store';
 import { flattenTree, buildInitialState, calculateIndeterminateStates, getDescendantPaths, getParentPath, saveStateToStorage, loadStateFromStorage, clearStorageForNamespace } from './tree-utils';
+import { log } from '../logger';
 /**
  * Create a tree store with state management and persistence
  */
 export function createTreeStore(config) {
+    log('🌲 Creating TreeStore', {
+        namespace: config.namespace,
+        nodeCount: config.nodes.length,
+        persistState: config.persistState,
+        defaultExpandAll: config.defaultExpandAll
+    });
     const separator = config.pathSeparator || ':';
     // Flatten tree structure
     const nodesMap = flattenTree(config.nodes, config);
+    log('📊 Tree flattened', {
+        totalNodes: nodesMap.size,
+        separator
+    });
     // Build initial state
     let state = buildInitialState(nodesMap, config);
+    log('🔧 Initial state built', {
+        checkedPaths: state.checkedPaths.size,
+        expandedPaths: state.expandedPaths.size
+    });
     // Load persisted state if enabled
     if (config.persistState && config.namespace) {
         const persistedState = loadStateFromStorage(config.namespace, state);
         state = { ...state, ...persistedState };
+        log('💾 Loaded persisted state', {
+            namespace: config.namespace,
+            checkedPaths: state.checkedPaths.size,
+            expandedPaths: state.expandedPaths.size
+        });
     }
     // Create writable store
     const store = writable({
@@ -52,10 +72,13 @@ export function createTreeStore(config) {
      * Toggle a node's checked state (with cascading)
      */
     function toggle(path) {
+        log('🔄 Toggling node', { path });
         updateState(state => {
             const nodeState = state.nodes.get(path);
-            if (!nodeState)
+            if (!nodeState) {
+                log('⚠️ Node not found', { path });
                 return state;
+            }
             const newChecked = !state.checkedPaths.has(path);
             const newCheckedPaths = new Set(state.checkedPaths);
             // Update this node
@@ -67,6 +90,11 @@ export function createTreeStore(config) {
             }
             // Cascade to all descendants
             const descendants = getDescendantPaths(path, state.nodes, separator);
+            log('📦 Cascading to descendants', {
+                path,
+                descendantCount: descendants.length,
+                newChecked
+            });
             descendants.forEach(descendantPath => {
                 if (newChecked) {
                     newCheckedPaths.add(descendantPath);
@@ -99,6 +127,12 @@ export function createTreeStore(config) {
             }
             // Recalculate indeterminate states
             const newIndeterminatePaths = calculateIndeterminateStates(state.nodes, newCheckedPaths);
+            log('✅ Toggle complete', {
+                path,
+                newChecked,
+                totalChecked: newCheckedPaths.size,
+                indeterminate: newIndeterminatePaths.size
+            });
             return {
                 ...state,
                 checkedPaths: newCheckedPaths,
@@ -155,11 +189,13 @@ export function createTreeStore(config) {
      * Check all nodes
      */
     function checkAll() {
+        log('✅ Check all nodes');
         updateState(state => {
             const newCheckedPaths = new Set();
             state.nodes.forEach((_, path) => {
                 newCheckedPaths.add(path);
             });
+            log('✅ All nodes checked', { totalChecked: newCheckedPaths.size });
             return {
                 ...state,
                 checkedPaths: newCheckedPaths,
@@ -171,6 +207,7 @@ export function createTreeStore(config) {
      * Uncheck all nodes
      */
     function uncheckAll() {
+        log('❌ Uncheck all nodes');
         updateState(state => ({
             ...state,
             checkedPaths: new Set(),

package/dist/core/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Desktop/index.js';
 export * from './Charts/index.js';
 export * from './TreeView/index.js';
+export * from './logger/index.js';

package/dist/core/index.js

@@ -6,3 +6,5 @@ export * from './Desktop/index.js';
 export * from './Charts/index.js';
 // TreeView generic hierarchical component
 export * from './TreeView/index.js';
+// Logger utility for debugging and monitoring
+export * from './logger/index.js';

package/dist/core/logger/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Simple debug logger utility
+ *
+ * @example
+ * ```typescript
+ * import { log } from './';
+ *
+ * log('User clicked button', { userId: 123 });
+ * log('Data loaded', data);
+ *
+ * // Disable logging globally
+ * log.disable();
+ *
+ * // Enable logging globally
+ * log.enable();
+ * ```
+ */
+/**
+ * Simple log function - logs to console when enabled
+ */
+export declare function log(message: string, ...args: any[]): void;
+export declare namespace log {
+    var disable: () => void;
+    var enable: () => void;
+    var isEnabled: () => boolean;
+}

package/dist/core/logger/index.js

@@ -0,0 +1,42 @@
+/**
+ * Simple debug logger utility
+ *
+ * @example
+ * ```typescript
+ * import { log } from './';
+ *
+ * log('User clicked button', { userId: 123 });
+ * log('Data loaded', data);
+ *
+ * // Disable logging globally
+ * log.disable();
+ *
+ * // Enable logging globally
+ * log.enable();
+ * ```
+ */
+let enabled = true;
+/**
+ * Simple log function - logs to console when enabled
+ */
+export function log(message, ...args) {
+    if (enabled) {
+        console.log(`[DEBUG]`, message, ...args);
+    }
+}
+/**
+ * Disable logging globally
+ */
+log.disable = () => {
+    enabled = false;
+};
+/**
+ * Enable logging globally
+ */
+log.enable = () => {
+    enabled = true;
+};
+/**
+ * Check if logging is enabled
+ */
+log.isEnabled = () => enabled;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.36",
+	"version": "0.0.38",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",