@nocturnium/svelte-ide 1.0.0-rc.1

package/dist/components/core/ResizeHandle.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+	/**
+	 * ResizeHandle - Draggable handle for resizing panels
+	 *
+	 * Supports vertical (left/right) and horizontal (top/bottom) orientations.
+	 * Resizes in real-time as you drag.
+	 */
+	import { onDestroy } from 'svelte';
+
+	interface Props {
+		/** Orientation of the resize handle */
+		direction: 'vertical' | 'horizontal';
+		/** Position relative to the panel */
+		position?: 'start' | 'end';
+		/** Minimum size in pixels */
+		min?: number;
+		/** Maximum size in pixels */
+		max?: number;
+		/** Current size in pixels */
+		size: number;
+		/** Callback when size changes */
+		onResize?: (size: number) => void;
+		/** Callback when drag starts */
+		onResizeStart?: () => void;
+		/** Callback when drag ends */
+		onResizeEnd?: () => void;
+		/** Additional CSS class */
+		class?: string;
+	}
+
+	let {
+		direction,
+		position = 'end',
+		min = 100,
+		max = 800,
+		size,
+		onResize,
+		onResizeStart,
+		onResizeEnd,
+		class: className = ''
+	}: Props = $props();
+
+	let isDragging = $state(false);
+
+	// Non-reactive tracking variables (captured in closures)
+	let dragState = {
+		active: false,
+		startPos: 0,
+		startSize: 0
+	};
+
+	function handleMouseDown(e: MouseEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+
+		isDragging = true;
+		dragState.active = true;
+		dragState.startPos = direction === 'vertical' ? e.clientX : e.clientY;
+		dragState.startSize = size;
+
+		onResizeStart?.();
+
+		// Use document-level listeners for reliable tracking
+		document.addEventListener('mousemove', handleMouseMove, { capture: true });
+		document.addEventListener('mouseup', handleMouseUp, { capture: true });
+		document.body.style.cursor = direction === 'vertical' ? 'col-resize' : 'row-resize';
+		document.body.style.userSelect = 'none';
+	}
+
+	function handleMouseMove(e: MouseEvent) {
+		if (!dragState.active) return;
+
+		e.preventDefault();
+
+		const currentPos = direction === 'vertical' ? e.clientX : e.clientY;
+		let delta = currentPos - dragState.startPos;
+
+		// Invert delta for 'start' position (resizing from left/top edge)
+		if (position === 'start') {
+			delta = -delta;
+		}
+
+		// Clamp to min/max and apply immediately
+		const newSize = Math.max(min, Math.min(max, dragState.startSize + delta));
+		onResize?.(newSize);
+	}
+
+	function handleMouseUp(e: MouseEvent) {
+		if (!dragState.active) return;
+
+		e.preventDefault();
+
+		dragState.active = false;
+		isDragging = false;
+
+		onResizeEnd?.();
+
+		document.removeEventListener('mousemove', handleMouseMove, { capture: true });
+		document.removeEventListener('mouseup', handleMouseUp, { capture: true });
+		document.body.style.cursor = '';
+		document.body.style.userSelect = '';
+	}
+
+	function handleDoubleClick() {
+		// Reset to default size on double-click
+		const defaultSize = Math.round((min + max) / 2);
+		onResize?.(defaultSize);
+	}
+
+	// Cleanup on destroy
+	onDestroy(() => {
+		if (dragState.active) {
+			document.removeEventListener('mousemove', handleMouseMove, { capture: true });
+			document.removeEventListener('mouseup', handleMouseUp, { capture: true });
+			document.body.style.cursor = '';
+			document.body.style.userSelect = '';
+		}
+	});
+</script>
+
+<div
+	class="resize-handle resize-handle--{direction} {className}"
+	class:resize-handle--dragging={isDragging}
+	onmousedown={handleMouseDown}
+	ondblclick={handleDoubleClick}
+	role="slider"
+	aria-orientation={direction}
+	aria-valuenow={size}
+	aria-valuemin={min}
+	aria-valuemax={max}
+	tabindex={0}
+>
+	<div class="resize-handle__indicator"></div>
+</div>
+
+<style>
+	.resize-handle {
+		position: relative;
+		flex-shrink: 0;
+		background: transparent;
+		transition: background-color 0.15s ease;
+		z-index: 10;
+	}
+
+	.resize-handle--vertical {
+		width: 6px;
+		height: 100%;
+		align-self: stretch;
+		cursor: col-resize;
+	}
+
+	.resize-handle--horizontal {
+		width: 100%;
+		height: 6px;
+		justify-self: stretch;
+		cursor: row-resize;
+	}
+
+	.resize-handle:hover,
+	.resize-handle--dragging {
+		background: var(--ide-interactive, #4a8db7);
+	}
+
+	.resize-handle__indicator {
+		position: absolute;
+		background: var(--ide-border, rgba(45, 90, 123, 0.4));
+		transition: background-color 0.15s ease;
+	}
+
+	.resize-handle--vertical .resize-handle__indicator {
+		top: 0;
+		bottom: 0;
+		left: 50%;
+		width: 1px;
+		transform: translateX(-50%);
+	}
+
+	.resize-handle--horizontal .resize-handle__indicator {
+		left: 0;
+		right: 0;
+		top: 50%;
+		height: 1px;
+		transform: translateY(-50%);
+	}
+
+	.resize-handle:hover .resize-handle__indicator,
+	.resize-handle--dragging .resize-handle__indicator {
+		background: var(--ide-interactive, #4a8db7);
+	}
+
+	/* Focus styles for keyboard accessibility */
+	.resize-handle:focus {
+		outline: none;
+	}
+
+	.resize-handle:focus-visible {
+		outline: 2px solid var(--ide-interactive, #4a8db7);
+		outline-offset: -2px;
+	}
+</style>

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

@@ -0,0 +1,23 @@
+interface Props {
+    /** Orientation of the resize handle */
+    direction: 'vertical' | 'horizontal';
+    /** Position relative to the panel */
+    position?: 'start' | 'end';
+    /** Minimum size in pixels */
+    min?: number;
+    /** Maximum size in pixels */
+    max?: number;
+    /** Current size in pixels */
+    size: number;
+    /** Callback when size changes */
+    onResize?: (size: number) => void;
+    /** Callback when drag starts */
+    onResizeStart?: () => void;
+    /** Callback when drag ends */
+    onResizeEnd?: () => void;
+    /** Additional CSS class */
+    class?: string;
+}
+declare const ResizeHandle: import("svelte").Component<Props, {}, "">;
+type ResizeHandle = ReturnType<typeof ResizeHandle>;
+export default ResizeHandle;

package/dist/components/core/Spinner.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	interface Props {
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		class?: string;
+	}
+
+	let { size = 'md', class: className = '' }: Props = $props();
+
+	const sizeMap = {
+		xs: '12px',
+		sm: '16px',
+		md: '24px',
+		lg: '32px'
+	};
+</script>
+
+<div
+	class="ide-spinner {className}"
+	style="--spinner-size: {sizeMap[size]}"
+	role="status"
+	aria-label="Loading"
+>
+	<span class="ide-visually-hidden">Loading...</span>
+</div>
+
+<style>
+	.ide-spinner {
+		width: var(--spinner-size);
+		height: var(--spinner-size);
+		border: 2px solid var(--ide-border);
+		border-top-color: var(--ide-interactive);
+		border-radius: 50%;
+		animation: ide-spin 0.6s linear infinite;
+	}
+</style>

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

@@ -0,0 +1,7 @@
+interface Props {
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    class?: string;
+}
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/components/core/Textarea.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	interface Props {
+		id?: string;
+		value?: string;
+		placeholder?: string;
+		disabled?: boolean;
+		readonly?: boolean;
+		rows?: number;
+		resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+		error?: string;
+		fullWidth?: boolean;
+		class?: string;
+		oninput?: (event: Event) => void;
+		onchange?: (event: Event) => void;
+		onkeydown?: (event: KeyboardEvent) => void;
+	}
+
+	let {
+		id,
+		value = $bindable(''),
+		placeholder = '',
+		disabled = false,
+		readonly = false,
+		rows = 3,
+		resize = 'vertical',
+		error = '',
+		fullWidth = false,
+		class: className = '',
+		oninput,
+		onchange,
+		onkeydown
+	}: Props = $props();
+
+	function handleInput(event: Event) {
+		const target = event.target as HTMLTextAreaElement;
+		value = target.value;
+		oninput?.(event);
+	}
+</script>
+
+<div class="ide-textarea-wrapper {fullWidth ? 'ide-textarea-wrapper--full' : ''} {className}">
+	<textarea
+		{id}
+		class="ide-textarea"
+		class:ide-textarea--error={!!error}
+		style="resize: {resize}"
+		{value}
+		{placeholder}
+		{disabled}
+		{readonly}
+		{rows}
+		oninput={handleInput}
+		{onchange}
+		{onkeydown}
+	></textarea>
+	{#if error}
+		<span class="ide-textarea__error">{error}</span>
+	{/if}
+</div>
+
+<style>
+	.ide-textarea-wrapper {
+		display: inline-flex;
+		flex-direction: column;
+		gap: var(--ide-spacing-xs);
+	}
+
+	.ide-textarea-wrapper--full {
+		width: 100%;
+	}
+
+	.ide-textarea {
+		width: 100%;
+		padding: var(--ide-spacing-sm);
+		font-family: var(--ide-font-sans);
+		font-size: var(--ide-font-size-sm);
+		line-height: var(--ide-line-height-normal);
+		background: var(--ide-bg-secondary);
+		color: var(--ide-text-primary);
+		border: 1px solid var(--ide-border);
+		border-radius: var(--ide-radius-md);
+		transition: all var(--ide-transition-fast);
+	}
+
+	.ide-textarea:hover:not(:disabled) {
+		border-color: var(--ide-interactive);
+	}
+
+	.ide-textarea:focus {
+		outline: none;
+		border-color: var(--ide-interactive-focus);
+		box-shadow: 0 0 0 2px color-mix(in srgb, var(--ide-interactive-focus) 25%, transparent);
+	}
+
+	.ide-textarea:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.ide-textarea::placeholder {
+		color: var(--ide-text-muted);
+	}
+
+	.ide-textarea--error {
+		border-color: var(--ide-error);
+	}
+
+	.ide-textarea__error {
+		font-size: var(--ide-font-size-xs);
+		color: var(--ide-error);
+	}
+</style>

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

@@ -0,0 +1,18 @@
+interface Props {
+    id?: string;
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    rows?: number;
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    error?: string;
+    fullWidth?: boolean;
+    class?: string;
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/core/Tooltip.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		content: string;
+		position?: 'top' | 'bottom' | 'left' | 'right';
+		delay?: number;
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		content,
+		position = 'top',
+		delay = 300,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	let visible = $state(false);
+	let timeout: ReturnType<typeof setTimeout> | null = null;
+
+	function show() {
+		timeout = setTimeout(() => {
+			visible = true;
+		}, delay);
+	}
+
+	function hide() {
+		if (timeout) {
+			clearTimeout(timeout);
+			timeout = null;
+		}
+		visible = false;
+	}
+</script>
+
+<div
+	class="ide-tooltip-wrapper {className}"
+	onmouseenter={show}
+	onmouseleave={hide}
+	onfocus={show}
+	onblur={hide}
+	role="tooltip"
+>
+	{@render children()}
+	{#if visible && content}
+		<div class="ide-tooltip ide-tooltip--{position}" role="tooltip">
+			{content}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.ide-tooltip-wrapper {
+		position: relative;
+		display: inline-flex;
+	}
+
+	.ide-tooltip {
+		position: absolute;
+		z-index: var(--ide-z-tooltip);
+		padding: var(--ide-spacing-xs) var(--ide-spacing-sm);
+		font-size: var(--ide-font-size-xs);
+		font-family: var(--ide-font-sans);
+		color: var(--ide-text-primary);
+		background: var(--ide-bg-elevated);
+		border: 1px solid var(--ide-border);
+		border-radius: var(--ide-radius-md);
+		box-shadow: var(--ide-shadow-md);
+		white-space: nowrap;
+		pointer-events: none;
+		animation: ide-fade-in var(--ide-transition-fast);
+	}
+
+	.ide-tooltip--top {
+		bottom: 100%;
+		left: 50%;
+		transform: translateX(-50%);
+		margin-bottom: 6px;
+	}
+
+	.ide-tooltip--bottom {
+		top: 100%;
+		left: 50%;
+		transform: translateX(-50%);
+		margin-top: 6px;
+	}
+
+	.ide-tooltip--left {
+		right: 100%;
+		top: 50%;
+		transform: translateY(-50%);
+		margin-right: 6px;
+	}
+
+	.ide-tooltip--right {
+		left: 100%;
+		top: 50%;
+		transform: translateY(-50%);
+		margin-left: 6px;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    content: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    delay?: number;
+    class?: string;
+    children: Snippet;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

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

@@ -0,0 +1,13 @@
+export { default as Button } from './Button.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { default as Kbd } from './Kbd.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export { default as ContextMenu } from './ContextMenu.svelte';
+export { default as ResizeHandle } from './ResizeHandle.svelte';
+export { default as ErrorBoundary } from './ErrorBoundary.svelte';
+export { default as ConnectionStatus } from './ConnectionStatus.svelte';

package/dist/components/core/index.js

@@ -0,0 +1,14 @@
+// Core UI components
+export { default as Button } from './Button.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { default as Kbd } from './Kbd.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export { default as ContextMenu } from './ContextMenu.svelte';
+export { default as ResizeHandle } from './ResizeHandle.svelte';
+export { default as ErrorBoundary } from './ErrorBoundary.svelte';
+export { default as ConnectionStatus } from './ConnectionStatus.svelte';