lula2 0.0.5 → 0.0.6

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

package/src/lib/actions/tooltip.ts

@@ -0,0 +1,82 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: 2023-Present The Lula Authors
+
+/**
+ * Tooltip positioning action for Svelte components
+ * Adds dynamic positioning based on viewport and element bounds
+ */
+
+/**
+ * Applies tooltip positioning to an element with a .tooltip child
+ * @param node The HTML element to attach the tooltip to
+ * @returns Svelte action object
+ */
+export function tooltip(node: HTMLElement) {
+	const tooltipEl = node.querySelector('.tooltip') as HTMLElement;
+
+	// Add data attribute to allow CSS targeting
+	node.setAttribute('data-tooltip-trigger', 'true');
+
+	function updatePosition() {
+		if (!tooltipEl) return;
+
+		// Get element positions
+		const rect = node.getBoundingClientRect();
+
+		// Set position variables as CSS custom properties
+		Object.entries({
+			'--group-top': `${rect.top}px`,
+			'--group-right': `${rect.right}px`,
+			'--group-left': `${rect.left}px`,
+			'--group-width': `${rect.width}px`,
+			'--group-bottom': `${rect.bottom}px`,
+			'--group-height': `${rect.height}px`
+		}).forEach(([prop, val]) => tooltipEl.style.setProperty(prop, val));
+
+		// Check if tooltip already has a position class
+		const hasPositionClass = /tooltip-(left|right|top|bottom)/.test(tooltipEl.className);
+
+		// Only calculate and apply position if no position class is already specified
+		if (!hasPositionClass) {
+			// Determine tooltip positioning based on available space
+			const spaceOnRight = window.innerWidth - rect.right;
+			const spaceBelow = window.innerHeight - rect.bottom;
+			const tooltipWidth = 288; // Approximate tooltip min-width
+			const tooltipHeight = 100; // Approximate tooltip height
+
+			// Default horizontal position (right or left)
+			const horizontalPosition = spaceOnRight < tooltipWidth + 20 ? 'left' : 'right';
+
+			// Default vertical position (bottom or top)
+			const verticalPosition = spaceBelow < tooltipHeight + 20 ? 'top' : 'bottom';
+
+			// Determine if we should prioritize vertical positioning
+			const useVerticalPosition =
+				(horizontalPosition === 'left' && rect.left < tooltipWidth) ||
+				(spaceBelow < tooltipHeight && rect.top > tooltipHeight) ||
+				(rect.top < tooltipHeight && spaceBelow > tooltipHeight);
+
+			// Add appropriate positioning class
+			const position = useVerticalPosition
+				? `tooltip-${verticalPosition}`
+				: `tooltip-${horizontalPosition}`;
+
+			tooltipEl.className =
+				tooltipEl.className.replace(/tooltip-(left|right|top|bottom)/g, '') + ' ' + position;
+		}
+	}
+
+	// Create a real function reference for event listener removal
+	const handleMouseEnter = () => window.requestAnimationFrame(updatePosition);
+
+	// Only update position on hover
+	node.addEventListener('mouseenter', handleMouseEnter);
+
+	return {
+		update: updatePosition,
+		destroy() {
+			node.removeEventListener('mouseenter', handleMouseEnter);
+			node.removeAttribute('data-tooltip-trigger');
+		}
+	};
+}

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

@@ -0,0 +1,20 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import { appState } from '$lib/websocket';
+	import { ArrowsHorizontal } from 'carbon-icons-svelte';
+</script>
+
+{#if $appState.isConnected}
+	<a
+		href="/setup"
+		class="inline-flex items-center gap-2 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"
+		title="Switch control set"
+	>
+		<ArrowsHorizontal size={16} />
+		Switch
+	</a>
+{:else}
+	<div class="text-sm text-gray-500 dark:text-gray-400">Loading...</div>
+{/if}

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

@@ -0,0 +1,46 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import type { ControlSet } from '$lib/types';
+
+	interface Props {
+		currentSet: ControlSet;
+		availableSets: ControlSet[];
+	}
+
+	let { currentSet, availableSets }: Props = $props();
+
+	const dispatch = createEventDispatcher<{ change: string }>();
+
+	function handleChange(event: Event) {
+		const target = event.target as HTMLSelectElement;
+		dispatch('change', target.value);
+	}
+</script>
+
+<div class="control-set-selector">
+	<label for="control-set" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+		Control Set
+	</label>
+	<select
+		id="control-set"
+		value={currentSet.id}
+		onchange={handleChange}
+		class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white"
+	>
+		{#each availableSets as set}
+			<option value={set.id}>{set.name} {set.version}</option>
+		{/each}
+	</select>
+	<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+		{currentSet.description}
+	</p>
+</div>
+
+<style>
+	.control-set-selector {
+		margin-bottom: 1rem;
+	}
+</style>

package/src/lib/components/control-sets/index.ts

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

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

@@ -0,0 +1,235 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import type { Control } from '$lib/types';
+	import { appState, wsClient } from '$lib/websocket';
+	import {
+		CheckmarkFilled,
+		Connect,
+		Edit,
+		Information,
+		InProgress,
+		Time,
+		WarningFilled
+	} from 'carbon-icons-svelte';
+	import { TabNavigation } from '../ui';
+	import {
+		CustomFieldsTab,
+		ImplementationTab,
+		MappingsTab,
+		OverviewTab,
+		TimelineTab
+	} from './tabs';
+
+	interface Props {
+		control: Control;
+	}
+
+	let { control }: Props = $props();
+
+	// Component state
+	let editedControl = $state({ ...control });
+	let originalControl = $state({ ...control });
+	let activeTab = $state<'details' | 'narrative' | 'custom' | 'mappings' | 'history'>('details');
+	let saveDebounceTimeout: ReturnType<typeof setTimeout> | null = null;
+	let isSaving = $state(false);
+	let showSavedMessage = $state(false);
+	let savedMessageTimeout: ReturnType<typeof setTimeout> | null = null;
+
+	// Derived values
+	const fieldSchema = $derived($appState.fieldSchema.fields);
+	const hasChanges = $derived(JSON.stringify(editedControl) !== JSON.stringify(originalControl));
+	const associatedMappings = $derived(
+		$appState.mappings.filter((m) => m.control_id === control.id)
+	);
+	const saveStatus = $derived(
+		isSaving ? 'saving' : (hasChanges ? 'unsaved' : (showSavedMessage ? 'just-saved' : 'clean'))
+	);
+	
+	// Check if tabs have any fields
+	const hasCustomFields = $derived(() => {
+		if (!fieldSchema) return false;
+		return Object.values(fieldSchema).some((field: any) => field.tab === 'custom');
+	});
+	
+	const hasImplementationFields = $derived(() => {
+		if (!fieldSchema) return false;
+		return Object.values(fieldSchema).some((field: any) => field.tab === 'implementation');
+	});
+
+	// Watch for control changes - only reset when ID changes
+	$effect(() => {
+		if (control.id !== editedControl?.id) {
+			if (saveDebounceTimeout) {
+				clearTimeout(saveDebounceTimeout);
+			}
+			editedControl = { ...control };
+			originalControl = { ...control };
+			activeTab = 'details';
+		}
+	});
+
+	// Manual trigger for auto-save when field changes
+	function triggerAutoSave() {
+		if (!hasChanges) return;
+		
+		// Clear any existing save timeout
+		if (saveDebounceTimeout) {
+			clearTimeout(saveDebounceTimeout);
+		}
+		
+		// Debounce the save by 500ms to avoid too many saves while typing
+		saveDebounceTimeout = setTimeout(() => {
+			performSave();
+		}, 500);
+	}
+
+	// Perform the actual save
+	async function performSave() {
+		if (!hasChanges || isSaving) return;
+		
+		isSaving = true;
+		try {
+			// Only send the fields that have actually changed
+			const changes: Record<string, any> = { id: editedControl.id };
+			
+			// Compare each field and only include changed ones
+			for (const [key, value] of Object.entries(editedControl)) {
+				// Skip runtime fields
+				if (key === 'timeline' || key === 'unifiedHistory' || key === '_metadata') {
+					continue;
+				}
+				
+				// Only include if value has changed
+				if (JSON.stringify(value) !== JSON.stringify(originalControl[key])) {
+					changes[key] = value;
+				}
+			}
+			
+			// Only send if there are actual changes beyond the ID
+			if (Object.keys(changes).length > 1) {
+				await wsClient.updateControl(changes as Control);
+				originalControl = { ...editedControl };
+				showTemporarySavedMessage();
+				console.log('Saved changes:', Object.keys(changes).filter(k => k !== 'id').join(', '));
+			}
+		} catch (error) {
+			console.error('Save failed:', error);
+		} finally {
+			isSaving = false;
+		}
+	}
+	
+	// Show the saved message temporarily
+	function showTemporarySavedMessage() {
+		// Clear any existing timeout
+		if (savedMessageTimeout) {
+			clearTimeout(savedMessageTimeout);
+		}
+		
+		// Show the message
+		showSavedMessage = true;
+		
+		// Hide it after 3 seconds
+		savedMessageTimeout = setTimeout(() => {
+			showSavedMessage = false;
+			savedMessageTimeout = null;
+		}, 3000);
+	}
+
+	// Handle field changes from custom tab
+	function handleFieldChange(fieldName: string, value: any) {
+		triggerAutoSave();
+	}
+</script>
+
+<!-- Header outside of any card -->
+<header class="flex-shrink-0">
+	<div class="py-5">
+		<div class="flex items-center justify-between">
+			<div class="flex items-center space-x-4">
+				<div>
+					<h1 class="text-xl font-bold text-gray-900 dark:text-white tracking-tight">
+						{control.id}
+					</h1>
+					<p class="text-sm text-gray-500 dark:text-gray-400 font-medium mt-1">
+						{control.title}
+					</p>
+				</div>
+			</div>
+			<div class="flex items-center">
+				<!-- Save status icon indicator -->
+				{#if saveStatus === 'saving'}
+					<div
+						class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30"
+						title="Saving..."
+					>
+						<InProgress class="w-5 h-5 text-blue-600 dark:text-blue-400" />
+					</div>
+				{:else if saveStatus === 'unsaved'}
+					<div
+						class="w-8 h-8 flex items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/30"
+						title="Unsaved changes"
+					>
+						<WarningFilled class="w-5 h-5 text-amber-600 dark:text-amber-400" />
+					</div>
+				{:else if saveStatus === 'just-saved'}
+					<div
+						class="w-8 h-8 flex items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30 animate-fade-in"
+						title="Saved"
+					>
+						<CheckmarkFilled class="w-5 h-5 text-green-600 dark:text-green-400" />
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+</header>
+
+<!-- Tab Navigation outside of any card -->
+<div class="mb-2">
+	<TabNavigation
+		active={activeTab}
+		tabs={[
+			{ id: 'details', label: 'Overview', icon: Information },
+			...(hasImplementationFields() ? [{ id: 'narrative', label: 'Implementation', icon: Edit }] : []),
+			...(hasCustomFields() ? [{ id: 'custom', label: 'Custom', icon: Edit }] : []),
+			{ id: 'mappings', label: 'Mappings', icon: Connect, count: associatedMappings.length },
+			{
+				id: 'history',
+				label: 'Timeline',
+				icon: Time,
+				count: control.timeline?.totalCommits
+			}
+		]}
+		onSelect={(tabId) => (activeTab = tabId as typeof activeTab)}
+	/>
+</div>
+
+<!-- Tab content without card wrapper -->
+<main class="flex-1 overflow-auto pt-4">
+	<div class="">
+		{#if activeTab === 'details'}
+			<OverviewTab control={editedControl} {fieldSchema} />
+		{:else if activeTab === 'narrative'}
+			<ImplementationTab control={editedControl} {fieldSchema} />
+		{:else if activeTab === 'custom'}
+			<CustomFieldsTab 
+				control={editedControl} 
+				{fieldSchema} 
+				onFieldChange={handleFieldChange}
+			/>
+		{:else if activeTab === 'mappings'}
+			<MappingsTab 
+				{control} 
+				mappings={associatedMappings} 
+			/>
+		{:else if activeTab === 'history'}
+			<TimelineTab 
+				{control} 
+				timeline={control.timeline}
+			/>
+		{/if}
+	</div>
+</main>