lula2 0.4.0 → 0.5.0-nightly.1

package/dist/index.js

@@ -2986,7 +2986,10 @@ function extractFamilyFromControlId(controlId) {
   }
   return controlId.substring(0, 2).toUpperCase();
 }
-function exportAsCSV(controls, metadata, res) {
+function exportAsCSV(controls, metadata, mappingsColumn, res) {
+  return exportAsCSVWithMapping(controls, metadata, { mappings: mappingsColumn }, res);
+}
+function exportAsCSVWithMapping(controls, metadata, columnMappings, res) {
   const fieldSchema = metadata?.fieldSchema?.fields || {};
   const controlIdField = metadata?.control_id_field || "id";
   const allFields = /* @__PURE__ */ new Set();
@@ -2994,49 +2997,91 @@ function exportAsCSV(controls, metadata, res) {
     Object.keys(control).forEach((key) => allFields.add(key));
   });
   const fieldMapping = [];
+  const usedDisplayNames = /* @__PURE__ */ new Set();
   if (allFields.has(controlIdField)) {
     const idSchema = fieldSchema[controlIdField];
-    fieldMapping.push({
-      fieldName: controlIdField,
-      displayName: idSchema?.original_name || "Control ID"
-    });
+    const displayName = idSchema?.original_name || "Control ID";
+    let isMappingColumn = false;
+    if (columnMappings["mappings"]) {
+      const targetDisplayName = columnMappings["mappings"];
+      if (displayName.toLowerCase() === targetDisplayName.toLowerCase()) {
+        isMappingColumn = true;
+      }
+    }
+    fieldMapping.push({ fieldName: controlIdField, displayName, isMappingColumn });
+    usedDisplayNames.add(displayName.toLowerCase());
     allFields.delete(controlIdField);
   } else if (allFields.has("id")) {
-    fieldMapping.push({
-      fieldName: "id",
-      displayName: "Control ID"
-    });
+    let isMappingColumn = false;
+    const displayName = "Control ID";
+    if (columnMappings["mappings"]) {
+      const targetDisplayName = columnMappings["mappings"];
+      if (displayName.toLowerCase() === targetDisplayName.toLowerCase()) {
+        isMappingColumn = true;
+      }
+    }
+    fieldMapping.push({ fieldName: "id", displayName, isMappingColumn });
+    usedDisplayNames.add("control id");
     allFields.delete("id");
   }
   if (allFields.has("family")) {
     const familySchema = fieldSchema["family"];
-    fieldMapping.push({
-      fieldName: "family",
-      displayName: familySchema?.original_name || "Family"
-    });
+    const displayName = familySchema?.original_name || "Family";
+    fieldMapping.push({ fieldName: "family", displayName });
+    usedDisplayNames.add(displayName.toLowerCase());
     allFields.delete("family");
   }
   Array.from(allFields).filter((field) => field !== "mappings" && field !== "mappings_count").sort().forEach((field) => {
     const schema = fieldSchema[field];
-    const displayName = schema?.original_name || field.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
-    fieldMapping.push({ fieldName: field, displayName });
+    const defaultDisplayName = schema?.original_name || field.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
+    let isMappingColumn = false;
+    let finalDisplayName = defaultDisplayName;
+    if (columnMappings["mappings"]) {
+      const targetDisplayName = columnMappings["mappings"];
+      if (defaultDisplayName.toLowerCase() === targetDisplayName.toLowerCase()) {
+        isMappingColumn = true;
+        finalDisplayName = targetDisplayName;
+      }
+    }
+    if (!usedDisplayNames.has(finalDisplayName.toLowerCase())) {
+      fieldMapping.push({
+        fieldName: field,
+        displayName: finalDisplayName,
+        isMappingColumn
+      });
+      usedDisplayNames.add(finalDisplayName.toLowerCase());
+    }
   });
-  if (allFields.has("mappings_count")) {
-    fieldMapping.push({ fieldName: "mappings_count", displayName: "Mappings Count" });
-  }
-  if (allFields.has("mappings")) {
+  if (allFields.has("mappings") && (!columnMappings["mappings"] || columnMappings["mappings"] === "Mappings")) {
     fieldMapping.push({ fieldName: "mappings", displayName: "Mappings" });
   }
   const csvRows = [];
   csvRows.push(fieldMapping.map((field) => `"${field.displayName}"`).join(","));
   controls.forEach((control) => {
-    const row = fieldMapping.map(({ fieldName }) => {
-      const value = control[fieldName];
+    const row = fieldMapping.map(({ fieldName, isMappingColumn }) => {
+      let value;
+      if (isMappingColumn) {
+        const mappingsValue = control["mappings"];
+        if (Array.isArray(mappingsValue) && mappingsValue.length > 0) {
+          const mappingsStr = mappingsValue.map((m) => m.description || m.justification || "").filter((desc) => desc && desc.trim() !== "").join("\n");
+          if (mappingsStr.trim() !== "") {
+            value = mappingsStr;
+          } else {
+            value = control[fieldName];
+          }
+        } else {
+          value = control[fieldName];
+        }
+      } else {
+        value = control[fieldName];
+      }
       if (value === void 0 || value === null) return '""';
       if (fieldName === "mappings" && Array.isArray(value)) {
-        const mappingsStr = value.map(
-          (m) => `${m.status}: ${m.description.substring(0, 50)}${m.description.length > 50 ? "..." : ""}`
-        ).join("; ");
+        const mappingsStr = value.map((m) => {
+          const justification = m.description || m.justification || "";
+          const status = m.status || "Unknown";
+          return justification.trim() !== "" ? justification : `[${status}]`;
+        }).join("\n");
         return `"${mappingsStr.replace(/"/g, '""')}"`;
       }
       if (Array.isArray(value)) return `"${value.join("; ").replace(/"/g, '""')}"`;
@@ -3051,32 +3096,101 @@ function exportAsCSV(controls, metadata, res) {
   res.setHeader("Content-Disposition", `attachment; filename="${fileName}"`);
   res.send(csvContent);
 }
-async function exportAsExcel(controls, metadata, res) {
+async function exportAsExcel(controls, metadata, mappingsColumn, res) {
+  return await exportAsExcelWithMapping(controls, metadata, { mappings: mappingsColumn }, res);
+}
+async function exportAsExcelWithMapping(controls, metadata, columnMappings, res) {
   const fieldSchema = metadata?.fieldSchema?.fields || {};
   const controlIdField = metadata?.control_id_field || "id";
-  const worksheetData = controls.map((control) => {
-    const exportControl = {};
-    if (control[controlIdField]) {
-      const idSchema = fieldSchema[controlIdField];
-      const idDisplayName = idSchema?.original_name || "Control ID";
-      exportControl[idDisplayName] = control[controlIdField];
-    } else if (control.id) {
-      exportControl["Control ID"] = control.id;
+  const allFields = /* @__PURE__ */ new Set();
+  controls.forEach((control) => {
+    Object.keys(control).forEach((key) => allFields.add(key));
+  });
+  const fieldMapping = [];
+  const usedDisplayNames = /* @__PURE__ */ new Set();
+  if (allFields.has(controlIdField)) {
+    const idSchema = fieldSchema[controlIdField];
+    const displayName = idSchema?.original_name || "Control ID";
+    let isMappingColumn = false;
+    if (columnMappings["mappings"]) {
+      const targetDisplayName = columnMappings["mappings"];
+      if (displayName.toLowerCase() === targetDisplayName.toLowerCase()) {
+        isMappingColumn = true;
+      }
     }
-    if (control.family) {
-      const familySchema = fieldSchema["family"];
-      const familyDisplayName = familySchema?.original_name || "Family";
-      exportControl[familyDisplayName] = control.family;
+    fieldMapping.push({ fieldName: controlIdField, displayName, isMappingColumn });
+    usedDisplayNames.add(displayName.toLowerCase());
+    allFields.delete(controlIdField);
+  } else if (allFields.has("id")) {
+    let isMappingColumn = false;
+    const displayName = "Control ID";
+    if (columnMappings["mappings"]) {
+      const targetDisplayName = columnMappings["mappings"];
+      if (displayName.toLowerCase() === targetDisplayName.toLowerCase()) {
+        isMappingColumn = true;
+      }
+    }
+    fieldMapping.push({ fieldName: "id", displayName, isMappingColumn });
+    usedDisplayNames.add("control id");
+    allFields.delete("id");
+  }
+  if (allFields.has("family")) {
+    const familySchema = fieldSchema["family"];
+    const displayName = familySchema?.original_name || "Family";
+    fieldMapping.push({ fieldName: "family", displayName });
+    usedDisplayNames.add(displayName.toLowerCase());
+    allFields.delete("family");
+  }
+  Array.from(allFields).filter((field) => field !== "mappings" && field !== "mappings_count").sort().forEach((field) => {
+    const schema = fieldSchema[field];
+    const defaultDisplayName = schema?.original_name || field.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
+    let isMappingColumn = false;
+    let finalDisplayName = defaultDisplayName;
+    if (columnMappings["mappings"]) {
+      const targetDisplayName = columnMappings["mappings"];
+      if (defaultDisplayName.toLowerCase() === targetDisplayName.toLowerCase()) {
+        isMappingColumn = true;
+        finalDisplayName = targetDisplayName;
+      }
+    }
+    if (!usedDisplayNames.has(finalDisplayName.toLowerCase())) {
+      fieldMapping.push({
+        fieldName: field,
+        displayName: finalDisplayName,
+        isMappingColumn
+      });
+      usedDisplayNames.add(finalDisplayName.toLowerCase());
     }
-    Object.keys(control).forEach((key) => {
-      if (key === controlIdField || key === "id" || key === "family") return;
-      const schema = fieldSchema[key];
-      const displayName = schema?.original_name || (key === "mappings_count" ? "Mappings Count" : key === "mappings" ? "Mappings" : key.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()));
-      const value = control[key];
-      if (key === "mappings" && Array.isArray(value)) {
-        exportControl[displayName] = value.map(
-          (m) => `${m.status}: ${m.description.substring(0, 100)}${m.description.length > 100 ? "..." : ""}`
-        ).join("\n");
+  });
+  if (allFields.has("mappings") && (!columnMappings["mappings"] || columnMappings["mappings"] === "Mappings")) {
+    fieldMapping.push({ fieldName: "mappings", displayName: "Mappings" });
+  }
+  const worksheetData = controls.map((control) => {
+    const exportControl = {};
+    fieldMapping.forEach(({ fieldName, displayName, isMappingColumn }) => {
+      let value;
+      if (isMappingColumn) {
+        const mappingsValue = control["mappings"];
+        if (Array.isArray(mappingsValue) && mappingsValue.length > 0) {
+          const mappingsStr = mappingsValue.map((m) => m.description || m.justification || "").filter((desc) => desc && desc.trim() !== "").join("\n");
+          if (mappingsStr.trim() !== "") {
+            value = mappingsStr;
+          } else {
+            value = control[fieldName];
+          }
+        } else {
+          value = control[fieldName];
+        }
+      } else {
+        value = control[fieldName];
+      }
+      if (fieldName === "mappings" && Array.isArray(value)) {
+        const mappingsStr = value.map((m) => {
+          const justification = m.description || m.justification || "";
+          const status = m.status || "Unknown";
+          return justification.trim() !== "" ? justification : `[${status}]`;
+        }).join("\n");
+        exportControl[displayName] = mappingsStr;
       } else if (Array.isArray(value)) {
         exportControl[displayName] = value.join("; ");
       } else if (typeof value === "object" && value !== null) {
@@ -3490,6 +3604,7 @@ var init_spreadsheetRoutes = __esm({
     router.get("/export-controls", async (req, res) => {
       try {
         const format = req.query.format || "csv";
+        const mappingsColumn = req.query.mappingsColumn || "Mappings";
         const state = getServerState();
         const fileStore = state.fileStore;
         if (!fileStore) {
@@ -3499,7 +3614,8 @@ var init_spreadsheetRoutes = __esm({
         const mappings = await fileStore.loadMappings();
         let metadata = {};
         try {
-          const metadataPath2 = join4(state.CONTROL_SET_DIR, "lula.yaml");
+          const controlSetPath = getCurrentControlSetPath();
+          const metadataPath2 = join4(controlSetPath, "lula.yaml");
           if (existsSync3(metadataPath2)) {
             const metadataContent = readFileSync3(metadataPath2, "utf8");
             metadata = yaml4.load(metadataContent);
@@ -3527,10 +3643,10 @@ var init_spreadsheetRoutes = __esm({
         debug(`Exporting ${controlsWithMappings.length} controls as ${format}`);
         switch (format.toLowerCase()) {
           case "csv":
-            return exportAsCSV(controlsWithMappings, metadata, res);
+            return exportAsCSV(controlsWithMappings, metadata, mappingsColumn, res);
           case "excel":
           case "xlsx":
-            return await exportAsExcel(controlsWithMappings, metadata, res);
+            return await exportAsExcel(controlsWithMappings, metadata, mappingsColumn, res);
           case "json":
             return exportAsJSON(controlsWithMappings, metadata, res);
           default:
@@ -3541,6 +3657,106 @@ var init_spreadsheetRoutes = __esm({
         res.status(500).json({ error: error.message });
       }
     });
+    router.get("/export-column-headers", async (req, res) => {
+      try {
+        let metadata = {};
+        try {
+          const controlSetPath = getCurrentControlSetPath();
+          const metadataPath2 = join4(controlSetPath, "lula.yaml");
+          if (existsSync3(metadataPath2)) {
+            const metadataContent = readFileSync3(metadataPath2, "utf8");
+            metadata = yaml4.load(metadataContent);
+          } else {
+            return res.status(404).json({ error: `No lula.yaml file found in control set path: ${controlSetPath}` });
+          }
+        } catch {
+          return res.status(500).json({ error: "Failed to read lula.yaml file" });
+        }
+        const fieldSchema = metadata?.fieldSchema?.fields || {};
+        const controlIdField = metadata?.control_id_field || "id";
+        const columnHeaders = [];
+        if (fieldSchema[controlIdField]) {
+          const idSchema = fieldSchema[controlIdField];
+          const displayName = idSchema?.original_name || "Control ID";
+          columnHeaders.push({
+            value: displayName,
+            label: displayName
+          });
+        } else {
+          columnHeaders.push({ value: "Control ID", label: "Control ID" });
+        }
+        if (fieldSchema["family"]) {
+          const familySchema = fieldSchema["family"];
+          const displayName = familySchema?.original_name || "Family";
+          columnHeaders.push({
+            value: displayName,
+            label: displayName
+          });
+        }
+        Object.entries(fieldSchema).forEach(([fieldName, schema]) => {
+          if (fieldName === controlIdField || fieldName === "family" || fieldName === "mappings" || fieldName === "mappings_count") {
+            return;
+          }
+          const displayName = schema?.original_name || fieldName.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
+          columnHeaders.push({
+            value: displayName,
+            label: displayName
+          });
+        });
+        columnHeaders.push({ value: "Mappings", label: "Mappings (Default)" });
+        res.json({
+          columnHeaders,
+          defaultColumn: "Mappings"
+        });
+      } catch (error) {
+        res.status(500).json({ error: error.message });
+      }
+    });
+    router.post("/export-csv", async (req, res) => {
+      try {
+        const { format = "csv", _columns = [], columnMappings = {} } = req.body;
+        const state = getServerState();
+        const fileStore = state.fileStore;
+        if (!fileStore) {
+          return res.status(500).json({ error: "No control set loaded" });
+        }
+        const controls = await fileStore.loadAllControls();
+        const mappings = await fileStore.loadMappings();
+        let metadata = {};
+        try {
+          const controlSetPath = getCurrentControlSetPath();
+          const metadataPath2 = join4(controlSetPath, "lula.yaml");
+          if (existsSync3(metadataPath2)) {
+            const metadataContent = readFileSync3(metadataPath2, "utf8");
+            metadata = yaml4.load(metadataContent);
+          }
+        } catch (err) {
+          debug("Could not load metadata:", err);
+        }
+        if (!controls || controls.length === 0) {
+          return res.status(404).json({ error: "No controls found" });
+        }
+        const controlIdField = metadata?.control_id_field || "id";
+        const controlsWithMappings = controls.map((control) => {
+          const controlId = control[controlIdField] || control.id;
+          const controlMappings = mappings.filter((m) => m.control_id === controlId);
+          return {
+            ...control,
+            mappings_count: controlMappings.length,
+            mappings: controlMappings.map((m) => ({
+              uuid: m.uuid,
+              status: m.status,
+              description: m.justification || ""
+            }))
+          };
+        });
+        debug(`Exporting ${controlsWithMappings.length} controls as ${format} with column mappings`);
+        return exportAsCSVWithMapping(controlsWithMappings, metadata, columnMappings, res);
+      } catch (error) {
+        console.error("Export error:", error);
+        res.status(500).json({ error: error.message });
+      }
+    });
     router.post("/parse-excel", upload.single("file"), async (req, res) => {
       try {
         if (!req.file) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lula2",
-  "version": "0.4.0",
+  "version": "0.5.0-nightly.1",
   "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",
@@ -72,8 +53,8 @@
     "yaml": "^2.8.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.8.1",
-    "@commitlint/config-conventional": "^19.8.1",
+    "@commitlint/cli": "^20.0.0",
+    "@commitlint/config-conventional": "^20.0.0",
     "@eslint/compat": "^1.3.2",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.35.0",
@@ -124,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/components/dialogs/ExportColumnDialog.svelte

@@ -0,0 +1,163 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import { Close } from 'carbon-icons-svelte';
+
+	interface ColumnHeader {
+		value: string;
+		label: string;
+	}
+
+	interface ExportColumnDialogProps {
+		isOpen: boolean;
+		format: 'csv' | 'excel';
+		columnHeaders: ColumnHeader[];
+		defaultColumn: string;
+	}
+
+	let {
+		isOpen = $bindable(),
+		format,
+		columnHeaders = [],
+		defaultColumn = 'Mappings'
+	}: ExportColumnDialogProps = $props();
+
+	const dispatch = createEventDispatcher<{
+		export: { format: string; mappingsColumn: string };
+		cancel: void;
+	}>();
+
+	let selectedColumn = $state(defaultColumn);
+
+	// Reset selected column and focus when dialog opens
+	$effect(() => {
+		if (isOpen) {
+			selectedColumn = defaultColumn;
+		}
+	});
+
+	function focusSelect(node: HTMLSelectElement) {
+		if (isOpen) {
+			setTimeout(() => node.focus(), 0);
+		}
+		return {
+			update(newIsOpen: boolean) {
+				if (newIsOpen) {
+					setTimeout(() => node.focus(), 0);
+				}
+			}
+		};
+	}
+
+	function handleExport() {
+		dispatch('export', { format, mappingsColumn: selectedColumn });
+		isOpen = false;
+	}
+
+	function handleCancel() {
+		dispatch('cancel');
+		isOpen = false;
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			handleCancel();
+		} else if (event.key === 'Enter') {
+			handleExport();
+		}
+	}
+
+	function handleBackdropClick(event: MouseEvent) {
+		if (event.target === event.currentTarget) {
+			handleCancel();
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if isOpen}
+	<!-- Modal Backdrop -->
+	<div
+		class="fixed inset-0 bg-gray-700 dark:bg-gray-900 bg-opacity-50 dark:bg-opacity-75 overflow-y-auto h-full w-full z-50 flex items-center justify-center p-4"
+		role="dialog"
+		aria-modal="true"
+		tabindex="-1"
+		onclick={handleBackdropClick}
+		onkeydown={(e) => e.key === 'Escape' && handleCancel()}
+	>
+		<!-- Modal Content -->
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+		<div
+			class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 w-full max-w-md mx-auto"
+			role="document"
+			onclick={(e) => e.stopPropagation()}
+		>
+			<!-- Header -->
+			<div class="flex items-center justify-between mb-4">
+				<h2 class="text-xl font-semibold text-gray-900 dark:text-white">
+					Export as {format.toUpperCase()}
+				</h2>
+				<button
+					onclick={handleCancel}
+					class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+					aria-label="Close dialog"
+				>
+					<Close class="w-6 h-6" />
+				</button>
+			</div>
+
+			<!-- Content -->
+			<div class="mb-6">
+				<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+					Choose which column should contain the mappings data:
+				</p>
+
+				<div class="space-y-2">
+					<label
+						for="column-select"
+						class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+					>
+						Mappings Column
+					</label>
+					<select
+						id="column-select"
+						use:focusSelect={isOpen}
+						bind:value={selectedColumn}
+						class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+					>
+						{#each columnHeaders as header}
+							<option value={header.value}>{header.label}</option>
+						{/each}
+					</select>
+				</div>
+
+				<div class="mt-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-md">
+					<p class="text-xs text-blue-600 dark:text-blue-400">
+						<strong>Note:</strong> Mappings data will be formatted as "status: description..." in the
+						selected column.
+					</p>
+				</div>
+			</div>
+
+			<!-- Footer -->
+			<div class="flex justify-end space-x-3">
+				<button
+					onclick={handleCancel}
+					class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
+				>
+					Cancel
+				</button>
+				<button
+					onclick={handleExport}
+					class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded-lg transition-colors"
+				>
+					Export {format.toUpperCase()}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}

package/src/lib/components/dialogs/index.ts

@@ -0,0 +1,4 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: 2023-Present The Lula Authors
+
+export { default as ExportColumnDialog } from './ExportColumnDialog.svelte';