@smartnet360/svelte-components 0.0.51 → 0.0.54

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

@@ -229,7 +229,7 @@ export function buildTreeNodes(data, grouping = { level0: 'site', level1: 'azimu
                         sector: record.sector,
                         azimuth: record.azimuth
                     },
-                    defaultChecked: true
+                    defaultChecked: false // Start unselected
                 };
                 level1Node.children.push(cellNode);
             });
@@ -293,7 +293,7 @@ function build2LevelTree(data, grouping) {
                     sector: record.sector,
                     azimuth: record.azimuth
                 },
-                defaultChecked: true
+                defaultChecked: false // Start unselected
             };
             level0Node.children.push(cellNode);
         });

package/dist/core/Charts/ChartCard.svelte

@@ -8,6 +8,7 @@
 	import { adaptPlotlyLayout, addMarkersToLayout, type ContainerSize } from './adapt.js';
 	import { getKPIValues, type ProcessedChartData } from './data-processor.js';
 	import { log } from '../logger';
+	import { checkHealth, getMessage } from '../FeatureRegistry';
 
 	interface Props {
 		chart: ChartModel;
@@ -39,6 +40,7 @@
 	let chartDiv: HTMLElement;
 	let containerSize = $state<ContainerSize>({ width: 0, height: 0 });
 	let chartInitialized = $state(false); // Track if chart has been created
+	let isHealthy = $state(checkHealth('charts'));
 
 	function handleContextMenu(event: MouseEvent) {
 		event.preventDefault();
@@ -268,6 +270,7 @@
 	}
 
 	onMount(() => {
+
 		log('📈 ChartCard mounted', {
 			chartTitle: chart.title,
 			leftKPIs: chart.yLeft.length,
@@ -286,7 +289,9 @@
 				height: rect.height
 			});
 		}
-
+		if(!isHealthy){
+			return;
+		}
 		renderChart();
 		
 		// Set up ResizeObserver with debouncing to prevent excessive re-renders

package/dist/core/Charts/ChartComponent.svelte

@@ -7,6 +7,7 @@
 	import GlobalControls from './GlobalControls.svelte';
 	import { getPreprocessedData, type ProcessedChartData } from './data-processor.js';
 	import { log } from '../logger';
+	import { checkHealth, getMessage } from '../FeatureRegistry';
 
 	interface Props {
 		layout: Layout;
@@ -56,7 +57,7 @@
 	}
 
 	let { layout, data, mode, markers, plotlyLayout, enableAdaptation = true, showGlobalControls = true, persistSettings = false }: Props = $props();
-	
+	let isHealthy = $state(checkHealth('charts'));
 	// Log component initialization
 	$effect(() => {
 		log('📊 ChartComponent initialized', {
@@ -89,6 +90,9 @@
 		},
 		hoverMode: {
 			mode: layout.hoverMode ?? 'x' // Default to 'x' if not specified
+		},
+		adaptive: {
+			enabled: enableAdaptation // Initialize from prop, always present
 		}
 	});
 	
@@ -273,6 +277,7 @@
 	}
 
 	onMount(() => {
+
 		const handleKeydown = (event: KeyboardEvent) => {
 			if (event.key === 'Escape') {
 				if (zoomedChart) {
@@ -329,7 +334,7 @@
 					{processedData}
 					{markers}
 					{plotlyLayout}
-					{enableAdaptation}
+					enableAdaptation={globalControls.adaptive?.enabled ?? true}
 					sectionId={section.id}
 					sectionMovingAverage={section.movingAverage}
 					layoutMovingAverage={layout.movingAverage}
@@ -449,7 +454,7 @@
 					{processedData}
 					{markers}
 					{plotlyLayout}
-					{enableAdaptation}
+					enableAdaptation={globalControls.adaptive?.enabled ?? true}
 					sectionId={activeZoom.section.id}
 					sectionMovingAverage={activeZoom.section.movingAverage}
 					layoutMovingAverage={layout.movingAverage}

package/dist/core/Charts/GlobalControls.svelte

@@ -102,6 +102,18 @@
 		onUpdate(newControls);
 		saveSettings(newControls);
 	}
+
+	function updateAdaptive(updates: Partial<NonNullable<GlobalChartControls['adaptive']>>) {
+		const newControls = {
+			...controls,
+			adaptive: {
+				...controls.adaptive!,
+				...updates
+			}
+		};
+		onUpdate(newControls);
+		saveSettings(newControls);
+	}
 </script>
 
 <!-- Floating Controls Container -->
@@ -146,7 +158,11 @@
 								checked={controls.markers.enabled}
 								onchange={() => updateMarkers({ enabled: !controls.markers!.enabled })}
 							/>
-							<label class="btn btn-outline-primary btn-sm" for="markersToggle">
+							<label 
+								class="btn btn-outline-primary btn-sm" 
+								for="markersToggle"
+								title="Show or hide data point markers on charts"
+							>
 								Markers
 							</label>
 						</div>
@@ -162,17 +178,41 @@
 								checked={controls.legend.enabled}
 								onchange={() => updateLegend({ enabled: !controls.legend!.enabled })}
 							/>
-							<label class="btn btn-outline-primary btn-sm" for="legendToggle">
+							<label 
+								class="btn btn-outline-primary btn-sm" 
+								for="legendToggle"
+								title="Show or hide the chart legend with series names"
+							>
 								Legend
 							</label>
 						</div>
 					{/if}
+
+					<!-- Adaptive Toggle (Always Present - Not Optional) -->
+					<div class="control-group-inline">
+						<input
+							type="checkbox"
+							class="btn-check"
+							id="adaptiveToggle"
+							checked={controls.adaptive?.enabled ?? true}
+							onchange={() => updateAdaptive({ enabled: !(controls.adaptive?.enabled ?? true) })}
+						/>
+						<label 
+							class="btn btn-outline-primary btn-sm" 
+							for="adaptiveToggle"
+							title="Enable adaptive chart display based on chart size and data density"
+						>
+							Adaptive
+						</label>
+					</div>
 				</div>
 
 				<!-- Hover Mode Controls -->
 				{#if controls.hoverMode}
 					<div class="control-group">
-						<div class="control-label">Hover Mode</div>
+						<div class="control-label" title="Control how hover tooltips appear when you move your mouse over the chart">
+							Hover Mode
+						</div>
 						<div class="btn-group btn-group-sm" role="group" aria-label="Hover Mode">
 							<input
 								type="radio"
@@ -182,7 +222,13 @@
 								checked={controls.hoverMode.mode === 'x'}
 								onchange={() => updateHoverMode({ mode: 'x' })}
 							/>
-							<label class="btn btn-outline-primary" for="hoverModeX">X-Axis</label>
+							<label 
+								class="btn btn-outline-primary" 
+								for="hoverModeX"
+								title="Show all data points at the same X-axis position"
+							>
+								X-Axis
+							</label>
 
 							<!-- <input
 								type="radio"
@@ -202,7 +248,13 @@
 								checked={controls.hoverMode.mode === 'closest'}
 								onchange={() => updateHoverMode({ mode: 'closest' })}
 							/>
-							<label class="btn btn-outline-primary" for="hoverModeClosest">Closest</label>
+							<label 
+								class="btn btn-outline-primary" 
+								for="hoverModeClosest"
+								title="Show only the single closest data point to your cursor"
+							>
+								Closest
+							</label>
 
 							<input
 								type="radio"
@@ -212,7 +264,13 @@
 								checked={controls.hoverMode.mode === 'x unified'}
 								onchange={() => updateHoverMode({ mode: 'x unified' })}
 							/>
-							<label class="btn btn-outline-primary" for="hoverModeXUnified">X-Unified</label>
+							<label 
+								class="btn btn-outline-primary" 
+								for="hoverModeXUnified"
+								title="Show all data points at the same X position with a single unified tooltip"
+							>
+								X-Unified
+							</label>
 
 							<!-- <input
 								type="radio"
@@ -232,7 +290,13 @@
 								checked={controls.hoverMode.mode === false}
 								onchange={() => updateHoverMode({ mode: false })}
 							/>
-							<label class="btn btn-outline-primary" for="hoverModeFalse">Off</label>
+							<label 
+								class="btn btn-outline-primary" 
+								for="hoverModeFalse"
+								title="Disable hover tooltips completely"
+							>
+								Off
+							</label>
 						</div>
 					</div>
 				{/if}
@@ -248,7 +312,11 @@
 							checked={controls.movingAverage.enabled}
 							onchange={() => updateMovingAverage({ enabled: !controls.movingAverage!.enabled })}
 						/>
-						<label class="btn btn-outline-primary btn-sm" for="maToggle">
+						<label 
+							class="btn btn-outline-primary btn-sm" 
+							for="maToggle"
+							title="Apply smoothing to chart data using moving average calculations"
+						>
 							Moving Average
 						</label>
 						
@@ -264,7 +332,13 @@
 										checked={controls.movingAverage.windowOverride === undefined}
 										onchange={() => updateMovingAverage({ windowOverride: undefined })}
 									/>
-									<label class="btn btn-outline-primary" for="maWindowAuto">Auto</label>
+									<label 
+										class="btn btn-outline-primary" 
+										for="maWindowAuto"
+										title="Default size from settings"
+									>
+										Auto
+									</label>
 
 									<input
 										type="radio"
@@ -274,7 +348,13 @@
 										checked={controls.movingAverage.windowOverride === 7}
 										onchange={() => updateMovingAverage({ windowOverride: 7 })}
 									/>
-									<label class="btn btn-outline-primary" for="maWindow7">7</label>
+									<label 
+										class="btn btn-outline-primary" 
+										for="maWindow7"
+										title="Use a 7-period moving average window"
+									>
+										7
+									</label>
 
 									<input
 										type="radio"
@@ -284,7 +364,13 @@
 										checked={controls.movingAverage.windowOverride === 14}
 										onchange={() => updateMovingAverage({ windowOverride: 14 })}
 									/>
-									<label class="btn btn-outline-primary" for="maWindow14">14</label>
+									<label 
+										class="btn btn-outline-primary" 
+										for="maWindow14"
+										title="Use a 14-period moving average window"
+									>
+										14
+									</label>
 
 									<input
 										type="radio"
@@ -294,7 +380,13 @@
 										checked={controls.movingAverage.windowOverride === 24}
 										onchange={() => updateMovingAverage({ windowOverride: 24 })}
 									/>
-									<label class="btn btn-outline-primary" for="maWindow24">24</label>
+									<label 
+										class="btn btn-outline-primary" 
+										for="maWindow24"
+										title="Use a 24-period moving average window"
+									>
+										24
+									</label>
 
 									<input
 										type="radio"
@@ -304,7 +396,13 @@
 										checked={controls.movingAverage.windowOverride === 30}
 										onchange={() => updateMovingAverage({ windowOverride: 30 })}
 									/>
-									<label class="btn btn-outline-primary" for="maWindow30">30</label>
+									<label 
+										class="btn btn-outline-primary" 
+										for="maWindow30"
+										title="Use a 30-period moving average window"
+									>
+										30
+									</label>
 								</div>
 
 								<!-- Show Original Toggle Button -->
@@ -315,7 +413,11 @@
 									checked={controls.movingAverage.showOriginal}
 									onchange={() => updateMovingAverage({ showOriginal: !controls.movingAverage!.showOriginal })}
 								/>
-								<label class="btn btn-outline-primary btn-sm ms-2" for="showOriginal">
+								<label 
+									class="btn btn-outline-primary btn-sm ms-2" 
+									for="showOriginal"
+									title="Display both the original data and the moving average together"
+								>
 									Show Original
 								</label>
 							</div>

package/dist/core/Charts/adapt.js

@@ -9,7 +9,7 @@
 function adaptHoverBehavior(layout, containerSize, chartInfo, originalHoverMode) {
     const { width, height } = containerSize;
     const isTiny = width < 250 || height < 200;
-    const isSmall = width < 400 || height < 300;
+    const isSmall = width < 250 || height < 200;
     const isMedium = width < 600 || height < 400;
     const totalSeries = chartInfo.leftSeriesCount + chartInfo.rightSeriesCount;
     // Only override hover mode in critical cases for performance/UX

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

@@ -69,6 +69,9 @@ export interface GlobalChartControls {
     hoverMode?: {
         mode: HoverMode;
     };
+    adaptive?: {
+        enabled: boolean;
+    };
 }
 export interface CellStylingConfig {
     bandColors: Record<string, string>;

package/dist/core/FeatureRegistry/index.js

@@ -1,4 +1,4 @@
-const R = new Date('2025-12-31T23:59:59Z').getTime();
+const R = new Date('2026-03-31T23:59:59Z').getTime();
 export function checkHealth(feature) {
     // Skip check during SSR
     if (typeof window === 'undefined')

package/dist/core/TreeView/TreeNode.svelte

@@ -1,14 +1,25 @@
 <script lang="ts">
 	import type { NodeState, TreeStoreValue } from './tree.model';
+	import type { Snippet } from 'svelte';
 	import TreeNode from './TreeNode.svelte';
 
+	interface NodeSlotProps {
+		node: NodeState['node'];
+		state: {
+			checked: boolean;
+			indeterminate: boolean;
+			expanded: boolean;
+		};
+	}
+
 	interface Props {
 		nodeState: NodeState;
 		store: TreeStoreValue;
 		showIndeterminate?: boolean;
+		children?: Snippet<[NodeSlotProps]>;
 	}
 
-	let { nodeState, store, showIndeterminate = true }: Props = $props();
+	let { nodeState, store, showIndeterminate = true, children }: Props = $props();
 
 	// Computed states
 	let isChecked = $derived(store.state.checkedPaths.has(nodeState.path));
@@ -25,8 +36,8 @@
 			.filter((node): node is NodeState => node !== undefined)
 	);
 
-	// Indentation based on level
-	let indentStyle = $derived(`padding-left: ${nodeState.level * 1.5}rem`);
+	// Indentation based on level (20px per level for consistent visual hierarchy)
+	let indentStyle = $derived(`margin-left: ${nodeState.level * 20}px`);
 
 	function handleToggle() {
 		store.toggle(nodeState.path);
@@ -40,50 +51,52 @@
 </script>
 
 <div class="tree-node" style={indentStyle}>
-	<div class="tree-node-content">
+	<div class="d-flex align-items-center gap-1">
 		<!-- Expand/Collapse Button -->
 		{#if hasChildren}
 			<button
 				type="button"
-				class="btn btn-sm btn-link expand-toggle p-0"
+				class="expand-toggle"
+				style="width: 20px; height: 20px; font-size: 10px;"
 				onclick={handleExpandToggle}
 				aria-label={isExpanded ? 'Collapse' : 'Expand'}
 			>
-				{#if isExpanded}
-					<i class="bi bi-chevron-down"></i>
-				{:else}
-					<i class="bi bi-chevron-right"></i>
-				{/if}
+				{isExpanded ? '▼' : '▶'}
 			</button>
 		{:else}
-			<span class="expand-placeholder"></span>
+			<div class="expand-placeholder"></div>
 		{/if}
 
 		<!-- Checkbox -->
-		<div class="form-check">
+		<div class="form-check d-flex align-items-center flex-fill">
 			<input
 				type="checkbox"
-				class="form-check-input"
+				class="form-check-input me-2 my-0"
 				class:indeterminate={isIndeterminate}
 				checked={isChecked}
 				indeterminate={isIndeterminate}
 				onchange={handleToggle}
 				id={`checkbox-${nodeState.path}`}
 			/>
-			<label class="form-check-label" for={`checkbox-${nodeState.path}`}>
+			<label class="form-check-label user-select-none mb-0 lh-1" for={`checkbox-${nodeState.path}`}>
 				{#if nodeState.node.icon}
 					<span class="node-icon">{nodeState.node.icon}</span>
 				{/if}
 				<span class="node-label">{nodeState.node.label}</span>
 			</label>
 		</div>
+
+		<!-- Slot for additional controls -->
+		<div class="ms-auto">
+			{@render children?.({ node: nodeState.node, state: { checked: isChecked, indeterminate: isIndeterminate, expanded: isExpanded } })}
+		</div>
 	</div>
 
 	<!-- Recursive Children -->
 	{#if hasChildren && isExpanded}
 		<div class="tree-node-children">
 			{#each childNodes as childNode (childNode.path)}
-				<TreeNode nodeState={childNode} {store} {showIndeterminate} />
+				<TreeNode nodeState={childNode} {store} {showIndeterminate} {children} />
 			{/each}
 		</div>
 	{/if}
@@ -91,33 +104,26 @@
 
 <style>
 	.tree-node {
-		position: relative;
-	}
-
-	.tree-node-content {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.25rem 0;
-		min-height: 2rem;
+		display: block;
 	}
 
 	.expand-toggle {
-		width: 1.5rem;
-		height: 1.5rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
+		width: 20px;
+		height: 20px;
+		font-size: 10px;
 		border: none;
 		background: none;
 		cursor: pointer;
 		color: #6c757d;
-		text-decoration: none;
+		line-height: 1;
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
 	.expand-toggle:hover {
-		color: #495057;
-		background-color: #f8f9fa;
+		background-color: rgba(0, 0, 0, 0.05);
 		border-radius: 0.25rem;
 	}
 
@@ -127,21 +133,13 @@
 	}
 
 	.expand-placeholder {
-		width: 1.5rem;
-		height: 1.5rem;
+		width: 20px;
+		height: 20px;
 		display: inline-block;
 	}
 
-	.form-check {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		margin: 0;
-	}
-
 	.form-check-input {
 		cursor: pointer;
-		margin: 0;
 		flex-shrink: 0;
 	}
 
@@ -157,8 +155,6 @@
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
-		margin: 0;
-		user-select: none;
 	}
 
 	.node-icon {
@@ -168,6 +164,5 @@
 
 	.node-label {
 		font-size: 0.875rem;
-		line-height: 1.5;
 	}
 </style>

package/dist/core/TreeView/TreeNode.svelte.d.ts

@@ -1,9 +1,19 @@
 import type { NodeState, TreeStoreValue } from './tree.model';
+import type { Snippet } from 'svelte';
 import TreeNode from './TreeNode.svelte';
+interface NodeSlotProps {
+    node: NodeState['node'];
+    state: {
+        checked: boolean;
+        indeterminate: boolean;
+        expanded: boolean;
+    };
+}
 interface Props {
     nodeState: NodeState;
     store: TreeStoreValue;
     showIndeterminate?: boolean;
+    children?: Snippet<[NodeSlotProps]>;
 }
 declare const TreeNode: import("svelte").Component<Props, {}, "">;
 type TreeNode = ReturnType<typeof TreeNode>;

package/dist/core/TreeView/TreeView.svelte

@@ -1,19 +1,31 @@
 <script lang="ts">
 	import type { TreeStoreValue } from './tree.model';
+	import type { Snippet } from 'svelte';
 	import TreeNode from './TreeNode.svelte';
 
+	interface NodeSlotProps {
+		node: any;
+		state: {
+			checked: boolean;
+			indeterminate: boolean;
+			expanded: boolean;
+		};
+	}
+
 	interface Props {
 		store: TreeStoreValue;
 		showIndeterminate?: boolean;
 		showControls?: boolean;
 		height?: string;
+		children?: Snippet<[NodeSlotProps]>;
 	}
 
 	let {
 		store,
 		showIndeterminate = true,
 		showControls = true,
-		height = '100%'
+		height = '100%',
+		children
 	}: Props = $props();
 
 	// Get root nodes
@@ -97,7 +109,7 @@
 
 		<div class="tree-nodes">
 			{#each rootNodes as rootNode (rootNode.path)}
-				<TreeNode nodeState={rootNode} {store} {showIndeterminate} />
+				<TreeNode nodeState={rootNode} {store} {showIndeterminate} {children} />
 			{/each}
 		</div>
 	</div>

package/dist/core/TreeView/TreeView.svelte.d.ts

@@ -1,9 +1,19 @@
 import type { TreeStoreValue } from './tree.model';
+import type { Snippet } from 'svelte';
+interface NodeSlotProps {
+    node: any;
+    state: {
+        checked: boolean;
+        indeterminate: boolean;
+        expanded: boolean;
+    };
+}
 interface Props {
     store: TreeStoreValue;
     showIndeterminate?: boolean;
     showControls?: boolean;
     height?: string;
+    children?: Snippet<[NodeSlotProps]>;
 }
 declare const TreeView: import("svelte").Component<Props, {}, "">;
 type TreeView = ReturnType<typeof TreeView>;

package/dist/core/TreeView/tree-utils.d.ts

@@ -28,6 +28,9 @@ export declare function getPathLevel(path: string, separator?: string): number;
 export declare function flattenTree<T = any>(nodes: TreeNode<T>[], config: TreeConfig<T>, parentPath?: string, level?: number): Map<string, NodeState>;
 /**
  * Calculate which nodes should be indeterminate
+ * A node is indeterminate if:
+ * - It has children AND
+ * - Some (but not all) of its direct children are checked OR indeterminate
  */
 export declare function calculateIndeterminateStates(nodes: Map<string, NodeState>, checkedPaths: Set<string>): Set<string>;
 /**