lula2 0.0.5 → 0.0.6

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

@@ -0,0 +1,298 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import { DynamicControlForm } from '$components/forms';
+	import type { ControlSchema, ValidationResult } from '$lib/form-types';
+	import type { Control } from '$lib/types';
+	import { mappings } from '$stores/compliance';
+	import { Close } from 'carbon-icons-svelte';
+
+	interface Props {
+		control: Control;
+		schema: ControlSchema;
+		onClose: () => void;
+		onSave: (control: Control) => void;
+	}
+
+	let { control, schema, onClose, onSave }: Props = $props();
+
+	let editedControl = $state({ ...control });
+	let activeTab = $state('details');
+	let validationResult = $state<ValidationResult | null>(null);
+
+	function handleSave() {
+		// Validate before saving if we have validation results
+		if (!validationResult?.valid) {
+			// Show validation errors
+			return;
+		}
+		onSave(editedControl);
+	}
+
+	function handleValidation(result: ValidationResult) {
+		validationResult = result;
+	}
+
+	function parseCCIsFromNarrative(narrative: string): string[] {
+		const cciPattern = /CCI-(\d{6})/g;
+		const matches = narrative.match(cciPattern);
+		return matches ? [...new Set(matches)] : [];
+	}
+
+	let ccisInNarrative = $derived(
+		parseCCIsFromNarrative(editedControl['control-implementation-narrative'] || '')
+	);
+	let associatedMappings = $derived($mappings.filter((m) => m.control_id === control.id));
+
+	// Group fields by section for tabbed interface
+	const detailsFields = $derived(
+		schema.fields.filter((f) => f.group === 'identification' || f.group === 'description')
+	);
+
+	const implementationFields = $derived(schema.fields.filter((f) => f.group === 'implementation'));
+
+	const complianceFields = $derived(schema.fields.filter((f) => f.group === 'compliance'));
+
+	// Count validation errors per tab
+	const detailsErrors = $derived(
+		validationResult?.errors.filter((e) => detailsFields.some((f) => f.id === e.field)).length || 0
+	);
+
+	const implementationErrors = $derived(
+		validationResult?.errors.filter((e) => implementationFields.some((f) => f.id === e.field))
+			.length || 0
+	);
+
+	const complianceErrors = $derived(
+		validationResult?.errors.filter((e) => complianceFields.some((f) => f.id === e.field)).length ||
+			0
+	);
+</script>
+
+<!-- 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"
+	role="dialog"
+	aria-modal="true"
+	tabindex="-1"
+	onclick={onClose}
+	onkeydown={(e) => e.key === 'Escape' && onClose()}
+>
+	<!-- Modal -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<div
+		class="relative min-h-screen w-full p-6 bg-white dark:bg-gray-900"
+		role="document"
+		onclick={(e) => e.stopPropagation()}
+		onkeydown={(e) => e.stopPropagation()}
+	>
+		<!-- Header  -->
+		<div
+			class="flex items-center justify-between pb-4 border-b border-gray-200 dark:border-gray-700"
+		>
+			<div>
+				<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+					Edit Control: {control['control-acronym']}
+				</h3>
+				{#if !validationResult?.valid && validationResult?.errors.length}
+					<p class="text-sm text-red-600 dark:text-red-400 mt-1">
+						{validationResult.errors.length} validation error{validationResult.errors.length === 1
+							? ''
+							: 's'} found
+					</p>
+				{/if}
+			</div>
+			<button
+				onclick={onClose}
+				class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+				aria-label="Close modal"
+			>
+				<Close class="w-6 h-6" />
+			</button>
+		</div>
+
+		<!-- Tabs -->
+		<div class="mt-4">
+			<nav class="flex space-x-8">
+				<button
+					onclick={() => (activeTab = 'details')}
+					class="py-2 px-1 border-b-2 font-medium text-sm {activeTab === 'details'
+						? 'border-blue-500 text-blue-600 dark:text-blue-400'
+						: 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'}"
+				>
+					Details
+					{#if detailsErrors > 0}
+						<span class="ml-1 bg-red-100 text-red-800 text-xs font-medium px-2 py-0.5 rounded-full">
+							{detailsErrors}
+						</span>
+					{/if}
+				</button>
+				<button
+					onclick={() => (activeTab = 'implementation')}
+					class="py-2 px-1 border-b-2 font-medium text-sm {activeTab === 'implementation'
+						? 'border-blue-500 text-blue-600 dark:text-blue-400'
+						: 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'}"
+				>
+					Implementation
+					{#if implementationErrors > 0}
+						<span class="ml-1 bg-red-100 text-red-800 text-xs font-medium px-2 py-0.5 rounded-full">
+							{implementationErrors}
+						</span>
+					{/if}
+				</button>
+				<button
+					onclick={() => (activeTab = 'compliance')}
+					class="py-2 px-1 border-b-2 font-medium text-sm {activeTab === 'compliance'
+						? 'border-blue-500 text-blue-600 dark:text-blue-400'
+						: 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'}"
+				>
+					Compliance
+					{#if complianceErrors > 0}
+						<span class="ml-1 bg-red-100 text-red-800 text-xs font-medium px-2 py-0.5 rounded-full">
+							{complianceErrors}
+						</span>
+					{/if}
+				</button>
+				<button
+					onclick={() => (activeTab = 'mappings')}
+					class="py-2 px-1 border-b-2 font-medium text-sm {activeTab === 'mappings'
+						? 'border-blue-500 text-blue-600 dark:text-blue-400'
+						: 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'}"
+				>
+					Mappings ({associatedMappings.length})
+				</button>
+			</nav>
+		</div>
+
+		<!-- Tab Content -->
+		<div class="mt-6 max-h-screen-3/4 overflow-y-auto">
+			{#if activeTab === 'details'}
+				<DynamicControlForm
+					bind:control={editedControl}
+					schema={{
+						...schema,
+						fields: detailsFields
+					}}
+					onValidation={handleValidation}
+				/>
+			{:else if activeTab === 'implementation'}
+				<DynamicControlForm
+					bind:control={editedControl}
+					schema={{
+						...schema,
+						fields: implementationFields
+					}}
+					onValidation={handleValidation}
+				/>
+
+				{#if ccisInNarrative.length > 0}
+					<div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+						<div class="block text-sm font-medium text-blue-700 dark:text-blue-300 mb-2">
+							CCIs Found in Narrative
+						</div>
+						<div class="flex flex-wrap gap-2">
+							{#each ccisInNarrative as cci}
+								<span
+									class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200"
+								>
+									{cci}
+								</span>
+							{/each}
+						</div>
+					</div>
+				{/if}
+			{:else if activeTab === 'compliance'}
+				<DynamicControlForm
+					bind:control={editedControl}
+					schema={{
+						...schema,
+						fields: complianceFields
+					}}
+					onValidation={handleValidation}
+				/>
+			{:else if activeTab === 'mappings'}
+				<div class="space-y-4">
+					{#if associatedMappings.length > 0}
+						{#each associatedMappings as mapping}
+							<div
+								class="border border-gray-200 dark:border-gray-600 rounded-lg p-4 bg-gray-50 dark:bg-gray-800"
+							>
+								<div class="flex justify-between items-start mb-2">
+									<span class="text-sm font-medium text-gray-900 dark:text-white"
+										>@lula {mapping.uuid}</span
+									>
+									<button
+										onclick={() => navigator.clipboard.writeText(`@lula ${mapping.uuid}`)}
+										class="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
+									>
+										Copy UUID
+									</button>
+								</div>
+								<p class="text-sm text-gray-700 dark:text-gray-300 mb-2">{mapping.justification}</p>
+								<div
+									class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"
+								>
+									<span>Status: {mapping.status}</span>
+									<span>By: {mapping.created_by}</span>
+								</div>
+							</div>
+						{/each}
+					{:else}
+						<div class="text-center py-8">
+							<svg
+								class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+								/>
+							</svg>
+							<h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No mappings</h3>
+							<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+								This control has no associated mappings yet.
+							</p>
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+
+		<!-- Footer -->
+		<div
+			class="flex justify-between items-center pt-4 border-t border-gray-200 dark:border-gray-700 mt-6"
+		>
+			<!-- Schema Info -->
+			<div class="text-xs text-gray-500 dark:text-gray-400">
+				Schema: {schema.name} v{schema.version}
+				<span class="ml-2 text-green-600 dark:text-green-400">Dynamic Forms</span>
+			</div>
+
+			<!-- Action Buttons -->
+			<div class="flex space-x-3">
+				<button
+					onclick={onClose}
+					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-md hover:bg-gray-50 dark:hover:bg-gray-700"
+				>
+					Cancel
+				</button>
+				<button
+					onclick={handleSave}
+					disabled={!validationResult?.valid}
+					class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
+				>
+					Save Changes
+					{#if !validationResult?.valid && validationResult?.errors.length}
+						<span class="ml-1">({validationResult.errors.length} errors)</span>
+					{/if}
+				</button>
+			</div>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,105 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import type { Mapping } from '$lib/types';
+	import { StatusBadge } from '../ui';
+
+	interface Props {
+		mapping: Mapping;
+		onEdit?: (mapping: Mapping) => void;
+		onDelete?: (uuid: string) => void;
+		showActions?: boolean;
+	}
+
+	let { mapping, onEdit, onDelete, showActions = false }: Props = $props();
+
+	function handleCopyUuid() {
+		navigator.clipboard.writeText(`@lula ${mapping.uuid}`);
+	}
+
+	function handleEdit() {
+		onEdit?.(mapping);
+	}
+
+	function handleDelete() {
+		if (confirm('Are you sure you want to delete this mapping?')) {
+			onDelete?.(mapping.uuid);
+		}
+	}
+</script>
+
+<div
+	class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm hover:shadow-md transition-all duration-200"
+>
+	<!-- Header -->
+	<div
+		class="bg-gray-100 dark:bg-gray-900 rounded-t-xl px-6 py-4 border-b border-gray-200 dark:border-gray-700"
+	>
+		<div class="flex justify-between items-center">
+			<span
+				class="text-xs font-mono font-medium text-gray-600 dark:text-gray-300"
+			>
+				{mapping.uuid}
+			</span>
+			<div class="flex items-center space-x-2">
+				<button
+					onclick={handleCopyUuid}
+					class="inline-flex items-center px-3 py-2 text-xs font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 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 transition-all duration-200 shadow-sm hover:shadow"
+					title="Copy UUID to clipboard"
+				>
+					Copy UUID
+				</button>
+				{#if showActions}
+					<button
+						onclick={handleEdit}
+						class="inline-flex items-center px-3 py-2 text-xs font-medium text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-all duration-200 shadow-sm hover:shadow"
+						title="Edit mapping"
+					>
+						Edit
+					</button>
+					<button
+						onclick={handleDelete}
+						class="inline-flex items-center px-3 py-2 text-xs font-medium text-red-600 dark:text-red-300 hover:text-red-800 dark:hover:text-red-100 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg hover:bg-red-100 dark:hover:bg-red-900/50 transition-all duration-200 shadow-sm hover:shadow"
+						title="Delete mapping"
+					>
+						Delete
+					</button>
+				{/if}
+			</div>
+		</div>
+	</div>
+
+	<!-- Content -->
+	<div class="px-6 py-4">
+		<p class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
+			{mapping.justification}
+		</p>
+		
+		{#if mapping.source_entries && mapping.source_entries.length > 0}
+			<div class="mb-4">
+				<h4 class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider mb-2">Source References</h4>
+				<div class="space-y-2">
+					{#each mapping.source_entries as entry}
+						<div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700">
+							<div class="flex items-start justify-between">
+								<span class="text-xs font-mono text-blue-600 dark:text-blue-400 break-all">
+									{entry.location}
+								</span>
+								{#if entry.shasum}
+									<span class="text-xs text-gray-500 dark:text-gray-400 ml-2" title="SHA checksum">
+										{entry.shasum.substring(0, 8)}...
+									</span>
+								{/if}
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+		
+		<div class="flex items-center justify-start">
+			<StatusBadge status={mapping.status} type="mapping" />
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,188 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import type { SourceEntry } from '$lib/types';
+	import { Add, TrashCan } from 'carbon-icons-svelte';
+	import FormField from '../forms/FormField.svelte';
+
+	interface MappingFormData {
+		justification: string;
+		status: 'planned' | 'implemented' | 'verified';
+		source_entries: SourceEntry[];
+	}
+
+	interface Props {
+		initialData?: Partial<MappingFormData>;
+		onSubmit: (data: MappingFormData) => void;
+		onCancel: () => void;
+		loading?: boolean;
+		submitLabel?: string;
+	}
+
+	let {
+		initialData = {},
+		onSubmit,
+		onCancel,
+		loading = false,
+		submitLabel = 'Create Mapping'
+	}: Props = $props();
+
+	let formData = $state<MappingFormData>({
+		justification: initialData.justification || '',
+		status: initialData.status || 'planned',
+		source_entries: initialData.source_entries || []
+	});
+	
+	let newLocation = $state('');
+	let newShasum = $state('');
+
+	const statusOptions = ['planned', 'implemented', 'verified'];
+
+	const isValid = $derived(formData.justification.trim().length > 0);
+
+	function handleSubmit() {
+		if (!isValid || loading) return;
+		onSubmit(formData);
+	}
+
+	function handleCancel() {
+		// Reset form
+		formData = {
+			justification: initialData.justification || '',
+			status: initialData.status || 'planned',
+			source_entries: initialData.source_entries || []
+		};
+		newLocation = '';
+		newShasum = '';
+		onCancel();
+	}
+	
+	function addSourceEntry() {
+		if (newLocation.trim()) {
+			const entry: SourceEntry = {
+				location: newLocation.trim()
+			};
+			if (newShasum.trim()) {
+				entry.shasum = newShasum.trim();
+			}
+			formData.source_entries = [...formData.source_entries, entry];
+			newLocation = '';
+			newShasum = '';
+		}
+	}
+	
+	function removeSourceEntry(index: number) {
+		formData.source_entries = formData.source_entries.filter((_, i) => i !== index);
+	}
+</script>
+
+<div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 p-6">
+	<div class="space-y-8">
+		<!-- Main form fields -->
+		<div class="grid grid-cols-1 gap-8">
+			<FormField
+				id="mapping-justification"
+				label="Justification"
+				type="textarea"
+				bind:value={formData.justification}
+				rows={4}
+				placeholder="Explain how this compliance artifact satisfies the control requirements..."
+				required
+			/>
+
+			<FormField
+				id="mapping-status"
+				label="Implementation Status"
+				type="select"
+				bind:value={formData.status}
+				options={statusOptions}
+			/>
+		</div>
+
+		<!-- Source References -->
+		<div class="space-y-4">
+			<div class="flex items-center justify-between">
+				<div class="text-sm font-medium text-gray-900 dark:text-white">Source References</div>
+				<span class="text-xs text-gray-500 dark:text-gray-400">Optional</span>
+			</div>
+			
+			<!-- Existing entries -->
+			{#if formData.source_entries.length > 0}
+				<div class="space-y-3">
+					{#each formData.source_entries as entry, index}
+						<div class="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
+							<div class="flex-1 min-w-0">
+								<div class="text-sm font-mono text-gray-900 dark:text-white break-all">
+									{entry.location}
+								</div>
+								{#if entry.shasum}
+									<div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+										SHA: {entry.shasum.substring(0, 8)}...
+									</div>
+								{/if}
+							</div>
+							<button
+								type="button"
+								onclick={() => removeSourceEntry(index)}
+								class="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md transition-colors"
+								title="Remove reference"
+							>
+								<TrashCan size={16} />
+							</button>
+						</div>
+					{/each}
+				</div>
+			{/if}
+
+			<!-- Add new entry -->
+			<div class="grid grid-cols-1 gap-4">
+				<input
+					type="text"
+					bind:value={newLocation}
+					placeholder="File path or URI (e.g., src/auth/handler.ts:42)"
+					class="w-full px-4 py-3 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+				/>
+				<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+					<input
+						type="text"
+						bind:value={newShasum}
+						placeholder="SHA checksum (optional)"
+						class="px-4 py-3 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+					/>
+					<button
+						type="button"
+						onclick={addSourceEntry}
+						disabled={!newLocation.trim()}
+						class="px-4 py-3 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/30 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"
+					>
+						<Add size={16} />
+						Add Reference
+					</button>
+				</div>
+			</div>
+		</div>
+
+		<!-- Action buttons -->
+		<div class="flex justify-end gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
+			<button
+				type="button"
+				onclick={handleCancel}
+				disabled={loading}
+				class="px-6 py-2.5 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-gray-500 disabled:opacity-50 transition-all duration-200"
+			>
+				Cancel
+			</button>
+			<button
+				type="button"
+				onclick={handleSubmit}
+				disabled={!isValid || loading}
+				class="px-6 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 {isValid && !loading
+					? 'text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2'
+					: 'text-gray-400 bg-gray-200 dark:bg-gray-700 cursor-not-allowed'}"
+			>
+				{loading ? 'Saving...' : submitLabel}
+			</button>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,9 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: 2023-Present The Lula Authors
+
+export { default as ControlDetailsPanel } from './ControlDetailsPanel.svelte';
+export { default as ControlsList } from './ControlsList.svelte';
+export { default as DynamicControlEditor } from './DynamicControlEditor.svelte';
+export { default as MappingCard } from './MappingCard.svelte';
+export { default as MappingForm } from './MappingForm.svelte';
+