lula2 0.0.5 → 0.0.7-nightly.0

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>