lula2 0.1.1-nightly.0 → 0.2.0

package/dist/cli/server/server.js

@@ -2810,6 +2810,7 @@ __export(spreadsheetRoutes_exports, {
   default: () => spreadsheetRoutes_default,
   scanControlSets: () => scanControlSets
 });
+import crypto from "crypto";
 import { parse as parseCSVSync } from "csv-parse/sync";
 import ExcelJS from "exceljs";
 import express from "express";
@@ -3128,6 +3129,15 @@ var init_spreadsheetRoutes = __esm({
           controlSetName = "Imported Control Set",
           controlSetDescription = "Imported from spreadsheet"
         } = req.body;
+        let justificationFields = [];
+        if (req.body.justificationFields) {
+          try {
+            justificationFields = JSON.parse(req.body.justificationFields);
+            debug("Justification fields received:", justificationFields);
+          } catch (e) {
+            console.error("Failed to parse justification fields:", e);
+          }
+        }
         debug("Import parameters received:", {
           controlIdField,
           startRow,
@@ -3375,11 +3385,17 @@ var init_spreadsheetRoutes = __esm({
         };
         writeFileSync2(join4(baseDir, "lula.yaml"), yaml4.dump(controlSetData));
         const controlsDir = join4(baseDir, "controls");
+        const mappingsDir = join4(baseDir, "mappings");
+        const justificationFieldNames = justificationFields;
         families.forEach((familyControls, family) => {
           const familyDir = join4(controlsDir, family);
+          const familyMappingsDir = join4(mappingsDir, family);
           if (!existsSync3(familyDir)) {
             mkdirSync2(familyDir, { recursive: true });
           }
+          if (!existsSync3(familyMappingsDir)) {
+            mkdirSync2(familyMappingsDir, { recursive: true });
+          }
           familyControls.forEach((control) => {
             const controlId = control[controlIdFieldNameClean];
             if (!controlId) {
@@ -3389,12 +3405,24 @@ var init_spreadsheetRoutes = __esm({
             const controlIdStr = String(controlId).slice(0, 50);
             const fileName2 = `${controlIdStr.replace(/[^a-zA-Z0-9-]/g, "_")}.yaml`;
             const filePath = join4(familyDir, fileName2);
+            const mappingFileName = `${controlIdStr.replace(/[^a-zA-Z0-9-]/g, "_")}-mappings.yaml`;
+            const mappingFilePath = join4(familyMappingsDir, mappingFileName);
             const filteredControl = {};
+            const mappingData = {
+              control_id: controlIdStr,
+              justification: "",
+              uuid: crypto.randomUUID()
+            };
+            const justificationContents = [];
             if (control.family !== void 0) {
               filteredControl.family = control.family;
             }
             Object.keys(control).forEach((fieldName) => {
               if (fieldName === "family") return;
+              if (justificationFields.includes(fieldName) && control[fieldName] !== void 0 && control[fieldName] !== null) {
+                justificationContents.push(control[fieldName]);
+                return;
+              }
               const isInFrontendSchema = frontendFieldSchema?.some((f) => f.fieldName === fieldName);
               const isInFieldsMetadata = fields.hasOwnProperty(fieldName);
               if (isInFrontendSchema || isInFieldsMetadata) {
@@ -3402,6 +3430,13 @@ var init_spreadsheetRoutes = __esm({
               }
             });
             writeFileSync2(filePath, yaml4.dump(filteredControl));
+            if (justificationContents.length > 0) {
+              mappingData.justification = justificationContents.join("\n\n");
+            }
+            if (mappingData.justification && mappingData.justification.trim() !== "") {
+              const mappingArray = [mappingData];
+              writeFileSync2(mappingFilePath, yaml4.dump(mappingArray));
+            }
           });
         });
         res.json({
@@ -4510,8 +4545,8 @@ var WebSocketManager = class {
           if (payload && payload.control_id) {
             const mapping = payload;
             if (!mapping.uuid) {
-              const crypto = await import("crypto");
-              mapping.uuid = crypto.randomUUID();
+              const crypto2 = await import("crypto");
+              mapping.uuid = crypto2.randomUUID();
             }
             await state.fileStore.saveMapping(mapping);
             state.mappingsCache.set(mapping.uuid, mapping);

package/dist/cli/server/spreadsheetRoutes.js

@@ -1,4 +1,5 @@
 // cli/server/spreadsheetRoutes.ts
+import crypto from "crypto";
 import { parse as parseCSVSync } from "csv-parse/sync";
 import ExcelJS from "exceljs";
 import express from "express";
@@ -93,6 +94,15 @@ router.post("/import-spreadsheet", upload.single("file"), async (req, res) => {
       controlSetName = "Imported Control Set",
       controlSetDescription = "Imported from spreadsheet"
     } = req.body;
+    let justificationFields = [];
+    if (req.body.justificationFields) {
+      try {
+        justificationFields = JSON.parse(req.body.justificationFields);
+        debug("Justification fields received:", justificationFields);
+      } catch (e) {
+        console.error("Failed to parse justification fields:", e);
+      }
+    }
     debug("Import parameters received:", {
       controlIdField,
       startRow,
@@ -340,11 +350,17 @@ router.post("/import-spreadsheet", upload.single("file"), async (req, res) => {
     };
     writeFileSync(join(baseDir, "lula.yaml"), yaml4.dump(controlSetData));
     const controlsDir = join(baseDir, "controls");
+    const mappingsDir = join(baseDir, "mappings");
+    const justificationFieldNames = justificationFields;
     families.forEach((familyControls, family) => {
       const familyDir = join(controlsDir, family);
+      const familyMappingsDir = join(mappingsDir, family);
       if (!existsSync(familyDir)) {
         mkdirSync(familyDir, { recursive: true });
       }
+      if (!existsSync(familyMappingsDir)) {
+        mkdirSync(familyMappingsDir, { recursive: true });
+      }
       familyControls.forEach((control) => {
         const controlId = control[controlIdFieldNameClean];
         if (!controlId) {
@@ -354,12 +370,24 @@ router.post("/import-spreadsheet", upload.single("file"), async (req, res) => {
         const controlIdStr = String(controlId).slice(0, 50);
         const fileName2 = `${controlIdStr.replace(/[^a-zA-Z0-9-]/g, "_")}.yaml`;
         const filePath = join(familyDir, fileName2);
+        const mappingFileName = `${controlIdStr.replace(/[^a-zA-Z0-9-]/g, "_")}-mappings.yaml`;
+        const mappingFilePath = join(familyMappingsDir, mappingFileName);
         const filteredControl = {};
+        const mappingData = {
+          control_id: controlIdStr,
+          justification: "",
+          uuid: crypto.randomUUID()
+        };
+        const justificationContents = [];
         if (control.family !== void 0) {
           filteredControl.family = control.family;
         }
         Object.keys(control).forEach((fieldName) => {
           if (fieldName === "family") return;
+          if (justificationFields.includes(fieldName) && control[fieldName] !== void 0 && control[fieldName] !== null) {
+            justificationContents.push(control[fieldName]);
+            return;
+          }
           const isInFrontendSchema = frontendFieldSchema?.some((f) => f.fieldName === fieldName);
           const isInFieldsMetadata = fields.hasOwnProperty(fieldName);
           if (isInFrontendSchema || isInFieldsMetadata) {
@@ -367,6 +395,13 @@ router.post("/import-spreadsheet", upload.single("file"), async (req, res) => {
           }
         });
         writeFileSync(filePath, yaml4.dump(filteredControl));
+        if (justificationContents.length > 0) {
+          mappingData.justification = justificationContents.join("\n\n");
+        }
+        if (mappingData.justification && mappingData.justification.trim() !== "") {
+          const mappingArray = [mappingData];
+          writeFileSync(mappingFilePath, yaml4.dump(mappingArray));
+        }
       });
     });
     res.json({

package/dist/cli/server/websocketServer.js

@@ -1257,6 +1257,7 @@ __export(spreadsheetRoutes_exports, {
   default: () => spreadsheetRoutes_default,
   scanControlSets: () => scanControlSets
 });
+import crypto from "crypto";
 import { parse as parseCSVSync } from "csv-parse/sync";
 import ExcelJS from "exceljs";
 import express from "express";
@@ -1575,6 +1576,15 @@ var init_spreadsheetRoutes = __esm({
           controlSetName = "Imported Control Set",
           controlSetDescription = "Imported from spreadsheet"
         } = req.body;
+        let justificationFields = [];
+        if (req.body.justificationFields) {
+          try {
+            justificationFields = JSON.parse(req.body.justificationFields);
+            debug("Justification fields received:", justificationFields);
+          } catch (e) {
+            console.error("Failed to parse justification fields:", e);
+          }
+        }
         debug("Import parameters received:", {
           controlIdField,
           startRow,
@@ -1822,11 +1832,17 @@ var init_spreadsheetRoutes = __esm({
         };
         writeFileSync2(join4(baseDir, "lula.yaml"), yaml4.dump(controlSetData));
         const controlsDir = join4(baseDir, "controls");
+        const mappingsDir = join4(baseDir, "mappings");
+        const justificationFieldNames = justificationFields;
         families.forEach((familyControls, family) => {
           const familyDir = join4(controlsDir, family);
+          const familyMappingsDir = join4(mappingsDir, family);
           if (!existsSync3(familyDir)) {
             mkdirSync2(familyDir, { recursive: true });
           }
+          if (!existsSync3(familyMappingsDir)) {
+            mkdirSync2(familyMappingsDir, { recursive: true });
+          }
           familyControls.forEach((control) => {
             const controlId = control[controlIdFieldNameClean];
             if (!controlId) {
@@ -1836,12 +1852,24 @@ var init_spreadsheetRoutes = __esm({
             const controlIdStr = String(controlId).slice(0, 50);
             const fileName2 = `${controlIdStr.replace(/[^a-zA-Z0-9-]/g, "_")}.yaml`;
             const filePath = join4(familyDir, fileName2);
+            const mappingFileName = `${controlIdStr.replace(/[^a-zA-Z0-9-]/g, "_")}-mappings.yaml`;
+            const mappingFilePath = join4(familyMappingsDir, mappingFileName);
             const filteredControl = {};
+            const mappingData = {
+              control_id: controlIdStr,
+              justification: "",
+              uuid: crypto.randomUUID()
+            };
+            const justificationContents = [];
             if (control.family !== void 0) {
               filteredControl.family = control.family;
             }
             Object.keys(control).forEach((fieldName) => {
               if (fieldName === "family") return;
+              if (justificationFields.includes(fieldName) && control[fieldName] !== void 0 && control[fieldName] !== null) {
+                justificationContents.push(control[fieldName]);
+                return;
+              }
               const isInFrontendSchema = frontendFieldSchema?.some((f) => f.fieldName === fieldName);
               const isInFieldsMetadata = fields.hasOwnProperty(fieldName);
               if (isInFrontendSchema || isInFieldsMetadata) {
@@ -1849,6 +1877,13 @@ var init_spreadsheetRoutes = __esm({
               }
             });
             writeFileSync2(filePath, yaml4.dump(filteredControl));
+            if (justificationContents.length > 0) {
+              mappingData.justification = justificationContents.join("\n\n");
+            }
+            if (mappingData.justification && mappingData.justification.trim() !== "") {
+              const mappingArray = [mappingData];
+              writeFileSync2(mappingFilePath, yaml4.dump(mappingArray));
+            }
           });
         });
         res.json({
@@ -2090,8 +2125,8 @@ var WebSocketManager = class {
           if (payload && payload.control_id) {
             const mapping = payload;
             if (!mapping.uuid) {
-              const crypto = await import("crypto");
-              mapping.uuid = crypto.randomUUID();
+              const crypto2 = await import("crypto");
+              mapping.uuid = crypto2.randomUUID();
             }
             await state.fileStore.saveMapping(mapping);
             state.mappingsCache.set(mapping.uuid, mapping);

package/dist/index.html

@@ -6,10 +6,10 @@
 		<link rel="icon" href="/lula.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		
-		<link rel="modulepreload" href="/_app/immutable/entry/start.Cdw5p6kF.js">
-		<link rel="modulepreload" href="/_app/immutable/chunks/D3AAXov_.js">
+		<link rel="modulepreload" href="/_app/immutable/entry/start.z83Vr3Ay.js">
+		<link rel="modulepreload" href="/_app/immutable/chunks/Dacgmabg.js">
 		<link rel="modulepreload" href="/_app/immutable/chunks/Cby0Z7eP.js">
-		<link rel="modulepreload" href="/_app/immutable/entry/app.pY_jLQAk.js">
+		<link rel="modulepreload" href="/_app/immutable/entry/app.lS9kJbUY.js">
 		<link rel="modulepreload" href="/_app/immutable/chunks/DsnmJJEf.js">
 		<link rel="modulepreload" href="/_app/immutable/chunks/DqsOU3kV.js">
 		<link rel="modulepreload" href="/_app/immutable/chunks/CoF2vljD.js">
@@ -19,15 +19,15 @@
 		<div style="display: contents">
 			<script>
 				{
-					__sveltekit_rtxdy2 = {
+					__sveltekit_1lw4tcu = {
 						base: ""
 					};
 
 					const element = document.currentScript.parentElement;
 
 					Promise.all([
-						import("/_app/immutable/entry/start.Cdw5p6kF.js"),
-						import("/_app/immutable/entry/app.pY_jLQAk.js")
+						import("/_app/immutable/entry/start.z83Vr3Ay.js"),
+						import("/_app/immutable/entry/app.lS9kJbUY.js")
 					]).then(([kit, app]) => {
 						kit.start(app, element);
 					});

package/dist/index.js

@@ -2829,6 +2829,7 @@ __export(spreadsheetRoutes_exports, {
   default: () => spreadsheetRoutes_default,
   scanControlSets: () => scanControlSets
 });
+import crypto from "crypto";
 import { parse as parseCSVSync } from "csv-parse/sync";
 import ExcelJS from "exceljs";
 import express from "express";
@@ -3147,6 +3148,15 @@ var init_spreadsheetRoutes = __esm({
           controlSetName = "Imported Control Set",
           controlSetDescription = "Imported from spreadsheet"
         } = req.body;
+        let justificationFields = [];
+        if (req.body.justificationFields) {
+          try {
+            justificationFields = JSON.parse(req.body.justificationFields);
+            debug("Justification fields received:", justificationFields);
+          } catch (e) {
+            console.error("Failed to parse justification fields:", e);
+          }
+        }
         debug("Import parameters received:", {
           controlIdField,
           startRow,
@@ -3394,11 +3404,17 @@ var init_spreadsheetRoutes = __esm({
         };
         writeFileSync2(join4(baseDir, "lula.yaml"), yaml4.dump(controlSetData));
         const controlsDir = join4(baseDir, "controls");
+        const mappingsDir = join4(baseDir, "mappings");
+        const justificationFieldNames = justificationFields;
         families.forEach((familyControls, family) => {
           const familyDir = join4(controlsDir, family);
+          const familyMappingsDir = join4(mappingsDir, family);
           if (!existsSync3(familyDir)) {
             mkdirSync2(familyDir, { recursive: true });
           }
+          if (!existsSync3(familyMappingsDir)) {
+            mkdirSync2(familyMappingsDir, { recursive: true });
+          }
           familyControls.forEach((control) => {
             const controlId = control[controlIdFieldNameClean];
             if (!controlId) {
@@ -3408,12 +3424,24 @@ var init_spreadsheetRoutes = __esm({
             const controlIdStr = String(controlId).slice(0, 50);
             const fileName2 = `${controlIdStr.replace(/[^a-zA-Z0-9-]/g, "_")}.yaml`;
             const filePath = join4(familyDir, fileName2);
+            const mappingFileName = `${controlIdStr.replace(/[^a-zA-Z0-9-]/g, "_")}-mappings.yaml`;
+            const mappingFilePath = join4(familyMappingsDir, mappingFileName);
             const filteredControl = {};
+            const mappingData = {
+              control_id: controlIdStr,
+              justification: "",
+              uuid: crypto.randomUUID()
+            };
+            const justificationContents = [];
             if (control.family !== void 0) {
               filteredControl.family = control.family;
             }
             Object.keys(control).forEach((fieldName) => {
               if (fieldName === "family") return;
+              if (justificationFields.includes(fieldName) && control[fieldName] !== void 0 && control[fieldName] !== null) {
+                justificationContents.push(control[fieldName]);
+                return;
+              }
               const isInFrontendSchema = frontendFieldSchema?.some((f) => f.fieldName === fieldName);
               const isInFieldsMetadata = fields.hasOwnProperty(fieldName);
               if (isInFrontendSchema || isInFieldsMetadata) {
@@ -3421,6 +3449,13 @@ var init_spreadsheetRoutes = __esm({
               }
             });
             writeFileSync2(filePath, yaml4.dump(filteredControl));
+            if (justificationContents.length > 0) {
+              mappingData.justification = justificationContents.join("\n\n");
+            }
+            if (mappingData.justification && mappingData.justification.trim() !== "") {
+              const mappingArray = [mappingData];
+              writeFileSync2(mappingFilePath, yaml4.dump(mappingArray));
+            }
           });
         });
         res.json({
@@ -4537,8 +4572,8 @@ var WebSocketManager = class {
           if (payload && payload.control_id) {
             const mapping = payload;
             if (!mapping.uuid) {
-              const crypto = await import("crypto");
-              mapping.uuid = crypto.randomUUID();
+              const crypto2 = await import("crypto");
+              mapping.uuid = crypto2.randomUUID();
             }
             await state.fileStore.saveMapping(mapping);
             state.mappingsCache.set(mapping.uuid, mapping);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lula2",
-  "version": "0.1.1-nightly.0",
+  "version": "0.2.0",
   "description": "A tool for managing compliance as code in your GitHub repositories.",
   "bin": {
     "lula2": "./dist/lula2"
@@ -33,6 +33,25 @@
     "!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",
@@ -104,23 +123,5 @@
       "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/components/setup/SpreadsheetImport.svelte

@@ -17,7 +17,10 @@
 	$: availableFields = fields.filter((f) => fields.includes(f));
 
 	// Field configuration for tabs
-	type TabAssignment = 'overview' | 'implementation' | 'custom' | null;
+	type TabAssignment = 'overview' | 'implementation' | 'mappings' | 'custom' | null;
+
+	// Store fields for justification
+	let justificationFields: string[] = [];
 	let fieldConfigs = new Map<
 		string,
 		{
@@ -55,6 +58,7 @@
 		controlCount = 0;
 		fieldConfigs.clear();
 		fieldConfigs = new Map(); // Force reactivity
+		justificationFields = [];
 
 		// Reset selections
 		controlIdField = '';
@@ -307,6 +311,17 @@
 		e.preventDefault();
 		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
@@ -420,6 +435,12 @@
 				}));
 			formData.append('fieldSchema', JSON.stringify(fieldSchema));
 
+			// Add justification fields
+			formData.append(
+				'justificationFields',
+				JSON.stringify(justificationFields.map((field) => cleanFieldName(field)))
+			);
+
 			const response = await fetch('/api/import-spreadsheet', {
 				method: 'POST',
 				body: formData
@@ -692,7 +713,7 @@
 			</p>
 
 			<!-- Column Layout -->
-			<div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
+			<div class="grid grid-cols-1 lg:grid-cols-5 gap-4">
 				<!-- Excluded Fields Column -->
 				<div
 					class="border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800"
@@ -843,6 +864,88 @@
 					</div>
 				</div>
 
+				<!-- Mappings Tab Column -->
+				<div
+					class="border border-orange-300 dark:border-orange-700 rounded-lg bg-white dark:bg-gray-800"
+				>
+					<div
+						class="p-3 border-b border-orange-200 dark:border-orange-800 bg-orange-50 dark:bg-orange-900/20 rounded-t-lg"
+					>
+						<h4 class="text-sm font-semibold text-orange-700 dark:text-orange-300">Mappings Tab</h4>
+						<p class="text-xs text-orange-600 dark:text-orange-400 mt-1">
+							Pre-populate justification for a control mapping
+						</p>
+					</div>
+					<div
+						class="p-3 min-h-[400px] max-h-[600px] overflow-y-auto transition-colors
+						{dragOverTab === 'mappings' ? 'bg-orange-50 dark:bg-orange-900/10' : ''}"
+						on:dragover={(e) => handleTabDragOver(e, 'mappings')}
+						on:dragleave={handleTabDragLeave}
+						on:drop={(e) => handleTabDrop(e, 'mappings')}
+						role="region"
+						aria-label="Justifications tab drop zone"
+					>
+						<!-- Justification Fields -->
+						<div class="space-y-2">
+							{#if justificationFields.length > 0}
+								<!-- Display justification fields -->
+								{#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')}
+										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' : ''}"
+									>
+										<Draggable class="w-3 h-3 mr-2 flex-shrink-0" />
+										<span class="truncate">{field}</span>
+									</div>
+								{/each}
+							{:else}
+								<!-- Drop zone only shown when no fields are present -->
+								<div
+									role="region"
+									aria-label="Justification field drop zone"
+									class="p-4 transition-colors
+									{dragOverTab === 'mappings' ? 'bg-orange-50 dark:bg-orange-900/10' : ''}"
+									on:dragover={(e) => {
+										e.preventDefault();
+										handleTabDragOver(e, 'mappings');
+									}}
+									on:dragleave={handleTabDragLeave}
+									on:drop={(e) => {
+										e.preventDefault();
+										if (draggedField && fieldConfigs.has(draggedField)) {
+											// Add to justification fields if not already present
+											if (!justificationFields.includes(draggedField)) {
+												justificationFields = [...justificationFields, draggedField];
+											}
+
+											// Set tab assignment
+											const config = fieldConfigs.get(draggedField)!;
+											config.tab = 'mappings';
+											fieldConfigs.set(draggedField, config);
+											fieldConfigs = new Map(fieldConfigs); // Force reactivity
+
+											dragOverTab = null;
+										}
+									}}
+								>
+									<p class="text-xs text-gray-400 dark:text-gray-500 text-center py-4">
+										Drop fields here
+									</p>
+								</div>
+							{/if}
+						</div>
+					</div>
+				</div>
+
 				<!-- Custom Tab Column -->
 				<div
 					class="border border-purple-300 dark:border-purple-700 rounded-lg bg-white dark:bg-gray-800"