lula2 0.0.5 → 0.0.7-nightly.0

package/dist/lula2

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import './index.js';

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "lula2",
-  "version": "0.0.5",
+  "version": "0.0.7-nightly.0",
   "description": "A tool for managing compliance as code in your GitHub repositories.",
-  "bin": "./dist/index.js",
+  "bin": {
+    "lula2": "./dist/lula2"
+  },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -11,7 +13,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/defenseunicorns/lula.git"
+    "url": "git+https://github.com/defenseunicorns/lula-next.git"
   },
   "keywords": [
     "compliance",
@@ -21,9 +23,9 @@
   "author": "Defense Unicorns",
   "license": "Apache-2.0",
   "bugs": {
-    "url": "https://github.com/defenseunicorns/lula/issues"
+    "url": "https://github.com/defenseunicorns/lula-next/issues"
   },
-  "homepage": "https://github.com/defenseunicorns/lula#readme",
+  "homepage": "https://github.com/defenseunicorns/lula-next#readme",
   "files": [
     "/src",
     "/dist",
@@ -31,44 +33,89 @@
     "!dist/**/*.test.js*",
     "!dist/**/*.test.d.ts*"
   ],
-  "scripts": {
-    "prebuild": "rm -rf dist",
-    "build": "tsc",
-    "semantic-release": "semantic-release",
-    "format:check": "eslint src && prettier . --check",
-    "format:fix": "eslint --fix src && prettier . --write",
-    "prepare": "if [ \"$NODE_ENV\" != 'production' ]; then husky; fi",
-    "test": "vitest run --coverage"
-  },
   "dependencies": {
     "@octokit/rest": "^22.0.0",
+    "@types/ws": "^8.18.1",
     "commander": "^14.0.0",
-    "compliance-reporter": "^0.1.2",
-    "undici": "^7.13.0"
+    "cors": "^2.8.5",
+    "csv-parse": "^6.1.0",
+    "exceljs": "^4.4.0",
+    "express": "^4.21.2",
+    "flowbite": "^2.5.2",
+    "glob": "^10.4.5",
+    "isomorphic-git": "^1.33.1",
+    "js-yaml": "^4.1.0",
+    "multer": "^2.0.2",
+    "open": "^9.1.0",
+    "undici": "^7.15.0",
+    "ws": "^8.18.3",
+    "yaml": "^2.8.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.8.0",
-    "@commitlint/config-conventional": "^19.8.0",
-    "@eslint/js": "^9.23.0",
-    "@typescript-eslint/eslint-plugin": "^8.41.0",
-    "@typescript-eslint/parser": "^8.41.0",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/js": "^9.35.0",
+    "@sveltejs/adapter-static": "^3.0.9",
+    "@sveltejs/kit": "^2.37.1",
+    "@sveltejs/vite-plugin-svelte": "^6.1.4",
+    "@tailwindcss/vite": "^4.1.13",
+    "@types/cors": "^2.8.19",
+    "@types/express": "^4.17.23",
+    "@types/js-yaml": "^4.0.9",
+    "@types/multer": "^2.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.42.0",
+    "@typescript-eslint/parser": "^8.42.0",
+    "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
-    "esbuild": "^0.25.1",
-    "eslint": "^9.26.0",
-    "eslint-config-prettier": "^10.0.2",
-    "eslint-plugin-jsdoc": "^54.1.1",
-    "globals": "^16.0.0",
+    "carbon-icons-svelte": "^13.5.0",
+    "carbon-preprocess-svelte": "^0.11.11",
+    "concurrently": "^9.2.1",
+    "esbuild": "^0.25.9",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jsdoc": "^54.5.0",
+    "eslint-plugin-svelte": "^3.12.2",
+    "globals": "^16.3.0",
     "husky": "^9.1.7",
+    "playwright": "^1.55.0",
     "prettier": "3.6.2",
-    "semantic-release": "^24.2.3",
+    "prettier-plugin-svelte": "^3.4.0",
+    "semantic-release": "^24.2.7",
+    "shellcheck": "^4.1.0",
+    "svelte": "^5.38.7",
+    "svelte-check": "^4.3.1",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.13",
+    "tsx": "^4.20.5",
     "typescript": "5.9.2",
-    "typescript-eslint": "^8.41.0",
-    "vitest": "^3.2.4"
+    "typescript-eslint": "^8.42.0",
+    "vite": "^7.1.4",
+    "vitest": "^3.2.4",
+    "vitest-browser-svelte": "^0.1.0"
   },
   "release": {
     "branches": [
       "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'",
+    "format:check": "prettier --check 'src/**/*.{ts,js,svelte}' 'cli/**/*.ts' 'index.ts'",
+    "lint": "prettier --check 'src/**/*.{ts,js,svelte}' 'cli/**/*.ts' 'index.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/app.css

@@ -0,0 +1,192 @@
+/*
+  Copyright 2025 Defense Unicorns
+  SPDX-License-Identifier: LicenseRef-Defense-Unicorns-Commercial
+*/
+
+@import 'tailwindcss';
+@plugin 'flowbite/plugin';
+
+:root {
+	--navbar-height: 4rem;
+	--sidebar-width: 16rem;
+	--table-height: 350px;
+}
+
+@theme {
+	--breakpoint-xs: 31rem;
+}
+
+@layer base {
+	html {
+		@apply overflow-y-auto;
+
+		color-scheme: dark; /* Dark scrollbar color for Safari, the webkit overrides do not work */
+		/* Standard scrollbar properties (Firefox) */
+		scrollbar-width: thin;
+		scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
+
+		/* WebKit scrollbar styling (Chrome, Edge) */
+		&::-webkit-scrollbar {
+			width: 5px; /* Width that's narrow but still usable */
+			z-index: 20;
+		}
+
+		/* Scrollbar thumb styling */
+		&::-webkit-scrollbar-thumb {
+			border-radius: 4px; /* Rounded corners for better aesthetics */
+			background-color: rgba(156, 163, 175, 0.5); /* Semi-transparent gray */
+		}
+
+		/* Transparent track to focus attention on the thumb */
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		button:not([disabled]),
+		[role='button']:not([disabled]) {
+			cursor: pointer;
+		}
+	}
+}
+
+@layer components {
+	.sticky-header {
+		position: sticky;
+		z-index: 40;
+	}
+
+	/* Global button styling */
+	.btn {
+		@apply inline-flex cursor-pointer items-center rounded-lg border border-gray-600 bg-transparent px-3 py-1.5 text-center text-sm font-medium text-gray-400 transition-all ease-in-out hover:bg-gray-700 hover:text-white;
+	}
+
+	.btn-primary {
+		@apply cursor-pointer rounded-lg border border-blue-600 bg-gray-900 px-5 py-2.5 text-sm font-medium text-blue-500 transition-colors hover:bg-blue-600 hover:text-white focus:outline-none focus-visible:z-10 focus-visible:bg-blue-600 focus-visible:text-white focus-visible:ring-4 focus-visible:ring-blue-200 disabled:cursor-not-allowed disabled:border-transparent disabled:bg-gray-500 disabled:text-white;
+	}
+
+	.btn-secondary {
+		@apply cursor-pointer rounded-lg border border-transparent bg-blue-600 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:outline-none focus-visible:z-10 focus-visible:bg-blue-500 focus-visible:text-white focus-visible:ring-4 focus-visible:ring-blue-200 disabled:cursor-not-allowed disabled:border-transparent disabled:bg-gray-500 disabled:text-white;
+	}
+
+	.btn-alternative {
+		@apply cursor-pointer rounded-lg border border-gray-600 bg-gray-800 px-5 py-2.5 text-sm font-medium text-gray-400 transition-colors hover:bg-gray-700 hover:text-white focus:z-10 focus:outline-none focus-visible:ring-4 focus-visible:ring-gray-700 disabled:cursor-not-allowed disabled:bg-gray-800 disabled:text-gray-400;
+	}
+
+	.card {
+		@apply mb-4 rounded-lg border border-gray-800 bg-gray-900 p-4 shadow;
+	}
+
+	.search-input {
+		@apply block w-full rounded-lg border border-gray-600 bg-gray-800 p-2.5 pr-10 pl-10 text-sm text-gray-100 placeholder-gray-300 focus:border-blue-500 focus:text-white focus:ring-1 focus:ring-blue-500 focus:outline-none [&::-webkit-search-cancel-button]:hidden;
+	}
+
+	select {
+		@apply block w-full rounded-lg border border-gray-700 bg-gray-800 p-2.5 text-sm text-gray-100 placeholder-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none;
+	}
+
+	svg.icon {
+		@apply flex-shrink-0 text-gray-400 transition duration-300;
+	}
+
+	.text-link {
+		@apply text-blue-400 decoration-blue-400 hover:underline;
+	}
+
+	.no-scrollbar {
+		scrollbar-width: none;
+	}
+}
+
+@utility scrollable-container {
+	overflow-x: hidden;
+	overflow-y: auto;
+	padding-bottom: 1rem;
+
+	position: static !important;
+	scrollbar-width: thin; /* duplication required here despite global override */
+
+	&:not(.no-fade) {
+		/* Create a fade overlay at the bottom */
+
+		&::after {
+			content: '';
+			@apply pointer-events-none absolute right-0 bottom-0 left-0;
+			height: 28px;
+			@apply bg-gradient-to-b from-gray-900/0 to-gray-900;
+		}
+	}
+
+	/* Specific styling for UI elements inside scrollable containers */
+
+	.btn {
+		&:not(.keep-default-btn-style) {
+			@apply border-none;
+		}
+	}
+
+	table {
+		@apply w-full table-fixed text-left text-sm text-gray-400;
+
+		thead {
+			@apply sticky top-0 z-10 text-xs text-gray-400 uppercase shadow-sm;
+
+			tr {
+				@apply bg-gray-900/30 text-left text-xs font-medium tracking-wider text-gray-400 uppercase;
+
+				th {
+					@apply bg-gray-800 px-2 py-4 whitespace-nowrap;
+				}
+
+				th:first-child {
+					@apply rounded-tl-lg;
+				}
+
+				th:last-child {
+					@apply rounded-tr-lg;
+				}
+			}
+		}
+
+		tbody {
+			tr {
+				@apply bg-gray-900;
+
+				&.group-boundary {
+					@apply border-t-5 border-t-gray-800;
+				}
+
+				&.expandable-row {
+					td {
+						@apply bg-gray-950;
+					}
+				}
+
+				td {
+					@apply whitespace-nowrap text-gray-400;
+				}
+			}
+		}
+	}
+}
+
+/* Create a fade overlay at the bottom for catalog views */
+@utility fade-overlay {
+	position: sticky;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 10;
+	pointer-events: none;
+	height: 32px;
+	@apply bg-gradient-to-b from-gray-950/0 to-gray-950;
+}
+
+@custom-variant mobileLandscape {
+	@media only screen and ((
+ ((max-height: 990px) and (max-width: 640px)) or
+      ((max-height: 640px) and (max-width: 990px))
+  )
+  and (orientation: landscape)) {
+		@slot;
+	}
+}

package/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

package/src/app.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<!-- Set background color to match bg-gray-950 before styles are available -->
+<html class="dark" lang="en" style="background-color: oklch(0.13 0.028 261.692)">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/lula.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

package/src/lib/actions/fadeWhenScrollable.ts

@@ -0,0 +1,39 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: 2023-Present The Lula Authors
+
+// Action to apply or remove the 'no-fade' class based on when an element is scrollable (overflow-y-scroll)
+// Our 'scrollable-container' class uses a CSS pseudo-element to apply a fade effect at the bottom of the container
+// The 'no-fade' class removes that effect
+export function fadeWhenScrollable(node: HTMLElement) {
+	// `check` adds “no-fade” if there is NO vertical overflow,
+	// removes it once overflow appears.
+	function check() {
+		if (node.scrollHeight > node.clientHeight) {
+			node.classList.remove('no-fade');
+		} else {
+			node.classList.add('no-fade');
+		}
+	}
+
+	// 1) watch for size/box changes (e.g. window resize, parent CSS changes, etc.)
+	const resizeObs = new ResizeObserver(check);
+	resizeObs.observe(node);
+
+	// 2) watch for DOM mutations under `node` (e.g. new rows inserted into a table)
+	const mutationObs = new MutationObserver(check);
+	mutationObs.observe(node, { childList: true, subtree: true });
+
+	// 3) also re-check on window resize
+	window.addEventListener('resize', check);
+
+	// initial check
+	check();
+
+	return {
+		destroy() {
+			resizeObs.disconnect();
+			mutationObs.disconnect();
+			window.removeEventListener('resize', check);
+		}
+	};
+}

package/src/lib/actions/modal.ts

@@ -0,0 +1,230 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: 2023-Present The Lula Authors
+
+/**
+ * Modal action for Svelte components
+ * Creates a modal dialog that appears when the trigger element is clicked
+ */
+
+// Types for the modal action
+type ModalOptions = {
+	openOnInit?: boolean; // Whether to open the modal immediately when component mounts
+	closeOnEscape?: boolean; // Whether to close on Escape key
+	closeOnOutsideClick?: boolean; // Whether to close when clicking outside
+	onOpen?: () => void; // Callback for when modal opens
+	onClose?: () => void; // Callback for when modal closes
+};
+
+/**
+ * Creates a click-to-open modal from an element with a .modal-content child
+ * @param node The HTML element to attach the modal trigger to
+ * @param options Configuration options
+ * @returns Svelte action object
+ */
+// Store a map of modal nodes to their closeModal functions for external access
+const modalRegistry = new Map<string, () => void>();
+
+/**
+ * Closes a modal by its ID
+ * @param modalId The ID of the modal to close
+ */
+export function closeModalById(modalId: string): void {
+	const closeFunction = modalRegistry.get(modalId);
+	if (closeFunction) {
+		closeFunction();
+	} else {
+		console.warn(`No modal with ID ${modalId} found in registry`);
+	}
+}
+
+export function modal(node: HTMLElement, options: ModalOptions = {}) {
+	const defaults: ModalOptions = {
+		openOnInit: false,
+		closeOnEscape: true,
+		closeOnOutsideClick: true
+	};
+
+	// Merge defaults with provided options
+	const settings = { ...defaults, ...options };
+
+	// Find modal content element
+	const modalContent = node.querySelector('.modal-content') as HTMLElement;
+	// Use the parent element of the node as the trigger element
+	const triggerElement = node.parentElement as HTMLElement;
+
+	if (!modalContent) {
+		return {};
+	}
+
+	if (!triggerElement) {
+		return {};
+	}
+
+	// Create backdrop/overlay element
+	const backdrop = document.createElement('div');
+	backdrop.className = 'modal-backdrop';
+	backdrop.style.display = 'none';
+	document.body.appendChild(backdrop);
+
+	// Set initial ARIA attributes
+	modalContent.setAttribute('role', 'dialog');
+	modalContent.setAttribute('aria-modal', 'true');
+	modalContent.setAttribute('aria-hidden', 'true');
+
+	// State to track if modal is open
+	let isOpen = false;
+
+	// Function to open the modal
+	const openModal = () => {
+		if (isOpen) return;
+
+		isOpen = true;
+		// Move modal content to body to avoid stacking context issues
+		document.body.appendChild(modalContent);
+		modalContent.setAttribute('aria-hidden', 'false');
+		backdrop.style.display = 'block';
+
+		// Prevent scrolling on the body
+		document.body.style.overflow = 'hidden';
+
+		// Call onOpen callback if provided
+		if (settings.onOpen) settings.onOpen();
+
+		// Focus first focusable element in modal
+		const focusableElements = modalContent.querySelectorAll(
+			'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+		);
+		if (focusableElements.length > 0) {
+			(focusableElements[0] as HTMLElement).focus();
+		}
+	};
+
+	// Function to close the modal
+	const closeModal = () => {
+		if (!isOpen) return;
+
+		isOpen = false;
+		modalContent.setAttribute('aria-hidden', 'true');
+		backdrop.style.display = 'none';
+
+		// Move modal back to original position
+		if (document.body.contains(modalContent)) {
+			node.appendChild(modalContent);
+		}
+
+		// Restore scrolling on body
+		document.body.style.overflow = '';
+
+		// Call onClose callback if provided
+		if (settings.onClose) settings.onClose();
+
+		// Return focus to trigger element
+		if (triggerElement) {
+			triggerElement.focus();
+		}
+	};
+
+	// Register the modal in our registry if it has an ID
+	const modalId = node.getAttribute('id');
+	if (modalId) {
+		modalRegistry.set(modalId, closeModal);
+	}
+
+	// Handle click on trigger to open modal
+	const handleTriggerClick = (e: Event) => {
+		e.preventDefault();
+		e.stopPropagation();
+		openModal();
+	};
+
+	// Handle click on backdrop to close modal if closeOnOutsideClick is true
+	const handleBackdropClick = (e: MouseEvent) => {
+		if (!settings.closeOnOutsideClick) return;
+
+		// Only close if the click was directly on the backdrop, not on modal content
+		if (e.target === backdrop) {
+			closeModal();
+		}
+	};
+
+	// Handle escape key to close modal if closeOnEscape is true
+	const handleKeyDown = (e: KeyboardEvent) => {
+		if (!settings.closeOnEscape) return;
+
+		if (e.key === 'Escape' && isOpen) {
+			closeModal();
+		}
+	};
+
+	// Add close button to modal
+	const closeButton = document.createElement('button');
+	closeButton.className = 'modal-close';
+	closeButton.innerHTML = '×';
+	closeButton.setAttribute('aria-label', 'Close modal');
+	modalContent.appendChild(closeButton);
+
+	// Handle click on close button
+	const handleCloseClick = (e: Event) => {
+		e.preventDefault();
+		e.stopPropagation();
+		closeModal();
+	};
+
+	// Set up event listeners
+	triggerElement.addEventListener('click', handleTriggerClick);
+
+	closeButton.addEventListener('click', handleCloseClick);
+	backdrop.addEventListener('click', handleBackdropClick);
+	document.addEventListener('keydown', handleKeyDown);
+
+	// Open modal on init if specified
+	if (settings.openOnInit) {
+		setTimeout(openModal, 0);
+	}
+
+	return {
+		update(newOptions: ModalOptions) {
+			// Update settings
+			Object.assign(settings, newOptions);
+		},
+		destroy() {
+			// Clean up event listeners
+			triggerElement.removeEventListener('click', handleTriggerClick);
+
+			closeButton.removeEventListener('click', handleCloseClick);
+			backdrop.removeEventListener('click', handleBackdropClick);
+			document.removeEventListener('keydown', handleKeyDown);
+
+			// Remove backdrop from DOM
+			if (document.body.contains(backdrop)) {
+				document.body.removeChild(backdrop);
+			}
+
+			// Return modal to original position if needed
+			if (document.body.contains(modalContent)) {
+				node.appendChild(modalContent);
+			}
+
+			// Remove close button from modal
+			if (modalContent.contains(closeButton)) {
+				modalContent.removeChild(closeButton);
+			}
+
+			// Reset attributes
+			modalContent.removeAttribute('role');
+			modalContent.removeAttribute('aria-modal');
+			modalContent.removeAttribute('aria-hidden');
+
+			// If modal is open when destroyed, restore body scrolling
+			if (isOpen) {
+				document.body.style.overflow = '';
+			}
+
+			// Remove from registry if it was registered
+			const modalId = node.getAttribute('id');
+			if (modalId && modalRegistry.has(modalId)) {
+				modalRegistry.delete(modalId);
+			}
+		}
+	};
+}