@nocturnium/svelte-ide 1.0.4 → 1.0.5

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

@@ -234,8 +234,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 +263,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 +276,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 +285,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/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;
 	}

package/dist/components/editor/InlineDiffLayer.svelte

@@ -48,13 +48,13 @@
 	function getColor(type: DiffLine['type']): string {
 		switch (type) {
 			case 'added':
-				return '#22c55e'; // green
+				return 'var(--ide-status-created)';
 			case 'modified':
-				return '#3b82f6'; // blue
+				return 'var(--ide-status-modified)';
 			case 'removed':
-				return '#ef4444'; // red
+				return 'var(--ide-status-deleted)';
 			default:
-				return '#6b7280';
+				return 'var(--ide-text-muted)';
 		}
 	}
 
@@ -283,7 +283,7 @@
 		left: 0;
 		width: 0;
 		height: 0;
-		border-left: 8px solid #ef4444;
+		border-left: 8px solid var(--ide-status-deleted, #ef4444);
 		border-top: 4px solid transparent;
 		border-bottom: 4px solid transparent;
 		pointer-events: auto;
@@ -291,7 +291,7 @@
 	}
 
 	.diff-removed-marker:hover {
-		border-left-color: #f87171;
+		border-left-color: var(--ide-error, #ef4444);
 	}
 
 	/* Tooltip */
@@ -301,8 +301,8 @@
 		min-width: 200px;
 		max-width: 400px;
 		padding: 10px;
-		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: 6px;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 		font-size: 12px;
@@ -324,7 +324,7 @@
 	.tooltip-label {
 		display: block;
 		font-size: 10px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		margin-bottom: 4px;
 	}
 
@@ -332,15 +332,15 @@
 		margin: 0;
 		font-family: 'JetBrains Mono', monospace;
 		font-size: 11px;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 		white-space: pre-wrap;
 		word-break: break-all;
 	}
 
 	.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;
 	}
 </style>