@myrialabs/clopen 0.0.1

package/frontend/lib/components/common/Alert.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+	import { fade, scale } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
+	import Icon from './Icon.svelte';
+	import type { IconName } from '$shared/types/ui/icons';
+
+	interface Props {
+		isOpen: boolean;
+		title?: string;
+		message: string;
+		type?: 'info' | 'success' | 'warning' | 'error';
+		onClose: () => void;
+		closable?: boolean;
+	}
+
+	let {
+		isOpen = $bindable(),
+		title = 'Alert',
+		message,
+		type = 'info',
+		onClose,
+		closable = true
+	}: Props = $props();
+
+	function getIcon(type: string): IconName {
+		switch (type) {
+			case 'success':
+				return 'lucide:circle-check';
+			case 'error':
+				return 'lucide:circle-x';
+			case 'warning':
+				return 'lucide:triangle-alert';
+			case 'info':
+			default:
+				return 'lucide:info';
+		}
+	}
+
+	function getColorClasses(type: string) {
+		switch (type) {
+			case 'success':
+				return {
+					bg: 'bg-green-50 dark:bg-green-900/20',
+					border: 'border-green-200 dark:border-green-800',
+					icon: 'text-green-600 dark:text-green-400',
+					text: 'text-green-900 dark:text-green-100'
+				};
+			case 'error':
+				return {
+					bg: 'bg-red-50 dark:bg-red-900/20',
+					border: 'border-red-200 dark:border-red-800',
+					icon: 'text-red-600 dark:text-red-400',
+					text: 'text-red-900 dark:text-red-100'
+				};
+			case 'warning':
+				return {
+					bg: 'bg-amber-50 dark:bg-amber-900/20',
+					border: 'border-amber-200 dark:border-amber-800',
+					icon: 'text-amber-600 dark:text-amber-400',
+					text: 'text-amber-900 dark:text-amber-100'
+				};
+			case 'info':
+			default:
+				return {
+					bg: 'bg-violet-50 dark:bg-violet-900/20',
+					border: 'border-violet-200 dark:border-violet-800',
+					icon: 'text-violet-600 dark:text-violet-400',
+					text: 'text-violet-900 dark:text-violet-100'
+				};
+		}
+	}
+
+	const colors = $derived(getColorClasses(type));
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape' && closable) {
+			onClose();
+		}
+		if (event.key === 'Enter') {
+			onClose();
+		}
+	}
+
+	function handleBackdropClick(event: MouseEvent) {
+		if (event.target === event.currentTarget && closable) {
+			onClose();
+		}
+	}
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+{#if isOpen}
+	<div
+		class="fixed inset-0 z-50 bg-slate-900/70 backdrop-blur-xs flex items-center justify-center p-4"
+		role="alertdialog"
+		aria-modal="true"
+		aria-labelledby="alert-title"
+		aria-describedby="alert-message"
+		tabindex="-1"
+		onclick={handleBackdropClick}
+		onkeydown={(e) => e.key === 'Escape' && closable && onClose()}
+		in:fade={{ duration: 200, easing: cubicOut }}
+		out:fade={{ duration: 150, easing: cubicOut }}
+	>
+		<div
+			class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl max-w-md w-full p-6 space-y-4 shadow-xl"
+			role="document"
+			onclick={(e) => e.stopPropagation()}
+			onkeydown={(e) => e.stopPropagation()}
+			in:scale={{ duration: 200, easing: cubicOut, start: 0.95 }}
+			out:scale={{ duration: 150, easing: cubicOut, start: 0.95 }}
+		>
+			<div class="flex items-start space-x-4">
+				<div class="{colors.bg} {colors.border} rounded-xl p-3 border">
+					<Icon name={getIcon(type)} class="w-6 h-6 {colors.icon}" />
+				</div>
+				
+				<div class="flex-1 space-y-2">
+					<h3 id="alert-title" class="text-lg font-semibold {colors.text}">
+						{title}
+					</h3>
+					<p id="alert-message" class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+						{message}
+					</p>
+				</div>
+			</div>
+			
+			<div class="flex justify-end pt-2">
+				<button
+					onclick={onClose}
+					class="px-6 py-2.5 bg-violet-600 dark:bg-violet-600 text-white rounded-lg hover:bg-violet-700 dark:hover:bg-violet-700 transition-all duration-200 font-semibold focus:outline-none"
+				>
+					OK
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}

package/frontend/lib/components/common/AvatarBubble.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { formatUserDisplayName } from '$shared/utils/anonymous-user';
+	import type { AnonymousUser } from '$shared/utils/anonymous-user';
+	
+	interface Props {
+		user: { userId: string; userName: string };
+		size?: 'sm' | 'md' | 'lg';
+		showName?: boolean;
+	}
+	
+	const { user, size = 'sm', showName = false }: Props = $props();
+	
+	// Get avatar color and initials from user name
+	function generateColorFromString(str: string): string {
+		let hash = 0;
+		for (let i = 0; i < str.length; i++) {
+			hash = str.charCodeAt(i) + ((hash << 5) - hash);
+		}
+		
+		const hue = hash % 360;
+		return `hsl(${hue}, 70%, 50%)`;
+	}
+	
+	function getInitials(name: string): string {
+		return name.substring(0, 2).toUpperCase();
+	}
+	
+	// Size configurations
+	const sizeClasses = {
+		sm: 'w-6 h-6 text-xs',
+		md: 'w-8 h-8 text-sm', 
+		lg: 'w-10 h-10 text-base'
+	} as const;
+	
+	const avatarColor = $derived(generateColorFromString(user.userName));
+	const initials = $derived(getInitials(user.userName));
+	const sizeClass = $derived(sizeClasses[size]);
+</script>
+
+<div class="flex items-center gap-2">
+	<div class="relative">
+		<div
+			class="rounded-full flex items-center justify-center text-white font-bold border-2 border-white dark:border-slate-800 shadow-sm {sizeClass}"
+			style="background-color: {avatarColor}"
+			title={user.userName}
+		>
+			{initials}
+		</div>
+	</div>
+
+	{#if showName}
+		<span class="text-xs text-slate-600 dark:text-slate-400 font-medium">
+			{user.userName}
+		</span>
+	{/if}
+</div>

package/frontend/lib/components/common/Button.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { ButtonProps } from '$shared/types/ui';
+
+	const {
+		variant = 'primary',
+		size = 'md',
+		disabled = false,
+		loading = false,
+		type = 'button',
+		onclick,
+		class: className = '',
+		children,
+		...props
+	}: ButtonProps & { class?: string; children?: import('svelte').Snippet } = $props();
+
+	// Generate modern AI button classes based on props
+	const baseClasses =
+		'inline-flex items-center justify-center font-semibold transition-colors duration-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed';
+
+	const variantClasses = {
+		primary: 'bg-violet-600 hover:bg-violet-700 text-white',
+		secondary:
+			'bg-violet-600 hover:bg-violet-700 text-white',
+		outline:
+			'border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800',
+		ghost:
+			'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800'
+	};
+
+	const sizeClasses = {
+		sm: 'px-2.5 md:px-3 py-2 text-xs md:text-sm rounded-md',
+		md: 'px-3 md:px-4 py-2.5 text-sm rounded-lg',
+		lg: 'px-4 md:px-6 py-3 text-sm md:text-base rounded-lg'
+	};
+
+	const buttonClasses = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
+
+	function handleClick() {
+		if (!disabled && !loading && onclick) {
+			onclick();
+		}
+	}
+
+	function handleKeyPress(event: KeyboardEvent) {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			handleClick();
+		}
+	}
+</script>
+
+<button
+	{type}
+	{disabled}
+	class={buttonClasses}
+	onclick={handleClick}
+	onkeydown={handleKeyPress}
+	aria-busy={loading}
+	aria-disabled={disabled}
+	{...props}
+>
+	{#if loading}
+		<div
+			class="animate-spin rounded-full h-4 w-4 border-2 border-current border-t-transparent mr-2"
+		></div>
+	{/if}
+
+	{#if children}
+		{@render children()}
+	{/if}
+</button>

package/frontend/lib/components/common/Card.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import type { CardProps } from '$shared/types/ui';
+
+	const {
+		title = '',
+		subtitle = '',
+		variant = 'default',
+		padding = 'md',
+		clickable = false,
+		onclick,
+		class: className = '',
+		children,
+		...props
+	}: CardProps & { class?: string; children?: import('svelte').Snippet } = $props();
+
+	// Generate modern AI card classes
+	const baseClasses = 'rounded-lg transition-colors duration-200';
+
+	const variantClasses = {
+		default: 'bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700',
+		outlined: 'bg-transparent border border-slate-200 dark:border-slate-700',
+		elevated:
+			'bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700',
+		glass: 'ai-card dark:ai-card-light'
+	};
+
+	const paddingClasses = {
+		none: '',
+		sm: 'p-2 md:p-3',
+		md: 'p-3 md:p-4',
+		lg: 'p-4 md:p-6'
+	};
+
+	const clickableClasses = clickable
+		? 'cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800'
+		: '';
+
+	const cardClasses = `${baseClasses} ${variantClasses[variant]} ${paddingClasses[padding]} ${clickableClasses} ${className}`;
+
+	function handleClick() {
+		if (clickable && onclick) {
+			onclick();
+		}
+	}
+
+	function handleKeyPress(event: KeyboardEvent) {
+		if (clickable && (event.key === 'Enter' || event.key === ' ')) {
+			event.preventDefault();
+			handleClick();
+		}
+	}
+</script>
+
+{#if clickable}
+	<button
+		class={cardClasses}
+		onclick={handleClick}
+		onkeydown={handleKeyPress}
+		aria-label="Clickable card"
+		{...props}
+	>
+		{#if title || subtitle}
+			<div class="mb-4">
+				{#if title}
+					<h3 class="text-lg font-bold text-slate-900 dark:text-slate-100 mb-1">
+						{title}
+					</h3>
+				{/if}
+				{#if subtitle}
+					<p class="text-sm text-slate-600 dark:text-slate-400">
+						{subtitle}
+					</p>
+				{/if}
+			</div>
+		{/if}
+
+		{#if children}
+			{@render children()}
+		{/if}
+	</button>
+{:else}
+	<div class={cardClasses} {...props}>
+		{#if title || subtitle}
+			<div class="mb-4">
+				{#if title}
+					<h3 class="text-lg font-bold text-slate-900 dark:text-slate-100 mb-1">
+						{title}
+					</h3>
+				{/if}
+				{#if subtitle}
+					<p class="text-sm text-slate-600 dark:text-slate-400">
+						{subtitle}
+					</p>
+				{/if}
+			</div>
+		{/if}
+
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+{/if}

package/frontend/lib/components/common/Checkbox.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		id: string;
+		checked: boolean;
+		label?: string;
+		disabled?: boolean;
+		children?: Snippet;
+	}
+
+	let { id, checked = $bindable(false), label, disabled = false, children }: Props = $props();
+</script>
+
+<label for={id} class="flex items-start gap-3 cursor-pointer group {disabled ? 'opacity-50 cursor-not-allowed' : ''}">
+	<div class="relative flex items-center">
+		<input
+			type="checkbox"
+			{id}
+			bind:checked
+			{disabled}
+			class="sr-only peer"
+		/>
+		<div
+			class="w-5 h-5 border-2 rounded transition-all duration-200
+				border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800
+				peer-checked:border-violet-600 peer-checked:bg-violet-600
+				peer-focus:ring-2 peer-focus:ring-violet-200 dark:peer-focus:ring-violet-900/30
+				group-hover:border-violet-500
+				peer-disabled:opacity-50 peer-disabled:cursor-not-allowed
+				flex items-center justify-center"
+		>
+			{#if checked}
+				<Icon name="lucide:check" class="w-3.5 h-3.5 text-white" />
+			{/if}
+		</div>
+	</div>
+	{#if label}
+		<div class="flex-1 text-sm text-slate-600 dark:text-slate-400 select-none">
+			{label}
+		</div>
+	{:else if children}
+		<div class="flex-1 text-sm text-slate-600 dark:text-slate-400 select-none">
+			{@render children()}
+		</div>
+	{/if}
+</label>

package/frontend/lib/components/common/Dialog.svelte

@@ -0,0 +1,249 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { fade, scale } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
+	import Icon from './Icon.svelte';
+	import type { IconName } from '$shared/types/ui/icons';
+
+	interface Props {
+		isOpen: boolean;
+		onClose: () => void;
+		title?: string;
+		type?: 'info' | 'warning' | 'error' | 'success';
+		message?: string;
+		inputValue?: string;
+		inputPlaceholder?: string;
+		confirmText?: string;
+		cancelText?: string;
+		showCancel?: boolean;
+		closable?: boolean;
+		confirmDisabled?: boolean;
+		onConfirm?: (value?: string) => void;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		isOpen = $bindable(),
+		onClose,
+		title = 'Dialog',
+		type = 'info',
+		message = '',
+		inputValue = $bindable(),
+		inputPlaceholder = 'Enter value...',
+		confirmText = 'OK',
+		cancelText = 'Cancel',
+		showCancel = true,
+		closable = true,
+		confirmDisabled = false,
+		onConfirm,
+		children
+	}: Props = $props();
+
+	let inputElement = $state<HTMLInputElement>();
+	let dialogElement = $state<HTMLDivElement>();
+
+	function getIcon(type: string): IconName | null {
+		switch (type) {
+			case 'success':
+				return 'lucide:circle-check';
+			case 'error':
+				return 'lucide:circle-x';
+			case 'warning':
+				return 'lucide:triangle-alert';
+			case 'info':
+				return 'lucide:info';
+			default:
+				return null;
+		}
+	}
+
+	function getColorClasses(type: string) {
+		switch (type) {
+			case 'success':
+				return {
+					bg: 'bg-green-50 dark:bg-green-900/20',
+					border: 'border-green-200 dark:border-green-700/50',
+					icon: 'text-green-600 dark:text-green-400',
+					text: 'text-green-900 dark:text-green-100',
+					button: 'bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 text-white',
+					input: 'focus:border-green-400 dark:focus:border-green-500'
+				};
+			case 'error':
+				return {
+					bg: 'bg-red-50 dark:bg-red-900/20',
+					border: 'border-red-200 dark:border-red-700/50',
+					icon: 'text-red-600 dark:text-red-400',
+					text: 'text-red-900 dark:text-red-100',
+					button: 'bg-red-600 dark:bg-red-600 hover:bg-red-700 dark:hover:bg-red-700 text-white',
+					input: 'focus:border-red-400 dark:focus:border-red-500'
+				};
+			case 'warning':
+				return {
+					bg: 'bg-amber-50 dark:bg-amber-900/20',
+					border: 'border-amber-200 dark:border-amber-700/50',
+					icon: 'text-amber-600 dark:text-amber-400',
+					text: 'text-amber-900 dark:text-amber-100',
+					button: 'bg-amber-600 dark:bg-amber-600 hover:bg-amber-700 dark:hover:bg-amber-700 text-white',
+					input: 'focus:border-amber-400 dark:focus:border-amber-500'
+				};
+			case 'info':
+			default:
+				return {
+					bg: 'bg-violet-50 dark:bg-violet-900/20',
+					border: 'border-violet-200 dark:border-violet-700/50',
+					icon: 'text-violet-600 dark:text-violet-400',
+					text: 'text-slate-900 dark:text-slate-100',
+					button: 'bg-violet-600 dark:bg-violet-600 hover:bg-violet-700 dark:hover:bg-violet-700 text-white',
+					input: 'focus:border-violet-400 dark:focus:border-violet-500'
+				};
+		}
+	}
+
+	const colors = $derived(getColorClasses(type));
+	const icon = $derived(getIcon(type));
+
+	function handleKeydown(event: KeyboardEvent) {
+		// Guard: only handle keyboard events when this dialog is open.
+		// Without this, <svelte:window on:keydown> captures events globally,
+		// causing ALL Dialog instances (e.g. per-message restore dialogs)
+		// to fire handleConfirm on any Enter keypress — even from chat input.
+		if (!isOpen) return;
+		if (event.key === 'Escape' && closable) {
+			handleCancel();
+		} else if (event.key === 'Enter' && !confirmDisabled) {
+			handleConfirm();
+		}
+	}
+
+	function handleBackdropClick(event: MouseEvent) {
+		if (event.target === event.currentTarget && closable) {
+			handleCancel();
+		}
+	}
+
+	function handleConfirm() {
+		if (onConfirm) {
+			onConfirm(inputValue !== undefined ? inputValue : undefined);
+		}
+		onClose();
+	}
+
+	function handleCancel() {
+		onClose();
+	}
+
+	// Auto-focus management
+	onMount(() => {
+		if (isOpen) {
+			if (inputValue !== undefined && inputElement) {
+				inputElement.focus();
+				inputElement.select();
+			} else {
+				const focusableElement = dialogElement?.querySelector(
+					'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+				) as HTMLElement;
+				focusableElement?.focus();
+			}
+		}
+	});
+
+	// Watch for isOpen changes
+	$effect(() => {
+		if (isOpen) {
+			// Prevent body scroll when dialog is open
+			document.body.style.overflow = 'hidden';
+			
+			// Focus management
+			setTimeout(() => {
+				if (inputValue !== undefined && inputElement) {
+					inputElement.focus();
+					inputElement.select();
+				}
+			}, 50);
+		} else {
+			// Restore body scroll when dialog is closed
+			document.body.style.overflow = '';
+		}
+	});
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+{#if isOpen}
+	<div
+		bind:this={dialogElement}
+		class="fixed inset-0 z-[200] bg-slate-900/70 backdrop-blur-xs flex items-center justify-center p-4"
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="dialog-title"
+		aria-describedby="dialog-message"
+		tabindex="-1"
+		onclick={handleBackdropClick}
+		onkeydown={handleKeydown}
+		in:fade={{ duration: 200, easing: cubicOut }}
+		out:fade={{ duration: 150, easing: cubicOut }}
+	>
+		<div
+			class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl max-w-md w-full p-6 space-y-4 shadow-xl"
+			role="document"
+			onclick={(e) => e.stopPropagation()}
+			onkeydown={(e) => e.stopPropagation()}
+			in:scale={{ duration: 200, easing: cubicOut, start: 0.95 }}
+			out:scale={{ duration: 150, easing: cubicOut, start: 0.95 }}
+		>
+			{#if children}
+				{@render children()}
+			{:else}
+				<div class="flex items-start space-x-4">
+					{#if icon}
+						<div class="{colors.bg} {colors.border} rounded-xl p-3 border">
+							<Icon name={icon} class="w-6 h-6 {colors.icon}" />
+						</div>
+					{/if}
+					
+					<div class="flex-1 space-y-2">
+						<h3 id="dialog-title" class="text-lg font-semibold {colors.text}">
+							{title}
+						</h3>
+						{#if message}
+							<div id="dialog-message" class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed space-y-2">
+								{#each message.split('\n') as line}
+									<p>{line || '\u00A0'}</p>
+								{/each}
+							</div>
+						{/if}
+						
+						{#if inputValue !== undefined}
+							<input
+								bind:this={inputElement}
+								bind:value={inputValue}
+								type="text"
+								placeholder={inputPlaceholder}
+								onkeydown={handleKeydown}
+								class="w-full px-4 py-2.5 mt-3 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-violet-500/20 {colors.input}"
+							/>
+						{/if}
+					</div>
+				</div>
+			{/if}
+			
+			<div class="flex justify-end gap-3 pt-2">
+				{#if showCancel}
+					<button
+						onclick={handleCancel}
+						class="px-6 py-2.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200 font-semibold"
+					>
+						{cancelText}
+					</button>
+				{/if}
+				<button
+					onclick={handleConfirm}
+					disabled={confirmDisabled}
+					class="px-6 py-2.5 {colors.button} rounded-lg transition-all duration-200 font-semibold focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-current"
+				>
+					{confirmText}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}