@nocturnium/svelte-ide 1.0.0-rc.1

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

@@ -0,0 +1,67 @@
+/**
+ * FileExplorer - File tree navigation component
+ *
+ * Displays a hierarchical file tree with expandable folders,
+ * file icons, and selection support. Supports VFS lock,
+ * agent presence, and file change status indicators.
+ */
+export interface FileNode {
+    id: string;
+    name: string;
+    type: 'file' | 'folder';
+    path: string;
+    children?: FileNode[];
+    expanded?: boolean;
+}
+/** File change status type - for transaction/git operations */
+export type FileChangeStatus = 'created' | 'modified' | 'deleted' | 'renamed' | 'clean';
+/** @deprecated Use FileChangeStatus instead */
+export type GitFileStatus = FileChangeStatus;
+import type { VFSLockStatus, Agent } from '../../types';
+interface Props {
+    /** Root file nodes */
+    files: FileNode[];
+    /** Currently selected file path */
+    selectedPath?: string | null;
+    /** Current user ID for lock ownership detection */
+    userId?: string;
+    /** Map of file path to lock status */
+    lockStatuses?: Map<string, VFSLockStatus>;
+    /** Map of file path to agents currently editing */
+    agentsByFile?: Map<string, Agent[]>;
+    /** Map of file path to change status (created, modified, deleted, renamed) */
+    fileStatuses?: Map<string, FileChangeStatus>;
+    /** @deprecated Use fileStatuses instead */
+    gitStatuses?: Map<string, FileChangeStatus>;
+    /** Show lock indicators */
+    showLocks?: boolean;
+    /** Show agent indicators */
+    showAgents?: boolean;
+    /** Show file change status indicators */
+    showFileStatus?: boolean;
+    /** @deprecated Use showFileStatus instead */
+    showGitStatus?: boolean;
+    /** Called when a file is selected */
+    onSelect?: (node: FileNode) => void;
+    /** Called when a file is double-clicked (open) */
+    onOpen?: (node: FileNode) => void;
+    /** Called when a folder is toggled */
+    onToggle?: (node: FileNode) => void;
+    /** Called when a new file is requested (with name from inline input) */
+    onNewFile?: (parentPath: string, name: string) => void;
+    /** Called when a new folder is requested (with name from inline input) */
+    onNewFolder?: (parentPath: string, name: string) => void;
+    /** Called when rename is requested */
+    onRename?: (node: FileNode) => void;
+    /** Called when delete is requested */
+    onDelete?: (node: FileNode) => void;
+    /** Called when lock is requested */
+    onLock?: (node: FileNode) => void;
+    /** Called when unlock is requested */
+    onUnlock?: (node: FileNode) => void;
+    /** Additional CSS class */
+    class?: string;
+}
+declare const FileExplorer: import("svelte").Component<Props, {}, "">;
+type FileExplorer = ReturnType<typeof FileExplorer>;
+export default FileExplorer;

package/dist/components/editor/FileIcon.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import { getExtension } from '../../utils/language';
+
+	interface Props {
+		filename: string;
+		isDirectory?: boolean;
+		expanded?: boolean;
+		size?: number;
+		class?: string;
+	}
+
+	let {
+		filename,
+		isDirectory = false,
+		expanded = false,
+		size = 16,
+		class: className = ''
+	}: Props = $props();
+
+	// Color mapping for file types
+	const extensionColors: Record<string, string> = {
+		// JavaScript/TypeScript
+		js: '#f7df1e',
+		mjs: '#f7df1e',
+		jsx: '#61dafb',
+		ts: '#3178c6',
+		tsx: '#3178c6',
+
+		// Web
+		html: '#e34c26',
+		css: '#1572b6',
+		scss: '#cc6699',
+		sass: '#cc6699',
+		less: '#1d365d',
+
+		// Data
+		json: '#cbcb41',
+		yaml: '#cb171e',
+		yml: '#cb171e',
+		xml: '#0060ac',
+		toml: '#9c4121',
+
+		// Markdown
+		md: '#083fa1',
+		mdx: '#1b1f24',
+
+		// Languages
+		py: '#3572a5',
+		go: '#00add8',
+		rs: '#dea584',
+		java: '#b07219',
+		kt: '#a97bff',
+		c: '#555555',
+		cpp: '#f34b7d',
+		cs: '#178600',
+		rb: '#701516',
+		php: '#4f5d95',
+		swift: '#f05138',
+
+		// Shell
+		sh: '#89e051',
+		bash: '#89e051',
+		zsh: '#89e051',
+
+		// Config
+		dockerfile: '#0db7ed',
+		gitignore: '#f05032',
+		env: '#ecd53f',
+
+		// Svelte/Vue
+		svelte: '#ff3e00',
+		vue: '#42b883'
+	};
+
+	const ext = $derived(getExtension(filename));
+	const color = $derived(extensionColors[ext] ?? 'var(--ide-text-muted)');
+
+	// Simple file type icon paths
+	const icons = {
+		folder: 'M2 6a2 2 0 012-2h5l2 2h7a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6z',
+		folderOpen:
+			'M2 6a2 2 0 012-2h5l2 2h7a2 2 0 012 2v1H8a3 3 0 00-3 3v2.5L3.5 18A2 2 0 012 16V6z M6 12a2 2 0 012-2h12l-2 8H8a2 2 0 01-2-2v-4z',
+		file: 'M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 1.5L18.5 9H14a1 1 0 01-1-1V3.5z'
+	};
+
+	const iconPath = $derived(isDirectory ? (expanded ? icons.folderOpen : icons.folder) : icons.file);
+	const iconColor = $derived(isDirectory ? 'var(--ide-interactive)' : color);
+</script>
+
+<svg
+	class="file-icon {className}"
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill={isDirectory ? iconColor : 'none'}
+	stroke={isDirectory ? 'none' : iconColor}
+	stroke-width="1.5"
+	aria-hidden="true"
+>
+	<path d={iconPath}></path>
+	{#if !isDirectory && ext}
+		<!-- Show extension badge for better recognition -->
+	{/if}
+</svg>
+
+<style>
+	.file-icon {
+		flex-shrink: 0;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+interface Props {
+    filename: string;
+    isDirectory?: boolean;
+    expanded?: boolean;
+    size?: number;
+    class?: string;
+}
+declare const FileIcon: import("svelte").Component<Props, {}, "">;
+type FileIcon = ReturnType<typeof FileIcon>;
+export default FileIcon;

package/dist/components/editor/FindReplace.svelte

@@ -0,0 +1,448 @@
+<script lang="ts">
+	import { onMount, tick } from 'svelte';
+
+	interface Props {
+		/** Current search query */
+		query?: string;
+		/** Current replace text */
+		replaceText?: string;
+		/** Whether to show replace controls */
+		showReplace?: boolean;
+		/** Whether search is case sensitive */
+		caseSensitive?: boolean;
+		/** Whether to use regex search */
+		useRegex?: boolean;
+		/** Total number of matches */
+		matchCount?: number;
+		/** Current match index (1-based) */
+		currentMatch?: number;
+		/** Called when query changes */
+		onQueryChange?: (query: string) => void;
+		/** Called when replace text changes */
+		onReplaceTextChange?: (text: string) => void;
+		/** Called when case sensitivity changes */
+		onCaseSensitiveChange?: (value: boolean) => void;
+		/** Called when regex mode changes */
+		onUseRegexChange?: (value: boolean) => void;
+		/** Called to find next match */
+		onFindNext?: () => void;
+		/** Called to find previous match */
+		onFindPrev?: () => void;
+		/** Called to replace current match */
+		onReplace?: () => void;
+		/** Called to replace all matches */
+		onReplaceAll?: () => void;
+		/** Called to close the find/replace bar */
+		onClose?: () => void;
+	}
+
+	let {
+		query = '',
+		replaceText = '',
+		showReplace = false,
+		caseSensitive = false,
+		useRegex = false,
+		matchCount = 0,
+		currentMatch = 0,
+		onQueryChange,
+		onReplaceTextChange,
+		onCaseSensitiveChange,
+		onUseRegexChange,
+		onFindNext,
+		onFindPrev,
+		onReplace,
+		onReplaceAll,
+		onClose
+	}: Props = $props();
+
+	let findInput = $state<HTMLInputElement | null>(null);
+	let replaceInput = $state<HTMLInputElement | null>(null);
+	let showReplaceLocal = $state(false);
+
+	// Sync with prop
+	$effect(() => {
+		showReplaceLocal = showReplace;
+	});
+
+	// Focus find input on mount
+	onMount(() => {
+		findInput?.focus();
+		findInput?.select();
+	});
+
+	function handleFindKeyDown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			if (e.shiftKey) {
+				onFindPrev?.();
+			} else {
+				onFindNext?.();
+			}
+		} else if (e.key === 'Escape') {
+			e.preventDefault();
+			onClose?.();
+		} else if (e.key === 'Tab' && showReplaceLocal && !e.shiftKey) {
+			e.preventDefault();
+			replaceInput?.focus();
+		}
+	}
+
+	function handleReplaceKeyDown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			if (e.shiftKey) {
+				onReplaceAll?.();
+			} else {
+				onReplace?.();
+			}
+		} else if (e.key === 'Escape') {
+			e.preventDefault();
+			onClose?.();
+		} else if (e.key === 'Tab' && e.shiftKey) {
+			e.preventDefault();
+			findInput?.focus();
+		}
+	}
+
+	function handleQueryInput(e: Event) {
+		const target = e.target as HTMLInputElement;
+		onQueryChange?.(target.value);
+	}
+
+	function handleReplaceInput(e: Event) {
+		const target = e.target as HTMLInputElement;
+		onReplaceTextChange?.(target.value);
+	}
+
+	function toggleReplace() {
+		showReplaceLocal = !showReplaceLocal;
+		if (showReplaceLocal) {
+			tick().then(() => replaceInput?.focus());
+		}
+	}
+
+	function toggleCaseSensitive() {
+		onCaseSensitiveChange?.(!caseSensitive);
+	}
+
+	function toggleRegex() {
+		onUseRegexChange?.(!useRegex);
+	}
+
+	/** Focus the find input and select all text */
+	export function focus() {
+		findInput?.focus();
+		findInput?.select();
+	}
+
+	/** Set the initial query */
+	export function setQuery(newQuery: string) {
+		onQueryChange?.(newQuery);
+		tick().then(() => {
+			findInput?.focus();
+			findInput?.select();
+		});
+	}
+</script>
+
+<div class="find-replace" role="search" aria-label="Find and replace">
+	<!-- Find row -->
+	<div class="find-replace__row">
+		<button
+			class="find-replace__toggle"
+			onclick={toggleReplace}
+			aria-label={showReplaceLocal ? 'Hide replace' : 'Show replace'}
+			aria-expanded={showReplaceLocal}
+			title={showReplaceLocal ? 'Hide replace (Ctrl+H)' : 'Show replace (Ctrl+H)'}
+		>
+			<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+				{#if showReplaceLocal}
+					<path d="M6 8L2 4h8L6 8z" />
+				{:else}
+					<path d="M4 6l4-4v8L4 6z" />
+				{/if}
+			</svg>
+		</button>
+
+		<div class="find-replace__input-wrapper">
+			<input
+				bind:this={findInput}
+				type="text"
+				class="find-replace__input"
+				placeholder="Find"
+				value={query}
+				oninput={handleQueryInput}
+				onkeydown={handleFindKeyDown}
+				aria-label="Search query"
+			/>
+			{#if query}
+				<span class="find-replace__count" aria-live="polite">
+					{#if matchCount > 0}
+						{currentMatch} of {matchCount}
+					{:else}
+						No results
+					{/if}
+				</span>
+			{/if}
+		</div>
+
+		<div class="find-replace__options">
+			<button
+				class="find-replace__option"
+				class:find-replace__option--active={caseSensitive}
+				onclick={toggleCaseSensitive}
+				aria-pressed={caseSensitive}
+				title="Match case (Alt+C)"
+			>
+				Aa
+			</button>
+			<button
+				class="find-replace__option"
+				class:find-replace__option--active={useRegex}
+				onclick={toggleRegex}
+				aria-pressed={useRegex}
+				title="Use regular expression (Alt+R)"
+			>
+				.*
+			</button>
+		</div>
+
+		<div class="find-replace__actions">
+			<button
+				class="find-replace__action"
+				onclick={() => onFindPrev?.()}
+				disabled={matchCount === 0}
+				aria-label="Previous match"
+				title="Previous match (Shift+Enter)"
+			>
+				<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+					<path d="M7 3L2 8h10L7 3z" />
+				</svg>
+			</button>
+			<button
+				class="find-replace__action"
+				onclick={() => onFindNext?.()}
+				disabled={matchCount === 0}
+				aria-label="Next match"
+				title="Next match (Enter)"
+			>
+				<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+					<path d="M7 11L2 6h10L7 11z" />
+				</svg>
+			</button>
+			<button
+				class="find-replace__action find-replace__action--close"
+				onclick={() => onClose?.()}
+				aria-label="Close"
+				title="Close (Escape)"
+			>
+				<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+					<path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" stroke-width="1.5" fill="none" />
+				</svg>
+			</button>
+		</div>
+	</div>
+
+	<!-- Replace row -->
+	{#if showReplaceLocal}
+		<div class="find-replace__row find-replace__row--replace">
+			<div class="find-replace__spacer"></div>
+
+			<div class="find-replace__input-wrapper">
+				<input
+					bind:this={replaceInput}
+					type="text"
+					class="find-replace__input"
+					placeholder="Replace"
+					value={replaceText}
+					oninput={handleReplaceInput}
+					onkeydown={handleReplaceKeyDown}
+					aria-label="Replace text"
+				/>
+			</div>
+
+			<div class="find-replace__actions find-replace__actions--replace">
+				<button
+					class="find-replace__action"
+					onclick={() => onReplace?.()}
+					disabled={matchCount === 0}
+					aria-label="Replace"
+					title="Replace (Enter)"
+				>
+					<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+						<path d="M2 7h8M7 4l3 3-3 3" stroke="currentColor" stroke-width="1.5" fill="none" />
+					</svg>
+				</button>
+				<button
+					class="find-replace__action"
+					onclick={() => onReplaceAll?.()}
+					disabled={matchCount === 0}
+					aria-label="Replace all"
+					title="Replace all (Shift+Enter)"
+				>
+					<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+						<path d="M1 4h6M1 7h8M1 10h6M10 4l2 2-2 2M10 8l2 2-2 2" stroke="currentColor" stroke-width="1.2" fill="none" />
+					</svg>
+				</button>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.find-replace {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		padding: 6px 8px;
+		background: var(--ide-bg-secondary);
+		border-bottom: 1px solid var(--ide-border);
+		font-family: var(--ide-font-sans);
+		font-size: 13px;
+	}
+
+	.find-replace__row {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	.find-replace__toggle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 20px;
+		height: 20px;
+		padding: 0;
+		background: transparent;
+		border: none;
+		border-radius: 3px;
+		color: var(--ide-text-secondary);
+		cursor: pointer;
+		transition: background 0.1s, color 0.1s;
+	}
+
+	.find-replace__toggle:hover {
+		background: var(--ide-bg-hover);
+		color: var(--ide-text-primary);
+	}
+
+	.find-replace__spacer {
+		width: 20px;
+		flex-shrink: 0;
+	}
+
+	.find-replace__input-wrapper {
+		position: relative;
+		flex: 1;
+		max-width: 300px;
+	}
+
+	.find-replace__input {
+		width: 100%;
+		padding: 4px 8px;
+		padding-right: 70px;
+		background: var(--ide-bg-primary);
+		border: 1px solid var(--ide-border);
+		border-radius: 4px;
+		color: var(--ide-text-primary);
+		font-family: var(--ide-font-mono);
+		font-size: 12px;
+		outline: none;
+		transition: border-color 0.1s;
+	}
+
+	.find-replace__input:focus {
+		border-color: var(--ide-interactive);
+	}
+
+	.find-replace__input::placeholder {
+		color: var(--ide-text-muted);
+	}
+
+	.find-replace__count {
+		position: absolute;
+		right: 8px;
+		top: 50%;
+		transform: translateY(-50%);
+		color: var(--ide-text-muted);
+		font-size: 11px;
+		pointer-events: none;
+	}
+
+	.find-replace__options {
+		display: flex;
+		gap: 2px;
+	}
+
+	.find-replace__option {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 24px;
+		height: 22px;
+		padding: 0 4px;
+		background: transparent;
+		border: 1px solid transparent;
+		border-radius: 3px;
+		color: var(--ide-text-secondary);
+		font-family: var(--ide-font-mono);
+		font-size: 11px;
+		cursor: pointer;
+		transition: background 0.1s, border-color 0.1s, color 0.1s;
+	}
+
+	.find-replace__option:hover {
+		background: var(--ide-bg-hover);
+		color: var(--ide-text-primary);
+	}
+
+	.find-replace__option--active {
+		background: var(--ide-interactive);
+		border-color: var(--ide-interactive);
+		color: var(--ide-text-primary);
+	}
+
+	.find-replace__option--active:hover {
+		background: var(--ide-interactive-hover);
+	}
+
+	.find-replace__actions {
+		display: flex;
+		gap: 2px;
+	}
+
+	.find-replace__actions--replace {
+		margin-left: auto;
+	}
+
+	.find-replace__action {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 22px;
+		padding: 0;
+		background: transparent;
+		border: none;
+		border-radius: 3px;
+		color: var(--ide-text-secondary);
+		cursor: pointer;
+		transition: background 0.1s, color 0.1s;
+	}
+
+	.find-replace__action:hover:not(:disabled) {
+		background: var(--ide-bg-hover);
+		color: var(--ide-text-primary);
+	}
+
+	.find-replace__action:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.find-replace__action--close:hover {
+		background: var(--ide-error);
+		color: white;
+	}
+</style>

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

@@ -0,0 +1,40 @@
+interface Props {
+    /** Current search query */
+    query?: string;
+    /** Current replace text */
+    replaceText?: string;
+    /** Whether to show replace controls */
+    showReplace?: boolean;
+    /** Whether search is case sensitive */
+    caseSensitive?: boolean;
+    /** Whether to use regex search */
+    useRegex?: boolean;
+    /** Total number of matches */
+    matchCount?: number;
+    /** Current match index (1-based) */
+    currentMatch?: number;
+    /** Called when query changes */
+    onQueryChange?: (query: string) => void;
+    /** Called when replace text changes */
+    onReplaceTextChange?: (text: string) => void;
+    /** Called when case sensitivity changes */
+    onCaseSensitiveChange?: (value: boolean) => void;
+    /** Called when regex mode changes */
+    onUseRegexChange?: (value: boolean) => void;
+    /** Called to find next match */
+    onFindNext?: () => void;
+    /** Called to find previous match */
+    onFindPrev?: () => void;
+    /** Called to replace current match */
+    onReplace?: () => void;
+    /** Called to replace all matches */
+    onReplaceAll?: () => void;
+    /** Called to close the find/replace bar */
+    onClose?: () => void;
+}
+declare const FindReplace: import("svelte").Component<Props, {
+    focus: () => void;
+    setQuery: (newQuery: string) => void;
+}, "">;
+type FindReplace = ReturnType<typeof FindReplace>;
+export default FindReplace;