lula2 0.3.0 → 0.3.2-nightly.0

package/dist/index.js

@@ -1952,7 +1952,10 @@ var init_fileStore = __esm({
         const controlId = mapping.control_id;
         const family = this.getControlFamily(controlId);
         const familyDir = join2(this.mappingsDir, family);
-        const mappingFile = join2(familyDir, `${controlId}-mappings.yaml`);
+        const mappingFile = join2(
+          familyDir,
+          `${controlId.replace(/[^a-zA-Z0-9-]/g, "_")}-mappings.yaml`
+        );
         if (!existsSync2(familyDir)) {
           mkdirSync(familyDir, { recursive: true });
         }
@@ -2050,7 +2053,10 @@ var init_fileStore = __esm({
         for (const [controlId, controlMappings] of mappingsByControl) {
           const family = this.getControlFamily(controlId);
           const familyDir = join2(this.mappingsDir, family);
-          const mappingFile = join2(familyDir, `${controlId}-mappings.yaml`);
+          const mappingFile = join2(
+            familyDir,
+            `${controlId.replace(/[^a-zA-Z0-9-]/g, "_")}-mappings.yaml`
+          );
           if (!existsSync2(familyDir)) {
             mkdirSync(familyDir, { recursive: true });
           }
@@ -2556,7 +2562,7 @@ var init_gitHistory = __esm({
               changes = diffResult.changes;
               diff = diffResult.diff;
               yamlDiff = diffResult.yamlDiff;
-            } catch (error) {
+            } catch {
             }
           }
           gitCommits.push({
@@ -2613,7 +2619,7 @@ var init_gitHistory = __esm({
             diff,
             yamlDiff
           };
-        } catch (error) {
+        } catch {
           return { changes: { insertions: 0, deletions: 0, files: 1 } };
         }
       }
@@ -3288,7 +3294,7 @@ var init_spreadsheetRoutes = __esm({
         if (req.body.fieldSchema) {
           try {
             frontendFieldSchema = JSON.parse(req.body.fieldSchema);
-          } catch (e) {
+          } catch {
           }
         }
         const fields = {};
@@ -3348,7 +3354,9 @@ var init_spreadsheetRoutes = __esm({
             uiType = "long_text";
           }
           let category = frontendConfig?.category || "custom";
-          if (!frontendConfig) {
+          if (justificationFields.includes(fieldName)) {
+            category = "mappings";
+          } else if (!frontendConfig) {
             if (fieldName.includes("status") || fieldName.includes("state")) {
               category = "compliance";
             } else if (fieldName.includes("title") || fieldName.includes("name") || fieldName.includes("description")) {
@@ -3376,8 +3384,8 @@ var init_spreadsheetRoutes = __esm({
             // Control ID is always first
             category: isControlIdField ? "core" : category,
             // Control ID is always core
-            tab: isControlIdField ? "overview" : frontendConfig?.tab || void 0
-            // Control ID is always in overview
+            tab: isControlIdField ? "overview" : justificationFields.includes(fieldName) ? "mappings" : frontendConfig?.tab || void 0
+            // Use frontend config or default
           };
           if (uiType === "select") {
             fieldDef.options = Array.from(metadata.uniqueValues).sort();
@@ -3440,7 +3448,7 @@ var init_spreadsheetRoutes = __esm({
               if (fieldName === "family") return;
               if (justificationFields.includes(fieldName) && control[fieldName] !== void 0 && control[fieldName] !== null) {
                 justificationContents.push(control[fieldName]);
-                return;
+                filteredControl[fieldName] = control[fieldName];
               }
               const isInFrontendSchema = frontendFieldSchema?.some((f) => f.fieldName === fieldName);
               const isInFieldsMetadata = fields.hasOwnProperty(fieldName);
@@ -3546,7 +3554,7 @@ var init_spreadsheetRoutes = __esm({
           if (!worksheet) {
             return res.status(400).json({ error: "No worksheet found in file" });
           }
-          worksheet.eachRow({ includeEmpty: false }, (row, rowNumber) => {
+          worksheet.eachRow({ includeEmpty: false }, (row, _rowNumber) => {
             const rowData = [];
             row.eachCell({ includeEmpty: true }, (cell, colNumber) => {
               rowData[colNumber - 1] = cell.value;
@@ -3556,7 +3564,7 @@ var init_spreadsheetRoutes = __esm({
         }
         const headerCandidates = rows.slice(0, 5).map((row, index) => ({
           row: index + 1,
-          preview: row.slice(0, 4).filter((v) => v != null).join(", ") + (row.length > 4 ? ", ..." : "")
+          preview: row.slice(0, 4).filter((v) => v !== null).filter((v) => v !== void 0).join(", ") + (row.length > 4 ? ", ..." : "")
         }));
         res.json({
           sheets,
@@ -3591,7 +3599,7 @@ var init_spreadsheetRoutes = __esm({
           if (!worksheet) {
             return res.status(400).json({ error: `Sheet "${sheetName}" not found` });
           }
-          worksheet.eachRow({ includeEmpty: false }, (row, rowNumber) => {
+          worksheet.eachRow({ includeEmpty: false }, (row, _rowNumber) => {
             const rowData = [];
             row.eachCell({ includeEmpty: true }, (cell, colNumber) => {
               rowData[colNumber - 1] = cell.value;
@@ -4713,7 +4721,7 @@ var WebSocketManager = class {
                     totalCommits: controlHistory.totalCommits,
                     commits: controlHistory.commits?.length || 0
                   });
-                  const mappingFilename = `${control.id}-mappings.yaml`;
+                  const mappingFilename = `${control.id.replace(/[^a-zA-Z0-9-]/g, "_")}-mappings.yaml`;
                   const mappingPath = join5(currentPath2, "mappings", family, mappingFilename);
                   let mappingHistory = { commits: [], totalCommits: 0 };
                   if (existsSync6(mappingPath)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lula2",
-  "version": "0.3.0",
+  "version": "0.3.2-nightly.0",
   "description": "A tool for managing compliance as code in your GitHub repositories.",
   "bin": {
     "lula2": "./dist/lula2"
@@ -33,25 +33,6 @@
     "!dist/**/*.test.js*",
     "!dist/**/*.test.d.ts*"
   ],
-  "scripts": {
-    "dev": "vite dev --port 5173",
-    "dev:api": "tsx --watch index.ts --debug ui --port 3000 --no-open-browser",
-    "dev:full": "concurrently \"npm run dev:api\" \"npm run dev\"",
-    "build": "npm run build:svelte && npm run build:cli && npm run postbuild:cli",
-    "build:svelte": "vite build",
-    "build:cli": "esbuild index.ts cli/**/*.ts --bundle --platform=node --target=node22 --format=esm --outdir=dist --external:express --external:commander --external:js-yaml --external:yaml --external:isomorphic-git --external:glob --external:open --external:ws --external:cors --external:multer --external:@octokit/rest --external:undici --external:exceljs --external:csv-parse",
-    "postbuild:cli": "cp cli-wrapper.mjs dist/lula2 && chmod +x dist/lula2",
-    "preview": "vite preview",
-    "prepare": "svelte-kit sync || echo ''",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && tsc --noEmit",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "format": "prettier --write 'src/**/*.{ts,js,svelte}' 'cli/**/*.ts' 'index.ts' 'tests/**/*.ts'",
-    "format:check": "prettier --check 'src/**/*.{ts,js,svelte}' 'cli/**/*.ts' 'index.ts' 'tests/**/*.ts'",
-    "lint": "prettier --check 'src/**/*.{ts,js,svelte}' 'cli/**/*.ts' 'index.ts' 'tests/**/*.ts' && eslint src cli",
-    "test": "npm run test:unit -- --run --coverage",
-    "test:integration": "vitest --config integration/vitest.config.integration.ts",
-    "test:unit": "vitest"
-  },
   "dependencies": {
     "@octokit/rest": "^22.0.0",
     "@types/ws": "^8.18.1",
@@ -75,6 +56,7 @@
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
     "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.35.0",
     "@playwright/test": "^1.55.0",
     "@sveltejs/adapter-static": "^3.0.9",
@@ -123,5 +105,23 @@
       "main",
       "next"
     ]
+  },
+  "scripts": {
+    "dev": "vite dev --port 5173",
+    "dev:api": "tsx --watch index.ts --debug ui --port 3000 --no-open-browser",
+    "dev:full": "concurrently \"npm run dev:api\" \"npm run dev\"",
+    "build": "npm run build:svelte && npm run build:cli && npm run postbuild:cli",
+    "build:svelte": "vite build",
+    "build:cli": "esbuild index.ts cli/**/*.ts --bundle --platform=node --target=node22 --format=esm --outdir=dist --external:express --external:commander --external:js-yaml --external:yaml --external:isomorphic-git --external:glob --external:open --external:ws --external:cors --external:multer --external:@octokit/rest --external:undici --external:exceljs --external:csv-parse",
+    "postbuild:cli": "cp cli-wrapper.mjs dist/lula2 && chmod +x dist/lula2",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && tsc --noEmit",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write 'src/**/*.{ts,js,svelte}' 'cli/**/*.ts' 'index.ts' 'tests/**/*.ts'",
+    "format:check": "prettier --check 'src/**/*.{ts,js,svelte}' 'cli/**/*.ts' 'index.ts' 'tests/**/*.ts'",
+    "lint": "prettier --check 'src/**/*.{ts,js,svelte}' 'cli/**/*.ts' 'index.ts' 'tests/**/*.ts' && eslint src cli",
+    "test": "npm run test:unit -- --run --coverage",
+    "test:integration": "vitest --config integration/vitest.config.integration.ts",
+    "test:unit": "vitest"
   }
-}
+}

package/src/lib/actions/clickOutside.ts

@@ -0,0 +1,24 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: 2023-Present The Lula Authors
+
+/**
+ * Action that dispatches an event when a click occurs outside of the node it's applied to
+ */
+export function clickOutside(node: HTMLElement, callback: () => void) {
+	const handleClick = (event: MouseEvent) => {
+		if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
+			callback();
+		}
+	};
+
+	document.addEventListener('click', handleClick, true);
+
+	return {
+		destroy() {
+			document.removeEventListener('click', handleClick, true);
+		},
+		update(newCallback: () => void) {
+			callback = newCallback;
+		}
+	};
+}

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

@@ -4,16 +4,16 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
-	import { Dropdown, SearchBar, Tooltip } from '$components/ui';
+	import { SearchBar, Tooltip } from '$components/ui';
+	import FilterBuilder from '$components/ui/FilterBuilder.svelte';
 	import type { Control, FieldSchema } from '$lib/types';
 	import { appState } from '$lib/websocket';
-	import { complianceStore, searchTerm, selectedFamily } from '$stores/compliance';
-	import { Filter, Information } from 'carbon-icons-svelte';
+	import { complianceStore, searchTerm, activeFilters, getOperatorLabel } from '$stores/compliance';
+	import { Information } from 'carbon-icons-svelte';
 	import { derived } from 'svelte/store';
 
-	// Derive controls and families from appState
+	// Derive controls from appState
 	const controls = derived(appState, ($state) => $state.controls || []);
-	const families = derived(appState, ($state) => $state.families || []);
 	const loading = derived(appState, ($state) => !$state.isConnected);
 
 	// Derive controls with mappings
@@ -104,26 +104,64 @@
 
 	// Create filtered controls with mappings
 	const filteredControlsWithMappings = derived(
-		[controlsWithMappings, selectedFamily, searchTerm],
-		([$controlsWithMappings, $selectedFamily, $searchTerm]) => {
+		[controlsWithMappings, searchTerm, activeFilters],
+		([$controlsWithMappings, $searchTerm, $activeFilters]) => {
 			let results = $controlsWithMappings;
 
-			if ($selectedFamily) {
-				results = results.filter((c) => {
-					const family =
-						(c as any)?._metadata?.family ||
-						(c as any)?.family ||
-						(c as any)?.['control-acronym']?.split('-')[0] ||
-						'';
-					return family === $selectedFamily;
-				});
-			}
-
+			// 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) => {
+					// Control must match all filters
+					return $activeFilters.every(filter => {
+						const dynamicControl = control as Record<string, unknown>;
+						const fieldValue = dynamicControl[filter.fieldName];
+						
+						switch (filter.operator) {
+							case 'equals':
+								return fieldValue === filter.value;
+								
+							case 'not_equals':
+								return fieldValue !== filter.value;
+								
+							case 'exists':
+								return fieldValue !== undefined && fieldValue !== null && fieldValue !== '';
+								
+							case 'not_exists':
+								return fieldValue === undefined || fieldValue === null || fieldValue === '';
+								
+							case 'includes':
+								if (typeof fieldValue === 'string') {
+									return fieldValue.toLowerCase().includes(String(filter.value).toLowerCase());
+								} else if (Array.isArray(fieldValue)) {
+									return fieldValue.some(item => 
+										String(item).toLowerCase().includes(String(filter.value).toLowerCase())
+									);
+								}
+								return false;
+								
+							case 'not_includes':
+								if (typeof fieldValue === 'string') {
+									return !fieldValue.toLowerCase().includes(String(filter.value).toLowerCase());
+								} else if (Array.isArray(fieldValue)) {
+									return !fieldValue.some(item => 
+										String(item).toLowerCase().includes(String(filter.value).toLowerCase())
+									);
+								}
+								return true;
+								
+							default:
+								return true;
+						}
+					});
+				});
+			}
+
 			return results;
 		}
 	);
@@ -243,64 +281,53 @@
 				</span>
 			</div>
 
-			<!-- Search Bar, Family Filter, and Export -->
+			<!-- Search Bar, Filter, and Export -->
 			<div class="flex gap-3">
 				<div class="flex-1">
 					<SearchBar />
 				</div>
+				
+				<!-- Filter Builder -->
 				<div class="flex-shrink-0">
-					<Dropdown
-						buttonLabel={$selectedFamily || 'All Families'}
-						buttonIcon={Filter}
-						buttonClass="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
-						dropdownClass="w-64"
-					>
-						{#snippet children()}
-							<div class="space-y-1">
-								<button
-									onclick={() => {
-										complianceStore.setSelectedFamily(null);
-									}}
-									class="w-full text-left px-3 py-2 text-sm rounded-md transition-colors duration-200 flex items-center justify-between {$selectedFamily ===
-									null
-										? 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200'
-										: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'}"
-								>
-									<span>All Families</span>
-									<span class="text-xs bg-gray-200 dark:bg-gray-600 px-2 py-1 rounded-full">
-										{$controls.length}
-									</span>
-								</button>
-
-								{#each $families as family}
-									{@const familyCount = $controls.filter((c) => {
-										const controlFamily =
-											(c as any)?._metadata?.family ||
-											(c as any)?.family ||
-											(c as any)?.['control-acronym']?.split('-')[0] ||
-											'';
-										return controlFamily === family;
-									}).length}
-									<button
-										onclick={() => {
-											complianceStore.setSelectedFamily(family);
-										}}
-										class="w-full text-left px-3 py-2 text-sm rounded-md transition-colors duration-200 flex items-center justify-between {$selectedFamily ===
-										family
-											? 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200'
-											: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'}"
-									>
-										<span>{family}</span>
-										<span class="text-xs bg-gray-200 dark:bg-gray-600 px-2 py-1 rounded-full">
-											{familyCount}
-										</span>
-									</button>
-								{/each}
-							</div>
-						{/snippet}
-					</Dropdown>
+					<FilterBuilder />
 				</div>
 			</div>
+			
+			<!-- Active Filters Summary -->
+			{#if $activeFilters.length > 0}
+				<div class="mt-2 flex flex-wrap gap-2">
+					{#each $activeFilters as filter, 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'}
+								<span>{getOperatorLabel(filter.operator).toLowerCase()}</span>
+							{:else if filter.operator === 'equals'}
+								<span>= {filter.value}</span>
+							{:else if filter.operator === 'not_equals'}
+								<span>≠ {filter.value}</span>
+							{:else}
+								<span>{getOperatorLabel(filter.operator).toLowerCase()} "{filter.value}"</span>
+							{/if}
+							<button 
+								onclick={() => complianceStore.removeFilter(index)}
+								class="ml-1 text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100"
+								aria-label="Remove filter"
+							>
+								×
+							</button>
+						</div>
+					{/each}
+					
+					{#if $activeFilters.length > 1}
+						<button 
+							onclick={() => complianceStore.clearFilters()}
+							class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700"
+						>
+							Clear all
+						</button>
+					{/if}
+				</div>
+			{/if}
 		</div>
 
 		<!-- Controls Table -->
@@ -582,15 +609,14 @@
 					</svg>
 					<h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-white">No controls found</h3>
 					<p class="mt-2 text-sm text-gray-500 dark:text-gray-400 max-w-sm mx-auto">
-						{#if $searchTerm}
-							No controls match your search criteria. Try adjusting your search terms or clearing
-							filters.
-						{:else if $selectedFamily}
-							No controls available in this family. Select a different family or check your data.
+						{#if $activeFilters.length > 0}
+							No controls match your filter criteria. Try adjusting or removing some filters.
+						{:else if $searchTerm}
+							No controls match your search criteria. Try adjusting your search terms.
 						{:else if $controls.length === 0}
 							No controls have been imported yet.
 						{:else}
-							No controls available. Select a different family or check your data.
+							No controls available. Check your data.
 						{/if}
 					</p>
 					{#if $controls.length === 0}

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

@@ -127,4 +127,4 @@
 			<p class="text-gray-500 dark:text-gray-400">No custom fields configured</p>
 		</div>
 	{/if}
-</div>
+</div>

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

@@ -11,7 +11,7 @@
 		timeline?: any; // Timeline type from control.timeline
 	}
 
-	let { control, timeline }: Props = $props();
+	let { timeline }: Props = $props();
 
 	const commits = $derived(timeline?.commits || []);
 </script>

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

@@ -23,7 +23,7 @@
 			<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, _i}
 							<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
 								{#each row.columns as column, 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'}">

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

@@ -128,7 +128,7 @@
 {#if readonly}
 	<!-- View Mode: Clean minimal layout -->
 	<div class="space-y-6">
-		{#each Object.entries(fieldGroups) as [groupName, fields]}
+		{#each Object.entries(fieldGroups) as [_groupName, fields]}
 			{#each [fields] as fieldList}
 				{@const importantFields = fieldList.filter((f) =>
 					['id', 'title', 'priority', 'status'].includes(f.id)
@@ -226,7 +226,7 @@
 										</span>
 									</h3>
 									<div class="space-y-3">
-										{#each value as item, index}
+										{#each value as item, _index}
 											<div
 												class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700"
 											>

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';
 

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

@@ -784,8 +784,8 @@
 						aria-label="Overview tab drop zone"
 					>
 						{#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)}
+							.filter(([_field, config]) => config.tab === 'overview')
+							.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 +805,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 +835,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 +856,7 @@
 								<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>
@@ -889,7 +889,7 @@
 						<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)}
@@ -966,8 +966,8 @@
 						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)}
+							.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)}
@@ -987,7 +987,7 @@
 								<span class="truncate">{field}</span>
 							</div>
 						{/each}
-						{#if Array.from(fieldConfigs.entries()).filter(([field, config]) => config.tab === 'custom').length === 0}
+						{#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>

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

@@ -0,0 +1,96 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts" generics="T">
+	import { clickOutside } from '$lib/actions/clickOutside';
+	import { fade } from 'svelte/transition';
+	import { twMerge } from 'tailwind-merge';
+	import { ChevronDown, ChevronUp } from 'carbon-icons-svelte';
+
+	// Props
+	export let value: T = undefined as unknown as T;
+	export let options: Array<{ value: T; label: string }> = [];
+	export let placeholder: string = 'Select an option';
+	export let label: string | undefined = undefined;
+	export let labelId: string | undefined = undefined;
+	export let getDisplayValue: (value: T) => string = (val) => {
+		const option = options.find((opt) => opt.value === val);
+		return option ? option.label : String(val);
+	};
+
+	// State
+	let isOpen = false;
+
+	// Handle selection
+	function selectOption(optionValue: T) {
+		value = optionValue;
+		isOpen = false;
+	}
+
+	// Handle toggle
+	function toggle() {
+		isOpen = !isOpen;
+	}
+
+	// Handle close
+	function close() {
+		isOpen = false;
+	}
+</script>
+
+<div>
+	{#if label}
+		<label for={labelId} class="block text-xs text-gray-600 dark:text-gray-400 mb-1">{label}</label>
+	{/if}
+	<div class="relative" use:clickOutside={close}>
+		<!-- Dropdown Trigger -->
+		<button
+			type="button"
+			id={labelId}
+			on:click={toggle}
+			class={twMerge(
+				'w-full flex items-center justify-between px-3 py-2 text-sm rounded-md border transition-colors',
+				isOpen
+					? 'border-blue-500 dark:border-blue-400 ring-2 ring-blue-200 dark:ring-blue-900'
+					: 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500',
+				'bg-white dark:bg-gray-700 text-gray-900 dark:text-white'
+			)}
+		>
+			<span class="truncate">
+				{value ? getDisplayValue(value) : placeholder}
+			</span>
+			{#if isOpen}
+				<ChevronUp class="h-4 w-4 text-gray-500 dark:text-gray-400" />
+			{:else}
+				<ChevronDown class="h-4 w-4 text-gray-500 dark:text-gray-400" />
+			{/if}
+		</button>
+
+		<!-- Dropdown Menu -->
+		{#if isOpen}
+			<div
+				class="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg max-h-60 overflow-y-auto"
+				transition:fade={{ duration: 100 }}
+			>
+				<slot name="header" />
+
+				{#each options as option}
+					<button
+						type="button"
+						class={twMerge(
+							'w-full text-left px-3 py-2 text-sm',
+							value === option.value
+								? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'
+								: 'hover:bg-gray-100 dark:hover:bg-gray-700/50'
+						)}
+						on:click={() => selectOption(option.value)}
+					>
+						{option.label}
+					</button>
+				{/each}
+
+				<slot name="footer" />
+			</div>
+		{/if}
+	</div>
+</div>