@nocturnium/svelte-ide 1.0.0-rc.1

package/dist/components/lsp/SignatureHelpWidget.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+	/**
+	 * SignatureHelpWidget - LSP function signature display
+	 *
+	 * Shows function signatures with parameter highlighting when
+	 * the user is typing function arguments.
+	 */
+
+	import type { SignatureHelp, SignatureInformation, ParameterInformation } from '../../types/lsp';
+
+	interface Props {
+		/** Signature help data from LSP */
+		signatureHelp: SignatureHelp;
+		/** Position to render the widget */
+		position: { x: number; y: number };
+		/** Called when widget should close */
+		onDismiss: () => void;
+		class?: string;
+	}
+
+	let {
+		signatureHelp,
+		position,
+		onDismiss,
+		class: className = ''
+	}: Props = $props();
+
+	let activeSignature = $derived(
+		signatureHelp.signatures[signatureHelp.activeSignature ?? 0] as SignatureInformation | undefined
+	);
+
+	let activeParameterIndex = $derived(
+		signatureHelp.activeParameter ?? activeSignature?.activeParameter ?? 0
+	);
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			onDismiss();
+		}
+	}
+
+	function getParameterLabel(param: ParameterInformation): string {
+		if (typeof param.label === 'string') {
+			return param.label;
+		}
+		// It's a tuple [start, end] - extract from signature
+		if (activeSignature) {
+			const [start, end] = param.label;
+			return activeSignature.label.substring(start, end);
+		}
+		return '';
+	}
+
+	function parseSignatureLabel(sig: SignatureInformation): { before: string; param: string; after: string } {
+		const params = sig.parameters;
+		if (!params || params.length === 0 || activeParameterIndex >= params.length) {
+			return { before: sig.label, param: '', after: '' };
+		}
+
+		const activeParam = params[activeParameterIndex];
+		const paramLabel = getParameterLabel(activeParam);
+
+		if (typeof activeParam.label === 'string') {
+			// Find the parameter in the signature label
+			const paramIndex = sig.label.indexOf(paramLabel);
+			if (paramIndex === -1) {
+				return { before: sig.label, param: '', after: '' };
+			}
+			return {
+				before: sig.label.substring(0, paramIndex),
+				param: paramLabel,
+				after: sig.label.substring(paramIndex + paramLabel.length)
+			};
+		} else {
+			// Tuple label [start, end]
+			const [start, end] = activeParam.label;
+			return {
+				before: sig.label.substring(0, start),
+				param: sig.label.substring(start, end),
+				after: sig.label.substring(end)
+			};
+		}
+	}
+
+	function getParameterDocumentation(param: ParameterInformation): string | undefined {
+		if (!param.documentation) return undefined;
+		if (typeof param.documentation === 'string') return param.documentation;
+		return param.documentation.value;
+	}
+
+	function getSignatureDocumentation(sig: SignatureInformation): string | undefined {
+		if (!sig.documentation) return undefined;
+		if (typeof sig.documentation === 'string') return sig.documentation;
+		return sig.documentation.value;
+	}
+</script>
+
+<svelte:window onkeydown={handleKeyDown} />
+
+<div
+	class="signature-help {className}"
+	style="left: {position.x}px; top: {position.y}px;"
+	role="tooltip"
+	aria-label="Signature help"
+>
+	{#if signatureHelp.signatures.length > 1}
+		<div class="signature-help__nav">
+			<span class="signature-help__nav-text">
+				{(signatureHelp.activeSignature ?? 0) + 1} of {signatureHelp.signatures.length}
+			</span>
+		</div>
+	{/if}
+
+	{#if activeSignature}
+		{@const parsed = parseSignatureLabel(activeSignature)}
+		<div class="signature-help__signature">
+			<code class="signature-help__label">
+				<span class="signature-help__label-before">{parsed.before}</span><span class="signature-help__label-param">{parsed.param}</span><span class="signature-help__label-after">{parsed.after}</span>
+			</code>
+		</div>
+
+		{#if activeSignature.parameters && activeSignature.parameters[activeParameterIndex]}
+			{@const paramDoc = getParameterDocumentation(activeSignature.parameters[activeParameterIndex])}
+			{#if paramDoc}
+				<div class="signature-help__param-doc">
+					<span class="signature-help__param-name">
+						{getParameterLabel(activeSignature.parameters[activeParameterIndex])}:
+					</span>
+					<span class="signature-help__param-desc">{paramDoc}</span>
+				</div>
+			{/if}
+		{/if}
+
+		{#if getSignatureDocumentation(activeSignature)}
+			<div class="signature-help__doc">
+				{getSignatureDocumentation(activeSignature)}
+			</div>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.signature-help {
+		position: fixed;
+		z-index: 1001;
+		background: var(--ide-bg-secondary);
+		border: 1px solid var(--ide-border);
+		border-radius: var(--ide-radius-md);
+		box-shadow: var(--ide-shadow-lg);
+		min-width: 200px;
+		max-width: 600px;
+		font-size: var(--ide-font-size-sm);
+	}
+
+	.signature-help__nav {
+		padding: var(--ide-spacing-xs) var(--ide-spacing-sm);
+		border-bottom: 1px solid var(--ide-border);
+		background: var(--ide-bg-tertiary);
+	}
+
+	.signature-help__nav-text {
+		font-size: var(--ide-font-size-xs);
+		color: var(--ide-text-muted);
+	}
+
+	.signature-help__signature {
+		padding: var(--ide-spacing-sm);
+	}
+
+	.signature-help__label {
+		font-family: var(--ide-font-mono);
+		font-size: var(--ide-font-size-sm);
+		color: var(--ide-text-primary);
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+
+	.signature-help__label-before,
+	.signature-help__label-after {
+		color: var(--ide-text-secondary);
+	}
+
+	.signature-help__label-param {
+		color: var(--ide-interactive);
+		font-weight: 600;
+		background: color-mix(in srgb, var(--ide-interactive) 15%, transparent);
+		padding: 0 2px;
+		border-radius: 2px;
+	}
+
+	.signature-help__param-doc {
+		padding: var(--ide-spacing-xs) var(--ide-spacing-sm);
+		border-top: 1px solid var(--ide-border);
+		background: var(--ide-bg-tertiary);
+	}
+
+	.signature-help__param-name {
+		font-family: var(--ide-font-mono);
+		font-weight: 600;
+		color: var(--ide-interactive);
+	}
+
+	.signature-help__param-desc {
+		color: var(--ide-text-secondary);
+		margin-left: var(--ide-spacing-xs);
+	}
+
+	.signature-help__doc {
+		padding: var(--ide-spacing-sm);
+		border-top: 1px solid var(--ide-border);
+		color: var(--ide-text-secondary);
+		font-size: var(--ide-font-size-xs);
+		line-height: 1.5;
+	}
+</style>

package/dist/components/lsp/SignatureHelpWidget.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+     * SignatureHelpWidget - LSP function signature display
+     *
+     * Shows function signatures with parameter highlighting when
+     * the user is typing function arguments.
+     */
+import type { SignatureHelp } from '../../types/lsp';
+interface Props {
+    /** Signature help data from LSP */
+    signatureHelp: SignatureHelp;
+    /** Position to render the widget */
+    position: {
+        x: number;
+        y: number;
+    };
+    /** Called when widget should close */
+    onDismiss: () => void;
+    class?: string;
+}
+declare const SignatureHelpWidget: import("svelte").Component<Props, {}, "">;
+type SignatureHelpWidget = ReturnType<typeof SignatureHelpWidget>;
+export default SignatureHelpWidget;

package/dist/components/lsp/index.d.ts

@@ -0,0 +1,6 @@
+export { default as AutocompleteWidget } from './AutocompleteWidget.svelte';
+export { default as HoverTooltip } from './HoverTooltip.svelte';
+export { default as SignatureHelpWidget } from './SignatureHelpWidget.svelte';
+export { default as DiagnosticsPanel } from './DiagnosticsPanel.svelte';
+export { default as DiagnosticMarker } from './DiagnosticMarker.svelte';
+export { default as LSPEditor } from './LSPEditor.svelte';

package/dist/components/lsp/index.js

@@ -0,0 +1,7 @@
+// LSP UI Components
+export { default as AutocompleteWidget } from './AutocompleteWidget.svelte';
+export { default as HoverTooltip } from './HoverTooltip.svelte';
+export { default as SignatureHelpWidget } from './SignatureHelpWidget.svelte';
+export { default as DiagnosticsPanel } from './DiagnosticsPanel.svelte';
+export { default as DiagnosticMarker } from './DiagnosticMarker.svelte';
+export { default as LSPEditor } from './LSPEditor.svelte';

package/dist/components/plugins/PluginCard.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+	import { Button, Icon, Badge } from '../core';
+	import type { PluginStatus } from '../../types';
+
+	interface PluginInfo {
+		id: string;
+		name: string;
+		description: string;
+		version: string;
+		author: string;
+		status: PluginStatus;
+	}
+
+	interface Props {
+		plugin: PluginInfo;
+		installed?: boolean;
+		showStatus?: boolean;
+		onInstall?: () => void;
+		onUninstall?: () => void;
+	}
+
+	let {
+		plugin,
+		installed = false,
+		showStatus = false,
+		onInstall,
+		onUninstall
+	}: Props = $props();
+
+	function getStatusVariant(
+		status: PluginStatus
+	): 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' {
+		switch (status) {
+			case 'draft':
+				return 'default';
+			case 'submitted':
+			case 'reviewing':
+				return 'warning';
+			case 'approved':
+			case 'testing':
+				return 'info';
+			case 'deploying':
+			case 'deployed':
+				return 'success';
+			case 'rejected':
+			case 'rolled_back':
+				return 'error';
+			default:
+				return 'default';
+		}
+	}
+</script>
+
+<div class="plugin-card">
+	<div class="plugin-card__info">
+		<div class="plugin-card__header">
+			<span class="plugin-card__name">{plugin.name}</span>
+			<span class="plugin-card__version">v{plugin.version}</span>
+		</div>
+		<p class="plugin-card__description">{plugin.description}</p>
+		<div class="plugin-card__meta">
+			<span class="plugin-card__author">
+				<Icon name="user" size={10} />
+				{plugin.author}
+			</span>
+			{#if showStatus}
+				<Badge variant={getStatusVariant(plugin.status)} size="sm">
+					{plugin.status}
+				</Badge>
+			{/if}
+		</div>
+	</div>
+	<div class="plugin-card__actions">
+		{#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>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.plugin-card {
+		display: flex;
+		gap: var(--ide-spacing-md);
+		padding: var(--ide-spacing-md);
+		background: var(--ide-bg-secondary);
+		border: 1px solid var(--ide-border);
+		border-radius: var(--ide-radius-md);
+		transition: border-color var(--ide-transition-fast);
+	}
+
+	.plugin-card:hover {
+		border-color: var(--ide-interactive);
+	}
+
+	.plugin-card__info {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.plugin-card__header {
+		display: flex;
+		align-items: baseline;
+		gap: var(--ide-spacing-sm);
+		margin-bottom: var(--ide-spacing-xs);
+	}
+
+	.plugin-card__name {
+		font-size: var(--ide-font-size-sm);
+		font-weight: 600;
+		color: var(--ide-text-primary);
+	}
+
+	.plugin-card__version {
+		font-size: var(--ide-font-size-xs);
+		color: var(--ide-text-muted);
+	}
+
+	.plugin-card__description {
+		margin: 0 0 var(--ide-spacing-sm);
+		font-size: var(--ide-font-size-xs);
+		color: var(--ide-text-secondary);
+		line-height: var(--ide-line-height-normal);
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	.plugin-card__meta {
+		display: flex;
+		align-items: center;
+		gap: var(--ide-spacing-md);
+	}
+
+	.plugin-card__author {
+		display: flex;
+		align-items: center;
+		gap: var(--ide-spacing-xs);
+		font-size: 10px;
+		color: var(--ide-text-muted);
+	}
+
+	.plugin-card__actions {
+		display: flex;
+		align-items: flex-start;
+	}
+</style>

package/dist/components/plugins/PluginCard.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { PluginStatus } from '../../types';
+interface PluginInfo {
+    id: string;
+    name: string;
+    description: string;
+    version: string;
+    author: string;
+    status: PluginStatus;
+}
+interface Props {
+    plugin: PluginInfo;
+    installed?: boolean;
+    showStatus?: boolean;
+    onInstall?: () => void;
+    onUninstall?: () => void;
+}
+declare const PluginCard: import("svelte").Component<Props, {}, "">;
+type PluginCard = ReturnType<typeof PluginCard>;
+export default PluginCard;

package/dist/components/plugins/PluginPanel.svelte

@@ -0,0 +1,280 @@
+<script lang="ts">
+	import { Button, Icon, Badge, Spinner } from '../core';
+	import {
+		getProposals,
+		getDeployedProposals,
+		getLoadingProposals,
+		connect,
+		disconnect,
+		getConnected,
+		fetchProposals,
+		loadPlugin,
+		unloadPlugin,
+		getInstances,
+		getError
+	} from '../../stores/plugin.svelte';
+	import PluginCard from './PluginCard.svelte';
+	import PluginProposalForm from './PluginProposalForm.svelte';
+
+	interface Props {
+		class?: string;
+		/** Tab shown first when the panel mounts. Defaults to 'installed'. */
+		initialTab?: 'installed' | 'available' | 'proposals';
+	}
+
+	let { class: className = '', initialTab = 'installed' }: Props = $props();
+
+	let showCreateForm = $state(false);
+	// initialTab is intentionally a one-time seed for the starting tab.
+	// svelte-ignore state_referenced_locally
+	let activeTab = $state<'installed' | 'available' | 'proposals'>(initialTab);
+
+	$effect(() => {
+		// Connect to event stream on mount
+		connect();
+		fetchProposals();
+
+		return () => {
+			disconnect();
+		};
+	});
+
+	const installedPlugins = $derived(getInstances().filter((i) => i.status === 'active'));
+	const availablePlugins = $derived(
+		getDeployedProposals().filter((p) => !getInstances().some((i) => i.id === p.id))
+	);
+</script>
+
+<div class="plugin-panel {className}">
+	<div class="plugin-panel__header">
+		<div class="plugin-panel__title">
+			<Icon name="plugin" size={16} />
+			<span>Extensions</span>
+			{#if getConnected()}
+				<Badge variant="success" size="sm" dot>Live</Badge>
+			{/if}
+		</div>
+		<Button variant="ghost" size="xs" onclick={() => (showCreateForm = true)}>
+			{#snippet icon()}<Icon name="plus" size={14} />{/snippet}
+			New
+		</Button>
+	</div>
+
+	<!-- Tabs -->
+	<div class="plugin-panel__tabs">
+		<button
+			class="plugin-panel__tab"
+			class:plugin-panel__tab--active={activeTab === 'installed'}
+			onclick={() => (activeTab = 'installed')}
+		>
+			Installed
+			{#if installedPlugins.length > 0}
+				<Badge variant="primary" size="sm">{installedPlugins.length}</Badge>
+			{/if}
+		</button>
+		<button
+			class="plugin-panel__tab"
+			class:plugin-panel__tab--active={activeTab === 'available'}
+			onclick={() => (activeTab = 'available')}
+		>
+			Available
+			{#if availablePlugins.length > 0}
+				<Badge variant="default" size="sm">{availablePlugins.length}</Badge>
+			{/if}
+		</button>
+		<button
+			class="plugin-panel__tab"
+			class:plugin-panel__tab--active={activeTab === 'proposals'}
+			onclick={() => (activeTab = 'proposals')}
+		>
+			Proposals
+			{#if getProposals().length > 0}
+				<Badge variant="warning" size="sm">{getProposals().length}</Badge>
+			{/if}
+		</button>
+	</div>
+
+	<!-- Content -->
+	<div class="plugin-panel__content">
+		{#if getLoadingProposals()}
+			<div class="plugin-panel__loading">
+				<Spinner size="md" />
+				<span>Loading plugins...</span>
+			</div>
+		{:else if getError()}
+			<div class="plugin-panel__error">
+				<Icon name="error" size={24} />
+				<span>{getError()}</span>
+				<Button variant="ghost" size="sm" onclick={fetchProposals}>Retry</Button>
+			</div>
+		{:else if activeTab === 'installed'}
+			{#if installedPlugins.length === 0}
+				<div class="plugin-panel__empty">
+					<Icon name="plugin" size={32} />
+					<p>No plugins installed</p>
+					<Button variant="secondary" size="sm" onclick={() => (activeTab = 'available')}>
+						Browse Available
+					</Button>
+				</div>
+			{:else}
+				<div class="plugin-panel__list">
+					{#each installedPlugins as instance (instance.id)}
+						<PluginCard
+							plugin={{
+								id: instance.id,
+								name: instance.manifest.name,
+								description: instance.manifest.description,
+								version: instance.manifest.version,
+								author: instance.manifest.author,
+								status: 'deployed'
+							}}
+							installed
+							onUninstall={() => unloadPlugin(instance.id)}
+						/>
+					{/each}
+				</div>
+			{/if}
+		{:else if activeTab === 'available'}
+			{#if availablePlugins.length === 0}
+				<div class="plugin-panel__empty">
+					<Icon name="search" size={32} />
+					<p>No plugins available</p>
+				</div>
+			{:else}
+				<div class="plugin-panel__list">
+					{#each availablePlugins as proposal (proposal.id)}
+						<PluginCard
+							plugin={{
+								id: proposal.id,
+								name: proposal.name,
+								description: proposal.description,
+								version: `${proposal.version}.0.0`,
+								author: proposal.author,
+								status: proposal.status
+							}}
+							onInstall={() => loadPlugin(proposal.id)}
+						/>
+					{/each}
+				</div>
+			{/if}
+		{:else if activeTab === 'proposals'}
+			{#if getProposals().length === 0}
+				<div class="plugin-panel__empty">
+					<Icon name="file" size={32} />
+					<p>No proposals yet</p>
+					<Button variant="primary" size="sm" onclick={() => (showCreateForm = true)}>
+						Create Plugin
+					</Button>
+				</div>
+			{:else}
+				<div class="plugin-panel__list">
+					{#each getProposals() as proposal (proposal.id)}
+						<PluginCard
+							plugin={{
+								id: proposal.id,
+								name: proposal.name,
+								description: proposal.description,
+								version: `${proposal.version}.0.0`,
+								author: proposal.author,
+								status: proposal.status
+							}}
+							showStatus
+						/>
+					{/each}
+				</div>
+			{/if}
+		{/if}
+	</div>
+
+	<!-- Create Form Modal -->
+	{#if showCreateForm}
+		<PluginProposalForm onClose={() => (showCreateForm = false)} />
+	{/if}
+</div>
+
+<style>
+	.plugin-panel {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		background: var(--ide-bg-primary);
+	}
+
+	.plugin-panel__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--ide-spacing-sm) var(--ide-spacing-md);
+		border-bottom: 1px solid var(--ide-border);
+	}
+
+	.plugin-panel__title {
+		display: flex;
+		align-items: center;
+		gap: var(--ide-spacing-sm);
+		font-size: var(--ide-font-size-sm);
+		font-weight: 600;
+		color: var(--ide-text-primary);
+	}
+
+	.plugin-panel__tabs {
+		display: flex;
+		border-bottom: 1px solid var(--ide-border);
+	}
+
+	.plugin-panel__tab {
+		display: flex;
+		align-items: center;
+		gap: var(--ide-spacing-xs);
+		flex: 1;
+		padding: var(--ide-spacing-sm);
+		font-family: var(--ide-font-sans);
+		font-size: var(--ide-font-size-xs);
+		font-weight: 500;
+		color: var(--ide-text-secondary);
+		background: transparent;
+		border: none;
+		border-bottom: 2px solid transparent;
+		cursor: pointer;
+		transition: all var(--ide-transition-fast);
+	}
+
+	.plugin-panel__tab:hover {
+		color: var(--ide-text-primary);
+		background: var(--ide-bg-hover);
+	}
+
+	.plugin-panel__tab--active {
+		color: var(--ide-interactive);
+		border-bottom-color: var(--ide-interactive);
+	}
+
+	.plugin-panel__content {
+		flex: 1;
+		overflow-y: auto;
+	}
+
+	.plugin-panel__loading,
+	.plugin-panel__error,
+	.plugin-panel__empty {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: var(--ide-spacing-md);
+		height: 100%;
+		text-align: center;
+		color: var(--ide-text-muted);
+	}
+
+	.plugin-panel__error {
+		color: var(--ide-error);
+	}
+
+	.plugin-panel__list {
+		padding: var(--ide-spacing-md);
+		display: flex;
+		flex-direction: column;
+		gap: var(--ide-spacing-sm);
+	}
+</style>