@smartnet360/svelte-components 0.0.38 → 0.0.40

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

@@ -2,22 +2,23 @@
 
 <script lang="ts">
 	import { TreeView, createTreeStore } from '../../core/TreeView';
-	import { ChartComponent, type Layout, type CellStylingConfig } from '../../core/Charts';
+	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';
+    import type {ChartMarker, Mode } from '../../index.js';
 
 	interface Props {
 		rawData: CellTrafficRecord[];
 		baseLayout: Layout;
 		baseMetrics: string[];
         mode: Mode;
+		markers?: ChartMarker[];
 		cellStyling?: CellStylingConfig; // Optional cell styling config (defaults to defaultCellStyling)
 	}
 
-	let { rawData, baseLayout, baseMetrics, mode = "scrollspy", cellStyling = defaultCellStyling }: Props = $props();
+	let { rawData, baseLayout, baseMetrics, mode = "scrollspy", markers = [], cellStyling = defaultCellStyling }: Props = $props();
 
 	let treeStore = $state<ReturnType<typeof createTreeStore> | null>(null);
 
@@ -125,6 +126,7 @@
 					layout={chartLayout}
 					data={chartData}
 					mode={mode}
+					markers={markers}
 					showGlobalControls={true}
 					enableAdaptation={true}
 				/>

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

@@ -1,11 +1,12 @@
 import { type Layout, type CellStylingConfig } from '../../core/Charts';
 import { type CellTrafficRecord } from './index';
-import type { Mode } from '../../index.js';
+import type { ChartMarker, Mode } from '../../index.js';
 interface Props {
     rawData: CellTrafficRecord[];
     baseLayout: Layout;
     baseMetrics: string[];
     mode: Mode;
+    markers?: ChartMarker[];
     cellStyling?: CellStylingConfig;
 }
 declare const SiteCheck: import("svelte").Component<Props, {}, "">;

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

@@ -1,4 +1,4 @@
-import { createStyledKPI } from './transforms.js';
+import { createStyledKPI, sortCellsByBandFrequency } 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
@@ -9,14 +9,15 @@ import { createStyledKPI } from './transforms.js';
  * @returns Expanded layout with cell-specific KPIs
  */
 export function expandLayoutForCells(baseLayout, data, stylingConfig) {
-    // Get unique cells and their metadata
+    // Get unique cells and their metadata, sorted by band frequency
     const cellMap = new Map();
     data.forEach((record) => {
         if (!cellMap.has(record.cellName)) {
             cellMap.set(record.cellName, record);
         }
     });
-    const cells = Array.from(cellMap.entries()).sort(([a], [b]) => a.localeCompare(b));
+    // Sort cells by band frequency instead of alphabetically
+    const cells = sortCellsByBandFrequency(Array.from(cellMap.entries()));
     // Deep clone the layout structure and expand KPIs
     const expandedLayout = {
         layoutName: baseLayout.layoutName,

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

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

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

@@ -7,7 +7,7 @@ export { default as SiteCheck } from './SiteCheck.svelte';
 // Data loading
 export { loadCellTrafficData, getUniqueSites, getUniqueCells, groupDataByCell } from './data-loader.js';
 // Data transforms
-export { buildTreeNodes, filterChartData, transformChartData, createStyledKPI } from './transforms.js';
+export { buildTreeNodes, filterChartData, transformChartData, createStyledKPI, extractBandFromCell, getBandFrequency, sortCellsByBandFrequency } from './transforms.js';
 // Helper functions
 export { expandLayoutForCells, extractBaseMetrics } from './helper.js';
 // Default cell styling configuration

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

@@ -5,6 +5,25 @@
 import type { TreeNode } from '../../core/TreeView';
 import type { KPI, CellStylingConfig } from '../../core/Charts';
 import type { CellTrafficRecord } from './data-loader';
+/**
+ * Extract band from cell name using regex pattern matching
+ * @param cellName - Cell name like "LTE700_1", "NR3500_2", etc.
+ * @returns Band string like "LTE700", "NR3500" or null if not found
+ * @deprecated Use the band field from CellTrafficRecord instead
+ */
+export declare function extractBandFromCell(cellName: string): string | null;
+/**
+ * Get frequency order for a band (for sorting)
+ * @param band - Band string like "LTE700", "NR3500"
+ * @returns Frequency number or high value for unknown bands
+ */
+export declare function getBandFrequency(band: string | null): number;
+/**
+ * Sort items by band frequency using actual band data from records
+ * @param items - Array of [cellName, record] tuples
+ * @returns Sorted array (ascending frequency order)
+ */
+export declare function sortCellsByBandFrequency(items: [string, CellTrafficRecord][]): [string, CellTrafficRecord][];
 /**
  * Build hierarchical tree structure: Site → Sector (Azimuth) → Cell (Band)
  */

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

@@ -3,6 +3,64 @@
  * Converts raw CSV data to TreeView nodes and Chart configurations
  */
 import { log } from '../../core/logger';
+/**
+ * Band frequency mapping for consistent ordering
+ * Maps band strings to their actual frequencies in MHz
+ */
+const BAND_FREQUENCY_ORDER = {
+    // LTE Bands (by frequency)
+    'LTE700': 700,
+    'LTE800': 800,
+    'LTE900': 900,
+    'LTE1800': 1800,
+    'LTE2100': 2100,
+    'LTE2600': 2600,
+    // NR/5G Bands (by frequency)
+    'NR700': 700.1, // Slightly higher to sort after LTE700
+    'NR2100': 2100.1,
+    'NR3500': 3500,
+    'NR26000': 26000 // mmWave
+};
+/**
+ * Extract band from cell name using regex pattern matching
+ * @param cellName - Cell name like "LTE700_1", "NR3500_2", etc.
+ * @returns Band string like "LTE700", "NR3500" or null if not found
+ * @deprecated Use the band field from CellTrafficRecord instead
+ */
+export function extractBandFromCell(cellName) {
+    // Match patterns like "LTE700", "NR3500", etc.
+    const match = cellName.match(/(LTE|NR)(\d+)/i);
+    return match ? `${match[1].toUpperCase()}${match[2]}` : null;
+}
+/**
+ * Get frequency order for a band (for sorting)
+ * @param band - Band string like "LTE700", "NR3500"
+ * @returns Frequency number or high value for unknown bands
+ */
+export function getBandFrequency(band) {
+    if (!band)
+        return 999999; // Unknown bands go to end
+    return BAND_FREQUENCY_ORDER[band] || 999999;
+}
+/**
+ * Sort items by band frequency using actual band data from records
+ * @param items - Array of [cellName, record] tuples
+ * @returns Sorted array (ascending frequency order)
+ */
+export function sortCellsByBandFrequency(items) {
+    return items.sort((a, b) => {
+        const [cellNameA, recordA] = a;
+        const [cellNameB, recordB] = b;
+        const freqA = getBandFrequency(recordA.band);
+        const freqB = getBandFrequency(recordB.band);
+        // Primary sort: by frequency
+        if (freqA !== freqB) {
+            return freqA - freqB;
+        }
+        // Secondary sort: by cell name for same frequency
+        return cellNameA.localeCompare(cellNameB);
+    });
+}
 /**
  * Build hierarchical tree structure: Site → Sector (Azimuth) → Cell (Band)
  */
@@ -50,9 +108,9 @@ export function buildTreeNodes(data) {
                 defaultChecked: false, // Don't check parent nodes
                 children: []
             };
-            Array.from(cellMap.entries())
-                .sort(([a], [b]) => a.localeCompare(b))
-                .forEach(([cellName, record]) => {
+            // Sort cells by band frequency (LTE700, LTE800, etc.)
+            const sortedCells = sortCellsByBandFrequency(Array.from(cellMap.entries()));
+            sortedCells.forEach(([cellName, record]) => {
                 const cellNode = {
                     id: cellName, // Simple ID (just cell name)
                     label: `${cellName} (${record.band})`,

package/dist/core/Charts/ChartCard.svelte

@@ -178,7 +178,7 @@
 		});
 
 		// Create default modern layout using the centralized function
-		const defaultLayout: any = createDefaultPlotlyLayout(chart.title, layoutHoverMode);
+		const defaultLayout: any = createDefaultPlotlyLayout(chart.title, layoutHoverMode, layoutColoredHover);
 		
 		// Override specific properties for this chart
 		defaultLayout.yaxis.title = {

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

@@ -11,6 +11,27 @@ const modernColors = [
     '#EC4899', // Pink
     '#6B7280' // Gray
 ];
+/**
+ * Darken a hex color by a given amount
+ * @param color - Hex color string (e.g., '#3B82F6')
+ * @param amount - Amount to darken (0-1, where 0.2 = 20% darker)
+ * @returns Darkened hex color
+ */
+function darkenColor(color, amount) {
+    // Remove # if present
+    const hex = color.replace('#', '');
+    // Parse RGB components
+    const r = parseInt(hex.substr(0, 2), 16);
+    const g = parseInt(hex.substr(2, 2), 16);
+    const b = parseInt(hex.substr(4, 2), 16);
+    // Darken each component
+    const newR = Math.round(r * (1 - amount));
+    const newG = Math.round(g * (1 - amount));
+    const newB = Math.round(b * (1 - amount));
+    // Convert back to hex
+    const toHex = (n) => n.toString(16).padStart(2, '0');
+    return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
+}
 // Cache for processed KPI data to avoid reprocessing on every render
 const dataCache = new WeakMap();
 export function processKPIData(data, kpi) {
@@ -106,7 +127,10 @@ export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', col
                 mode: 'lines',
                 fill: 'tonexty',
                 stackgroup: stackGroup || 'one',
-                line: { width: 0.5, color: traceColor },
+                line: {
+                    width: 1.5, // Visible border width
+                    color: darkenColor(traceColor, 0.25) // 25% darker border for better separation
+                },
                 fillcolor: traceColor
             };
         case 'stacked-percentage':
@@ -117,7 +141,10 @@ export function createTimeSeriesTrace(values, timestamps, kpi, yaxis = 'y1', col
                 fill: 'tonexty',
                 stackgroup: stackGroup || 'one',
                 groupnorm: 'percent',
-                line: { width: 0.5, color: traceColor },
+                line: {
+                    width: 1.5, // Visible border width
+                    color: darkenColor(traceColor, 0.25) // 25% darker border for better separation
+                },
                 fillcolor: traceColor,
                 hovertemplate: `<b>${kpi.name}</b><br>` +
                     `Percentage: %{y:.1f}%<br>` +

package/dist/core/Settings/FieldRenderer.svelte

@@ -0,0 +1,234 @@
+<script lang="ts">
+	import type { FieldDefinition } from './types';
+	
+	/**
+	 * Generic Field Renderer
+	 * 
+	 * Renders a form field based on its type definition.
+	 * Uses Bootstrap form components for styling.
+	 * Works with hierarchical store structure.
+	 */
+	
+	export let field: FieldDefinition;
+	export let segmentId: string;
+	export let store: any; // The hierarchical settings store
+	export let value: any;
+	
+	// Generate unique ID for form elements
+	const inputId = `field-${segmentId}-${field.id}`;
+	
+	// Handle value changes - update the hierarchical store
+	function handleChange(newValue: any) {
+		store.update(segmentId, field.id, newValue);
+	}
+</script>
+
+<div class="field-wrapper mb-3">
+	{#if field.type === 'boolean'}
+		<div class="form-check form-switch">
+			<input
+				id={inputId}
+				type="checkbox"
+				class="form-check-input"
+				checked={value}
+				disabled={field.disabled}
+				on:change={(e) => handleChange(e.currentTarget.checked)}
+			/>
+			<label class="form-check-label" for={inputId}>
+				{field.label}
+			</label>
+			{#if field.description}
+				<div class="form-text">{field.description}</div>
+			{/if}
+		</div>
+	{:else if field.type === 'text'}
+		<label for={inputId} class="form-label">
+			{field.label}
+			{#if field.tooltip}
+				<span class="text-muted" title={field.tooltip}>ⓘ</span>
+			{/if}
+		</label>
+		<input
+			id={inputId}
+			type="text"
+			class="form-control"
+			value={value}
+			placeholder={field.placeholder}
+			maxlength={field.maxLength}
+			pattern={field.pattern}
+			disabled={field.disabled}
+			on:input={(e) => handleChange(e.currentTarget.value)}
+		/>
+		{#if field.description}
+			<div class="form-text">{field.description}</div>
+		{/if}
+	{:else if field.type === 'number'}
+		<label for={inputId} class="form-label">
+			{field.label}
+			{#if field.tooltip}
+				<span class="text-muted" title={field.tooltip}>ⓘ</span>
+			{/if}
+		</label>
+		<div class="input-group">
+			<input
+				id={inputId}
+				type="number"
+				class="form-control"
+				value={value}
+				min={field.min}
+				max={field.max}
+				step={field.step}
+				disabled={field.disabled}
+				on:input={(e) => handleChange(parseFloat(e.currentTarget.value))}
+			/>
+			{#if field.unit}
+				<span class="input-group-text">{field.unit}</span>
+			{/if}
+		</div>
+		{#if field.description}
+			<div class="form-text">{field.description}</div>
+		{/if}
+	{:else if field.type === 'range'}
+		<label for={inputId} class="form-label">
+			{field.label}
+			{#if field.showValue !== false}
+				<span class="badge bg-secondary ms-2">{value}{field.unit || ''}</span>
+			{/if}
+			{#if field.tooltip}
+				<span class="text-muted" title={field.tooltip}>ⓘ</span>
+			{/if}
+		</label>
+		<input
+			id={inputId}
+			type="range"
+			class="form-range"
+			value={value}
+			min={field.min}
+			max={field.max}
+			step={field.step || 1}
+			disabled={field.disabled}
+			on:input={(e) => handleChange(parseFloat(e.currentTarget.value))}
+		/>
+		{#if field.description}
+			<div class="form-text">{field.description}</div>
+		{/if}
+	{:else if field.type === 'color'}
+		<label for={inputId} class="form-label">
+			{field.label}
+			{#if field.tooltip}
+				<span class="text-muted" title={field.tooltip}>ⓘ</span>
+			{/if}
+		</label>
+		<div class="input-group" style="max-width: 200px;">
+			<input
+				id={inputId}
+				type="color"
+				class="form-control form-control-color"
+				value={value}
+				disabled={field.disabled}
+				on:input={(e) => handleChange(e.currentTarget.value)}
+			/>
+			<input
+				type="text"
+				class="form-control"
+				value={value}
+				disabled={field.disabled}
+				on:input={(e) => handleChange(e.currentTarget.value)}
+			/>
+		</div>
+		{#if field.description}
+			<div class="form-text">{field.description}</div>
+		{/if}
+	{:else if field.type === 'select'}
+		<label for={inputId} class="form-label">
+			{field.label}
+			{#if field.tooltip}
+				<span class="text-muted" title={field.tooltip}>ⓘ</span>
+			{/if}
+		</label>
+		<select
+			id={inputId}
+			class="form-select"
+			value={value}
+			disabled={field.disabled}
+			on:change={(e) => handleChange(e.currentTarget.value)}
+		>
+			{#each field.options as option}
+				<option value={option.value}>
+					{option.label}
+				</option>
+			{/each}
+		</select>
+		{#if field.description}
+			<div class="form-text">{field.description}</div>
+		{/if}
+	{:else if field.type === 'radio'}
+		<label class="form-label">
+			{field.label}
+			{#if field.tooltip}
+				<span class="text-muted" title={field.tooltip}>ⓘ</span>
+			{/if}
+		</label>
+		{#each field.options as option, index}
+			<div class="form-check">
+				<input
+					id={`${inputId}-${index}`}
+					type="radio"
+					class="form-check-input"
+					name={field.id}
+					value={option.value}
+					checked={value === option.value}
+					disabled={field.disabled}
+					on:change={() => handleChange(option.value)}
+				/>
+				<label class="form-check-label" for={`${inputId}-${index}`}>
+					{option.label}
+					{#if option.description}
+						<small class="text-muted d-block">{option.description}</small>
+					{/if}
+				</label>
+			</div>
+		{/each}
+		{#if field.description}
+			<div class="form-text mt-2">{field.description}</div>
+		{/if}
+	{:else if field.type === 'custom'}
+		<label class="form-label">
+			{field.label}
+			{#if field.tooltip}
+				<span class="text-muted" title={field.tooltip}>ⓘ</span>
+			{/if}
+		</label>
+		<svelte:component
+			this={field.component}
+			{value}
+			disabled={field.disabled}
+			on:change={(e: CustomEvent) => handleChange(e.detail)}
+			{...field.componentProps}
+		/>
+		{#if field.description}
+			<div class="form-text">{field.description}</div>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.field-wrapper {
+		animation: fadeIn 0.2s ease-in;
+	}
+	
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(-5px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+	
+	.text-muted {
+		cursor: help;
+	}
+</style>

package/dist/core/Settings/FieldRenderer.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { FieldDefinition } from './types';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FieldRenderer: $$__sveltets_2_IsomorphicComponent<{
+    /**
+         * Generic Field Renderer
+         *
+         * Renders a form field based on its type definition.
+         * Uses Bootstrap form components for styling.
+         * Works with hierarchical store structure.
+         */ field: FieldDefinition;
+    segmentId: string;
+    store: any;
+    value: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FieldRenderer = InstanceType<typeof FieldRenderer>;
+export default FieldRenderer;

package/dist/core/Settings/Settings.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { SettingsSchema } from './types';
+	import { createSettingsStore } from './store';
+	import FieldRenderer from './FieldRenderer.svelte';
+	
+	/**
+	 * Settings Component
+	 * 
+	 * Reusable settings panel that accepts a schema and renders
+	 * a data-driven UI with automatic persistence.
+	 * Provides hierarchical access: $settings.segment.field
+	 * 
+	 * @example
+	 * ```svelte
+	 * const settings = createSettingsStore(mySchema, 'myApp');
+	 * <Settings schema={mySchema} {settings} />
+	 * 
+	 * // Access settings in parent:
+	 * $settings.appearance.theme
+	 * $settings.editor.fontSize
+	 * ```
+	 */
+	
+	/** The settings schema defining all segments and fields */
+	export let schema: SettingsSchema;
+	
+	/** The settings store instance (create externally for access in parent) */
+	export let settings: ReturnType<typeof createSettingsStore>;
+	
+	/** Optional: Callback when settings change */
+	export let onChange: ((values: any) => void) | undefined = undefined;
+	
+	// Current values (hierarchical structure: { segment: { field: value } })
+	let currentValues: Record<string, Record<string, any>> = {};
+	
+	// Track collapsed state of segments
+	let collapsedSegments = new Map<string, boolean>();
+	
+	onMount(() => {
+		// Initialize collapsed states from schema
+		schema.segments.forEach((segment) => {
+			collapsedSegments.set(segment.id, segment.collapsed || false);
+		});
+		
+		// Subscribe to store changes
+		const unsubscribe = settings.subscribe((values) => {
+			currentValues = values;
+			if (onChange) {
+				onChange(values);
+			}
+		});
+		
+		return unsubscribe;
+	});
+	
+	function toggleSegment(segmentId: string) {
+		const current = collapsedSegments.get(segmentId) || false;
+		collapsedSegments.set(segmentId, !current);
+		collapsedSegments = collapsedSegments; // Trigger reactivity
+	}
+	
+	function resetSegmentHandler(segmentId: string) {
+		if (confirm(`Reset "${segmentId}" settings to defaults?`)) {
+			settings.resetSegment(segmentId);
+		}
+	}
+	
+	function resetAll() {
+		if (confirm('Reset all settings to defaults?')) {
+			settings.resetAll();
+		}
+	}
+	
+	// Check if a field should be visible based on visibleIf condition
+	function isFieldVisible(field: any, segmentId: string): boolean {
+		if (!field.visibleIf) return true;
+		// Pass the entire hierarchical structure to visibleIf
+		return field.visibleIf(currentValues);
+	}
+</script>
+
+<div class="settings-container">
+	<!-- Header -->
+	<div class="settings-header mb-4">
+		<div class="d-flex justify-content-between align-items-center">
+			<div>
+				<h2 class="mb-1">Settings</h2>
+				{#if schema.version}
+					<small class="text-muted">Schema v{schema.version}</small>
+				{/if}
+			</div>
+			<button class="btn btn-outline-secondary btn-sm" on:click={resetAll}>
+				Reset All
+			</button>
+		</div>
+	</div>
+	
+	<!-- Settings Cards -->
+	<div class="settings-grid">
+		{#each schema.segments as segment (segment.id)}
+			<div class="card settings-card">
+				<!-- Card Header -->
+				<div class="card-header">
+					<div class="d-flex justify-content-between align-items-center">
+						<div class="d-flex align-items-center gap-2">
+							{#if segment.icon}
+								<span class="segment-icon">{segment.icon}</span>
+							{/if}
+							<div>
+								<h5 class="mb-0">{segment.title}</h5>
+								{#if segment.description}
+									<small class="text-muted">{segment.description}</small>
+								{/if}
+							</div>
+						</div>
+						<div class="d-flex gap-2">
+							<button
+								class="btn btn-sm btn-link text-decoration-none p-0"
+								on:click={() => resetSegmentHandler(segment.id)}
+								title="Reset to defaults"
+							>
+								↺
+							</button>
+							<button
+								class="btn btn-sm btn-link text-decoration-none p-0"
+								on:click={() => toggleSegment(segment.id)}
+								title={collapsedSegments.get(segment.id) ? 'Expand' : 'Collapse'}
+							>
+								{collapsedSegments.get(segment.id) ? '▶' : '▼'}
+							</button>
+						</div>
+					</div>
+				</div>
+				
+				<!-- Card Body -->
+				{#if !collapsedSegments.get(segment.id)}
+					<div class="card-body">
+						{#each segment.fields as field (field.id)}
+							{#if isFieldVisible(field, segment.id)}
+								<FieldRenderer
+									{field}
+									segmentId={segment.id}
+									store={settings}
+									value={currentValues[segment.id]?.[field.id]}
+								/>
+							{/if}
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.settings-container {
+		max-width: 1200px;
+		margin: 0 auto;
+		padding: 1rem;
+	}
+	
+	.settings-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+		gap: 1.5rem;
+	}
+	
+	.settings-card {
+		border: 1px solid var(--bs-border-color);
+		border-radius: 0.5rem;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+		transition: box-shadow 0.2s ease;
+	}
+	
+	.settings-card:hover {
+		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+	}
+	
+	.card-header {
+		background-color: var(--bs-light);
+		border-bottom: 1px solid var(--bs-border-color);
+		padding: 1rem;
+	}
+	
+	.segment-icon {
+		font-size: 1.5rem;
+	}
+	
+	.card-body {
+		padding: 1.5rem;
+	}
+	
+	@media (max-width: 768px) {
+		.settings-grid {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>

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

@@ -0,0 +1,24 @@
+import type { SettingsSchema } from './types';
+import { createSettingsStore } from './store';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Settings: $$__sveltets_2_IsomorphicComponent<{
+    /** The settings schema defining all segments and fields */ schema: SettingsSchema;
+    /** The settings store instance (create externally for access in parent) */ settings: ReturnType<typeof createSettingsStore>;
+    /** Optional: Callback when settings change */ onChange?: ((values: any) => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Settings = InstanceType<typeof Settings>;
+export default Settings;

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

@@ -0,0 +1,9 @@
+/**
+ * Settings System - Public API
+ *
+ * A data-driven, reusable settings component for SvelteKit applications.
+ * Supports hierarchical access with TypeScript autocomplete.
+ */
+export { default as Settings } from './Settings.svelte';
+export { createSettingsStore, createFieldMap, type InferSettingsType } from './store';
+export type { SettingsSchema, SettingsStore, SettingsValues, SegmentDefinition, FieldDefinition, BaseFieldDefinition, BooleanFieldDefinition, TextFieldDefinition, NumberFieldDefinition, RangeFieldDefinition, ColorFieldDefinition, SelectFieldDefinition, RadioFieldDefinition, CustomFieldDefinition } from './types';

package/dist/core/Settings/index.js

@@ -0,0 +1,8 @@
+/**
+ * Settings System - Public API
+ *
+ * A data-driven, reusable settings component for SvelteKit applications.
+ * Supports hierarchical access with TypeScript autocomplete.
+ */
+export { default as Settings } from './Settings.svelte';
+export { createSettingsStore, createFieldMap } from './store';

package/dist/core/Settings/store.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Settings Store Factory
+ *
+ * Creates reactive stores for settings management with automatic persistence.
+ * Each consuming app creates its own store instance with its schema and namespace.
+ *
+ * Supports hierarchical access with TypeScript autocomplete:
+ * $settings.appearance.theme
+ * $settings.editor.fontSize
+ */
+import type { SettingsSchema } from './types';
+/**
+ * Type helper to infer settings structure from schema
+ * Converts schema into nested type: { segment: { field: value } }
+ */
+export type InferSettingsType<T extends SettingsSchema> = {
+    [K in T['segments'][number]['id']]: {
+        [F in Extract<T['segments'][number], {
+            id: K;
+        }>['fields'][number] as F['id']]: F['defaultValue'];
+    };
+};
+/**
+ * Create a settings store instance with hierarchical access
+ *
+ * @param schema - The settings schema defining all fields
+ * @param namespace - Unique namespace for localStorage isolation (e.g., 'myApp')
+ * @returns A reactive store with hierarchical access: $settings.segment.field
+ *
+ * @example
+ * ```ts
+ * const settings = createSettingsStore(mySchema, 'myApp');
+ *
+ * // In Svelte components with full autocomplete:
+ * $settings.appearance.theme     // ✅ TypeScript autocomplete works!
+ * $settings.editor.fontSize      // ✅ Nested access
+ *
+ * // Update values:
+ * settings.update('appearance', 'theme', 'dark')
+ * settings.updateSegment('appearance', { theme: 'dark', ... })
+ * ```
+ */
+export declare function createSettingsStore<T extends SettingsSchema>(schema: T, namespace: string): {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<InferSettingsType<T>>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    update: (segmentId: string, fieldId: string, value: any) => void;
+    updateSegment: (segmentId: string, values: Record<string, any>) => void;
+    reset: (segmentId: string, fieldId: string) => void;
+    resetSegment: (segmentId: string) => void;
+    resetAll: () => void;
+    getValues: () => InferSettingsType<T>;
+};
+/**
+ * Helper to create a flat map of field ID -> field definition
+ * Useful for quick lookups when rendering or validating
+ */
+export declare function createFieldMap(schema: SettingsSchema): Map<any, any>;

package/dist/core/Settings/store.js

@@ -0,0 +1,184 @@
+/**
+ * Settings Store Factory
+ *
+ * Creates reactive stores for settings management with automatic persistence.
+ * Each consuming app creates its own store instance with its schema and namespace.
+ *
+ * Supports hierarchical access with TypeScript autocomplete:
+ * $settings.appearance.theme
+ * $settings.editor.fontSize
+ */
+import { writable, get } from 'svelte/store';
+/**
+ * Extract default values from schema in hierarchical structure
+ * Returns: { segment: { field: value } }
+ */
+function extractDefaults(schema) {
+    const defaults = {};
+    for (const segment of schema.segments) {
+        defaults[segment.id] = {};
+        for (const field of segment.fields) {
+            defaults[segment.id][field.id] = field.defaultValue;
+        }
+    }
+    return defaults;
+}
+/**
+ * Load saved settings from localStorage (SSR-safe)
+ * Supports hierarchical structure
+ */
+function loadFromStorage(namespace, defaults) {
+    if (typeof window === 'undefined')
+        return defaults;
+    try {
+        const storageKey = `${namespace}:settings`;
+        const saved = localStorage.getItem(storageKey);
+        if (saved) {
+            const parsed = JSON.parse(saved);
+            // Deep merge with defaults to ensure new fields appear
+            const merged = {};
+            for (const segmentId in defaults) {
+                merged[segmentId] = {
+                    ...defaults[segmentId],
+                    ...(parsed[segmentId] || {})
+                };
+            }
+            return merged;
+        }
+    }
+    catch (error) {
+        console.error('Failed to load settings from localStorage:', error);
+    }
+    return defaults;
+}
+/**
+ * Save settings to localStorage (SSR-safe)
+ */
+function saveToStorage(namespace, values) {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        const storageKey = `${namespace}:settings`;
+        localStorage.setItem(storageKey, JSON.stringify(values));
+    }
+    catch (error) {
+        console.error('Failed to save settings to localStorage:', error);
+    }
+}
+/**
+ * Create a settings store instance with hierarchical access
+ *
+ * @param schema - The settings schema defining all fields
+ * @param namespace - Unique namespace for localStorage isolation (e.g., 'myApp')
+ * @returns A reactive store with hierarchical access: $settings.segment.field
+ *
+ * @example
+ * ```ts
+ * const settings = createSettingsStore(mySchema, 'myApp');
+ *
+ * // In Svelte components with full autocomplete:
+ * $settings.appearance.theme     // ✅ TypeScript autocomplete works!
+ * $settings.editor.fontSize      // ✅ Nested access
+ *
+ * // Update values:
+ * settings.update('appearance', 'theme', 'dark')
+ * settings.updateSegment('appearance', { theme: 'dark', ... })
+ * ```
+ */
+export function createSettingsStore(schema, namespace) {
+    // Extract defaults from schema (hierarchical structure)
+    const defaults = extractDefaults(schema);
+    // Load initial values (defaults + any saved values)
+    const initialValues = loadFromStorage(namespace, defaults);
+    const { subscribe, set: setStore, update: updateStore } = writable(initialValues);
+    // Subscribe to changes and persist to localStorage
+    subscribe((values) => {
+        saveToStorage(namespace, values);
+    });
+    /**
+     * Update a single field value
+     * @param segmentId - The segment ID (e.g., 'appearance')
+     * @param fieldId - The field ID (e.g., 'theme')
+     * @param value - The new value
+     */
+    function update(segmentId, fieldId, value) {
+        updateStore((current) => ({
+            ...current,
+            [segmentId]: {
+                ...current[segmentId],
+                [fieldId]: value
+            }
+        }));
+    }
+    /**
+     * Update multiple fields in a segment at once
+     * @param segmentId - The segment ID
+     * @param values - Partial segment values
+     */
+    function updateSegment(segmentId, values) {
+        updateStore((current) => ({
+            ...current,
+            [segmentId]: {
+                ...current[segmentId],
+                ...values
+            }
+        }));
+    }
+    /**
+     * Reset a single field to its default value
+     * @param segmentId - The segment ID
+     * @param fieldId - The field ID
+     */
+    function reset(segmentId, fieldId) {
+        const defaultValue = defaults[segmentId]?.[fieldId];
+        if (defaultValue !== undefined) {
+            update(segmentId, fieldId, defaultValue);
+        }
+    }
+    /**
+     * Reset an entire segment to defaults
+     * @param segmentId - The segment ID
+     */
+    function resetSegment(segmentId) {
+        if (defaults[segmentId]) {
+            updateStore((current) => ({
+                ...current,
+                [segmentId]: { ...defaults[segmentId] }
+            }));
+        }
+    }
+    /**
+     * Reset all settings to their default values
+     */
+    function resetAll() {
+        setStore({ ...defaults });
+    }
+    /**
+     * Get a snapshot of current values (non-reactive)
+     */
+    function getValues() {
+        return get({ subscribe });
+    }
+    return {
+        subscribe,
+        update,
+        updateSegment,
+        reset,
+        resetSegment,
+        resetAll,
+        getValues
+    };
+}
+/**
+ * Helper to create a flat map of field ID -> field definition
+ * Useful for quick lookups when rendering or validating
+ */
+export function createFieldMap(schema) {
+    const map = new Map();
+    for (const segment of schema.segments) {
+        for (const field of segment.fields) {
+            map.set(field.id, field);
+        }
+    }
+    return map;
+}

package/dist/core/Settings/types.d.ts

@@ -0,0 +1,162 @@
+/**
+ * Settings System Type Definitions
+ *
+ * Defines the schema structure for the data-driven settings component.
+ * Schemas are passed in from consuming applications.
+ */
+/**
+ * Base field definition shared by all field types
+ */
+export interface BaseFieldDefinition {
+    /** Unique identifier for the field */
+    id: string;
+    /** Display label for the field */
+    label: string;
+    /** Optional description/help text */
+    description?: string;
+    /** Optional tooltip shown on hover */
+    tooltip?: string;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Condition for field visibility (function that receives all settings) */
+    visibleIf?: (settings: Record<string, any>) => boolean;
+}
+/**
+ * Boolean toggle field (checkbox/switch)
+ */
+export interface BooleanFieldDefinition extends BaseFieldDefinition {
+    type: 'boolean';
+    defaultValue: boolean;
+}
+/**
+ * Text input field
+ */
+export interface TextFieldDefinition extends BaseFieldDefinition {
+    type: 'text';
+    defaultValue: string;
+    /** Input placeholder text */
+    placeholder?: string;
+    /** Maximum character length */
+    maxLength?: number;
+    /** Validation pattern (regex) */
+    pattern?: string;
+}
+/**
+ * Number input field
+ */
+export interface NumberFieldDefinition extends BaseFieldDefinition {
+    type: 'number';
+    defaultValue: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Unit label (e.g., "px", "ms", "%") */
+    unit?: string;
+}
+/**
+ * Range slider field
+ */
+export interface RangeFieldDefinition extends BaseFieldDefinition {
+    type: 'range';
+    defaultValue: number;
+    min: number;
+    max: number;
+    step?: number;
+    /** Whether to show the current value */
+    showValue?: boolean;
+    /** Unit label (e.g., "px", "ms", "%") */
+    unit?: string;
+}
+/**
+ * Color picker field
+ */
+export interface ColorFieldDefinition extends BaseFieldDefinition {
+    type: 'color';
+    defaultValue: string;
+}
+/**
+ * Select dropdown field
+ */
+export interface SelectFieldDefinition extends BaseFieldDefinition {
+    type: 'select';
+    defaultValue: string | number;
+    options: Array<{
+        value: string | number;
+        label: string;
+        description?: string;
+    }>;
+}
+/**
+ * Radio button group field
+ */
+export interface RadioFieldDefinition extends BaseFieldDefinition {
+    type: 'radio';
+    defaultValue: string | number;
+    options: Array<{
+        value: string | number;
+        label: string;
+        description?: string;
+    }>;
+}
+/**
+ * Custom field that renders a provided Svelte component
+ */
+export interface CustomFieldDefinition extends BaseFieldDefinition {
+    type: 'custom';
+    defaultValue: any;
+    /** The Svelte component to render */
+    component: any;
+    /** Additional props to pass to the custom component */
+    componentProps?: Record<string, any>;
+}
+/**
+ * Union type of all field definitions
+ */
+export type FieldDefinition = BooleanFieldDefinition | TextFieldDefinition | NumberFieldDefinition | RangeFieldDefinition | ColorFieldDefinition | SelectFieldDefinition | RadioFieldDefinition | CustomFieldDefinition;
+/**
+ * A segment groups related settings fields under a card/section
+ */
+export interface SegmentDefinition {
+    /** Unique identifier for the segment */
+    id: string;
+    /** Display title for the card/section */
+    title: string;
+    /** Optional description for the segment */
+    description?: string;
+    /** Optional icon (emoji or icon class) */
+    icon?: string;
+    /** Whether the segment starts collapsed */
+    collapsed?: boolean;
+    /** Array of field definitions in this segment */
+    fields: FieldDefinition[];
+}
+/**
+ * Complete settings schema passed to the Settings component
+ */
+export interface SettingsSchema {
+    /** Array of setting segments (cards) */
+    segments: SegmentDefinition[];
+    /** Optional schema version for migration support */
+    version?: string;
+}
+/**
+ * The live settings values (flat key-value pairs)
+ */
+export type SettingsValues = Record<string, any>;
+/**
+ * Store interface for settings
+ */
+export interface SettingsStore {
+    /** Subscribe to settings changes */
+    subscribe: (callback: (value: SettingsValues) => void) => () => void;
+    /** Update a single setting value */
+    set: (key: string, value: any) => void;
+    /** Update multiple settings at once */
+    update: (values: Partial<SettingsValues>) => void;
+    /** Reset a single setting to default */
+    reset: (key: string) => void;
+    /** Reset all settings to defaults */
+    resetAll: () => void;
+    /** Get current values snapshot */
+    getValues: () => SettingsValues;
+}

package/dist/core/Settings/types.js

@@ -0,0 +1,7 @@
+/**
+ * Settings System Type Definitions
+ *
+ * Defines the schema structure for the data-driven settings component.
+ * Schemas are passed in from consuming applications.
+ */
+export {};

package/dist/core/index.d.ts

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

package/dist/core/index.js

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

package/package.json

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