lula2 0.3.3 → 0.3.4

package/dist/cli/server/server.js

@@ -4657,6 +4657,7 @@ var WebSocketManager = class {
                   `${control.id}.yaml`,
                   `${control.id.replace(/\./g, "_")}.yaml`,
                   // AC-1.1 -> AC-1_1.yaml
+                  // eslint-disable-next-line no-useless-escape
                   `${control.id.replace(/[^\w\-]/g, "_")}.yaml`
                   // General sanitization
                 ];
@@ -4878,17 +4879,15 @@ var WebSocketManager = class {
           id: control.id,
           family: control.family
         };
-        const fieldSchema = controlSetData.fieldSchema?.fields || {};
-        for (const [fieldName, fieldConfig] of Object.entries(fieldSchema)) {
-          if (fieldConfig.tab === "overview" && control[fieldName] !== void 0) {
+        const fieldSchema = controlSetData.fieldSchema?.fields || controlSetData.field_schema?.fields || {};
+        for (const [fieldName] of Object.entries(fieldSchema)) {
+          if (control[fieldName] !== void 0) {
             metadata[fieldName] = control[fieldName];
           }
         }
-        if (control.title !== void 0) metadata.title = control.title;
-        if (control.implementation_status !== void 0)
-          metadata.implementation_status = control.implementation_status;
-        if (control.compliance_status !== void 0)
-          metadata.compliance_status = control.compliance_status;
+        if (Object.keys(fieldSchema).length === 0) {
+          Object.assign(metadata, control);
+        }
         return metadata;
       });
       return {
@@ -4945,8 +4944,9 @@ var WebSocketManager = class {
           id: controlId,
           family: control.family || control["control-acronym"]?.toString().split("-")[0] || ""
         };
-        if (controlSetData.field_schema?.fields) {
-          for (const [fieldName] of Object.entries(controlSetData.field_schema.fields)) {
+        const schemaFields = controlSetData.field_schema?.fields || controlSetData.fieldSchema?.fields;
+        if (schemaFields) {
+          for (const [fieldName] of Object.entries(schemaFields)) {
             if (control[fieldName] !== void 0) {
               summary[fieldName] = control[fieldName];
             }

package/dist/cli/server/websocketServer.js

@@ -2237,6 +2237,7 @@ var WebSocketManager = class {
                   `${control.id}.yaml`,
                   `${control.id.replace(/\./g, "_")}.yaml`,
                   // AC-1.1 -> AC-1_1.yaml
+                  // eslint-disable-next-line no-useless-escape
                   `${control.id.replace(/[^\w\-]/g, "_")}.yaml`
                   // General sanitization
                 ];
@@ -2458,17 +2459,15 @@ var WebSocketManager = class {
           id: control.id,
           family: control.family
         };
-        const fieldSchema = controlSetData.fieldSchema?.fields || {};
-        for (const [fieldName, fieldConfig] of Object.entries(fieldSchema)) {
-          if (fieldConfig.tab === "overview" && control[fieldName] !== void 0) {
+        const fieldSchema = controlSetData.fieldSchema?.fields || controlSetData.field_schema?.fields || {};
+        for (const [fieldName] of Object.entries(fieldSchema)) {
+          if (control[fieldName] !== void 0) {
             metadata[fieldName] = control[fieldName];
           }
         }
-        if (control.title !== void 0) metadata.title = control.title;
-        if (control.implementation_status !== void 0)
-          metadata.implementation_status = control.implementation_status;
-        if (control.compliance_status !== void 0)
-          metadata.compliance_status = control.compliance_status;
+        if (Object.keys(fieldSchema).length === 0) {
+          Object.assign(metadata, control);
+        }
         return metadata;
       });
       return {
@@ -2525,8 +2524,9 @@ var WebSocketManager = class {
           id: controlId,
           family: control.family || control["control-acronym"]?.toString().split("-")[0] || ""
         };
-        if (controlSetData.field_schema?.fields) {
-          for (const [fieldName] of Object.entries(controlSetData.field_schema.fields)) {
+        const schemaFields = controlSetData.field_schema?.fields || controlSetData.fieldSchema?.fields;
+        if (schemaFields) {
+          for (const [fieldName] of Object.entries(schemaFields)) {
             if (control[fieldName] !== void 0) {
               summary[fieldName] = control[fieldName];
             }

package/dist/index.html

@@ -6,28 +6,28 @@
 		<link rel="icon" href="/lula.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		
-		<link rel="modulepreload" href="/_app/immutable/entry/start.CuPBZjFh.js">
-		<link rel="modulepreload" href="/_app/immutable/chunks/z5X83jua.js">
-		<link rel="modulepreload" href="/_app/immutable/chunks/C9p1zaS8.js">
-		<link rel="modulepreload" href="/_app/immutable/entry/app.DlQKiOqI.js">
+		<link rel="modulepreload" href="/_app/immutable/entry/start.D8vrR3Zv.js">
+		<link rel="modulepreload" href="/_app/immutable/chunks/ClX_MmzV.js">
+		<link rel="modulepreload" href="/_app/immutable/chunks/BhjtS45v.js">
+		<link rel="modulepreload" href="/_app/immutable/entry/app.8CEusWR7.js">
 		<link rel="modulepreload" href="/_app/immutable/chunks/DsnmJJEf.js">
-		<link rel="modulepreload" href="/_app/immutable/chunks/C2RwV308.js">
-		<link rel="modulepreload" href="/_app/immutable/chunks/EhHGBAhB.js">
-		<link rel="modulepreload" href="/_app/immutable/chunks/cvagBx-i.js">
+		<link rel="modulepreload" href="/_app/immutable/chunks/DwdPeWTx.js">
+		<link rel="modulepreload" href="/_app/immutable/chunks/vNis_B2V.js">
+		<link rel="modulepreload" href="/_app/immutable/chunks/BkFSJLu9.js">
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">
 			<script>
 				{
-					__sveltekit_ni8atx = {
+					__sveltekit_12i3es4 = {
 						base: ""
 					};
 
 					const element = document.currentScript.parentElement;
 
 					Promise.all([
-						import("/_app/immutable/entry/start.CuPBZjFh.js"),
-						import("/_app/immutable/entry/app.DlQKiOqI.js")
+						import("/_app/immutable/entry/start.D8vrR3Zv.js"),
+						import("/_app/immutable/entry/app.8CEusWR7.js")
 					]).then(([kit, app]) => {
 						kit.start(app, element);
 					});

package/dist/index.js

@@ -4684,6 +4684,7 @@ var WebSocketManager = class {
                   `${control.id}.yaml`,
                   `${control.id.replace(/\./g, "_")}.yaml`,
                   // AC-1.1 -> AC-1_1.yaml
+                  // eslint-disable-next-line no-useless-escape
                   `${control.id.replace(/[^\w\-]/g, "_")}.yaml`
                   // General sanitization
                 ];
@@ -4905,17 +4906,15 @@ var WebSocketManager = class {
           id: control.id,
           family: control.family
         };
-        const fieldSchema = controlSetData.fieldSchema?.fields || {};
-        for (const [fieldName, fieldConfig] of Object.entries(fieldSchema)) {
-          if (fieldConfig.tab === "overview" && control[fieldName] !== void 0) {
+        const fieldSchema = controlSetData.fieldSchema?.fields || controlSetData.field_schema?.fields || {};
+        for (const [fieldName] of Object.entries(fieldSchema)) {
+          if (control[fieldName] !== void 0) {
             metadata[fieldName] = control[fieldName];
           }
         }
-        if (control.title !== void 0) metadata.title = control.title;
-        if (control.implementation_status !== void 0)
-          metadata.implementation_status = control.implementation_status;
-        if (control.compliance_status !== void 0)
-          metadata.compliance_status = control.compliance_status;
+        if (Object.keys(fieldSchema).length === 0) {
+          Object.assign(metadata, control);
+        }
         return metadata;
       });
       return {
@@ -4972,8 +4971,9 @@ var WebSocketManager = class {
           id: controlId,
           family: control.family || control["control-acronym"]?.toString().split("-")[0] || ""
         };
-        if (controlSetData.field_schema?.fields) {
-          for (const [fieldName] of Object.entries(controlSetData.field_schema.fields)) {
+        const schemaFields = controlSetData.field_schema?.fields || controlSetData.fieldSchema?.fields;
+        if (schemaFields) {
+          for (const [fieldName] of Object.entries(schemaFields)) {
             if (control[fieldName] !== void 0) {
               summary[fieldName] = control[fieldName];
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lula2",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "A tool for managing compliance as code in your GitHub repositories.",
   "bin": {
     "lula2": "./dist/lula2"

package/src/lib/components/control-sets/ControlSetSelector.svelte

@@ -30,7 +30,7 @@
 		onchange={handleChange}
 		class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white"
 	>
-		{#each availableSets as set}
+		{#each availableSets as set (set.id)}
 			<option value={set.id}>{set.name} {set.version}</option>
 		{/each}
 	</select>

package/src/lib/components/controls/ControlDetailsPanel.svelte

@@ -139,7 +139,7 @@
 	}
 
 	// Handle field changes from custom tab
-	function handleFieldChange(fieldName: string, value: any) {
+	function handleFieldChange(_fieldName: string, _value: any) {
 		triggerAutoSave();
 	}
 </script>

package/src/lib/components/controls/ControlsList.svelte

@@ -170,32 +170,6 @@
 		goto(`/control/${encodeURIComponent(control.id)}`);
 	}
 
-	function getStatusBadgeClass(status: string) {
-		switch (status) {
-			case 'Implemented':
-				return 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300';
-			case 'Planned':
-				return 'bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-300';
-			case 'Not Implemented':
-				return 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300';
-			default:
-				return 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300';
-		}
-	}
-
-	function getComplianceBadgeClass(status: string) {
-		switch (status) {
-			case 'Compliant':
-				return 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-800 dark:text-emerald-300';
-			case 'Non-Compliant':
-				return 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300';
-			case 'Not Assessed':
-				return 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300';
-			default:
-				return 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300';
-		}
-	}
-
 	function extractDescriptionFromNested(data: any): string {
 		if (typeof data === 'string') {
 			return data;
@@ -224,24 +198,6 @@
 		return 'No description available';
 	}
 
-	// Helper to determine if a field should be truncated and show tooltip
-	function shouldTruncateField(field: FieldSchema | undefined, value: string): boolean {
-		if (!value) return false;
-		
-		// Always show tooltip for textarea fields if content is long
-		if (field?.ui_type === 'textarea' || field?.ui_type === 'long_text') {
-			return value.length > 100; // Lower threshold for long text fields
-		}
-		
-		// For short_text fields, only show if really long
-		if (field?.ui_type === 'short_text') {
-			return value.length > 200;
-		}
-		
-		// Default for unknown field types
-		return value.length > 150;
-	}
-
 	// Get truncation length based on field type
 	function getTruncationLength(field: FieldSchema | undefined): number {
 		if (field?.ui_type === 'textarea' || field?.ui_type === 'long_text') {
@@ -296,7 +252,7 @@
 			<!-- Active Filters Summary -->
 			{#if $activeFilters.length > 0}
 				<div class="mt-2 flex flex-wrap gap-2">
-					{#each $activeFilters as filter, index}
+					{#each $activeFilters as filter, index (index)}
 						<div class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300">
 							<span>{filter.fieldName}: </span>
 							{#if filter.operator === 'exists' || filter.operator === 'not_exists'}
@@ -342,7 +298,7 @@
 						class="grid gap-4 px-6 py-3"
 						style="grid-template-columns: repeat({tableColumns.length + 1}, minmax(0, 1fr)); max-width: 100%;"
 					>
-						{#each tableColumns as { fieldName, field }}
+						{#each tableColumns as { fieldName, field }, index (index)} 
 							<div
 								class="text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider"
 							>
@@ -391,7 +347,7 @@
 			<!-- Scrollable Table Body -->
 			<div class="flex-1 overflow-auto">
 				<div class="divide-y divide-gray-200 dark:divide-gray-700">
-					{#each $filteredControlsWithMappings as control}
+					{#each $filteredControlsWithMappings as control, index (index)}
 						{@const rawDescription = (() => {
 							// Cast control to any to allow dynamic field access
 							const anyControl = control as any;
@@ -434,7 +390,7 @@
 								tabindex="0"
 								aria-label="Select control {control.id}"
 							>
-								{#each tableColumns as { fieldName, field }}
+								{#each tableColumns as { fieldName, field }, index (index)}
 									{@const value = (control as any)[fieldName]}
 									<div class="flex flex-col justify-center">
 										{#if field.ui_type === 'select' && value}

package/src/lib/components/controls/DynamicControlEditor.svelte

@@ -193,7 +193,7 @@
 							CCIs Found in Narrative
 						</div>
 						<div class="flex flex-wrap gap-2">
-							{#each ccisInNarrative as cci}
+							{#each ccisInNarrative as cci (cci)}
 								<span
 									class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200"
 								>
@@ -215,7 +215,7 @@
 			{:else if activeTab === 'mappings'}
 				<div class="space-y-4">
 					{#if associatedMappings.length > 0}
-						{#each associatedMappings as mapping}
+						{#each associatedMappings as mapping (mapping.uuid)}
 							<div
 								class="border border-gray-200 dark:border-gray-600 rounded-lg p-4 bg-gray-50 dark:bg-gray-800"
 							>

package/src/lib/components/controls/MappingCard.svelte

@@ -80,7 +80,7 @@
 			<div class="mb-4">
 				<h4 class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider mb-2">Source References</h4>
 				<div class="space-y-2">
-					{#each mapping.source_entries as entry}
+					{#each mapping.source_entries as entry (entry)}
 						<div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700">
 							<div class="flex items-start justify-between">
 								<span class="text-xs font-mono text-blue-600 dark:text-blue-400 break-all">

package/src/lib/components/controls/MappingForm.svelte

@@ -110,7 +110,7 @@
 			<!-- Existing entries -->
 			{#if formData.source_entries.length > 0}
 				<div class="space-y-3">
-					{#each formData.source_entries as entry, index}
+					{#each formData.source_entries as entry, index (index)}
 						<div class="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
 							<div class="flex-1 min-w-0">
 								<div class="text-sm font-mono text-gray-900 dark:text-white break-all">

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

@@ -38,7 +38,7 @@
 			class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400"
 		>
 			<option value="">-- Select --</option>
-			{#each field.options as option}
+			{#each field.options as option (option)}
 				<option value={option}>{option}</option>
 			{/each}
 		</select>

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)}