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

@@ -107,23 +107,23 @@
 	/**
 	 * Get color for confidence level
 	 */
-	function getConfidenceColor(confidence: number): string {
-		if (confidence >= 0.85) return '#22c55e'; // green
-		if (confidence >= 0.7) return '#eab308'; // yellow
-		return '#f59e0b'; // amber
+	function getConfidenceToken(confidence: number): string {
+		if (confidence >= 0.85) return '--ide-status-created';
+		if (confidence >= 0.7) return '--ide-status-modified';
+		return '--ide-accent-strong';
 	}
 
 	/**
 	 * Get severity color
 	 */
-	function getSeverityColor(severity: BracketMismatch['severity']): string {
+	function getSeverityToken(severity: BracketMismatch['severity']): string {
 		switch (severity) {
 			case 'error':
-				return '#ef4444';
+				return '--ide-status-deleted';
 			case 'warning':
-				return '#f59e0b';
+				return '--ide-status-modified';
 			default:
-				return '#6b7280';
+				return '--ide-text-muted';
 		}
 	}
 </script>
@@ -132,12 +132,12 @@
 	<div class="ghost-bracket-layer" aria-hidden="true">
 		<!-- Ghost bracket suggestions -->
 		{#each ghosts as ghost (ghost.id)}
-			{@const color = getConfidenceColor(ghost.confidence)}
+			{@const color = getConfidenceToken(ghost.confidence)}
 			{@const connectorStyle = getConnectorStyle(ghost)}
 
 			<!-- Connector line to matching bracket -->
 			{#if connectorStyle && hoveredGhost?.id === ghost.id}
-				<div class="ghost-connector" style="{connectorStyle} --ghost-color: {color};">
+				<div class="ghost-connector" style="{connectorStyle} --ghost-color: var({color});">
 					<div class="ghost-connector__line"></div>
 				</div>
 			{/if}
@@ -146,7 +146,7 @@
 			<div
 				class="ghost-bracket"
 				role="tooltip"
-				style="{getGhostStyle(ghost)} --ghost-color: {color};"
+				style="{getGhostStyle(ghost)} --ghost-color: var({color});"
 				onmouseenter={() => (hoveredGhost = ghost)}
 				onmouseleave={() => (hoveredGhost = null)}
 			>
@@ -187,10 +187,10 @@
 
 		<!-- Bracket mismatch markers -->
 		{#each mismatches as mismatch (`${mismatch.position.line}:${mismatch.position.column}:${mismatch.issue}`)}
-			{@const color = getSeverityColor(mismatch.severity)}
+			{@const color = getSeverityToken(mismatch.severity)}
 			<div
 				class="bracket-mismatch bracket-mismatch--{mismatch.issue}"
-				style="{getMismatchStyle(mismatch)} --mismatch-color: {color};"
+				style="{getMismatchStyle(mismatch)} --mismatch-color: var({color});"
 				title={mismatch.issue === 'unclosed'
 					? `Unclosed '${mismatch.character}'`
 					: mismatch.issue === 'unexpected'
@@ -253,7 +253,7 @@
 		top: -16px;
 		left: 0;
 		padding: 1px 4px;
-		background: rgba(0, 0, 0, 0.7);
+		background: var(--ide-bg-overlay);
 		color: var(--ghost-color);
 		font-size: 9px;
 		font-family: monospace;
@@ -272,17 +272,17 @@
 		left: 0;
 		margin-top: 4px;
 		padding: 8px;
-		background: var(--color-surface, #1e1e2e);
-		border: 1px solid var(--color-border, #333);
+		background: var(--ide-bg-elevated);
+		border: 1px solid var(--ide-border);
 		border-radius: 6px;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+		box-shadow: var(--ide-shadow-lg);
 		min-width: 140px;
 		z-index: 100;
 	}
 
 	.ghost-bracket__reason {
 		font-size: 11px;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary);
 		margin-bottom: 8px;
 		line-height: 1.3;
 	}
@@ -304,21 +304,21 @@
 	}
 
 	.ghost-bracket__btn--accept {
-		background: rgba(34, 197, 94, 0.2);
-		color: #22c55e;
+		background: color-mix(in srgb, var(--ide-status-created) 20%, transparent);
+		color: var(--ide-status-created);
 	}
 
 	.ghost-bracket__btn--accept:hover {
-		background: rgba(34, 197, 94, 0.3);
+		background: color-mix(in srgb, var(--ide-status-created) 30%, transparent);
 	}
 
 	.ghost-bracket__btn--dismiss {
-		background: rgba(239, 68, 68, 0.2);
-		color: #ef4444;
+		background: color-mix(in srgb, var(--ide-status-deleted) 20%, transparent);
+		color: var(--ide-status-deleted);
 	}
 
 	.ghost-bracket__btn--dismiss:hover {
-		background: rgba(239, 68, 68, 0.3);
+		background: color-mix(in srgb, var(--ide-status-deleted) 30%, transparent);
 	}
 
 	/* Connector line */
@@ -376,7 +376,7 @@
 		left: 0;
 		padding: 1px 3px;
 		background: var(--mismatch-color);
-		color: #fff;
+		color: var(--ide-text-inverse);
 		font-size: 9px;
 		font-family: monospace;
 		border-radius: 2px;
@@ -387,4 +387,17 @@
 	.bracket-mismatch:hover .bracket-mismatch__expected {
 		opacity: 1;
 	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.ghost-bracket__char,
+		.bracket-mismatch--unclosed .bracket-mismatch__underline {
+			animation: none;
+		}
+
+		.ghost-bracket__confidence,
+		.ghost-bracket__btn,
+		.bracket-mismatch__expected {
+			transition: none;
+		}
+	}
 </style>

package/dist/services/mock-ai.js

@@ -282,7 +282,7 @@ export function createMockMessage(role, content, options = {}) {
         ...options,
         metadata: role === 'assistant'
             ? {
-                model: 'claude-3-5-sonnet-mock',
+                model: 'nocturnium-demo-mock',
                 tokensUsed: Math.floor(content.length / 4),
                 latencyMs: Math.floor(500 + Math.random() * 1500),
                 ...options.metadata

package/dist/stores/ai.svelte.js

@@ -9,7 +9,7 @@ import { SvelteMap } from 'svelte/reactivity';
 // Default configuration
 const defaultConfig = {
     endpoint: '/api/chat',
-    model: 'claude-3-5-sonnet',
+    model: 'nocturnium-demo-mock',
     systemPrompt: 'You are a helpful coding assistant integrated into an IDE.',
     tools: [],
     maxTokens: 4096,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nocturnium/svelte-ide",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"description": "Svelte 5 code editor and IDE building blocks — custom editor, syntax highlighting, code folding, multi-cursor, LSP client, and optional realtime collaboration.",
 	"author": "Nocturnium & Jordan Dziat <hello@nocturnium.ai> (https://nocturnium.ai)",
 	"license": "MIT",