@nocturnium/svelte-ide 1.0.0-rc.1

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

@@ -0,0 +1,44 @@
+export type SymbolKind = 'file' | 'module' | 'namespace' | 'class' | 'interface' | 'type' | 'enum' | 'function' | 'method' | 'property' | 'variable' | 'constant' | 'parameter' | 'import' | 'export';
+export interface DocumentSymbol {
+    /** Unique identifier */
+    id: string;
+    /** Symbol name */
+    name: string;
+    /** Symbol kind */
+    kind: SymbolKind;
+    /** Detail text (e.g., type annotation, parameters) */
+    detail?: string;
+    /** Line number (0-based) */
+    line: number;
+    /** End line */
+    endLine?: number;
+    /** Column */
+    column?: number;
+    /** Children symbols */
+    children?: DocumentSymbol[];
+    /** Whether symbol is deprecated */
+    deprecated?: boolean;
+    /** Visibility modifier */
+    visibility?: 'public' | 'private' | 'protected';
+}
+interface Props {
+    /** Symbols to display */
+    symbols: DocumentSymbol[];
+    /** Currently active symbol (at cursor) */
+    activeSymbolId?: string | null;
+    /** Whether outline is enabled */
+    enabled?: boolean;
+    /** Filter text */
+    filter?: string;
+    /** Sort order */
+    sortBy?: 'position' | 'name' | 'kind';
+    /** Whether to show collapsed by default */
+    defaultCollapsed?: boolean;
+    /** Callback when symbol is clicked */
+    onNavigate?: (symbol: DocumentSymbol) => void;
+    /** Panel width */
+    width?: number;
+}
+declare const SymbolOutline: import("svelte").Component<Props, {}, "">;
+type SymbolOutline = ReturnType<typeof SymbolOutline>;
+export default SymbolOutline;

package/dist/components/editor/TimelineScrubber.svelte

@@ -0,0 +1,470 @@
+<script lang="ts">
+	/**
+	 * Timeline Scrubber
+	 *
+	 * A visual timeline for scrubbing through document history.
+	 * Shows colored markers for different authors and change types.
+	 * Supports playback mode with smooth transitions.
+	 */
+
+	import {
+		type TimelineSnapshot,
+		type SnapshotMetadata,
+		formatTimestamp,
+		formatDuration
+	} from './core/timeline';
+
+	interface TimelineMarker {
+		position: number;
+		color: string;
+		type: SnapshotMetadata['changeType'];
+		label: string;
+		timestamp: number;
+	}
+
+	interface Props {
+		/** Timeline markers to display */
+		markers: TimelineMarker[];
+		/** Current position (0-1, where 1 is live) */
+		position?: number;
+		/** Whether in playback mode */
+		isPlayback?: boolean;
+		/** Whether auto-playing */
+		isPlaying?: boolean;
+		/** Timeline duration in ms */
+		duration?: number;
+		/** Callback when position changes */
+		onPositionChange?: (position: number) => void;
+		/** Callback when playback starts */
+		onPlay?: () => void;
+		/** Callback when playback pauses */
+		onPause?: () => void;
+		/** Callback to go live */
+		onGoLive?: () => void;
+		/** Whether the scrubber is enabled */
+		enabled?: boolean;
+	}
+
+	let {
+		markers = [],
+		position = $bindable(1),
+		isPlayback = false,
+		isPlaying = false,
+		duration = 0,
+		onPositionChange,
+		onPlay,
+		onPause,
+		onGoLive,
+		enabled = true
+	}: Props = $props();
+
+	let trackElement: HTMLDivElement | null = $state(null);
+	let isDragging = $state(false);
+	let hoveredMarker = $state<TimelineMarker | null>(null);
+	let tooltipPosition = $state({ x: 0, y: 0 });
+
+	// Format current position as time
+	let positionTime = $derived(() => {
+		if (markers.length === 0) return '';
+		if (position >= 1) return 'Live';
+
+		const startTime = markers[0]?.timestamp ?? 0;
+		const currentTime = startTime + position * duration;
+		return formatTimestamp(currentTime);
+	});
+
+	function handlePointerDown(e: PointerEvent) {
+		if (!enabled || !trackElement) return;
+
+		isDragging = true;
+		(e.target as HTMLElement).setPointerCapture(e.pointerId);
+		updatePosition(e);
+	}
+
+	function handlePointerMove(e: PointerEvent) {
+		if (!isDragging || !trackElement) return;
+		updatePosition(e);
+	}
+
+	function handlePointerUp(e: PointerEvent) {
+		isDragging = false;
+		(e.target as HTMLElement).releasePointerCapture(e.pointerId);
+	}
+
+	function updatePosition(e: PointerEvent) {
+		if (!trackElement) return;
+
+		const rect = trackElement.getBoundingClientRect();
+		const x = e.clientX - rect.left;
+		const newPosition = Math.max(0, Math.min(1, x / rect.width));
+
+		position = newPosition;
+		onPositionChange?.(newPosition);
+	}
+
+	function handleMarkerHover(marker: TimelineMarker, e: MouseEvent) {
+		hoveredMarker = marker;
+		tooltipPosition = { x: e.clientX, y: e.clientY - 40 };
+	}
+
+	function handleMarkerLeave() {
+		hoveredMarker = null;
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (!enabled) return;
+
+		const step = e.shiftKey ? 0.1 : 0.01;
+
+		switch (e.key) {
+			case 'ArrowLeft':
+				e.preventDefault();
+				position = Math.max(0, position - step);
+				onPositionChange?.(position);
+				break;
+			case 'ArrowRight':
+				e.preventDefault();
+				position = Math.min(1, position + step);
+				onPositionChange?.(position);
+				break;
+			case 'Home':
+				e.preventDefault();
+				position = 0;
+				onPositionChange?.(position);
+				break;
+			case 'End':
+				e.preventDefault();
+				position = 1;
+				onPositionChange?.(position);
+				onGoLive?.();
+				break;
+			case ' ':
+				e.preventDefault();
+				if (isPlaying) {
+					onPause?.();
+				} else {
+					onPlay?.();
+				}
+				break;
+		}
+	}
+
+	function getMarkerIcon(type: SnapshotMetadata['changeType']): string {
+		switch (type) {
+			case 'commit':
+				return '\u{1F4BE}';
+			case 'save':
+				return '\u{1F4BE}';
+			case 'ai-suggestion':
+				return '🤖';
+			case 'checkpoint':
+				return '\u{23F8}';
+			default:
+				return '\u{270F}';
+		}
+	}
+</script>
+
+{#if enabled}
+	<div
+		class="timeline-scrubber"
+		class:timeline-scrubber--playback={isPlayback}
+		class:timeline-scrubber--dragging={isDragging}
+		role="slider"
+		aria-label="Timeline scrubber"
+		aria-valuemin={0}
+		aria-valuemax={100}
+		aria-valuenow={Math.round(position * 100)}
+		tabindex={0}
+		onkeydown={handleKeyDown}
+	>
+		<!-- Playback controls -->
+		<div class="timeline-scrubber__controls">
+			{#if isPlayback}
+				<button
+					class="timeline-scrubber__btn"
+					onclick={() => (isPlaying ? onPause?.() : onPlay?.())}
+					aria-label={isPlaying ? 'Pause' : 'Play'}
+				>
+					{#if isPlaying}
+						<span class="icon">&#x23F8;</span>
+					{:else}
+						<span class="icon">&#x25B6;</span>
+					{/if}
+				</button>
+			{/if}
+
+			<button
+				class="timeline-scrubber__btn timeline-scrubber__btn--rewind"
+				onclick={() => {
+					position = 0;
+					onPositionChange?.(0);
+				}}
+				aria-label="Go to start"
+			>
+				<span class="icon">&#x23EE;</span>
+			</button>
+		</div>
+
+		<!-- Track -->
+		<div
+			class="timeline-scrubber__track"
+			bind:this={trackElement}
+			onpointerdown={handlePointerDown}
+			onpointermove={handlePointerMove}
+			onpointerup={handlePointerUp}
+		>
+			<!-- Progress fill -->
+			<div class="timeline-scrubber__fill" style="width: {position * 100}%;"></div>
+
+			<!-- Markers -->
+			{#each markers as marker (marker.timestamp)}
+				<div
+					class="timeline-scrubber__marker timeline-scrubber__marker--{marker.type}"
+					style="left: {marker.position * 100}%; --marker-color: {marker.color};"
+					onmouseenter={(e) => handleMarkerHover(marker, e)}
+					onmouseleave={handleMarkerLeave}
+					role="button"
+					tabindex={-1}
+				>
+					<span class="timeline-scrubber__marker-dot"></span>
+				</div>
+			{/each}
+
+			<!-- Thumb -->
+			<div class="timeline-scrubber__thumb" style="left: {position * 100}%;">
+				<div class="timeline-scrubber__thumb-handle"></div>
+			</div>
+		</div>
+
+		<!-- Time display -->
+		<div class="timeline-scrubber__time">
+			{#if position >= 1}
+				<span class="timeline-scrubber__live">LIVE</span>
+			{:else}
+				<span class="timeline-scrubber__position">{positionTime()}</span>
+			{/if}
+		</div>
+
+		<!-- Go Live button -->
+		{#if isPlayback || position < 1}
+			<button class="timeline-scrubber__btn timeline-scrubber__btn--live" onclick={onGoLive}>
+				<span class="icon">&#x25CF;</span>
+				<span>Live</span>
+			</button>
+		{/if}
+	</div>
+
+	<!-- Marker tooltip -->
+	{#if hoveredMarker}
+		<div
+			class="timeline-scrubber__tooltip"
+			style="left: {tooltipPosition.x}px; top: {tooltipPosition.y}px;"
+		>
+			<div class="timeline-scrubber__tooltip-icon" style="color: {hoveredMarker.color}">
+				{getMarkerIcon(hoveredMarker.type)}
+			</div>
+			<div class="timeline-scrubber__tooltip-content">
+				<div class="timeline-scrubber__tooltip-label">{hoveredMarker.label}</div>
+				<div class="timeline-scrubber__tooltip-time">{formatTimestamp(hoveredMarker.timestamp)}</div>
+			</div>
+		</div>
+	{/if}
+{/if}
+
+<style>
+	.timeline-scrubber {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		height: 32px;
+		padding: 0 12px;
+		background: var(--color-surface, #1e1e2e);
+		border-top: 1px solid var(--color-border, #333);
+		user-select: none;
+	}
+
+	.timeline-scrubber--playback {
+		background: var(--color-surface-elevated, #252535);
+	}
+
+	.timeline-scrubber__controls {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+	}
+
+	.timeline-scrubber__btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 4px;
+		width: 28px;
+		height: 28px;
+		padding: 0;
+		background: transparent;
+		border: none;
+		border-radius: 4px;
+		color: var(--color-text-muted, #888);
+		cursor: pointer;
+		transition: background 0.15s ease, color 0.15s ease;
+	}
+
+	.timeline-scrubber__btn:hover {
+		background: rgba(255, 255, 255, 0.1);
+		color: var(--color-text, #e8e8f0);
+	}
+
+	.timeline-scrubber__btn--live {
+		width: auto;
+		padding: 0 8px;
+		font-size: 11px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
+	.timeline-scrubber__btn--live .icon {
+		color: #ef4444;
+		font-size: 8px;
+	}
+
+	.timeline-scrubber__btn .icon {
+		font-size: 14px;
+	}
+
+	.timeline-scrubber__track {
+		flex: 1;
+		position: relative;
+		height: 8px;
+		background: rgba(255, 255, 255, 0.1);
+		border-radius: 4px;
+		cursor: pointer;
+	}
+
+	.timeline-scrubber__fill {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		background: linear-gradient(90deg, rgba(74, 158, 255, 0.3), rgba(74, 158, 255, 0.5));
+		border-radius: 4px;
+		pointer-events: none;
+	}
+
+	.timeline-scrubber__marker {
+		position: absolute;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		z-index: 1;
+		cursor: pointer;
+	}
+
+	.timeline-scrubber__marker-dot {
+		display: block;
+		width: 6px;
+		height: 6px;
+		background: var(--marker-color, #4a9eff);
+		border-radius: 50%;
+		transition: transform 0.15s ease;
+	}
+
+	.timeline-scrubber__marker:hover .timeline-scrubber__marker-dot {
+		transform: scale(1.5);
+	}
+
+	.timeline-scrubber__marker--ai-suggestion .timeline-scrubber__marker-dot {
+		width: 8px;
+		height: 8px;
+		box-shadow: 0 0 4px var(--marker-color);
+	}
+
+	.timeline-scrubber__marker--commit .timeline-scrubber__marker-dot,
+	.timeline-scrubber__marker--save .timeline-scrubber__marker-dot {
+		width: 8px;
+		height: 8px;
+		border-radius: 2px;
+	}
+
+	.timeline-scrubber__thumb {
+		position: absolute;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		z-index: 2;
+		pointer-events: none;
+	}
+
+	.timeline-scrubber__thumb-handle {
+		width: 14px;
+		height: 14px;
+		background: var(--color-primary, #4a9eff);
+		border: 2px solid #fff;
+		border-radius: 50%;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+		transition: transform 0.1s ease;
+	}
+
+	.timeline-scrubber--dragging .timeline-scrubber__thumb-handle {
+		transform: scale(1.2);
+	}
+
+	.timeline-scrubber__time {
+		min-width: 50px;
+		text-align: center;
+		font-size: 11px;
+		font-family: var(--font-mono, monospace);
+		color: var(--color-text-muted, #888);
+	}
+
+	.timeline-scrubber__live {
+		color: #ef4444;
+		font-weight: 600;
+		animation: live-pulse 2s ease-in-out infinite;
+	}
+
+	@keyframes live-pulse {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.6;
+		}
+	}
+
+	.timeline-scrubber__tooltip {
+		position: fixed;
+		z-index: 1000;
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 8px 12px;
+		background: var(--color-surface, #1e1e2e);
+		border: 1px solid var(--color-border, #333);
+		border-radius: 6px;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+		pointer-events: none;
+		transform: translateX(-50%);
+	}
+
+	.timeline-scrubber__tooltip-icon {
+		font-size: 16px;
+	}
+
+	.timeline-scrubber__tooltip-content {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.timeline-scrubber__tooltip-label {
+		font-size: 12px;
+		font-weight: 500;
+		color: var(--color-text, #e8e8f0);
+	}
+
+	.timeline-scrubber__tooltip-time {
+		font-size: 10px;
+		color: var(--color-text-muted, #888);
+	}
+</style>

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

@@ -0,0 +1,40 @@
+/**
+     * Timeline Scrubber
+     *
+     * A visual timeline for scrubbing through document history.
+     * Shows colored markers for different authors and change types.
+     * Supports playback mode with smooth transitions.
+     */
+import { type SnapshotMetadata } from './core/timeline';
+interface TimelineMarker {
+    position: number;
+    color: string;
+    type: SnapshotMetadata['changeType'];
+    label: string;
+    timestamp: number;
+}
+interface Props {
+    /** Timeline markers to display */
+    markers: TimelineMarker[];
+    /** Current position (0-1, where 1 is live) */
+    position?: number;
+    /** Whether in playback mode */
+    isPlayback?: boolean;
+    /** Whether auto-playing */
+    isPlaying?: boolean;
+    /** Timeline duration in ms */
+    duration?: number;
+    /** Callback when position changes */
+    onPositionChange?: (position: number) => void;
+    /** Callback when playback starts */
+    onPlay?: () => void;
+    /** Callback when playback pauses */
+    onPause?: () => void;
+    /** Callback to go live */
+    onGoLive?: () => void;
+    /** Whether the scrubber is enabled */
+    enabled?: boolean;
+}
+declare const TimelineScrubber: import("svelte").Component<Props, {}, "position">;
+type TimelineScrubber = ReturnType<typeof TimelineScrubber>;
+export default TimelineScrubber;

package/dist/components/editor/TokenRenderer.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	/**
+	 * TokenRenderer - Safely renders tokenized line content without @html
+	 *
+	 * This component prevents XSS by rendering tokens as DOM elements
+	 * instead of using innerHTML/dangerouslySetInnerHTML.
+	 * Merges adjacent tokens of the same type to reduce DOM overhead.
+	 */
+	import { getTokenClass, type TokenizedLine, type Token } from './tokenizer';
+
+	interface Props {
+		tokens: TokenizedLine | undefined;
+		tabSize?: number;
+	}
+
+	let { tokens, tabSize = 2 }: Props = $props();
+
+	// Process text to handle whitespace for display
+	function processText(text: string): string {
+		// Replace tabs with spaces for display
+		return text.replace(/\t/g, ' '.repeat(tabSize));
+	}
+
+	// Merge adjacent tokens of the same type to reduce DOM elements
+	let mergedTokens = $derived.by(() => {
+		if (!tokens?.tokens?.length) return [];
+
+		const result: Token[] = [];
+		let current: Token | null = null;
+
+		for (const token of tokens.tokens) {
+			if (current && current.type === token.type) {
+				// Merge with current token
+				current = {
+					type: current.type,
+					text: current.text + token.text,
+					start: current.start,
+					end: token.end
+				};
+			} else {
+				// Push previous and start new
+				if (current) result.push(current);
+				current = { ...token };
+			}
+		}
+		if (current) result.push(current);
+
+		return result;
+	});
+</script>
+
+{#if mergedTokens.length > 0}
+	{#each mergedTokens as token}
+		{#if token.type === 'text'}
+			<span class="token-text">{processText(token.text) || '\u00A0'}</span>
+		{:else}
+			<span class={getTokenClass(token.type)}>{processText(token.text) || '\u00A0'}</span>
+		{/if}
+	{/each}
+{:else}
+	<span>&nbsp;</span>
+{/if}
+
+<style>
+	/* Whitespace handling */
+	span {
+		white-space: pre;
+	}
+</style>

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

@@ -0,0 +1,15 @@
+/**
+     * TokenRenderer - Safely renders tokenized line content without @html
+     *
+     * This component prevents XSS by rendering tokens as DOM elements
+     * instead of using innerHTML/dangerouslySetInnerHTML.
+     * Merges adjacent tokens of the same type to reduce DOM overhead.
+     */
+import { type TokenizedLine } from './tokenizer';
+interface Props {
+    tokens: TokenizedLine | undefined;
+    tabSize?: number;
+}
+declare const TokenRenderer: import("svelte").Component<Props, {}, "">;
+type TokenRenderer = ReturnType<typeof TokenRenderer>;
+export default TokenRenderer;

package/dist/components/editor/constants.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Editor constants
+ *
+ * Central location for all magic numbers and configuration values
+ * used throughout the custom editor components.
+ */
+/** Cursor blink interval in milliseconds */
+export declare const CURSOR_BLINK_MS = 530;
+/** Debounce delay for onChange callback in milliseconds */
+export declare const ONCHANGE_DEBOUNCE_MS = 50;
+/** Time window for grouping consecutive edits in undo history (ms) */
+export declare const HISTORY_GROUP_TIMEOUT_MS = 300;
+/** Default character width in pixels (monospace) */
+export declare const DEFAULT_CHAR_WIDTH = 8;
+/** Default line height in pixels */
+export declare const DEFAULT_LINE_HEIGHT = 20;
+/** Default gutter (line numbers) width in pixels */
+export declare const DEFAULT_GUTTER_WIDTH = 50;
+/** Padding between gutter and content area in pixels */
+export declare const CONTENT_PADDING = 8;
+/** Right padding inside the gutter for line numbers */
+export declare const GUTTER_PADDING = 24;
+/** Line height multiplier for calculating line spacing */
+export declare const LINE_HEIGHT_MULTIPLIER = 1.4;
+/** Fallback viewport height for page size calculations */
+export declare const FALLBACK_VIEWPORT_HEIGHT = 400;
+/** Default font size in pixels */
+export declare const DEFAULT_FONT_SIZE = 14;
+/** Default word wrap column */
+export declare const DEFAULT_WORD_WRAP_COLUMN = 80;
+/** Maximum number of entries in undo/redo stack */
+export declare const MAX_HISTORY_SIZE = 100;

package/dist/components/editor/constants.js

@@ -0,0 +1,36 @@
+/**
+ * Editor constants
+ *
+ * Central location for all magic numbers and configuration values
+ * used throughout the custom editor components.
+ */
+// ==================== Timing ====================
+/** Cursor blink interval in milliseconds */
+export const CURSOR_BLINK_MS = 530;
+/** Debounce delay for onChange callback in milliseconds */
+export const ONCHANGE_DEBOUNCE_MS = 50;
+/** Time window for grouping consecutive edits in undo history (ms) */
+export const HISTORY_GROUP_TIMEOUT_MS = 300;
+// ==================== Layout ====================
+/** Default character width in pixels (monospace) */
+export const DEFAULT_CHAR_WIDTH = 8;
+/** Default line height in pixels */
+export const DEFAULT_LINE_HEIGHT = 20;
+/** Default gutter (line numbers) width in pixels */
+export const DEFAULT_GUTTER_WIDTH = 50;
+/** Padding between gutter and content area in pixels */
+export const CONTENT_PADDING = 8;
+/** Right padding inside the gutter for line numbers */
+export const GUTTER_PADDING = 24;
+/** Line height multiplier for calculating line spacing */
+export const LINE_HEIGHT_MULTIPLIER = 1.4;
+/** Fallback viewport height for page size calculations */
+export const FALLBACK_VIEWPORT_HEIGHT = 400;
+// ==================== Typography ====================
+/** Default font size in pixels */
+export const DEFAULT_FONT_SIZE = 14;
+/** Default word wrap column */
+export const DEFAULT_WORD_WRAP_COLUMN = 80;
+// ==================== History ====================
+/** Maximum number of entries in undo/redo stack */
+export const MAX_HISTORY_SIZE = 100;