@nocturnium/svelte-ide 1.0.2 → 1.0.4

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/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 */

package/dist/components/editor/EditorPane.svelte

@@ -2,6 +2,7 @@
 	import Editor from './Editor.svelte';
 	import EditorTabs from './EditorTabs.svelte';
 	import type { EditorPreferences } from '../../types';
+	import type { AIAwareness } from './core/ai-awareness';
 	import {
 		getTabs,
 		getActiveTab,
@@ -15,11 +16,23 @@
 
 	interface Props {
 		preferences?: Partial<EditorPreferences>;
+		folding?: boolean;
+		multiCursor?: boolean;
+		maxCursors?: number;
+		aiAgents?: AIAwareness[];
 		onSave?: (path: string, content: string) => Promise<void>;
 		class?: string;
 	}
 
-	let { preferences = {}, onSave, class: className = '' }: Props = $props();
+	let {
+		preferences = {},
+		folding = true,
+		multiCursor = true,
+		maxCursors = 100,
+		aiAgents = [],
+		onSave,
+		class: className = ''
+	}: Props = $props();
 
 	// Use getter functions for reactive access
 	let tabs = $derived(getTabs());
@@ -70,6 +83,10 @@
 					language={activeTab.language}
 					readonly={activeTab.aiEditing}
 					{preferences}
+					{folding}
+					{multiCursor}
+					{maxCursors}
+					{aiAgents}
 					onChange={handleChange}
 					onCursorChange={handleCursorChange}
 					onSave={handleSave}

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

@@ -1,6 +1,11 @@
 import type { EditorPreferences } from '../../types';
+import type { AIAwareness } from './core/ai-awareness';
 interface Props {
     preferences?: Partial<EditorPreferences>;
+    folding?: boolean;
+    multiCursor?: boolean;
+    maxCursors?: number;
+    aiAgents?: AIAwareness[];
     onSave?: (path: string, content: string) => Promise<void>;
     class?: string;
 }

package/dist/components/editor/EditorSelections.svelte

@@ -26,6 +26,7 @@
 		viewportHeight: number;
 		getLine: (n: number) => { text: string } | undefined;
 		lineCount: number;
+		lineToVisualRow?: (line: number) => number;
 	}
 
 	let {
@@ -39,7 +40,8 @@
 		scrollTop,
 		viewportHeight,
 		getLine,
-		lineCount
+		lineCount,
+		lineToVisualRow = (line) => line
 	}: Props = $props();
 
 	// Selection rects memoization
@@ -70,17 +72,17 @@
 
 		// Calculate visible line range (with 1-line buffer for smooth scrolling)
 		const vh = viewportHeight || FALLBACK_VIEWPORT_HEIGHT;
-		const firstVisibleLine = Math.max(0, Math.floor(scrollTop / lineHeight) - 1);
-		const lastVisibleLine = Math.min(lineCount - 1, Math.ceil((scrollTop + vh) / lineHeight) + 1);
+		const firstVisibleRow = Math.max(0, Math.floor(scrollTop / lineHeight) - 1);
+		const lastVisibleRow = Math.max(0, Math.ceil((scrollTop + vh) / lineHeight) + 1);
 
 		// Create cache key from all cursors, scroll position, and measurement values
 		const cursorKeys = cursors
 			.map(
 				(c) =>
-					`${c.id}:${c.selection.anchor.line}:${c.selection.anchor.column}-${c.selection.head.line}:${c.selection.head.column}`
+					`${c.id}:${c.selection.anchor.line}/${lineToVisualRow(c.selection.anchor.line)}:${c.selection.anchor.column}-${c.selection.head.line}/${lineToVisualRow(c.selection.head.line)}:${c.selection.head.column}`
 			)
 			.join('|');
-		const key = `${cursorKeys}@${firstVisibleLine}-${lastVisibleLine}:${charWidth}:${lineHeight}:${gutterWidth}`;
+		const key = `${cursorKeys}@${firstVisibleRow}-${lastVisibleRow}:${charWidth}:${lineHeight}:${gutterWidth}`;
 		if (key === cachedSelectionKey) {
 			return cachedSelectionRects;
 		}
@@ -100,13 +102,14 @@
 			const start = getSelectionStart(cursor.selection);
 			const end = getSelectionEnd(cursor.selection);
 
-			// Only iterate over lines that are both selected AND visible
-			const renderStart = Math.max(start.line, firstVisibleLine);
-			const renderEnd = Math.min(end.line, lastVisibleLine);
+			const renderStart = Math.max(start.line, 0);
+			const renderEnd = Math.min(end.line, lineCount - 1);
 
 			for (let line = renderStart; line <= renderEnd; line++) {
 				const lineContent = getLine(line);
 				if (!lineContent) continue;
+				const visualRow = lineToVisualRow(line);
+				if (visualRow < firstVisibleRow || visualRow > lastVisibleRow) continue;
 
 				let startCol = 0;
 				let endCol = lineContent.text.length;
@@ -122,7 +125,7 @@
 				const width = Math.max((endCol - startCol) * charWidth, 4);
 
 				rects.push({
-					top: line * lineHeight,
+					top: visualRow * lineHeight,
 					left: gutterWidth + contentPadding + startCol * charWidth,
 					width,
 					height: lineHeight,
@@ -139,7 +142,7 @@
 	// Get cursor style for a specific cursor position
 	function getCursorStyleForPosition(pos: Position): string {
 		const left = gutterWidth + contentPadding + pos.column * charWidth;
-		const top = pos.line * lineHeight;
+		const top = lineToVisualRow(pos.line) * lineHeight;
 		return `left: ${left}px; top: ${top}px; height: ${lineHeight}px;`;
 	}
 </script>
@@ -156,11 +159,12 @@
 </div>
 
 <!-- Cursors (all cursors rendered with primary/secondary distinction) -->
-{#if cursorVisible && !isReadonly}
+{#if !isReadonly}
 	{#each cursors as cursor (cursor.id)}
 		<div
 			class="custom-editor__cursor"
 			class:custom-editor__cursor--secondary={!cursor.isPrimary}
+			class:custom-editor__cursor--hidden={!cursorVisible}
 			style={getCursorStyleForPosition(cursor.selection.head)}
 		></div>
 	{/each}
@@ -193,6 +197,7 @@
 		background: var(--color-nocturnium-aurora-blue);
 		z-index: 10;
 		pointer-events: none;
+		opacity: 1;
 		transition: opacity 80ms;
 	}
 
@@ -201,4 +206,15 @@
 		background: var(--ide-interactive-muted);
 		opacity: 0.85;
 	}
+
+	.custom-editor__cursor--hidden {
+		opacity: 0;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.custom-editor__cursor {
+			opacity: 1;
+			transition: none;
+		}
+	}
 </style>

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

@@ -19,6 +19,7 @@ interface Props {
         text: string;
     } | undefined;
     lineCount: number;
+    lineToVisualRow?: (line: number) => number;
 }
 declare const EditorSelections: import("svelte").Component<Props, {}, "">;
 type EditorSelections = ReturnType<typeof EditorSelections>;

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/components/editor/core/folding.d.ts

@@ -109,6 +109,17 @@ export declare class FoldManager {
      * Get visible lines (line numbers that should be rendered)
      */
     getVisibleLines(totalLines: number): number[];
+    /**
+     * Map a raw document line to its compacted visual row.
+     *
+     * Visible lines map to their exact row in getVisibleLines(totalLines). Hidden
+     * lines map to the row of the nearest visible fold header at or above them.
+     */
+    lineToVisualRow(line: number, totalLines: number): number;
+    /**
+     * Map a compacted visual row back to the raw document line rendered there.
+     */
+    visualRowToLine(visualRow: number, totalLines: number): number;
     /**
      * Get the number of hidden lines after a fold start
      */

package/dist/components/editor/core/folding.js

@@ -641,6 +641,47 @@ export class FoldManager {
         }
         return visible;
     }
+    /**
+     * Map a raw document line to its compacted visual row.
+     *
+     * Visible lines map to their exact row in getVisibleLines(totalLines). Hidden
+     * lines map to the row of the nearest visible fold header at or above them.
+     */
+    lineToVisualRow(line, totalLines) {
+        if (totalLines <= 0)
+            return 0;
+        const clampedLine = Math.max(0, Math.min(Math.floor(line), totalLines - 1));
+        const visible = this.getVisibleLines(totalLines);
+        if (visible.length === 0)
+            return 0;
+        let low = 0;
+        let high = visible.length;
+        while (low < high) {
+            const mid = Math.floor((low + high) / 2);
+            if (visible[mid] < clampedLine) {
+                low = mid + 1;
+            }
+            else {
+                high = mid;
+            }
+        }
+        if (visible[low] === clampedLine) {
+            return low;
+        }
+        return Math.max(0, low - 1);
+    }
+    /**
+     * Map a compacted visual row back to the raw document line rendered there.
+     */
+    visualRowToLine(visualRow, totalLines) {
+        if (totalLines <= 0)
+            return 0;
+        const visible = this.getVisibleLines(totalLines);
+        if (visible.length === 0)
+            return 0;
+        const clampedRow = Math.max(0, Math.min(Math.floor(visualRow), visible.length - 1));
+        return visible[clampedRow];
+    }
     /**
      * Get the number of hidden lines after a fold start
      */

package/dist/components/editor/core/index.d.ts

@@ -4,18 +4,13 @@
 export * from './state';
 export * from './navigation';
 export * from './keybindings';
-export * from './crdt-binding';
 export * from './search';
 export * from './folding';
 export * from './multi-cursor';
 export * from './complexity-analyzer';
 export * from './ai-awareness';
-export * from './ghost-pair';
 export * from './semantic-analyzer';
 export * from './commands';
-export * from './timeline';
-export * from './conflict-predictor';
-export * from './echo-cursor';
 export * from './bracket-healer';
 export * from './git-blame';
 export * from './snippet-manager';

package/dist/components/editor/core/index.js

@@ -4,18 +4,17 @@
 export * from './state';
 export * from './navigation';
 export * from './keybindings';
-export * from './crdt-binding';
+// NOTE: './crdt-binding' is intentionally NOT re-exported here. It imports yjs
+// (an optional peer dependency), so leaking it through this barrel would force
+// yjs onto every consumer of the non-collaborative editor. The CRDT binding is
+// available through the dedicated `@nocturnium/svelte-ide/crdt` entry instead.
 export * from './search';
 export * from './folding';
 export * from './multi-cursor';
 export * from './complexity-analyzer';
 export * from './ai-awareness';
-export * from './ghost-pair';
 export * from './semantic-analyzer';
 export * from './commands';
-export * from './timeline';
-export * from './conflict-predictor';
-export * from './echo-cursor';
 export * from './bracket-healer';
 export * from './git-blame';
 export * from './snippet-manager';

package/dist/components/editor/core/state.d.ts

@@ -305,6 +305,10 @@ export declare class EditorState {
      * Deep copy a selection to prevent reference issues in history
      */
     private deepCopySelection;
+    private transformCursorUpdatesForInsert;
+    private transformPositionForInsert;
+    private transformCursorUpdatesForDelete;
+    private transformPositionForDelete;
     /**
      * Check if undo is available
      */
@@ -317,6 +321,7 @@ export declare class EditorState {
      * Compare two tokenizer states for equality
      */
     private tokenizerStatesEqual;
+    private tokenizerStateValuesEqual;
     /**
      * Re-tokenize a range of lines with early-exit optimization
      */