@nocturnium/svelte-ide 1.0.0 → 1.0.1

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>

package/dist/components/plugins/PluginProposalForm.svelte

@@ -69,7 +69,12 @@
 	}
 </script>
 
-<div class="plugin-form-overlay" onclick={onClose} onkeydown={(e) => e.key === 'Escape' && onClose()} role="presentation">
+<div
+	class="plugin-form-overlay"
+	onclick={onClose}
+	onkeydown={(e) => e.key === 'Escape' && onClose()}
+	role="presentation"
+>
 	<div
 		class="plugin-form"
 		onclick={(e) => e.stopPropagation()}
@@ -85,7 +90,13 @@
 			</Button>
 		</div>
 
-		<form class="plugin-form__content" onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
+		<form
+			class="plugin-form__content"
+			onsubmit={(e) => {
+				e.preventDefault();
+				handleSubmit();
+			}}
+		>
 			{#if error}
 				<div class="plugin-form__error">
 					<Icon name="error" size={14} />
@@ -95,12 +106,7 @@
 
 			<div class="plugin-form__field">
 				<label for="name">Name *</label>
-				<Input
-					id="name"
-					bind:value={name}
-					placeholder="my-awesome-plugin"
-					fullWidth
-				/>
+				<Input id="name" bind:value={name} placeholder="my-awesome-plugin" fullWidth />
 			</div>
 
 			<div class="plugin-form__field">
@@ -116,11 +122,7 @@
 
 			<div class="plugin-form__field">
 				<label for="category">Category</label>
-				<select
-					id="category"
-					class="plugin-form__select"
-					bind:value={category}
-				>
+				<select id="category" class="plugin-form__select" bind:value={category}>
 					{#each categories as cat (cat.value)}
 						<option value={cat.value}>{cat.label}</option>
 					{/each}
@@ -129,31 +131,17 @@
 
 			<div class="plugin-form__field">
 				<label for="tags">Tags</label>
-				<Input
-					id="tags"
-					bind:value={tags}
-					placeholder="comma, separated, tags"
-					fullWidth
-				/>
+				<Input id="tags" bind:value={tags} placeholder="comma, separated, tags" fullWidth />
 			</div>
 
 			<div class="plugin-form__field">
 				<label for="author">Author *</label>
-				<Input
-					id="author"
-					bind:value={author}
-					placeholder="your@email.com"
-					fullWidth
-				/>
+				<Input id="author" bind:value={author} placeholder="your@email.com" fullWidth />
 			</div>
 
 			<div class="plugin-form__actions">
-				<Button variant="ghost" onclick={onClose} disabled={isSubmitting}>
-					Cancel
-				</Button>
-				<Button variant="primary" type="submit" loading={isSubmitting}>
-					Create Proposal
-				</Button>
+				<Button variant="ghost" onclick={onClose} disabled={isSubmitting}>Cancel</Button>
+				<Button variant="primary" type="submit" loading={isSubmitting}>Create Proposal</Button>
 			</div>
 		</form>
 	</div>

package/dist/components/vfs/LockConflictDialog.svelte

@@ -111,7 +111,14 @@
 			<!-- Header -->
 			<header class="lock-dialog__header">
 				<div class="lock-dialog__icon">
-					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<svg
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
 						<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
 						<path d="M7 11V7a5 5 0 0 1 10 0v4" />
 					</svg>
@@ -120,11 +127,7 @@
 					<h2 id="lock-dialog-title">File is Locked</h2>
 					<p class="lock-dialog__filename">{fileName}</p>
 				</div>
-				<button
-					class="lock-dialog__close"
-					onclick={onClose}
-					aria-label="Close dialog"
-				>
+				<button class="lock-dialog__close" onclick={onClose} aria-label="Close dialog">
 					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 						<path d="M18 6 6 18M6 6l12 12" />
 					</svg>
@@ -158,7 +161,14 @@
 							{/if}
 						</div>
 						<div class="lock-holder__timer">
-							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+							<svg
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								width="14"
+								height="14"
+							>
 								<circle cx="12" cy="12" r="10" />
 								<polyline points="12 6 12 12 16 14" />
 							</svg>
@@ -170,7 +180,14 @@
 				<!-- Error message -->
 				{#if errorMessage}
 					<div class="lock-dialog__error" role="alert">
-						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
+						<svg
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							width="16"
+							height="16"
+						>
 							<circle cx="12" cy="12" r="10" />
 							<line x1="12" y1="8" x2="12" y2="12" />
 							<line x1="12" y1="16" x2="12.01" y2="16" />
@@ -183,7 +200,14 @@
 				<div class="lock-dialog__reassurance">
 					{#if pendingChanges > 0}
 						<div class="reassurance-item reassurance-item--saved">
-							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+							<svg
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								width="14"
+								height="14"
+							>
 								<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
 								<polyline points="22 4 12 14.01 9 11.01" />
 							</svg>
@@ -192,7 +216,14 @@
 					{/if}
 					{#if lastSyncDisplay}
 						<div class="reassurance-item">
-							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+							<svg
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								width="14"
+								height="14"
+							>
 								<polyline points="23 4 23 10 17 10" />
 								<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
 							</svg>
@@ -207,11 +238,15 @@
 				<!-- Safe options row -->
 				<div class="action-row action-row--safe">
 					{#if onOpenReadOnly}
-						<button
-							class="action-btn action-btn--safe"
-							onclick={onOpenReadOnly}
-						>
-							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
+						<button class="action-btn action-btn--safe" onclick={onOpenReadOnly}>
+							<svg
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								width="18"
+								height="18"
+							>
 								<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
 								<circle cx="12" cy="12" r="3" />
 							</svg>
@@ -219,11 +254,15 @@
 						</button>
 					{/if}
 					{#if onWait}
-						<button
-							class="action-btn action-btn--safe"
-							onclick={onWait}
-						>
-							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
+						<button class="action-btn action-btn--safe" onclick={onWait}>
+							<svg
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								width="18"
+								height="18"
+							>
 								<circle cx="12" cy="12" r="10" />
 								<polyline points="12 6 12 12 16 14" />
 							</svg>
@@ -234,11 +273,15 @@
 
 				<!-- Primary action -->
 				{#if onRequestAccess}
-					<button
-						class="action-btn action-btn--primary"
-						onclick={onRequestAccess}
-					>
-						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
+					<button class="action-btn action-btn--primary" onclick={onRequestAccess}>
+						<svg
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							width="18"
+							height="18"
+						>
 							<line x1="22" y1="2" x2="11" y2="13" />
 							<polygon points="22 2 15 22 11 13 2 9 22 2" />
 						</svg>
@@ -250,27 +293,30 @@
 				<!-- Dangerous action (gated) -->
 				{#if canForceUnlock && onForceUnlock}
 					{#if !showForceSection}
-						<button
-							class="action-toggle"
-							onclick={() => showForceSection = true}
-						>
+						<button class="action-toggle" onclick={() => (showForceSection = true)}>
 							More options...
 						</button>
 					{:else}
 						<div class="force-section">
 							<div class="force-warning">
-								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
-									<path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+								<svg
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									width="16"
+									height="16"
+								>
+									<path
+										d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+									/>
 									<line x1="12" y1="9" x2="12" y2="13" />
 									<line x1="12" y1="17" x2="12.01" y2="17" />
 								</svg>
 								<span>Force unlock may cause data loss for the current editor</span>
 							</div>
 							<label class="force-confirm">
-								<input
-									type="checkbox"
-									bind:checked={forceUnlockConfirmed}
-								/>
+								<input type="checkbox" bind:checked={forceUnlockConfirmed} />
 								<span>I understand the risks</span>
 							</label>
 							<button
@@ -278,7 +324,14 @@
 								onclick={handleForceUnlock}
 								disabled={!forceUnlockConfirmed}
 							>
-								<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
+								<svg
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									width="18"
+									height="18"
+								>
 									<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
 									<path d="M7 11V7a5 5 0 0 1 9.9-1" />
 								</svg>
@@ -291,9 +344,7 @@
 
 			<!-- Footer -->
 			<footer class="lock-dialog__footer">
-				<button class="cancel-btn" onclick={onClose}>
-					Cancel
-				</button>
+				<button class="cancel-btn" onclick={onClose}> Cancel </button>
 			</footer>
 		</div>
 	</div>
@@ -314,8 +365,12 @@
 	}
 
 	@keyframes fade-in {
-		from { opacity: 0; }
-		to { opacity: 1; }
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
 	}
 
 	.lock-dialog {
@@ -324,14 +379,22 @@
 		background: var(--ide-bg-secondary);
 		border: 1px solid var(--ide-border);
 		border-radius: var(--ide-radius-xl);
-		box-shadow: var(--ide-shadow-xl), 0 0 60px rgba(0, 0, 0, 0.3);
+		box-shadow:
+			var(--ide-shadow-xl),
+			0 0 60px rgba(0, 0, 0, 0.3);
 		animation: slide-up 0.2s ease-out;
 		overflow: hidden;
 	}
 
 	@keyframes slide-up {
-		from { opacity: 0; transform: translateY(20px) scale(0.98); }
-		to { opacity: 1; transform: translateY(0) scale(1); }
+		from {
+			opacity: 0;
+			transform: translateY(20px) scale(0.98);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
 	}
 
 	/* Header */
@@ -558,7 +621,11 @@
 	.action-btn--primary {
 		flex-direction: column;
 		gap: 4px;
-		background: linear-gradient(135deg, var(--ide-interactive) 0%, var(--ide-interactive-active) 100%);
+		background: linear-gradient(
+			135deg,
+			var(--ide-interactive) 0%,
+			var(--ide-interactive-active) 100%
+		);
 		color: white;
 		padding: 14px 16px;
 	}

package/dist/components/vfs/LockIndicator.svelte

@@ -81,7 +81,6 @@
 		if (minutes > 0) return `${minutes}:${seconds.toString().padStart(2, '0')}`;
 		return `${seconds}s`;
 	}
-
 </script>
 
 {#if status.status !== 'unlocked'}