@nocturnium/svelte-ide 1.4.0 → 1.5.0

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.4.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",