@nocturnium/svelte-ide 1.0.1 → 1.0.3

package/README.md

@@ -23,7 +23,7 @@ LSP, collaboration, AI, and plugin pieces into a full IDE experience.
 - **Find & replace** with regex support.
 - **LSP client** — autocomplete, hover, signatures, diagnostics over WebSocket.
 - **Realtime collaboration** (optional) — CRDT/Yjs, tree-shakeable.
-- **AI panel & agent presence** layers for assistant-driven editing.
+- **AI panel & agent presence** layers for assistant UI and presence patterns.
 - **Plugin system** with a proposal-based lifecycle (bring your own backend).
 - **Themeable** — every color/size is a CSS custom property you can override.
 - **Zero external UI dependencies**; collaboration deps are optional peers.
@@ -138,8 +138,10 @@ See the [Collaboration guide](https://github.com/nocturnium/svelte-ide/blob/main
 ```
 
 `<AIPanel>` talks to **your own** chat endpoint (configurable; defaults to
-`/api/chat`) via the AI store. Model output is HTML-escaped with link-scheme
-whitelisting before rendering. See the
+`/api/chat`) via the AI store. The repository's demo route returns canned mock
+responses only; it does not connect to a real model provider. Consumers should
+bring their own backend for inference. Model output is HTML-escaped with
+link-scheme whitelisting before rendering. See the
 [AI & agents guide](https://github.com/nocturnium/svelte-ide/blob/main/docs/guides/ai-and-agents.md).
 
 ## Entry points

package/dist/components/ai/AIMessageContent.svelte

@@ -286,56 +286,60 @@
 
 	/* Syntax highlighting tokens */
 	.code-content :global(.token-keyword) {
-		color: var(--syntax-keyword, #c792ea);
+		color: var(--ide-syntax-keyword);
 	}
 
 	.code-content :global(.token-string) {
-		color: var(--syntax-string, #c3e88d);
+		color: var(--ide-syntax-string);
 	}
 
 	.code-content :global(.token-number) {
-		color: var(--syntax-number, #f78c6c);
+		color: var(--ide-syntax-number);
 	}
 
 	.code-content :global(.token-comment) {
-		color: var(--syntax-comment, #546e7a);
+		color: var(--ide-syntax-comment);
 		font-style: italic;
 	}
 
 	.code-content :global(.token-function) {
-		color: var(--syntax-function, #82aaff);
+		color: var(--ide-syntax-function);
 	}
 
 	.code-content :global(.token-class) {
-		color: var(--syntax-class, #ffcb6b);
+		color: var(--ide-syntax-type);
 	}
 
 	.code-content :global(.token-operator) {
-		color: var(--syntax-operator, #89ddff);
+		color: var(--ide-syntax-operator);
 	}
 
 	.code-content :global(.token-punctuation) {
-		color: var(--syntax-punctuation, #89ddff);
+		color: var(--ide-syntax-punctuation);
 	}
 
 	.code-content :global(.token-variable) {
-		color: var(--syntax-variable, #f07178);
+		color: var(--ide-syntax-variable);
 	}
 
 	.code-content :global(.token-property) {
-		color: var(--syntax-property, #f07178);
+		color: var(--ide-accent);
 	}
 
 	.code-content :global(.token-type) {
-		color: var(--syntax-type, #ffcb6b);
+		color: var(--ide-syntax-type);
 	}
 
 	.code-content :global(.token-tag) {
-		color: var(--syntax-tag, #f07178);
+		color: var(--ide-syntax-tag);
 	}
 
 	.code-content :global(.token-attribute) {
-		color: var(--syntax-attribute, #c792ea);
+		color: var(--ide-syntax-attribute);
+	}
+
+	.code-content :global(.token-constant) {
+		color: var(--ide-syntax-constant);
 	}
 
 	.code-content :global(.token-text),
@@ -346,7 +350,7 @@
 	/* Streaming cursor */
 	.cursor {
 		animation: blink 1s step-end infinite;
-		color: var(--color-nocturnium-wave);
+		color: var(--ide-accent);
 	}
 
 	@keyframes blink {
@@ -354,4 +358,10 @@
 			opacity: 0;
 		}
 	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.cursor {
+			animation: none;
+		}
+	}
 </style>

package/dist/components/ai/AIPanel.svelte

@@ -208,6 +208,7 @@
 					<Icon name="sparkles" size={16} />
 					<span>AI Assistant</span>
 				</div>
+				<span class="ai-panel__mock-badge">Demo mock - no real model</span>
 			</div>
 			<div class="ai-panel__actions">
 				<Button variant="ghost" size="xs" onclick={handleNewConversation} title="New conversation">
@@ -337,6 +338,7 @@
 		display: flex;
 		align-items: center;
 		gap: var(--ide-spacing-sm);
+		min-width: 0;
 	}
 
 	.ai-panel__title {
@@ -346,6 +348,22 @@
 		font-size: var(--ide-font-size-sm);
 		font-weight: 600;
 		color: var(--ide-text-primary);
+		flex-shrink: 0;
+	}
+
+	.ai-panel__mock-badge {
+		display: inline-flex;
+		align-items: center;
+		min-width: 0;
+		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);
+		background: color-mix(in srgb, var(--ide-accent) 10%, var(--ide-bg-secondary));
+		color: var(--ide-text-secondary);
+		font-size: var(--ide-font-size-xs);
+		font-weight: 500;
+		line-height: var(--ide-line-height-normal);
+		white-space: nowrap;
 	}
 
 	.ai-panel__actions {
@@ -541,6 +559,10 @@
 		.ai-panel__input {
 			padding: var(--ide-spacing-sm);
 		}
+
+		.ai-panel__mock-badge {
+			white-space: normal;
+		}
 	}
 
 	@media (max-width: 480px) {

package/dist/components/editor/CollaborativeEditor.svelte

@@ -8,14 +8,30 @@
 
 	import { onMount, onDestroy } from 'svelte';
 	import * as Y from 'yjs';
+	import type { Awareness } from 'y-protocols/awareness';
 	import CustomEditor from './CustomEditor.svelte';
-	import { createEditorState, createCRDTBinding, type CRDTBinding } from './core';
+	import { createEditorState } from './core/state';
+	import { createCRDTBinding, type CRDTBinding } from './core/crdt-binding';
+	import { createAwarenessProtocol, type AwarenessProtocol } from '../../crdt/awareness';
+	import {
+		CollaborativeProvider,
+		createProvider,
+		type CollaborativeProvider as CollaborativeProviderType
+	} from '../../crdt/provider';
 	import type { EditorPreferences } from '../../types';
 	import type { CollaborationUser } from '../../types/crdt';
 
 	interface Props {
 		/** Yjs document for collaboration (optional - will create one if not provided) */
 		doc?: Y.Doc;
+		/** Existing provider; its awareness is used for transmitted presence */
+		provider?: CollaborativeProviderType;
+		/** Existing provider-attached awareness for transmitted presence */
+		awareness?: Awareness;
+		/** WebSocket server URL when the component should create a provider */
+		serverUrl?: string;
+		/** WebSocket room ID when the component should create a provider */
+		roomId?: string;
 		/** Document ID for standalone mode */
 		documentId?: string;
 		/** Initial content when creating a new document */
@@ -32,6 +48,10 @@
 		class?: string;
 		/** Current user info for cursor display */
 		currentUser?: CollaborationUser;
+		/** File path this user is viewing */
+		viewingFile?: string;
+		/** File path this user is editing */
+		editingFile?: string;
 		/** Called when content changes */
 		onChange?: (content: string) => void;
 		/** Called when cursor position changes */
@@ -42,14 +62,20 @@
 
 	let {
 		doc: externalDoc,
-		documentId: _documentId,
+		provider: externalProvider,
+		awareness: externalAwareness,
+		serverUrl,
+		roomId,
+		documentId = 'document',
 		initialContent = '',
 		textName = 'content',
 		language = 'plaintext',
 		readonly = false,
 		preferences = {},
 		class: className = '',
-		currentUser: _currentUser,
+		currentUser,
+		viewingFile,
+		editingFile,
 		onChange,
 		onCursorChange,
 		onSave
@@ -57,6 +83,8 @@
 
 	// Create internal doc if none provided
 	let internalDoc: Y.Doc | null = null;
+	let ownedProvider: CollaborativeProvider | null = null;
+	let awarenessProtocol: AwarenessProtocol | null = null;
 
 	// Editor state and CRDT binding
 	let editorState = $state<ReturnType<typeof createEditorState> | null>(null);
@@ -82,6 +110,27 @@
 			}
 		}
 
+		const provider =
+			externalProvider ??
+			(serverUrl && roomId
+				? createProvider(doc, serverUrl, roomId, currentUser ?? createAnonymousUser(documentId))
+				: null);
+		if (provider && !externalProvider) {
+			ownedProvider = provider;
+		}
+
+		const awareness = provider?.awareness ?? externalAwareness;
+		awarenessProtocol = createAwarenessProtocol(awareness ?? doc);
+		if (currentUser) {
+			awarenessProtocol.setUser(currentUser);
+		}
+		if (viewingFile !== undefined) {
+			awarenessProtocol.setViewingFile(viewingFile);
+		}
+		if (editingFile !== undefined) {
+			awarenessProtocol.setEditingFile(editingFile);
+		}
+
 		// Create editor state
 		editorState = createEditorState({
 			content: initialContent,
@@ -131,9 +180,21 @@
 		yTextObserver?.();
 		yTextObserver = null;
 		crdtBinding?.destroy();
+		awarenessProtocol?.destroy();
+		awarenessProtocol = null;
+		ownedProvider?.destroy();
+		ownedProvider = null;
 		internalDoc?.destroy();
 	});
 
+	function createAnonymousUser(id: string): CollaborationUser {
+		return {
+			id,
+			name: 'Anonymous',
+			color: '#60a5fa'
+		};
+	}
+
 	// Handle content changes from the inner editor (local typing).
 	//
 	// The inner CustomEditor maintains its OWN EditorState, so local edits never
@@ -157,8 +218,10 @@
 	function handleCursorChange(line: number, column: number) {
 		onCursorChange?.(line, column);
 
-		// Could broadcast cursor position to other collaborators here
-		// using Yjs awareness protocol
+		if (!crdtBinding || !awarenessProtocol) return;
+		const index = crdtBinding.positionToIndex({ line, column });
+		awarenessProtocol.setCursor(index, index);
+		awarenessProtocol.setSelection(index, index);
 	}
 </script>
 

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

@@ -1,9 +1,19 @@
 import * as Y from 'yjs';
+import type { Awareness } from 'y-protocols/awareness';
+import { type CollaborativeProvider as CollaborativeProviderType } from '../../crdt/provider';
 import type { EditorPreferences } from '../../types';
 import type { CollaborationUser } from '../../types/crdt';
 interface Props {
     /** Yjs document for collaboration (optional - will create one if not provided) */
     doc?: Y.Doc;
+    /** Existing provider; its awareness is used for transmitted presence */
+    provider?: CollaborativeProviderType;
+    /** Existing provider-attached awareness for transmitted presence */
+    awareness?: Awareness;
+    /** WebSocket server URL when the component should create a provider */
+    serverUrl?: string;
+    /** WebSocket room ID when the component should create a provider */
+    roomId?: string;
     /** Document ID for standalone mode */
     documentId?: string;
     /** Initial content when creating a new document */
@@ -20,6 +30,10 @@ interface Props {
     class?: string;
     /** Current user info for cursor display */
     currentUser?: CollaborationUser;
+    /** File path this user is viewing */
+    viewingFile?: string;
+    /** File path this user is editing */
+    editingFile?: string;
     /** Called when content changes */
     onChange?: (content: string) => void;
     /** Called when cursor position changes */

package/dist/components/editor/CustomEditor.svelte

@@ -53,7 +53,7 @@
 		multiCursor?: boolean;
 		/** Maximum number of cursors (default: 100) */
 		maxCursors?: number;
-		/** Enable complexity highlighting (default: true) */
+		/** Enable complexity highlighting (default: false) */
 		complexityHighlighting?: boolean;
 		/** Minimum complexity score to show highlighting (default: 50) */
 		complexityThreshold?: number;
@@ -61,7 +61,7 @@
 		aiAgents?: AIAwareness[];
 		/** Show AI cursor labels (default: true) */
 		showAILabels?: boolean;
-		/** Show AI focus regions (default: true) */
+		/** Show AI focus regions (default: false) */
 		showAIFocusRegions?: boolean;
 		onChange?: (content: string) => void;
 		onCursorChange?: (line: number, column: number) => void;
@@ -81,11 +81,11 @@
 		folding = true,
 		multiCursor = true,
 		maxCursors = 100,
-		complexityHighlighting = true,
+		complexityHighlighting = false,
 		complexityThreshold = 50,
 		aiAgents = [],
 		showAILabels = true,
-		showAIFocusRegions = true,
+		showAIFocusRegions = false,
 		onChange,
 		onCursorChange,
 		onCursorsChange,
@@ -171,10 +171,23 @@
 	// Input handler module (created in initEditor)
 	let inputHandlers = $state(null as unknown as ReturnType<typeof createEditorInput>);
 
+	function lineToVisualRow(line: number): number {
+		const lineCount = editorState?.lineCount ?? lines.length;
+		if (!folding || lineCount <= 0) return Math.max(0, Math.floor(line));
+		return foldManager.lineToVisualRow(line, lineCount);
+	}
+
+	function visualRowToLine(visualRow: number): number {
+		const lineCount = editorState?.lineCount ?? lines.length;
+		if (!folding || lineCount <= 0) return Math.max(0, Math.floor(visualRow));
+		return foldManager.visualRowToLine(visualRow, lineCount);
+	}
+
 	// Scroll management module
 	const editorScroll = createEditorScroll({
 		getEditorContent: () => editorContent,
 		getSelection: () => selection,
+		lineToVisualRow: (line) => lineToVisualRow(line),
 		getMeasurements: () => ({ lineHeight, charWidth, gutterWidth, contentPadding: CONTENT_PADDING })
 	});
 	const { scrollCursorIntoView } = editorScroll;
@@ -378,6 +391,7 @@
 			getCursors: () => cursors,
 			getScrollPosition: () => ({ scrollTop, scrollLeft }),
 			getMeasurements: () => ({ charWidth, lineHeight, gutterWidth }),
+			visualRowToLine: (visualRow) => visualRowToLine(visualRow),
 
 			onOpenFind: (withReplace) => openFind(withReplace),
 			onCloseFind: () => closeFind(),
@@ -507,10 +521,12 @@
 		if (!folding || visibleLineIndices.length === 0) {
 			return lines.map((line, index) => ({ line, index }));
 		}
-		return visibleLineIndices.map((index) => ({
-			line: lines[index],
-			index
-		}));
+		return visibleLineIndices
+			.filter((index) => index >= 0 && index < lines.length)
+			.map((index) => ({
+				line: lines[index],
+				index
+			}));
 	});
 
 	/** Extra rows rendered above/below the viewport to avoid blank edges while scrolling. */
@@ -540,6 +556,7 @@
 		}> = [];
 		for (let visualRow = firstRow; visualRow <= lastRow; visualRow++) {
 			const entry = visibleLines[visualRow];
+			if (!entry) continue;
 			slice.push({ line: entry.line, index: entry.index, visualRow });
 		}
 		return slice;
@@ -590,7 +607,8 @@
 			setContent: (content) => editorState.setContent(content),
 			scrollCursorIntoView: () => scrollCursorIntoView(),
 			focusEditor: () => hiddenInput?.focus(),
-			isReadonly: () => readonly
+			isReadonly: () => readonly,
+			lineToVisualRow: (line) => lineToVisualRow(line)
 		});
 	}
 
@@ -1006,6 +1024,7 @@
 			{viewportHeight}
 			getLine={(n) => editorState.getLine(n)}
 			lineCount={editorState?.lineCount ?? 0}
+			lineToVisualRow={(line) => lineToVisualRow(line)}
 		/>
 
 		<!-- Lines (virtualized: only the windowed slice is rendered) -->
@@ -1134,21 +1153,21 @@
 	:global(.token-comment-line),
 	:global(.token-comment-block),
 	:global(.token-comment-doc) {
-		color: var(--ide-text-muted);
+		color: var(--ide-syntax-comment);
 		font-style: italic;
 	}
 
 	:global(.token-string),
 	:global(.token-string-template) {
-		color: var(--color-nocturnium-aurora-green);
+		color: var(--ide-syntax-string);
 	}
 
 	:global(.token-string-regex) {
-		color: var(--color-nocturnium-aurora-pink);
+		color: var(--ide-syntax-tag);
 	}
 
 	:global(.token-string-escape) {
-		color: var(--color-nocturnium-aurora-yellow);
+		color: var(--ide-syntax-constant);
 	}
 
 	:global(.token-number),
@@ -1156,7 +1175,7 @@
 	:global(.token-number-float),
 	:global(.token-number-hex),
 	:global(.token-number-binary) {
-		color: var(--color-nocturnium-aurora-yellow);
+		color: var(--ide-syntax-number);
 	}
 
 	:global(.token-keyword),
@@ -1165,7 +1184,7 @@
 	:global(.token-keyword-definition),
 	:global(.token-keyword-module),
 	:global(.token-keyword-storage) {
-		color: var(--color-nocturnium-aurora-purple);
+		color: var(--ide-syntax-keyword);
 	}
 
 	:global(.token-operator),
@@ -1173,30 +1192,30 @@
 	:global(.token-operator-comparison),
 	:global(.token-operator-logical),
 	:global(.token-operator-assignment) {
-		color: var(--ide-text-primary);
+		color: var(--ide-syntax-operator);
 	}
 
 	:global(.token-variable) {
-		color: var(--ide-text-primary);
+		color: var(--ide-syntax-variable);
 	}
 
 	:global(.token-variable-definition) {
-		color: var(--color-nocturnium-wave);
+		color: var(--ide-accent);
 	}
 
 	:global(.token-variable-parameter) {
-		color: color-mix(in srgb, var(--color-nocturnium-wave) 80%, var(--ide-text-muted));
+		color: color-mix(in srgb, var(--ide-accent) 80%, var(--ide-text-muted));
 	}
 
 	:global(.token-function),
 	:global(.token-function-definition),
 	:global(.token-function-call) {
-		color: var(--color-nocturnium-aurora-blue);
+		color: var(--ide-syntax-function);
 	}
 
 	:global(.token-property),
 	:global(.token-property-definition) {
-		color: var(--color-nocturnium-wave);
+		color: var(--ide-accent);
 	}
 
 	:global(.token-type),
@@ -1204,14 +1223,14 @@
 	:global(.token-type-interface),
 	:global(.token-type-namespace),
 	:global(.token-type-builtin) {
-		color: var(--color-nocturnium-teal);
+		color: var(--ide-syntax-type);
 	}
 
 	:global(.token-constant),
 	:global(.token-constant-boolean),
 	:global(.token-constant-null),
 	:global(.token-constant-builtin) {
-		color: var(--color-nocturnium-aurora-yellow);
+		color: var(--ide-syntax-constant);
 	}
 
 	:global(.token-punctuation),
@@ -1220,34 +1239,34 @@
 	:global(.token-punctuation-paren),
 	:global(.token-punctuation-separator),
 	:global(.token-punctuation-accessor) {
-		color: var(--ide-text-secondary);
+		color: var(--ide-syntax-punctuation);
 	}
 
 	/* Svelte template braces - make them stand out */
 	:global(.token-punctuation-brace) {
-		color: var(--color-nocturnium-aurora-yellow);
+		color: var(--ide-syntax-constant);
 		font-weight: 600;
 	}
 
 	:global(.token-tag),
 	:global(.token-tag-name) {
-		color: var(--color-nocturnium-aurora-pink);
+		color: var(--ide-syntax-tag);
 	}
 
 	:global(.token-tag-attribute) {
-		color: var(--color-nocturnium-aurora-yellow);
+		color: var(--ide-syntax-attribute);
 	}
 
 	:global(.token-tag-attribute-value) {
-		color: var(--color-nocturnium-aurora-green);
+		color: var(--ide-syntax-string);
 	}
 
 	:global(.token-tag-punctuation) {
-		color: var(--ide-text-secondary);
+		color: var(--ide-syntax-punctuation);
 	}
 
 	:global(.token-markup-heading) {
-		color: var(--color-nocturnium-aurora-blue);
+		color: var(--ide-syntax-function);
 		font-weight: bold;
 	}
 
@@ -1260,12 +1279,12 @@
 	}
 
 	:global(.token-markup-link) {
-		color: var(--color-nocturnium-wave);
+		color: var(--ide-accent);
 		text-decoration: underline;
 	}
 
 	:global(.token-markup-code) {
-		color: var(--color-nocturnium-aurora-green);
+		color: var(--ide-syntax-string);
 		background: var(--ide-bg-tertiary);
 	}
 
@@ -1275,7 +1294,7 @@
 	}
 
 	:global(.token-markup-list) {
-		color: var(--color-nocturnium-ember);
+		color: var(--ide-text-accent);
 	}
 
 	:global(.token-invalid) {

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

@@ -14,7 +14,7 @@ interface Props {
     multiCursor?: boolean;
     /** Maximum number of cursors (default: 100) */
     maxCursors?: number;
-    /** Enable complexity highlighting (default: true) */
+    /** Enable complexity highlighting (default: false) */
     complexityHighlighting?: boolean;
     /** Minimum complexity score to show highlighting (default: 50) */
     complexityThreshold?: number;
@@ -22,7 +22,7 @@ interface Props {
     aiAgents?: AIAwareness[];
     /** Show AI cursor labels (default: true) */
     showAILabels?: boolean;
-    /** Show AI focus regions (default: true) */
+    /** Show AI focus regions (default: false) */
     showAIFocusRegions?: boolean;
     onChange?: (content: string) => void;
     onCursorChange?: (line: number, column: number) => void;

package/dist/components/editor/Editor.svelte

@@ -8,6 +8,7 @@
 
 	import CustomEditor from './CustomEditor.svelte';
 	import type { EditorPreferences } from '../../types';
+	import type { AIAwareness } from './core/ai-awareness';
 
 	interface Props {
 		/** Document content */
@@ -20,6 +21,14 @@
 		preferences?: Partial<EditorPreferences>;
 		/** Additional CSS class */
 		class?: string;
+		/** Enable code folding */
+		folding?: boolean;
+		/** Enable multi-cursor editing */
+		multiCursor?: boolean;
+		/** Maximum number of cursors */
+		maxCursors?: number;
+		/** AI agents for Ghost Pair visualization */
+		aiAgents?: AIAwareness[];
 		/** Called when content changes */
 		onChange?: (content: string) => void;
 		/** Called when cursor position changes */
@@ -34,6 +43,10 @@
 		readonly = false,
 		preferences = {},
 		class: className = '',
+		folding = true,
+		multiCursor = true,
+		maxCursors = 100,
+		aiAgents = [],
 		onChange,
 		onCursorChange,
 		onSave
@@ -46,6 +59,10 @@
 		{language}
 		{readonly}
 		{preferences}
+		{folding}
+		{multiCursor}
+		{maxCursors}
+		{aiAgents}
 		{onChange}
 		{onCursorChange}
 		{onSave}

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

@@ -1,4 +1,5 @@
 import type { EditorPreferences } from '../../types';
+import type { AIAwareness } from './core/ai-awareness';
 interface Props {
     /** Document content */
     content: string;
@@ -10,6 +11,14 @@ interface Props {
     preferences?: Partial<EditorPreferences>;
     /** Additional CSS class */
     class?: string;
+    /** Enable code folding */
+    folding?: boolean;
+    /** Enable multi-cursor editing */
+    multiCursor?: boolean;
+    /** Maximum number of cursors */
+    maxCursors?: number;
+    /** AI agents for Ghost Pair visualization */
+    aiAgents?: AIAwareness[];
     /** Called when content changes */
     onChange?: (content: string) => void;
     /** Called when cursor position changes */