@nocturnium/svelte-ide 1.0.0-rc.1

package/dist/components/core/ErrorBoundary.svelte

@@ -0,0 +1,277 @@
+<script lang="ts">
+/**
+ * ErrorBoundary Component
+ *
+ * Catches errors in child components and displays a fallback UI.
+ * Provides retry and recovery options.
+ */
+
+import type { Snippet } from 'svelte';
+import type { VFSError, RecoveryOption } from '../../services/error-handling';
+import { isVFSError } from '../../services/error-handling';
+
+interface Props {
+	children: Snippet;
+	fallback?: Snippet<[{ error: Error; reset: () => void }]>;
+	onError?: (error: Error) => void;
+	onReset?: () => void;
+	showDetails?: boolean;
+}
+
+let { children, fallback, onError, onReset, showDetails = false }: Props = $props();
+
+let error = $state<Error | null>(null);
+let showTechnicalDetails = $state(false);
+
+// Derived error info
+let vfsError = $derived(error && isVFSError(error) ? (error as VFSError) : null);
+let errorTitle = $derived(vfsError?.code ?? 'Error');
+let errorMessage = $derived(vfsError?.userMessage ?? error?.message ?? 'An unexpected error occurred');
+let recoveryOptions = $derived(vfsError?.recoveryOptions ?? []);
+
+function handleError(e: Error) {
+	error = e;
+	onError?.(e);
+}
+
+function reset() {
+	error = null;
+	showTechnicalDetails = false;
+	onReset?.();
+}
+
+function handleRecovery(option: RecoveryOption) {
+	if (option.action === 'retry' || option.action === 'refresh') {
+		reset();
+	}
+	// Other actions would be handled by parent via onError
+}
+
+// Expose error handler for programmatic use
+export function setError(e: Error) {
+	handleError(e);
+}
+
+export function clearError() {
+	reset();
+}
+</script>
+
+{#if error}
+	{#if fallback}
+		{@render fallback({ error, reset })}
+	{:else}
+		<div class="error-boundary" role="alert">
+			<div class="error-content">
+				<div class="error-icon">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="48"
+						height="48"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<circle cx="12" cy="12" r="10" />
+						<line x1="12" y1="8" x2="12" y2="12" />
+						<line x1="12" y1="16" x2="12.01" y2="16" />
+					</svg>
+				</div>
+
+				<h2 class="error-title">{errorTitle}</h2>
+				<p class="error-message">{errorMessage}</p>
+
+				{#if recoveryOptions.length > 0}
+					<div class="recovery-options">
+						{#each recoveryOptions as option}
+							<button
+								class="recovery-btn"
+								class:recommended={option.recommended}
+								class:dangerous={option.dangerous}
+								onclick={() => handleRecovery(option)}
+							>
+								{option.label}
+							</button>
+						{/each}
+					</div>
+				{:else}
+					<div class="recovery-options">
+						<button class="recovery-btn recommended" onclick={reset}>
+							Try Again
+						</button>
+					</div>
+				{/if}
+
+				{#if showDetails && (vfsError?.technicalDetails || error.stack)}
+					<button
+						class="details-toggle"
+						onclick={() => (showTechnicalDetails = !showTechnicalDetails)}
+					>
+						{showTechnicalDetails ? 'Hide' : 'Show'} Technical Details
+					</button>
+
+					{#if showTechnicalDetails}
+						<div class="technical-details">
+							{#if vfsError}
+								<div class="detail-row">
+									<span class="detail-label">Code:</span>
+									<span class="detail-value">{vfsError.code}</span>
+								</div>
+								{#if vfsError.statusCode}
+									<div class="detail-row">
+										<span class="detail-label">Status:</span>
+										<span class="detail-value">{vfsError.statusCode}</span>
+									</div>
+								{/if}
+								{#if vfsError.path}
+									<div class="detail-row">
+										<span class="detail-label">Path:</span>
+										<span class="detail-value">{vfsError.path}</span>
+									</div>
+								{/if}
+							{/if}
+							{#if error.stack}
+								<pre class="stack-trace">{error.stack}</pre>
+							{/if}
+						</div>
+					{/if}
+				{/if}
+			</div>
+		</div>
+	{/if}
+{:else}
+	{@render children()}
+{/if}
+
+<style>
+	.error-boundary {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 200px;
+		padding: 24px;
+		background: var(--ide-bg-primary, #1e1e1e);
+	}
+
+	.error-content {
+		max-width: 480px;
+		text-align: center;
+	}
+
+	.error-icon {
+		color: var(--ide-error, #f44747);
+		margin-bottom: 16px;
+	}
+
+	.error-title {
+		margin: 0 0 8px;
+		font-size: 20px;
+		font-weight: 600;
+		color: var(--ide-text-primary, #e0e0e0);
+	}
+
+	.error-message {
+		margin: 0 0 20px;
+		font-size: 14px;
+		color: var(--ide-text-secondary, #a0a0a0);
+		line-height: 1.5;
+	}
+
+	.recovery-options {
+		display: flex;
+		gap: 8px;
+		justify-content: center;
+		flex-wrap: wrap;
+		margin-bottom: 16px;
+	}
+
+	.recovery-btn {
+		padding: 8px 16px;
+		border: 1px solid var(--ide-border, #3c3c3c);
+		border-radius: 4px;
+		background: var(--ide-bg-secondary, #252526);
+		color: var(--ide-text-primary, #e0e0e0);
+		font-size: 13px;
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.recovery-btn:hover {
+		background: var(--ide-bg-hover, #3c3c3c);
+	}
+
+	.recovery-btn.recommended {
+		background: var(--ide-accent, #569cd6);
+		border-color: var(--ide-accent, #569cd6);
+		color: white;
+	}
+
+	.recovery-btn.recommended:hover {
+		background: var(--ide-accent-hover, #4a8bc4);
+	}
+
+	.recovery-btn.dangerous {
+		border-color: var(--ide-error, #f44747);
+		color: var(--ide-error, #f44747);
+	}
+
+	.recovery-btn.dangerous:hover {
+		background: rgba(244, 71, 71, 0.1);
+	}
+
+	.details-toggle {
+		background: transparent;
+		border: none;
+		color: var(--ide-text-muted, #808080);
+		font-size: 12px;
+		cursor: pointer;
+		text-decoration: underline;
+		margin-bottom: 12px;
+	}
+
+	.details-toggle:hover {
+		color: var(--ide-text-secondary, #a0a0a0);
+	}
+
+	.technical-details {
+		text-align: left;
+		background: var(--ide-bg-secondary, #252526);
+		border: 1px solid var(--ide-border, #3c3c3c);
+		border-radius: 4px;
+		padding: 12px;
+	}
+
+	.detail-row {
+		display: flex;
+		gap: 8px;
+		font-size: 12px;
+		margin-bottom: 4px;
+	}
+
+	.detail-label {
+		color: var(--ide-text-muted, #808080);
+		min-width: 60px;
+	}
+
+	.detail-value {
+		color: var(--ide-text-primary, #e0e0e0);
+		font-family: var(--ide-font-mono, monospace);
+	}
+
+	.stack-trace {
+		margin: 8px 0 0;
+		padding: 8px;
+		background: var(--ide-bg-primary, #1e1e1e);
+		border-radius: 4px;
+		font-family: var(--ide-font-mono, monospace);
+		font-size: 11px;
+		color: var(--ide-text-muted, #808080);
+		white-space: pre-wrap;
+		word-break: break-word;
+		max-height: 200px;
+		overflow: auto;
+	}
+</style>

package/dist/components/core/ErrorBoundary.svelte.d.ts

@@ -0,0 +1,23 @@
+/**
+ * ErrorBoundary Component
+ *
+ * Catches errors in child components and displays a fallback UI.
+ * Provides retry and recovery options.
+ */
+import type { Snippet } from 'svelte';
+interface Props {
+    children: Snippet;
+    fallback?: Snippet<[{
+        error: Error;
+        reset: () => void;
+    }]>;
+    onError?: (error: Error) => void;
+    onReset?: () => void;
+    showDetails?: boolean;
+}
+declare const ErrorBoundary: import("svelte").Component<Props, {
+    setError: (e: Error) => void;
+    clearError: () => void;
+}, "">;
+type ErrorBoundary = ReturnType<typeof ErrorBoundary>;
+export default ErrorBoundary;

package/dist/components/core/Icon.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	interface Props {
+		name: string;
+		size?: number | string;
+		class?: string;
+	}
+
+	let { name, size = 16, class: className = '' }: Props = $props();
+
+	// Icon paths - using simple SVG paths for common icons
+	const icons: Record<string, string> = {
+		// Files
+		file: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM13 3.5L18.5 9H14a1 1 0 0 1-1-1V3.5z',
+		folder: 'M10 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8l-2-2z',
+		'folder-open':
+			'M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2v2M2 11h20l-2 8H4l-2-8z',
+
+		// Actions
+		close: 'M18 6L6 18M6 6l12 12',
+		plus: 'M12 5v14M5 12h14',
+		minus: 'M5 12h14',
+		check: 'M20 6L9 17l-5-5',
+		x: 'M18 6L6 18M6 6l12 12',
+		search: 'M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z',
+		settings: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z',
+		refresh: 'M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15',
+		save: 'M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2zM17 21v-8H7v8M7 3v5h8',
+		copy: 'M20 9h-9a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2zM5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1',
+		trash: 'M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2',
+		edit: 'M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z',
+
+		// Navigation
+		'chevron-right': 'M9 18l6-6-6-6',
+		'chevron-down': 'M6 9l6 6 6-6',
+		'chevron-up': 'M18 15l-6-6-6 6',
+		'chevron-left': 'M15 18l-6-6 6-6',
+		'arrow-left': 'M19 12H5M12 19l-7-7 7-7',
+		'arrow-right': 'M5 12h14M12 5l7 7-7 7',
+		menu: 'M3 12h18M3 6h18M3 18h18',
+
+		// UI
+		sidebar: 'M3 3h18v18H3V3zM9 3v18',
+		terminal: 'M4 17l6-6-6-6M12 19h8',
+		code: 'M16 18l6-6-6-6M8 6l-6 6 6 6',
+		split: 'M12 3v18M3 3h18v18H3z',
+		maximize: 'M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3',
+		minimize: 'M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3',
+
+		// AI
+		sparkles: 'M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8L12 2z',
+		bot: 'M12 8V4H8M12 8a4 4 0 0 0-4 4v6a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-6a4 4 0 0 0-4-4zM9 13h.01M15 13h.01',
+		wand: 'M15 4V2M15 16v-2M8 9h2M20 9h2M17.8 11.8L19 13M17.8 6.2L19 5M12.2 11.8L11 13M12.2 6.2L11 5M12 12l-9 9',
+		message: 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10z',
+
+		// Status
+		info: 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 16v-4M12 8h.01',
+		warning: 'M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z',
+		error: 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM15 9l-6 6M9 9l6 6',
+		success: 'M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4L12 14.01l-3-3',
+		loading: 'M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83',
+
+		// Users
+		user: 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
+		users: 'M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75M9 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
+
+		// Git
+		'git-branch': 'M6 3v12M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 9a9 9 0 0 1-9 9',
+		'git-commit': 'M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM1.05 12H8M16 12h6.95',
+		'git-merge': 'M18 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21V9a9 9 0 0 0 9 9M6 21h12',
+
+		// Misc
+		play: 'M5 3l14 9-14 9V3z',
+		pause: 'M6 4h4v16H6zM14 4h4v16h-4z',
+		stop: 'M6 4h12v16H6z',
+		link: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71',
+		external: 'M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3',
+		clock: 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 6v6l4 2',
+		zap: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z',
+		plugin: 'M12 2v6M12 18v4M4.93 4.93l4.24 4.24M14.83 14.83l4.24 4.24M2 12h6M18 12h4M4.93 19.07l4.24-4.24M14.83 9.17l4.24-4.24'
+	};
+
+	const path = $derived(icons[name] ?? icons.file);
+	const sizeValue = $derived(typeof size === 'number' ? `${size}px` : size);
+</script>
+
+<svg
+	class="ide-icon {className}"
+	width={sizeValue}
+	height={sizeValue}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	aria-hidden="true"
+>
+	<path d={path}></path>
+</svg>
+
+<style>
+	.ide-icon {
+		flex-shrink: 0;
+		display: inline-block;
+		vertical-align: middle;
+	}
+</style>

package/dist/components/core/Icon.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    name: string;
+    size?: number | string;
+    class?: string;
+}
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/components/core/Input.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+	interface Props {
+		id?: string;
+		value?: string;
+		type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'url';
+		placeholder?: string;
+		disabled?: boolean;
+		readonly?: boolean;
+		error?: string;
+		size?: 'sm' | 'md' | 'lg';
+		fullWidth?: boolean;
+		class?: string;
+		oninput?: (event: Event) => void;
+		onchange?: (event: Event) => void;
+		onkeydown?: (event: KeyboardEvent) => void;
+		onfocus?: (event: FocusEvent) => void;
+		onblur?: (event: FocusEvent) => void;
+	}
+
+	let {
+		id,
+		value = $bindable(''),
+		type = 'text',
+		placeholder = '',
+		disabled = false,
+		readonly = false,
+		error = '',
+		size = 'md',
+		fullWidth = false,
+		class: className = '',
+		oninput,
+		onchange,
+		onkeydown,
+		onfocus,
+		onblur
+	}: Props = $props();
+
+	function handleInput(event: Event) {
+		const target = event.target as HTMLInputElement;
+		value = target.value;
+		oninput?.(event);
+	}
+</script>
+
+<div class="ide-input-wrapper {fullWidth ? 'ide-input-wrapper--full' : ''} {className}">
+	<input
+		{id}
+		class="ide-input ide-input--{size}"
+		class:ide-input--error={!!error}
+		{type}
+		{value}
+		{placeholder}
+		{disabled}
+		{readonly}
+		oninput={handleInput}
+		{onchange}
+		{onkeydown}
+		{onfocus}
+		{onblur}
+	/>
+	{#if error}
+		<span class="ide-input__error">{error}</span>
+	{/if}
+</div>
+
+<style>
+	.ide-input-wrapper {
+		display: inline-flex;
+		flex-direction: column;
+		gap: var(--ide-spacing-xs);
+	}
+
+	.ide-input-wrapper--full {
+		width: 100%;
+	}
+
+	.ide-input {
+		width: 100%;
+		font-family: var(--ide-font-sans);
+		background: var(--ide-bg-secondary);
+		color: var(--ide-text-primary);
+		border: 1px solid var(--ide-border);
+		border-radius: var(--ide-radius-md);
+		transition: all var(--ide-transition-fast);
+	}
+
+	.ide-input:hover:not(:disabled) {
+		border-color: var(--ide-interactive);
+	}
+
+	.ide-input:focus {
+		outline: none;
+		border-color: var(--ide-interactive-focus);
+		box-shadow: 0 0 0 2px color-mix(in srgb, var(--ide-interactive-focus) 25%, transparent);
+	}
+
+	.ide-input:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.ide-input::placeholder {
+		color: var(--ide-text-muted);
+	}
+
+	.ide-input--error {
+		border-color: var(--ide-error);
+	}
+
+	.ide-input--error:focus {
+		border-color: var(--ide-error);
+		box-shadow: 0 0 0 2px color-mix(in srgb, var(--ide-error) 25%, transparent);
+	}
+
+	/* Sizes */
+	.ide-input--sm {
+		height: 1.75rem;
+		padding: 0 var(--ide-spacing-sm);
+		font-size: var(--ide-font-size-xs);
+	}
+
+	.ide-input--md {
+		height: 2.25rem;
+		padding: 0 var(--ide-spacing-md);
+		font-size: var(--ide-font-size-sm);
+	}
+
+	.ide-input--lg {
+		height: 2.75rem;
+		padding: 0 var(--ide-spacing-md);
+		font-size: var(--ide-font-size-base);
+	}
+
+	.ide-input__error {
+		font-size: var(--ide-font-size-xs);
+		color: var(--ide-error);
+	}
+</style>

package/dist/components/core/Input.svelte.d.ts

@@ -0,0 +1,20 @@
+interface Props {
+    id?: string;
+    value?: string;
+    type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'url';
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    error?: string;
+    size?: 'sm' | 'md' | 'lg';
+    fullWidth?: boolean;
+    class?: string;
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+}
+declare const Input: import("svelte").Component<Props, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/core/Kbd.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { formatKeybinding } from '../../utils/keybindings';
+
+	interface Props {
+		keys: string[];
+		class?: string;
+	}
+
+	let { keys, class: className = '' }: Props = $props();
+
+	const formatted = $derived(formatKeybinding(keys));
+</script>
+
+<kbd class="ide-kbd {className}">{formatted}</kbd>
+
+<style>
+	.ide-kbd {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 2px 6px;
+		font-family: var(--ide-font-sans);
+		font-size: var(--ide-font-size-xs);
+		font-weight: 500;
+		color: var(--ide-text-secondary);
+		background: var(--ide-bg-secondary);
+		border: 1px solid var(--ide-border);
+		border-radius: var(--ide-radius-sm);
+		box-shadow:
+			0 1px 0 var(--ide-border),
+			inset 0 -1px 0 color-mix(in srgb, var(--ide-border) 50%, transparent);
+		white-space: nowrap;
+	}
+</style>

package/dist/components/core/Kbd.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    keys: string[];
+    class?: string;
+}
+declare const Kbd: import("svelte").Component<Props, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;