@nocturnium/svelte-ide 1.0.0 → 1.0.2

package/dist/components/layout/StatusBar.svelte

@@ -87,9 +87,7 @@
 	let featuredAgent = $derived.by(() => {
 		// Prefer agent working on current file
 		if (currentFilePath) {
-			const agentOnFile = busyAgents.find(a =>
-				a.currentTask?.files?.includes(currentFilePath)
-			);
+			const agentOnFile = busyAgents.find((a) => a.currentTask?.files?.includes(currentFilePath));
 			if (agentOnFile) return agentOnFile;
 		}
 		// Otherwise show first busy agent
@@ -107,10 +105,18 @@
 		const phase = featuredAgent.currentTask?.progress?.phase;
 		let action = 'working';
 		switch (phase) {
-			case 'planning': action = 'planning'; break;
-			case 'implementing': action = 'coding'; break;
-			case 'testing': action = 'testing'; break;
-			case 'complete': action = 'done'; break;
+			case 'planning':
+				action = 'planning';
+				break;
+			case 'implementing':
+				action = 'coding';
+				break;
+			case 'testing':
+				action = 'testing';
+				break;
+			case 'complete':
+				action = 'done';
+				break;
 		}
 
 		const otherBusy = busyAgents.length - 1;
@@ -120,14 +126,10 @@
 
 	// Lock context for current file
 	let currentFileLock = $derived(
-		currentFilePath ? locks.find(l => l.path === currentFilePath) : undefined
-	);
-	let isMyLock = $derived(
-		currentFileLock && userId ? currentFileLock.holder === userId : false
-	);
-	let otherLocks = $derived(
-		locks.filter(l => l.path !== currentFilePath)
+		currentFilePath ? locks.find((l) => l.path === currentFilePath) : undefined
 	);
+	let isMyLock = $derived(currentFileLock && userId ? currentFileLock.holder === userId : false);
+	let otherLocks = $derived(locks.filter((l) => l.path !== currentFilePath));
 
 	// Lock expiry countdown
 	let lockExpiryText = $state<string | null>(null);
@@ -196,7 +198,7 @@
 			return `${currentFileLock.holder} is editing this file.`;
 		}
 		if (locks.length === 0) return 'No files locked';
-		const holders = [...new Set(locks.map(l => l.holder))];
+		const holders = [...new Set(locks.map((l) => l.holder))];
 		return `Locked by: ${holders.join(', ')}`;
 	});
 </script>
@@ -434,8 +436,13 @@
 	}
 
 	@keyframes ai-dot-shimmer {
-		0%, 100% { background-position: 0% 50%; }
-		50% { background-position: 100% 50%; }
+		0%,
+		100% {
+			background-position: 0% 50%;
+		}
+		50% {
+			background-position: 100% 50%;
+		}
 	}
 
 	/* Lock Status */
@@ -468,8 +475,13 @@
 	}
 
 	@keyframes expiry-pulse {
-		0%, 100% { opacity: 1; }
-		50% { opacity: 0.6; }
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.6;
+		}
 	}
 
 	.status-bar__separator {
@@ -493,7 +505,7 @@
 
 	/* Responsive: hide less important info on narrow screens */
 	@media (max-width: 600px) {
-		.status-bar__right > :nth-child(n+3):nth-child(-n+5) {
+		.status-bar__right > :nth-child(n + 3):nth-child(-n + 5) {
 			display: none;
 		}
 	}

package/dist/components/lsp/AutocompleteWidget.svelte

@@ -1,3 +1,22 @@
+<script module lang="ts">
+	// SVG icons for completion item kinds
+	function getKindSVG(kind?: number): string {
+		const icons: Record<number, string> = {
+			2: '<path d="M4 4h4v2H4v4H2V4h2zm10 0h2v6h-4V8h2V4zm-6 8h4v4H8v-4zm8 0h2v4h-4v-2h2v-2z" fill="currentColor"/>',
+			3: '<path d="M4 4h8v2H4v8H2V4h2zm6 4h4v8h-2v-6H8V8h2z" fill="currentColor"/>',
+			6: '<path d="M4 4h8v4H8V6H6v4H4V4zm0 8h2v4H4v-4zm4 0h8v4H8v-4z" fill="currentColor"/>',
+			7: '<path d="M4 4h8v2H4v8H2V4h2zm4 4h6v8H6V8h2zm2 2v4h2v-4h-2z" fill="currentColor"/>',
+			8: '<path d="M6 4h8v2H6v8H4V4h2zm6 4h2v8H8v-2h4V8z" fill="currentColor"/>',
+			9: '<path d="M2 4h4v2H2v8h8v2H2V4zm6 2h8v10H8V6zm2 2v6h4V8h-4z" fill="currentColor"/>',
+			13: '<path d="M4 4h8v2H4v8H2V4h2zm4 4h6v8H6V8h2zm2 2v2h2v-2h-2z" fill="currentColor"/>',
+			14: '<path d="M4 6h10v2H4v6H2V6h2zm4 4h6v6H6v-6h2zm2 2v2h2v-2h-2z" fill="currentColor"/>',
+			15: '<path d="M4 4v12h12V4H4zm2 2h8v8H6V6z" fill="currentColor"/>',
+			21: '<path d="M8 2l6 6-6 6-6-6 6-6zm0 2.83L4.83 8 8 11.17 11.17 8 8 4.83z" fill="currentColor"/>'
+		};
+		return `<svg viewBox="0 0 16 16" width="16" height="16">${icons[kind ?? 1] ?? '<circle cx="8" cy="8" r="4" fill="currentColor"/>'}</svg>`;
+	}
+</script>
+
 <script lang="ts">
 	/**
 	 * AutocompleteWidget - LSP completion suggestions dropdown
@@ -206,25 +225,6 @@
 	{/if}
 </div>
 
-<script module lang="ts">
-	// SVG icons for completion item kinds
-	function getKindSVG(kind?: number): string {
-		const icons: Record<number, string> = {
-			2: '<path d="M4 4h4v2H4v4H2V4h2zm10 0h2v6h-4V8h2V4zm-6 8h4v4H8v-4zm8 0h2v4h-4v-2h2v-2z" fill="currentColor"/>',
-			3: '<path d="M4 4h8v2H4v8H2V4h2zm6 4h4v8h-2v-6H8V8h2z" fill="currentColor"/>',
-			6: '<path d="M4 4h8v4H8V6H6v4H4V4zm0 8h2v4H4v-4zm4 0h8v4H8v-4z" fill="currentColor"/>',
-			7: '<path d="M4 4h8v2H4v8H2V4h2zm4 4h6v8H6V8h2zm2 2v4h2v-4h-2z" fill="currentColor"/>',
-			8: '<path d="M6 4h8v2H6v8H4V4h2zm6 4h2v8H8v-2h4V8z" fill="currentColor"/>',
-			9: '<path d="M2 4h4v2H2v8h8v2H2V4zm6 2h8v10H8V6zm2 2v6h4V8h-4z" fill="currentColor"/>',
-			13: '<path d="M4 4h8v2H4v8H2V4h2zm4 4h6v8H6V8h2zm2 2v2h2v-2h-2z" fill="currentColor"/>',
-			14: '<path d="M4 6h10v2H4v6H2V6h2zm4 4h6v6H6v-6h2zm2 2v2h2v-2h-2z" fill="currentColor"/>',
-			15: '<path d="M4 4v12h12V4H4zm2 2h8v8H6V6z" fill="currentColor"/>',
-			21: '<path d="M8 2l6 6-6 6-6-6 6-6zm0 2.83L4.83 8 8 11.17 11.17 8 8 4.83z" fill="currentColor"/>'
-		};
-		return `<svg viewBox="0 0 16 16" width="16" height="16">${icons[kind ?? 1] ?? '<circle cx="8" cy="8" r="4" fill="currentColor"/>'}</svg>`;
-	}
-</script>
-
 <style>
 	.autocomplete-widget {
 		position: fixed;

package/dist/components/lsp/DiagnosticMarker.svelte

@@ -1,3 +1,43 @@
+<script module lang="ts">
+	function getGutterIcon(severity?: number): string {
+		const color =
+			severity === 1
+				? 'var(--ide-error)'
+				: severity === 2
+					? 'var(--ide-warning)'
+					: severity === 3
+						? 'var(--ide-info)'
+						: 'var(--ide-text-muted)';
+
+		switch (severity) {
+			case 1: // Error - filled circle with X
+				return `<svg viewBox="0 0 16 16" width="12" height="12">
+					<circle cx="8" cy="8" r="6" fill="${color}"/>
+					<path d="M5.5 5.5l5 5M10.5 5.5l-5 5" stroke="var(--ide-bg-primary)" stroke-width="1.5" stroke-linecap="round"/>
+				</svg>`;
+			case 2: // Warning - triangle
+				return `<svg viewBox="0 0 16 16" width="12" height="12">
+					<path d="M8 2L1 14h14L8 2z" fill="${color}"/>
+					<path d="M8 6v4M8 12v1" stroke="var(--ide-bg-primary)" stroke-width="1.5" stroke-linecap="round"/>
+				</svg>`;
+			case 3: // Info - circle with i
+				return `<svg viewBox="0 0 16 16" width="12" height="12">
+					<circle cx="8" cy="8" r="6" fill="${color}"/>
+					<path d="M8 5v1M8 8v4" stroke="var(--ide-bg-primary)" stroke-width="1.5" stroke-linecap="round"/>
+				</svg>`;
+			case 4: // Hint - lightbulb outline
+				return `<svg viewBox="0 0 16 16" width="12" height="12">
+					<path d="M8 1a5 5 0 013 9v2a1 1 0 01-1 1H6a1 1 0 01-1-1v-2a5 5 0 013-9z" fill="none" stroke="${color}" stroke-width="1.2"/>
+					<path d="M6 14h4" stroke="${color}" stroke-width="1.2" stroke-linecap="round"/>
+				</svg>`;
+			default:
+				return `<svg viewBox="0 0 16 16" width="12" height="12">
+					<circle cx="8" cy="8" r="4" fill="${color}"/>
+				</svg>`;
+		}
+	}
+</script>
+
 <script lang="ts">
 	/**
 	 * DiagnosticMarker - Inline diagnostic indicator
@@ -18,30 +58,35 @@
 		class?: string;
 	}
 
-	let {
-		diagnostic,
-		type = 'inline',
-		onClick,
-		class: className = ''
-	}: Props = $props();
+	let { diagnostic, type = 'inline', onClick, class: className = '' }: Props = $props();
 
 	function getSeverityClass(severity?: DiagnosticSeverity): string {
 		switch (severity) {
-			case 1: return 'error';
-			case 2: return 'warning';
-			case 3: return 'info';
-			case 4: return 'hint';
-			default: return 'info';
+			case 1:
+				return 'error';
+			case 2:
+				return 'warning';
+			case 3:
+				return 'info';
+			case 4:
+				return 'hint';
+			default:
+				return 'info';
 		}
 	}
 
 	function getSeverityLabel(severity?: DiagnosticSeverity): string {
 		switch (severity) {
-			case 1: return 'Error';
-			case 2: return 'Warning';
-			case 3: return 'Info';
-			case 4: return 'Hint';
-			default: return 'Diagnostic';
+			case 1:
+				return 'Error';
+			case 2:
+				return 'Warning';
+			case 3:
+				return 'Info';
+			case 4:
+				return 'Hint';
+			default:
+				return 'Diagnostic';
 		}
 	}
 </script>
@@ -67,42 +112,6 @@
 	></span>
 {/if}
 
-<script module lang="ts">
-	function getGutterIcon(severity?: number): string {
-		const color = severity === 1 ? 'var(--ide-error)' :
-			severity === 2 ? 'var(--ide-warning)' :
-			severity === 3 ? 'var(--ide-info)' :
-			'var(--ide-text-muted)';
-
-		switch (severity) {
-			case 1: // Error - filled circle with X
-				return `<svg viewBox="0 0 16 16" width="12" height="12">
-					<circle cx="8" cy="8" r="6" fill="${color}"/>
-					<path d="M5.5 5.5l5 5M10.5 5.5l-5 5" stroke="var(--ide-bg-primary)" stroke-width="1.5" stroke-linecap="round"/>
-				</svg>`;
-			case 2: // Warning - triangle
-				return `<svg viewBox="0 0 16 16" width="12" height="12">
-					<path d="M8 2L1 14h14L8 2z" fill="${color}"/>
-					<path d="M8 6v4M8 12v1" stroke="var(--ide-bg-primary)" stroke-width="1.5" stroke-linecap="round"/>
-				</svg>`;
-			case 3: // Info - circle with i
-				return `<svg viewBox="0 0 16 16" width="12" height="12">
-					<circle cx="8" cy="8" r="6" fill="${color}"/>
-					<path d="M8 5v1M8 8v4" stroke="var(--ide-bg-primary)" stroke-width="1.5" stroke-linecap="round"/>
-				</svg>`;
-			case 4: // Hint - lightbulb outline
-				return `<svg viewBox="0 0 16 16" width="12" height="12">
-					<path d="M8 1a5 5 0 013 9v2a1 1 0 01-1 1H6a1 1 0 01-1-1v-2a5 5 0 013-9z" fill="none" stroke="${color}" stroke-width="1.2"/>
-					<path d="M6 14h4" stroke="${color}" stroke-width="1.2" stroke-linecap="round"/>
-				</svg>`;
-			default:
-				return `<svg viewBox="0 0 16 16" width="12" height="12">
-					<circle cx="8" cy="8" r="4" fill="${color}"/>
-				</svg>`;
-		}
-	}
-</script>
-
 <style>
 	.diagnostic-gutter {
 		display: flex;

package/dist/components/lsp/DiagnosticsPanel.svelte

@@ -1,3 +1,25 @@
+<script module lang="ts">
+	const errorIcon = `<svg viewBox="0 0 16 16" width="14" height="14"><circle cx="8" cy="8" r="7" fill="currentColor"/><path d="M5.5 5.5l5 5M10.5 5.5l-5 5" stroke="var(--ide-bg-primary)" stroke-width="1.5"/></svg>`;
+	const warningIcon = `<svg viewBox="0 0 16 16" width="14" height="14"><path d="M8 1L1 15h14L8 1z" fill="currentColor"/><path d="M8 6v4M8 12v1" stroke="var(--ide-bg-primary)" stroke-width="1.5" stroke-linecap="round"/></svg>`;
+	const infoIcon = `<svg viewBox="0 0 16 16" width="14" height="14"><circle cx="8" cy="8" r="7" fill="currentColor"/><path d="M8 5v1M8 8v4" stroke="var(--ide-bg-primary)" stroke-width="1.5" stroke-linecap="round"/></svg>`;
+	const checkIcon = `<svg viewBox="0 0 16 16" width="24" height="24"><circle cx="8" cy="8" r="7" fill="var(--ide-success)" opacity="0.2"/><path d="M5 8l2 2 4-4" stroke="var(--ide-success)" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+
+	function getSeveritySVG(severity?: number): string {
+		switch (severity) {
+			case 1:
+				return errorIcon;
+			case 2:
+				return warningIcon;
+			case 3:
+				return infoIcon;
+			case 4:
+				return `<svg viewBox="0 0 16 16" width="14" height="14"><circle cx="8" cy="8" r="7" fill="currentColor"/><path d="M8 4v5M8 11v1" stroke="var(--ide-bg-primary)" stroke-width="1.5" stroke-linecap="round"/></svg>`;
+			default:
+				return infoIcon;
+		}
+	}
+</script>
+
 <script lang="ts">
 	/**
 	 * DiagnosticsPanel - LSP diagnostics list display
@@ -62,10 +84,18 @@
 		diagnostics.forEach((diags) => {
 			for (const diag of diags) {
 				switch (diag.severity) {
-					case 1: result.errors++; break;
-					case 2: result.warnings++; break;
-					case 3: result.info++; break;
-					case 4: result.hints++; break;
+					case 1:
+						result.errors++;
+						break;
+					case 2:
+						result.warnings++;
+						break;
+					case 3:
+						result.info++;
+						break;
+					case 4:
+						result.hints++;
+						break;
 				}
 			}
 		});
@@ -74,11 +104,16 @@
 
 	function getSeverityIcon(severity?: DiagnosticSeverity): string {
 		switch (severity) {
-			case 1: return 'error';
-			case 2: return 'warning';
-			case 3: return 'info';
-			case 4: return 'hint';
-			default: return 'info';
+			case 1:
+				return 'error';
+			case 2:
+				return 'warning';
+			case 3:
+				return 'info';
+			case 4:
+				return 'hint';
+			default:
+				return 'info';
 		}
 	}
 
@@ -149,7 +184,7 @@
 		{#if allDiagnostics().length === 0}
 			<div class="diagnostics-panel__empty">
 				<!-- eslint-disable-next-line svelte/no-at-html-tags -- SVG icons are static string literals defined in this file, not user content -->
-			<span class="diagnostics-panel__empty-icon">{@html checkIcon}</span>
+				<span class="diagnostics-panel__empty-icon">{@html checkIcon}</span>
 				<span>No problems detected</span>
 			</div>
 		{:else}
@@ -180,23 +215,6 @@
 	</div>
 </div>
 
-<script module lang="ts">
-	const errorIcon = `<svg viewBox="0 0 16 16" width="14" height="14"><circle cx="8" cy="8" r="7" fill="currentColor"/><path d="M5.5 5.5l5 5M10.5 5.5l-5 5" stroke="var(--ide-bg-primary)" stroke-width="1.5"/></svg>`;
-	const warningIcon = `<svg viewBox="0 0 16 16" width="14" height="14"><path d="M8 1L1 15h14L8 1z" fill="currentColor"/><path d="M8 6v4M8 12v1" stroke="var(--ide-bg-primary)" stroke-width="1.5" stroke-linecap="round"/></svg>`;
-	const infoIcon = `<svg viewBox="0 0 16 16" width="14" height="14"><circle cx="8" cy="8" r="7" fill="currentColor"/><path d="M8 5v1M8 8v4" stroke="var(--ide-bg-primary)" stroke-width="1.5" stroke-linecap="round"/></svg>`;
-	const checkIcon = `<svg viewBox="0 0 16 16" width="24" height="24"><circle cx="8" cy="8" r="7" fill="var(--ide-success)" opacity="0.2"/><path d="M5 8l2 2 4-4" stroke="var(--ide-success)" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
-
-	function getSeveritySVG(severity?: number): string {
-		switch (severity) {
-			case 1: return errorIcon;
-			case 2: return warningIcon;
-			case 3: return infoIcon;
-			case 4: return `<svg viewBox="0 0 16 16" width="14" height="14"><circle cx="8" cy="8" r="7" fill="currentColor"/><path d="M8 4v5M8 11v1" stroke="var(--ide-bg-primary)" stroke-width="1.5" stroke-linecap="round"/></svg>`;
-			default: return infoIcon;
-		}
-	}
-</script>
-
 <style>
 	.diagnostics-panel {
 		display: flex;

package/dist/components/lsp/HoverTooltip.svelte

@@ -1,3 +1,58 @@
+<script module lang="ts">
+	// Simple markdown renderer for hover content
+	// Handles code blocks, inline code, bold, italic, and links
+	function renderMarkdown(text: string): string {
+		let html = escapeHtml(text);
+
+		// Code blocks with language
+		html = html.replace(
+			/```(\w+)?\n([\s\S]*?)```/g,
+			(_, lang, code) =>
+				`<pre class="hover-tooltip__code-block" data-lang="${lang || ''}">${code.trim()}</pre>`
+		);
+
+		// Inline code
+		html = html.replace(/`([^`]+)`/g, '<code class="hover-tooltip__inline-code">$1</code>');
+
+		// Bold
+		html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+
+		// Italic
+		html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+
+		// Links (href is validated; unsafe schemes degrade to plain text)
+		html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, label: string, href: string) => {
+			const url = safeUrl(href);
+			return url ? `<a href="${url}" target="_blank" rel="noopener">${label}</a>` : label;
+		});
+
+		// Line breaks
+		html = html.replace(/\n/g, '<br>');
+
+		return html;
+	}
+
+	function escapeHtml(text: string): string {
+		const map: Record<string, string> = {
+			'&': '&amp;',
+			'<': '&lt;',
+			'>': '&gt;',
+			'"': '&quot;',
+			"'": '&#039;'
+		};
+		return text.replace(/[&<>"']/g, (char) => map[char]);
+	}
+
+	// Whitelist link schemes. Relative/anchor URLs and http(s)/mailto are allowed;
+	// anything else (e.g. javascript:, data:, vbscript:) is rejected.
+	function safeUrl(url: string): string | null {
+		const trimmed = url.trim();
+		if (/^(\/|#|\.\/|\.\.\/)/.test(trimmed)) return trimmed;
+		if (/^(https?:|mailto:)/i.test(trimmed)) return trimmed;
+		return null;
+	}
+</script>
+
 <script lang="ts">
 	/**
 	 * HoverTooltip - LSP hover information display
@@ -20,13 +75,7 @@
 		class?: string;
 	}
 
-	let {
-		hover,
-		position,
-		maxWidth = 500,
-		onDismiss,
-		class: className = ''
-	}: Props = $props();
+	let { hover, position, maxWidth = 500, onDismiss, class: className = '' }: Props = $props();
 
 	let tooltipRef: HTMLElement;
 
@@ -124,60 +173,6 @@
 	</div>
 </div>
 
-<script module lang="ts">
-	// Simple markdown renderer for hover content
-	// Handles code blocks, inline code, bold, italic, and links
-	function renderMarkdown(text: string): string {
-		let html = escapeHtml(text);
-
-		// Code blocks with language
-		html = html.replace(
-			/```(\w+)?\n([\s\S]*?)```/g,
-			(_, lang, code) => `<pre class="hover-tooltip__code-block" data-lang="${lang || ''}">${code.trim()}</pre>`
-		);
-
-		// Inline code
-		html = html.replace(/`([^`]+)`/g, '<code class="hover-tooltip__inline-code">$1</code>');
-
-		// Bold
-		html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
-
-		// Italic
-		html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
-
-		// Links (href is validated; unsafe schemes degrade to plain text)
-		html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, label: string, href: string) => {
-			const url = safeUrl(href);
-			return url ? `<a href="${url}" target="_blank" rel="noopener">${label}</a>` : label;
-		});
-
-		// Line breaks
-		html = html.replace(/\n/g, '<br>');
-
-		return html;
-	}
-
-	function escapeHtml(text: string): string {
-		const map: Record<string, string> = {
-			'&': '&amp;',
-			'<': '&lt;',
-			'>': '&gt;',
-			'"': '&quot;',
-			"'": '&#039;'
-		};
-		return text.replace(/[&<>"']/g, (char) => map[char]);
-	}
-
-	// Whitelist link schemes. Relative/anchor URLs and http(s)/mailto are allowed;
-	// anything else (e.g. javascript:, data:, vbscript:) is rejected.
-	function safeUrl(url: string): string | null {
-		const trimmed = url.trim();
-		if (/^(\/|#|\.\/|\.\.\/)/.test(trimmed)) return trimmed;
-		if (/^(https?:|mailto:)/i.test(trimmed)) return trimmed;
-		return null;
-	}
-</script>
-
 <style>
 	.hover-tooltip {
 		position: fixed;

package/dist/components/lsp/LSPEditor.svelte

@@ -12,12 +12,7 @@
 	import { onMount } from 'svelte';
 	import type { EditorPreferences } from '../../types';
 	import type { LSPClient } from '../../services/lsp-client';
-	import type {
-		CompletionItem,
-		Hover,
-		SignatureHelp,
-		Diagnostic
-	} from '../../types/lsp';
+	import type { CompletionItem, Hover, SignatureHelp, Diagnostic } from '../../types/lsp';
 	import type { Cursor } from '../editor/core/multi-cursor';
 	import CustomEditor from '../editor/CustomEditor.svelte';
 	import AutocompleteWidget from './AutocompleteWidget.svelte';
@@ -262,15 +257,13 @@
 			switch (e.key) {
 				case 'ArrowUp':
 					e.preventDefault();
-					completionSelectedIndex = completionSelectedIndex > 0
-						? completionSelectedIndex - 1
-						: completionItems.length - 1;
+					completionSelectedIndex =
+						completionSelectedIndex > 0 ? completionSelectedIndex - 1 : completionItems.length - 1;
 					return;
 				case 'ArrowDown':
 					e.preventDefault();
-					completionSelectedIndex = completionSelectedIndex < completionItems.length - 1
-						? completionSelectedIndex + 1
-						: 0;
+					completionSelectedIndex =
+						completionSelectedIndex < completionItems.length - 1 ? completionSelectedIndex + 1 : 0;
 					return;
 				case 'Enter':
 				case 'Tab':
@@ -369,7 +362,7 @@
 		const gutterWidth = 50; // Approximate
 
 		const x = rect.left + gutterWidth + (cursorColumn - 1) * charWidth;
-		const y = rect.top + (cursorLine) * lineHeight;
+		const y = rect.top + cursorLine * lineHeight;
 
 		return { x, y };
 	}
@@ -459,11 +452,7 @@
 
 	<!-- Hover Tooltip -->
 	{#if showHover && hoverData}
-		<HoverTooltip
-			hover={hoverData}
-			position={hoverPosition}
-			onDismiss={hideHover}
-		/>
+		<HoverTooltip hover={hoverData} position={hoverPosition} onDismiss={hideHover} />
 	{/if}
 
 	<!-- Signature Help -->

package/dist/components/lsp/SignatureHelpWidget.svelte

@@ -18,12 +18,7 @@
 		class?: string;
 	}
 
-	let {
-		signatureHelp,
-		position,
-		onDismiss,
-		class: className = ''
-	}: Props = $props();
+	let { signatureHelp, position, onDismiss, class: className = '' }: Props = $props();
 
 	let activeSignature = $derived(
 		signatureHelp.signatures[signatureHelp.activeSignature ?? 0] as SignatureInformation | undefined
@@ -52,7 +47,11 @@
 		return '';
 	}
 
-	function parseSignatureLabel(sig: SignatureInformation): { before: string; param: string; after: string } {
+	function parseSignatureLabel(sig: SignatureInformation): {
+		before: string;
+		param: string;
+		after: string;
+	} {
 		const params = sig.parameters;
 		if (!params || params.length === 0 || activeParameterIndex >= params.length) {
 			return { before: sig.label, param: '', after: '' };
@@ -116,12 +115,16 @@
 		{@const parsed = parseSignatureLabel(activeSignature)}
 		<div class="signature-help__signature">
 			<code class="signature-help__label">
-				<span class="signature-help__label-before">{parsed.before}</span><span class="signature-help__label-param">{parsed.param}</span><span class="signature-help__label-after">{parsed.after}</span>
+				<span class="signature-help__label-before">{parsed.before}</span><span
+					class="signature-help__label-param">{parsed.param}</span
+				><span class="signature-help__label-after">{parsed.after}</span>
 			</code>
 		</div>
 
 		{#if activeSignature.parameters && activeSignature.parameters[activeParameterIndex]}
-			{@const paramDoc = getParameterDocumentation(activeSignature.parameters[activeParameterIndex])}
+			{@const paramDoc = getParameterDocumentation(
+				activeSignature.parameters[activeParameterIndex]
+			)}
 			{#if paramDoc}
 				<div class="signature-help__param-doc">
 					<span class="signature-help__param-name">

package/dist/components/plugins/PluginCard.svelte

@@ -19,13 +19,7 @@
 		onUninstall?: () => void;
 	}
 
-	let {
-		plugin,
-		installed = false,
-		showStatus = false,
-		onInstall,
-		onUninstall
-	}: Props = $props();
+	let { plugin, installed = false, showStatus = false, onInstall, onUninstall }: Props = $props();
 
 	function getStatusVariant(
 		status: PluginStatus
@@ -72,13 +66,9 @@
 	</div>
 	<div class="plugin-card__actions">
 		{#if installed}
-			<Button variant="danger" size="xs" onclick={onUninstall}>
-				Uninstall
-			</Button>
+			<Button variant="danger" size="xs" onclick={onUninstall}>Uninstall</Button>
 		{:else if plugin.status === 'deployed'}
-			<Button variant="primary" size="xs" onclick={onInstall}>
-				Install
-			</Button>
+			<Button variant="primary" size="xs" onclick={onInstall}>Install</Button>
 		{/if}
 	</div>
 </div>