@nocturnium/svelte-ide 1.0.0-rc.1

package/dist/components/core/Button.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success';
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		disabled?: boolean;
+		loading?: boolean;
+		fullWidth?: boolean;
+		type?: 'button' | 'submit' | 'reset';
+		title?: string;
+		'aria-label'?: string;
+		class?: string;
+		children: Snippet;
+		icon?: Snippet;
+		onclick?: (event: MouseEvent) => void;
+	}
+
+	let {
+		variant = 'primary',
+		size = 'md',
+		disabled = false,
+		loading = false,
+		fullWidth = false,
+		type = 'button',
+		title,
+		'aria-label': ariaLabel,
+		class: className = '',
+		children,
+		icon,
+		onclick
+	}: Props = $props();
+</script>
+
+<button
+	{type}
+	class="ide-button ide-button--{variant} ide-button--{size} {fullWidth
+		? 'ide-button--full'
+		: ''} {className}"
+	disabled={disabled || loading}
+	{title}
+	aria-label={ariaLabel}
+	{onclick}
+>
+	{#if loading}
+		<span class="ide-button__spinner"></span>
+	{:else if icon}
+		<span class="ide-button__icon">
+			{@render icon()}
+		</span>
+	{/if}
+	<span class="ide-button__content">
+		{@render children()}
+	</span>
+</button>
+
+<style>
+	.ide-button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--ide-spacing-sm);
+		font-family: var(--ide-font-sans);
+		font-weight: 500;
+		border-radius: var(--ide-radius-md);
+		transition: all var(--ide-transition-fast);
+		cursor: pointer;
+		border: 1px solid transparent;
+		white-space: nowrap;
+	}
+
+	.ide-button:focus-visible {
+		outline: 2px solid var(--ide-interactive-focus);
+		outline-offset: 2px;
+	}
+
+	.ide-button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.ide-button--full {
+		width: 100%;
+	}
+
+	/* Variants */
+	.ide-button--primary {
+		background: var(--ide-interactive-active);
+		color: var(--ide-text-primary);
+	}
+
+	.ide-button--primary:hover:not(:disabled) {
+		background: var(--ide-interactive-hover);
+	}
+
+	.ide-button--secondary {
+		background: var(--ide-bg-tertiary);
+		color: var(--ide-text-primary);
+		border-color: var(--ide-border);
+	}
+
+	.ide-button--secondary:hover:not(:disabled) {
+		background: var(--ide-bg-hover);
+		border-color: var(--ide-interactive);
+	}
+
+	.ide-button--ghost {
+		background: transparent;
+		color: var(--ide-text-secondary);
+	}
+
+	.ide-button--ghost:hover:not(:disabled) {
+		background: var(--ide-bg-elevated);
+		color: var(--ide-text-primary);
+	}
+
+	.ide-button--danger {
+		background: var(--ide-error);
+		color: white;
+	}
+
+	.ide-button--danger:hover:not(:disabled) {
+		background: color-mix(in srgb, var(--ide-error) 80%, black);
+	}
+
+	.ide-button--success {
+		background: var(--ide-success);
+		color: var(--ide-text-inverse);
+	}
+
+	.ide-button--success:hover:not(:disabled) {
+		background: color-mix(in srgb, var(--ide-success) 80%, black);
+	}
+
+	/* Sizes */
+	.ide-button--xs {
+		height: 1.5rem;
+		padding: 0 var(--ide-spacing-xs);
+		font-size: var(--ide-font-size-xs);
+	}
+
+	.ide-button--sm {
+		height: 1.75rem;
+		padding: 0 var(--ide-spacing-sm);
+		font-size: var(--ide-font-size-xs);
+	}
+
+	.ide-button--md {
+		height: 2.25rem;
+		padding: 0 var(--ide-spacing-md);
+		font-size: var(--ide-font-size-sm);
+	}
+
+	.ide-button--lg {
+		height: 2.75rem;
+		padding: 0 var(--ide-spacing-lg);
+		font-size: var(--ide-font-size-base);
+	}
+
+	/* Spinner */
+	.ide-button__spinner {
+		width: 1em;
+		height: 1em;
+		border: 2px solid currentColor;
+		border-right-color: transparent;
+		border-radius: 50%;
+		animation: ide-spin 0.6s linear infinite;
+	}
+
+	.ide-button__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>

package/dist/components/core/Button.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    loading?: boolean;
+    fullWidth?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    title?: string;
+    'aria-label'?: string;
+    class?: string;
+    children: Snippet;
+    icon?: Snippet;
+    onclick?: (event: MouseEvent) => void;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/core/ConnectionStatus.svelte

@@ -0,0 +1,294 @@
+<script lang="ts">
+/**
+ * ConnectionStatus Component
+ *
+ * Displays the current connection status with the VFS server.
+ * Shows connected, disconnected, and reconnecting states.
+ */
+
+export type ConnectionState = 'connected' | 'disconnected' | 'connecting' | 'reconnecting' | 'error';
+
+interface Props {
+	state: ConnectionState;
+	reconnectAttempts?: number;
+	maxReconnectAttempts?: number;
+	lastEventTime?: string | null;
+	errorMessage?: string | null;
+	onRetry?: () => void;
+	compact?: boolean;
+	showLabel?: boolean;
+}
+
+let {
+	state,
+	reconnectAttempts = 0,
+	maxReconnectAttempts = 10,
+	lastEventTime = null,
+	errorMessage = null,
+	onRetry,
+	compact = false,
+	showLabel = true
+}: Props = $props();
+
+// Computed display values
+let statusLabel = $derived.by(() => {
+	switch (state) {
+		case 'connected':
+			return 'Connected';
+		case 'disconnected':
+			return 'Disconnected';
+		case 'connecting':
+			return 'Connecting...';
+		case 'reconnecting':
+			return `Reconnecting (${reconnectAttempts}/${maxReconnectAttempts})`;
+		case 'error':
+			return 'Connection Error';
+		default:
+			return 'Unknown';
+	}
+});
+
+let statusIcon = $derived.by(() => {
+	switch (state) {
+		case 'connected':
+			return 'check';
+		case 'disconnected':
+		case 'error':
+			return 'x';
+		case 'connecting':
+		case 'reconnecting':
+			return 'loader';
+		default:
+			return 'circle';
+	}
+});
+
+let lastSyncDisplay = $derived.by(() => {
+	if (!lastEventTime) return null;
+	const date = new Date(lastEventTime);
+	const now = new Date();
+	const diff = now.getTime() - date.getTime();
+
+	if (diff < 60000) return 'Just now';
+	if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
+	if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
+	return date.toLocaleDateString();
+});
+</script>
+
+<div
+	class="connection-status"
+	class:compact
+	class:connected={state === 'connected'}
+	class:disconnected={state === 'disconnected'}
+	class:connecting={state === 'connecting' || state === 'reconnecting'}
+	class:error={state === 'error'}
+	role="status"
+	aria-live="polite"
+>
+	<span class="status-indicator">
+		{#if statusIcon === 'check'}
+			<svg
+				class="icon icon-check"
+				xmlns="http://www.w3.org/2000/svg"
+				width="14"
+				height="14"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<polyline points="20 6 9 17 4 12" />
+			</svg>
+		{:else if statusIcon === 'x'}
+			<svg
+				class="icon icon-x"
+				xmlns="http://www.w3.org/2000/svg"
+				width="14"
+				height="14"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path d="M18 6 6 18M6 6l12 12" />
+			</svg>
+		{:else if statusIcon === 'loader'}
+			<svg
+				class="icon icon-loader"
+				xmlns="http://www.w3.org/2000/svg"
+				width="14"
+				height="14"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path d="M21 12a9 9 0 1 1-6.219-8.56" />
+			</svg>
+		{:else}
+			<span class="dot"></span>
+		{/if}
+	</span>
+
+	{#if showLabel}
+		<span class="status-label">{statusLabel}</span>
+	{/if}
+
+	{#if lastSyncDisplay && state === 'connected' && !compact}
+		<span class="last-sync">Last sync: {lastSyncDisplay}</span>
+	{/if}
+
+	{#if (state === 'disconnected' || state === 'error') && onRetry}
+		<button class="retry-btn" onclick={onRetry}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="12"
+				height="12"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
+				<path d="M21 3v5h-5" />
+				<path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
+				<path d="M3 21v-5h5" />
+			</svg>
+			Retry
+		</button>
+	{/if}
+
+	{#if errorMessage && state === 'error' && !compact}
+		<span class="error-message" title={errorMessage}>
+			{errorMessage.length > 40 ? `${errorMessage.slice(0, 40)}...` : errorMessage}
+		</span>
+	{/if}
+</div>
+
+<style>
+	.connection-status {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		font-size: 12px;
+		color: var(--ide-text-secondary, #a0a0a0);
+		padding: 4px 8px;
+		border-radius: 4px;
+		transition: all 0.2s ease;
+	}
+
+	.connection-status.compact {
+		padding: 2px 4px;
+		gap: 4px;
+	}
+
+	.connection-status.connected {
+		color: var(--ide-agent-online, #4ec9b0);
+	}
+
+	.connection-status.disconnected {
+		color: var(--ide-text-muted, #808080);
+	}
+
+	.connection-status.connecting {
+		color: var(--ide-agent-busy, #dcdcaa);
+	}
+
+	.connection-status.error {
+		color: var(--ide-error, #f44747);
+	}
+
+	.status-indicator {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 16px;
+		height: 16px;
+	}
+
+	.icon {
+		width: 14px;
+		height: 14px;
+	}
+
+	.icon-loader {
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.dot {
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		background: currentColor;
+	}
+
+	.status-label {
+		font-weight: 500;
+	}
+
+	.last-sync {
+		color: var(--ide-text-muted, #808080);
+		font-size: 11px;
+	}
+
+	.retry-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		padding: 2px 6px;
+		background: var(--ide-bg-tertiary, #2d2d2d);
+		border: 1px solid var(--ide-border, #3c3c3c);
+		border-radius: 3px;
+		color: var(--ide-text-secondary, #a0a0a0);
+		font-size: 11px;
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.retry-btn:hover {
+		background: var(--ide-bg-hover, #3c3c3c);
+		color: var(--ide-text-primary, #e0e0e0);
+	}
+
+	.error-message {
+		font-size: 11px;
+		color: var(--ide-error, #f44747);
+		max-width: 200px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	/* Pulse animation for reconnecting */
+	.connection-status.connecting .dot {
+		animation: pulse 1.5s ease-in-out infinite;
+	}
+
+	@keyframes pulse {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.4;
+		}
+	}
+</style>

package/dist/components/core/ConnectionStatus.svelte.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ConnectionStatus Component
+ *
+ * Displays the current connection status with the VFS server.
+ * Shows connected, disconnected, and reconnecting states.
+ */
+export type ConnectionState = 'connected' | 'disconnected' | 'connecting' | 'reconnecting' | 'error';
+interface Props {
+    state: ConnectionState;
+    reconnectAttempts?: number;
+    maxReconnectAttempts?: number;
+    lastEventTime?: string | null;
+    errorMessage?: string | null;
+    onRetry?: () => void;
+    compact?: boolean;
+    showLabel?: boolean;
+}
+declare const ConnectionStatus: import("svelte").Component<Props, {}, "">;
+type ConnectionStatus = ReturnType<typeof ConnectionStatus>;
+export default ConnectionStatus;

package/dist/components/core/ContextMenu.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+	import Icon from './Icon.svelte';
+	import Kbd from './Kbd.svelte';
+
+	export interface ContextMenuItem {
+		id: string;
+		label: string;
+		icon?: string;
+		shortcut?: string[];
+		disabled?: boolean;
+		danger?: boolean;
+		separator?: boolean;
+	}
+
+	interface Props {
+		items: ContextMenuItem[];
+		x: number;
+		y: number;
+		onSelect: (item: ContextMenuItem) => void;
+		onClose: () => void;
+	}
+
+	let { items, x, y, onSelect, onClose }: Props = $props();
+
+	let menuRef: HTMLDivElement;
+
+	// Adjust position to stay in viewport
+	let adjustedX = $state(0);
+	let adjustedY = $state(0);
+
+	$effect(() => {
+		// Initialize with prop values and adjust based on viewport
+		if (menuRef) {
+			const rect = menuRef.getBoundingClientRect();
+			const viewportWidth = window.innerWidth;
+			const viewportHeight = window.innerHeight;
+
+			if (x + rect.width > viewportWidth) {
+				adjustedX = viewportWidth - rect.width - 8;
+			} else {
+				adjustedX = x;
+			}
+
+			if (y + rect.height > viewportHeight) {
+				adjustedY = viewportHeight - rect.height - 8;
+			} else {
+				adjustedY = y;
+			}
+		} else {
+			// Before menu is mounted, use initial prop values
+			adjustedX = x;
+			adjustedY = y;
+		}
+	});
+
+	function handleClick(item: ContextMenuItem) {
+		if (item.disabled || item.separator) return;
+		onSelect(item);
+		onClose();
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			onClose();
+		}
+	}
+
+	function handleBackdropClick(event: MouseEvent) {
+		if (event.target === event.currentTarget) {
+			onClose();
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div class="ide-context-menu-backdrop" onclick={handleBackdropClick} role="presentation">
+	<div
+		bind:this={menuRef}
+		class="ide-context-menu"
+		style="left: {adjustedX}px; top: {adjustedY}px"
+		role="menu"
+	>
+		{#each items as item}
+			{#if item.separator}
+				<div class="ide-context-menu__separator"></div>
+			{:else}
+				<button
+					class="ide-context-menu__item"
+					class:ide-context-menu__item--disabled={item.disabled}
+					class:ide-context-menu__item--danger={item.danger}
+					disabled={item.disabled}
+					role="menuitem"
+					onclick={() => handleClick(item)}
+				>
+					{#if item.icon}
+						<Icon name={item.icon} size={14} />
+					{:else}
+						<span class="ide-context-menu__icon-placeholder"></span>
+					{/if}
+					<span class="ide-context-menu__label">{item.label}</span>
+					{#if item.shortcut}
+						<Kbd keys={item.shortcut} />
+					{/if}
+				</button>
+			{/if}
+		{/each}
+	</div>
+</div>
+
+<style>
+	.ide-context-menu-backdrop {
+		position: fixed;
+		inset: 0;
+		z-index: var(--ide-z-dropdown);
+	}
+
+	.ide-context-menu {
+		position: fixed;
+		min-width: 180px;
+		padding: var(--ide-spacing-xs);
+		background: var(--ide-bg-elevated);
+		border: 1px solid var(--ide-border);
+		border-radius: var(--ide-radius-lg);
+		box-shadow: var(--ide-shadow-lg);
+		animation: ide-fade-in var(--ide-transition-fast);
+	}
+
+	.ide-context-menu__item {
+		display: flex;
+		align-items: center;
+		gap: var(--ide-spacing-sm);
+		width: 100%;
+		padding: var(--ide-spacing-xs) var(--ide-spacing-sm);
+		font-family: var(--ide-font-sans);
+		font-size: var(--ide-font-size-sm);
+		color: var(--ide-text-primary);
+		background: transparent;
+		border: none;
+		border-radius: var(--ide-radius-sm);
+		cursor: pointer;
+		text-align: left;
+		transition: background var(--ide-transition-fast);
+	}
+
+	.ide-context-menu__item:hover:not(:disabled) {
+		background: var(--ide-bg-hover);
+	}
+
+	.ide-context-menu__item--disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.ide-context-menu__item--danger {
+		color: var(--ide-error);
+	}
+
+	.ide-context-menu__item--danger:hover:not(:disabled) {
+		background: color-mix(in srgb, var(--ide-error) 15%, transparent);
+	}
+
+	.ide-context-menu__icon-placeholder {
+		width: 14px;
+	}
+
+	.ide-context-menu__label {
+		flex: 1;
+	}
+
+	.ide-context-menu__separator {
+		height: 1px;
+		margin: var(--ide-spacing-xs) 0;
+		background: var(--ide-border);
+	}
+</style>

package/dist/components/core/ContextMenu.svelte.d.ts

@@ -0,0 +1,19 @@
+export interface ContextMenuItem {
+    id: string;
+    label: string;
+    icon?: string;
+    shortcut?: string[];
+    disabled?: boolean;
+    danger?: boolean;
+    separator?: boolean;
+}
+interface Props {
+    items: ContextMenuItem[];
+    x: number;
+    y: number;
+    onSelect: (item: ContextMenuItem) => void;
+    onClose: () => void;
+}
+declare const ContextMenu: import("svelte").Component<Props, {}, "">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;