lula2 0.3.2 → 0.3.4-nightly.0

package/src/lib/components/forms/DynamicControlForm.svelte

@@ -128,8 +128,8 @@
 {#if readonly}
 	<!-- View Mode: Clean minimal layout -->
 	<div class="space-y-6">
-		{#each Object.entries(fieldGroups) as [groupName, fields]}
-			{#each [fields] as fieldList}
+		{#each Object.entries(fieldGroups) as [_groupName, fields], index (index)}
+			{#each [fields] as fieldList, a (a)}
 				{@const importantFields = fieldList.filter((f) =>
 					['id', 'title', 'priority', 'status'].includes(f.id)
 				)}
@@ -147,7 +147,7 @@
 						{#if importantFields.length > 0}
 							<div class="pb-4 border-b border-gray-200 dark:border-gray-700">
 								<div class="flex flex-wrap items-center gap-6">
-									{#each importantFields as field}
+									{#each importantFields as field, index (index)}
 										{@const value = control[field.id]}
 										{#if value !== undefined && value !== null && value !== ''}
 											<div class="flex items-center space-x-3">
@@ -181,7 +181,7 @@
 						{/if}
 
 						<!-- Content sections -->
-						{#each contentFields as field}
+						{#each contentFields as field, index (index)}
 							{@const value = control[field.id]}
 
 							{#if field.type === 'textarea'}
@@ -206,7 +206,7 @@
 										</span>
 									</h3>
 									<div class="space-y-2">
-										{#each value as item}
+										{#each value as item, index (index)}
 											<div class="flex items-start space-x-3 py-2">
 												<div class="flex-shrink-0 w-1.5 h-1.5 bg-blue-600 rounded-full mt-2"></div>
 												<div class="text-gray-900 dark:text-white leading-relaxed">
@@ -226,13 +226,13 @@
 										</span>
 									</h3>
 									<div class="space-y-3">
-										{#each value as item, index}
+										{#each value as item, index (index)}
 											<div
 												class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700"
 											>
 												{#if field.arraySchema}
 													<dl class="space-y-2">
-														{#each Object.entries(field.arraySchema) as [key, schema]}
+														{#each Object.entries(field.arraySchema) as [key, schema], index (index)}
 															{@const schemaObj = schema as any}
 															{#if item[key]}
 																<div class="flex justify-between">
@@ -281,7 +281,7 @@
 {:else}
 	<!-- Edit Mode: Enhanced form layout -->
 	<div class="space-y-10">
-		{#each Object.entries(fieldGroups) as [groupName, fields]}
+		{#each Object.entries(fieldGroups) as [groupName, fields], index (index)}
 			<section
 				class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm overflow-hidden"
 			>
@@ -300,7 +300,7 @@
 				<div class="p-8">
 					<!-- Improved grid layout for simple fields -->
 					<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8 mb-10">
-						{#each fields as field}
+						{#each fields as field, index (index)}
 							{#if !['textarea', 'string-array', 'object-array'].includes(field.type)}
 								<div class="space-y-2">
 									<DynamicField
@@ -317,7 +317,7 @@
 
 					<!-- Enhanced full-width fields with better spacing -->
 					<div class="space-y-10">
-						{#each fields as field}
+						{#each fields as field, index (index)}
 							{#if ['textarea', 'string-array', 'object-array'].includes(field.type)}
 								<div
 									class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"

package/src/lib/components/forms/DynamicField.svelte

@@ -140,7 +140,7 @@
 			{#if !field.required}
 				<option value="">-- Select an option --</option>
 			{/if}
-			{#each field.options as option}
+			{#each field.options as option (option)}
 				<option value={option}>{option}</option>
 			{/each}
 		</select>
@@ -221,7 +221,7 @@
 					</button>
 				</div>
 			{:else}
-				{#each ensureArray() as item, index}
+				{#each ensureArray() as item, index (index)}
 					<div
 						class="group relative p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow"
 					>
@@ -349,7 +349,7 @@
 					</button>
 				</div>
 			{:else}
-				{#each ensureArray() as item, index}
+				{#each ensureArray() as item, index (index)}
 					<div
 						class="group relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm hover:shadow-md transition-all duration-200"
 					>
@@ -409,7 +409,7 @@
 						<div class="p-4">
 							{#if field.arraySchema}
 								<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-									{#each Object.entries(field.arraySchema) as [key, schemaObj]}
+									{#each Object.entries(field.arraySchema) as [key, schemaObj], index (index)}
 										{@const schema = schemaObj as any}
 										<div class="space-y-2">
 											<label

package/src/lib/components/forms/FormField.svelte

@@ -63,7 +63,7 @@
 				class="{baseInputClass} {errorClass} {successClass} cursor-pointer"
 				onchange={onChange}
 			>
-				{#each options as option}
+				{#each options as option (option)}
 					<option value={option}>{option}</option>
 				{/each}
 			</select>

package/src/lib/components/setup/ExistingControlSets.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import { createEventDispatcher } from 'svelte';
 	import { appState } from '$lib/websocket';
 
@@ -166,7 +165,7 @@
 		</div>
 	{:else if controlSets.length > 0}
 		<div class="space-y-3">
-			{#each controlSets as controlSet}
+			{#each controlSets as controlSet, index (index)}
 				{@const isCurrent = isCurrentControlSet(controlSet)}
 				<div
 					on:click={() => !isCurrent && selectControlSet(controlSet)}

package/src/lib/components/setup/SpreadsheetImport.svelte

@@ -13,8 +13,6 @@
 	let sampleData: any[] = [];
 	let controlCount = 0;
 	let rowPreviews: { row: number; preview: string }[] = [];
-	// Make availableFields reactive to both fields and fieldConfigs changes
-	$: availableFields = fields.filter((f) => fields.includes(f));
 
 	// Field configuration for tabs
 	type TabAssignment = 'overview' | 'implementation' | 'mappings' | 'custom' | null;
@@ -312,49 +310,47 @@
 		if (draggedField && fieldConfigs.has(draggedField)) {
 			const config = fieldConfigs.get(draggedField)!;
 
-			// If dragging from mappings tab to another tab, remove from justificationFields
-			if (config.tab === 'mappings' && tab !== 'mappings') {
-				justificationFields = justificationFields.filter((f) => f !== draggedField);
-			}
-
-			// If dragging to mappings tab, add to justificationFields
-			if (tab === 'mappings' && !justificationFields.includes(draggedField)) {
-				justificationFields = [...justificationFields, draggedField];
-			}
-
-			config.tab = tab;
-
-			// If dropping at a specific position, update display orders
-			if (targetIndex !== undefined && tab !== null) {
-				// Get all fields in this tab
-				const tabFields = Array.from(fieldConfigs.entries())
-					.filter(([_, cfg]) => cfg.tab === tab)
-					.sort((a, b) => a[1].displayOrder - b[1].displayOrder);
-
-				// Remove the dragged field from the list if it was already in this tab
-				const filteredFields = tabFields.filter(([field]) => field !== draggedField);
-
-				// Insert at the target position
-				filteredFields.splice(targetIndex, 0, [draggedField, config]);
+			// Special handling for mappings tab
+			if (tab === 'mappings') {
+				// Add to justificationFields if not already there
+				if (!justificationFields.includes(draggedField)) {
+					justificationFields = [...justificationFields, draggedField];
+				}
+			} else {
+				config.tab = tab;
+
+				// If dropping at a specific position, update display orders
+				if (targetIndex !== undefined && tab !== null) {
+					// Get all fields in this tab
+					const tabFields = Array.from(fieldConfigs.entries())
+						.filter(([_, cfg]) => cfg.tab === tab)
+						.sort((a, b) => a[1].displayOrder - b[1].displayOrder);
+
+					// Remove the dragged field from the list if it was already in this tab
+					const filteredFields = tabFields.filter(([field]) => field !== draggedField);
+
+					// Insert at the target position
+					filteredFields.splice(targetIndex, 0, [draggedField, config]);
+
+					// Update display orders for all fields in this tab
+					filteredFields.forEach(([field, cfg], index) => {
+						cfg.displayOrder = index;
+						fieldConfigs.set(field, cfg);
+					});
+				} else if (tab !== null) {
+					// If no specific position, add to end
+					const maxOrder = Math.max(
+						0,
+						...Array.from(fieldConfigs.values())
+							.filter((cfg) => cfg.tab === tab)
+							.map((cfg) => cfg.displayOrder)
+					);
+					config.displayOrder = maxOrder + 1;
+				}
 
-				// Update display orders for all fields in this tab
-				filteredFields.forEach(([field, cfg], index) => {
-					cfg.displayOrder = index;
-					fieldConfigs.set(field, cfg);
-				});
-			} else if (tab !== null) {
-				// If no specific position, add to end
-				const maxOrder = Math.max(
-					0,
-					...Array.from(fieldConfigs.values())
-						.filter((cfg) => cfg.tab === tab)
-						.map((cfg) => cfg.displayOrder)
-				);
-				config.displayOrder = maxOrder + 1;
+				fieldConfigs.set(draggedField, config);
+				fieldConfigs = fieldConfigs; // Trigger reactivity
 			}
-
-			fieldConfigs.set(draggedField, config);
-			fieldConfigs = fieldConfigs; // Trigger reactivity
 		}
 		draggedField = null;
 		dragOverTab = null;
@@ -428,7 +424,7 @@
 
 			// Add field schema configuration - include all fields that are assigned to a tab
 			const fieldSchema = Array.from(fieldConfigs.entries())
-				.filter(([field, config]) => config.tab !== null)
+				.filter(([_field, config]) => config.tab !== null)
 				.map(([field, config]) => ({
 					fieldName: cleanFieldName(field),
 					...config
@@ -624,7 +620,7 @@
 						}}
 						class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:text-white"
 					>
-						{#each sheets as sheet}
+						{#each sheets as sheet (sheet)}
 							<option value={sheet}>{sheet}</option>
 						{/each}
 					</select>
@@ -646,7 +642,7 @@
 						on:change={loadSheetData}
 						class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:text-white"
 					>
-						{#each rowPreviews as preview}
+						{#each rowPreviews as preview (preview.row)}
 							<option value={preview.row}>
 								Row {preview.row}: {preview.preview}
 							</option>
@@ -673,7 +669,7 @@
 						required
 					>
 						<option value="" disabled>Select Control ID field</option>
-						{#each fields as field}
+						{#each fields as field (field)}
 							{@const exampleValue =
 								sampleData.length > 0 && sampleData[0][field]
 									? String(sampleData[0][field]).slice(0, 30)
@@ -785,7 +781,7 @@
 					>
 						{#each Array.from(fieldConfigs.entries())
 							.filter(([_field, config]) => config.tab === 'overview')
-							.sort((a, b) => a[1].displayOrder - b[1].displayOrder) as [field, _config], index (field)}
+							.sort((a, b) => a[1].displayOrder - b[1].displayOrder) as [field, _config], _index (field)}
 							<div
 								draggable="true"
 								on:dragstart={(e) => handleFieldDragStart(e, field)}
@@ -805,7 +801,7 @@
 								<span class="truncate">{field}</span>
 							</div>
 						{/each}
-						{#if Array.from(fieldConfigs.entries()).filter(([field, config]) => config.tab === 'overview').length === 0}
+						{#if Array.from(fieldConfigs.entries()).filter(([_field, config]) => config.tab === 'overview').length === 0}
 							<p class="text-xs text-gray-400 dark:text-gray-500 text-center py-4">
 								Drop fields here
 							</p>
@@ -835,8 +831,8 @@
 						aria-label="Implementation tab drop zone"
 					>
 						{#each Array.from(fieldConfigs.entries())
-							.filter(([field, config]) => config.tab === 'implementation')
-							.sort((a, b) => a[1].displayOrder - b[1].displayOrder) as [field, _config], index (field)}
+							.filter(([_field, config]) => config.tab === 'implementation')
+							.sort((a, b) => a[1].displayOrder - b[1].displayOrder) as [field, _config], _index (field)}
 							<div
 								draggable="true"
 								on:dragstart={(e) => handleFieldDragStart(e, field)}
@@ -856,7 +852,56 @@
 								<span class="truncate">{field}</span>
 							</div>
 						{/each}
-						{#if Array.from(fieldConfigs.entries()).filter(([field, config]) => config.tab === 'implementation').length === 0}
+						{#if Array.from(fieldConfigs.entries()).filter(([_field, config]) => config.tab === 'implementation').length === 0}
+							<p class="text-xs text-gray-400 dark:text-gray-500 text-center py-4">
+								Drop fields here
+							</p>
+						{/if}
+					</div>
+				</div>
+
+				<!-- Custom Tab Column -->
+				<div
+					class="border border-purple-300 dark:border-purple-700 rounded-lg bg-white dark:bg-gray-800"
+				>
+					<div
+						class="p-3 border-b border-purple-200 dark:border-purple-800 bg-purple-50 dark:bg-purple-900/20 rounded-t-lg"
+					>
+						<h4 class="text-sm font-semibold text-purple-700 dark:text-purple-300">Custom Tab</h4>
+						<p class="text-xs text-purple-600 dark:text-purple-400 mt-1">Additional fields</p>
+					</div>
+					<div
+						class="p-3 min-h-[400px] max-h-[600px] overflow-y-auto space-y-2 transition-colors
+              {dragOverTab === 'custom' ? 'bg-purple-50 dark:bg-purple-900/10' : ''}"
+						on:dragover={(e) => handleTabDragOver(e, 'custom')}
+						on:dragleave={handleTabDragLeave}
+						on:drop={(e) => handleTabDrop(e, 'custom')}
+						role="region"
+						aria-label="Custom fields drop zone"
+					>
+						{#each Array.from(fieldConfigs.entries())
+							.filter(([_field, config]) => config.tab === 'custom')
+							.sort((a, b) => a[1].displayOrder - b[1].displayOrder) as [field, _config], _index (field)}
+							<div
+								draggable="true"
+								on:dragstart={(e) => handleFieldDragStart(e, field)}
+								on:dragend={handleFieldDragEnd}
+								on:dragover={(e) => handleFieldDragOver(e, field)}
+								on:dragleave={handleFieldDragLeave}
+								on:drop={(e) => handleFieldDrop(e, field, 'custom')}
+								role="button"
+								aria-label="{field} field in Custom tab"
+								tabindex="0"
+								class="flex items-center px-3 py-2 bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 rounded text-sm cursor-move hover:bg-purple-200 dark:hover:bg-purple-800/30 transition-colors
+                  {dragOverField === field && draggedField !== field
+									? 'border-t-2 border-purple-500'
+									: ''}"
+							>
+								<Draggable class="w-3 h-3 mr-2 flex-shrink-0" />
+								<span class="truncate">{field}</span>
+							</div>
+						{/each}
+						{#if Array.from(fieldConfigs.entries()).filter(([_field, config]) => config.tab === 'custom').length === 0}
 							<p class="text-xs text-gray-400 dark:text-gray-500 text-center py-4">
 								Drop fields here
 							</p>
@@ -889,22 +934,23 @@
 						<div class="space-y-2">
 							{#if justificationFields.length > 0}
 								<!-- Display justification fields -->
-								{#each justificationFields as field, index}
+								{#each justificationFields as field, _index}
 									<div
-										draggable="true"
-										on:dragstart={(e) => handleFieldDragStart(e, field)}
-										on:dragend={handleFieldDragEnd}
-										on:dragover={(e) => handleFieldDragOver(e, field)}
-										on:dragleave={handleFieldDragLeave}
-										on:drop={(e) => handleFieldDrop(e, field, 'mappings')}
+										draggable="false"
 										role="button"
-										aria-label="{field} field in Mappings tab"
 										tabindex="0"
-										class="flex items-center px-3 py-2 bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300 rounded text-sm cursor-move hover:bg-orange-200 dark:hover:bg-orange-800/30 transition-colors
-									{dragOverField === field && draggedField !== field ? 'border-t-2 border-orange-500' : ''}"
+										class="flex items-center px-3 py-2 bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300 rounded text-sm hover:bg-orange-200 dark:hover:bg-orange-800/30 transition-colors"
 									>
-										<Draggable class="w-3 h-3 mr-2 flex-shrink-0" />
 										<span class="truncate">{field}</span>
+										<button
+											class="ml-auto text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400"
+											title="Remove from mappings"
+											on:click|stopPropagation={() => {
+												justificationFields = justificationFields.filter((f) => f !== field);
+											}}
+										>
+											×
+										</button>
 									</div>
 								{/each}
 							{:else}
@@ -945,55 +991,6 @@
 						</div>
 					</div>
 				</div>
-
-				<!-- Custom Tab Column -->
-				<div
-					class="border border-purple-300 dark:border-purple-700 rounded-lg bg-white dark:bg-gray-800"
-				>
-					<div
-						class="p-3 border-b border-purple-200 dark:border-purple-800 bg-purple-50 dark:bg-purple-900/20 rounded-t-lg"
-					>
-						<h4 class="text-sm font-semibold text-purple-700 dark:text-purple-300">Custom Tab</h4>
-						<p class="text-xs text-purple-600 dark:text-purple-400 mt-1">Additional fields</p>
-					</div>
-					<div
-						class="p-3 min-h-[400px] max-h-[600px] overflow-y-auto space-y-2 transition-colors
-              {dragOverTab === 'custom' ? 'bg-purple-50 dark:bg-purple-900/10' : ''}"
-						on:dragover={(e) => handleTabDragOver(e, 'custom')}
-						on:dragleave={handleTabDragLeave}
-						on:drop={(e) => handleTabDrop(e, 'custom')}
-						role="region"
-						aria-label="Custom fields drop zone"
-					>
-						{#each Array.from(fieldConfigs.entries())
-							.filter(([field, config]) => config.tab === 'custom')
-							.sort((a, b) => a[1].displayOrder - b[1].displayOrder) as [field, config], index (field)}
-							<div
-								draggable="true"
-								on:dragstart={(e) => handleFieldDragStart(e, field)}
-								on:dragend={handleFieldDragEnd}
-								on:dragover={(e) => handleFieldDragOver(e, field)}
-								on:dragleave={handleFieldDragLeave}
-								on:drop={(e) => handleFieldDrop(e, field, 'custom')}
-								role="button"
-								aria-label="{field} field in Custom tab"
-								tabindex="0"
-								class="flex items-center px-3 py-2 bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 rounded text-sm cursor-move hover:bg-purple-200 dark:hover:bg-purple-800/30 transition-colors
-                  {dragOverField === field && draggedField !== field
-									? 'border-t-2 border-purple-500'
-									: ''}"
-							>
-								<Draggable class="w-3 h-3 mr-2 flex-shrink-0" />
-								<span class="truncate">{field}</span>
-							</div>
-						{/each}
-						{#if Array.from(fieldConfigs.entries()).filter(([field, config]) => config.tab === 'custom').length === 0}
-							<p class="text-xs text-gray-400 dark:text-gray-500 text-center py-4">
-								Drop fields here
-							</p>
-						{/if}
-					</div>
-				</div>
 			</div>
 		</div>
 
@@ -1011,15 +1008,15 @@
 							class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-600 dark:text-gray-400"
 						>
 							<tr>
-								{#each fields.slice(0, 5) as field}
+								{#each fields.slice(0, 5) as field (field)}
 									<th class="px-4 py-2">{field}</th>
 								{/each}
 							</tr>
 						</thead>
 						<tbody>
-							{#each sampleData as row}
+							{#each sampleData as row, i (i)}
 								<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-									{#each fields.slice(0, 5) as field}
+									{#each fields.slice(0, 5) as field (field)}
 										<td class="px-4 py-2">{row[field] || ''}</td>
 									{/each}
 								</tr>

package/src/lib/components/ui/CustomDropdown.svelte

@@ -74,7 +74,7 @@
 			>
 				<slot name="header" />
 
-				{#each options as option}
+				{#each options as option, index (index)}
 					<button
 						type="button"
 						class={twMerge(

package/src/lib/components/ui/FilterBuilder.svelte

@@ -191,7 +191,7 @@
 					<p class="text-sm text-gray-500 dark:text-gray-400">No filters</p>
 				{:else}
 					<div class="space-y-2">
-						{#each $activeFilters as filter, index}
+						{#each $activeFilters as filter, index (index)}
 							<div
 								class="flex items-center justify-between bg-gray-50 dark:bg-gray-700 p-2 rounded-md"
 							>
@@ -262,7 +262,7 @@
 									>
 										Overview Fields
 									</div>
-									{#each fieldsByTab.overview as field}
+									{#each fieldsByTab.overview as field (field)}
 										<button
 											class={twMerge(
 												'w-full text-left px-3 py-2 text-sm',
@@ -288,7 +288,7 @@
 										>
 											Implementation Fields
 										</div>
-										{#each fieldsByTab.implementation as field}
+										{#each fieldsByTab.implementation as field (field)}
 											<button
 												class={twMerge(
 													'w-full text-left px-3 py-2 text-sm',
@@ -315,7 +315,7 @@
 										>
 											Custom Fields
 										</div>
-										{#each fieldsByTab.custom as field}
+										{#each fieldsByTab.custom as field (field)}
 											<button
 												class={twMerge(
 													'w-full text-left px-3 py-2 text-sm',

package/src/lib/components/ui/TabNavigation.svelte

@@ -21,7 +21,7 @@
 
 <nav class="border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
 	<div class="flex space-x-4">
-		{#each tabs as tab}
+		{#each tabs as tab, index (index)}
 			<button
 				onclick={() => !tab.disabled && onSelect(tab.id)}
 				disabled={tab.disabled}

package/src/lib/components/version-control/DiffViewer.svelte

@@ -213,7 +213,7 @@
 	{/if}
 
 	<div class="diff-content max-h-96 overflow-y-auto">
-		{#each parsedDiff as line}
+		{#each parsedDiff as line, index (index)}
 			<div
 				class="diff-line flex {line.type === 'addition'
 					? 'bg-green-50 dark:bg-green-900/20'

package/src/lib/components/version-control/YamlDiffViewer.svelte

@@ -272,7 +272,7 @@
 			{#if showDetailedView}
 				<!-- Detailed view with full context -->
 				<div class="divide-y divide-gray-200 dark:divide-gray-600">
-					{#each yamlDiff.changes as change}
+					{#each yamlDiff.changes as change, i (i)}
 						<div class="p-3 {getChangeColor(change.type)}">
 							<div class="flex items-start space-x-3">
 								<div
@@ -337,7 +337,7 @@
 			{:else}
 				<!-- Summary view - more compact -->
 				<div class="p-4 space-y-2">
-					{#each yamlDiff.changes as change}
+					{#each yamlDiff.changes as change (change)}
 						<div class="flex items-center space-x-2 text-sm">
 							<span
 								class="w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold {getChangeColor(

package/src/stores/compliance.ts

@@ -1,9 +1,9 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: 2023-Present The Lula Authors
 
-import type { Control, ControlWithMappings, Mapping } from '$lib/types';
+import type { Control, Mapping } from '$lib/types';
 import { appState } from '$lib/websocket';
-import { derived, get, writable } from 'svelte/store';
+import { get, writable } from 'svelte/store';
 
 /**
  * Shared filter operator options used across the application
@@ -57,73 +57,6 @@ export const searchTerm = writable('');
 export const selectedControl = writable<Control | null>(null);
 export const activeFilters = writable<FilterCondition[]>([]);
 
-export const filteredControls = derived(
-	[controls, searchTerm, activeFilters],
-	([$controls, $searchTerm, $activeFilters]) => {
-		let results = $controls;
-
-		// Apply search term
-		if ($searchTerm) {
-			const term = $searchTerm.toLowerCase();
-			results = results.filter((c) => JSON.stringify(c).toLowerCase().includes(term));
-		}
-
-		// Apply advanced filters
-		if ($activeFilters.length > 0) {
-			results = results.filter((control) => {
-				// Cast to ControlWithDynamicFields for dynamic field access
-				const dynamicControl = control as Record<string, unknown>;
-
-				// Control must match all filters
-				return $activeFilters.every((filter) => {
-					const fieldValue = dynamicControl[filter.fieldName];
-
-					// For exists/not_exists operators, we just need to check if the field has a value
-					if (filter.operator === 'exists') {
-						return fieldValue !== undefined && fieldValue !== null && fieldValue !== '';
-					} else if (filter.operator === 'not_exists') {
-						return fieldValue === undefined || fieldValue === null || fieldValue === '';
-					}
-
-					// For other operators, convert values to strings for comparison
-					const fieldValueStr = String(fieldValue).toLowerCase();
-					const filterValueStr =
-						filter.value !== undefined ? String(filter.value).toLowerCase() : '';
-
-					switch (filter.operator) {
-						case 'equals':
-							return fieldValueStr === filterValueStr;
-
-						case 'not_equals':
-							return fieldValueStr !== filterValueStr;
-
-						case 'includes':
-							return fieldValueStr.includes(filterValueStr);
-
-						case 'not_includes':
-							return !fieldValueStr.includes(filterValueStr);
-
-						default:
-							return true;
-					}
-				});
-			});
-		}
-
-		return results;
-	}
-);
-
-export const controlsWithMappings = derived(
-	[controls, mappings],
-	([$controls, $mappings]): ControlWithMappings[] => {
-		return $controls.map((control) => ({
-			...control,
-			mappings: $mappings.filter((m) => m.control_id === control.id)
-		}));
-	}
-);
-
 // Store actions - mostly for local state management
 // All server operations now go through WebSocket
 export const complianceStore = {