@nocturnium/svelte-ide 1.0.3 → 1.0.5

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
      */

package/dist/components/editor/core/complexity-analyzer.js

@@ -117,10 +117,21 @@ export class ComplexityAnalyzer {
         // Track blocks with their brace depth at push time
         const blockStack = [];
         let braceDepth = 0;
+        let pendingDef;
         for (let i = 0; i < lines.length; i++) {
             const text = lines[i].text;
             // Check for function/class definition
             const funcMatch = text.match(PATTERNS.functionDef);
+            const currentBlock = blockStack[blockStack.length - 1];
+            const defCandidate = this.getDefinitionCandidate(text, funcMatch, currentBlock?.type === 'class' && braceDepth === currentBlock.depth);
+            if (defCandidate) {
+                pendingDef = {
+                    line: i,
+                    type: defCandidate.type,
+                    name: defCandidate.name,
+                    depth: braceDepth
+                };
+            }
             // Process character by character to properly match braces
             // Skip braces inside strings and comments
             let inString = null;
@@ -150,13 +161,16 @@ export class ComplexityAnalyzer {
                     if (c === '{') {
                         braceDepth++;
                         // If this is the opening brace of a function/class def, push it
-                        if (funcMatch && this.isDefOpeningBrace(text, ch, funcMatch)) {
+                        if (pendingDef &&
+                            braceDepth === pendingDef.depth + 1 &&
+                            this.isDefOpeningBrace(text, ch, pendingDef.type)) {
                             blockStack.push({
-                                line: i,
-                                type: funcMatch[5] ? 'class' : 'function',
-                                name: funcMatch[2] || funcMatch[3] || funcMatch[4] || funcMatch[5],
+                                line: pendingDef.line,
+                                type: pendingDef.type,
+                                name: pendingDef.name,
                                 depth: braceDepth
                             });
+                            pendingDef = undefined;
                         }
                         else if (!funcMatch ||
                             braceDepth > (blockStack.length > 0 ? blockStack[blockStack.length - 1].depth : 0) + 1) {
@@ -185,6 +199,9 @@ export class ComplexityAnalyzer {
                             }
                         }
                         braceDepth = Math.max(0, braceDepth - 1);
+                        if (pendingDef && braceDepth < pendingDef.depth) {
+                            pendingDef = undefined;
+                        }
                     }
                 }
             }
@@ -202,15 +219,35 @@ export class ComplexityAnalyzer {
     /**
      * Check if a `{` at position `ch` is the opening brace of a function/class definition
      */
-    isDefOpeningBrace(text, ch, funcMatch) {
+    isDefOpeningBrace(text, ch, type) {
         // For class: `class Foo {` — the `{` follows the class name
-        if (funcMatch[5]) {
+        if (type === 'class') {
             return true; // First `{` on a class line is the class body
         }
         // For functions: the `{` should follow the parameter list closing `)`
-        // or follow `=>` for arrow functions
+        // with an optional TypeScript return type, or follow `=>` for arrow functions.
         const before = text.slice(0, ch).trimEnd();
-        return before.endsWith(')') || before.endsWith('=>');
+        return /\)\s*(:\s*[^{};]+)?\s*$/.test(before) || before.endsWith('=>');
+    }
+    /**
+     * Extract a definition candidate before its body brace is seen.
+     */
+    getDefinitionCandidate(text, funcMatch, allowMethodStyle) {
+        if (funcMatch) {
+            return {
+                type: funcMatch[5] ? 'class' : 'function',
+                name: funcMatch[2] || funcMatch[3] || funcMatch[4] || funcMatch[5]
+            };
+        }
+        if (!allowMethodStyle) {
+            return undefined;
+        }
+        const trimmed = text.trim();
+        const methodMatch = trimmed.match(/^(?:(?:public|private|protected|static|async|readonly|override)\s+)*(?!(?:if|else|for|while|do|switch|try|catch|finally|with|return|throw|new|typeof|void|delete|await|yield)\b)(\w+)\s*\(/);
+        if (methodMatch) {
+            return { type: 'function', name: methodMatch[1] };
+        }
+        return undefined;
     }
     /**
      * Analyze a specific region

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

@@ -235,13 +235,13 @@ export function getSeverityIcon(severity) {
 export function getSeverityColor(severity) {
     switch (severity) {
         case 'error':
-            return '#f44747';
+            return 'var(--ide-error)';
         case 'warning':
-            return '#ff8c00';
+            return 'var(--ide-warning)';
         case 'info':
-            return '#3794ff';
+            return 'var(--ide-info)';
         case 'hint':
-            return '#6c6c6c';
+            return 'var(--ide-text-muted)';
     }
 }
 /**

package/dist/components/editor/core/semantic-analyzer.js

@@ -71,8 +71,9 @@ const JAVASCRIPT_PATTERNS = new Map([
     [
         'function',
         {
-            startPattern: /^(export\s+)?(async\s+)?function\s+(\w+)|^const\s+(\w+)\s*=\s*(async\s*)?\([^)]*\)\s*=>/,
+            startPattern: /^(export\s+)?(async\s+)?function\s+(\w+)|^(?:export\s+)?const\s+(\w+)\s*=\s*(async\s*)?\([^)]*\)\s*(?::[^=]+)?=>/,
             blockBased: true,
+            expressionBody: true,
             getLabel: (m) => `Function: ${m[3] || m[4] || 'anonymous'}`
         }
     ],
@@ -298,6 +299,17 @@ export class SemanticAnalyzer {
                             label: config.getLabel?.(match)
                         });
                     }
+                    else if (match && config.expressionBody && text.includes('=>')) {
+                        // Brace-less expression-bodied arrow (e.g. `export const f = () => x`):
+                        // no block to track, so record it as a single-line region.
+                        regions.push({
+                            category,
+                            startLine: i,
+                            endLine: i,
+                            confidence: 0.85,
+                            label: config.getLabel?.(match)
+                        });
+                    }
                 }
             }
             // Update depth

package/dist/components/editor/core/structure-layout.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Structure Map row layout
+ *
+ * The Structure Map places one labeled row per semantic region. Rows want to sit
+ * at a position proportional to their start line (so the map reads like a
+ * minimap), but every label needs a minimum pixel height to stay legible. With
+ * pure proportional placement, regions that start on the same line (e.g. the
+ * `exports` and `class` regions of `export class Foo`) or that cluster densely
+ * (a run of test hooks) overprint each other into illegible mush.
+ *
+ * `layoutStructureRows` resolves non-overlapping vertical offsets:
+ *  - pass 1 (top-down): no row sits closer than `rowHeight` below the previous
+ *    one, preserving proportional placement wherever there is room;
+ *  - pass 2 (bottom-up): if the de-collided stack overruns the available height,
+ *    pull rows back up so the last one ends exactly at `height`, keeping the
+ *    minimum spacing intact.
+ *
+ * When there are genuinely more rows than can fit (`rows * rowHeight > height`)
+ * the stack is floored at the top and rows are placed sequentially; callers are
+ * expected to clip the overflow (`overflow: hidden`).
+ */
+/**
+ * Resolve non-overlapping top offsets (in px) for structure-map rows.
+ *
+ * @param startLines  0-based start line of each row, in render order.
+ * @param totalLines  Total line count the map represents.
+ * @param height      Available height of the rendering area, in px.
+ * @param rowHeight   Minimum legible height of a single row, in px.
+ * @returns Top offset in px for each input row, in the same order.
+ */
+export declare function layoutStructureRows(startLines: readonly number[], totalLines: number, height: number, rowHeight: number): number[];

package/dist/components/editor/core/structure-layout.js

@@ -0,0 +1,64 @@
+/**
+ * Structure Map row layout
+ *
+ * The Structure Map places one labeled row per semantic region. Rows want to sit
+ * at a position proportional to their start line (so the map reads like a
+ * minimap), but every label needs a minimum pixel height to stay legible. With
+ * pure proportional placement, regions that start on the same line (e.g. the
+ * `exports` and `class` regions of `export class Foo`) or that cluster densely
+ * (a run of test hooks) overprint each other into illegible mush.
+ *
+ * `layoutStructureRows` resolves non-overlapping vertical offsets:
+ *  - pass 1 (top-down): no row sits closer than `rowHeight` below the previous
+ *    one, preserving proportional placement wherever there is room;
+ *  - pass 2 (bottom-up): if the de-collided stack overruns the available height,
+ *    pull rows back up so the last one ends exactly at `height`, keeping the
+ *    minimum spacing intact.
+ *
+ * When there are genuinely more rows than can fit (`rows * rowHeight > height`)
+ * the stack is floored at the top and rows are placed sequentially; callers are
+ * expected to clip the overflow (`overflow: hidden`).
+ */
+/**
+ * Resolve non-overlapping top offsets (in px) for structure-map rows.
+ *
+ * @param startLines  0-based start line of each row, in render order.
+ * @param totalLines  Total line count the map represents.
+ * @param height      Available height of the rendering area, in px.
+ * @param rowHeight   Minimum legible height of a single row, in px.
+ * @returns Top offset in px for each input row, in the same order.
+ */
+export function layoutStructureRows(startLines, totalLines, height, rowHeight) {
+    const n = startLines.length;
+    if (n === 0)
+        return [];
+    const span = Math.max(1, totalLines);
+    const tops = startLines.map((line) => (Math.max(0, line) / span) * height);
+    // Pass 1 — top-down: enforce the minimum gap, keeping proportional order.
+    for (let i = 1; i < n; i++) {
+        const min = tops[i - 1] + rowHeight;
+        if (tops[i] < min)
+            tops[i] = min;
+    }
+    // Pass 2 — bottom-up: if the stack overflows, slide it back into bounds.
+    if (height > 0 && tops[n - 1] + rowHeight > height) {
+        tops[n - 1] = height - rowHeight;
+        for (let i = n - 2; i >= 0; i--) {
+            const max = tops[i + 1] - rowHeight;
+            if (tops[i] > max)
+                tops[i] = max;
+        }
+        // More rows than fit: floor at the top and place sequentially. Some
+        // overlap is unavoidable here, but the result is deterministic and the
+        // caller clips it.
+        if (tops[0] < 0) {
+            tops[0] = 0;
+            for (let i = 1; i < n; i++) {
+                const min = tops[i - 1] + rowHeight;
+                if (tops[i] < min)
+                    tops[i] = min;
+            }
+        }
+    }
+    return tops;
+}

package/dist/services/mock-ai.js

@@ -282,7 +282,7 @@ export function createMockMessage(role, content, options = {}) {
         ...options,
         metadata: role === 'assistant'
             ? {
-                model: 'claude-3-5-sonnet-mock',
+                model: 'nocturnium-demo-mock',
                 tokensUsed: Math.floor(content.length / 4),
                 latencyMs: Math.floor(500 + Math.random() * 1500),
                 ...options.metadata

package/dist/stores/ai.svelte.js

@@ -9,7 +9,7 @@ import { SvelteMap } from 'svelte/reactivity';
 // Default configuration
 const defaultConfig = {
     endpoint: '/api/chat',
-    model: 'claude-3-5-sonnet',
+    model: 'nocturnium-demo-mock',
     systemPrompt: 'You are a helpful coding assistant integrated into an IDE.',
     tools: [],
     maxTokens: 4096,

package/dist/styles/theme.css

@@ -65,6 +65,12 @@
 	--ide-interactive-muted: color-mix(in srgb, var(--ide-interactive) 70%, transparent);
 	--ide-interactive-rgb: 74, 141, 183;
 
+	/* Primary action — the signature warm ember accent, shared as a single
+	   source of truth by primary buttons and badges so "primary" reads the
+	   same everywhere. */
+	--ide-primary: var(--ide-interactive-active);
+	--ide-primary-hover: var(--ide-interactive-hover);
+
 	/* IDE Accent Colors */
 	--ide-accent: var(--color-nocturnium-wave);
 	--ide-accent-hover: var(--color-nocturnium-flame);
@@ -85,11 +91,14 @@
 
 	/* Plugin Status Colors */
 	--ide-plugin-draft: var(--ide-text-muted);
+	--ide-plugin-submitted: var(--ide-info);
 	--ide-plugin-reviewing: var(--color-nocturnium-aurora-yellow);
 	--ide-plugin-approved: var(--color-nocturnium-aurora-green);
+	--ide-plugin-testing: var(--color-nocturnium-teal);
 	--ide-plugin-rejected: var(--ide-error);
 	--ide-plugin-deploying: var(--color-nocturnium-aurora-blue);
 	--ide-plugin-deployed: var(--color-nocturnium-aurora-green);
+	--ide-plugin-rolled_back: var(--color-nocturnium-flame);
 
 	/* CRDT Collaboration Colors */
 	--ide-collab-cursor-1: var(--color-nocturnium-aurora-blue);
@@ -397,6 +406,11 @@
 	color: var(--ide-plugin-draft);
 }
 
+.ide-plugin-status--submitted {
+	background-color: color-mix(in srgb, var(--ide-plugin-submitted) 20%, transparent);
+	color: var(--ide-plugin-submitted);
+}
+
 .ide-plugin-status--reviewing {
 	background-color: color-mix(in srgb, var(--ide-plugin-reviewing) 20%, transparent);
 	color: var(--ide-plugin-reviewing);
@@ -407,6 +421,11 @@
 	color: var(--ide-plugin-approved);
 }
 
+.ide-plugin-status--testing {
+	background-color: color-mix(in srgb, var(--ide-plugin-testing) 20%, transparent);
+	color: var(--ide-plugin-testing);
+}
+
 .ide-plugin-status--rejected {
 	background-color: color-mix(in srgb, var(--ide-plugin-rejected) 20%, transparent);
 	color: var(--ide-plugin-rejected);
@@ -422,6 +441,11 @@
 	color: var(--ide-plugin-deployed);
 }
 
+.ide-plugin-status--rolled_back {
+	background-color: color-mix(in srgb, var(--ide-plugin-rolled_back) 20%, transparent);
+	color: var(--ide-plugin-rolled_back);
+}
+
 /* Agent Status Animations */
 @keyframes ide-agent-pulse {
 	0%,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nocturnium/svelte-ide",
-	"version": "1.0.3",
+	"version": "1.0.5",
 	"description": "Svelte 5 code editor and IDE building blocks — custom editor, syntax highlighting, code folding, multi-cursor, LSP client, and optional realtime collaboration.",
 	"author": "Nocturnium & Jordan Dziat <hello@nocturnium.ai> (https://nocturnium.ai)",
 	"license": "MIT",