@nocturnium/svelte-ide 1.0.0-rc.1

package/dist/components/editor/EditorLines.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+	/**
+	 * EditorLines - Renders the main line loop with gutter, tokens, and fold placeholders.
+	 *
+	 * Internal sub-component extracted from CustomEditor.svelte.
+	 * Not exported from the library — used only by CustomEditor.
+	 */
+	import type { TokenizedLine } from './tokenizer';
+	import TokenRenderer from './TokenRenderer.svelte';
+	import EditorGutter from './EditorGutter.svelte';
+
+	interface LineData {
+		tokens?: TokenizedLine;
+		text?: string;
+	}
+
+	interface Props {
+		/**
+		 * Virtualized slice of the (folded) visible line sequence. Only the rows
+		 * intersecting the viewport (+ overscan) are passed in. Each entry carries:
+		 *  - `line`: the line data to render
+		 *  - `index`: the raw 0-based line index (for gutter numbers, folds)
+		 *  - `visualRow`: the absolute visual-row position, used to position the
+		 *    rendered line at its true offset (visualRow * lineHeight)
+		 */
+		windowedLines: Array<{ line: LineData | undefined; index: number; visualRow: number }>;
+		/** Full scrollable content height in px (spacer keeps the scrollbar correct). */
+		totalHeight: number;
+		lineHeight: number;
+		activeLine: number;
+		highlightActiveLine: boolean;
+		lineNumbers: string; // 'on' | 'off'
+		gutterWidth: number;
+		tabSize: number;
+		folding: boolean;
+		hasFoldIndicator: (line: number) => boolean;
+		isFoldCollapsed: (line: number) => boolean;
+		getHiddenLineCount: (line: number) => number;
+		onFoldIndicatorClick: (line: number, e: MouseEvent) => void;
+		onExpandFold: (line: number) => void;
+	}
+
+	let {
+		windowedLines,
+		totalHeight,
+		lineHeight,
+		activeLine,
+		highlightActiveLine,
+		lineNumbers,
+		gutterWidth,
+		tabSize,
+		folding,
+		hasFoldIndicator,
+		isFoldCollapsed,
+		getHiddenLineCount,
+		onFoldIndicatorClick,
+		onExpandFold
+	}: Props = $props();
+</script>
+
+<div class="custom-editor__lines" style="height: {totalHeight}px;">
+	{#each windowedLines as { line, index, visualRow } (index)}
+		<div
+			class="custom-editor__line"
+			class:custom-editor__line--active={highlightActiveLine && activeLine === index}
+			style="top: {visualRow * lineHeight}px;"
+			data-line-index={index}
+		>
+			<EditorGutter
+				lineIndex={index}
+				{lineNumbers}
+				{gutterWidth}
+				{folding}
+				hasFoldIndicator={hasFoldIndicator(index)}
+				isFoldCollapsed={isFoldCollapsed(index)}
+				hiddenLineCount={getHiddenLineCount(index)}
+				{onFoldIndicatorClick}
+			/>
+
+			<!-- Line content -->
+			<div class="custom-editor__line-content">
+				<TokenRenderer tokens={line?.tokens} {tabSize} />
+				{#if folding && isFoldCollapsed(index)}
+					<button
+						class="custom-editor__fold-placeholder"
+						title="{getHiddenLineCount(index)} lines hidden"
+						onclick={(e) => { e.stopPropagation(); onExpandFold(index); }}
+						aria-label="Expand {getHiddenLineCount(index)} hidden lines"
+					>...</button>
+				{/if}
+			</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.custom-editor__lines {
+		position: relative;
+		min-height: 100%;
+		z-index: 2;
+	}
+
+	/*
+	 * Each line is absolutely positioned at its true vertical offset
+	 * (top = visualRow * lineHeight, set inline). This lets us render only the
+	 * windowed slice of rows while keeping every line at the correct position;
+	 * the parent .custom-editor__lines reserves the full document height so the
+	 * scrollbar range stays correct.
+	 */
+	.custom-editor__line {
+		position: absolute;
+		left: 0;
+		display: flex;
+		/* At least full width (so active-line highlight spans the viewport) but free
+		   to grow with long, non-wrapping content for horizontal scrolling. */
+		min-width: 100%;
+		width: max-content;
+		height: var(--editor-line-height);
+		line-height: var(--editor-line-height);
+		min-height: var(--editor-line-height);
+		cursor: default;
+	}
+
+	.custom-editor__line--active {
+		background: var(--ide-bg-elevated);
+		box-shadow: inset 2px 0 0 0 var(--ide-interactive);
+	}
+
+	/* Gutter overrides for active line (cross-component into EditorGutter) */
+	.custom-editor__line--active :global(.custom-editor__gutter) {
+		background: var(--ide-bg-elevated);
+	}
+
+	.custom-editor__line--active :global(.custom-editor__line-number) {
+		color: var(--ide-text-secondary);
+	}
+
+	/* Show fold indicator on line hover (cross-component into EditorGutter) */
+	.custom-editor__line:hover :global(.custom-editor__fold-indicator) {
+		opacity: 1;
+	}
+
+	.custom-editor__line-content {
+		flex: 1;
+		white-space: pre;
+		padding-left: 8px;
+		cursor: text;
+	}
+
+	/* Ensure line-content cursor doesn't affect siblings */
+	.custom-editor__line-content,
+	.custom-editor__line-content * {
+		cursor: text;
+	}
+
+	/* Fold placeholder (ellipsis) - styled as inline button */
+	.custom-editor__fold-placeholder {
+		display: inline-block;
+		margin-left: 4px;
+		padding: 0 6px;
+		background: var(--ide-bg-tertiary);
+		border: 1px solid var(--ide-border);
+		border-radius: 3px;
+		color: var(--ide-text-muted);
+		font: inherit;
+		font-size: 0.85em;
+		cursor: pointer;
+		vertical-align: middle;
+		line-height: 1.2;
+	}
+
+	.custom-editor__fold-placeholder:hover {
+		background: var(--ide-bg-elevated);
+		color: var(--ide-text-secondary);
+		border-color: var(--ide-interactive);
+	}
+
+	.custom-editor__fold-placeholder:focus {
+		outline: 2px solid var(--ide-interactive);
+		outline-offset: 1px;
+	}
+</style>

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

@@ -0,0 +1,43 @@
+/**
+     * EditorLines - Renders the main line loop with gutter, tokens, and fold placeholders.
+     *
+     * Internal sub-component extracted from CustomEditor.svelte.
+     * Not exported from the library — used only by CustomEditor.
+     */
+import type { TokenizedLine } from './tokenizer';
+interface LineData {
+    tokens?: TokenizedLine;
+    text?: string;
+}
+interface Props {
+    /**
+     * Virtualized slice of the (folded) visible line sequence. Only the rows
+     * intersecting the viewport (+ overscan) are passed in. Each entry carries:
+     *  - `line`: the line data to render
+     *  - `index`: the raw 0-based line index (for gutter numbers, folds)
+     *  - `visualRow`: the absolute visual-row position, used to position the
+     *    rendered line at its true offset (visualRow * lineHeight)
+     */
+    windowedLines: Array<{
+        line: LineData | undefined;
+        index: number;
+        visualRow: number;
+    }>;
+    /** Full scrollable content height in px (spacer keeps the scrollbar correct). */
+    totalHeight: number;
+    lineHeight: number;
+    activeLine: number;
+    highlightActiveLine: boolean;
+    lineNumbers: string;
+    gutterWidth: number;
+    tabSize: number;
+    folding: boolean;
+    hasFoldIndicator: (line: number) => boolean;
+    isFoldCollapsed: (line: number) => boolean;
+    getHiddenLineCount: (line: number) => number;
+    onFoldIndicatorClick: (line: number, e: MouseEvent) => void;
+    onExpandFold: (line: number) => void;
+}
+declare const EditorLines: import("svelte").Component<Props, {}, "">;
+type EditorLines = ReturnType<typeof EditorLines>;
+export default EditorLines;

package/dist/components/editor/EditorPane.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import Editor from './Editor.svelte';
+	import EditorTabs from './EditorTabs.svelte';
+	import type { EditorTab, EditorPreferences } from '../../types';
+	import {
+		getTabs,
+		getActiveTab,
+		getActiveTabId,
+		setActiveTab,
+		closeTab,
+		updateContent,
+		markSaved,
+		updateCursor
+	} from '../../stores/editor.svelte';
+
+	interface Props {
+		preferences?: Partial<EditorPreferences>;
+		onSave?: (path: string, content: string) => Promise<void>;
+		class?: string;
+	}
+
+	let { preferences = {}, onSave, class: className = '' }: Props = $props();
+
+	// Use getter functions for reactive access
+	let tabs = $derived(getTabs());
+	let activeTab = $derived(getActiveTab());
+	let activeTabId = $derived(getActiveTabId());
+
+	async function handleSave() {
+		if (!activeTab) return;
+
+		if (onSave) {
+			await onSave(activeTab.path, activeTab.content);
+		}
+		markSaved(activeTab.id);
+	}
+
+	function handleChange(content: string) {
+		if (activeTab) {
+			updateContent(activeTab.id, content);
+		}
+	}
+
+	function handleCursorChange(line: number, column: number) {
+		if (activeTab) {
+			updateCursor(activeTab.id, { line, column });
+		}
+	}
+
+	function handleCloseTab(tabId: string) {
+		const tab = tabs.find((t) => t.id === tabId);
+		if (tab?.isDirty) {
+			// Could show confirmation dialog
+			if (!confirm(`"${tab.name}" has unsaved changes. Close anyway?`)) {
+				return;
+			}
+		}
+		closeTab(tabId);
+	}
+</script>
+
+<div class="editor-pane {className}">
+	{#if tabs.length > 0}
+		<EditorTabs
+			{tabs}
+			{activeTabId}
+			onSelect={setActiveTab}
+			onClose={handleCloseTab}
+		/>
+
+		{#if activeTab}
+			<div class="editor-pane__content">
+				<Editor
+					content={activeTab.content}
+					language={activeTab.language}
+					readonly={activeTab.aiEditing}
+					{preferences}
+					onChange={handleChange}
+					onCursorChange={handleCursorChange}
+					onSave={handleSave}
+				/>
+			</div>
+		{/if}
+	{:else}
+		<div class="editor-pane__empty">
+			<p>No files open</p>
+			<p class="editor-pane__hint">
+				Open a file from the explorer or use <kbd>Cmd/Ctrl+P</kbd> to quick open
+			</p>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.editor-pane {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		background: var(--ide-bg-primary);
+	}
+
+	.editor-pane__content {
+		flex: 1;
+		min-height: 0;
+	}
+
+	.editor-pane__empty {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		text-align: center;
+		color: var(--ide-text-muted);
+	}
+
+	.editor-pane__empty p {
+		margin: 0;
+	}
+
+	.editor-pane__hint {
+		margin-top: var(--ide-spacing-sm) !important;
+		font-size: var(--ide-font-size-xs);
+	}
+
+	.editor-pane__hint kbd {
+		padding: 2px 6px;
+		font-family: var(--ide-font-mono);
+		font-size: 10px;
+		background: var(--ide-bg-secondary);
+		border: 1px solid var(--ide-border);
+		border-radius: var(--ide-radius-sm);
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { EditorPreferences } from '../../types';
+interface Props {
+    preferences?: Partial<EditorPreferences>;
+    onSave?: (path: string, content: string) => Promise<void>;
+    class?: string;
+}
+declare const EditorPane: import("svelte").Component<Props, {}, "">;
+type EditorPane = ReturnType<typeof EditorPane>;
+export default EditorPane;

package/dist/components/editor/EditorSelections.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+	/**
+	 * EditorSelections - Renders selection rectangles and cursors for all cursors.
+	 *
+	 * Internal sub-component extracted from CustomEditor.svelte.
+	 * Not exported from the library — used only by CustomEditor.
+	 */
+	import {
+		type Cursor,
+		type Position,
+		getSelectionStart,
+		getSelectionEnd,
+		isSelectionEmpty
+	} from './core';
+	import { CONTENT_PADDING, FALLBACK_VIEWPORT_HEIGHT } from './constants';
+
+	interface Props {
+		cursors: readonly Cursor[];
+		cursorVisible: boolean;
+		readonly: boolean;
+		lineHeight: number;
+		charWidth: number;
+		gutterWidth: number;
+		contentPadding: number;
+		scrollTop: number;
+		viewportHeight: number;
+		getLine: (n: number) => { text: string } | undefined;
+		lineCount: number;
+	}
+
+	let {
+		cursors,
+		cursorVisible,
+		readonly: isReadonly,
+		lineHeight,
+		charWidth,
+		gutterWidth,
+		contentPadding,
+		scrollTop,
+		viewportHeight,
+		getLine,
+		lineCount
+	}: Props = $props();
+
+	// Selection rects memoization
+	let cachedSelectionRects: Array<{ top: number; left: number; width: number; height: number; isPrimary: boolean }> = [];
+	let cachedSelectionKey = '';
+
+	// Get selection rectangles for all cursors (memoized and virtualized to viewport)
+	function getSelectionRects(): Array<{ top: number; left: number; width: number; height: number; isPrimary: boolean }> {
+		// Check if any cursor has a selection
+		const anySelection = cursors.some(c => !isSelectionEmpty(c.selection));
+		if (!anySelection) {
+			cachedSelectionRects = [];
+			cachedSelectionKey = '';
+			return [];
+		}
+
+		// 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
+		);
+
+		// 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}`
+		).join('|');
+		const key = `${cursorKeys}@${firstVisibleLine}-${lastVisibleLine}:${charWidth}:${lineHeight}:${gutterWidth}`;
+		if (key === cachedSelectionKey) {
+			return cachedSelectionRects;
+		}
+
+		const rects: Array<{ top: number; left: number; width: number; height: number; isPrimary: boolean }> = [];
+
+		// Process each cursor's selection
+		for (const cursor of cursors) {
+			if (isSelectionEmpty(cursor.selection)) continue;
+
+			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);
+
+			for (let line = renderStart; line <= renderEnd; line++) {
+				const lineContent = getLine(line);
+				if (!lineContent) continue;
+
+				let startCol = 0;
+				let endCol = lineContent.text.length;
+
+				if (line === start.line) {
+					startCol = start.column;
+				}
+				if (line === end.line) {
+					endCol = end.column;
+				}
+
+				// Ensure minimum width for empty selections at line end
+				const width = Math.max((endCol - startCol) * charWidth, 4);
+
+				rects.push({
+					top: line * lineHeight,
+					left: gutterWidth + contentPadding + startCol * charWidth,
+					width,
+					height: lineHeight,
+					isPrimary: cursor.isPrimary
+				});
+			}
+		}
+
+		cachedSelectionKey = key;
+		cachedSelectionRects = rects;
+		return rects;
+	}
+
+	// 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;
+		return `left: ${left}px; top: ${top}px; height: ${lineHeight}px;`;
+	}
+</script>
+
+<!-- Selection layer (all cursor selections) -->
+<div class="custom-editor__selections">
+	{#each getSelectionRects() as rect}
+		<div
+			class="custom-editor__selection"
+			class:custom-editor__selection--secondary={!rect.isPrimary}
+			style="top: {rect.top}px; left: {rect.left}px; width: {rect.width}px; height: {rect.height}px;"
+		></div>
+	{/each}
+</div>
+
+<!-- Cursors (all cursors rendered with primary/secondary distinction) -->
+{#if cursorVisible && !isReadonly}
+	{#each cursors as cursor (cursor.id)}
+		<div
+			class="custom-editor__cursor"
+			class:custom-editor__cursor--secondary={!cursor.isPrimary}
+			style={getCursorStyleForPosition(cursor.selection.head)}
+		></div>
+	{/each}
+{/if}
+
+<style>
+	.custom-editor__selections {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		pointer-events: none;
+		z-index: 1;
+	}
+
+	.custom-editor__selection {
+		position: absolute;
+		/* Translucent wash so syntax-colored text remains legible underneath */
+		background: color-mix(in srgb, var(--ide-interactive) 28%, transparent);
+	}
+
+	/* Secondary selection (slightly different shade) */
+	.custom-editor__selection--secondary {
+		background: var(--ide-bg-selection-secondary);
+	}
+
+	.custom-editor__cursor {
+		position: absolute;
+		width: 2px;
+		background: var(--color-nocturnium-aurora-blue);
+		z-index: 10;
+		pointer-events: none;
+		transition: opacity 80ms;
+	}
+
+	/* Secondary cursor (slightly dimmer to distinguish from primary) */
+	.custom-editor__cursor--secondary {
+		background: var(--ide-interactive-muted);
+		opacity: 0.85;
+	}
+</style>

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

@@ -0,0 +1,25 @@
+/**
+     * EditorSelections - Renders selection rectangles and cursors for all cursors.
+     *
+     * Internal sub-component extracted from CustomEditor.svelte.
+     * Not exported from the library — used only by CustomEditor.
+     */
+import { type Cursor } from './core';
+interface Props {
+    cursors: readonly Cursor[];
+    cursorVisible: boolean;
+    readonly: boolean;
+    lineHeight: number;
+    charWidth: number;
+    gutterWidth: number;
+    contentPadding: number;
+    scrollTop: number;
+    viewportHeight: number;
+    getLine: (n: number) => {
+        text: string;
+    } | undefined;
+    lineCount: number;
+}
+declare const EditorSelections: import("svelte").Component<Props, {}, "">;
+type EditorSelections = ReturnType<typeof EditorSelections>;
+export default EditorSelections;