@nocturnium/svelte-ide 1.4.0 → 1.5.0

package/dist/components/editor/InlineDiagnosticsLayer.svelte

@@ -34,6 +34,13 @@
 		showSquiggles?: boolean;
 		/** Show gutter icons */
 		showGutterIcons?: boolean;
+		/**
+		 * Show the diagnostic message inline at the end of its line (Error Lens
+		 * style), always visible — so the message no longer requires hovering the
+		 * thin squiggle. The whole line becomes the hover/click target for the
+		 * detailed tooltip. Default true.
+		 */
+		showInlineMessages?: boolean;
 		/** Callback when fix is applied */
 		onApplyFix?: (diagnostic: Diagnostic, fix: DiagnosticFix) => void;
 		/** Callback when diagnostic is clicked */
@@ -49,10 +56,19 @@
 		enabled = true,
 		showSquiggles = true,
 		showGutterIcons = true,
+		showInlineMessages = true,
 		onApplyFix,
 		onDiagnosticClick
 	}: Props = $props();
 
+	// Severity ordering for picking a line's primary (most severe) diagnostic.
+	const SEVERITY_RANK: Record<DiagnosticSeverity, number> = {
+		error: 0,
+		warning: 1,
+		info: 2,
+		hint: 3
+	};
+
 	let diagnostics = $state<Diagnostic[]>([]);
 	let hoveredDiagnostic = $state<Diagnostic | null>(null);
 	let tooltipPosition = $state({ top: 0, left: 0 });
@@ -100,10 +116,22 @@
 		return 'hint';
 	}
 
+	// One always-visible inline message per affected line: the most severe
+	// diagnostic on that line, plus a count of how many others share it.
+	const lineMessages = $derived(() =>
+		linesWithDiagnostics().map((line) => {
+			const diags = diagnosticsByLine().get(line) || [];
+			const primary = [...diags].sort(
+				(a, b) => SEVERITY_RANK[a.severity] - SEVERITY_RANK[b.severity]
+			)[0];
+			return { line, primary, count: diags.length, severity: getLineSeverity(line) };
+		})
+	);
+
 	/**
 	 * Handle mouse enter on diagnostic
 	 */
-	function handleMouseEnter(diagnostic: Diagnostic, event: MouseEvent) {
+	function handleMouseEnter(diagnostic: Diagnostic, event: MouseEvent | FocusEvent) {
 		hoveredDiagnostic = diagnostic;
 		const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
 		tooltipPosition = {
@@ -168,7 +196,38 @@
 </script>
 
 {#if enabled && diagnostics.length > 0}
-	<div class="diagnostics-layer" aria-hidden="true">
+	<div class="diagnostics-layer">
+		<!-- Inline messages (Error Lens style): the message is ALWAYS visible at the
+		     end of its line, and the full-line-height row — not the 4px squiggle — is
+		     the hover/click/focus target for the detailed tooltip. -->
+		{#if showInlineMessages}
+			<div class="diagnostics-messages" style="left: {gutterWidth}px;">
+				{#each lineMessages() as { line, primary, count, severity } (line)}
+					<button
+						type="button"
+						class="diagnostic-row diagnostic-row--{severity}"
+						style="top: {line * lineHeight}px; height: {lineHeight}px;"
+						aria-label="{severity}: {primary.message}{count > 1
+							? ` (and ${count - 1} more on this line)`
+							: ''}"
+						onmouseenter={(e) => handleMouseEnter(primary, e)}
+						onmouseleave={handleMouseLeave}
+						onfocus={(e) => handleMouseEnter(primary, e)}
+						onblur={handleMouseLeave}
+						onclick={() => onDiagnosticClick?.(primary)}
+					>
+						<span class="row-chip">
+							<span class="row-icon" aria-hidden="true">{getSeverityIcon(severity)}</span>
+							<span class="row-message">{primary.message}</span>
+							{#if count > 1}
+								<span class="row-count" aria-hidden="true">+{count - 1}</span>
+							{/if}
+						</span>
+					</button>
+				{/each}
+			</div>
+		{/if}
+
 		<!-- Gutter icons -->
 		{#if showGutterIcons}
 			<div class="diagnostics-gutter" style="width: {gutterWidth}px;">
@@ -192,9 +251,9 @@
 			</div>
 		{/if}
 
-		<!-- Squiggly underlines -->
+		<!-- Squiggly underlines (decorative cue; interaction lives on the row above) -->
 		{#if showSquiggles}
-			<div class="diagnostics-squiggles" style="left: {gutterWidth}px;">
+			<div class="diagnostics-squiggles" style="left: {gutterWidth}px;" aria-hidden="true">
 				{#each diagnostics as diagnostic (diagnostic.id)}
 					{@const startCol = diagnostic.range.start.column}
 					{@const endCol = diagnostic.range.end.column}
@@ -210,10 +269,6 @@
 							left: {startCol * charWidth}px;
 							width: {width}px;
 						"
-						onmouseenter={(e) => handleMouseEnter(diagnostic, e)}
-						onmouseleave={handleMouseLeave}
-						role="button"
-						tabindex={-1}
 					>
 						<svg class="squiggle-svg" {width} height="4" viewBox="0 0 {width} 4">
 							<path d={generateSquigglePath(width)} stroke={color} stroke-width="1" fill="none" />
@@ -336,19 +391,19 @@
 	}
 
 	.gutter-icon--error .icon-text {
-		color: #f44747;
+		color: var(--ide-error);
 	}
 
 	.gutter-icon--warning .icon-text {
-		color: #ff8c00;
+		color: var(--ide-warning);
 	}
 
 	.gutter-icon--info .icon-text {
-		color: #3794ff;
+		color: var(--ide-info);
 	}
 
 	.gutter-icon--hint .icon-text {
-		color: #6c6c6c;
+		color: var(--ide-text-muted);
 	}
 
 	.icon-count {
@@ -376,8 +431,166 @@
 
 	.squiggle {
 		position: absolute;
-		pointer-events: auto;
+		/* Decorative now — the full-line row above owns hover/click. */
+		pointer-events: none;
+	}
+
+	/* Inline messages (Error Lens style) */
+	.diagnostics-messages {
+		position: absolute;
+		top: 0;
+		right: 0;
+		height: 100%;
+	}
+
+	.diagnostic-row {
+		position: absolute;
+		left: 0;
+		right: 0;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		margin: 0;
+		/* Reserve a left gap so the right-aligned chip never butts directly against
+		   code text on a long line — code and message keep a visible breathing gap. */
+		padding: 0 8px 0 16px;
+		background: transparent;
+		border: none;
+		border-left: 2px solid transparent;
+		font: inherit;
 		cursor: pointer;
+		pointer-events: auto;
+		overflow: hidden;
+		transition: background 0.12s ease;
+	}
+
+	/* The message sits in an opaque chip so it stays legible even if it overlaps
+	   code on a long line — the row's faint full-width tint is just the line
+	   highlight / hit target underneath. */
+	.row-chip {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		max-width: min(100%, 64ch);
+		padding: 1px 8px;
+		border-radius: 6px;
+		overflow: hidden;
+	}
+
+	.row-icon {
+		flex-shrink: 0;
+		font-size: 11px;
+	}
+
+	.row-message {
+		overflow: hidden;
+		font-size: 12px;
+		line-height: 1.4;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.row-count {
+		flex-shrink: 0;
+		min-width: 16px;
+		padding: 1px 5px;
+		border-radius: 8px;
+		background: color-mix(in srgb, var(--ide-text-muted) 22%, transparent);
+		font-size: 10px;
+		font-weight: 600;
+		color: var(--ide-text-secondary, #aaa);
+		text-align: center;
+	}
+
+	/* On genuinely narrow (phone) viewports an inline message would overprint code
+	   with no room for the reserved gap — drop it there and rely on the gutter icon
+	   + tooltip instead. Tablets (641–768px) keep the message: the opaque severity
+	   chip and the reserved left gap below keep it legible and off the code. */
+	@media (max-width: 480px) {
+		.diagnostics-messages {
+			display: none;
+		}
+	}
+
+	/* Tablet (481–768px): keep the message on-screen but cap the chip so a long
+	   message ellipsizes within the pane instead of clipping past the right edge,
+	   and hold the reserved left gap so it never overprints code. */
+	@media (max-width: 768px) {
+		.diagnostic-row .row-chip {
+			max-width: min(100%, 40ch);
+		}
+	}
+
+	.diagnostic-row:focus-visible {
+		outline: 1px solid var(--ide-interactive, #4f8cc9);
+		outline-offset: -1px;
+	}
+
+	.diagnostic-row--error {
+		background: color-mix(in srgb, var(--ide-error) 9%, transparent);
+		border-left-color: color-mix(in srgb, var(--ide-error) 55%, transparent);
+	}
+	.diagnostic-row--error:hover,
+	.diagnostic-row--error:focus-visible {
+		background: color-mix(in srgb, var(--ide-error) 17%, transparent);
+	}
+	.diagnostic-row--error .row-icon,
+	.diagnostic-row--error .row-message {
+		color: var(--ide-error);
+	}
+
+	.diagnostic-row--warning {
+		background: color-mix(in srgb, var(--ide-warning) 9%, transparent);
+		border-left-color: color-mix(in srgb, var(--ide-warning) 55%, transparent);
+	}
+	.diagnostic-row--warning:hover,
+	.diagnostic-row--warning:focus-visible {
+		background: color-mix(in srgb, var(--ide-warning) 17%, transparent);
+	}
+	.diagnostic-row--warning .row-icon,
+	.diagnostic-row--warning .row-message {
+		color: var(--ide-warning);
+	}
+
+	.diagnostic-row--info {
+		background: color-mix(in srgb, var(--ide-info) 8%, transparent);
+		border-left-color: color-mix(in srgb, var(--ide-info) 50%, transparent);
+	}
+	.diagnostic-row--info:hover,
+	.diagnostic-row--info:focus-visible {
+		background: color-mix(in srgb, var(--ide-info) 16%, transparent);
+	}
+	.diagnostic-row--info .row-icon,
+	.diagnostic-row--info .row-message {
+		color: var(--ide-info);
+	}
+
+	.diagnostic-row--hint {
+		background: color-mix(in srgb, var(--ide-text-muted) 7%, transparent);
+		border-left-color: color-mix(in srgb, var(--ide-text-muted) 45%, transparent);
+	}
+	.diagnostic-row--hint:hover,
+	.diagnostic-row--hint:focus-visible {
+		background: color-mix(in srgb, var(--ide-text-muted) 14%, transparent);
+	}
+	.diagnostic-row--hint .row-icon,
+	.diagnostic-row--hint .row-message {
+		color: var(--ide-text-muted);
+	}
+
+	/* Opaque chip surfaces: an elevated base tinted by severity, so the message
+	   reads cleanly whether it floats over empty space or over code. */
+	.diagnostic-row--error .row-chip {
+		background: color-mix(in srgb, var(--ide-error) 16%, var(--ide-bg-elevated, #252536));
+	}
+	.diagnostic-row--warning .row-chip {
+		background: color-mix(in srgb, var(--ide-warning) 16%, var(--ide-bg-elevated, #252536));
+	}
+	.diagnostic-row--info .row-chip {
+		background: color-mix(in srgb, var(--ide-info) 14%, var(--ide-bg-elevated, #252536));
+	}
+	.diagnostic-row--hint .row-chip {
+		background: color-mix(in srgb, var(--ide-text-muted) 14%, var(--ide-bg-elevated, #252536));
 	}
 
 	.squiggle--deprecated {

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

@@ -25,6 +25,13 @@ interface Props {
     showSquiggles?: boolean;
     /** Show gutter icons */
     showGutterIcons?: boolean;
+    /**
+     * Show the diagnostic message inline at the end of its line (Error Lens
+     * style), always visible — so the message no longer requires hovering the
+     * thin squiggle. The whole line becomes the hover/click target for the
+     * detailed tooltip. Default true.
+     */
+    showInlineMessages?: boolean;
     /** Callback when fix is applied */
     onApplyFix?: (diagnostic: Diagnostic, fix: DiagnosticFix) => void;
     /** Callback when diagnostic is clicked */

package/dist/components/editor/InlineDiffLayer.svelte

@@ -50,7 +50,10 @@
 			case 'added':
 				return 'var(--ide-status-created)';
 			case 'modified':
-				return 'var(--ide-status-modified)';
+				// Modified indicator is BLUE to match the diff legend (Modified = blue).
+				// --ide-status-modified resolves to aurora-yellow (amber), which
+				// contradicts the legend; drive it from --ide-info (#60a5fa) instead.
+				return 'var(--ide-info)';
 			case 'removed':
 				return 'var(--ide-status-deleted)';
 			default:
@@ -175,7 +178,10 @@
 				onclick={() => handleClick(group.changes[0])}
 				onkeydown={(e) => e.key === 'Enter' && handleClick(group.changes[0])}
 				role="button"
-				tabindex={-1}
+				tabindex={onChangeClick ? 0 : -1}
+				aria-label={onChangeClick
+					? `${getLabel(group.type)}: ${group.changes.length} line${group.changes.length !== 1 ? 's' : ''} — view full diff`
+					: undefined}
 				title="{getLabel(group.type)}: {group.changes.length} line{group.changes.length !== 1
 					? 's'
 					: ''}"

package/dist/components/editor/PluginPreviewSandbox.svelte

@@ -739,7 +739,10 @@
 		line-height: 1.5;
 		color: var(--ide-text-primary, #f4f1e0);
 		overflow: auto;
-		white-space: pre;
+		/* Wrap long single-line transformed output (e.g. Minify) instead of
+		   clipping it off the pane's right edge with no scroll affordance. */
+		white-space: pre-wrap;
+		overflow-wrap: anywhere;
 	}
 
 	/* Split view */
@@ -793,6 +796,7 @@
 
 	.diff-line__num {
 		width: 40px;
+		flex-shrink: 0;
 		color: var(--ide-text-muted, #a8c5d9);
 		text-align: right;
 		padding-right: 8px;
@@ -801,6 +805,7 @@
 
 	.diff-line__sign {
 		width: 16px;
+		flex-shrink: 0;
 		color: var(--ide-text-muted, #a8c5d9);
 	}
 
@@ -814,7 +819,10 @@
 
 	.diff-line__content {
 		flex: 1;
-		white-space: pre;
+		min-width: 0;
+		/* Wrap long single-line diff output instead of clipping it off-pane. */
+		white-space: pre-wrap;
+		overflow-wrap: anywhere;
 	}
 
 	.diff-line--add .diff-line__content {

package/dist/components/editor/ProblemsPanel.svelte

@@ -426,7 +426,9 @@
 	}
 
 	.action-btn.active {
-		color: #a855f7;
+		/* interactive accent stays BLUE per owner brand decision
+		   (was an off-token #a855f7 purple literal) */
+		color: var(--ide-interactive, #4f8cc9);
 	}
 
 	.close-btn {
@@ -571,6 +573,9 @@
 
 	.diagnostic-message {
 		flex: 1;
+		/* min-width:0 lets the message shrink/ellipsize instead of forcing the
+		   metadata (code/chip/[Ln,Col]) to absorb the squeeze first */
+		min-width: 0;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -582,22 +587,52 @@
 	}
 
 	.diagnostic-source {
+		flex-shrink: 0;
 		font-size: 10px;
 		padding: 1px 4px;
-		background: rgba(255, 255, 255, 0.1);
+		/* nudged a notch lighter (0.1 -> 0.16) so the chip label clears AA */
+		background: rgba(255, 255, 255, 0.16);
 		border-radius: 2px;
-		color: var(--ide-text-muted, #888);
+		/* lifted from --ide-text-muted (~3:1, below AA at 10-11px) to clear 4.5:1 */
+		color: var(--ide-text-secondary, #aaa);
 	}
 
 	.diagnostic-code {
+		flex-shrink: 0;
 		font-family: monospace;
 		font-size: 10px;
-		color: var(--ide-text-muted, #888);
+		/* lifted from --ide-text-muted so TS codes (TS2552/TS6133) clear AA */
+		color: var(--ide-text-secondary, #aaa);
 	}
 
 	.diagnostic-location {
+		flex-shrink: 0;
 		font-family: monospace;
 		font-size: 10px;
-		color: var(--ide-text-muted, #666);
+		/* lifted from --ide-text-muted so [Ln, Col] coords clear AA */
+		color: var(--ide-text-secondary, #aaa);
+	}
+
+	/* Narrow viewports: collapse the single-line row into two lines so the
+	   message stays readable instead of truncating to a single glyph while the
+	   code / chip / [Ln, Col] keep full width. The icon + message hold line one
+	   (message gets a 2-line clamp); the source/code/location metadata wrap to a
+	   second, gutter-indented line. */
+	@media (max-width: 480px) {
+		.diagnostic-item {
+			flex-wrap: wrap;
+			row-gap: 2px;
+		}
+
+		.diagnostic-message {
+			/* take the full first line so metadata is pushed to line two */
+			flex: 1 1 100%;
+			/* message is the LAST field to truncate: allow up to 2 lines */
+			white-space: normal;
+			display: -webkit-box;
+			-webkit-line-clamp: 2;
+			line-clamp: 2;
+			-webkit-box-orient: vertical;
+		}
 	}
 </style>

package/dist/components/editor/SnippetPalette.svelte

@@ -7,6 +7,7 @@
 	 */
 
 	import type { SnippetManager, Snippet } from './core/snippet-manager';
+	import Icon from '../core/Icon.svelte';
 
 	interface Props {
 		/** Snippet manager instance */
@@ -174,6 +175,9 @@
 				bind:value={searchQuery}
 			/>
 			<span class="snippet-hint">Tab: categories, Enter: insert, Esc: close</span>
+			<button class="snippet-close" type="button" aria-label="Close" onclick={() => onClose?.()}>
+				<Icon name="close" size={18} />
+			</button>
 		</div>
 
 		<div class="snippet-categories">
@@ -318,10 +322,39 @@
 
 	.snippet-hint {
 		font-size: 11px;
-		color: var(--ide-text-muted, #a8c5d9);
+		color: var(--ide-text-secondary, #a8c5d9);
 		white-space: nowrap;
 	}
 
+	.snippet-close {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex: none;
+		width: 44px;
+		height: 44px;
+		margin: -8px -4px -8px 0;
+		padding: 0;
+		background: transparent;
+		border: none;
+		border-radius: 6px;
+		color: var(--ide-text-secondary, #a8c5d9);
+		cursor: pointer;
+		transition:
+			background 0.15s ease,
+			color 0.15s ease;
+	}
+
+	.snippet-close:hover {
+		background: color-mix(in srgb, var(--ide-text-primary) 8%, transparent);
+		color: var(--ide-text-primary, #f4f1e0);
+	}
+
+	.snippet-close:focus-visible {
+		outline: 2px solid var(--ide-interactive-focus);
+		outline-offset: 2px;
+	}
+
 	.snippet-categories {
 		display: flex;
 		gap: 4px;
@@ -343,13 +376,18 @@
 	}
 
 	.category-tab:hover {
-		background: rgba(255, 255, 255, 0.05);
+		background: color-mix(in srgb, var(--ide-text-primary) 5%, transparent);
 		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.category-tab.active {
-		background: rgba(168, 85, 247, 0.2);
-		color: #a855f7;
+		background: color-mix(in srgb, var(--ide-interactive) 20%, transparent);
+		color: var(--ide-interactive);
+	}
+
+	.category-tab:focus-visible {
+		outline: 2px solid var(--ide-interactive-focus);
+		outline-offset: 2px;
 	}
 
 	.snippet-content {
@@ -367,7 +405,7 @@
 	.snippet-empty {
 		padding: 24px;
 		text-align: center;
-		color: var(--ide-text-muted, #a8c5d9);
+		color: var(--ide-text-secondary, #a8c5d9);
 		font-size: 13px;
 	}
 
@@ -385,7 +423,12 @@
 
 	.snippet-item:hover,
 	.snippet-item.selected {
-		background: rgba(168, 85, 247, 0.1);
+		background: color-mix(in srgb, var(--ide-interactive) 12%, transparent);
+	}
+
+	.snippet-item:focus-visible {
+		outline: 2px solid var(--ide-interactive-focus);
+		outline-offset: -2px;
 	}
 
 	.snippet-item-header {
@@ -399,9 +442,9 @@
 		font-family: monospace;
 		font-size: 12px;
 		padding: 2px 6px;
-		background: rgba(168, 85, 247, 0.2);
+		background: color-mix(in srgb, var(--ide-interactive) 20%, transparent);
 		border-radius: 4px;
-		color: #a855f7;
+		color: var(--ide-interactive);
 	}
 
 	.snippet-name {
@@ -413,15 +456,15 @@
 	.snippet-badge {
 		margin-left: auto;
 		padding: 1px 6px;
-		background: rgba(34, 197, 94, 0.2);
+		background: color-mix(in srgb, var(--ide-success) 20%, transparent);
 		border-radius: 4px;
 		font-size: 10px;
-		color: #22c55e;
+		color: var(--ide-success);
 	}
 
 	.snippet-item-desc {
 		font-size: 11px;
-		color: var(--ide-text-muted, #a8c5d9);
+		color: var(--ide-text-secondary, #a8c5d9);
 	}
 
 	/* Preview pane */
@@ -448,7 +491,7 @@
 	.preview-category {
 		font-size: 11px;
 		padding: 2px 8px;
-		background: rgba(255, 255, 255, 0.1);
+		background: color-mix(in srgb, var(--ide-text-primary) 10%, transparent);
 		border-radius: 4px;
 		color: var(--ide-text-secondary, #a8c5d9);
 	}
@@ -472,13 +515,13 @@
 	}
 
 	:global(.preview-tabstop) {
-		background: rgba(168, 85, 247, 0.3);
+		background: color-mix(in srgb, var(--ide-interactive) 30%, transparent);
 		border-radius: 2px;
 		padding: 0 2px;
 	}
 
 	:global(.preview-variable) {
-		color: #22c55e;
+		color: var(--ide-success);
 	}
 
 	.preview-footer {
@@ -486,12 +529,12 @@
 		justify-content: space-between;
 		margin-top: 12px;
 		font-size: 11px;
-		color: var(--ide-text-muted, #a8c5d9);
+		color: var(--ide-text-secondary, #a8c5d9);
 	}
 
 	.preview-footer code {
 		font-family: monospace;
-		background: rgba(255, 255, 255, 0.1);
+		background: color-mix(in srgb, var(--ide-text-primary) 10%, transparent);
 		padding: 1px 4px;
 		border-radius: 2px;
 	}
@@ -505,9 +548,9 @@
 	.lang-tag {
 		font-size: 10px;
 		padding: 2px 6px;
-		background: rgba(59, 130, 246, 0.2);
+		background: color-mix(in srgb, var(--ide-info) 20%, transparent);
 		border-radius: 3px;
-		color: #3b82f6;
+		color: var(--ide-info);
 	}
 
 	.preview-empty {
@@ -515,7 +558,7 @@
 		align-items: center;
 		justify-content: center;
 		height: 100%;
-		color: var(--ide-text-muted, #a8c5d9);
+		color: var(--ide-text-secondary, #a8c5d9);
 		font-size: 13px;
 	}
 
@@ -525,6 +568,6 @@
 		padding: 8px 16px;
 		border-top: 1px solid var(--ide-border, #a8c5d9);
 		font-size: 11px;
-		color: var(--ide-text-muted, #a8c5d9);
+		color: var(--ide-text-secondary, #a8c5d9);
 	}
 </style>

package/dist/components/editor/core/diagnostics.js

@@ -226,7 +226,10 @@ export function getSeverityIcon(severity) {
         case 'info':
             return 'ℹ';
         case 'hint':
-            return '💡';
+            // Monochrome glyph (not the 💡 emoji): a color emoji ignores `color` and
+            // would render the LOWEST severity louder than a warning, inverting the
+            // severity hierarchy.
+            return '◇';
     }
 }
 /**