@nocturnium/svelte-ide 1.0.0 → 1.0.2

package/dist/components/editor/Breadcrumbs.svelte

@@ -5,7 +5,19 @@
 		/** Display name */
 		name: string;
 		/** Symbol type */
-		type: 'file' | 'module' | 'namespace' | 'class' | 'interface' | 'function' | 'method' | 'property' | 'variable' | 'constant' | 'enum' | 'block';
+		type:
+			| 'file'
+			| 'module'
+			| 'namespace'
+			| 'class'
+			| 'interface'
+			| 'function'
+			| 'method'
+			| 'property'
+			| 'variable'
+			| 'constant'
+			| 'enum'
+			| 'block';
 		/** Line number (0-based) */
 		line: number;
 		/** Column number */
@@ -211,7 +223,10 @@
 				</span>
 				<span class="breadcrumb-label">{symbol.name}</span>
 				{#if symbol.siblings && symbol.siblings.length > 0}
-					<span class="breadcrumb-chevron" class:breadcrumb-chevron--open={activeDropdown === symbol.id}>
+					<span
+						class="breadcrumb-chevron"
+						class:breadcrumb-chevron--open={activeDropdown === symbol.id}
+					>
 						▾
 					</span>
 				{/if}
@@ -233,10 +248,7 @@
 								class:dropdown-item--current={sibling.id === symbol.id}
 								onclick={() => handleSiblingSelect(sibling)}
 							>
-								<span
-									class="dropdown-icon"
-									style="color: {typeColors[sibling.type]};"
-								>
+								<span class="dropdown-icon" style="color: {typeColors[sibling.type]};">
 									{typeIcons[sibling.type]}
 								</span>
 								<span class="dropdown-label">{sibling.name}</span>

package/dist/components/editor/BreakpointLayer.svelte

@@ -1,3 +1,28 @@
+<script module lang="ts">
+	function getBreakpointTitle(bp: Breakpoint): string {
+		let title = `Breakpoint at line ${bp.line + 1}`;
+		if (bp.condition) {
+			title += `\nCondition: ${bp.condition}`;
+		}
+		if (bp.logMessage) {
+			title += `\nLog: ${bp.logMessage}`;
+		}
+		if (bp.hitCondition) {
+			title += `\nHit condition: ${bp.hitCondition}`;
+		}
+		if (bp.hitCount > 0) {
+			title += `\nHit count: ${bp.hitCount}`;
+		}
+		if (bp.state === 'disabled') {
+			title += '\n(Disabled)';
+		}
+		if (bp.errorMessage) {
+			title += `\nError: ${bp.errorMessage}`;
+		}
+		return title;
+	}
+</script>
+
 <script lang="ts">
 	/**
 	 * Breakpoint Layer
@@ -41,7 +66,10 @@
 	}: Props = $props();
 
 	let breakpoints = $state<Breakpoint[]>([]);
-	let contextMenu = $state<{ breakpoint: Breakpoint; position: { top: number; left: number } } | null>(null);
+	let contextMenu = $state<{
+		breakpoint: Breakpoint;
+		position: { top: number; left: number };
+	} | null>(null);
 	let editingBreakpoint = $state<Breakpoint | null>(null);
 	let conditionInput = $state('');
 	let logMessageInput = $state('');
@@ -264,35 +292,20 @@
 			class="breakpoint-context-menu"
 			style="top: {contextMenu.position.top}px; left: {contextMenu.position.left}px;"
 		>
-			<button
-				class="menu-item"
-				onclick={() => handleContextAction('toggle')}
-			>
+			<button class="menu-item" onclick={() => handleContextAction('toggle')}>
 				{contextMenu.breakpoint.state === 'disabled' ? 'Enable' : 'Disable'} Breakpoint
 			</button>
-			<button
-				class="menu-item"
-				onclick={() => handleContextAction('remove')}
-			>
+			<button class="menu-item" onclick={() => handleContextAction('remove')}>
 				Remove Breakpoint
 			</button>
 			<div class="menu-divider"></div>
-			<button
-				class="menu-item"
-				onclick={() => handleContextAction('condition')}
-			>
+			<button class="menu-item" onclick={() => handleContextAction('condition')}>
 				Edit Condition...
 			</button>
-			<button
-				class="menu-item"
-				onclick={() => handleContextAction('logpoint')}
-			>
+			<button class="menu-item" onclick={() => handleContextAction('logpoint')}>
 				Edit Log Message...
 			</button>
-			<button
-				class="menu-item"
-				onclick={() => handleContextAction('hitCondition')}
-			>
+			<button class="menu-item" onclick={() => handleContextAction('hitCondition')}>
 				Edit Hit Count...
 			</button>
 		</div>
@@ -300,8 +313,19 @@
 
 	<!-- Edit dialog -->
 	{#if editingBreakpoint}
-		<div class="breakpoint-edit-overlay" role="presentation" onclick={cancelEdit} onkeydown={(e) => e.key === 'Escape' && cancelEdit()}>
-			<div class="breakpoint-edit-dialog" role="dialog" tabindex={-1} onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
+		<div
+			class="breakpoint-edit-overlay"
+			role="presentation"
+			onclick={cancelEdit}
+			onkeydown={(e) => e.key === 'Escape' && cancelEdit()}
+		>
+			<div
+				class="breakpoint-edit-dialog"
+				role="dialog"
+				tabindex={-1}
+				onclick={(e) => e.stopPropagation()}
+				onkeydown={(e) => e.stopPropagation()}
+			>
 				<div class="dialog-header">
 					{#if editMode === 'condition'}
 						Edit Condition
@@ -325,9 +349,7 @@
 								autofocus
 							/>
 						</label>
-						<p class="dialog-hint">
-							Expression will be evaluated in the current scope.
-						</p>
+						<p class="dialog-hint">Expression will be evaluated in the current scope.</p>
 					{:else if editMode === 'logpoint'}
 						<label class="dialog-label">
 							Log message (use {'{expression}'} for values):
@@ -341,9 +363,7 @@
 								autofocus
 							/>
 						</label>
-						<p class="dialog-hint">
-							Logpoints log a message without stopping execution.
-						</p>
+						<p class="dialog-hint">Logpoints log a message without stopping execution.</p>
 					{:else}
 						<label class="dialog-label">
 							Break when hit count:
@@ -363,43 +383,14 @@
 					{/if}
 				</div>
 				<div class="dialog-actions">
-					<button class="dialog-btn dialog-btn--cancel" onclick={cancelEdit}>
-						Cancel
-					</button>
-					<button class="dialog-btn dialog-btn--save" onclick={saveEdit}>
-						Save
-					</button>
+					<button class="dialog-btn dialog-btn--cancel" onclick={cancelEdit}> Cancel </button>
+					<button class="dialog-btn dialog-btn--save" onclick={saveEdit}> Save </button>
 				</div>
 			</div>
 		</div>
 	{/if}
 {/if}
 
-<script module lang="ts">
-	function getBreakpointTitle(bp: Breakpoint): string {
-		let title = `Breakpoint at line ${bp.line + 1}`;
-		if (bp.condition) {
-			title += `\nCondition: ${bp.condition}`;
-		}
-		if (bp.logMessage) {
-			title += `\nLog: ${bp.logMessage}`;
-		}
-		if (bp.hitCondition) {
-			title += `\nHit condition: ${bp.hitCondition}`;
-		}
-		if (bp.hitCount > 0) {
-			title += `\nHit count: ${bp.hitCount}`;
-		}
-		if (bp.state === 'disabled') {
-			title += '\n(Disabled)';
-		}
-		if (bp.errorMessage) {
-			title += `\nError: ${bp.errorMessage}`;
-		}
-		return title;
-	}
-</script>
-
 <style>
 	.breakpoint-layer {
 		position: absolute;

package/dist/components/editor/CognitiveLoadMeter.svelte

@@ -68,7 +68,7 @@
 	aria-label="Code complexity: {score} out of 100, {levelLabel} complexity"
 	onmouseenter={handleMouseEnter}
 	onmouseleave={handleMouseLeave}
-	onclick={onclick}
+	{onclick}
 	onkeydown={(e) => e.key === 'Enter' && onclick?.()}
 	tabindex={onclick ? 0 : -1}
 >
@@ -143,7 +143,9 @@
 			{#if metrics.regions.some((r) => r.suggestion)}
 				<div class="cognitive-meter__tooltip-section">
 					<span class="cognitive-meter__tooltip-label">Suggestions:</span>
-					{#each metrics.regions.filter((r) => r.suggestion).slice(0, 2) as region (region.startLine)}
+					{#each metrics.regions
+						.filter((r) => r.suggestion)
+						.slice(0, 2) as region (region.startLine)}
 						<p class="cognitive-meter__tooltip-suggestion">
 							{region.suggestion}
 						</p>

package/dist/components/editor/CollaborativeEditor.svelte

@@ -9,11 +9,7 @@
 	import { onMount, onDestroy } from 'svelte';
 	import * as Y from 'yjs';
 	import CustomEditor from './CustomEditor.svelte';
-	import {
-		createEditorState,
-		createCRDTBinding,
-		type CRDTBinding
-	} from './core';
+	import { createEditorState, createCRDTBinding, type CRDTBinding } from './core';
 	import type { EditorPreferences } from '../../types';
 	import type { CollaborationUser } from '../../types/crdt';
 

package/dist/components/editor/CommandPalette.svelte

@@ -134,10 +134,7 @@
 	}
 
 	function escapeHtml(text: string): string {
-		return text
-			.replace(/&/g, '&')
-			.replace(/</g, '&lt;')
-			.replace(/>/g, '&gt;');
+		return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 	}
 
 	function escapeRegex(text: string): string {

package/dist/components/editor/ComplexityLayer.svelte

@@ -59,7 +59,10 @@
 
 	// Group by line (in case of overlapping regions, take highest score)
 	let lineScores = $derived.by(() => {
-		const scores = new SvelteMap<number, { score: number; region: ComplexityRegion; isStart: boolean; isEnd: boolean }>();
+		const scores = new SvelteMap<
+			number,
+			{ score: number; region: ComplexityRegion; isStart: boolean; isEnd: boolean }
+		>();
 
 		for (const indicator of lineIndicators) {
 			const existing = scores.get(indicator.line);
@@ -142,10 +145,7 @@
 			style="top: {tooltipPosition.top}px; left: {tooltipPosition.left}px;"
 		>
 			<div class="complexity-tooltip__header">
-				<span
-					class="complexity-tooltip__badge"
-					style="background: {getColor(hoveredRegion.score)}"
-				>
+				<span class="complexity-tooltip__badge" style="background: {getColor(hoveredRegion.score)}">
 					{hoveredRegion.score}
 				</span>
 				<span class="complexity-tooltip__title">
@@ -188,7 +188,9 @@
 		cursor: help;
 		background: var(--indicator-color);
 		opacity: var(--indicator-opacity);
-		transition: opacity 0.15s ease, width 0.15s ease;
+		transition:
+			opacity 0.15s ease,
+			width 0.15s ease;
 	}
 
 	.complexity-gutter__indicator:hover {

package/dist/components/editor/ConflictZoneLayer.svelte

@@ -139,10 +139,7 @@
 				tabindex={-1}
 			>
 				<!-- Gutter indicator -->
-				<div
-					class="conflict-zone__gutter"
-					style="left: -{gutterWidth}px; width: {gutterWidth}px;"
-				>
+				<div class="conflict-zone__gutter" style="left: -{gutterWidth}px; width: {gutterWidth}px;">
 					<span class="conflict-zone__icon">{getSeverityIcon(zone.severity)}</span>
 				</div>
 
@@ -211,10 +208,7 @@
 			<div class="conflict-tooltip__participants">
 				{#each hoveredZone.participants as participant (participant.userId)}
 					<div class="conflict-tooltip__participant">
-						<span
-							class="conflict-tooltip__dot"
-							style="background: {participant.color}"
-						></span>
+						<span class="conflict-tooltip__dot" style="background: {participant.color}"></span>
 						<span class="conflict-tooltip__name">
 							{participant.userName}
 							{#if participant.isAI}

package/dist/components/editor/ContextLens.svelte

@@ -174,10 +174,7 @@
 {#if enabled && visibleItems.length > 0}
 	<div class="context-lens" aria-hidden="true">
 		{#each visibleItems as item (`${item.line}-${item.type}`)}
-			<div
-				class="context-lens__item context-lens__item--{item.type}"
-				style={getItemStyle(item)}
-			>
+			<div class="context-lens__item context-lens__item--{item.type}" style={getItemStyle(item)}>
 				{#if item.icon}
 					<span class="context-lens__icon">{item.icon}</span>
 				{/if}

package/dist/components/editor/CustomEditor.svelte

@@ -192,7 +192,10 @@
 
 	// Reactive state from editor
 	let lines = $state<readonly ReturnType<typeof editorState.getLine>[]>([]);
-	let selection = $state<Selection>({ anchor: { line: 0, column: 0 }, head: { line: 0, column: 0 } });
+	let selection = $state<Selection>({
+		anchor: { line: 0, column: 0 },
+		head: { line: 0, column: 0 }
+	});
 	let hasSelection = $state(false);
 	let cursors = $state<readonly Cursor[]>([]);
 	let hasMultipleCursors = $state(false);
@@ -386,7 +389,9 @@
 			onUnfoldAll: () => foldManager.expandAll(),
 			onSelectNextOccurrence: () => selectNextOccurrence(editorState),
 			onSelectAllOccurrences: () => selectAllOccurrences(editorState),
-			onShowCommandPalette: () => { showCommandPalette = true; },
+			onShowCommandPalette: () => {
+				showCommandPalette = true;
+			},
 			onSave,
 			announce,
 			resetCursorBlink,
@@ -396,15 +401,25 @@
 				}
 			},
 
-			setCharWidth: (w) => { charWidth = w; },
-			setLineHeight: (h) => { lineHeight = h; },
-			setScrollTop: (v) => { scrollTop = v; },
-			setScrollLeft: (v) => { scrollLeft = v; },
-			setCursorVisible: (v) => { cursorVisible = v; },
+			setCharWidth: (w) => {
+				charWidth = w;
+			},
+			setLineHeight: (h) => {
+				lineHeight = h;
+			},
+			setScrollTop: (v) => {
+				scrollTop = v;
+			},
+			setScrollLeft: (v) => {
+				scrollLeft = v;
+			},
+			setCursorVisible: (v) => {
+				cursorVisible = v;
+			},
 
 			isShowFindReplace: () => showFindReplace,
 			getSearchQuery: () => searchQuery,
-			getSearchMatchCount: () => searchMatches.length,
+			getSearchMatchCount: () => searchMatches.length
 		});
 	}
 
@@ -453,17 +468,23 @@
 	function handleFoldCurrent() {
 		if (!folding || !editorState) return;
 		const currentLine = selection.head.line;
-		// Find fold region at or containing current line
-		const region = foldManager.getRegionAtLine(currentLine);
+		// Fold the innermost block the cursor is *inside*, not only when the cursor
+		// sits on the fold header. Skip already-collapsed regions so repeated
+		// presses fold progressively outward (VS Code behaviour).
+		const region = foldManager.getInnermostRegionContaining(currentLine, 'uncollapsed');
 		if (region) {
-			foldManager.collapse(currentLine);
+			foldManager.collapse(region.startLine);
 		}
 	}
 
 	function handleUnfoldCurrent() {
 		if (!folding || !editorState) return;
 		const currentLine = selection.head.line;
-		foldManager.expand(currentLine);
+		// Expand the innermost collapsed block containing the cursor (mirrors fold).
+		const region = foldManager.getInnermostRegionContaining(currentLine, 'collapsed');
+		if (region) {
+			foldManager.expand(region.startLine);
+		}
 	}
 
 	function handleFoldIndicatorClick(lineNumber: number, e: MouseEvent) {
@@ -486,7 +507,7 @@
 		if (!folding || visibleLineIndices.length === 0) {
 			return lines.map((line, index) => ({ line, index }));
 		}
-		return visibleLineIndices.map(index => ({
+		return visibleLineIndices.map((index) => ({
 			line: lines[index],
 			index
 		}));
@@ -512,7 +533,11 @@
 		const firstRow = Math.max(0, Math.floor(scrollTop / lineHeight) - ROW_OVERSCAN);
 		const lastRow = Math.min(rowCount - 1, firstRow + rowsPerViewport + ROW_OVERSCAN * 2);
 
-		const slice: Array<{ line: (typeof visibleLines)[number]['line']; index: number; visualRow: number }> = [];
+		const slice: Array<{
+			line: (typeof visibleLines)[number]['line'];
+			index: number;
+			visualRow: number;
+		}> = [];
 		for (let visualRow = firstRow; visualRow <= lastRow; visualRow++) {
 			const entry = visibleLines[visualRow];
 			slice.push({ line: entry.line, index: entry.index, visualRow });
@@ -629,7 +654,6 @@
 		);
 	});
 
-
 	// Watch for content prop changes (external changes only, not user typing)
 	$effect(() => {
 		// Only react to a GENUINE external change to the `content` prop (e.g. a file
@@ -662,8 +686,14 @@
 				// Use requestAnimationFrame to ensure DOM has updated
 				const rafId = requestAnimationFrame(() => {
 					if (contentEl) {
-						contentEl.scrollTop = Math.min(savedScrollTop, contentEl.scrollHeight - contentEl.clientHeight);
-						contentEl.scrollLeft = Math.min(savedScrollLeft, contentEl.scrollWidth - contentEl.clientWidth);
+						contentEl.scrollTop = Math.min(
+							savedScrollTop,
+							contentEl.scrollHeight - contentEl.clientHeight
+						);
+						contentEl.scrollLeft = Math.min(
+							savedScrollLeft,
+							contentEl.scrollWidth - contentEl.clientWidth
+						);
 					}
 				});
 				// Cleanup: cancel pending RAF if effect re-runs
@@ -687,15 +717,16 @@
 		}
 	});
 
-	
 	// Ensure cursor is on a visible line after fold changes
 	$effect(() => {
 		if (folding && editorState && foldManager.isLineHidden(selection.head.line)) {
 			// Find the fold region containing the cursor and move to its start
 			for (const region of foldRegions) {
-				if (region.collapsed &&
+				if (
+					region.collapsed &&
 					selection.head.line > region.startLine &&
-					selection.head.line <= region.endLine) {
+					selection.head.line <= region.endLine
+				) {
 					editorState.setCursor({ line: region.startLine, column: 0 });
 					break;
 				}
@@ -838,9 +869,18 @@
 			matchCount={searchMatches.length}
 			currentMatch={currentMatchIndex >= 0 ? currentMatchIndex + 1 : 0}
 			onQueryChange={handleQueryChange}
-			onReplaceTextChange={(text) => { editorFind.setReplaceText(text); syncFindState(); }}
-			onCaseSensitiveChange={(value) => { editorFind.setCaseSensitive(value); syncFindState(); }}
-			onUseRegexChange={(value) => { editorFind.setUseRegex(value); syncFindState(); }}
+			onReplaceTextChange={(text) => {
+				editorFind.setReplaceText(text);
+				syncFindState();
+			}}
+			onCaseSensitiveChange={(value) => {
+				editorFind.setCaseSensitive(value);
+				syncFindState();
+			}}
+			onUseRegexChange={(value) => {
+				editorFind.setUseRegex(value);
+				syncFindState();
+			}}
 			onFindNext={handleFindNext}
 			onFindPrev={handleFindPrev}
 			onReplace={handleReplace}
@@ -872,7 +912,12 @@
 
 	<!-- Screen reader status (announces cursor position changes) -->
 	<div class="custom-editor__sr-status" aria-live="polite" aria-atomic="true">
-		{readonly ? 'Read-only. ' : ''}Line {selection.head.line + 1}, Column {selection.head.column + 1}{hasSelection ? `, ${Math.abs(selection.head.line - selection.anchor.line) + 1} lines selected` : ''}{hasMultipleCursors ? `, ${cursors.length} cursors active` : ''}{searchMatches.length > 0 ? `, ${searchMatches.length} search matches, match ${currentMatchIndex + 1} of ${searchMatches.length}` : ''}
+		{readonly ? 'Read-only. ' : ''}Line {selection.head.line + 1}, Column {selection.head.column +
+			1}{hasSelection
+			? `, ${Math.abs(selection.head.line - selection.anchor.line) + 1} lines selected`
+			: ''}{hasMultipleCursors ? `, ${cursors.length} cursors active` : ''}{searchMatches.length > 0
+			? `, ${searchMatches.length} search matches, match ${currentMatchIndex + 1} of ${searchMatches.length}`
+			: ''}
 	</div>
 
 	<!-- Dynamic screen reader announcements for actions -->
@@ -882,7 +927,10 @@
 
 	<!-- Hidden keyboard shortcuts help for screen readers -->
 	<div id="editor-help" class="custom-editor__sr-status">
-		Keyboard shortcuts: Ctrl+F to find, Ctrl+H to replace, Ctrl+D to add cursor at next occurrence, Ctrl+Shift+L to select all occurrences, Escape to clear.{folding ? ' Ctrl+Shift+[ to fold, Ctrl+Shift+] to unfold.' : ''}
+		Keyboard shortcuts: Ctrl+F to find, Ctrl+H to replace, Ctrl+D to add cursor at next occurrence,
+		Ctrl+Shift+L to select all occurrences, Escape to clear.{folding
+			? ' Ctrl+Shift+[ to fold, Ctrl+Shift+] to unfold.'
+			: ''}
 	</div>
 
 	<!-- Main editor content -->
@@ -903,8 +951,8 @@
 		{#if complexityHighlighting && complexityMetrics}
 			<ComplexityLayer
 				metrics={complexityMetrics}
-				lineHeight={lineHeight}
-				gutterWidth={gutterWidth}
+				{lineHeight}
+				{gutterWidth}
 				minScore={complexityThreshold}
 				enabled={complexityHighlighting}
 			/>
@@ -914,9 +962,9 @@
 		{#if aiAgents.length > 0}
 			<AIFocusLayer
 				agents={aiAgents}
-				lineHeight={lineHeight}
-				charWidth={charWidth}
-				gutterWidth={gutterWidth}
+				{lineHeight}
+				{charWidth}
+				{gutterWidth}
 				contentPadding={CONTENT_PADDING}
 				showLabels={showAILabels}
 				showFocusRegions={showAIFocusRegions}
@@ -926,7 +974,10 @@
 
 		<!-- Gutter background (extends full height of content, matching the virtualized spacer) -->
 		{#if mergedPrefs.lineNumbers !== 'off'}
-			<div class="custom-editor__gutter-bg" style="width: {gutterWidth}px; height: {totalContentHeight}px;"></div>
+			<div
+				class="custom-editor__gutter-bg"
+				style="width: {gutterWidth}px; height: {totalContentHeight}px;"
+			></div>
 		{/if}
 
 		<!-- Search match highlights (below selection) -->
@@ -946,7 +997,7 @@
 		<EditorSelections
 			{cursors}
 			{cursorVisible}
-			readonly={readonly}
+			{readonly}
 			{lineHeight}
 			{charWidth}
 			{gutterWidth}
@@ -959,7 +1010,7 @@
 
 		<!-- Lines (virtualized: only the windowed slice is rendered) -->
 		<EditorLines
-			windowedLines={windowedLines}
+			{windowedLines}
 			totalHeight={totalContentHeight}
 			{lineHeight}
 			activeLine={selection.head.line}
@@ -974,15 +1025,11 @@
 			onFoldIndicatorClick={handleFoldIndicatorClick}
 			onExpandFold={(index) => foldManager.expand(index)}
 		/>
-
 	</div>
 </div>
 
 <!-- Command Palette -->
-<CommandPalette
-	bind:open={showCommandPalette}
-	onClose={() => editorContent?.focus()}
-/>
+<CommandPalette bind:open={showCommandPalette} onClose={() => editorContent?.focus()} />
 
 <style>
 	.custom-editor {
@@ -1070,8 +1117,6 @@
 		border-color: rgba(255, 213, 0, 0.8);
 	}
 
-
-
 	/* Gutter background - extends full height of content */
 	.custom-editor__gutter-bg {
 		position: absolute;
@@ -1084,7 +1129,6 @@
 		pointer-events: none;
 	}
 
-
 	/* Token styles */
 	:global(.token-comment),
 	:global(.token-comment-line),

package/dist/components/editor/DebugConsole.svelte

@@ -260,7 +260,7 @@
 			</div>
 
 			<div class="header-filters">
-				{#each (['all', 'error', 'warning', 'info', 'log'] as const) as filterType (filterType)}
+				{#each ['all', 'error', 'warning', 'info', 'log'] as const as filterType (filterType)}
 					{@const count = entryCounts()[filterType]}
 					<button
 						class="filter-btn"
@@ -273,7 +273,9 @@
 							<span class="filter-icon">{getTypeIcon(filterType)}</span>
 						{/if}
 						<span class="filter-label">
-							{filterType === 'all' ? 'All' : filterType.charAt(0).toUpperCase() + filterType.slice(1)}
+							{filterType === 'all'
+								? 'All'
+								: filterType.charAt(0).toUpperCase() + filterType.slice(1)}
 						</span>
 						{#if count > 0}
 							<span class="filter-count">{count}</span>
@@ -283,13 +285,9 @@
 			</div>
 
 			<div class="header-actions">
-				<button class="action-btn" onclick={onClear} title="Clear console (Ctrl+L)">
-					🗑
-				</button>
+				<button class="action-btn" onclick={onClear} title="Clear console (Ctrl+L)"> 🗑 </button>
 				{#if onClose}
-					<button class="action-btn" onclick={onClose} title="Close">
-						×
-					</button>
+					<button class="action-btn" onclick={onClose} title="Close"> × </button>
 				{/if}
 			</div>
 		</div>
@@ -317,10 +315,7 @@
 						</span>
 
 						{#if entry.expandable}
-							<button
-								class="entry-expand"
-								onclick={() => toggleExpand(entry.id)}
-							>
+							<button class="entry-expand" onclick={() => toggleExpand(entry.id)}>
 								{isExpanded ? '▾' : '▸'}
 							</button>
 						{/if}
@@ -362,11 +357,7 @@
 					onkeydown={handleKeyDown}
 					placeholder={inputPlaceholder}
 				/>
-				<button
-					class="input-submit"
-					onclick={handleSubmit}
-					disabled={!inputValue.trim()}
-				>
+				<button class="input-submit" onclick={handleSubmit} disabled={!inputValue.trim()}>
 					⏎
 				</button>
 			</div>