@pyreon/code 0.5.0

package/lib/index.js

@@ -0,0 +1,915 @@
+import { bracketMatching, defaultHighlightStyle, foldGutter, foldKeymap, indentOnInput, indentUnit, syntaxHighlighting } from "@codemirror/language";
+import { MergeView } from "@codemirror/merge";
+import { Compartment, EditorState } from "@codemirror/state";
+import { Decoration, EditorView, GutterMarker, ViewPlugin, crosshairCursor, drawSelection, dropCursor, gutter, highlightActiveLine, highlightActiveLineGutter, keymap, lineNumbers, placeholder, rectangularSelection } from "@codemirror/view";
+import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from "@codemirror/autocomplete";
+import { defaultKeymap, history, historyKeymap, indentWithTab, redo, undo } from "@codemirror/commands";
+import { lintKeymap, setDiagnostics } from "@codemirror/lint";
+import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
+import { computed, effect, signal } from "@pyreon/reactivity";
+
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (!no_symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) {
+	if (typeof require !== "undefined") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + x + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
+});
+
+//#endregion
+//#region ../../node_modules/.bun/@pyreon+core@0.6.0/node_modules/@pyreon/core/lib/jsx-runtime.js
+/**
+* Hyperscript function — the compiled output of JSX.
+* `<div class="x">hello</div>` → `h("div", { class: "x" }, "hello")`
+*
+* Generic on P so TypeScript validates props match the component's signature
+* at the call site, then stores the result in the loosely-typed VNode.
+*/
+/** Shared empty props sentinel — identity-checked in mountElement to skip applyProps. */
+const EMPTY_PROPS = {};
+function h(type, props, ...children) {
+	return {
+		type,
+		props: props ?? EMPTY_PROPS,
+		children: normalizeChildren(children),
+		key: props?.key ?? null
+	};
+}
+function normalizeChildren(children) {
+	for (let i = 0; i < children.length; i++) if (Array.isArray(children[i])) return flattenChildren(children);
+	return children;
+}
+function flattenChildren(children) {
+	const result = [];
+	for (const child of children) if (Array.isArray(child)) result.push(...flattenChildren(child));
+	else result.push(child);
+	return result;
+}
+/**
+* JSX automatic runtime.
+*
+* When tsconfig has `"jsxImportSource": "@pyreon/core"`, the TS/bundler compiler
+* rewrites JSX to imports from this file automatically:
+*   <div class="x" />  →  jsx("div", { class: "x" })
+*/
+function jsx(type, props, key) {
+	const { children, ...rest } = props;
+	const propsWithKey = key != null ? {
+		...rest,
+		key
+	} : rest;
+	if (typeof type === "function") return h(type, children !== void 0 ? {
+		...propsWithKey,
+		children
+	} : propsWithKey);
+	return h(type, propsWithKey, ...children === void 0 ? [] : Array.isArray(children) ? children : [children]);
+}
+const jsxs = jsx;
+
+//#endregion
+//#region src/components/code-editor.tsx
+/**
+* Code editor component — mounts a CodeMirror 6 instance.
+*
+* @example
+* ```tsx
+* const editor = createEditor({
+*   value: 'const x = 1',
+*   language: 'typescript',
+*   theme: 'dark',
+* })
+*
+* <CodeEditor instance={editor} style="height: 400px" />
+* ```
+*/
+function CodeEditor(props) {
+	const { instance } = props;
+	const containerRef = (el) => {
+		if (!el) return;
+		const mountable = instance;
+		if (mountable._mount) mountable._mount(el);
+	};
+	const baseStyle = `width: 100%; height: 100%; overflow: hidden; ${props.style ?? ""}`;
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		class: `pyreon-code-editor ${props.class ?? ""}`,
+		style: baseStyle
+	});
+}
+
+//#endregion
+//#region src/languages.ts
+/**
+* Language extension loaders — lazy-loaded on demand.
+* Only the requested language is imported, keeping the initial bundle small.
+*/
+const languageLoaders = {
+	javascript: () => import("./dist-CTDqGIAf.js").then((n) => n.t).then((m) => m.javascript()),
+	typescript: () => import("./dist-CTDqGIAf.js").then((n) => n.t).then((m) => m.javascript({ typescript: true })),
+	jsx: () => import("./dist-CTDqGIAf.js").then((n) => n.t).then((m) => m.javascript({ jsx: true })),
+	tsx: () => import("./dist-CTDqGIAf.js").then((n) => n.t).then((m) => m.javascript({
+		typescript: true,
+		jsx: true
+	})),
+	html: () => import("./dist-BAfzu5eu.js").then((m) => m.html()),
+	css: () => import("./dist-BLlV_D16.js").then((n) => n.r).then((m) => m.css()),
+	json: () => import("./dist-CTPisNZp.js").then((m) => m.json()),
+	markdown: () => import("./dist-v09vikKr.js").then((m) => m.markdown()),
+	python: () => import("./dist-DS2tluW9.js").then((m) => m.python()),
+	rust: () => import("./dist-Ce2tvOxv.js").then((m) => m.rust()),
+	sql: () => import("./dist-BZtTlC1J.js").then((m) => m.sql()),
+	xml: () => import("./dist-DUNx9ldu.js").then((m) => m.xml()),
+	yaml: () => import("./dist-BNmKLTu8.js").then((m) => m.yaml()),
+	cpp: () => import("./dist-Dej_yf3k.js").then((m) => m.cpp()),
+	java: () => import("./dist-DshStUxU.js").then((m) => m.java()),
+	go: () => import("./dist-qTrOe7xY.js").then((m) => m.go()),
+	php: () => import("./dist-CttF0OTv.js").then((m) => m.php()),
+	ruby: () => Promise.resolve([]),
+	shell: () => Promise.resolve([]),
+	plain: () => Promise.resolve([])
+};
+const loaded = /* @__PURE__ */ new Map();
+/**
+* Load a language extension. Returns cached if already loaded.
+* Language grammars are lazy-imported — zero cost until used.
+*
+* @example
+* ```ts
+* const ext = await loadLanguage('typescript')
+* ```
+*/
+async function loadLanguage(language) {
+	const cached = loaded.get(language);
+	if (cached) return cached;
+	const loader = languageLoaders[language];
+	if (!loader) return [];
+	try {
+		const ext = await loader();
+		loaded.set(language, ext);
+		return ext;
+	} catch {
+		return [];
+	}
+}
+/**
+* Get available languages.
+*/
+function getAvailableLanguages() {
+	return Object.keys(languageLoaders);
+}
+
+//#endregion
+//#region src/themes.ts
+/**
+* Light theme — clean, minimal.
+*/
+const lightTheme = EditorView.theme({
+	"&": {
+		backgroundColor: "#ffffff",
+		color: "#1e293b"
+	},
+	".cm-content": { caretColor: "#1e293b" },
+	".cm-cursor": { borderLeftColor: "#1e293b" },
+	"&.cm-focused .cm-selectionBackground, .cm-selectionBackground": { backgroundColor: "#dbeafe" },
+	".cm-gutters": {
+		backgroundColor: "#f8fafc",
+		color: "#94a3b8",
+		borderRight: "1px solid #e2e8f0"
+	},
+	".cm-activeLineGutter": {
+		backgroundColor: "#f1f5f9",
+		color: "#475569"
+	},
+	".cm-activeLine": { backgroundColor: "#f8fafc" },
+	".cm-foldGutter": { color: "#94a3b8" }
+});
+/**
+* Dark theme — VS Code inspired.
+*/
+const darkTheme = EditorView.theme({
+	"&": {
+		backgroundColor: "#1e1e2e",
+		color: "#cdd6f4"
+	},
+	".cm-content": { caretColor: "#f5e0dc" },
+	".cm-cursor": { borderLeftColor: "#f5e0dc" },
+	"&.cm-focused .cm-selectionBackground, .cm-selectionBackground": { backgroundColor: "#45475a" },
+	".cm-gutters": {
+		backgroundColor: "#181825",
+		color: "#585b70",
+		borderRight: "1px solid #313244"
+	},
+	".cm-activeLineGutter": {
+		backgroundColor: "#1e1e2e",
+		color: "#a6adc8"
+	},
+	".cm-activeLine": { backgroundColor: "#1e1e2e80" },
+	".cm-foldGutter": { color: "#585b70" },
+	".cm-matchingBracket": {
+		backgroundColor: "#45475a",
+		color: "#f5e0dc"
+	}
+}, { dark: true });
+/**
+* Resolve a theme value to a CodeMirror extension.
+*/
+function resolveTheme(theme) {
+	if (theme === "light") return lightTheme;
+	if (theme === "dark") return darkTheme;
+	return theme;
+}
+
+//#endregion
+//#region src/components/diff-editor.tsx
+/**
+* Side-by-side or inline diff editor using @codemirror/merge.
+*
+* @example
+* ```tsx
+* <DiffEditor
+*   original="const x = 1"
+*   modified="const x = 2"
+*   language="typescript"
+*   theme="dark"
+*   style="height: 400px"
+* />
+* ```
+*/
+function DiffEditor(props) {
+	const { original, modified, language = "plain", theme = "light", readOnly = true, inline = false } = props;
+	const containerRef = async (el) => {
+		if (!el) return;
+		const langExt = await loadLanguage(language);
+		const themeExt = resolveTheme(theme);
+		const extensions = [
+			syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+			langExt,
+			themeExt,
+			EditorView.editable.of(!readOnly),
+			EditorState.readOnly.of(readOnly)
+		];
+		const originalText = typeof original === "string" ? original : original();
+		const modifiedText = typeof modified === "string" ? modified : modified();
+		el.innerHTML = "";
+		if (inline) new MergeView({
+			a: {
+				doc: originalText,
+				extensions
+			},
+			b: {
+				doc: modifiedText,
+				extensions
+			},
+			parent: el,
+			collapseUnchanged: {
+				margin: 3,
+				minSize: 4
+			}
+		});
+		else new MergeView({
+			a: {
+				doc: originalText,
+				extensions
+			},
+			b: {
+				doc: modifiedText,
+				extensions
+			},
+			parent: el,
+			collapseUnchanged: {
+				margin: 3,
+				minSize: 4
+			}
+		});
+	};
+	const baseStyle = `width: 100%; height: 100%; overflow: hidden; ${props.style ?? ""}`;
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		class: `pyreon-diff-editor ${props.class ?? ""}`,
+		style: baseStyle
+	});
+}
+
+//#endregion
+//#region src/components/tabbed-editor.tsx
+/**
+* Tabbed code editor component — renders tab bar + editor.
+* Headless styling — the tab bar is a plain div with button tabs.
+* Consumers can style via CSS classes.
+*
+* @example
+* ```tsx
+* const editor = createTabbedEditor({
+*   tabs: [
+*     { name: 'index.ts', language: 'typescript', value: 'const x = 1' },
+*     { name: 'style.css', language: 'css', value: '.app { }' },
+*   ],
+*   theme: 'dark',
+* })
+*
+* <TabbedEditor instance={editor} style="height: 500px" />
+* ```
+*/
+function TabbedEditor(props) {
+	const { instance } = props;
+	const containerStyle = `display: flex; flex-direction: column; width: 100%; height: 100%; ${props.style ?? ""}`;
+	const tabBarStyle = "display: flex; overflow-x: auto; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; min-height: 34px; flex-shrink: 0;";
+	return /* @__PURE__ */ jsxs("div", {
+		class: `pyreon-tabbed-editor ${props.class ?? ""}`,
+		style: containerStyle,
+		children: [() => {
+			const tabs = instance.tabs();
+			const activeId = instance.activeTabId();
+			return /* @__PURE__ */ jsx("div", {
+				class: "pyreon-tabbed-editor-tabs",
+				style: tabBarStyle,
+				children: tabs.map((tab) => {
+					const id = tab.id ?? tab.name;
+					const isActive = id === activeId;
+					const tabStyle = `display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: none; background: ${isActive ? "white" : "transparent"}; border-bottom: ${isActive ? "2px solid #3b82f6" : "2px solid transparent"}; cursor: pointer; font-size: 13px; color: ${isActive ? "#1e293b" : "#64748b"}; white-space: nowrap; position: relative; font-family: inherit;`;
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						class: `pyreon-tab ${isActive ? "active" : ""} ${tab.modified ? "modified" : ""}`,
+						style: tabStyle,
+						onClick: () => instance.switchTab(id),
+						children: [
+							/* @__PURE__ */ jsx("span", { children: tab.name }),
+							tab.modified && /* @__PURE__ */ jsx("span", {
+								style: "width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; flex-shrink: 0;",
+								title: "Modified"
+							}),
+							tab.closable !== false && /* @__PURE__ */ jsx("span", {
+								style: "font-size: 14px; line-height: 1; opacity: 0.5; cursor: pointer; padding: 0 2px; margin-left: 2px;",
+								title: "Close",
+								onClick: (e) => {
+									e.stopPropagation();
+									instance.closeTab(id);
+								},
+								children: "×"
+							})
+						]
+					}, id);
+				})
+			});
+		}, /* @__PURE__ */ jsx("div", {
+			style: "flex: 1; min-height: 0;",
+			children: /* @__PURE__ */ jsx(CodeEditor, { instance: instance.editor })
+		})]
+	});
+}
+
+//#endregion
+//#region src/minimap.ts
+/**
+* Canvas-based minimap extension for CodeMirror 6.
+* Renders a scaled-down overview of the document on the right side.
+*/
+const MINIMAP_WIDTH = 80;
+const CHAR_WIDTH = 1.2;
+const LINE_HEIGHT = 2.5;
+const MINIMAP_BG = "#1e1e2e";
+const MINIMAP_BG_LIGHT = "#f8fafc";
+const TEXT_COLOR = "#585b70";
+const TEXT_COLOR_LIGHT = "#94a3b8";
+const VIEWPORT_COLOR = "rgba(59, 130, 246, 0.15)";
+const VIEWPORT_BORDER = "rgba(59, 130, 246, 0.4)";
+function createMinimapCanvas() {
+	const canvas = document.createElement("canvas");
+	canvas.style.cssText = `position: absolute; right: 0; top: 0; width: ${MINIMAP_WIDTH}px; height: 100%; cursor: pointer; z-index: 5;`;
+	canvas.width = MINIMAP_WIDTH * 2;
+	return canvas;
+}
+function renderMinimap(canvas, view) {
+	const ctx = canvas.getContext("2d");
+	if (!ctx) return;
+	const doc = view.state.doc;
+	const totalLines = doc.lines;
+	const height = canvas.clientHeight;
+	canvas.height = height * 2;
+	const isDark = view.dom.classList.contains("cm-dark");
+	const bg = isDark ? MINIMAP_BG : MINIMAP_BG_LIGHT;
+	const textColor = isDark ? TEXT_COLOR : TEXT_COLOR_LIGHT;
+	const scale = 2;
+	ctx.setTransform(scale, 0, 0, scale, 0, 0);
+	ctx.fillStyle = bg;
+	ctx.fillRect(0, 0, MINIMAP_WIDTH, height);
+	const contentHeight = totalLines * LINE_HEIGHT;
+	const scrollFraction = contentHeight > height ? view.scrollDOM.scrollTop / (view.scrollDOM.scrollHeight - view.scrollDOM.clientHeight || 1) : 0;
+	const offset = contentHeight > height ? scrollFraction * (contentHeight - height) : 0;
+	ctx.fillStyle = textColor;
+	const startLine = Math.max(1, Math.floor(offset / LINE_HEIGHT));
+	const endLine = Math.min(totalLines, startLine + Math.ceil(height / LINE_HEIGHT) + 1);
+	for (let i = startLine; i <= endLine; i++) {
+		const line = doc.line(i);
+		const y = (i - 1) * LINE_HEIGHT - offset;
+		if (y < -LINE_HEIGHT || y > height) continue;
+		const text = line.text;
+		let x = 4;
+		for (let j = 0; j < Math.min(text.length, 60); j++) {
+			if (text[j] !== " " && text[j] !== "	") ctx.fillRect(x, y, CHAR_WIDTH, 1.5);
+			x += CHAR_WIDTH;
+		}
+	}
+	const viewportTop = view.scrollDOM.scrollTop;
+	const viewportHeight = view.scrollDOM.clientHeight;
+	const docHeight = view.scrollDOM.scrollHeight || 1;
+	const vpY = viewportTop / docHeight * Math.min(contentHeight, height);
+	const vpH = viewportHeight / docHeight * Math.min(contentHeight, height);
+	ctx.fillStyle = VIEWPORT_COLOR;
+	ctx.fillRect(0, vpY, MINIMAP_WIDTH, vpH);
+	ctx.strokeStyle = VIEWPORT_BORDER;
+	ctx.lineWidth = 1;
+	ctx.strokeRect(.5, vpY + .5, MINIMAP_WIDTH - 1, vpH - 1);
+}
+/**
+* CodeMirror 6 minimap extension.
+* Renders a canvas-based code overview on the right side of the editor.
+*
+* @example
+* ```ts
+* import { minimapExtension } from '@pyreon/code'
+* // Add to editor extensions
+* ```
+*/
+function minimapExtension() {
+	return [ViewPlugin.fromClass(class {
+		canvas;
+		view;
+		animFrame = null;
+		constructor(view) {
+			this.view = view;
+			this.canvas = createMinimapCanvas();
+			view.dom.style.position = "relative";
+			view.dom.appendChild(this.canvas);
+			this.canvas.addEventListener("click", (e) => {
+				const rect = this.canvas.getBoundingClientRect();
+				const scrollTarget = (e.clientY - rect.top) / rect.height * (view.scrollDOM.scrollHeight - view.scrollDOM.clientHeight);
+				view.scrollDOM.scrollTo({
+					top: scrollTarget,
+					behavior: "smooth"
+				});
+			});
+			this.render();
+		}
+		render() {
+			renderMinimap(this.canvas, this.view);
+		}
+		update(update) {
+			if (update.docChanged || update.viewportChanged || update.geometryChanged) {
+				if (this.animFrame) cancelAnimationFrame(this.animFrame);
+				this.animFrame = requestAnimationFrame(() => this.render());
+			}
+		}
+		destroy() {
+			if (this.animFrame) cancelAnimationFrame(this.animFrame);
+			this.canvas.remove();
+		}
+	}), EditorView.theme({ ".cm-scroller": { paddingRight: `${MINIMAP_WIDTH + 8}px` } })];
+}
+
+//#endregion
+//#region src/editor.ts
+/**
+* Create a reactive code editor instance.
+*
+* The editor state (value, language, theme, cursor, selection) is backed
+* by signals. The CodeMirror EditorView is created when mounted via
+* the `<CodeEditor>` component.
+*
+* @param config - Editor configuration
+* @returns A reactive EditorInstance
+*
+* @example
+* ```tsx
+* const editor = createEditor({
+*   value: 'const x = 1',
+*   language: 'typescript',
+*   theme: 'dark',
+* })
+*
+* editor.value()           // reactive
+* editor.value.set('new')  // updates editor
+*
+* <CodeEditor instance={editor} />
+* ```
+*/
+function createEditor(config = {}) {
+	const { value: initialValue = "", language: initialLanguage = "plain", theme: initialTheme = "light", lineNumbers: showLineNumbers = true, readOnly: initialReadOnly = false, foldGutter: showFoldGutter = true, bracketMatching: enableBracketMatching = true, autocomplete: enableAutocomplete = true, search: _enableSearch = true, highlightIndentGuides: enableIndentGuides = true, vim: enableVim = false, emacs: enableEmacs = false, tabSize: configTabSize = 2, lineWrapping: enableLineWrapping = false, placeholder: placeholderText, minimap: enableMinimap = false, extensions: userExtensions = [], onChange } = config;
+	const value = signal(initialValue);
+	const language = signal(initialLanguage);
+	const theme = signal(initialTheme);
+	const readOnly = signal(initialReadOnly);
+	const focused = signal(false);
+	const view = signal(null);
+	const docVersion = signal(0);
+	const languageCompartment = new Compartment();
+	const themeCompartment = new Compartment();
+	const readOnlyCompartment = new Compartment();
+	const extraKeymapCompartment = new Compartment();
+	const keyModeCompartment = new Compartment();
+	const cursor = computed(() => {
+		docVersion();
+		const v = view.peek();
+		if (!v) return {
+			line: 1,
+			col: 1
+		};
+		const pos = v.state.selection.main.head;
+		const line = v.state.doc.lineAt(pos);
+		return {
+			line: line.number,
+			col: pos - line.from + 1
+		};
+	});
+	const selection = computed(() => {
+		docVersion();
+		const v = view.peek();
+		if (!v) return {
+			from: 0,
+			to: 0,
+			text: ""
+		};
+		const sel = v.state.selection.main;
+		return {
+			from: sel.from,
+			to: sel.to,
+			text: v.state.sliceDoc(sel.from, sel.to)
+		};
+	});
+	const lineCount = computed(() => {
+		docVersion();
+		const v = view.peek();
+		return v ? v.state.doc.lines : initialValue.split("\n").length;
+	});
+	const lineHighlights = /* @__PURE__ */ new Map();
+	const lineHighlightField = ViewPlugin.fromClass(class {
+		decorations;
+		constructor(editorView) {
+			this.decorations = this.buildDecos(editorView);
+		}
+		buildDecos(editorView) {
+			const ranges = [];
+			for (const [lineNum, cls] of lineHighlights) if (lineNum >= 1 && lineNum <= editorView.state.doc.lines) {
+				const lineInfo = editorView.state.doc.line(lineNum);
+				ranges.push({
+					from: lineInfo.from,
+					deco: Decoration.line({ class: cls })
+				});
+			}
+			return Decoration.set(ranges.sort((a, b) => a.from - b.from).map((d) => d.deco.range(d.from)));
+		}
+		update(upd) {
+			if (upd.docChanged || upd.viewportChanged) this.decorations = this.buildDecos(upd.view);
+		}
+	}, { decorations: (plugin) => plugin.decorations });
+	const gutterMarkers = /* @__PURE__ */ new Map();
+	class CustomGutterMarker extends GutterMarker {
+		markerText;
+		markerTitle;
+		markerClass;
+		constructor(opts) {
+			super();
+			this.markerText = opts.text ?? "";
+			this.markerTitle = opts.title ?? "";
+			this.markerClass = opts.class ?? "";
+		}
+		toDOM() {
+			const el = document.createElement("span");
+			el.textContent = this.markerText;
+			el.title = this.markerTitle;
+			if (this.markerClass) el.className = this.markerClass;
+			el.style.cssText = "cursor: pointer; display: inline-block; width: 100%; text-align: center;";
+			return el;
+		}
+	}
+	const gutterMarkerExtension = gutter({
+		class: "pyreon-code-gutter-markers",
+		lineMarker: (gutterView, line) => {
+			const lineNo = gutterView.state.doc.lineAt(line.from).number;
+			const marker = gutterMarkers.get(lineNo);
+			if (!marker) return null;
+			return new CustomGutterMarker(marker);
+		},
+		initialSpacer: () => new CustomGutterMarker({ text: " " })
+	});
+	function buildExtensions(langExt) {
+		const exts = [
+			history(),
+			drawSelection(),
+			dropCursor(),
+			rectangularSelection(),
+			crosshairCursor(),
+			highlightActiveLine(),
+			highlightActiveLineGutter(),
+			highlightSelectionMatches(),
+			indentOnInput(),
+			syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+			indentUnit.of(" ".repeat(configTabSize)),
+			keymap.of([
+				...closeBracketsKeymap,
+				...defaultKeymap,
+				...searchKeymap,
+				...historyKeymap,
+				...foldKeymap,
+				...completionKeymap,
+				...lintKeymap,
+				indentWithTab
+			]),
+			languageCompartment.of(langExt),
+			themeCompartment.of(resolveTheme(initialTheme)),
+			readOnlyCompartment.of(EditorState.readOnly.of(initialReadOnly)),
+			extraKeymapCompartment.of([]),
+			keyModeCompartment.of([]),
+			EditorView.updateListener.of((update) => {
+				if (update.docChanged) {
+					const newValue = update.state.doc.toString();
+					if (newValue !== value.peek()) {
+						value.set(newValue);
+						onChange?.(newValue);
+					}
+					docVersion.update((v) => v + 1);
+				}
+				if (update.selectionSet) docVersion.update((v) => v + 1);
+				if (update.focusChanged) focused.set(update.view.hasFocus);
+			})
+		];
+		if (showLineNumbers) exts.push(lineNumbers());
+		if (showFoldGutter) exts.push(foldGutter());
+		if (enableBracketMatching) exts.push(bracketMatching(), closeBrackets());
+		if (enableAutocomplete) exts.push(autocompletion());
+		if (enableLineWrapping) exts.push(EditorView.lineWrapping);
+		if (enableIndentGuides) exts.push(EditorView.theme({ ".cm-line": {
+			backgroundImage: "linear-gradient(to right, #e5e7eb 1px, transparent 1px)",
+			backgroundSize: `${configTabSize}ch 100%`,
+			backgroundPosition: "0 0"
+		} }));
+		if (placeholderText) exts.push(placeholder(placeholderText));
+		if (enableMinimap) exts.push(minimapExtension());
+		exts.push(lineHighlightField);
+		exts.push(gutterMarkerExtension);
+		exts.push(...userExtensions);
+		return exts;
+	}
+	let mounted = false;
+	async function mount(parent) {
+		if (mounted) return;
+		const extensions = buildExtensions(await loadLanguage(language.peek()));
+		const editorView = new EditorView({
+			state: EditorState.create({
+				doc: value.peek(),
+				extensions
+			}),
+			parent
+		});
+		view.set(editorView);
+		mounted = true;
+		effect(() => {
+			const val = value();
+			const v = view.peek();
+			if (!v) return;
+			const current = v.state.doc.toString();
+			if (val !== current) v.dispatch({ changes: {
+				from: 0,
+				to: current.length,
+				insert: val
+			} });
+		});
+		effect(() => {
+			const lang = language();
+			const v = view.peek();
+			if (!v) return;
+			loadLanguage(lang).then((ext) => {
+				v.dispatch({ effects: languageCompartment.reconfigure(ext) });
+			});
+		});
+		effect(() => {
+			const t = theme();
+			const v = view.peek();
+			if (!v) return;
+			v.dispatch({ effects: themeCompartment.reconfigure(resolveTheme(t)) });
+		});
+		effect(() => {
+			const ro = readOnly();
+			const v = view.peek();
+			if (!v) return;
+			v.dispatch({ effects: readOnlyCompartment.reconfigure(EditorState.readOnly.of(ro)) });
+		});
+	}
+	function focus() {
+		view.peek()?.focus();
+	}
+	function insert(text) {
+		const v = view.peek();
+		if (!v) return;
+		const pos = v.state.selection.main.head;
+		v.dispatch({ changes: {
+			from: pos,
+			insert: text
+		} });
+	}
+	function replaceSelection(text) {
+		const v = view.peek();
+		if (!v) return;
+		v.dispatch(v.state.replaceSelection(text));
+	}
+	function select(from, to) {
+		const v = view.peek();
+		if (!v) return;
+		v.dispatch({ selection: {
+			anchor: from,
+			head: to
+		} });
+	}
+	function selectAll() {
+		const v = view.peek();
+		if (!v) return;
+		v.dispatch({ selection: {
+			anchor: 0,
+			head: v.state.doc.length
+		} });
+	}
+	function goToLine(line) {
+		const v = view.peek();
+		if (!v) return;
+		const lineInfo = v.state.doc.line(Math.min(Math.max(1, line), v.state.doc.lines));
+		v.dispatch({
+			selection: { anchor: lineInfo.from },
+			scrollIntoView: true
+		});
+		v.focus();
+	}
+	function undo$1() {
+		const v = view.peek();
+		if (v) undo(v);
+	}
+	function redo$1() {
+		const v = view.peek();
+		if (v) redo(v);
+	}
+	function foldAll() {
+		const v = view.peek();
+		if (!v) return;
+		const { foldAll: foldAllCmd } = __require("@codemirror/language");
+		foldAllCmd(v);
+	}
+	function unfoldAll() {
+		const v = view.peek();
+		if (!v) return;
+		const { unfoldAll: unfoldAllCmd } = __require("@codemirror/language");
+		unfoldAllCmd(v);
+	}
+	function setDiagnostics$1(diagnostics) {
+		const v = view.peek();
+		if (!v) return;
+		v.dispatch(setDiagnostics(v.state, diagnostics.map((d) => ({
+			from: d.from,
+			to: d.to,
+			severity: d.severity === "hint" ? "info" : d.severity,
+			message: d.message,
+			source: d.source
+		}))));
+	}
+	function clearDiagnostics() {
+		const v = view.peek();
+		if (!v) return;
+		v.dispatch(setDiagnostics(v.state, []));
+	}
+	function highlightLine(line, className) {
+		lineHighlights.set(line, className);
+		const v = view.peek();
+		if (v) v.dispatch({ effects: [] });
+	}
+	function clearLineHighlights() {
+		lineHighlights.clear();
+		const v = view.peek();
+		if (v) v.dispatch({ effects: [] });
+	}
+	function setGutterMarker(line, marker) {
+		gutterMarkers.set(line, marker);
+		const v = view.peek();
+		if (v) v.dispatch({ effects: [] });
+	}
+	function clearGutterMarkers() {
+		gutterMarkers.clear();
+		const v = view.peek();
+		if (v) v.dispatch({ effects: [] });
+	}
+	const customKeybindings = [];
+	function addKeybinding(key, handler) {
+		customKeybindings.push({
+			key,
+			run: () => {
+				handler();
+				return true;
+			}
+		});
+		const v = view.peek();
+		if (!v) return;
+		v.dispatch({ effects: extraKeymapCompartment.reconfigure(keymap.of(customKeybindings)) });
+	}
+	function getLine(line) {
+		const v = view.peek();
+		if (!v) return "";
+		const clamped = Math.min(Math.max(1, line), v.state.doc.lines);
+		return v.state.doc.line(clamped).text;
+	}
+	function getWordAtCursor() {
+		const v = view.peek();
+		if (!v) return "";
+		const pos = v.state.selection.main.head;
+		const line = v.state.doc.lineAt(pos);
+		const col = pos - line.from;
+		const text = line.text;
+		let start = col;
+		let end = col;
+		while (start > 0 && /\w/.test(text[start - 1])) start--;
+		while (end < text.length && /\w/.test(text[end])) end++;
+		return text.slice(start, end);
+	}
+	function scrollTo(pos) {
+		const v = view.peek();
+		if (!v) return;
+		v.dispatch({ effects: EditorView.scrollIntoView(pos, { y: "center" }) });
+	}
+	async function loadKeyMode() {
+		const v = view.peek();
+		if (!v) return;
+		const vimPkg = "@replit/codemirror-vim";
+		const emacsPkg = "@replit/codemirror-emacs";
+		if (enableVim) try {
+			const mod = await import(
+				/* @vite-ignore */
+				vimPkg
+);
+			v.dispatch({ effects: keyModeCompartment.reconfigure(mod.vim()) });
+		} catch {}
+		if (enableEmacs) try {
+			const mod = await import(
+				/* @vite-ignore */
+				emacsPkg
+);
+			v.dispatch({ effects: keyModeCompartment.reconfigure(mod.emacs()) });
+		} catch {}
+	}
+	function dispose() {
+		const v = view.peek();
+		if (v) {
+			v.destroy();
+			view.set(null);
+			mounted = false;
+		}
+	}
+	return {
+		value,
+		language,
+		theme,
+		readOnly,
+		cursor,
+		selection,
+		lineCount,
+		focused,
+		view,
+		focus,
+		insert,
+		replaceSelection,
+		select,
+		selectAll,
+		goToLine,
+		undo: undo$1,
+		redo: redo$1,
+		foldAll,
+		unfoldAll,
+		setDiagnostics: setDiagnostics$1,
+		clearDiagnostics,
+		highlightLine,
+		clearLineHighlights,
+		setGutterMarker,
+		clearGutterMarkers,
+		addKeybinding,
+		getLine,
+		getWordAtCursor,
+		scrollTo,
+		config,
+		dispose,
+		_mount: async (parent) => {
+			await mount(parent);
+			await loadKeyMode();
+		}
+	};
+}
+
+//#endregion
+export { CodeEditor, DiffEditor, TabbedEditor, createEditor, darkTheme, getAvailableLanguages, lightTheme, loadLanguage, minimapExtension, resolveTheme, __exportAll as t };
+//# sourceMappingURL=index.js.map