@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.3

package/dist/lib/components/code/CodeEditor.svelte

@@ -0,0 +1,405 @@
+<script lang="ts">import { BROWSER } from "esm-env";
+import { onDestroy, untrack } from "svelte";
+import SkeletonEditor from "./SkeletonEditor.svelte";
+import MonacoEditor from "./MonacoEditor.svelte";
+import EditorToolbar from "./EditorToolbar.svelte";
+import EditorFullscreenDialog from "./EditorFullscreenDialog.svelte";
+import "./code-editor-surface.js";
+import { resolveCodeLanguage } from "./language.js";
+import { createEphemeralMonacoModelUri } from "./monaco-model-registry.js";
+import { openMonacoModel } from "./monaco-loader.js";
+import { settle, settleNow } from "../../attempt.js";
+import { failureClass } from "../../failure-class.js";
+import { kitLogger } from "../../kit-logger";
+const logger = kitLogger("vibeskit-code-editor");
+const MIN_HEIGHT_PX = 100;
+let { code = $bindable(""), language = "auto", filename = undefined, modelUri = undefined, transactionId = undefined, ariaLabel = "Code editor", surface = "field", appearance = "system", readOnly = false, canCopy = true, placeholder = "/* your code here */", minHeight = "100px", maxHeight = undefined, height = undefined, fill = false, resizable = false, onUpdate = undefined, onCodeChange = undefined, onSelectionChange = undefined, monacoSetup = undefined, onModelReady = undefined, editorOptions = undefined, showFullscreen = false, showAiAssist = false, aiGenerate = undefined, aiDefaultPrompt = "Help me write...", aiPlaceholder = "Describe what you want to write...", fullscreenTitle = "Editor", deferMount = true, unmountOnHide = true, name = undefined, id: inputId = undefined, required = undefined, disabled = undefined, form = undefined, extStyle = undefined, ...restProps } = $props();
+let hasFocus = $state(false);
+const ephemeralModelUri = createEphemeralMonacoModelUri();
+let containerEl = $state(null);
+let modelLease = $state.raw(null);
+let modelLoadError = $state(null);
+let isVisible = $state(false);
+let shouldMount = $state(false);
+let isFullscreen = $state(false);
+let intersectionObserver = null;
+let unmountTimer = null;
+let activeModelIdentity = null;
+let modelGeneration = 0;
+let openedModelLease = null;
+let openedModelSubscription = null;
+const effectiveReadOnly = $derived(readOnly || disabled === true);
+function releaseOpenedModel() {
+	openedModelSubscription?.dispose();
+	openedModelSubscription = null;
+	openedModelLease?.release();
+	openedModelLease = null;
+}
+$effect(() => {
+	if (!BROWSER) return;
+	// `deferMount` must defer the Monaco model/runtime too, not just its DOM
+	// view. Otherwise an off-screen or intent-gated editor still downloads
+	// Monaco's full model graph before it can render.
+	if (!shouldMount) {
+		modelGeneration += 1;
+		activeModelIdentity = null;
+		releaseOpenedModel();
+		modelLease = null;
+		modelLoadError = null;
+		return;
+	}
+	const requestedModelUri = modelUri ?? ephemeralModelUri;
+	const requestedTransactionId = transactionId;
+	const requestedIdentity = JSON.stringify([requestedModelUri, requestedTransactionId ?? null]);
+	if (requestedIdentity === activeModelIdentity) return;
+	activeModelIdentity = requestedIdentity;
+	const generation = ++modelGeneration;
+	releaseOpenedModel();
+	modelLease = null;
+	modelLoadError = null;
+	const initialValue = untrack(() => code);
+	const initialLanguage = untrack(() => resolveCodeLanguage(code, filename, language));
+	// Opening and adopting the model settle together: a failure in either shows the load error.
+	void settle(() => openMonacoModel({
+		modelUri: requestedModelUri,
+		transactionId: requestedTransactionId,
+		initialValue,
+		language: initialLanguage
+	}).then((openedLease) => {
+		if (generation !== modelGeneration) {
+			openedLease.release();
+			return;
+		}
+		openedModelLease = openedLease;
+		code = openedLease.model.getValue();
+		openedModelSubscription = openedLease.model.onDidChangeContent(() => {
+			const value = openedLease.model.getValue();
+			code = value;
+			onUpdate?.(value);
+			onCodeChange?.(value);
+		});
+		modelLease = openedLease;
+		onModelReady?.({
+			monaco: openedLease.monaco,
+			model: openedLease.model,
+			uri: openedLease.uri
+		});
+	})).then((opened) => {
+		if (opened.ok || generation !== modelGeneration) return;
+		modelLoadError = opened.error instanceof Error ? opened.error.message : "Editor model failed to load";
+	});
+});
+onDestroy(() => {
+	modelGeneration += 1;
+	releaseOpenedModel();
+	modelLease = null;
+});
+$effect(() => {
+	const lease = modelLease;
+	if (!lease || lease.model.isDisposed()) return;
+	if (lease.model.getValue() !== code) lease.model.setValue(code);
+});
+$effect(() => {
+	const lease = modelLease;
+	if (!lease || lease.model.isDisposed()) return;
+	const resolvedLanguage = resolveCodeLanguage(code, filename, language);
+	if (lease.model.getLanguageId() !== resolvedLanguage) {
+		lease.monaco.editor.setModelLanguage(lease.model, resolvedLanguage);
+	}
+});
+$effect(() => {
+	const initial = !deferMount;
+	isVisible = initial;
+	shouldMount = initial;
+});
+// Setup intersection observer for visibility-based mounting
+$effect(() => {
+	if (!BROWSER || !deferMount) return;
+	const observing = settleNow(() => {
+		intersectionObserver = new IntersectionObserver((entries) => {
+			for (const entry of entries) {
+				if (entry.target !== containerEl) continue;
+				if (entry.isIntersecting) {
+					isVisible = true;
+					if (unmountTimer) clearTimeout(unmountTimer);
+					shouldMount = true;
+				} else {
+					isVisible = false;
+					if (unmountOnHide) {
+						if (unmountTimer) clearTimeout(unmountTimer);
+						unmountTimer = setTimeout(() => {
+							if (!isVisible) {
+								shouldMount = false;
+							}
+						}, 500);
+					}
+				}
+			}
+		}, {
+			root: null,
+			rootMargin: "100px",
+			threshold: .01
+		});
+		if (containerEl) {
+			intersectionObserver.observe(containerEl);
+		}
+	});
+	// Without visibility tracking the editor mounts at once.
+	if (!observing.ok) {
+		logger.warn("Visibility tracking unavailable; mounting the editor at once", { reason: failureClass(observing.error) });
+		shouldMount = true;
+	}
+	return () => {
+		intersectionObserver?.disconnect();
+		if (unmountTimer) clearTimeout(unmountTimer);
+	};
+});
+/** The size as a pixel count when it is a finite number; `Number.isFinite` never accepts a numeric string. */
+function finitePixelCount(value) {
+	return Number.isFinite(value) ? Number(value) : null;
+}
+// Compute container inline style to ensure editors can stretch
+function parseSize(value) {
+	if (value === undefined || value === null) return {
+		css: undefined,
+		px: null
+	};
+	const pixels = finitePixelCount(value);
+	if (pixels !== null) {
+		return {
+			css: `${pixels}px`,
+			px: pixels
+		};
+	}
+	const str = String(value).trim();
+	if (!str) return {
+		css: undefined,
+		px: null
+	};
+	const pxMatch = /^(-?\d+(?:\.\d+)?)px$/i.exec(str);
+	if (pxMatch) {
+		const num = Number(pxMatch[1]);
+		return Number.isFinite(num) ? {
+			css: `${num}px`,
+			px: num
+		} : {
+			css: str,
+			px: null
+		};
+	}
+	if (/^-?\d+(?:\.\d+)?$/.test(str)) {
+		const num = Number(str);
+		return Number.isFinite(num) ? {
+			css: `${num}px`,
+			px: num
+		} : {
+			css: str,
+			px: null
+		};
+	}
+	return {
+		css: str,
+		px: null
+	};
+}
+let dimensionStyles = $derived.by(() => {
+	// When fill is true, stretch to parent — skip fixed dimension calculations
+	if (fill) {
+		return {
+			min: undefined,
+			max: undefined,
+			height: "100%"
+		};
+	}
+	const fallbackCss = `${MIN_HEIGHT_PX}px`;
+	const parsedMin = parseSize(minHeight);
+	const minPx = parsedMin.px !== null ? Math.max(parsedMin.px, MIN_HEIGHT_PX) : MIN_HEIGHT_PX;
+	const resolvedMin = parsedMin.px !== null ? `${minPx}px` : parsedMin.css ?? fallbackCss;
+	const parsedMax = parseSize(maxHeight);
+	let maxPx = parsedMax.px;
+	if (maxPx !== null && maxPx < minPx) {
+		maxPx = minPx;
+	}
+	const resolvedMax = maxPx !== null ? `${maxPx}px` : parsedMax.css;
+	const parsedHeight = parseSize(height ?? minHeight ?? fallbackCss);
+	let resolvedHeight;
+	if (parsedHeight.px !== null) {
+		let clamped = Math.max(parsedHeight.px, minPx);
+		if (maxPx !== null) {
+			clamped = Math.min(clamped, maxPx);
+		}
+		resolvedHeight = `${clamped}px`;
+	} else if (parsedHeight.css) {
+		resolvedHeight = parsedHeight.css;
+	} else {
+		resolvedHeight = resolvedMin;
+	}
+	return {
+		min: resolvedMin,
+		max: resolvedMax,
+		height: resolvedHeight
+	};
+});
+let containerStyle = $derived.by(() => {
+	const parts = [];
+	const { min, max, height: resolvedHeight } = dimensionStyles;
+	if (min) parts.push(`min-height:${min};`);
+	if (max) parts.push(`max-height:${max};`);
+	if (resolvedHeight) parts.push(`height:${resolvedHeight};`);
+	return parts.join("");
+});
+let finalStyle = $derived.by(() => [extStyle, containerStyle].filter(Boolean).join(""));
+let skeletonMinHeight = $derived.by(() => dimensionStyles.height ?? dimensionStyles.min ?? `${MIN_HEIGHT_PX}px`);
+function handleCodeUpdate(value) {
+	code = value;
+	if (!modelLease) {
+		onUpdate?.(value);
+		onCodeChange?.(value);
+	}
+}
+function toggleFullscreen() {
+	isFullscreen = !isFullscreen;
+}
+function onFocusIn() {
+	hasFocus = true;
+}
+function onFocusOut() {
+	hasFocus = false;
+}
+</script>
+
+<div
+	{...restProps}
+	class="code__container {fill ? 'code__container--fill' : ''}"
+	class:code__container--focus={hasFocus}
+	class:code__container--workbench={surface === 'workbench'}
+	data-code-editor-surface={surface}
+	aria-disabled={disabled === true ? 'true' : undefined}
+	style={finalStyle}
+	bind:this={containerEl}
+>
+	<div
+		class="code__editor"
+		class:code__editor--resizable={resizable}
+		onfocusin={onFocusIn}
+		onfocusout={onFocusOut}
+	>
+		<div class="code__editor-wrapper">
+			{#if BROWSER && shouldMount && modelLease}
+				<MonacoEditor
+					bind:code
+					{language}
+					{filename}
+					model={modelLease.model}
+					modelUri={modelUri ?? ephemeralModelUri}
+					{transactionId}
+					{ariaLabel}
+					{surface}
+					{appearance}
+					readOnly={effectiveReadOnly}
+					{placeholder}
+					{editorOptions}
+					{onSelectionChange}
+					emitModelChanges={false}
+					{monacoSetup}
+				/>
+			{:else if modelLoadError}
+				<div class="code__model-error" role="alert">{modelLoadError}</div>
+			{:else}
+				<SkeletonEditor minHeight={skeletonMinHeight} />
+			{/if}
+		</div>
+	</div>
+	<EditorToolbar
+		{showFullscreen}
+		showAiAssist={showAiAssist && !effectiveReadOnly}
+		{aiGenerate}
+		showCopy={canCopy}
+		{code}
+		onCodeUpdate={handleCodeUpdate}
+		onFullscreenToggle={toggleFullscreen}
+		{aiDefaultPrompt}
+		{aiPlaceholder}
+	/>
+</div>
+{#if name}
+	<input type="hidden" {name} id={inputId} value={code} {disabled} {form} />
+{/if}
+
+{#if showFullscreen}
+	<EditorFullscreenDialog
+		bind:open={isFullscreen}
+		bind:code
+		{language}
+		{filename}
+		model={modelLease?.model}
+		modelUri={modelUri ?? ephemeralModelUri}
+		{transactionId}
+		{ariaLabel}
+		{surface}
+		{appearance}
+		readOnly={effectiveReadOnly}
+		{placeholder}
+		{onCodeChange}
+		{onUpdate}
+		{onSelectionChange}
+		{monacoSetup}
+		{editorOptions}
+		title={fullscreenTitle}
+		showAiAssist={showAiAssist && !effectiveReadOnly}
+		{aiGenerate}
+		{aiDefaultPrompt}
+		{aiPlaceholder}
+	/>
+{/if}
+
+<style>
+	@reference "tailwindcss";
+	@reference "../../styles.css";
+
+	.code__container {
+		@apply relative flex min-h-0 w-full min-w-0 overflow-hidden;
+		box-sizing: border-box;
+		contain: layout size;
+	}
+
+	.code__container--fill {
+		@apply h-full flex-1;
+		contain: layout;
+	}
+
+	.code__editor {
+		@apply flex min-h-[112px] min-w-0 flex-1 overflow-hidden rounded-md border border-border;
+		contain: layout size;
+	}
+
+	.code__container--fill .code__editor {
+		@apply min-h-0;
+	}
+
+	.code__container--workbench .code__editor {
+		min-height: 0;
+		border: 0;
+		border-radius: 0;
+		background: var(--vibes-workbench-editor-background, var(--background));
+	}
+
+	.code__container--workbench :global(.ske-container) {
+		border: 0;
+		border-radius: 0;
+	}
+
+	/* Allow vertical resize optionally */
+	.code__editor--resizable {
+		resize: vertical;
+		overflow: auto;
+	}
+
+	.code__editor-wrapper {
+		@apply flex h-full w-full flex-1;
+	}
+
+	.code__model-error {
+		@apply flex h-full w-full items-center rounded-md border border-destructive/40 bg-destructive/10 p-4 text-sm text-destructive;
+	}
+</style>

package/dist/lib/components/code/CodeEditor.svelte.d.ts

@@ -0,0 +1,62 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { MonacoSetupDetail } from './monaco-setup.ts';
+import type { CodeEditorSelection } from './code-editor-selection.ts';
+import { type CodeEditorOptions, type CodeEditorSurface } from './code-editor-surface.ts';
+import { type MonacoModelReadyDetail } from './monaco-model-registry.ts';
+type SupportedLanguage = 'json' | 'javascript' | 'typescript' | 'svelte' | 'html' | 'css' | 'markdown' | 'graphql' | 'python' | 'shell' | 'auto';
+type SizeInput = string | number | undefined;
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'placeholder' | 'title'> & {
+    code?: string;
+    language?: SupportedLanguage;
+    filename?: string;
+    /** Canonical URI of the resource. Equal resolved URIs share a Monaco model. */
+    modelUri?: string;
+    /** Isolates this edit transaction while retaining the resource URI path. */
+    transactionId?: string;
+    /** Accessible label for the resource-specific editor input. */
+    ariaLabel?: string;
+    /** `workbench` removes field chrome and applies dense document-plane Monaco defaults. */
+    surface?: CodeEditorSurface;
+    appearance?: 'light' | 'dark' | 'system';
+    readOnly?: boolean;
+    canCopy?: boolean;
+    placeholder?: string;
+    minHeight?: SizeInput;
+    maxHeight?: SizeInput;
+    height?: SizeInput;
+    /** When true, the editor stretches to fill its parent container */
+    fill?: boolean;
+    resizable?: boolean;
+    onUpdate?: (value: string) => void;
+    onCodeChange?: (value: string) => void;
+    onSelectionChange?: (selection: CodeEditorSelection) => void;
+    monacoSetup?: (detail: MonacoSetupDetail) => void;
+    onModelReady?: (detail: MonacoModelReadyDetail) => void;
+    editorOptions?: CodeEditorOptions;
+    /** Show fullscreen toggle button in toolbar */
+    showFullscreen?: boolean;
+    /** Show AI writing assist button in toolbar */
+    showAiAssist?: boolean;
+    /** AI generation function - required for AI assist to work */
+    aiGenerate?: (opts: {
+        prompt: string;
+        context: string;
+    }) => AsyncGenerator<string>;
+    /** Default prompt for AI writing assist */
+    aiDefaultPrompt?: string;
+    /** Placeholder for AI writing assist input */
+    aiPlaceholder?: string;
+    /** Title shown in fullscreen dialog header */
+    fullscreenTitle?: string;
+    deferMount?: boolean;
+    unmountOnHide?: boolean;
+    name?: string;
+    id?: string;
+    required?: boolean;
+    disabled?: boolean;
+    form?: string;
+    extStyle?: string;
+};
+declare const CodeEditor: import("svelte").Component<$$ComponentProps, {}, "code">;
+type CodeEditor = ReturnType<typeof CodeEditor>;
+export default CodeEditor;

package/dist/lib/components/code/CodeEditorCodemirror.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">import { untrack } from "svelte";
+import { basicSetup } from "codemirror";
+import { EditorView, keymap, placeholder as cmPlaceholder } from "@codemirror/view";
+import { Compartment, EditorState, Prec } from "@codemirror/state";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { autocompletion } from "@codemirror/autocomplete";
+import { syntaxHighlighting } from "@codemirror/language";
+import { classHighlighter } from "@lezer/highlight";
+import CodeTokenTheme from "./CodeTokenTheme.svelte";
+import { javascript } from "@codemirror/lang-javascript";
+import { json } from "@codemirror/lang-json";
+import { html } from "@codemirror/lang-html";
+import { css } from "@codemirror/lang-css";
+import { markdown } from "@codemirror/lang-markdown";
+import { languages } from "@codemirror/language-data";
+import { svelte as svelteLang } from "@replit/codemirror-lang-svelte";
+import { Button } from "../ui/button";
+import { Icon } from "../icon";
+import { settleNow } from "../../attempt";
+let { code = $bindable(""), language = "auto", filename, readOnly = false, canCopy = true, placeholder = "/* your code here */", minHeight, onUpdate, onCodeChange, debug = false, ...rest } = $props();
+let editorContainer;
+let editor = null;
+let languageConfig;
+let lastCode = "";
+function detectLanguageFromContent(content) {
+	const s = (content || "").trim();
+	if (!s) return "auto";
+	// A parse failure means "not JSON": keep looking.
+	if ((s.startsWith("{") || s.startsWith("[")) && settleNow(() => JSON.parse(s)).ok) return "json";
+	if (s.startsWith("<")) return "html";
+	if (/(^|\n)\s{0,3}(#{1,6}\s|[-*+]\s|```)/.test(s)) return "markdown";
+	if (/\b(interface|type|enum)\s+/.test(s)) return "typescript";
+	return "javascript";
+}
+function mapLanguage(lang, content) {
+	switch (lang) {
+		case "json": return json();
+		case "typescript":
+		case "javascript": return javascript({ typescript: lang === "typescript" });
+		case "html": return html();
+		case "css": return css();
+		case "markdown": return markdown({ codeLanguages: languages });
+		case "svelte": return svelteLang();
+		case "auto":
+		default: return mapLanguage(detectLanguageFromContent(content), content);
+	}
+}
+$effect(() => {
+	if (!editorContainer) return;
+	languageConfig = new Compartment();
+	const initialContent = String(code ?? "");
+	const initialLang = language === "auto" ? detectLanguageFromContent(initialContent) : language;
+	const extensions = [
+		basicSetup,
+		languageConfig.of(mapLanguage(initialLang, initialContent)),
+		autocompletion(),
+		keymap.of([...defaultKeymap]),
+		history(),
+		keymap.of([...historyKeymap]),
+		EditorState.readOnly.of(!!readOnly),
+		cmPlaceholder(placeholder),
+		EditorView.theme({
+			"&": {
+				backgroundColor: "var(--background)",
+				color: "var(--foreground)"
+			},
+			".cm-scroller": { fontFamily: "var(--vibes-font-mono, var(--font-mono, monospace))" },
+			".cm-content": { caretColor: "var(--ring)" },
+			".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--ring)" },
+			".cm-gutters": {
+				backgroundColor: "var(--background)",
+				color: "var(--muted-foreground)",
+				borderColor: "var(--border)"
+			},
+			".cm-activeLine, .cm-activeLineGutter": { backgroundColor: "var(--muted)" },
+			"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection": { backgroundColor: "var(--accent)" },
+			".cm-tooltip, .cm-panels": {
+				backgroundColor: "var(--popover)",
+				color: "var(--popover-foreground)",
+				borderColor: "var(--border)"
+			}
+		}),
+		Prec.high(syntaxHighlighting(classHighlighter)),
+		EditorView.updateListener.of((update) => {
+			if (update.docChanged) {
+				const content = update.state.doc.toString();
+				code = content;
+				if (content !== lastCode) {
+					lastCode = content;
+					onUpdate?.(content);
+					onCodeChange?.(content);
+				}
+			}
+		})
+	];
+	const state = EditorState.create({
+		doc: initialContent,
+		extensions
+	});
+	editor = new EditorView({
+		state,
+		parent: editorContainer
+	});
+	return () => {
+		if (editor) {
+			editor.destroy();
+			editor = null;
+		}
+	};
+});
+// external code changes
+$effect(() => {
+	if (!editor) return;
+	const external = String(code ?? "");
+	untrack(() => {
+		if (external !== editor.state.doc.toString()) {
+			editor.dispatch({ changes: {
+				from: 0,
+				to: editor.state.doc.length,
+				insert: external
+			} });
+		}
+		if (language === "auto") {
+			const newLang = detectLanguageFromContent(external);
+			editor.dispatch({ effects: languageConfig.reconfigure(mapLanguage(newLang, external)) });
+		}
+	});
+});
+function copyCode() {
+	navigator.clipboard.writeText(code ?? "");
+}
+let hasFocus = $state(false);
+function onFocus() {
+	hasFocus = true;
+}
+function onBlur() {
+	hasFocus = false;
+}
+</script>
+
+<CodeTokenTheme />
+<div
+	class="code__container vibes-code-tokens"
+	class:code__container--focus={hasFocus}
+	style={minHeight ? `min-height:${minHeight}` : undefined}
+>
+	<div
+		class="code__editor"
+		bind:this={editorContainer}
+		onfocusin={onFocus}
+		onfocusout={onBlur}
+	></div>
+	{#if canCopy}
+		<div class="code__copy">
+			<Button aria-label="Copy code" variant="outline" size="icon" onclick={copyCode}>
+				<Icon icon="lucide:copy" class="h-4 w-4" />
+			</Button>
+		</div>
+	{/if}
+</div>
+<input type="hidden" value={code} {...rest} />
+
+<style>
+	@reference "tailwindcss";
+	@reference "../../styles.css";
+	@reference "tailwindcss";
+	@reference "../../styles.css";
+	.code__container {
+		@apply relative flex h-full min-h-0 w-full;
+	}
+	.code__editor {
+		@apply h-full w-full flex-1 overflow-hidden rounded-md border border-border;
+	}
+	:global(.cm-editor) {
+		height: 100%;
+	}
+	.code__copy {
+		@apply absolute top-2 right-2 rounded-md p-1 text-muted-foreground opacity-0 transition-opacity;
+	}
+	.code__container:hover .code__copy {
+		@apply opacity-100;
+	}
+	:global(.cm-editor) {
+		@apply p-2;
+	}
+</style>

package/dist/lib/components/code/CodeEditorCodemirror.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type SupportedLanguage = 'json' | 'javascript' | 'typescript' | 'svelte' | 'html' | 'css' | 'markdown' | 'auto';
+type $$ComponentProps = Omit<HTMLInputAttributes, 'value' | 'type' | 'placeholder'> & {
+    code?: string;
+    language?: SupportedLanguage;
+    filename?: string;
+    readOnly?: boolean;
+    canCopy?: boolean;
+    placeholder?: string;
+    minHeight?: string;
+    onUpdate?: (value: string) => void;
+    onCodeChange?: (value: string) => void;
+    debug?: boolean;
+};
+declare const CodeEditorCodemirror: import("svelte").Component<$$ComponentProps, {}, "code">;
+type CodeEditorCodemirror = ReturnType<typeof CodeEditorCodemirror>;
+export default CodeEditorCodemirror;