@nocturnium/svelte-ide 1.3.0 → 1.5.0

package/dist/components/editor/core/organize-imports.js

@@ -0,0 +1,249 @@
+import { resolveLanguage } from '../tokenizer';
+const SUPPORTED_LANGUAGES = new Set(['javascript', 'typescript', 'jsx', 'tsx']);
+const IDENT = '[A-Za-z_$][\\w$]*';
+/**
+ * Plan an "organize imports" rewrite of the leading import block: sort the
+ * statements by module path, sort the named specifiers within each, and drop
+ * exact-duplicate statements. PURE — no editor mutation.
+ *
+ * Safe-or-refuse: this build only touches a contiguous run of single-line
+ * `import … from '…'` statements at the top of the file. It refuses (rather than
+ * risk changing behavior) on side-effect imports, multi-line imports, comments
+ * interleaved in the block, or any statement it cannot fully parse.
+ */
+export function planOrganizeImports(input) {
+    try {
+        return planOrganizeImportsUnsafe(input);
+    }
+    catch {
+        return { ok: false, reason: 'Could not safely parse the imports; leaving them untouched.' };
+    }
+}
+function planOrganizeImportsUnsafe(input) {
+    const language = resolveLanguage(input.language);
+    if (!SUPPORTED_LANGUAGES.has(language)) {
+        return { ok: false, reason: 'Organize imports supports JavaScript/TypeScript only.' };
+    }
+    const lines = input.lines.map((line) => line.text);
+    // Find the first import statement; everything above it (license headers,
+    // blank lines, leading comments) is left untouched.
+    const firstImport = lines.findIndex((text) => /^\s*import\b/.test(text));
+    if (firstImport === -1) {
+        return { ok: false, reason: 'No imports to organize.' };
+    }
+    // Walk the contiguous leading run: import lines and blank lines. A comment
+    // ENDS the run unless another import follows it — only a comment BETWEEN two
+    // imports is the unsupported "interleaved" case. A trailing body comment (a
+    // section header, the first JSDoc) is just the end of the block and must not
+    // make organize refuse.
+    let lastImport = firstImport;
+    const importLineIndices = [];
+    let sawCommentInRun = false;
+    let commentBetweenImports = false;
+    for (let i = firstImport; i < lines.length; i++) {
+        const text = lines[i];
+        if (text.trim().length === 0)
+            continue; // blank lines tolerated inside the run
+        if (isCommentLine(text)) {
+            sawCommentInRun = true;
+            continue;
+        }
+        if (!/^\s*import\b/.test(text))
+            break; // a code line ends the run
+        if (sawCommentInRun)
+            commentBetweenImports = true; // a comment preceded THIS import
+        importLineIndices.push(i);
+        lastImport = i;
+    }
+    if (commentBetweenImports) {
+        return { ok: false, reason: 'Comments between imports are not supported yet.' };
+    }
+    const indent = lines[firstImport].match(/^[\t ]*/)?.[0] ?? '';
+    const parsed = [];
+    for (const i of importLineIndices) {
+        const text = lines[i];
+        if (!hasBalancedBraces(text)) {
+            return { ok: false, reason: 'Multi-line imports are not supported yet.' };
+        }
+        if (isSideEffectImport(text)) {
+            return {
+                ok: false,
+                reason: 'Side-effect imports present; not reordering to preserve evaluation order.'
+            };
+        }
+        const imp = parseImport(text);
+        if (!imp) {
+            return { ok: false, reason: 'Could not safely parse the imports; leaving them untouched.' };
+        }
+        parsed.push(imp);
+    }
+    const emitted = parsed.map((imp) => `${indent}${emitImport(imp)}`);
+    const deduped = dedupe([...emitted.keys()]
+        .sort((a, b) => compareImport(parsed[a], parsed[b], emitted[a], emitted[b]))
+        .map((index) => emitted[index]));
+    const newText = deduped.join('\n');
+    const originalText = lines.slice(firstImport, lastImport + 1).join('\n');
+    if (newText === originalText) {
+        return { ok: false, reason: 'Imports are already organized.' };
+    }
+    return { ok: true, startLine: firstImport, endLine: lastImport, newText };
+}
+/**
+ * Organize the editor's leading import block as a SINGLE undo step. On refusal
+ * the editor is untouched and the reason is returned.
+ */
+export function organizeImportsAt(editor) {
+    const plan = planOrganizeImports({
+        lines: editor.lines.map((line) => ({ text: line.text })),
+        language: editor.language
+    });
+    if (!plan.ok)
+        return plan;
+    const endCol = editor.getLine(plan.endLine)?.text.length ?? 0;
+    editor.transact((tx) => {
+        tx.delete({ line: plan.startLine, column: 0 }, { line: plan.endLine, column: endCol });
+        tx.insert({ line: plan.startLine, column: 0 }, plan.newText);
+    });
+    const lastLineLength = plan.newText.split('\n').at(-1)?.length ?? 0;
+    const lastLine = plan.startLine + plan.newText.split('\n').length - 1;
+    editor.setCursor({ line: lastLine, column: lastLineLength });
+    return { ok: true };
+}
+function isCommentLine(text) {
+    const t = text.trim();
+    return t.startsWith('//') || t.startsWith('/*') || t.startsWith('*');
+}
+function hasBalancedBraces(text) {
+    let brace = 0;
+    for (const ch of text) {
+        if (ch === '{')
+            brace++;
+        else if (ch === '}')
+            brace--;
+        if (brace < 0)
+            return false;
+    }
+    return brace === 0;
+}
+function isSideEffectImport(text) {
+    return new RegExp(`^\\s*import\\s*(['"])[^'"]+\\1\\s*;?\\s*$`).test(text);
+}
+function parseImport(text) {
+    const trimmed = text.trim().replace(/;\s*$/, '');
+    const sourceMatch = trimmed.match(/\bfrom\s*(['"])([^'"]+)\1$/);
+    if (!sourceMatch)
+        return null;
+    const quote = sourceMatch[1];
+    const source = sourceMatch[2];
+    let clause = trimmed.slice('import'.length, trimmed.length - sourceMatch[0].length).trim();
+    if (clause.length === 0)
+        return null; // `import from 'x'` is invalid
+    // `import type { … }` / `import type Foo from …` / `import type * as ns` is
+    // type-only. But `import type from 'x'` and `import type, { a }` are DEFAULT
+    // imports named `type`, so only treat it as type-only when `type` is followed
+    // by a real clause start (`{`, `*`, or an identifier) — NOT a comma.
+    let typeOnly = false;
+    if (/^type\s+[{*A-Za-z_$]/.test(clause)) {
+        typeOnly = true;
+        clause = clause.replace(/^type\s+/, '').trim();
+    }
+    let named;
+    const braceMatch = clause.match(/\{([^}]*)\}/);
+    if (braceMatch) {
+        const parsedNamed = parseNamed(braceMatch[1]);
+        if (!parsedNamed)
+            return null;
+        named = parsedNamed;
+        const at = braceMatch.index ?? 0;
+        clause = (clause.slice(0, at) + clause.slice(at + braceMatch[0].length)).trim();
+        clause = clause.replace(/^,|,$/g, '').trim();
+    }
+    let defaultImport;
+    let namespace;
+    const remainders = clause
+        .split(',')
+        .map((part) => part.trim())
+        .filter(Boolean);
+    for (const part of remainders) {
+        const nsMatch = part.match(new RegExp(`^\\*\\s+as\\s+(${IDENT})$`));
+        if (nsMatch) {
+            if (namespace)
+                return null; // two namespace clauses is invalid
+            namespace = nsMatch[1];
+            continue;
+        }
+        if (new RegExp(`^${IDENT}$`).test(part)) {
+            if (defaultImport)
+                return null; // `import A, B from …` is invalid JS
+            defaultImport = part;
+            continue;
+        }
+        return null; // unrecognized clause fragment
+    }
+    if (!defaultImport && !namespace && !named)
+        return null;
+    // A namespace import cannot be combined with a named clause (`* as ns, { a }`
+    // and `d, * as ns, { a }` are SyntaxErrors). Refuse rather than re-emit them.
+    if (namespace && named)
+        return null;
+    return { source, quote, typeOnly, defaultImport, namespace, named };
+}
+function parseNamed(inner) {
+    const specs = [];
+    for (const raw of inner.split(',')) {
+        const spec = raw.trim();
+        if (spec.length === 0)
+            continue;
+        let body = spec;
+        let typeOnly = false;
+        const typeMatch = body.match(new RegExp(`^type\\s+(.*)$`));
+        if (typeMatch) {
+            typeOnly = true;
+            body = typeMatch[1].trim();
+        }
+        const aliasMatch = body.match(new RegExp(`^(${IDENT})\\s+as\\s+(${IDENT})$`));
+        if (aliasMatch) {
+            specs.push({ name: aliasMatch[1], alias: aliasMatch[2], typeOnly });
+            continue;
+        }
+        if (new RegExp(`^${IDENT}$`).test(body)) {
+            specs.push({ name: body, typeOnly });
+            continue;
+        }
+        return null;
+    }
+    return specs;
+}
+function emitImport(imp) {
+    const parts = [];
+    if (imp.defaultImport)
+        parts.push(imp.defaultImport);
+    if (imp.namespace)
+        parts.push(`* as ${imp.namespace}`);
+    if (imp.named) {
+        const specs = [...imp.named]
+            .sort((a, b) => compareName(a.name, b.name))
+            .map((n) => `${n.typeOnly ? 'type ' : ''}${n.name}${n.alias ? ` as ${n.alias}` : ''}`);
+        // An import with ONLY an empty `{}` is preserved as `{}` (valid, rare).
+        parts.push(`{ ${specs.join(', ')} }`);
+    }
+    const clause = parts.join(', ');
+    return `import ${imp.typeOnly ? 'type ' : ''}${clause} from ${imp.quote}${imp.source}${imp.quote};`;
+}
+function compareName(a, b) {
+    return a.toLowerCase().localeCompare(b.toLowerCase()) || a.localeCompare(b);
+}
+function compareImport(a, b, aLine, bLine) {
+    return compareName(a.source, b.source) || aLine.localeCompare(bLine);
+}
+function dedupe(sortedLines) {
+    const seen = new Set();
+    const out = [];
+    for (const line of sortedLines) {
+        if (seen.has(line))
+            continue;
+        seen.add(line);
+        out.push(line);
+    }
+    return out;
+}

package/dist/components/editor/core/snippet-manager.js

@@ -18,7 +18,7 @@ const JS_SNIPPETS = [
         prefix: 'log',
         body: 'console.log($1);$0',
         description: 'Log to console',
-        languages: ['javascript', 'typescript', 'javascriptreact', 'typescriptreact'],
+        languages: ['javascript', 'typescript'],
         category: 'Debug',
         isUserDefined: false,
         usageCount: 0,
@@ -42,7 +42,7 @@ const JS_SNIPPETS = [
         prefix: 'af',
         body: 'const ${1:name} = (${2:params}) => {\n\t$0\n};',
         description: 'Arrow function',
-        languages: ['javascript', 'typescript', 'javascriptreact', 'typescriptreact'],
+        languages: ['javascript', 'typescript'],
         category: 'Functions',
         isUserDefined: false,
         usageCount: 0,
@@ -126,7 +126,7 @@ const JS_SNIPPETS = [
         prefix: 'imp',
         body: "import { $2 } from '$1';$0",
         description: 'Named import',
-        languages: ['javascript', 'typescript', 'javascriptreact', 'typescriptreact'],
+        languages: ['javascript', 'typescript'],
         category: 'Modules',
         isUserDefined: false,
         usageCount: 0,

package/dist/components/plugins/PluginCard.svelte

@@ -68,7 +68,9 @@
 		{#if installed}
 			<Button variant="danger" size="xs" onclick={onUninstall}>Uninstall</Button>
 		{:else if plugin.status === 'deployed'}
-			<Button variant="primary" size="xs" onclick={onInstall}>Install</Button>
+			<Button variant="primary" size="xs" class="plugin-card__install" onclick={onInstall}>
+				Install
+			</Button>
 		{/if}
 	</div>
 </div>
@@ -141,4 +143,22 @@
 		display: flex;
 		align-items: flex-start;
 	}
+
+	/*
+	 * Install CTA: keep the embedded panel in ONE accent story (wave-blue),
+	 * instead of the ember-orange `primary` fill competing with the surrounding
+	 * blue chrome. White-on-blue uses --ide-interactive-strong (deep ocean) for
+	 * AA-safe contrast (~5.3:1), not the lighter wave (~3.4:1, fails AA). The
+	 * accent stays BLUE per the owner brand decision.
+	 */
+	.plugin-card__actions :global(.ide-button.plugin-card__install) {
+		background: var(--ide-interactive-strong);
+		color: #fff;
+		border-color: var(--ide-interactive-strong);
+	}
+
+	.plugin-card__actions :global(.ide-button.plugin-card__install:hover:not(:disabled)) {
+		background: color-mix(in srgb, var(--ide-interactive-strong) 88%, white);
+		border-color: color-mix(in srgb, var(--ide-interactive-strong) 88%, white);
+	}
 </style>

package/dist/components/plugins/PluginPanel.svelte

@@ -54,7 +54,13 @@
 				<Badge variant="success" size="sm" dot>Live</Badge>
 			{/if}
 		</div>
-		<Button variant="ghost" size="xs" onclick={() => (showCreateForm = true)}>
+		<Button
+			variant="ghost"
+			size="xs"
+			title="Demo only — the create-proposal flow is illustrative on this static host"
+			aria-label="New plugin proposal (demo only)"
+			onclick={() => (showCreateForm = true)}
+		>
 			{#snippet icon()}<Icon name="plus" size={14} />{/snippet}
 			New
 		</Button>
@@ -110,7 +116,9 @@
 		{:else if activeTab === 'installed'}
 			{#if installedPlugins.length === 0}
 				<div class="plugin-panel__empty">
-					<Icon name="plugin" size={32} />
+					<!-- Static container glyph, not the radial `plugin` spoke (which mirrors
+					     the `loading` glyph and reads as a spinner over this empty copy). -->
+					<Icon name="folder" size={32} />
 					<p>No plugins installed</p>
 					<Button variant="secondary" size="sm" onclick={() => (activeTab = 'available')}>
 						Browse Available
@@ -162,7 +170,13 @@
 				<div class="plugin-panel__empty">
 					<Icon name="file" size={32} />
 					<p>No proposals yet</p>
-					<Button variant="primary" size="sm" onclick={() => (showCreateForm = true)}>
+					<Button
+						variant="primary"
+						size="sm"
+						title="Demo only — the create-proposal flow is illustrative on this static host"
+						aria-label="Create plugin proposal (demo only)"
+						onclick={() => (showCreateForm = true)}
+					>
 						Create Plugin
 					</Button>
 				</div>

package/dist/styles/theme.css

@@ -64,12 +64,19 @@
 	--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;
+	/* Deeper blue for FILLED active/selected states paired with white text:
+	   white on --ide-interactive (#4a8db7) is only ~3.4:1, below WCAG AA; white on
+	   this ocean blue (#2d5a7b) is ~5.3:1. Use for active pills/toggles/tabs. */
+	--ide-interactive-strong: var(--color-nocturnium-ocean);
 
 	/* 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);
+	/* Primary hover is a controlled lift of the SAME ember (one deliberate primary),
+	   not a jump to the separate flame hue — keeps the action color cohesive and
+	   keeps dark-ink (--ide-text-inverse) label contrast comfortably above AA. */
+	--ide-primary-hover: color-mix(in srgb, var(--ide-primary) 85%, white);
 
 	/* IDE Accent Colors */
 	--ide-accent: var(--color-nocturnium-wave);

package/package.json

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