@nocturnium/svelte-ide 1.1.1 → 1.2.1

package/dist/components/editor/ComplexityLayer.svelte

@@ -7,7 +7,6 @@
 	 * Hover over gutter indicators for details.
 	 */
 
-	import { SvelteMap } from 'svelte/reactivity';
 	import type { ComplexityMetrics, ComplexityRegion } from './core/complexity-analyzer';
 
 	interface Props {
@@ -24,10 +23,16 @@
 		 * that sat past the initial view.
 		 */
 		totalHeight?: number;
+		/** Estimated full scrollable content width in pixels */
+		contentWidth?: number;
 		/** Minimum score to show indicators (default: 50) */
 		minScore?: number;
 		/** Whether indicators are enabled */
 		enabled?: boolean;
+		/** Region key to briefly emphasize after jump-to-hottest */
+		flashRegionKey?: string;
+		/** Maps a raw document line to its rendered visual row */
+		lineToVisualRow?: (line: number) => number;
 	}
 
 	let {
@@ -35,8 +40,11 @@
 		lineHeight,
 		gutterWidth = 50,
 		totalHeight = 0,
+		contentWidth = 0,
 		minScore = 50,
-		enabled = true
+		enabled = true,
+		flashRegionKey = '',
+		lineToVisualRow = (line: number) => line
 	}: Props = $props();
 
 	// Filter regions that exceed the threshold
@@ -44,55 +52,6 @@
 		enabled && metrics ? metrics.regions.filter((r) => r.score >= minScore) : []
 	);
 
-	// Expand regions to individual line indicators for gutter
-	let lineIndicators = $derived.by(() => {
-		if (!enabled || !metrics) return [];
-
-		const indicators: Array<{
-			line: number;
-			score: number;
-			region: ComplexityRegion;
-			isStart: boolean;
-			isEnd: boolean;
-		}> = [];
-
-		for (const region of highlightedRegions) {
-			for (let line = region.startLine; line <= region.endLine; line++) {
-				indicators.push({
-					line,
-					score: region.score,
-					region,
-					isStart: line === region.startLine,
-					isEnd: line === region.endLine
-				});
-			}
-		}
-
-		return indicators;
-	});
-
-	// Group by line (in case of overlapping regions, take highest score)
-	let lineScores = $derived.by(() => {
-		const scores = new SvelteMap<
-			number,
-			{ score: number; region: ComplexityRegion; isStart: boolean; isEnd: boolean }
-		>();
-
-		for (const indicator of lineIndicators) {
-			const existing = scores.get(indicator.line);
-			if (!existing || indicator.score > existing.score) {
-				scores.set(indicator.line, {
-					score: indicator.score,
-					region: indicator.region,
-					isStart: indicator.isStart,
-					isEnd: indicator.isEnd
-				});
-			}
-		}
-
-		return scores;
-	});
-
 	/**
 	 * Get the color based on score level
 	 */
@@ -101,7 +60,8 @@
 		// medium otherwise (lines below the minScore threshold aren't shown).
 		if (score >= 85) return 'var(--ide-error)'; // Critical
 		if (score >= 70) return 'var(--ide-warning)'; // High
-		return 'var(--ide-info)'; // Medium
+		if (score >= 50) return 'var(--ide-info)'; // Medium
+		return 'var(--ide-success)'; // Low
 	}
 
 	/**
@@ -109,19 +69,64 @@
 	 */
 	function getOpacity(score: number): number {
 		const normalized = Math.min(1, Math.max(0, (score - minScore) / (100 - minScore)));
-		return 0.4 + normalized * 0.6;
+		return 0.65 + normalized * 0.35;
 	}
 
 	let hoveredRegion = $state<ComplexityRegion | null>(null);
-	let tooltipPosition = $state({ top: 0, left: 0 });
+	let tooltipPosition = $state({ top: 0, left: 0, right: 0 });
+	let tooltipAnchor = $state<'left' | 'right'>('right');
+	let visibleContributions = $derived(
+		hoveredRegion
+			? [...hoveredRegion.contributions].sort((a, b) => a.line - b.line).slice(0, 8)
+			: []
+	);
+	let hiddenContributionCount = $derived(
+		hoveredRegion
+			? Math.max(0, hoveredRegion.contributions.length - visibleContributions.length)
+			: 0
+	);
+
+	function getRegionKey(region: ComplexityRegion): string {
+		return `${region.startLine}:${region.endLine}:${region.name ?? region.type}:${region.score}`;
+	}
+
+	function getLevelLabel(score: number): string {
+		if (score >= 85) return 'Critical';
+		if (score >= 70) return 'High';
+		if (score >= 50) return 'Medium';
+		return 'Low';
+	}
 
-	function handleMouseEnter(region: ComplexityRegion, event: MouseEvent) {
+	function getRegionTop(region: ComplexityRegion): number {
+		return lineToVisualRow(region.startLine) * lineHeight;
+	}
+
+	function getRegionHeight(region: ComplexityRegion): number {
+		const startRow = lineToVisualRow(region.startLine);
+		const endRow = Math.max(startRow, lineToVisualRow(region.endLine));
+		return Math.max(lineHeight, (endRow - startRow + 1) * lineHeight);
+	}
+
+	function getContributionLabel(contribution: ComplexityRegion['contributions'][number]): string {
+		return contribution.kind || contribution.reason;
+	}
+
+	function handleMouseEnter(
+		region: ComplexityRegion,
+		event: MouseEvent,
+		anchor: 'left' | 'right' = 'right'
+	) {
 		hoveredRegion = region;
-		const rect = (event.target as HTMLElement).getBoundingClientRect();
-		tooltipPosition = {
-			top: rect.top + window.scrollY,
-			left: rect.right + 8
-		};
+		const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+		tooltipAnchor = anchor;
+		// The gutter spine opens the tooltip to its right (over the code); the score
+		// badge sits at the right edge, so it opens to its left. Anchor the left case
+		// by `right` (not a translateX) so the box grows leftward cleanly — translateX
+		// could subpixel-clip the first glyph of the region name.
+		tooltipPosition =
+			anchor === 'right'
+				? { top: rect.top, left: rect.right + 8, right: 0 }
+				: { top: rect.top, left: 0, right: window.innerWidth - rect.left + 8 };
 	}
 
 	function handleMouseLeave() {
@@ -129,31 +134,45 @@
 	}
 </script>
 
-{#if enabled && lineScores.size > 0}
+{#if enabled && highlightedRegions.length > 0}
 	<div
 		class="complexity-gutter"
 		aria-hidden="true"
-		style="width: {gutterWidth}px;{totalHeight ? ` height: ${totalHeight}px;` : ''}"
+		style="width: {contentWidth ? `${contentWidth}px` : '100%'};{totalHeight
+			? ` height: ${totalHeight}px;`
+			: ''} --editor-gutter-width: {gutterWidth}px;"
 	>
-		{#each [...lineScores.entries()] as [line, data] (line)}
+		{#each highlightedRegions as region (getRegionKey(region))}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
-				class="complexity-gutter__indicator"
-				class:complexity-gutter__indicator--start={data.isStart}
-				class:complexity-gutter__indicator--end={data.isEnd}
+				class="complexity-gutter__spine"
+				class:complexity-gutter__spine--critical={region.score >= 85}
+				class:complexity-gutter__spine--flash={flashRegionKey === getRegionKey(region)}
 				style="
-					top: {line * lineHeight}px;
-					height: {lineHeight}px;
-					--indicator-color: {getColor(data.score)};
-					--indicator-opacity: {getOpacity(data.score)};
+					top: {getRegionTop(region)}px;
+					height: {getRegionHeight(region)}px;
+					--indicator-color: {getColor(region.score)};
+					--indicator-opacity: {getOpacity(region.score)};
+					--indicator-glow: {region.score >= 85 ? 18 : region.score >= 70 ? 14 : 9}px;
 				"
-				onmouseenter={(e) => handleMouseEnter(data.region, e)}
+				onmouseenter={(e) => handleMouseEnter(region, e)}
+				onmouseleave={handleMouseLeave}
+			></div>
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="complexity-gutter__score"
+				class:complexity-gutter__score--critical={region.score >= 85}
+				class:complexity-gutter__score--flash={flashRegionKey === getRegionKey(region)}
+				style="
+					top: {getRegionTop(region) + 3}px;
+					right: 18px;
+					--indicator-color: {getColor(region.score)};
+					--indicator-opacity: {getOpacity(region.score)};
+				"
+				onmouseenter={(e) => handleMouseEnter(region, e, 'left')}
 				onmouseleave={handleMouseLeave}
-				role="button"
-				tabindex="-1"
 			>
-				{#if data.isStart}
-					<span class="complexity-gutter__score">{data.score}</span>
-				{/if}
+				{region.score}
 			</div>
 		{/each}
 	</div>
@@ -162,19 +181,40 @@
 	{#if hoveredRegion}
 		<div
 			class="complexity-tooltip"
-			style="top: {tooltipPosition.top}px; left: {tooltipPosition.left}px;"
+			style={tooltipAnchor === 'left'
+				? `top: ${tooltipPosition.top}px; right: ${tooltipPosition.right}px;`
+				: `top: ${tooltipPosition.top}px; left: ${tooltipPosition.left}px;`}
 		>
 			<div class="complexity-tooltip__header">
-				<span class="complexity-tooltip__badge" style="background: {getColor(hoveredRegion.score)}">
-					{hoveredRegion.score}
-				</span>
-				<span class="complexity-tooltip__title">
-					{hoveredRegion.name || hoveredRegion.type}
+				<span class="complexity-tooltip__badge" style="color: {getColor(hoveredRegion.score)}">
+					{hoveredRegion.cognitiveComplexity}
 				</span>
+				<div class="complexity-tooltip__heading">
+					<span class="complexity-tooltip__title">
+						{getLevelLabel(hoveredRegion.score)} Cognitive Complexity
+					</span>
+					<span class="complexity-tooltip__source">SonarSource Cognitive Complexity metric</span>
+				</div>
 			</div>
 			<div class="complexity-tooltip__lines">
-				Lines {hoveredRegion.startLine + 1} - {hoveredRegion.endLine + 1}
+				{hoveredRegion.name || hoveredRegion.type} · Lines {hoveredRegion.startLine + 1} - {hoveredRegion.endLine +
+					1}
+				· Score {hoveredRegion.score}
 			</div>
+			{#if visibleContributions.length > 0}
+				<ul class="complexity-tooltip__contributions">
+					{#each visibleContributions as contribution, index (`${contribution.line}:${contribution.kind}:${index}`)}
+						<li>
+							<span>line {contribution.line + 1}</span>
+							<strong>+{contribution.increment}</strong>
+							<span>{getContributionLabel(contribution)} (nesting {contribution.nesting})</span>
+						</li>
+					{/each}
+					{#if hiddenContributionCount > 0}
+						<li class="complexity-tooltip__more">+{hiddenContributionCount} more</li>
+					{/if}
+				</ul>
+			{/if}
 			{#if hoveredRegion.suggestion}
 				<div class="complexity-tooltip__suggestion">
 					{hoveredRegion.suggestion}
@@ -199,53 +239,190 @@
 		bottom: 0;
 		pointer-events: none;
 		z-index: 5;
+		overflow: visible;
 	}
 
-	.complexity-gutter__indicator {
+	.complexity-gutter__spine {
 		position: absolute;
-		right: 2px;
+		left: calc(var(--editor-gutter-width, 50px) - 3px);
 		width: 4px;
 		pointer-events: auto;
 		cursor: help;
 		background: var(--indicator-color);
 		opacity: var(--indicator-opacity);
+		border-radius: 999px;
+		box-shadow: 0 0 0 1px color-mix(in srgb, var(--indicator-color) 35%, transparent);
+		isolation: isolate;
 		transition:
 			opacity 0.15s ease,
-			width 0.15s ease;
+			width 0.15s ease,
+			box-shadow 0.15s ease,
+			transform 0.15s ease;
+	}
+
+	.complexity-gutter__spine::before {
+		content: '';
+		position: absolute;
+		inset: -2px -1px;
+		border-radius: inherit;
+		background: var(--indicator-color);
+		filter: blur(6px);
+		opacity: 0.55;
+		transform: scaleX(1);
+		transform-origin: center;
+		z-index: -1;
 	}
 
-	.complexity-gutter__indicator:hover {
+	.complexity-gutter__spine:hover {
 		opacity: 1;
 		width: 6px;
+		transform: translateX(-1px);
 	}
 
-	.complexity-gutter__indicator--start {
-		border-radius: 2px 2px 0 0;
+	.complexity-gutter__spine--critical {
+		animation: complexity-spine-pulse 2.4s ease-in-out infinite;
 	}
 
-	.complexity-gutter__indicator--end {
-		border-radius: 0 0 2px 2px;
+	.complexity-gutter__spine--critical::before {
+		animation: complexity-spine-bloom-pulse 2.4s ease-in-out infinite;
 	}
 
-	.complexity-gutter__indicator--start.complexity-gutter__indicator--end {
-		border-radius: 2px;
+	.complexity-gutter__spine--flash {
+		animation: complexity-spine-flash 0.9s ease-out 1;
+	}
+
+	.complexity-gutter__spine--flash::before {
+		animation: complexity-spine-bloom-flash 0.9s ease-out 1;
 	}
 
 	.complexity-gutter__score {
 		position: absolute;
-		right: 8px;
-		top: 50%;
-		transform: translateY(-50%);
-		font-size: 9px;
-		font-weight: 700;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 44px;
+		height: 30px;
+		padding: 0 10px;
+		border: 1px solid color-mix(in srgb, var(--indicator-color) 65%, transparent);
+		border-radius: 999px;
+		background: color-mix(in srgb, var(--indicator-color) 18%, var(--ide-bg-primary));
+		box-shadow:
+			0 0 18px color-mix(in srgb, var(--indicator-color) 32%, transparent),
+			inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
 		color: var(--indicator-color);
-		opacity: 0;
-		transition: opacity 0.15s ease;
-		pointer-events: none;
+		font-size: 22px;
+		font-weight: 800;
+		font-variant-numeric: tabular-nums;
+		line-height: 1;
+		text-shadow: 0 0 12px color-mix(in srgb, var(--indicator-color) 48%, transparent);
+		opacity: calc(0.76 + (var(--indicator-opacity) - 0.65) * 0.7);
+		transform: scale(1);
+		transform-origin: center;
+		/* The badge is a primary hover target for the explain-on-hover tooltip,
+		   not only the 4px spine. */
+		pointer-events: auto;
+		cursor: help;
+		box-sizing: border-box;
 	}
 
-	.complexity-gutter__indicator:hover .complexity-gutter__score {
-		opacity: 1;
+	.complexity-gutter__score--critical {
+		animation: complexity-score-glow-pulse 2.4s ease-in-out infinite;
+	}
+
+	.complexity-gutter__score--flash {
+		animation: complexity-score-arrival-pop 0.35s ease-out 1;
+	}
+
+	@keyframes complexity-spine-pulse {
+		0%,
+		100% {
+			transform: scaleX(1);
+		}
+		50% {
+			transform: scaleX(1.12);
+		}
+	}
+
+	@keyframes complexity-spine-bloom-pulse {
+		0%,
+		100% {
+			filter: blur(6px);
+			opacity: 0.55;
+			transform: scaleX(1);
+		}
+		50% {
+			filter: blur(10px);
+			opacity: 0.78;
+			transform: scaleX(1.35);
+		}
+	}
+
+	@keyframes complexity-score-glow-pulse {
+		0%,
+		100% {
+			box-shadow:
+				0 0 18px color-mix(in srgb, var(--indicator-color) 32%, transparent),
+				inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
+			transform: scale(1);
+		}
+		50% {
+			box-shadow:
+				0 0 28px color-mix(in srgb, var(--indicator-color) 52%, transparent),
+				0 0 44px color-mix(in srgb, var(--indicator-color) 28%, transparent),
+				inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
+			transform: scale(1.04);
+		}
+	}
+
+	@keyframes complexity-score-arrival-pop {
+		0% {
+			transform: scale(1.15);
+			box-shadow:
+				0 0 30px color-mix(in srgb, var(--indicator-color) 62%, transparent),
+				0 0 58px color-mix(in srgb, var(--indicator-color) 36%, transparent),
+				inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+
+	@keyframes complexity-spine-flash {
+		0% {
+			opacity: 1;
+			width: 8px;
+			box-shadow: 0 0 0 1px color-mix(in srgb, var(--indicator-color) 70%, transparent);
+			transform: translateX(-2px);
+		}
+		100% {
+			opacity: var(--indicator-opacity);
+			width: 4px;
+			transform: translateX(0);
+		}
+	}
+
+	@keyframes complexity-spine-bloom-flash {
+		0% {
+			filter: blur(12px);
+			opacity: 0.9;
+			transform: scaleX(1.45);
+		}
+		100% {
+			filter: blur(6px);
+			opacity: 0.55;
+			transform: scaleX(1);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.complexity-gutter__spine--critical,
+		.complexity-gutter__spine--critical::before,
+		.complexity-gutter__spine--flash,
+		.complexity-gutter__spine--flash::before,
+		.complexity-gutter__score--critical,
+		.complexity-gutter__score--flash {
+			animation: none;
+		}
 	}
 
 	/* Tooltip */
@@ -253,7 +430,7 @@
 		position: fixed;
 		z-index: 1000;
 		min-width: 200px;
-		max-width: 300px;
+		max-width: 360px;
 		padding: 12px;
 		background: var(--ide-bg-secondary, #1a2744);
 		border: 1px solid var(--ide-border, #a8c5d9);
@@ -274,12 +451,18 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 28px;
-		height: 28px;
-		border-radius: 50%;
-		font-size: 11px;
+		min-width: 38px;
+		height: 38px;
+		font-size: 24px;
 		font-weight: 700;
-		color: #fff;
+		color: var(--indicator-color);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.complexity-tooltip__heading {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
 	}
 
 	.complexity-tooltip__title {
@@ -287,12 +470,45 @@
 		color: var(--ide-text-primary, #f4f1e0);
 	}
 
+	.complexity-tooltip__source {
+		font-size: 10px;
+		color: var(--ide-text-muted, #a8c5d9);
+	}
+
 	.complexity-tooltip__lines {
 		color: var(--ide-text-muted, #a8c5d9);
 		font-size: 11px;
 		margin-bottom: 8px;
 	}
 
+	.complexity-tooltip__contributions {
+		list-style: none;
+		margin: 0 0 8px;
+		padding: 0;
+		display: grid;
+		gap: 3px;
+	}
+
+	.complexity-tooltip__contributions li {
+		display: grid;
+		grid-template-columns: 52px 34px minmax(0, 1fr);
+		gap: 6px;
+		align-items: baseline;
+		font-size: 11px;
+		color: var(--ide-text-secondary, #a8c5d9);
+	}
+
+	.complexity-tooltip__contributions strong {
+		color: var(--ide-text-primary, #f4f1e0);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.complexity-tooltip__contributions .complexity-tooltip__more {
+		display: block;
+		color: var(--ide-text-muted, #a8c5d9);
+		font-style: italic;
+	}
+
 	.complexity-tooltip__suggestion {
 		padding: 8px;
 		background: rgba(255, 255, 255, 0.05);

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

@@ -1,3 +1,10 @@
+/**
+     * Complexity Layer
+     *
+     * Shows complexity indicators in the gutter area only.
+     * No background highlighting - keeps editing area clean.
+     * Hover over gutter indicators for details.
+     */
 import type { ComplexityMetrics } from './core/complexity-analyzer';
 interface Props {
     /** Complexity metrics for the current document */
@@ -13,10 +20,16 @@ interface Props {
      * that sat past the initial view.
      */
     totalHeight?: number;
+    /** Estimated full scrollable content width in pixels */
+    contentWidth?: number;
     /** Minimum score to show indicators (default: 50) */
     minScore?: number;
     /** Whether indicators are enabled */
     enabled?: boolean;
+    /** Region key to briefly emphasize after jump-to-hottest */
+    flashRegionKey?: string;
+    /** Maps a raw document line to its rendered visual row */
+    lineToVisualRow?: (line: number) => number;
 }
 declare const ComplexityLayer: import("svelte").Component<Props, {}, "">;
 type ComplexityLayer = ReturnType<typeof ComplexityLayer>;

package/dist/components/editor/ConflictZoneLayer.svelte

@@ -40,17 +40,20 @@
 	 * Get color for severity level
 	 */
 	function getSeverityColor(severity: ConflictZone['severity']): string {
+		// Route through the shared --ide-* band tokens so conflict severity stays
+		// in lockstep with the complexity band system (one source of truth) and
+		// avoids the repo's phantom hardcoded-hex footgun.
 		switch (severity) {
 			case 'critical':
-				return '#ef4444';
+				return 'var(--ide-error)';
 			case 'high':
-				return '#f59e0b';
+				return 'var(--ide-warning)';
 			case 'medium':
-				return '#eab308';
+				return 'var(--ide-info)';
 			case 'low':
-				return '#22c55e';
+				return 'var(--ide-success)';
 			default:
-				return '#6b7280';
+				return 'var(--ide-text-muted)';
 		}
 	}
 
@@ -243,21 +246,25 @@
 	.conflict-zone {
 		position: absolute;
 		right: 0;
+		/* Tint by the zone's own severity color (was hardcoded red for every
+		   severity, so low/medium zones still washed red). */
 		background: linear-gradient(
 			90deg,
-			rgba(var(--zone-color-rgb, 239, 68, 68), var(--zone-opacity)),
+			color-mix(in srgb, var(--zone-color) calc(var(--zone-opacity) * 100%), transparent),
 			transparent
 		);
-		background-color: rgba(239, 68, 68, var(--zone-opacity));
-		border-left: 3px solid rgba(239, 68, 68, var(--border-opacity));
-		border-left-color: var(--zone-color);
+		border-left: 3px solid var(--zone-color);
 		pointer-events: auto;
 		cursor: pointer;
-		transition: background-color 0.2s ease;
+		transition: background 0.2s ease;
 	}
 
 	.conflict-zone:hover {
-		background-color: rgba(239, 68, 68, calc(var(--zone-opacity) + 0.1));
+		background: linear-gradient(
+			90deg,
+			color-mix(in srgb, var(--zone-color) calc((var(--zone-opacity) + 0.1) * 100%), transparent),
+			transparent
+		);
 	}
 
 	.conflict-zone--critical {
@@ -417,17 +424,17 @@
 		display: inline-block;
 		padding: 1px 4px;
 		margin-left: 4px;
-		background: rgba(168, 85, 247, 0.3);
+		background: color-mix(in srgb, var(--ide-ai-assistant) 30%, transparent);
 		border-radius: 3px;
 		font-size: 9px;
-		color: #a855f7;
+		color: var(--ide-ai-assistant);
 	}
 
 	.conflict-tooltip__suggestion {
 		padding: 8px;
-		background: rgba(255, 200, 0, 0.1);
+		background: color-mix(in srgb, var(--ide-warning) 12%, transparent);
 		border-radius: 4px;
-		border-left: 2px solid #eab308;
+		border-left: 2px solid var(--ide-warning);
 		color: var(--ide-text-secondary, #a8c5d9);
 		font-size: 11px;
 		line-height: 1.4;