@pyreon/code 0.5.0

package/lib/types/index.d.ts

@@ -0,0 +1,852 @@
+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
+
+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]));
+}
+//#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.
+*/
+
+/**
+* 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.
+*/
+
+/**
+* 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.
+*/
+
+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.d.ts.map