@nocturnium/svelte-ide 1.0.0-rc.1 → 1.0.1

package/README.md

@@ -50,17 +50,13 @@ without the design tokens):
 
 ```svelte
 <script>
-  import { CustomEditor } from '@nocturnium/svelte-ide';
-  import '@nocturnium/svelte-ide/theme.css';
+	import { CustomEditor } from '@nocturnium/svelte-ide';
+	import '@nocturnium/svelte-ide/theme.css';
 
-  let code = $state('function hello() {\n  console.log("world");\n}');
+	let code = $state('function hello() {\n  console.log("world");\n}');
 </script>
 
-<CustomEditor
-  content={code}
-  language="javascript"
-  onChange={(value) => (code = value)}
-/>
+<CustomEditor content={code} language="javascript" onChange={(value) => (code = value)} />
 ```
 
 `<CustomEditor>` also accepts `readonly`, `folding`, `multiCursor`, `maxCursors`,
@@ -83,24 +79,24 @@ to enumerate them at runtime.
 
 ```svelte
 <script>
-  import { LSPEditor, createLSPClient } from '@nocturnium/svelte-ide';
-  import '@nocturnium/svelte-ide/theme.css';
+	import { LSPEditor, createLSPClient } from '@nocturnium/svelte-ide';
+	import '@nocturnium/svelte-ide/theme.css';
 
-  const client = createLSPClient({
-    serverUrl: 'ws://localhost:8765/lsp?language=typescript',
-    rootUri: 'file:///workspace',
-  });
+	const client = createLSPClient({
+		serverUrl: 'ws://localhost:8765/lsp?language=typescript',
+		rootUri: 'file:///workspace'
+	});
 
-  let code = $state('const greeting: string = "hi";');
+	let code = $state('const greeting: string = "hi";');
 </script>
 
 <LSPEditor
-  content={code}
-  uri="file:///workspace/main.ts"
-  language="typescript"
-  lspClient={client}
-  onChange={(value) => (code = value)}
-  onDiagnostics={(diagnostics) => console.log(diagnostics)}
+	content={code}
+	uri="file:///workspace/main.ts"
+	language="typescript"
+	lspClient={client}
+	onChange={(value) => (code = value)}
+	onDiagnostics={(diagnostics) => console.log(diagnostics)}
 />
 ```
 
@@ -112,18 +108,18 @@ You supply the LSP bridge. A ready-to-run Go WebSocket bridge lives in
 
 ```svelte
 <script>
-  import { CollaborativeEditor } from '@nocturnium/svelte-ide';
-  import '@nocturnium/svelte-ide/theme.css';
-  // requires: npm install yjs y-websocket y-protocols
+	import { CollaborativeEditor } from '@nocturnium/svelte-ide';
+	import '@nocturnium/svelte-ide/theme.css';
+	// requires: npm install yjs y-websocket y-protocols
 
-  let content = $state('');
+	let content = $state('');
 </script>
 
 <CollaborativeEditor
-  documentId="room-1"
-  initialContent="// edit together"
-  language="javascript"
-  onChange={(value) => (content = value)}
+	documentId="room-1"
+	initialContent="// edit together"
+	language="javascript"
+	onChange={(value) => (content = value)}
 />
 ```
 
@@ -134,8 +130,8 @@ See the [Collaboration guide](https://github.com/nocturnium/svelte-ide/blob/main
 
 ```svelte
 <script>
-  import { AIPanel } from '@nocturnium/svelte-ide';
-  import '@nocturnium/svelte-ide/theme.css';
+	import { AIPanel } from '@nocturnium/svelte-ide';
+	import '@nocturnium/svelte-ide/theme.css';
 </script>
 
 <AIPanel />
@@ -152,22 +148,22 @@ The package root exposes the **stable core**. Backend-dependent and
 experimental subsystems live behind dedicated subpaths — this keeps intent
 explicit and tree-shaking clean.
 
-| Import | Contents |
-| --- | --- |
-| `@nocturnium/svelte-ide` | Stable core: editors, layout shell, file explorer, core UI primitives, editor/language/tokenizer/theme utilities, LSP client, layout-store functions, public types |
-| `@nocturnium/svelte-ide/theme.css` | Default theme (design tokens + component styles) |
-| `.../components/editor` | `CustomEditor`, `Editor`, `EditorPane`, `EditorTabs`, … |
-| `.../components/core` | `Button`, `Icon`, `Input`, `Tooltip`, `ResizeHandle`, … |
-| `.../components/ai` | `AIPanel`, `AIMessage`, `AIInlineEdit`, … |
-| `.../components/lsp` | `LSPEditor`, `AutocompleteWidget`, `HoverTooltip`, … |
-| `.../components/agents` | `AgentAvatar`, `AgentActivityPanel`, `AgentCursor`, … |
-| `.../components/vfs` | `LockIndicator`, `LockConflictDialog`, … |
-| `.../components/layout` | `IDELayout`, `StatusBar` |
-| `.../components/plugins` | `PluginPanel`, `PluginCard`, … |
-| `.../stores` | Full Svelte 5 runes store surface (layout, editor, ai, plugin, …) |
-| `.../plugins` | Plugin runtime (`createPluginLoader`, `definePlugin`, `defineCommand`, `definePanel`, `pluginRegistry`) |
-| `.../crdt` | CRDT collaboration primitives (requires Yjs) |
-| `.../types`, `.../utils` | Full type and helper-function surface |
+| Import                             | Contents                                                                                                                                                           |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `@nocturnium/svelte-ide`           | Stable core: editors, layout shell, file explorer, core UI primitives, editor/language/tokenizer/theme utilities, LSP client, layout-store functions, public types |
+| `@nocturnium/svelte-ide/theme.css` | Default theme (design tokens + component styles)                                                                                                                   |
+| `.../components/editor`            | `CustomEditor`, `Editor`, `EditorPane`, `EditorTabs`, …                                                                                                            |
+| `.../components/core`              | `Button`, `Icon`, `Input`, `Tooltip`, `ResizeHandle`, …                                                                                                            |
+| `.../components/ai`                | `AIPanel`, `AIMessage`, `AIInlineEdit`, …                                                                                                                          |
+| `.../components/lsp`               | `LSPEditor`, `AutocompleteWidget`, `HoverTooltip`, …                                                                                                               |
+| `.../components/agents`            | `AgentAvatar`, `AgentActivityPanel`, `AgentCursor`, …                                                                                                              |
+| `.../components/vfs`               | `LockIndicator`, `LockConflictDialog`, …                                                                                                                           |
+| `.../components/layout`            | `IDELayout`, `StatusBar`                                                                                                                                           |
+| `.../components/plugins`           | `PluginPanel`, `PluginCard`, …                                                                                                                                     |
+| `.../stores`                       | Full Svelte 5 runes store surface (layout, editor, ai, plugin, …)                                                                                                  |
+| `.../plugins`                      | Plugin runtime (`createPluginLoader`, `definePlugin`, `defineCommand`, `definePanel`, `pluginRegistry`)                                                            |
+| `.../crdt`                         | CRDT collaboration primitives (requires Yjs)                                                                                                                       |
+| `.../types`, `.../utils`           | Full type and helper-function surface                                                                                                                              |
 
 ## API Stability
 

package/dist/components/agents/AgentActivityPanel.svelte

@@ -57,7 +57,9 @@
 		selectedAgentId ? activities.filter((a) => a.agentId === selectedAgentId) : activities
 	);
 
-	let onlineCount = $derived(agents.filter((a) => a.status === 'online' || a.status === 'busy').length);
+	let onlineCount = $derived(
+		agents.filter((a) => a.status === 'online' || a.status === 'busy').length
+	);
 	let busyCount = $derived(agents.filter((a) => a.status === 'busy').length);
 
 	function formatTime(timestamp: string): string {

package/dist/components/agents/AgentAvatar.svelte

@@ -52,20 +52,25 @@
 		if (!agent.currentTask?.progress.phase) return null;
 		const phase = agent.currentTask.progress.phase;
 		switch (phase) {
-			case 'planning': return 'Planning...';
-			case 'implementing': return 'Coding...';
-			case 'testing': return 'Testing...';
-			case 'complete': return 'Done';
-			default: return phase;
+			case 'planning':
+				return 'Planning...';
+			case 'implementing':
+				return 'Coding...';
+			case 'testing':
+				return 'Testing...';
+			case 'complete':
+				return 'Done';
+			default:
+				return phase;
 		}
 	});
 
 	// Is this an AI agent?
 	let isAI = $derived(
 		agent.type === 'coder' ||
-		agent.type === 'reviewer' ||
-		agent.type === 'tester' ||
-		agent.type === 'architect'
+			agent.type === 'reviewer' ||
+			agent.type === 'tester' ||
+			agent.type === 'architect'
 	);
 
 	// Unique ID for SVG gradients
@@ -93,10 +98,10 @@
 			</linearGradient>
 			<!-- Glow filter -->
 			<filter id="glow-{agent.id.slice(0, 8)}" x="-50%" y="-50%" width="200%" height="200%">
-				<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
+				<feGaussianBlur stdDeviation="2" result="coloredBlur" />
 				<feMerge>
-					<feMergeNode in="coloredBlur"/>
-					<feMergeNode in="SourceGraphic"/>
+					<feMergeNode in="coloredBlur" />
+					<feMergeNode in="SourceGraphic" />
 				</feMerge>
 			</filter>
 		</defs>
@@ -159,30 +164,65 @@
 			<div class="agent-avatar__badge-inner">
 				{#if agent.type === 'coder'}
 					<!-- Code brackets icon -->
-					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+					<svg
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
 						<polyline points="16 18 22 12 16 6" />
 						<polyline points="8 6 2 12 8 18" />
 					</svg>
 				{:else if agent.type === 'reviewer'}
 					<!-- Checkmark icon -->
-					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+					<svg
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
 						<polyline points="20 6 9 17 4 12" />
 					</svg>
 				{:else if agent.type === 'tester'}
 					<!-- Flask icon -->
-					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+					<svg
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
 						<path d="M9 3h6v6l4 9H5l4-9V3z" />
 						<path d="M9 3h6" />
 					</svg>
 				{:else if agent.type === 'architect'}
 					<!-- Blueprint/compass icon -->
-					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+					<svg
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
 						<circle cx="12" cy="12" r="10" />
 						<polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" />
 					</svg>
 				{:else}
 					<!-- User icon -->
-					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+					<svg
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
 						<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
 						<circle cx="12" cy="7" r="4" />
 					</svg>
@@ -230,8 +270,13 @@
 	}
 
 	@keyframes avatar-breathe {
-		0%, 100% { transform: scale(1); }
-		50% { transform: scale(1.02); }
+		0%,
+		100% {
+			transform: scale(1);
+		}
+		50% {
+			transform: scale(1.02);
+		}
 	}
 
 	/* Status Ring */
@@ -274,7 +319,8 @@
 	}
 
 	@keyframes ring-pulse {
-		0%, 100% {
+		0%,
+		100% {
 			opacity: 1;
 			box-shadow: 0 0 8px color-mix(in srgb, var(--ide-agent-online) 40%, transparent);
 		}
@@ -285,18 +331,34 @@
 	}
 
 	@keyframes ring-spin {
-		from { transform: rotate(0deg); }
-		to { transform: rotate(360deg); }
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
 	}
 
 	@keyframes ring-error {
-		0%, 100% { opacity: 1; transform: scale(1); }
-		50% { opacity: 0.6; transform: scale(1.05); }
+		0%,
+		100% {
+			opacity: 1;
+			transform: scale(1);
+		}
+		50% {
+			opacity: 0.6;
+			transform: scale(1.05);
+		}
 	}
 
 	@keyframes ring-stalled {
-		0%, 100% { opacity: 0.8; }
-		50% { opacity: 0.3; }
+		0%,
+		100% {
+			opacity: 0.8;
+		}
+		50% {
+			opacity: 0.3;
+		}
 	}
 
 	/* Progress Ring */
@@ -361,8 +423,13 @@
 	}
 
 	@keyframes badge-shimmer {
-		0%, 100% { background-position: 0% 50%; }
-		50% { background-position: 100% 50%; }
+		0%,
+		100% {
+			background-position: 0% 50%;
+		}
+		50% {
+			background-position: 100% 50%;
+		}
 	}
 
 	/* Badge Glow */
@@ -380,8 +447,15 @@
 	}
 
 	@keyframes glow-pulse {
-		0%, 100% { opacity: 0.5; transform: scale(1); }
-		50% { opacity: 1; transform: scale(1.3); }
+		0%,
+		100% {
+			opacity: 0.5;
+			transform: scale(1);
+		}
+		50% {
+			opacity: 1;
+			transform: scale(1.3);
+		}
 	}
 
 	/* Phase Label */
@@ -394,15 +468,33 @@
 	}
 
 	@keyframes phase-fade-in {
-		from { opacity: 0; transform: translateY(-4px); }
-		to { opacity: 1; transform: translateY(0); }
+		from {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
 	}
 
 	/* Size-specific adjustments */
-	.agent-avatar--xs .agent-avatar__ring { inset: -2px; border-width: 1.5px; }
-	.agent-avatar--sm .agent-avatar__ring { inset: -2px; border-width: 1.5px; }
-	.agent-avatar--lg .agent-avatar__ring { inset: -4px; border-width: 2.5px; }
-	.agent-avatar--xl .agent-avatar__ring { inset: -4px; border-width: 3px; }
+	.agent-avatar--xs .agent-avatar__ring {
+		inset: -2px;
+		border-width: 1.5px;
+	}
+	.agent-avatar--sm .agent-avatar__ring {
+		inset: -2px;
+		border-width: 1.5px;
+	}
+	.agent-avatar--lg .agent-avatar__ring {
+		inset: -4px;
+		border-width: 2.5px;
+	}
+	.agent-avatar--xl .agent-avatar__ring {
+		inset: -4px;
+		border-width: 3px;
+	}
 
 	/* Hover state */
 	.agent-avatar:hover .agent-avatar__inner {

package/dist/components/agents/AgentCursor.svelte

@@ -9,7 +9,7 @@
 	 * - Typing indicator animation
 	 */
 
-	import type { Agent, AgentCursor as AgentCursorType, CursorPosition, CursorSelection } from '../../types';
+	import type { Agent, CursorPosition, CursorSelection } from '../../types';
 
 	interface Props {
 		/** The agent this cursor belongs to */
@@ -56,7 +56,9 @@
 
 	// Calculate selection dimensions if present
 	let hasSelection = $derived(
-		selection && (selection.start.line !== selection.end.line || selection.start.column !== selection.end.column)
+		selection &&
+			(selection.start.line !== selection.end.line ||
+				selection.start.column !== selection.end.column)
 	);
 
 	function getSelectionStyle() {
@@ -64,10 +66,18 @@
 
 		const startLine = Math.min(selection.start.line, selection.end.line);
 		const endLine = Math.max(selection.start.line, selection.end.line);
-		const startCol = selection.start.line < selection.end.line ? selection.start.column :
-			(selection.start.line === selection.end.line ? Math.min(selection.start.column, selection.end.column) : selection.end.column);
-		const endCol = selection.start.line < selection.end.line ? selection.end.column :
-			(selection.start.line === selection.end.line ? Math.max(selection.start.column, selection.end.column) : selection.start.column);
+		const startCol =
+			selection.start.line < selection.end.line
+				? selection.start.column
+				: selection.start.line === selection.end.line
+					? Math.min(selection.start.column, selection.end.column)
+					: selection.end.column;
+		const endCol =
+			selection.start.line < selection.end.line
+				? selection.end.column
+				: selection.start.line === selection.end.line
+					? Math.max(selection.start.column, selection.end.column)
+					: selection.start.column;
 
 		// For single line selection
 		if (startLine === endLine) {

package/dist/components/agents/AgentPresenceBar.svelte

@@ -45,7 +45,6 @@
 	let overflowCount = $derived(Math.max(0, activeAgents.length - maxVisible));
 
 	// Group by status for summary
-	let onlineCount = $derived(agents.filter((a) => a.status === 'online').length);
 	let busyCount = $derived(agents.filter((a) => a.status === 'busy').length);
 	let stalledCount = $derived(agents.filter((a) => a.status === 'stalled').length);
 </script>
@@ -58,7 +57,10 @@
 	{#if activeAgents.length > 0}
 		<div class="presence-bar__avatars">
 			{#each visibleAgents as agent, i (agent.id)}
-				<Tooltip content="{agent.name} ({agent.status})" position={orientation === 'vertical' ? 'right' : 'bottom'}>
+				<Tooltip
+					content="{agent.name} ({agent.status})"
+					position={orientation === 'vertical' ? 'right' : 'bottom'}
+				>
 					<button
 						class="presence-bar__avatar"
 						style="--index: {i}; --total: {visibleAgents.length}"
@@ -147,7 +149,9 @@
 		background: transparent;
 		padding: 0;
 		cursor: pointer;
-		transition: transform var(--ide-transition-fast), z-index var(--ide-transition-fast);
+		transition:
+			transform var(--ide-transition-fast),
+			z-index var(--ide-transition-fast);
 	}
 
 	/* Stacked effect for horizontal - overlap avatars */

package/dist/components/ai/AIConversationList.svelte

@@ -19,16 +19,8 @@
 		onExport?: (conversation: AIConversation, format: 'json' | 'md') => void;
 	}
 
-	let {
-		conversations,
-		activeId,
-		onSelect,
-		onNew,
-		onDelete,
-		onRename,
-		onStar,
-		onExport
-	}: Props = $props();
+	let { conversations, activeId, onSelect, onNew, onDelete, onRename, onStar, onExport }: Props =
+		$props();
 
 	let searchQuery = $state('');
 	let filter = $state<'all' | 'starred' | 'today'>('all');
@@ -78,6 +70,7 @@
 		if (filter === 'starred') {
 			result = result.filter((c) => c.starred);
 		} else if (filter === 'today') {
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity -- temporary comparison value, not reactive UI state
 			const today = new Date();
 			today.setHours(0, 0, 0, 0);
 			result = result.filter((c) => new Date(c.updatedAt) >= today);
@@ -137,21 +130,12 @@
 
 	<!-- Search -->
 	<div class="list-search">
-		<Input
-			type="search"
-			placeholder="Search conversations..."
-			bind:value={searchQuery}
-			size="sm"
-		/>
+		<Input type="search" placeholder="Search conversations..." bind:value={searchQuery} size="sm" />
 	</div>
 
 	<!-- Filters -->
 	<div class="list-filters">
-		<button
-			class="filter-btn"
-			class:active={filter === 'all'}
-			onclick={() => (filter = 'all')}
-		>
+		<button class="filter-btn" class:active={filter === 'all'} onclick={() => (filter = 'all')}>
 			All
 		</button>
 		<button
@@ -162,11 +146,7 @@
 			<Icon name="star" size={12} />
 			Starred
 		</button>
-		<button
-			class="filter-btn"
-			class:active={filter === 'today'}
-			onclick={() => (filter = 'today')}
-		>
+		<button class="filter-btn" class:active={filter === 'today'} onclick={() => (filter = 'today')}>
 			Today
 		</button>
 	</div>
@@ -208,7 +188,10 @@
 					<div class="item-actions" bind:this={menuRef}>
 						<button
 							class="action-trigger"
-							onclick={(e) => { e.stopPropagation(); toggleMenu(conv.id); }}
+							onclick={(e) => {
+								e.stopPropagation();
+								toggleMenu(conv.id);
+							}}
 							aria-label="Conversation options"
 							aria-expanded={menuOpenId === conv.id}
 							aria-haspopup="menu"
@@ -219,7 +202,13 @@
 						{#if menuOpenId === conv.id}
 							<div class="action-menu" role="menu" aria-label="Conversation actions">
 								{#if onStar}
-									<button role="menuitem" onclick={() => { onStar(conv, !conv.starred); menuOpenId = null; }}>
+									<button
+										role="menuitem"
+										onclick={() => {
+											onStar(conv, !conv.starred);
+											menuOpenId = null;
+										}}
+									>
 										<Icon name={conv.starred ? 'star-off' : 'star'} size={14} />
 										{conv.starred ? 'Unstar' : 'Star'}
 									</button>
@@ -231,17 +220,36 @@
 									</button>
 								{/if}
 								{#if onExport}
-									<button role="menuitem" onclick={() => { onExport(conv, 'md'); menuOpenId = null; }}>
+									<button
+										role="menuitem"
+										onclick={() => {
+											onExport(conv, 'md');
+											menuOpenId = null;
+										}}
+									>
 										<Icon name="download" size={14} />
 										Export Markdown
 									</button>
-									<button role="menuitem" onclick={() => { onExport(conv, 'json'); menuOpenId = null; }}>
+									<button
+										role="menuitem"
+										onclick={() => {
+											onExport(conv, 'json');
+											menuOpenId = null;
+										}}
+									>
 										<Icon name="code" size={14} />
 										Export JSON
 									</button>
 								{/if}
 								{#if onDelete}
-									<button role="menuitem" class="danger" onclick={() => { onDelete(conv); menuOpenId = null; }}>
+									<button
+										role="menuitem"
+										class="danger"
+										onclick={() => {
+											onDelete(conv);
+											menuOpenId = null;
+										}}
+									>
 										<Icon name="trash" size={14} />
 										Delete
 									</button>
@@ -261,9 +269,7 @@
 					<p>No conversations today</p>
 				{:else}
 					<p>No conversations yet</p>
-					<Button variant="primary" size="sm" onclick={onNew}>
-						Start a conversation
-					</Button>
+					<Button variant="primary" size="sm" onclick={onNew}>Start a conversation</Button>
 				{/if}
 			</div>
 		{/each}

package/dist/components/ai/AIInlineEdit.svelte

@@ -17,6 +17,8 @@
 		class: className = ''
 	}: Props = $props();
 
+	// Seeded once from the prop: this is the editable input buffer, mounted fresh per edit.
+	// svelte-ignore state_referenced_locally
 	let prompt = $state(initialPrompt);
 	let isSubmitting = $state(false);
 
@@ -40,6 +42,9 @@
 	}
 </script>
 
+<!-- Wrapper-level keydown only captures Escape / Cmd+Enter shortcuts; the real controls
+	 (textarea, buttons) inside are the focusable interactive elements. -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div class="ai-inline-edit {className}" onkeydown={handleKeydown}>
 	<div class="ai-inline-edit__header">
 		<Icon name="sparkles" size={14} />
@@ -63,9 +68,7 @@
 	</div>
 
 	<div class="ai-inline-edit__actions">
-		<Button variant="ghost" size="sm" onclick={onCancel} disabled={isSubmitting}>
-			Cancel
-		</Button>
+		<Button variant="ghost" size="sm" onclick={onCancel} disabled={isSubmitting}>Cancel</Button>
 		<Button
 			variant="primary"
 			size="sm"
@@ -75,7 +78,7 @@
 			{#if isSubmitting}
 				<Spinner size="xs" />
 			{:else}
-				{#snippet icon()}<Icon name="wand" size={14} />{/snippet}
+				{#snippet _icon()}<Icon name="wand" size={14} />{/snippet}
 			{/if}
 			Apply
 		</Button>