@nocturnium/svelte-ide 1.0.4 → 1.0.6

package/dist/components/editor/InlineDiffLayer.svelte

@@ -48,13 +48,13 @@
 	function getColor(type: DiffLine['type']): string {
 		switch (type) {
 			case 'added':
-				return '#22c55e'; // green
+				return 'var(--ide-status-created)';
 			case 'modified':
-				return '#3b82f6'; // blue
+				return 'var(--ide-status-modified)';
 			case 'removed':
-				return '#ef4444'; // red
+				return 'var(--ide-status-deleted)';
 			default:
-				return '#6b7280';
+				return 'var(--ide-text-muted)';
 		}
 	}
 
@@ -283,7 +283,7 @@
 		left: 0;
 		width: 0;
 		height: 0;
-		border-left: 8px solid #ef4444;
+		border-left: 8px solid var(--ide-status-deleted, #ef4444);
 		border-top: 4px solid transparent;
 		border-bottom: 4px solid transparent;
 		pointer-events: auto;
@@ -291,7 +291,7 @@
 	}
 
 	.diff-removed-marker:hover {
-		border-left-color: #f87171;
+		border-left-color: var(--ide-error, #ef4444);
 	}
 
 	/* Tooltip */
@@ -301,8 +301,8 @@
 		min-width: 200px;
 		max-width: 400px;
 		padding: 10px;
-		background: var(--color-surface, #1e1e2e);
-		border: 1px solid var(--color-border, #333);
+		background: var(--ide-bg-secondary, #1a2744);
+		border: 1px solid var(--ide-border, #a8c5d9);
 		border-radius: 6px;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 		font-size: 12px;
@@ -324,7 +324,7 @@
 	.tooltip-label {
 		display: block;
 		font-size: 10px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		margin-bottom: 4px;
 	}
 
@@ -332,15 +332,15 @@
 		margin: 0;
 		font-family: 'JetBrains Mono', monospace;
 		font-size: 11px;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 		white-space: pre-wrap;
 		word-break: break-all;
 	}
 
 	.tooltip-hint {
 		font-size: 10px;
-		color: var(--color-text-muted, #888);
-		border-top: 1px solid var(--color-border, #333);
+		color: var(--ide-text-muted, #a8c5d9);
+		border-top: 1px solid var(--ide-border, #a8c5d9);
 		padding-top: 8px;
 	}
 </style>

package/dist/components/editor/PluginPreviewSandbox.svelte

@@ -405,8 +405,8 @@
 		width: 90vw;
 		max-width: 1200px;
 		height: 80vh;
-		background: var(--color-surface, #1e1e2e);
-		border: 1px solid var(--color-border, #333);
+		background: var(--ide-bg-secondary, #1a2744);
+		border: 1px solid var(--ide-border, #a8c5d9);
 		border-radius: 12px;
 		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
 		display: flex;
@@ -419,14 +419,14 @@
 		align-items: center;
 		justify-content: space-between;
 		padding: 12px 16px;
-		border-bottom: 1px solid var(--color-border, #333);
+		border-bottom: 1px solid var(--ide-border, #a8c5d9);
 	}
 
 	.plugin-sandbox__title {
 		margin: 0;
 		font-size: 16px;
 		font-weight: 600;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.plugin-sandbox__actions {
@@ -447,14 +447,14 @@
 		background: transparent;
 		border: none;
 		border-radius: 4px;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 		font-size: 12px;
 		cursor: pointer;
 		transition: all 0.15s ease;
 	}
 
 	.mode-btn:hover {
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.mode-btn.active {
@@ -486,7 +486,7 @@
 	/* Plugin sidebar */
 	.plugin-sidebar {
 		width: 240px;
-		border-right: 1px solid var(--color-border, #333);
+		border-right: 1px solid var(--ide-border, #a8c5d9);
 		padding: 12px;
 		overflow-y: auto;
 	}
@@ -495,7 +495,7 @@
 		margin: 0 0 12px;
 		font-size: 12px;
 		font-weight: 600;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 		text-transform: uppercase;
 	}
 
@@ -520,7 +520,7 @@
 
 	.plugin-item:hover {
 		background: rgba(255, 255, 255, 0.05);
-		border-color: var(--color-border, #333);
+		border-color: var(--ide-border, #a8c5d9);
 	}
 
 	.plugin-item--selected {
@@ -555,12 +555,12 @@
 	.plugin-item__name {
 		font-size: 13px;
 		font-weight: 500;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.plugin-item__desc {
 		font-size: 11px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	/* Preview area */
@@ -577,7 +577,7 @@
 		justify-content: center;
 		gap: 8px;
 		height: 100%;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 	}
 
 	.loading-spinner {
@@ -601,7 +601,7 @@
 		gap: 12px;
 		padding: 8px 12px;
 		background: rgba(255, 255, 255, 0.03);
-		border-bottom: 1px solid var(--color-border, #333);
+		border-bottom: 1px solid var(--ide-border, #a8c5d9);
 		font-size: 12px;
 	}
 
@@ -633,7 +633,7 @@
 	}
 
 	.transform-time {
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	.transform-error {
@@ -663,7 +663,7 @@
 		background: rgba(255, 255, 255, 0.1);
 		border: none;
 		border-radius: 4px;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 		font-size: 12px;
 		cursor: pointer;
 		transition: all 0.15s ease;
@@ -685,13 +685,13 @@
 		align-items: center;
 		justify-content: center;
 		height: 100%;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 		text-align: center;
 	}
 
 	.preview-hint {
 		font-size: 12px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		margin-top: 8px;
 	}
 
@@ -703,7 +703,7 @@
 		font-family: 'JetBrains Mono', 'Fira Code', monospace;
 		font-size: 13px;
 		line-height: 1.5;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 		overflow: auto;
 		white-space: pre;
 	}
@@ -728,7 +728,7 @@
 		border-radius: 6px 6px 0 0;
 		font-size: 11px;
 		font-weight: 600;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 		text-transform: uppercase;
 	}
 
@@ -759,7 +759,7 @@
 
 	.diff-line__num {
 		width: 40px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		text-align: right;
 		padding-right: 8px;
 		user-select: none;
@@ -767,7 +767,7 @@
 
 	.diff-line__sign {
 		width: 16px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	.diff-line--add .diff-line__sign {

package/dist/components/editor/SnippetPalette.svelte

@@ -283,8 +283,8 @@
 		max-width: 800px;
 		height: 70vh;
 		max-height: 600px;
-		background: var(--color-surface, #1e1e2e);
-		border: 1px solid var(--color-border, #333);
+		background: var(--ide-bg-secondary, #1a2744);
+		border: 1px solid var(--ide-border, #a8c5d9);
 		border-radius: 12px;
 		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
 		display: flex;
@@ -298,16 +298,16 @@
 		align-items: center;
 		gap: 12px;
 		padding: 12px 16px;
-		border-bottom: 1px solid var(--color-border, #333);
+		border-bottom: 1px solid var(--ide-border, #a8c5d9);
 	}
 
 	.snippet-search {
 		flex: 1;
 		padding: 8px 12px;
 		background: rgba(0, 0, 0, 0.2);
-		border: 1px solid var(--color-border, #333);
+		border: 1px solid var(--ide-border, #a8c5d9);
 		border-radius: 6px;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 		font-size: 14px;
 		outline: none;
 	}
@@ -318,7 +318,7 @@
 
 	.snippet-hint {
 		font-size: 11px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		white-space: nowrap;
 	}
 
@@ -326,7 +326,7 @@
 		display: flex;
 		gap: 4px;
 		padding: 8px 16px;
-		border-bottom: 1px solid var(--color-border, #333);
+		border-bottom: 1px solid var(--ide-border, #a8c5d9);
 		overflow-x: auto;
 	}
 
@@ -335,7 +335,7 @@
 		background: transparent;
 		border: none;
 		border-radius: 4px;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 		font-size: 12px;
 		cursor: pointer;
 		white-space: nowrap;
@@ -344,7 +344,7 @@
 
 	.category-tab:hover {
 		background: rgba(255, 255, 255, 0.05);
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.category-tab.active {
@@ -361,13 +361,13 @@
 
 	.snippet-list {
 		overflow-y: auto;
-		border-right: 1px solid var(--color-border, #333);
+		border-right: 1px solid var(--ide-border, #a8c5d9);
 	}
 
 	.snippet-empty {
 		padding: 24px;
 		text-align: center;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		font-size: 13px;
 	}
 
@@ -377,7 +377,7 @@
 		padding: 10px 16px;
 		background: transparent;
 		border: none;
-		border-bottom: 1px solid var(--color-border, #333);
+		border-bottom: 1px solid var(--ide-border, #a8c5d9);
 		text-align: left;
 		cursor: pointer;
 		transition: background 0.1s ease;
@@ -407,7 +407,7 @@
 	.snippet-name {
 		font-size: 13px;
 		font-weight: 500;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.snippet-badge {
@@ -421,7 +421,7 @@
 
 	.snippet-item-desc {
 		font-size: 11px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	/* Preview pane */
@@ -442,7 +442,7 @@
 	.preview-name {
 		font-size: 14px;
 		font-weight: 600;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.preview-category {
@@ -450,7 +450,7 @@
 		padding: 2px 8px;
 		background: rgba(255, 255, 255, 0.1);
 		border-radius: 4px;
-		color: var(--color-text-secondary, #aaa);
+		color: var(--ide-text-secondary, #a8c5d9);
 	}
 
 	.preview-body {
@@ -466,7 +466,7 @@
 		font-family: 'JetBrains Mono', 'Fira Code', monospace;
 		font-size: 12px;
 		line-height: 1.5;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 		white-space: pre-wrap;
 		word-break: break-all;
 	}
@@ -486,7 +486,7 @@
 		justify-content: space-between;
 		margin-top: 12px;
 		font-size: 11px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	.preview-footer code {
@@ -515,7 +515,7 @@
 		align-items: center;
 		justify-content: center;
 		height: 100%;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		font-size: 13px;
 	}
 
@@ -523,8 +523,8 @@
 		display: flex;
 		justify-content: space-between;
 		padding: 8px 16px;
-		border-top: 1px solid var(--color-border, #333);
+		border-top: 1px solid var(--ide-border, #a8c5d9);
 		font-size: 11px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 </style>

package/dist/components/editor/StructureMap.svelte

@@ -14,6 +14,10 @@
 	import type { SemanticCategory } from './core/semantic-analyzer';
 	import { getSemanticAnalyzer } from './core/semantic-analyzer';
 	import type { ComplexityMetrics } from './core/complexity-analyzer';
+	import { layoutStructureRows } from './core/structure-layout';
+
+	/** Minimum legible height of a single node row, in px (kept in sync with CSS). */
+	const ROW_HEIGHT = 18;
 
 	interface StructureNode {
 		/** Stable unique id (keyed-each safe — multiple regions can share a start line) */
@@ -134,27 +138,39 @@
 		// Sort by line number
 		nodes.sort((a, b) => a.startLine - b.startLine);
 
-		return nodes;
+		// Drop a generic `exports` node when a more specific structural node
+		// (class / function / types) begins on the same line. `export class Foo`
+		// emits both an `exports` region ("Export: class") and a `class` region
+		// ("Class: Foo") at the identical start line; without this they render as
+		// two stacked rows saying the same thing.
+		const specificStartLines = new Set(
+			nodes
+				.filter((n) => n.type === 'function' || n.type === 'class' || n.type === 'types')
+				.map((n) => n.startLine)
+		);
+
+		return nodes.filter((n) => !(n.type === 'exports' && specificStartLines.has(n.startLine)));
 	});
 
+	// Measured height of the scrollable node area, kept current by a ResizeObserver
+	// via Svelte's `bind:clientHeight`. Drives collision-free row placement.
+	let contentHeight = $state(0);
+
+	// Non-overlapping top offset (px) for each node, proportional to its start
+	// line but de-collided so labels never overprint. See structure-layout.ts.
+	let nodeTops = $derived(
+		layoutStructureRows(
+			structure.map((n) => n.startLine),
+			totalLines,
+			contentHeight,
+			ROW_HEIGHT
+		)
+	);
+
 	// Calculate viewport indicator position
 	let viewportTop = $derived((scrollLine / Math.max(1, totalLines)) * 100);
 	let viewportHeight = $derived((visibleLines / Math.max(1, totalLines)) * 100);
 
-	/**
-	 * Get node height as percentage
-	 */
-	function getNodeHeight(node: StructureNode): number {
-		return ((node.endLine - node.startLine + 1) / Math.max(1, totalLines)) * 100;
-	}
-
-	/**
-	 * Get node top position as percentage
-	 */
-	function getNodeTop(node: StructureNode): number {
-		return (node.startLine / Math.max(1, totalLines)) * 100;
-	}
-
 	/**
 	 * Get color for node type
 	 */
@@ -231,7 +247,7 @@
 			<span class="structure-map__count">{structure.length}</span>
 		</div>
 
-		<div class="structure-map__content">
+		<div class="structure-map__content" bind:clientHeight={contentHeight}>
 			<!-- Viewport indicator -->
 			<div
 				class="structure-map__viewport"
@@ -239,15 +255,15 @@
 			></div>
 
 			<!-- Structure nodes -->
-			{#each structure as node (node.id)}
+			{#each structure as node, i (node.id)}
 				<button
 					class="structure-map__node"
 					class:structure-map__node--active={isCursorInNode(node)}
 					class:structure-map__node--complex={node.metrics.complexity &&
 						node.metrics.complexity >= 50}
 					style="
-						top: {getNodeTop(node)}%;
-						height: {Math.max(1, getNodeHeight(node))}%;
+						top: {nodeTops[i] ?? 0}px;
+						height: {ROW_HEIGHT}px;
 						--node-color: {getNodeColor(node.type)};
 						--complexity-color: {getComplexityColor(node.metrics.complexity ?? 0)};
 					"
@@ -296,8 +312,8 @@
 		display: flex;
 		flex-direction: column;
 		height: 100%;
-		background: var(--color-surface, #1a1a2e);
-		border-left: 1px solid var(--color-border, #333);
+		background: var(--ide-bg-secondary, #1a2744);
+		border-left: 1px solid var(--ide-border, #a8c5d9);
 		font-size: 11px;
 		user-select: none;
 	}
@@ -307,12 +323,12 @@
 		justify-content: space-between;
 		align-items: center;
 		padding: 8px 10px;
-		border-bottom: 1px solid var(--color-border, #333);
+		border-bottom: 1px solid var(--ide-border, #a8c5d9);
 	}
 
 	.structure-map__title {
 		font-weight: 600;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 		text-transform: uppercase;
 		font-size: 10px;
 		letter-spacing: 0.05em;
@@ -323,7 +339,7 @@
 		background: rgba(255, 255, 255, 0.1);
 		border-radius: 10px;
 		font-size: 10px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	.structure-map__content {
@@ -349,7 +365,8 @@
 		left: 4px;
 		right: 4px;
 		display: flex;
-		align-items: flex-start;
+		align-items: center;
+		box-sizing: border-box;
 		gap: 4px;
 		padding: 2px 6px;
 		background: rgba(var(--node-color-rgb, 59, 130, 246), 0.15);
@@ -358,7 +375,7 @@
 		border-radius: 0 3px 3px 0;
 		cursor: pointer;
 		text-align: left;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 		font-size: 10px;
 		overflow: hidden;
 		transition: background 0.15s ease;
@@ -407,17 +424,17 @@
 		left: 0;
 		right: 0;
 		height: 2px;
-		background: var(--color-cursor, #4a9eff);
+		background: var(--ide-interactive-focus, #60a5fa);
 		pointer-events: none;
 		z-index: 10;
-		box-shadow: 0 0 4px var(--color-cursor, #4a9eff);
+		box-shadow: 0 0 4px var(--ide-interactive-focus, #60a5fa);
 	}
 
 	.structure-map__legend {
 		display: flex;
 		gap: 8px;
 		padding: 6px 10px;
-		border-top: 1px solid var(--color-border, #333);
+		border-top: 1px solid var(--ide-border, #a8c5d9);
 		flex-wrap: wrap;
 	}
 
@@ -425,7 +442,7 @@
 		display: flex;
 		align-items: center;
 		gap: 4px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		font-size: 9px;
 	}
 

package/dist/components/editor/TimelineScrubber.svelte

@@ -277,13 +277,13 @@
 		gap: 8px;
 		height: 32px;
 		padding: 0 12px;
-		background: var(--color-surface, #1e1e2e);
-		border-top: 1px solid var(--color-border, #333);
+		background: var(--ide-bg-secondary, #1a2744);
+		border-top: 1px solid var(--ide-border, #a8c5d9);
 		user-select: none;
 	}
 
 	.timeline-scrubber--playback {
-		background: var(--color-surface-elevated, #252535);
+		background: var(--ide-bg-elevated, #1a2744);
 	}
 
 	.timeline-scrubber__controls {
@@ -303,7 +303,7 @@
 		background: transparent;
 		border: none;
 		border-radius: 4px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 		cursor: pointer;
 		transition:
 			background 0.15s ease,
@@ -312,7 +312,7 @@
 
 	.timeline-scrubber__btn:hover {
 		background: rgba(255, 255, 255, 0.1);
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.timeline-scrubber__btn--live {
@@ -397,7 +397,7 @@
 	.timeline-scrubber__thumb-handle {
 		width: 14px;
 		height: 14px;
-		background: var(--color-primary, #4a9eff);
+		background: var(--ide-interactive, #4a8db7);
 		border: 2px solid #fff;
 		border-radius: 50%;
 		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
@@ -413,7 +413,7 @@
 		text-align: center;
 		font-size: 11px;
 		font-family: var(--font-mono, monospace);
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 
 	.timeline-scrubber__live {
@@ -439,8 +439,8 @@
 		align-items: center;
 		gap: 8px;
 		padding: 8px 12px;
-		background: var(--color-surface, #1e1e2e);
-		border: 1px solid var(--color-border, #333);
+		background: var(--ide-bg-secondary, #1a2744);
+		border: 1px solid var(--ide-border, #a8c5d9);
 		border-radius: 6px;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 		pointer-events: none;
@@ -460,11 +460,11 @@
 	.timeline-scrubber__tooltip-label {
 		font-size: 12px;
 		font-weight: 500;
-		color: var(--color-text, #e8e8f0);
+		color: var(--ide-text-primary, #f4f1e0);
 	}
 
 	.timeline-scrubber__tooltip-time {
 		font-size: 10px;
-		color: var(--color-text-muted, #888);
+		color: var(--ide-text-muted, #a8c5d9);
 	}
 </style>

package/dist/components/editor/core/complexity-analyzer.d.ts

@@ -87,6 +87,10 @@ export declare class ComplexityAnalyzer {
      * Check if a `{` at position `ch` is the opening brace of a function/class definition
      */
     private isDefOpeningBrace;
+    /**
+     * Extract a definition candidate before its body brace is seen.
+     */
+    private getDefinitionCandidate;
     /**
      * Analyze a specific region
      */