@nocturnium/svelte-ide 1.0.4 → 1.0.6

package/dist/components/ai/AIPanel.svelte

@@ -208,7 +208,9 @@
 					<Icon name="sparkles" size={16} />
 					<span>AI Assistant</span>
 				</div>
-				<span class="ai-panel__mock-badge">Demo mock - no real model</span>
+				<span class="ai-panel__mock-badge" title="Demo mock - no real model"
+					>Demo mock - no real model</span
+				>
 			</div>
 			<div class="ai-panel__actions">
 				<Button variant="ghost" size="xs" onclick={handleNewConversation} title="New conversation">
@@ -355,6 +357,8 @@
 		display: inline-flex;
 		align-items: center;
 		min-width: 0;
+		max-width: 100%;
+		overflow: hidden;
 		padding: 0.125rem var(--ide-spacing-sm);
 		border: 1px solid color-mix(in srgb, var(--ide-accent) 40%, var(--ide-border));
 		border-radius: var(--ide-radius-full);
@@ -363,6 +367,7 @@
 		font-size: var(--ide-font-size-xs);
 		font-weight: 500;
 		line-height: var(--ide-line-height-normal);
+		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 

package/dist/components/ai/AIToolCallDisplay.svelte

@@ -11,7 +11,7 @@
 		startedAt?: Date;
 	}
 
-	let { toolCall, status = 'completed', result, error, duration, startedAt }: Props = $props();
+	let { toolCall, status = 'pending', result, error, duration, startedAt }: Props = $props();
 
 	let expanded = $state(false);
 	let showResult = $state(false);

package/dist/components/core/Avatar.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Icon from './Icon.svelte';
+
 	interface Props {
 		name: string;
 		src?: string;
@@ -45,7 +47,10 @@
 	}
 
 	const initials = $derived(getInitials(name));
-	const bgColor = $derived(color ?? (isAI ? 'var(--ide-collab-ai)' : 'var(--ide-interactive)'));
+	// Default AI tint is the conversational "assistant" hue. Collaboration/presence
+	// call sites (cursors, locks) pass an explicit `--ide-collab-ai` color instead.
+	const bgColor = $derived(color ?? (isAI ? 'var(--ide-ai-assistant)' : 'var(--ide-interactive)'));
+	const aiGlyphSize = $derived(Math.round(parseInt(sizeMap[size], 10) * 0.58));
 </script>
 
 <div
@@ -60,12 +65,11 @@
 >
 	{#if src}
 		<img class="ide-avatar__img" {src} alt={name} />
+	{:else if isAI}
+		<span class="ide-avatar__ai-glyph"><Icon name="sparkles" size={aiGlyphSize} /></span>
 	{:else}
 		<span class="ide-avatar__initials">{initials}</span>
 	{/if}
-	{#if isAI}
-		<span class="ide-avatar__ai-badge">AI</span>
-	{/if}
 </div>
 
 <style>
@@ -96,15 +100,11 @@
 		line-height: 1;
 	}
 
-	.ide-avatar__ai-badge {
-		position: absolute;
-		bottom: -2px;
-		right: -2px;
-		padding: 1px 3px;
-		font-size: 7px;
-		font-weight: 700;
-		background: var(--ide-collab-ai);
-		border-radius: var(--ide-radius-sm);
-		border: 1px solid var(--ide-bg-primary);
+	.ide-avatar__ai-glyph {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		line-height: 0;
+		color: white;
 	}
 </style>

package/dist/components/core/Badge.svelte

@@ -62,8 +62,8 @@
 	}
 
 	.ide-badge--primary {
-		background: color-mix(in srgb, var(--ide-interactive) 20%, transparent);
-		color: var(--ide-interactive);
+		background: color-mix(in srgb, var(--ide-primary) 20%, transparent);
+		color: var(--ide-primary);
 	}
 
 	.ide-badge--success {

package/dist/components/core/Button.svelte

@@ -85,12 +85,12 @@
 
 	/* Variants */
 	.ide-button--primary {
-		background: var(--ide-interactive-active);
+		background: var(--ide-primary);
 		color: var(--ide-text-primary);
 	}
 
 	.ide-button--primary:hover:not(:disabled) {
-		background: var(--ide-interactive-hover);
+		background: var(--ide-primary-hover);
 	}
 
 	.ide-button--secondary {

package/dist/components/editor/AIFocusLayer.svelte

@@ -281,7 +281,7 @@
 		right: 8px;
 		top: 2px;
 		font-size: 10px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		opacity: 0.7;
 	}
 
@@ -401,7 +401,7 @@
 		gap: 4px;
 		padding: 2px 8px;
 		background: rgba(30, 30, 30, 0.95);
-		border: 1px solid var(--color-border, #333);
+		border: 1px solid var(--ide-border, #a8c5d9);
 		border-radius: 4px;
 		font-size: 11px;
 		white-space: nowrap;
@@ -420,7 +420,7 @@
 	}
 
 	.ai-focus-layer__label-activity {
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		font-size: 10px;
 		max-width: 150px;
 		overflow: hidden;

package/dist/components/editor/CognitiveLoadMeter.svelte

@@ -27,12 +27,12 @@
 
 	let levelColor = $derived(
 		level === 'critical'
-			? 'var(--color-error, #ef4444)'
+			? 'var(--ide-error, #ef4444)'
 			: level === 'high'
-				? 'var(--color-warning, #f59e0b)'
+				? 'var(--ide-warning, #facc15)'
 				: level === 'medium'
-					? 'var(--color-info, #3b82f6)'
-					: 'var(--color-success, #22c55e)'
+					? 'var(--ide-info, #60a5fa)'
+					: 'var(--ide-success, #4ade80)'
 	);
 
 	let levelLabel = $derived(
@@ -174,7 +174,7 @@
 	}
 
 	.cognitive-meter:focus-visible {
-		outline: 2px solid var(--color-focus, #3b82f6);
+		outline: 2px solid var(--ide-interactive-focus, #60a5fa);
 		outline-offset: 2px;
 	}
 
@@ -230,8 +230,8 @@
 		transform: translateX(-50%);
 		margin-bottom: 8px;
 		padding: 12px;
-		background-color: var(--color-surface, #1e1e1e);
-		border: 1px solid var(--color-border, #333);
+		background-color: var(--ide-bg-secondary, #1a2744);
+		border: 1px solid var(--ide-border, #a8c5d9);
 		border-radius: 8px;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 		min-width: 280px;
@@ -247,7 +247,7 @@
 		left: 50%;
 		transform: translateX(-50%);
 		border: 6px solid transparent;
-		border-top-color: var(--color-border, #333);
+		border-top-color: var(--ide-border, #a8c5d9);
 	}
 
 	.cognitive-meter__tooltip-header {
@@ -256,12 +256,12 @@
 		align-items: center;
 		margin-bottom: 8px;
 		padding-bottom: 8px;
-		border-bottom: 1px solid var(--color-border, #333);
+		border-bottom: 1px solid var(--ide-border, #a8c5d9);
 	}
 
 	.cognitive-meter__tooltip-title {
 		font-weight: 600;
-		color: var(--color-text, #fff);
+		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.cognitive-meter__tooltip-score {
@@ -275,7 +275,7 @@
 	.cognitive-meter__tooltip-label {
 		display: block;
 		font-size: 11px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		margin-bottom: 4px;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
@@ -296,7 +296,7 @@
 	}
 
 	.cognitive-meter__tooltip-region-name {
-		color: var(--color-text, #fff);
+		color: var(--ide-text-primary, #f4f1e0);
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -304,13 +304,13 @@
 	}
 
 	.cognitive-meter__tooltip-region-score {
-		color: var(--color-warning, #f59e0b);
+		color: var(--ide-warning, #facc15);
 		font-weight: 600;
 		font-variant-numeric: tabular-nums;
 	}
 
 	.cognitive-meter__tooltip-more {
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		font-style: italic;
 	}
 
@@ -320,7 +320,7 @@
 		background-color: rgba(255, 255, 255, 0.05);
 		border-radius: 4px;
 		font-size: 11px;
-		color: var(--color-text-muted, #aaa);
+		color: var(--ide-text-muted, #a8c5d9);
 		line-height: 1.4;
 	}
 </style>

package/dist/components/editor/CommandPalette.svelte

@@ -257,8 +257,8 @@
 		width: 100%;
 		max-width: 600px;
 		max-height: 70vh;
-		background: var(--color-surface, #1e1e2e);
-		border: 1px solid var(--color-border, #333);
+		background: var(--ide-bg-secondary, #1a2744);
+		border: 1px solid var(--ide-border, #a8c5d9);
 		border-radius: 12px;
 		box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
 		display: flex;
@@ -271,13 +271,13 @@
 		align-items: center;
 		gap: 12px;
 		padding: 12px 16px;
-		border-bottom: 1px solid var(--color-border, #333);
-		background: var(--color-surface-secondary, #252535);
+		border-bottom: 1px solid var(--ide-border, #a8c5d9);
+		background: var(--ide-bg-elevated, #1a2744);
 	}
 
 	.command-palette__icon {
 		font-size: 18px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	.command-palette__input {
@@ -286,18 +286,18 @@
 		border: none;
 		outline: none;
 		font-size: 16px;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 		font-family: inherit;
 	}
 
 	.command-palette__input::placeholder {
-		color: var(--color-text-muted, #666);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	.command-palette__close {
 		background: none;
 		border: none;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		cursor: pointer;
 		font-size: 16px;
 		padding: 4px 8px;
@@ -307,7 +307,7 @@
 
 	.command-palette__close:hover {
 		background: rgba(255, 255, 255, 0.1);
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.command-palette__content {
@@ -319,7 +319,7 @@
 	.command-palette__empty {
 		padding: 24px;
 		text-align: center;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	.command-palette__group {
@@ -335,7 +335,7 @@
 		font-weight: 600;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	.command-palette__group-icon {
@@ -351,7 +351,7 @@
 		background: transparent;
 		border: none;
 		text-align: left;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 		cursor: pointer;
 		font-size: 14px;
 		transition: background 0.1s ease;
@@ -363,7 +363,7 @@
 	}
 
 	.command-palette__item--selected {
-		background: var(--color-primary, #4a9eff) !important;
+		background: var(--ide-interactive, #4a8db7) !important;
 		color: #fff;
 	}
 
@@ -392,7 +392,7 @@
 		padding: 2px 6px;
 		background: rgba(255, 255, 255, 0.1);
 		border-radius: 4px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	.command-palette__item--selected .command-palette__item-shortcut {
@@ -405,8 +405,8 @@
 		justify-content: center;
 		gap: 24px;
 		padding: 10px 16px;
-		border-top: 1px solid var(--color-border, #333);
-		background: var(--color-surface-secondary, #252535);
+		border-top: 1px solid var(--ide-border, #a8c5d9);
+		background: var(--ide-bg-elevated, #1a2744);
 	}
 
 	.command-palette__hint {
@@ -414,7 +414,7 @@
 		align-items: center;
 		gap: 6px;
 		font-size: 11px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	.command-palette__hint kbd {

package/dist/components/editor/ComplexityLayer.svelte

@@ -83,9 +83,11 @@
 	 * Get the color based on score level
 	 */
 	function getColor(score: number): string {
-		if (score >= 85) return '#ef4444'; // Critical - red
-		if (score >= 70) return '#f59e0b'; // High - orange
-		return '#3b82f6'; // Medium - blue
+		// Bands match the analyzer's levels: critical >= 85, high >= 70,
+		// medium otherwise (lines below the minScore threshold aren't shown).
+		if (score >= 85) return 'var(--ide-error)'; // Critical
+		if (score >= 70) return 'var(--ide-warning)'; // High
+		return 'var(--ide-info)'; // Medium
 	}
 
 	/**
@@ -234,8 +236,8 @@
 		min-width: 200px;
 		max-width: 300px;
 		padding: 12px;
-		background: var(--color-surface, #1e1e1e);
-		border: 1px solid var(--color-border, #333);
+		background: var(--ide-bg-secondary, #1a2744);
+		border: 1px solid var(--ide-border, #a8c5d9);
 		border-radius: 8px;
 		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
 		font-size: 12px;
@@ -263,11 +265,11 @@
 
 	.complexity-tooltip__title {
 		font-weight: 600;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.complexity-tooltip__lines {
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		font-size: 11px;
 		margin-bottom: 8px;
 	}
@@ -276,7 +278,7 @@
 		padding: 8px;
 		background: rgba(255, 255, 255, 0.05);
 		border-radius: 4px;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 		line-height: 1.4;
 		margin-bottom: 8px;
 	}
@@ -285,7 +287,7 @@
 		display: flex;
 		gap: 12px;
 		font-size: 10px;
-		color: var(--color-text-muted, #666);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	.complexity-tooltip__factors span {

package/dist/components/editor/ConflictZoneLayer.svelte

@@ -308,7 +308,7 @@
 		font-size: 10px;
 		font-weight: 600;
 		color: #fff;
-		border: 2px solid var(--color-surface, #1e1e2e);
+		border: 2px solid var(--ide-bg-secondary, #1a2744);
 		margin-left: -8px;
 	}
 
@@ -344,8 +344,8 @@
 		min-width: 220px;
 		max-width: 300px;
 		padding: 12px;
-		background: var(--color-surface, #1e1e2e);
-		border: 1px solid var(--color-border, #333);
+		background: var(--ide-bg-secondary, #1a2744);
+		border: 1px solid var(--ide-border, #a8c5d9);
 		border-radius: 8px;
 		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
 		font-size: 12px;
@@ -372,14 +372,14 @@
 
 	.conflict-tooltip__title {
 		font-weight: 600;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.conflict-tooltip__region {
 		padding: 6px 8px;
 		background: rgba(255, 255, 255, 0.05);
 		border-radius: 4px;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 		margin-bottom: 8px;
 	}
 
@@ -405,12 +405,12 @@
 
 	.conflict-tooltip__name {
 		flex: 1;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.conflict-tooltip__line {
 		font-size: 10px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	.ai-badge {
@@ -428,7 +428,7 @@
 		background: rgba(255, 200, 0, 0.1);
 		border-radius: 4px;
 		border-left: 2px solid #eab308;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 		font-size: 11px;
 		line-height: 1.4;
 	}

package/dist/components/editor/CustomEditor.svelte

@@ -26,7 +26,7 @@
 	import CommandPalette from './CommandPalette.svelte';
 	import { getComplexityAnalyzer, type ComplexityMetrics } from './core/complexity-analyzer';
 	import { registerSemanticFoldCommands } from './core/commands';
-	import { getSemanticAnalyzer } from './core/semantic-analyzer';
+	import { getSemanticAnalyzer, type FoldPreset } from './core/semantic-analyzer';
 	import type { AIAwareness } from './core/ai-awareness';
 	import {
 		CURSOR_BLINK_MS,
@@ -501,6 +501,38 @@
 		}
 	}
 
+	/**
+	 * Collapse every semantic region whose category is listed in `preset.hide`,
+	 * after first expanding everything so presets compose predictably. Shared by
+	 * the command-palette preset commands and the exported imperative API.
+	 */
+	function applyFoldPresetInternal(preset: FoldPreset) {
+		if (!folding || !editorState) return;
+		foldManager.expandAll();
+		const analyzer = getSemanticAnalyzer();
+		const regions = analyzer.analyze(editorState.lines, language);
+		for (const category of preset.hide) {
+			for (const region of analyzer.getByCategory(regions, category)) {
+				foldManager.collapse(region.startLine);
+			}
+		}
+	}
+
+	/**
+	 * Imperative API (accessible via `bind:this`): apply a semantic fold preset.
+	 */
+	export function applyFoldPreset(preset: FoldPreset) {
+		applyFoldPresetInternal(preset);
+	}
+
+	/**
+	 * Imperative API (accessible via `bind:this`): expand all folded regions.
+	 */
+	export function unfoldAll() {
+		if (!folding || !editorState) return;
+		foldManager.expandAll();
+	}
+
 	function handleFoldIndicatorClick(lineNumber: number, e: MouseEvent) {
 		e.preventDefault();
 		e.stopPropagation();
@@ -787,17 +819,7 @@
 				foldManager?.expandAll();
 			},
 			onApplyPreset: (preset) => {
-				// First expand all
-				foldManager?.expandAll();
-				// Then collapse categories that should be hidden
-				const analyzer = getSemanticAnalyzer();
-				const regions = analyzer.analyze(editorState.lines, language);
-				for (const category of preset.hide) {
-					const categoryRegions = analyzer.getByCategory(regions, category);
-					for (const region of categoryRegions) {
-						foldManager?.collapse(region.startLine);
-					}
-				}
+				applyFoldPresetInternal(preset);
 			},
 			getLanguage: () => language
 		});

package/dist/components/editor/CustomEditor.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { EditorPreferences } from '../../types';
 import { type Cursor } from './core';
 import { type ComplexityMetrics } from './core/complexity-analyzer';
+import { type FoldPreset } from './core/semantic-analyzer';
 import type { AIAwareness } from './core/ai-awareness';
 interface Props {
     content: string;
@@ -32,6 +33,9 @@ interface Props {
     onComplexityChange?: (metrics: ComplexityMetrics | null) => void;
     onSave?: () => void;
 }
-declare const CustomEditor: import("svelte").Component<Props, {}, "content">;
+declare const CustomEditor: import("svelte").Component<Props, {
+    applyFoldPreset: (preset: FoldPreset) => void;
+    unfoldAll: () => void;
+}, "content">;
 type CustomEditor = ReturnType<typeof CustomEditor>;
 export default CustomEditor;

package/dist/components/editor/FileIcon.svelte

@@ -73,7 +73,8 @@
 	};
 
 	const ext = $derived(getExtension(filename));
-	const color = $derived(extensionColors[ext] ?? 'var(--ide-text-muted)');
+	const colorKey = $derived(ext || filename.toLowerCase().replace(/^\./, ''));
+	const color = $derived(extensionColors[colorKey] ?? 'var(--ide-text-muted)');
 
 	// Simple file type icon paths
 	const icons = {

package/dist/components/editor/GitBlameLayer.svelte

@@ -347,8 +347,8 @@
 		min-width: 280px;
 		max-width: 400px;
 		padding: 12px;
-		background: var(--color-surface, #1e1e2e);
-		border: 1px solid var(--color-border, #333);
+		background: var(--ide-bg-secondary, #1a2744);
+		border: 1px solid var(--ide-border, #a8c5d9);
 		border-radius: 8px;
 		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
 		font-size: 12px;
@@ -382,12 +382,12 @@
 
 	.tooltip-author {
 		font-weight: 600;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.tooltip-email {
 		font-size: 11px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	.tooltip-commit {
@@ -407,12 +407,12 @@
 	}
 
 	.tooltip-date {
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		font-size: 11px;
 	}
 
 	.tooltip-message {
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 		line-height: 1.4;
 		margin-bottom: 8px;
 	}
@@ -429,8 +429,8 @@
 
 	.tooltip-hint {
 		font-size: 10px;
-		color: var(--color-text-muted, #888);
-		border-top: 1px solid var(--color-border, #333);
+		color: var(--ide-text-muted, #a8c5d9);
+		border-top: 1px solid var(--ide-border, #a8c5d9);
 		padding-top: 8px;
 		margin-top: 4px;
 	}