@nocturnium/svelte-ide 1.3.0 → 1.5.0

package/README.md

@@ -8,9 +8,10 @@ framework.
 [![license](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)
 [![svelte](https://img.shields.io/badge/Svelte-5-ff3e00.svg)](https://svelte.dev)
 
-Built from scratch with Svelte 5 runes and zero runtime UI dependencies. Use a
-single `<CustomEditor>` for a textarea-grade upgrade, or compose the editor,
-LSP, collaboration, AI, and plugin pieces into a full IDE experience.
+Built from scratch with Svelte 5 runes and **zero required runtime dependencies
+beyond the Svelte 5 peer**. Use a single `<CustomEditor>` for a textarea-grade
+upgrade, or compose the editor, LSP, collaboration, AI, and plugin pieces into a
+full IDE experience.
 
 ---
 
@@ -26,7 +27,9 @@ LSP, collaboration, AI, and plugin pieces into a full IDE experience.
 - **AI panel & agent presence** layers for assistant UI and presence patterns.
 - **Plugin system** with a proposal-based lifecycle (bring your own backend).
 - **Themeable** — every color/size is a CSS custom property you can override.
-- **Zero external UI dependencies**; collaboration deps are optional peers.
+- **Minimal footprint** — no required runtime dependencies beyond the Svelte 5
+  peer; styling is plain CSS variables (no CSS framework). The Yjs collaboration
+  stack is the only other runtime dependency, and it's an optional peer.
 
 ## Install
 
@@ -43,6 +46,25 @@ Collaboration is optional and tree-shakeable — install these only if you use t
 npm install yjs y-websocket y-protocols
 ```
 
+## Dependencies
+
+The published package carries **no top-level `dependencies`** — it ships with
+zero required runtime dependencies beyond the Svelte 5 peer.
+
+- **`svelte` `^5.0.0`** — the one required peer. Your app already has it.
+- **`yjs`, `y-protocols`, `y-websocket`** — _optional_ peers, marked
+  `optional: true`. They are imported only by the realtime-collaboration code
+  (`<CollaborativeEditor>` and the `./crdt` entry), so they're pulled in only if
+  you actually use collaboration. The rest of the library never touches them.
+- **No CSS framework at runtime.** Styling is plain CSS custom properties
+  shipped in `@nocturnium/svelte-ide/theme.css` — no Tailwind, no `@apply`, no
+  utility-class runtime. (Tailwind is used only to build this repo's demo site.)
+
+Everything else in `package.json` — Vite, ESLint, TypeScript, Vitest,
+Playwright, semantic-release, Tailwind, Prettier, and the rest — is a
+`devDependency` used to build, test, and lint the library. None of it is
+published: only the `dist/` folder ships (`"files": ["dist"]`).
+
 ## Quick start
 
 Import the component **and** the theme stylesheet (components are unstyled

package/dist/components/ai/AIEditPreview.svelte

@@ -34,6 +34,18 @@
 				return 'default';
 		}
 	});
+
+	type DiffLineKind = 'added' | 'removed' | 'context';
+
+	const diffLines = $derived.by((): Array<{ kind: DiffLineKind; text: string }> => {
+		if (!session.diff) return [];
+		return session.diff.split('\n').map((text) => {
+			let kind: DiffLineKind = 'context';
+			if (text.startsWith('+') && !text.startsWith('+++')) kind = 'added';
+			else if (text.startsWith('-') && !text.startsWith('---')) kind = 'removed';
+			return { kind, text };
+		});
+	});
 </script>
 
 <div class="ai-edit-preview {className}">
@@ -52,7 +64,11 @@
 
 	{#if session.diff}
 		<div class="ai-edit-preview__diff">
-			<pre>{session.diff}</pre>
+			{#each diffLines as line, i (i)}
+				<div class="ai-edit-preview__diff-line ai-edit-preview__diff-line--{line.kind}">
+					{line.text || ' '}
+				</div>
+			{/each}
 		</div>
 	{/if}
 
@@ -110,16 +126,30 @@
 	.ai-edit-preview__diff {
 		max-height: 300px;
 		overflow: auto;
+		padding: var(--ide-spacing-sm) 0;
 		background: var(--ide-bg-primary);
-	}
-
-	.ai-edit-preview__diff pre {
-		margin: 0;
-		padding: var(--ide-spacing-md);
 		font-family: var(--ide-font-mono);
 		font-size: var(--ide-font-size-xs);
 		line-height: 1.6;
+	}
+
+	.ai-edit-preview__diff-line {
+		padding: 0 var(--ide-spacing-md);
+		/* keep the +/- gutter and code intact, wrapping long lines */
 		white-space: pre-wrap;
+		/* reserve the indent the colored rows claim with their left border,
+		   so added/removed text doesn't shift relative to context lines */
+		border-left: 2px solid transparent;
+	}
+
+	.ai-edit-preview__diff-line--added {
+		background: color-mix(in srgb, var(--ide-success) 12%, transparent);
+		border-left-color: var(--ide-success);
+	}
+
+	.ai-edit-preview__diff-line--removed {
+		background: color-mix(in srgb, var(--ide-error) 12%, transparent);
+		border-left-color: var(--ide-error);
 	}
 
 	.ai-edit-preview__actions {

package/dist/components/ai/AIPanel.svelte

@@ -60,8 +60,25 @@
 	onMount(async () => {
 		await initPersistence();
 		persistedConversations = await loadConversations();
+		// Anchor the conversation to the START of the last message on mount so a
+		// seeded/long assistant message reads from its header, not a stale browser
+		// mid-content scroll offset (which looks like an abandoned position).
+		scrollToLastMessageStart();
 	});
 
+	// Bring the start of the most recent message into view (its header at the top
+	// of the viewport) rather than slamming to the very bottom of its body.
+	function scrollToLastMessageStart() {
+		if (!messagesContainer) return;
+		const messages = messagesContainer.querySelectorAll('.ai-message, [data-ai-message]');
+		const last = messages[messages.length - 1] as HTMLElement | undefined;
+		if (last) {
+			messagesContainer.scrollTop = Math.max(0, last.offsetTop - messagesContainer.offsetTop);
+		} else {
+			messagesContainer.scrollTop = 0;
+		}
+	}
+
 	// Auto-scroll to bottom when new messages arrive
 	$effect(() => {
 		if (messagesContainer && getMessages().length > 0) {
@@ -201,6 +218,7 @@
 					size="xs"
 					onclick={() => (sidebarOpen = !sidebarOpen)}
 					title={sidebarOpen ? 'Hide sidebar' : 'Show sidebar'}
+					aria-label={sidebarOpen ? 'Hide conversation sidebar' : 'Show conversation sidebar'}
 				>
 					<Icon name={sidebarOpen ? 'panel-left-close' : 'panel-left'} size={14} />
 				</Button>
@@ -208,12 +226,16 @@
 					<Icon name="sparkles" size={16} />
 					<span>AI Assistant</span>
 				</div>
-				<span class="ai-panel__mock-badge" title="Demo mock - no real model"
-					>Demo mock - no real model</span
-				>
+				<span class="ai-panel__mock-badge" title="Demo mock - no real model">Demo mock</span>
 			</div>
 			<div class="ai-panel__actions">
-				<Button variant="ghost" size="xs" onclick={handleNewConversation} title="New conversation">
+				<Button
+					variant="ghost"
+					size="xs"
+					onclick={handleNewConversation}
+					title="New conversation"
+					aria-label="New conversation"
+				>
 					<Icon name="plus" size={14} />
 				</Button>
 			</div>
@@ -271,7 +293,13 @@
 			<div class="ai-panel__error">
 				<Icon name="alert-circle" size={14} />
 				<span>{getError()}</span>
-				<Button variant="ghost" size="xs" onclick={clearError}>
+				<Button
+					variant="ghost"
+					size="xs"
+					onclick={clearError}
+					title="Dismiss error"
+					aria-label="Dismiss error"
+				>
 					<Icon name="x" size={12} />
 				</Button>
 			</div>
@@ -283,7 +311,7 @@
 				bind:this={textareaEl}
 				bind:value={inputValue}
 				class="ai-panel__textarea"
-				placeholder="Ask AI anything... (Enter to send, Shift+Enter for new line)"
+				placeholder="Ask AI anything..."
 				rows={1}
 				disabled={getIsStreaming() || isSubmitting}
 				onkeydown={handleKeydown}
@@ -356,9 +384,9 @@
 	.ai-panel__mock-badge {
 		display: inline-flex;
 		align-items: center;
-		min-width: 0;
-		max-width: 100%;
-		overflow: hidden;
+		/* Size to the label so it never clips its own text; the header-left flex
+		   keeps it from squeezing the title. Full copy lives in the title tooltip. */
+		flex-shrink: 0;
 		padding: 0.125rem var(--ide-spacing-sm);
 		border: 1px solid color-mix(in srgb, var(--ide-accent) 40%, var(--ide-border));
 		border-radius: var(--ide-radius-full);
@@ -367,7 +395,6 @@
 		font-size: var(--ide-font-size-xs);
 		font-weight: 500;
 		line-height: var(--ide-line-height-normal);
-		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 
@@ -504,6 +531,11 @@
 		align-items: flex-end;
 		gap: var(--ide-spacing-sm);
 		padding: var(--ide-spacing-md);
+		/* Anchor the composer to the bottom of the panel's flex column with a real
+		   bottom inset (incl. iOS safe-area) so it always sits above the host
+		   status bar and its border never reads as bleeding off-screen. */
+		padding-bottom: calc(var(--ide-spacing-md) + env(safe-area-inset-bottom, 0px));
+		flex-shrink: 0;
 		border-top: 1px solid var(--ide-border);
 		background: var(--ide-bg-secondary);
 	}
@@ -564,10 +596,6 @@
 		.ai-panel__input {
 			padding: var(--ide-spacing-sm);
 		}
-
-		.ai-panel__mock-badge {
-			white-space: normal;
-		}
 	}
 
 	@media (max-width: 480px) {

package/dist/components/core/Button.svelte

@@ -74,8 +74,15 @@
 		outline-offset: 2px;
 	}
 
-	.ide-button:disabled {
-		opacity: 0.5;
+	/* Disabled/loading: dim the fill, not the label. Routing every variant
+	   to a neutral tertiary surface with muted (still legible) text keeps the
+	   label >=3:1 instead of multiplying the variant fill by opacity 0.5,
+	   which crushed cream-on-orange/white-on-salmon below readable contrast. */
+	.ide-button.ide-button:disabled {
+		background: var(--ide-bg-tertiary);
+		color: var(--ide-text-secondary);
+		border-color: var(--ide-border);
+		opacity: 0.85;
 		cursor: not-allowed;
 	}
 
@@ -86,7 +93,7 @@
 	/* Variants */
 	.ide-button--primary {
 		background: var(--ide-primary);
-		color: var(--ide-text-primary);
+		color: var(--ide-text-inverse);
 	}
 
 	.ide-button--primary:hover:not(:disabled) {
@@ -116,7 +123,7 @@
 
 	.ide-button--danger {
 		background: var(--ide-error);
-		color: white;
+		color: var(--ide-text-inverse);
 	}
 
 	.ide-button--danger:hover:not(:disabled) {

package/dist/components/core/Icon.svelte

@@ -14,6 +14,8 @@
 		folder: 'M10 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8l-2-2z',
 		'folder-open':
 			'M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2v2M2 11h20l-2 8H4l-2-8z',
+		'file-code':
+			'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 2v6h6M10 13l-2 2 2 2M14 13l2 2-2 2',
 
 		// Actions
 		close: 'M18 6L6 18M6 6l12 12',
@@ -55,6 +57,11 @@
 		bot: 'M12 8V4H8M12 8a4 4 0 0 0-4 4v6a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-6a4 4 0 0 0-4-4zM9 13h.01M15 13h.01',
 		wand: 'M15 4V2M15 16v-2M8 9h2M20 9h2M17.8 11.8L19 13M17.8 6.2L19 5M12.2 11.8L11 13M12.2 6.2L11 5M12 12l-9 9',
 		message: 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10z',
+		'message-circle':
+			'M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z',
+		send: 'M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z',
+		// loader: a continuous spinner ring (3/4 arc with a leading cap) — distinct from `loading`'s 8 discrete spokes
+		loader: 'M21 12a9 9 0 1 1-6.219-8.56',
 
 		// Status
 		info: 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 16v-4M12 8h.01',
@@ -77,6 +84,8 @@
 		'git-commit': 'M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM1.05 12H8M16 12h6.95',
 		'git-merge':
 			'M18 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21V9a9 9 0 0 0 9 9M6 21h12',
+		'git-compare':
+			'M18 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM13 6h3a2 2 0 0 1 2 2v7M11 18H8a2 2 0 0 1-2-2V9',
 
 		// Misc
 		play: 'M5 3l14 9-14 9V3z',
@@ -87,11 +96,20 @@
 		clock: 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 6v6l4 2',
 		zap: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z',
 		plugin:
-			'M12 2v6M12 18v4M4.93 4.93l4.24 4.24M14.83 14.83l4.24 4.24M2 12h6M18 12h4M4.93 19.07l4.24-4.24M14.83 9.17l4.24-4.24'
+			'M12 2v6M12 18v4M4.93 4.93l4.24 4.24M14.83 14.83l4.24 4.24M2 12h6M18 12h4M4.93 19.07l4.24-4.24M14.83 9.17l4.24-4.24',
+		database:
+			'M12 8c4.418 0 8-1.343 8-3s-3.582-3-8-3-8 1.343-8 3 3.582 3 8 3zM20 5v6c0 1.657-3.582 3-8 3s-8-1.343-8-3V5M20 11v6c0 1.657-3.582 3-8 3s-8-1.343-8-3v-6'
 	};
 
 	const path = $derived(icons[name] ?? icons.file);
 	const sizeValue = $derived(typeof size === 'number' ? `${size}px` : size);
+
+	// Dev-time guard: warn when a name misses the map so silent `file`-fallback drift is caught.
+	$effect(() => {
+		if (import.meta.env.DEV && !(name in icons)) {
+			console.warn(`[Icon] no glyph for name "${name}" — falling back to the generic "file" icon`);
+		}
+	});
 </script>
 
 <svg

package/dist/components/core/ResizeHandle.svelte

@@ -18,6 +18,12 @@
 		max?: number;
 		/** Current size in pixels */
 		size: number;
+		/** Step (px) for keyboard arrow adjustment (default 10; Shift = 5x) */
+		step?: number;
+		/** Size to snap to on double-click (defaults to the midpoint of min/max) */
+		defaultSize?: number;
+		/** Accessible name for the slider (e.g. "Resize left panel") */
+		ariaLabel?: string;
 		/** Callback when size changes */
 		onResize?: (size: number) => void;
 		/** Callback when drag starts */
@@ -34,6 +40,9 @@
 		min = 100,
 		max = 800,
 		size,
+		step = 10,
+		defaultSize,
+		ariaLabel,
 		onResize,
 		onResizeStart,
 		onResizeEnd,
@@ -102,9 +111,43 @@
 	}
 
 	function handleDoubleClick() {
-		// Reset to default size on double-click
-		const defaultSize = Math.round((min + max) / 2);
-		onResize?.(defaultSize);
+		// Reset to the configured default (or the midpoint of min/max).
+		onResize?.(defaultSize ?? Math.round((min + max) / 2));
+	}
+
+	// Keyboard operation for the slider role: arrows adjust the size, Home/End jump
+	// to min/max. Without this the role="slider" + aria-value* attributes promise
+	// an adjustable control that a keyboard/SR user cannot actually move.
+	function handleKeyDown(e: KeyboardEvent) {
+		const amount = e.shiftKey ? step * 5 : step;
+		let next: number;
+		switch (e.key) {
+			case 'ArrowRight':
+			case 'ArrowUp':
+				next = size + amount;
+				break;
+			case 'ArrowLeft':
+			case 'ArrowDown':
+				next = size - amount;
+				break;
+			case 'Home':
+				next = min;
+				break;
+			case 'End':
+				next = max;
+				break;
+			case 'Enter':
+			case ' ':
+				// Keyboard equivalent of double-click-to-reset: snap to the
+				// configured default (or the midpoint of min/max).
+				next = defaultSize ?? Math.round((min + max) / 2);
+				break;
+			default:
+				return;
+		}
+		e.preventDefault();
+		const clamped = Math.max(min, Math.min(max, next));
+		if (clamped !== size) onResize?.(clamped);
 	}
 
 	// Cleanup on destroy
@@ -123,7 +166,9 @@
 	class:resize-handle--dragging={isDragging}
 	onmousedown={handleMouseDown}
 	ondblclick={handleDoubleClick}
+	onkeydown={handleKeyDown}
 	role="slider"
+	aria-label={ariaLabel}
 	aria-orientation={direction}
 	aria-valuenow={size}
 	aria-valuemin={min}
@@ -131,6 +176,11 @@
 	tabindex={0}
 >
 	<div class="resize-handle__indicator"></div>
+	<div class="resize-handle__grip" aria-hidden="true">
+		<span></span>
+		<span></span>
+		<span></span>
+	</div>
 </div>
 
 <style>
@@ -163,7 +213,9 @@
 
 	.resize-handle__indicator {
 		position: absolute;
-		background: var(--ide-border, rgba(45, 90, 123, 0.4));
+		/* Brighter resting hairline so the handle reads as a grab affordance
+		   without leaning on the page's "Drag the edge" labels. */
+		background: color-mix(in srgb, var(--ide-border) 55%, var(--ide-text-secondary));
 		transition: background-color 0.15s ease;
 	}
 
@@ -184,17 +236,49 @@
 	}
 
 	.resize-handle:hover .resize-handle__indicator,
+	.resize-handle:focus-visible .resize-handle__indicator,
 	.resize-handle--dragging .resize-handle__indicator {
 		background: var(--ide-interactive, #4a8db7);
 	}
 
+	/* Centered grip motif (2-3 dots) so the resting handle reads as grabbable. */
+	.resize-handle__grip {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		display: flex;
+		gap: 3px;
+		transform: translate(-50%, -50%);
+		pointer-events: none;
+	}
+
+	.resize-handle__grip span {
+		display: block;
+		width: 2px;
+		height: 2px;
+		border-radius: 50%;
+		background: color-mix(in srgb, var(--ide-border) 40%, var(--ide-text-secondary));
+		transition: background-color 0.15s ease;
+	}
+
+	/* Stack the dots along the drag axis (vertical handle = dots in a column). */
+	.resize-handle--vertical .resize-handle__grip {
+		flex-direction: column;
+	}
+
+	.resize-handle:hover .resize-handle__grip span,
+	.resize-handle:focus-visible .resize-handle__grip span,
+	.resize-handle--dragging .resize-handle__grip span {
+		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;
+		outline: 2px solid var(--ide-interactive-focus, #4a8db7);
+		outline-offset: 2px;
 	}
 </style>

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

@@ -9,6 +9,12 @@ interface Props {
     max?: number;
     /** Current size in pixels */
     size: number;
+    /** Step (px) for keyboard arrow adjustment (default 10; Shift = 5x) */
+    step?: number;
+    /** Size to snap to on double-click (defaults to the midpoint of min/max) */
+    defaultSize?: number;
+    /** Accessible name for the slider (e.g. "Resize left panel") */
+    ariaLabel?: string;
     /** Callback when size changes */
     onResize?: (size: number) => void;
     /** Callback when drag starts */

package/dist/components/core/Tooltip.svelte

@@ -1,3 +1,9 @@
+<script module lang="ts">
+	// Stable per-instance counter (SSR-safe — no Math.random/Date) so the bubble's
+	// id matches across server render and hydration for aria-describedby.
+	let tooltipCounter = 0;
+</script>
+
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 
@@ -11,6 +17,7 @@
 
 	let { content, position = 'top', delay = 300, class: className = '', children }: Props = $props();
 
+	const tooltipId = `ide-tooltip-${++tooltipCounter}`;
 	let visible = $state(false);
 	let timeout: ReturnType<typeof setTimeout> | null = null;
 
@@ -29,17 +36,21 @@
 	}
 </script>
 
+<!-- Presentational hover/focus container: the real trigger is the wrapped child,
+     and the tooltip text is exposed via aria-describedby. It is deliberately NOT
+     given a role (a role="tooltip" here was the original bug). -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="ide-tooltip-wrapper {className}"
 	onmouseenter={show}
 	onmouseleave={hide}
 	onfocus={show}
 	onblur={hide}
-	role="tooltip"
+	aria-describedby={visible && content ? tooltipId : undefined}
 >
 	{@render children()}
 	{#if visible && content}
-		<div class="ide-tooltip ide-tooltip--{position}" role="tooltip">
+		<div id={tooltipId} class="ide-tooltip ide-tooltip--{position}" role="tooltip">
 			{content}
 		</div>
 	{/if}

package/dist/components/editor/CustomEditor.svelte

@@ -8,8 +8,12 @@
 		createDefaultKeybindings,
 		createFoldManager,
 		extractFunctionAt,
+		extractVariableAt,
+		organizeImportsAt,
 		type EditorState,
 		type ExtractFunctionResult,
+		type ExtractVariableResult,
+		type OrganizeImportsResult,
 		type Selection,
 		type SearchMatch,
 		type FoldManager,
@@ -607,6 +611,36 @@
 		return result;
 	}
 
+	/**
+	 * Extract the current selection into a hoisted `const` (Track H). Single undo
+	 * step; on refusal the editor is untouched and the reason is returned.
+	 */
+	export function extractVariable(): ExtractVariableResult {
+		const result = extractVariableAt(editorState);
+		announce(result.ok ? 'Extracted variable' : result.reason);
+		return result;
+	}
+
+	/**
+	 * Sort, de-duplicate, and tidy the leading import block (Track H). Single undo
+	 * step; on refusal the editor is untouched and the reason is returned.
+	 */
+	export function organizeImports(): OrganizeImportsResult {
+		const result = organizeImportsAt(editorState);
+		announce(result.ok ? 'Organized imports' : result.reason);
+		return result;
+	}
+
+	/** Current primary selection (anchor/head), for callers driving code actions. */
+	export function getSelection(): Selection {
+		return editorState.selection;
+	}
+
+	/** Text covered by the current primary selection ('' when collapsed). */
+	export function getSelectedText(): string {
+		return editorState.getSelectedText();
+	}
+
 	function handleFoldIndicatorClick(lineNumber: number, e: MouseEvent) {
 		e.preventDefault();
 		e.stopPropagation();

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

@@ -1,5 +1,5 @@
 import type { EditorPreferences } from '../../types';
-import { type ExtractFunctionResult, type Cursor } from './core';
+import { type ExtractFunctionResult, type ExtractVariableResult, type OrganizeImportsResult, type Selection, type Cursor } from './core';
 import { type ComplexityMetrics, type ComplexityRegion } from './core/complexity-analyzer';
 import { type FoldPreset } from './core/semantic-analyzer';
 import type { AIAwareness } from './core/ai-awareness';
@@ -39,6 +39,10 @@ declare const CustomEditor: import("svelte").Component<Props, {
     flashComplexityRegion: (region: ComplexityRegion) => void;
     scrollToLine: (line: number, region?: ComplexityRegion) => Promise<void>;
     extractFunction: () => ExtractFunctionResult;
+    extractVariable: () => ExtractVariableResult;
+    organizeImports: () => OrganizeImportsResult;
+    getSelection: () => Selection;
+    getSelectedText: () => string;
 }, "content">;
 type CustomEditor = ReturnType<typeof CustomEditor>;
 export default CustomEditor;

package/dist/components/editor/EchoCursorLayer.svelte

@@ -400,7 +400,10 @@
 
 	/* Mode indicator */
 	.echo-mode-indicator {
-		position: fixed;
+		/* Anchor to this layer's own editor (the .echo-cursor-layer fills it via
+		   absolute inset:0), not the viewport — a fixed pill would float free of
+		   the editor it reports on wherever the layer is embedded. */
+		position: absolute;
 		bottom: 16px;
 		right: 16px;
 		display: flex;

package/dist/components/editor/GhostBracketLayer.svelte

@@ -228,23 +228,31 @@
 		display: inline-block;
 		font-family: inherit;
 		font-size: inherit;
+		font-weight: 700;
 		color: var(--ghost-color);
-		opacity: 0.5;
+		/* Resting opacity ships legible (was 0.5) so the inferred brace reads
+		   against body text without a page-level :global override. */
+		opacity: 0.85;
+		/* Faint highlight: a soft glow in the confidence color keeps the AA-ish
+		   delta from surrounding code without recoloring the brace. */
+		text-shadow: 0 0 6px color-mix(in srgb, var(--ghost-color) 60%, transparent);
+		border-radius: 2px;
+		background: color-mix(in srgb, var(--ghost-color) 14%, transparent);
 		animation: ghost-pulse 2s ease-in-out infinite;
 	}
 
 	@keyframes ghost-pulse {
 		0%,
 		100% {
-			opacity: 0.5;
+			opacity: 0.85;
 		}
 		50% {
-			opacity: 0.3;
+			opacity: 0.65;
 		}
 	}
 
 	.ghost-bracket:hover .ghost-bracket__char {
-		opacity: 0.8;
+		opacity: 1;
 		animation: none;
 	}
 
@@ -350,9 +358,11 @@
 		position: absolute;
 		bottom: 2px;
 		left: 0;
-		width: 8px;
-		height: 2px;
-		background: var(--mismatch-color);
+		/* Span the brace and a short run of the offending line so the marker
+		   reads as anchored to its cause, not a detached tick above the code. */
+		width: 6ch;
+		height: 0;
+		border-bottom: 2px dotted var(--mismatch-color);
 		border-radius: 1px;
 	}