@nocturnium/svelte-ide 1.0.2 → 1.0.4

package/dist/styles/theme.css

@@ -43,6 +43,7 @@
 	--ide-bg-elevated: color-mix(in srgb, var(--ide-bg-secondary) 90%, white 10%);
 	--ide-bg-hover: color-mix(in srgb, var(--ide-bg-tertiary) 50%, transparent);
 	--ide-bg-active: var(--ide-bg-tertiary);
+	--ide-bg-overlay: color-mix(in srgb, black 75%, transparent);
 	--ide-bg-selection-secondary: color-mix(
 		in srgb,
 		var(--color-nocturnium-aurora-purple) 22%,
@@ -62,9 +63,11 @@
 	--ide-interactive-active: var(--color-nocturnium-ember);
 	--ide-interactive-focus: var(--color-nocturnium-aurora-blue);
 	--ide-interactive-muted: color-mix(in srgb, var(--ide-interactive) 70%, transparent);
+	--ide-interactive-rgb: 74, 141, 183;
 
 	/* IDE Accent Colors */
 	--ide-accent: var(--color-nocturnium-wave);
+	--ide-accent-hover: var(--color-nocturnium-flame);
 	--ide-accent-strong: var(--color-nocturnium-flame);
 
 	/* IDE Semantic Colors */
@@ -98,8 +101,10 @@
 
 	/* IDE Borders */
 	--ide-border: color-mix(in srgb, var(--ide-text-secondary) 20%, transparent);
+	--ide-border-light: color-mix(in srgb, var(--ide-text-secondary) 12%, transparent);
 	--ide-border-focus: var(--ide-interactive);
 	--ide-border-error: var(--ide-error);
+	--ide-focus-ring: var(--ide-interactive-focus);
 
 	/* IDE Shadows */
 	--ide-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
@@ -113,6 +118,7 @@
 		'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, 'Courier New', monospace;
 	--ide-font-size-xs: 0.75rem;
 	--ide-font-size-sm: 0.875rem;
+	--ide-font-size-md: 1rem;
 	--ide-font-size-base: 1rem;
 	--ide-font-size-lg: 1.125rem;
 	--ide-font-size-xl: 1.25rem;
@@ -130,8 +136,10 @@
 	--ide-spacing-lg: 1.5rem;
 	--ide-spacing-xl: 2rem;
 	--ide-spacing-2xl: 3rem;
+	--ide-spacing-3xl: 4rem;
 
 	/* IDE Radii */
+	--ide-radius-xs: 0.125rem;
 	--ide-radius-sm: 0.25rem;
 	--ide-radius-md: 0.375rem;
 	--ide-radius-lg: 0.5rem;
@@ -165,6 +173,21 @@
 	--ide-status-bar-height: 24px;
 	--ide-tab-height: 36px;
 	--ide-header-height: 40px;
+	--ide-scrollbar-thumb: var(--ide-bg-tertiary);
+
+	/* IDE Syntax Colors */
+	--ide-syntax-keyword: var(--color-nocturnium-aurora-purple);
+	--ide-syntax-string: var(--color-nocturnium-aurora-green);
+	--ide-syntax-function: var(--color-nocturnium-aurora-blue);
+	--ide-syntax-number: var(--color-nocturnium-aurora-yellow);
+	--ide-syntax-comment: var(--ide-text-muted);
+	--ide-syntax-type: var(--color-nocturnium-teal);
+	--ide-syntax-variable: var(--ide-text-primary);
+	--ide-syntax-operator: var(--ide-text-primary);
+	--ide-syntax-punctuation: var(--ide-text-secondary);
+	--ide-syntax-constant: var(--color-nocturnium-aurora-yellow);
+	--ide-syntax-tag: var(--color-nocturnium-aurora-pink);
+	--ide-syntax-attribute: var(--color-nocturnium-aurora-yellow);
 
 	/* Agent Status Colors */
 	--ide-agent-online: var(--color-nocturnium-aurora-green);
@@ -175,6 +198,7 @@
 
 	/* Agent Type Colors */
 	--ide-agent-human: var(--color-nocturnium-aurora-blue);
+	--ide-agent-ai: var(--color-nocturnium-ember);
 	--ide-agent-ai-primary: var(--color-nocturnium-ember);
 	--ide-agent-ai-secondary: var(--color-nocturnium-aurora-purple);
 	--ide-agent-system: var(--color-nocturnium-ocean);
@@ -192,6 +216,12 @@
 	--ide-transaction-committed: var(--color-nocturnium-aurora-green);
 	--ide-transaction-failed: var(--ide-error);
 
+	/* File Status Colors */
+	--ide-status-created: var(--color-nocturnium-aurora-green);
+	--ide-status-modified: var(--color-nocturnium-aurora-yellow);
+	--ide-status-deleted: var(--ide-error);
+	--ide-status-renamed: var(--color-nocturnium-aurora-purple);
+
 	/* Progress Indicators */
 	--ide-progress-track: var(--ide-bg-tertiary);
 	--ide-progress-fill: var(--color-nocturnium-wave);
@@ -623,6 +653,19 @@
 	background: var(--ide-agent-ai-primary);
 }
 
+@media (prefers-reduced-motion: reduce) {
+	.ide-agent-status-ring,
+	.ide-agent-status-ring--busy,
+	.ide-agent-status-ring--stalled,
+	.ide-lock-badge--pending,
+	.ide-lock-badge--conflict,
+	.ide-transaction-indicator--pending,
+	.ide-agent-cursor,
+	.ide-agent-cursor--typing::after {
+		animation: none;
+	}
+}
+
 /* Force default cursor on editor gutter/line numbers */
 [class*='gutter'],
 [class*='line-number'],

package/dist/types/vfs.d.ts

@@ -112,9 +112,23 @@ export interface VFSLockAcquisitionOptions {
 export declare class VFSError extends Error {
     code: VFSErrorCode;
     details?: unknown | undefined;
+    statusCode?: number;
+    path?: string;
+    workspaceId?: string;
+    retryable: boolean;
+    userMessage: string;
+    technicalDetails?: string;
+    recoveryOptions: {
+        id: string;
+        label: string;
+        description: string;
+        action: 'retry' | 'force' | 'merge' | 'discard' | 'refresh' | 'wait' | 'cancel';
+        recommended?: boolean;
+        dangerous?: boolean;
+    }[];
     constructor(message: string, code: VFSErrorCode, details?: unknown | undefined);
 }
-export type VFSErrorCode = 'FILE_LOCKED' | 'VERSION_CONFLICT' | 'FILE_NOT_FOUND' | 'PERMISSION_DENIED' | 'TRANSACTION_FAILED' | 'WORKSPACE_NOT_FOUND' | 'INVALID_PATH' | 'NETWORK_ERROR';
+export type VFSErrorCode = 'NETWORK_ERROR' | 'CONNECTION_LOST' | 'TIMEOUT' | 'FILE_LOCKED' | 'LOCK_EXPIRED' | 'LOCK_CONFLICT' | 'VERSION_CONFLICT' | 'FILE_NOT_FOUND' | 'PERMISSION_DENIED' | 'WORKSPACE_NOT_FOUND' | 'INVALID_OPERATION' | 'SERVER_ERROR' | 'RATE_LIMITED' | 'TRANSACTION_FAILED' | 'INVALID_PATH' | 'UNKNOWN';
 export type VFSEvent = VFSSnapshotEvent | VFSUpdateEvent | VFSPingEvent | VFSCompleteEvent | VFSErrorEvent | VFSIterationCompletedEvent | VFSChangeClassifiedEvent | VFSGateProgressEvent | VFSLockAcquiredEvent | VFSLockReleasedEvent;
 export interface VFSBaseEvent {
     timestamp: string;

package/dist/types/vfs.js

@@ -9,10 +9,19 @@
 export class VFSError extends Error {
     code;
     details;
+    statusCode;
+    path;
+    workspaceId;
+    retryable = false;
+    userMessage;
+    technicalDetails;
+    recoveryOptions = [];
     constructor(message, code, details) {
         super(message);
         this.code = code;
         this.details = details;
         this.name = 'VFSError';
+        this.userMessage = message;
+        this.technicalDetails = message;
     }
 }

package/dist/utils/language.d.ts

@@ -1,6 +1,3 @@
-/**
- * Language detection and utilities
- */
 /**
  * Detect language from filename
  */
@@ -17,6 +14,10 @@ export declare function getLanguageMimeType(language: string): string;
  * Check if a language is supported for syntax highlighting
  */
 export declare function isLanguageSupported(language: string): boolean;
+/**
+ * Get languages with real syntax tokenizers.
+ */
+export declare function getSupportedLanguages(): string[];
 /**
  * Get display name for a language
  */

package/dist/utils/language.js

@@ -1,3 +1,4 @@
+import { getSupportedLanguages as getTokenizerSupportedLanguages, resolveLanguage } from '../components/editor/tokenizer';
 /**
  * Language detection and utilities
  */
@@ -144,24 +145,13 @@ export function getLanguageMimeType(language) {
  * Check if a language is supported for syntax highlighting
  */
 export function isLanguageSupported(language) {
-    const supported = [
-        'javascript',
-        'typescript',
-        'html',
-        'css',
-        'json',
-        'markdown',
-        'python',
-        'go',
-        'rust',
-        'java',
-        'cpp',
-        'sql',
-        'xml',
-        'yaml',
-        'php'
-    ];
-    return supported.includes(language);
+    return getTokenizerSupportedLanguages().includes(resolveLanguage(language));
+}
+/**
+ * Get languages with real syntax tokenizers.
+ */
+export function getSupportedLanguages() {
+    return getTokenizerSupportedLanguages();
 }
 /**
  * Get display name for a language

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nocturnium/svelte-ide",
-	"version": "1.0.2",
+	"version": "1.0.4",
 	"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",

package/dist/components/editor/MinimalEditor.svelte

@@ -1,75 +0,0 @@
-<script lang="ts">
-	// Minimal editor to debug cursor issue
-	interface Props {
-		content: string;
-	}
-
-	let { content }: Props = $props();
-	const lines = $derived(content.split('\n'));
-</script>
-
-<div class="editor">
-	<div class="editor__content">
-		<div class="editor__lines">
-			{#each lines as line, i (i)}
-				<div class="editor__line">
-					<div class="editor__gutter">
-						<span class="editor__line-number">{i + 1}</span>
-					</div>
-					<div class="editor__line-content">{line || '\u00A0'}</div>
-				</div>
-			{/each}
-		</div>
-	</div>
-</div>
-
-<style>
-	.editor {
-		position: relative;
-		width: 100%;
-		height: 100%;
-		background: #0d1421;
-		font-family: monospace;
-		font-size: 14px;
-	}
-
-	.editor__content {
-		position: relative;
-		width: 100%;
-		height: 100%;
-		overflow: auto;
-		cursor: default;
-	}
-
-	.editor__lines {
-		position: relative;
-		min-height: 100%;
-	}
-
-	.editor__line {
-		display: flex;
-		line-height: 20px;
-		cursor: default;
-	}
-
-	.editor__gutter {
-		width: 50px;
-		background: #1a2744;
-		text-align: right;
-		padding-right: 8px;
-		user-select: none;
-		cursor: default;
-	}
-
-	.editor__line-number {
-		color: #666;
-		cursor: default;
-	}
-
-	.editor__line-content {
-		flex: 1;
-		padding-left: 8px;
-		color: #e8e8f0;
-		cursor: text;
-	}
-</style>

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

@@ -1,6 +0,0 @@
-interface Props {
-    content: string;
-}
-declare const MinimalEditor: import("svelte").Component<Props, {}, "">;
-type MinimalEditor = ReturnType<typeof MinimalEditor>;
-export default MinimalEditor;

package/dist/components/editor/MinimalEditor2.svelte

@@ -1,84 +0,0 @@
-<script lang="ts">
-	// Minimal editor with CSS variables like CustomEditor
-	interface Props {
-		content: string;
-	}
-
-	let { content }: Props = $props();
-	const lines = $derived(content.split('\n'));
-</script>
-
-<div class="custom-editor">
-	<div class="custom-editor__content">
-		<div class="custom-editor__lines">
-			{#each lines as line, i (i)}
-				<div class="custom-editor__line">
-					<div class="custom-editor__gutter">
-						<span class="custom-editor__line-number">{i + 1}</span>
-					</div>
-					<div class="custom-editor__line-content">{line || '\u00A0'}</div>
-				</div>
-			{/each}
-		</div>
-	</div>
-</div>
-
-<style>
-	.custom-editor {
-		position: relative;
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-		background: var(--ide-bg-primary);
-		font-family: var(--ide-font-mono);
-		font-size: 14px;
-	}
-
-	.custom-editor__content {
-		position: relative;
-		width: 100%;
-		height: 100%;
-		overflow: auto;
-		cursor: default;
-	}
-
-	.custom-editor__lines {
-		position: relative;
-		min-height: 100%;
-		z-index: 2;
-	}
-
-	.custom-editor__line {
-		display: flex;
-		line-height: 20px;
-		min-height: 20px;
-		cursor: default;
-	}
-
-	.custom-editor__gutter {
-		position: sticky;
-		left: 0;
-		width: 50px;
-		min-width: 50px;
-		background: var(--ide-bg-secondary);
-		border-right: 1px solid var(--ide-border);
-		text-align: right;
-		padding-right: 8px;
-		user-select: none;
-		cursor: default;
-		z-index: 3;
-	}
-
-	.custom-editor__line-number {
-		color: var(--ide-text-muted);
-		cursor: default;
-	}
-
-	.custom-editor__line-content {
-		flex: 1;
-		white-space: pre;
-		padding-left: 8px;
-		color: var(--ide-text-primary);
-		cursor: text;
-	}
-</style>

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

@@ -1,6 +0,0 @@
-interface Props {
-    content: string;
-}
-declare const MinimalEditor2: import("svelte").Component<Props, {}, "">;
-type MinimalEditor2 = ReturnType<typeof MinimalEditor2>;
-export default MinimalEditor2;