@nocturnium/svelte-ide 1.0.3 → 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/ContextLens.svelte

@@ -205,13 +205,13 @@
 		align-items: center;
 		gap: 6px;
 		padding: 2px 8px;
-		background: rgba(30, 30, 30, 0.95);
-		border: 1px solid var(--color-border, #444);
+		background: color-mix(in srgb, var(--ide-bg-elevated) 95%, transparent);
+		border: 1px solid var(--ide-border);
 		border-radius: 4px;
 		font-size: 11px;
-		font-family: var(--font-mono, 'JetBrains Mono', monospace);
+		font-family: var(--ide-font-mono);
 		white-space: nowrap;
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+		box-shadow: var(--ide-shadow-md);
 		animation: lens-fade-in 0.15s ease-out;
 	}
 
@@ -227,19 +227,19 @@
 	}
 
 	.context-lens__item--function-header {
-		border-left: 3px solid #3b82f6;
+		border-left: 3px solid var(--ide-syntax-function);
 	}
 
 	.context-lens__item--variable-type {
-		border-left: 3px solid #8b5cf6;
+		border-left: 3px solid var(--ide-syntax-keyword);
 	}
 
 	.context-lens__item--parameter-info {
-		border-left: 3px solid #22c55e;
+		border-left: 3px solid var(--ide-syntax-string);
 	}
 
 	.context-lens__item--return-type {
-		border-left: 3px solid #f59e0b;
+		border-left: 3px solid var(--ide-syntax-number);
 	}
 
 	.context-lens__icon {
@@ -248,12 +248,18 @@
 	}
 
 	.context-lens__label {
-		color: #e8e8f0;
+		color: var(--ide-text-primary);
 		font-weight: 600;
 	}
 
 	.context-lens__detail {
-		color: #888;
+		color: var(--ide-text-muted);
 		font-weight: 400;
 	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.context-lens__item {
+			animation: none;
+		}
+	}
 </style>

package/dist/components/editor/EchoCursorLayer.svelte

@@ -96,6 +96,23 @@
 		return `top: ${top}px; left: ${left}px;`;
 	}
 
+	function getEchoColorToken(cursor: EchoCursor): string {
+		const tokens = [
+			'--ide-success',
+			'--ide-warning',
+			'--ide-syntax-tag',
+			'--ide-syntax-type',
+			'--ide-ai-assistant',
+			'--ide-error',
+			'--ide-accent',
+			'--ide-accent-strong',
+			'--ide-syntax-function',
+			'--ide-syntax-string'
+		];
+		const index = echoCursors.findIndex((echo) => echo.id === cursor.id);
+		return tokens[Math.max(index, 0) % tokens.length];
+	}
+
 	/**
 	 * Handle remove echo click
 	 */
@@ -116,7 +133,7 @@
 				class="echo-cursor"
 				class:echo-cursor--replaying={isReplaying}
 				class:echo-cursor--active={cursor.active}
-				style="{getCursorStyle(cursor)} --echo-color: {cursor.color};"
+				style="{getCursorStyle(cursor)} --echo-color: var({getEchoColorToken(cursor)});"
 			>
 				<!-- Cursor line -->
 				<div class="echo-cursor__caret" style="height: {lineHeight}px;"></div>
@@ -228,7 +245,7 @@
 		left: 0;
 		padding: 2px 6px;
 		background: var(--echo-color);
-		color: #fff;
+		color: var(--ide-text-inverse);
 		font-size: 10px;
 		font-weight: 600;
 		border-radius: 4px;
@@ -241,7 +258,7 @@
 		left: 0;
 		margin-top: 2px;
 		padding: 1px 4px;
-		background: rgba(0, 0, 0, 0.7);
+		background: var(--ide-bg-overlay);
 		color: var(--echo-color);
 		font-size: 9px;
 		font-family: monospace;
@@ -262,10 +279,10 @@
 		width: 14px;
 		height: 14px;
 		padding: 0;
-		background: rgba(239, 68, 68, 0.9);
+		background: color-mix(in srgb, var(--ide-error) 90%, transparent);
 		border: none;
 		border-radius: 50%;
-		color: #fff;
+		color: var(--ide-text-inverse);
 		font-size: 10px;
 		line-height: 14px;
 		text-align: center;
@@ -279,7 +296,7 @@
 	}
 
 	.echo-cursor__remove:hover {
-		background: #ef4444;
+		background: var(--ide-error);
 	}
 
 	.echo-cursor__replay {
@@ -288,13 +305,13 @@
 		left: 4px;
 		padding: 2px 6px;
 		background: var(--echo-color);
-		color: #fff;
+		color: var(--ide-text-inverse);
 		font-size: 12px;
 		font-family: monospace;
 		border-radius: 4px;
 		white-space: pre;
 		transition: opacity 0.2s ease;
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+		box-shadow: var(--ide-shadow-md);
 	}
 
 	.echo-cursor__ripple {
@@ -330,11 +347,11 @@
 		align-items: center;
 		gap: 6px;
 		padding: 6px 12px;
-		background: rgba(34, 197, 94, 0.15);
-		border: 1px solid rgba(34, 197, 94, 0.3);
+		background: color-mix(in srgb, var(--ide-success) 15%, transparent);
+		border: 1px solid color-mix(in srgb, var(--ide-success) 30%, transparent);
 		border-radius: 6px;
 		font-size: 12px;
-		color: #22c55e;
+		color: var(--ide-success);
 		pointer-events: auto;
 	}
 
@@ -360,4 +377,19 @@
 	.echo-mode-indicator__count {
 		font-weight: 500;
 	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.echo-cursor__caret,
+		.echo-cursor--replaying .echo-cursor__caret,
+		.echo-cursor__ripple,
+		.echo-mode-indicator__icon {
+			animation: none;
+		}
+
+		.echo-cursor__delay,
+		.echo-cursor__remove,
+		.echo-cursor__replay {
+			transition: none;
+		}
+	}
 </style>

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 = {