@ripple-ts/language-server 0.2.187 → 0.2.189

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ripple-ts/language-server",
-  "version": "0.2.187",
+  "version": "0.2.189",
   "description": "Language Server Protocol implementation for Ripple",
   "main": "index.js",
   "bin": {
@@ -19,10 +19,10 @@
     "volar-service-typescript": "0.0.65",
     "vscode-languageserver-textdocument": "^1.0.12",
     "vscode-uri": "^3.1.0",
-    "@ripple-ts/typescript-plugin": "0.2.187"
+    "@ripple-ts/typescript-plugin": "0.2.189"
   },
   "devDependencies": {
-    "ripple": "0.2.187"
+    "ripple": "0.2.189"
   },
   "peerDependencies": {
     "typescript": "^5.9.2"

package/src/autoInsertPlugin.js

@@ -66,6 +66,11 @@ function createAutoInsertPlugin() {
 
 					const [virtualCode] = getVirtualCode(document, context);
 
+					if (virtualCode.languageId !== 'ripple') {
+						log(`Skipping auto-insert processing in the '${virtualCode.languageId}' context`);
+						return null;
+					}
+
 					// Map position back to source
 					const offset = document.offsetAt(position);
 					const mapping = virtualCode.findMappingByGeneratedRange(lastChange.rangeOffset, offset);

package/src/completionPlugin.js

@@ -1,17 +1,209 @@
-/**
- * @import {LanguageServicePlugin} from '@volar/language-server'
- */
+/** @import { LanguageServicePlugin, TextEdit, CompletionItem } from '@volar/language-server'; */
 
 const { CompletionItemKind, InsertTextFormat } = require('@volar/language-server');
-const { getVirtualCode, createLogging } = require('./utils.js');
+const { getVirtualCode, createLogging, isInsideImport, isInsideExport } = require('./utils.js');
 
 const { log } = createLogging('[Ripple Completion Plugin]');
 
+/**
+ * Snippets that require auto-import from 'ripple'
+ * @type {Array<{label: string, filterText: string, detail: string, documentation: string, insertText: string, importName: string | null}>}
+ */
+const TRACKED_COLLECTION_SNIPPETS = [
+	{
+		label: '#Map',
+		filterText: '#Map',
+		detail: 'Create a Shorthand TrackedMap',
+		documentation: 'A reactive Map that triggers updates when modified',
+		insertText: 'new #Map(${1})',
+		importName: null,
+	},
+	{
+		label: '#Set',
+		filterText: '#Set',
+		detail: 'Create a Shorthand TrackedSet',
+		documentation: 'A reactive Set that triggers updates when modified',
+		insertText: 'new #Set(${1})',
+		importName: null,
+	},
+	{
+		label: 'TrackedMap',
+		filterText: 'TrackedMap',
+		detail: 'Create a TrackedMap',
+		documentation: 'A reactive Map that triggers updates when modified',
+		insertText: 'new TrackedMap(${1})',
+		importName: 'TrackedMap',
+	},
+	{
+		label: 'TrackedSet',
+		filterText: 'TrackedSet',
+		detail: 'Create a TrackedSet',
+		documentation: 'A reactive Set that triggers updates when modified',
+		insertText: 'new TrackedSet(${1})',
+		importName: 'TrackedSet',
+	},
+	{
+		label: 'TrackedArray',
+		filterText: 'TrackedArray',
+		detail: 'Create a TrackedArray',
+		documentation: 'A reactive Array that triggers updates when modified',
+		insertText: 'new TrackedArray(${1})',
+		importName: 'TrackedArray',
+	},
+	{
+		label: 'TrackedArray.from',
+		filterText: 'TrackedArray.from',
+		detail: 'Create a TrackedArray.from',
+		documentation: 'A reactive Array that triggers when modified',
+		insertText: 'new TrackedArray.from(${1})',
+		importName: 'TrackedArray',
+	},
+	{
+		label: 'TrackedObject',
+		filterText: 'TrackedObject',
+		detail: 'Create a TrackedObject',
+		documentation: 'A reactive Object that triggers updates when modified',
+		insertText: 'new TrackedObject(${1})',
+		importName: 'TrackedObject',
+	},
+	{
+		label: 'TrackedDate',
+		filterText: 'TrackedDate',
+		detail: 'Create a TrackedDate',
+		documentation: 'A reactive Date that triggers updates when modified',
+		insertText: 'new TrackedDate(${1})',
+		importName: 'TrackedDate',
+	},
+	{
+		label: 'TrackedURL',
+		filterText: 'TrackedURL',
+		detail: 'Create a TrackedURL',
+		documentation: 'A reactive URL that triggers updates when modified',
+		insertText: 'new TrackedURL(${1})',
+		importName: 'TrackedURL',
+	},
+	{
+		label: 'TrackedURLSearchParams',
+		filterText: 'TrackedURLSearchParams',
+		detail: 'Create a TrackedURLSearchParams',
+		documentation: 'A reactive URLSearchParams that triggers updates when modified',
+		insertText: 'new TrackedURLSearchParams(${1})',
+		importName: 'TrackedURLSearchParams',
+	},
+	{
+		label: 'MediaQuery',
+		filterText: 'MediaQuery',
+		detail: 'Create a MediaQuery',
+		documentation: 'A reactive media query that triggers updates when the query match changes',
+		insertText: 'new MediaQuery(${1})',
+		importName: 'MediaQuery',
+	},
+];
+
+/**
+ * Find the ripple import statement in the document
+ * @param {string} text - Full document text
+ * @returns {{line: number, startChar: number, endChar: number, imports: string[], hasSemicolon: boolean, fullMatch: string} | null}
+ */
+function findRippleImport(text) {
+	const lines = text.split('\n');
+	for (let i = 0; i < lines.length; i++) {
+		const line = lines[i];
+		// Match: import { x, y, z } from 'ripple'; (with optional semicolon and trailing whitespace)
+		const match = line.match(/^import\s*\{([^}]+)\}\s*from\s*['"]ripple['"](;?)(\s*)$/);
+		if (match) {
+			const imports = match[1]
+				.split(',')
+				.map((s) => s.trim())
+				.filter(Boolean);
+			return {
+				line: i,
+				startChar: 0,
+				endChar: line.length,
+				imports,
+				hasSemicolon: match[2] === ';',
+				fullMatch: line,
+			};
+		}
+	}
+	return null;
+}
+
+/**
+ * Generate additionalTextEdits to add an import
+ * @param {string} documentText - Full document text
+ * @param {string} importName - Name to import (e.g., 'TrackedMap')
+ * @returns {TextEdit[]}
+ */
+function generateImportEdit(documentText, importName) {
+	const existing = findRippleImport(documentText);
+
+	if (existing) {
+		// Check if already imported
+		if (existing.imports.includes(importName)) {
+			return []; // Already imported, no edit needed
+		}
+		// Add to existing import, preserving semicolon status
+		const newImports = [...existing.imports, importName].sort().join(', ');
+		const semicolon = existing.hasSemicolon ? ';' : '';
+		const newLine = `import { ${newImports} } from 'ripple'${semicolon}`;
+		return [
+			{
+				range: {
+					start: { line: existing.line, character: 0 },
+					end: { line: existing.line, character: existing.endChar },
+				},
+				newText: newLine,
+			},
+		];
+	}
+
+	// No existing ripple import - add new one at the top
+	// Find the best insertion point (after other imports, or at line 0)
+	const lines = documentText.split('\n');
+	let insertLine = 0;
+	for (let i = 0; i < lines.length; i++) {
+		if (lines[i].match(/^import\s/)) {
+			insertLine = i + 1; // Insert after last import
+		} else if (insertLine > 0 && !lines[i].match(/^import\s/) && lines[i].trim() !== '') {
+			break; // Stop if we've passed the import block
+		}
+	}
+
+	return [
+		{
+			range: {
+				start: { line: insertLine, character: 0 },
+				end: { line: insertLine, character: 0 },
+			},
+			newText: `import { ${importName} } from 'ripple';\n`,
+		},
+	];
+}
+
 /**
  * Ripple-specific completion enhancements
  * Adds custom completions for Ripple syntax patterns
  */
 const RIPPLE_SNIPPETS = [
+	{
+		label: '#[]',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Ripple Reactive Array Literal, shorthand for new TrackedArray',
+		documentation: 'Create a new Ripple Array Literal',
+		insertText: '#[${1}]',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-#-array-literal',
+	},
+	{
+		label: '#{}',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Ripple Reactive Object Literal, shorthand for new TrackedObject',
+		documentation: 'Create a new Ripple Object Literal',
+		insertText: '#{${1}}',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-#-object-literal',
+	},
 	{
 		label: 'component',
 		kind: CompletionItemKind.Snippet,
@@ -201,8 +393,9 @@ function createCompletionPlugin() {
 			completionProvider: {
 				// Trigger on Ripple-specific syntax:
 				// '<' - JSX/HTML tags
+				// '#' - TrackedMap/TrackedSet shortcuts
 				// Avoid '.' and ' ' to reduce noise - let manual trigger (Ctrl+Space) handle those
-				triggerCharacters: ['<'],
+				triggerCharacters: ['<', '#'],
 				resolveProvider: false,
 			},
 		},
@@ -219,10 +412,10 @@ function createCompletionPlugin() {
 
 					const [virtualCode] = getVirtualCode(document, context);
 
-					// Check if we're inside an embedded code (like CSS in <style> blocks)
-					// If so, don't provide Ripple snippets - let CSS completions take priority
-					if (virtualCode && virtualCode.languageId === 'css') {
-						log('Skipping Ripple completions in CSS context');
+					if (virtualCode.languageId !== 'ripple') {
+						// Check if we're inside an embedded code (like CSS in <style> blocks)
+						// If so, don't provide Ripple snippets - let CSS completions take priority
+						log(`Skipping Ripple completions in the '${virtualCode.languageId}' context`);
 						return { items: [], isIncomplete: false };
 					}
 
@@ -231,6 +424,7 @@ function createCompletionPlugin() {
 						end: position,
 					});
 
+					/** @type {CompletionItem[]} */
 					const items = [];
 
 					// Debug: log trigger info with clear marker
@@ -250,9 +444,14 @@ function createCompletionPlugin() {
 						lineEnd: line.substring(Math.max(0, line.length - 30)),
 					});
 
-					// Import completions when line starts with 'import'
-					if (line.trim().startsWith('import')) {
+					const fullText = document.getText();
+					const cursorOffset = document.offsetAt(position);
+
+					if (isInsideImport(fullText, cursorOffset)) {
 						items.push(...RIPPLE_IMPORTS);
+						return { items, isIncomplete: false };
+					} else if (isInsideExport(fullText, cursorOffset)) {
+						return { items, isIncomplete: false };
 					}
 
 					// @ accessor hint when typing after @
@@ -265,6 +464,53 @@ function createCompletionPlugin() {
 						});
 					}
 
+					// TrackedMap/TrackedSet completions when typing T...
+					// Also detects if 'new' is already typed before it to avoid duplicating
+					const trackedMatch = line.match(/(new\s+)?[T,M,#]([\w\.]*)$/);
+
+					if (trackedMatch) {
+						const hasNew = !!trackedMatch[1];
+						const typed = trackedMatch[2].toLowerCase();
+
+						for (const snippet of TRACKED_COLLECTION_SNIPPETS) {
+							// Match if typing matches start of 'rackedMap', 'rackedSet' (after T)
+							const afterT = snippet.label.slice(1).toLowerCase(); // 'rackedmap' or 'rackedset'
+							if (typed === '' || afterT.startsWith(typed)) {
+								// Determine insert text - skip 'new ' if already present
+								const insertText = hasNew
+									? `${snippet.label}(\${1})`
+									: `new ${snippet.label}(\${1})`;
+
+								items.push({
+									label: snippet.label,
+									filterText: snippet.filterText,
+									kind: CompletionItemKind.Snippet,
+									detail: snippet.detail,
+									documentation: snippet.documentation,
+									insertText: insertText,
+									insertTextFormat: InsertTextFormat.Snippet,
+									sortText: '0-' + snippet.label.toLowerCase(),
+									// Replace 'T...' or 'new T...' depending on what was typed
+									textEdit: {
+										range: {
+											start: {
+												line: position.line,
+												character: position.character - trackedMatch[0].length,
+											},
+											end: position,
+										},
+										newText: insertText,
+									},
+									additionalTextEdits: snippet
+										? snippet.importName != null
+											? generateImportEdit(fullText, snippet.importName)
+											: undefined
+										: undefined,
+								});
+							}
+						}
+					}
+
 					// Ripple keywords - extract the last word being typed
 					const wordMatch = line.match(/(\w+)$/);
 					const currentWord = wordMatch ? wordMatch[1] : '';

package/src/definitionPlugin.js

@@ -4,8 +4,19 @@
 
 const { TextDocument } = require('vscode-languageserver-textdocument');
 const { getVirtualCode, createLogging, getWordFromPosition } = require('./utils.js');
+const path = require('path');
+const fs = require('fs');
+
+const {
+	normalizeFileNameOrUri,
+	getRippleDirForFile,
+	getCachedTypeDefinitionFile,
+	getCachedTypeMatches,
+} = require('@ripple-ts/typescript-plugin/src/language.js');
 
 const { log } = createLogging('[Ripple Definition Plugin]');
+/** @type {string | undefined} */
+let ripple_dir;
 
 /**
  * @returns {LanguageServicePlugin}
@@ -34,6 +45,12 @@ function createDefinitionPlugin() {
 
 					const [virtualCode, sourceUri] = getVirtualCode(document, context);
 
+					if (virtualCode.languageId !== 'ripple') {
+						// like embedded css
+						log(`Skipping definitions processing in the '${virtualCode.languageId}' context`);
+						return tsDefinitions;
+					}
+
 					// First check for custom definitions (e.g., CSS class selectors)
 					const offset = document.offsetAt(position);
 					const text = document.getText();
@@ -44,7 +61,78 @@ function createDefinitionPlugin() {
 					log(`Cursor position in generated code for word '${word}':`, position);
 					log(`Cursor offset in generated code for word '${word}':`, offset);
 
-					// If mapping has custom definition metadata with location, handle it
+					// Handle `typeReplace` definitions
+					if (
+						customMapping?.data.customData.definition !== false &&
+						customMapping?.data.customData.definition?.typeReplace
+					) {
+						const { name: typeName, path: typePath } =
+							customMapping.data.customData.definition.typeReplace;
+
+						log(`Found replace definition for ${typeName}`);
+
+						const filePath = sourceUri.fsPath || sourceUri.path;
+						ripple_dir = ripple_dir ?? getRippleDirForFile(normalizeFileNameOrUri(filePath));
+
+						if (!ripple_dir) {
+							log(`Could not determine Ripple source directory for file: ${filePath}`);
+							return;
+						}
+
+						const typesFilePath = path.join(ripple_dir, ...typePath.split('/'));
+
+						const fileContent = getCachedTypeDefinitionFile(typesFilePath);
+
+						if (!fileContent) {
+							// the `getCachedTypeDefinitionFile` already logs the error
+							return;
+						}
+
+						const match = getCachedTypeMatches(typeName, fileContent);
+
+						if (match && match.index !== undefined) {
+							const classStart = match.index + match[0].indexOf(typeName);
+							const classEnd = classStart + typeName.length;
+
+							// Convert offset to line/column
+							const lines = fileContent.substring(0, classStart).split('\n');
+							const line = lines.length - 1;
+							const character = lines[lines.length - 1].length;
+
+							const endLines = fileContent.substring(0, classEnd).split('\n');
+							const endLine = endLines.length - 1;
+							const endCharacter = endLines[endLines.length - 1].length;
+
+							// Create the origin selection range for #Map/#Set
+							const generatedStart = customMapping.generatedOffsets[0];
+							const generatedEnd =
+								generatedStart + customMapping.data.customData.generatedLengths[0];
+							const originStart = document.positionAt(generatedStart);
+							const originEnd = document.positionAt(generatedEnd);
+
+							/** @type {LocationLink} */
+							const locationLink = {
+								targetUri: `file://${typesFilePath}`,
+								targetRange: {
+									start: { line, character },
+									end: { line: endLine, character: endCharacter },
+								},
+								targetSelectionRange: {
+									start: { line, character },
+									end: { line: endLine, character: endCharacter },
+								},
+								originSelectionRange: {
+									start: originStart,
+									end: originEnd,
+								},
+							};
+
+							log(`Created definition link to ${typesFilePath}:${line}:${character}`);
+							return [locationLink];
+						}
+					}
+
+					// Handle embedded code definition location, e.g. CSS class selectors
 					if (
 						customMapping?.data.customData.definition !== false &&
 						customMapping?.data.customData.definition?.location
@@ -115,8 +203,11 @@ function createDefinitionPlugin() {
 						}
 					}
 
-					// Below here we handle adjusting TypeScript definitions for transformed tokens
-					// specifically, when "component" in Ripple maps to "function" in TS
+					// Below here we handle adjusting TS definition for transformed tokens
+					// `originSelectionRange` returned by TS needs its end character adjusted
+					// to account for the source length differing from generated length
+					// e.g. when "component" in Ripple maps to "function" in TS
+					// Or when "#Map" maps to "TrackedMap", etc.
 
 					// If no TypeScript definitions, nothing to modify
 					// Volar will let the next ts plugin handle it
@@ -144,13 +235,15 @@ function createDefinitionPlugin() {
 
 					log('Found mapping for definition at range', 'start: ', rangeStart, 'end: ', rangeEnd);
 
-					// Check if source length is greater than generated length (component -> function)
+					// Check if source length differs from generated length
+					// e.g., "component" -> "function" (source > generated)
+					// e.g., "#Map" -> "TrackedMap" (source < generated)
 					const customData = mapping.data.customData;
 					const sourceLength = mapping.lengths[0];
 					const generatedLength = customData.generatedLengths[0];
 
-					// If no generatedLengths, or source and generated are same length, no transformation
-					if (sourceLength <= generatedLength) {
+					// If source and generated are same length, no transformation needed
+					if (sourceLength === generatedLength) {
 						return tsDefinitions;
 					}
 

package/src/documentHighlightPlugin.js

@@ -58,7 +58,8 @@ function createDocumentHighlightPlugin() {
 
 					const [virtualCode] = getVirtualCode(document, context);
 
-					if (!virtualCode) {
+					if (virtualCode.languageId !== 'ripple') {
+						log(`Skipping highlight processing in the '${virtualCode.languageId}' context`);
 						return tsHighlights;
 					}
 

package/src/hoverPlugin.js

@@ -10,6 +10,7 @@ const {
 	createLogging,
 	getWordFromPosition,
 	concatMarkdownContents,
+	deobfuscateImportDefinitions,
 } = require('./utils.js');
 
 const { log, logError } = createLogging('[Ripple Hover Plugin]');
@@ -53,6 +54,12 @@ function createHoverPlugin() {
 						tsHover = await originalProvideHover.call(originalInstance, document, position, token);
 					}
 
+					if (tsHover && tsHover.contents) {
+						/** @type {MarkupContent} **/ (tsHover.contents).value = deobfuscateImportDefinitions(
+							/** @type {MarkupContent} **/ (tsHover.contents).value,
+						);
+					}
+
 					const [virtualCode] = getVirtualCode(document, context);
 
 					if (!virtualCode) {
@@ -79,6 +86,11 @@ function createHoverPlugin() {
 						log(`Cursor offset in generated code for word '${word}':`, offset);
 					}
 
+					if (virtualCode.languageId !== 'ripple') {
+						log(`Skipping hover processing in the '${virtualCode.languageId}' context`);
+						return tsHover;
+					}
+
 					const mapping = virtualCode.findMappingByGeneratedRange(starOffset, endOffset);
 
 					if (!mapping) {

package/src/typescriptDiagnosticPlugin.js

@@ -1,11 +1,77 @@
-/** @import { LanguageServicePlugin } from '@volar/language-server' */
-/** @import { LanguageServicePluginInstance } from '@volar/language-server' */
+/**
+ @import {
+	LanguageServicePlugin,
+	LanguageServicePluginInstance,
+	LanguageServiceContext,
+	Diagnostic,
+} from '@volar/language-server';
+@import {TextDocument} from 'vscode-languageserver-textdocument';
+ */
 
 const { getVirtualCode, createLogging } = require('./utils.js');
 
 const { log, logError } = createLogging('[Ripple TypeScript Diagnostic Plugin]');
 
 /**
+ * Filter diagnostics based on suppressed diagnostic codes in mappings.
+ * @param {TextDocument} document
+ * @param {LanguageServiceContext} context
+ * @param {Diagnostic[]} diagnostics
+ * @returns {Diagnostic[]}
+ */
+function filterDiagnostics(document, context, diagnostics) {
+	if (!diagnostics || diagnostics.length === 0) {
+		return diagnostics;
+	}
+
+	log(`Filtering ${diagnostics.length} TypeScript diagnostics for ${document.uri}`);
+
+	const [virtualCode] = getVirtualCode(document, context);
+
+	if (!virtualCode) {
+		return diagnostics;
+	}
+
+	const filtered = diagnostics.filter((diagnostic) => {
+		const range = diagnostic.range;
+		const rangeStart = document.offsetAt(range.start);
+		const rangeEnd = document.offsetAt(range.end);
+		const mapping = virtualCode.findMappingByGeneratedRange(rangeStart, rangeEnd);
+
+		if (!mapping) {
+			return true;
+		}
+
+		const suppressedCodes = mapping.data.customData?.suppressedDiagnostics;
+
+		if (!suppressedCodes || suppressedCodes.length === 0) {
+			return true;
+		}
+
+		const diagnosticCode =
+			typeof diagnostic.code === 'number'
+				? diagnostic.code
+				: typeof diagnostic.code === 'string'
+					? parseInt(diagnostic.code)
+					: null;
+
+		if (diagnosticCode && suppressedCodes.includes(diagnosticCode)) {
+			log(`Suppressing diagnostic ${diagnosticCode}: ${diagnostic.message}`);
+			return false;
+		}
+
+		return true;
+	});
+
+	log(`Filtered from ${diagnostics.length} to ${filtered.length} diagnostics`);
+	return filtered;
+}
+
+/**
+ * Creates a plugin that wraps typescript-semantic's provideDiagnostics
+ * to filter out suppressed diagnostics while maintaining the original
+ * plugin association. This is crucial for code actions (like "Add import")
+ * to work correctly, as volar matches diagnostics by pluginIndex.
  * @returns {LanguageServicePlugin}
  */
 function createTypeScriptDiagnosticFilterPlugin() {
@@ -13,87 +79,42 @@ function createTypeScriptDiagnosticFilterPlugin() {
 
 	return {
 		name: 'ripple-typescript-diagnostic-filter',
-		capabilities: {
-			diagnosticProvider: {
-				interFileDependencies: false,
-				workspaceDiagnostics: false,
-			},
-		},
+		// No capabilities - this plugin only wraps typescript-semantic
+		capabilities: {},
 		create(context) {
-			/** @type {LanguageServicePluginInstance['provideDiagnostics']} */
-			let originalProvideDiagnostics;
-			/** @type {LanguageServicePluginInstance} */
+			/** @type {LanguageServicePluginInstance['provideDiagnostics'] | undefined} */
+			let originalProvider;
+			/** @type {LanguageServicePluginInstance | undefined} */
 			let originalInstance;
 
-			// Disable typescript-semantic's provideDiagnostics so it doesn't merge with ours
 			for (const [plugin, instance] of context.plugins) {
 				if (plugin.name === 'typescript-semantic') {
 					originalInstance = instance;
-					originalProvideDiagnostics = instance.provideDiagnostics;
-					instance.provideDiagnostics = undefined;
+					originalProvider = instance.provideDiagnostics;
+
+					// Wrap the original function to filter diagnostics
+					// This maintains the plugin association for code actions
+					instance.provideDiagnostics = async function (document, token) {
+						const diagnostics = await originalProvider?.call(originalInstance, document, token);
+						return filterDiagnostics(document, context, diagnostics ?? []);
+					};
+
+					log('Successfully wrapped typescript-semantic provideDiagnostics');
+
 					break;
 				}
 			}
 
-			if (!originalProvideDiagnostics) {
+			if (!originalProvider) {
 				logError(
 					"'typescript-semantic plugin' was not found or has no 'provideDiagnostics'. \
 					This plugin must be loaded after Volar's typescript-semantic plugin.",
 				);
 			}
 
-			return {
-				async provideDiagnostics(document, token) {
-					let diagnostics;
-
-					if (originalProvideDiagnostics) {
-						diagnostics = await originalProvideDiagnostics.call(originalInstance, document, token);
-					}
-
-					if (!diagnostics || diagnostics.length === 0) {
-						return diagnostics;
-					}
-
-					log(`Filtering ${diagnostics.length} TypeScript diagnostics for ${document.uri}`);
-
-					const [virtualCode] = getVirtualCode(document, context);
-
-					const filtered = diagnostics.filter((diagnostic) => {
-						const range = diagnostic.range;
-						const rangeStart = document.offsetAt(range.start);
-						const rangeEnd = document.offsetAt(range.end);
-						// Get the mapping at this diagnostic position
-						const mapping = virtualCode.findMappingByGeneratedRange(rangeStart, rangeEnd);
-
-						if (!mapping) {
-							return true;
-						}
-
-						const suppressedCodes = mapping.data.customData?.suppressedDiagnostics;
-
-						if (!suppressedCodes || suppressedCodes.length === 0) {
-							return true;
-						}
-
-						const diagnosticCode =
-							typeof diagnostic.code === 'number'
-								? diagnostic.code
-								: typeof diagnostic.code === 'string'
-									? parseInt(diagnostic.code)
-									: null;
-
-						if (diagnosticCode && suppressedCodes.includes(diagnosticCode)) {
-							log(`Suppressing diagnostic ${diagnosticCode}: ${diagnostic.message}`);
-							return false; // Filter out this diagnostic
-						}
-
-						return true; // Keep this diagnostic
-					});
-
-					log(`Filtered from ${diagnostics.length} to ${filtered.length} diagnostics`);
-					return filtered;
-				},
-			};
+			// This plugin doesn't provide any functionality itself,
+			// it only wraps typescript-semantic
+			return {};
 		},
 	};
 }

package/src/utils.js

@@ -1,10 +1,60 @@
 /** @import { TextDocument } from 'vscode-languageserver-textdocument' */
 /** @import { LanguageServiceContext } from '@volar/language-server' */
 /** @import {RippleVirtualCode} from '@ripple-ts/typescript-plugin/src/language.js' */
+// @ts-expect-error: ESM type import is fine
+/** @import {is_imported_obfuscated, deobfuscate_imported, IMPORT_OBFUSCATION_PREFIX} from 'ripple/compiler/internal/import/utils' */
 
 const { URI } = require('vscode-uri');
 const { createLogging, DEBUG } = require('@ripple-ts/typescript-plugin/src/utils.js');
-const wordRegex = /\w/;
+// Matches valid JS/CSS identifier characters: word chars, dashes (CSS), $, and # (Ripple shorthands)
+const charAllowedWordRegex = /[\w\-$#]/;
+const IMPORT_EXPORT_REGEX = {
+	import: {
+		findBefore: /import\s+(?:\{[^}]*|\*\s+as\s+\w*|\w*)$/s,
+		sameLine: /^import\s/,
+	},
+	export: {
+		findBefore: /export\s+(?:\{[^}]*|\*\s+as\s+\w*|\w*)$/s,
+		sameLine: /^export\s/,
+	},
+	from: /from\s*['"][^'"]*['"]\s*;?/,
+};
+
+/** @type {is_imported_obfuscated}  */
+let is_imported_obfuscated;
+/** @type {deobfuscate_imported} */
+let deobfuscate_imported;
+/** @type {IMPORT_OBFUSCATION_PREFIX} */
+let IMPORT_OBFUSCATION_PREFIX;
+/** @type {RegExp} */
+let obfuscatedImportRegex;
+
+import('ripple/compiler/internal/import/utils').then((imports) => {
+	is_imported_obfuscated = imports.is_imported_obfuscated;
+	deobfuscate_imported = imports.deobfuscate_imported;
+	IMPORT_OBFUSCATION_PREFIX = imports.IMPORT_OBFUSCATION_PREFIX;
+	obfuscatedImportRegex = new RegExp(
+		escapeRegExp(IMPORT_OBFUSCATION_PREFIX) + charAllowedWordRegex.source + '+',
+		'gm',
+	);
+});
+
+/**
+ * @param {string} source
+ * @returns {string}
+ */
+function escapeRegExp(source) {
+	// $& means the whole matched source
+	return source.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/**
+ * @param {string} text
+ * @returns {string}
+ */
+function deobfuscateImportDefinitions(text) {
+	return text.replace(obfuscatedImportRegex, (match) => deobfuscate_imported(match));
+}
 
 /**
  * @param  {...string} contents
@@ -43,10 +93,10 @@ function getVirtualCode(document, context) {
 function getWordFromPosition(text, start) {
 	let wordStart = start;
 	let wordEnd = start;
-	while (wordStart > 0 && wordRegex.test(text[wordStart - 1])) {
+	while (wordStart > 0 && charAllowedWordRegex.test(text[wordStart - 1])) {
 		wordStart--;
 	}
-	while (wordEnd < text.length && wordRegex.test(text[wordEnd])) {
+	while (wordEnd < text.length && charAllowedWordRegex.test(text[wordEnd])) {
 		wordEnd++;
 	}
 
@@ -59,10 +109,66 @@ function getWordFromPosition(text, start) {
 	};
 }
 
+/**
+ * @param {'import' | 'export'} type
+ * @param {string} text
+ * @param {number} start
+ * @returns {boolean}
+ */
+function isInsideImportOrExport(type, text, start) {
+	const textBeforeCursor = text.slice(0, start);
+
+	// Find the last 'import' keyword before cursor
+	const lastImportMatch = textBeforeCursor.match(IMPORT_EXPORT_REGEX[type].findBefore);
+	if (!lastImportMatch) {
+		// Check if we're on a line that starts with import
+		const lineStart = textBeforeCursor.lastIndexOf('\n') + 1;
+		const lineBeforeCursor = textBeforeCursor.slice(lineStart);
+		return IMPORT_EXPORT_REGEX[type].sameLine.test(lineBeforeCursor.trim());
+	}
+
+	// We found an import - check if it's been closed with 'from'
+	const importStart = textBeforeCursor.lastIndexOf(type);
+	const textFromImport = text.slice(importStart);
+
+	// Find the end of this import statement (semicolon or newline after 'from "..."')
+	const fromMatch = textFromImport.match(IMPORT_EXPORT_REGEX.from);
+	if (!fromMatch || fromMatch.index === undefined) {
+		// No 'from' found yet - we're inside an incomplete import
+		return true;
+	}
+
+	const importEndOffset = importStart + fromMatch.index + fromMatch[0].length;
+
+	// If cursor is before the import ends, we're inside it
+	return start < importEndOffset;
+}
+
+/**
+ * @param {string} text
+ * @param {number} start
+ * @returns {boolean}
+ */
+function isInsideImport(text, start) {
+	return isInsideImportOrExport('import', text, start);
+}
+
+/**
+ * @param {string} text
+ * @param {number} start
+ * @returns {boolean}
+ */
+function isInsideExport(text, start) {
+	return isInsideImportOrExport('export', text, start);
+}
+
 module.exports = {
 	getVirtualCode,
 	getWordFromPosition,
+	isInsideImport,
+	isInsideExport,
 	createLogging,
 	concatMarkdownContents,
+	deobfuscateImportDefinitions,
 	DEBUG,
 };