lula2 0.3.3 → 0.3.4-nightly.0

package/src/lib/components/controls/renderers/FieldRenderer.svelte

@@ -12,7 +12,7 @@
 		readonly?: boolean;
 	}
 
-	let { fieldName, field, value, readonly = true }: Props = $props();
+	let { fieldName, field, value }: Props = $props();
 
 	const displayName = $derived(
 		field?.original_name || fieldName.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())
@@ -46,4 +46,4 @@
 			<span class="whitespace-pre-line">{value}</span>
 		{/if}
 	</div>
-</div>
+</div>

package/src/lib/components/controls/tabs/CustomFieldsTab.svelte

@@ -105,9 +105,9 @@
 					Additional fields specific to your organization
 				</div>
 				<div class="space-y-8">
-					{#each fieldGroups as fieldGroup}
+					{#each fieldGroups as fieldGroup, index (index)}
 						<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-							{#each fieldGroup as [fieldName, field]}
+							{#each fieldGroup as [fieldName, field], index (index)}
 								<div class={getFieldLayoutClass(field)}>
 									<EditableFieldRenderer 
 										{fieldName} 

package/src/lib/components/controls/tabs/ImplementationTab.svelte

@@ -102,9 +102,9 @@
 		<div class="space-y-4">
 			<div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 p-6">
 				<div class="space-y-8">
-					{#each fieldGroups as fieldGroup}
+					{#each fieldGroups as fieldGroup, index (index)}
 						<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-							{#each fieldGroup as [fieldName, field]}
+							{#each fieldGroup as [fieldName, field], index (index)}
 								<div class={getFieldLayoutClass(field)}>
 									<FieldRenderer 
 										{fieldName} 
@@ -124,4 +124,4 @@
 			<p class="text-gray-500 dark:text-gray-400">No implementation fields available</p>
 		</div>
 	{/if}
-</div>
+</div>

package/src/lib/components/controls/tabs/MappingsTab.svelte

@@ -99,7 +99,7 @@
 	<!-- Existing Mappings -->
 	{#if mappings.length > 0}
 		<div class="space-y-4">
-			{#each mappings as mapping}
+			{#each mappings as mapping (mapping.uuid)}
 				{#if editingMapping && editingMapping.uuid === mapping.uuid}
 					<!-- Edit Form in place of the mapping being edited -->
 					<div

package/src/lib/components/controls/tabs/OverviewTab.svelte

@@ -107,9 +107,9 @@
 		<div class="space-y-4">
 			<div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 p-6">
 				<div class="space-y-8">
-					{#each fieldGroups as fieldGroup}
+					{#each fieldGroups as fieldGroup, index (index)}
 						<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-							{#each fieldGroup as [fieldName, field]}
+							{#each fieldGroup as [fieldName, field], index (index)}
 								<div class={getFieldLayoutClass(field)}>
 									<FieldRenderer 
 										{fieldName} 
@@ -136,7 +136,7 @@
 			<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Control Properties</h3>
 			<div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 p-6">
 				<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-					{#each Object.entries(control.properties) as [key, value]}
+					{#each Object.entries(control.properties) as [key, value], index (index)}
 						<FieldRenderer 
 							fieldName={key.replace(/_/g, ' ')} 
 							field={null} 
@@ -148,4 +148,4 @@
 			</div>
 		</div>
 	{/if}
-</div>
+</div>

package/src/lib/components/controls/tabs/TimelineTab.svelte

@@ -3,11 +3,10 @@
 
 <script lang="ts">
 	import { TimelineItem } from '$components/version-control';
-	import type { Control } from '$lib/types';
 	import { EmptyState } from '../../ui';
 
 	interface Props {
-		control: Control;
+		// control: Control;
 		timeline?: any; // Timeline type from control.timeline
 	}
 
@@ -26,7 +25,7 @@
 	{:else if commits.length > 0}
 		<div class="mb-4">
 			<div class="space-y-6">
-				{#each commits as commit, index}
+				{#each commits as commit, index (index)}
 					<TimelineItem {commit} showConnector={index < commits.length - 1} />
 				{/each}
 			</div>

package/src/lib/components/controls/utils/ProcessedTextRenderer.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <div class="space-y-3">
-	{#each sections as section}
+	{#each sections as section, index (index)}
 		{#if section.type === 'header'}
 			<h4 class="font-semibold text-gray-900 dark:text-gray-100 mt-4 first:mt-0">
 				{section.content}
@@ -23,9 +23,9 @@
 			<div class="overflow-x-auto">
 				<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
 					<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
-						{#each section.data.rows as row, _i}
+						{#each section.data.rows as row, index (index)}
 							<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
-								{#each row.columns as column, j}
+								{#each row.columns as column, j (j)}
 									<td class="px-3 py-2 text-sm {j === 0 ? 'font-medium text-gray-900 dark:text-gray-100' : 'text-gray-600 dark:text-gray-400'}">
 										{#if column.startsWith('CCI-')}
 											<code class="px-1.5 py-0.5 text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded">
@@ -47,7 +47,7 @@
 			</div>
 		{:else if section.type === 'list' && section.data?.items}
 			<ul class="space-y-1 ml-4">
-				{#each section.data.items as item}
+				{#each section.data.items as item, index (index)}
 					<li class="flex items-start">
 						<span class="text-gray-400 dark:text-gray-500 mr-2 flex-shrink-0">•</span>
 						<span class="text-gray-600 dark:text-gray-400 text-sm">{item}</span>

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

@@ -165,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;
@@ -426,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
@@ -622,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>
@@ -644,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>
@@ -671,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)
@@ -834,7 +832,7 @@
 					>
 						{#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)}
+							.sort((a, b) => a[1].displayOrder - b[1].displayOrder) as [field, _config], _index (field)}
 							<div
 								draggable="true"
 								on:dragstart={(e) => handleFieldDragStart(e, field)}
@@ -1010,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 = {