@particle-academy/fancy-code 0.1.2 → 0.3.0

package/dist/index.cjs

@@ -3,16 +3,6 @@
 var react = require('react');
 var reactFancy = require('@particle-academy/react-fancy');
 var jsxRuntime = require('react/jsx-runtime');
-var langJavascript = require('@codemirror/lang-javascript');
-var langHtml = require('@codemirror/lang-html');
-var langPhp = require('@codemirror/lang-php');
-var state = require('@codemirror/state');
-var view = require('@codemirror/view');
-var commands = require('@codemirror/commands');
-var language = require('@codemirror/language');
-var search = require('@codemirror/search');
-var autocomplete = require('@codemirror/autocomplete');
-var highlight = require('@lezer/highlight');
 
 // src/components/CodeEditor/CodeEditor.tsx
 var CodeEditorContext = react.createContext(null);
@@ -24,13 +14,123 @@ function useCodeEditor() {
   return ctx;
 }
 function CodeEditorPanel({ className }) {
-  const { _containerRef } = useCodeEditor();
+  const {
+    _engineReturn: engine,
+    lineNumbers,
+    wordWrap,
+    readOnly,
+    placeholder,
+    _maxHeight,
+    _minHeight
+  } = useCodeEditor();
+  if (!engine) return null;
+  const {
+    textareaRef,
+    highlightedHtml,
+    lineCount,
+    activeLine,
+    themeColors,
+    handleKeyDown,
+    handleInput,
+    handleScroll,
+    handleSelect,
+    scrollTop,
+    scrollLeft
+  } = engine;
+  const gutterWidth = lineNumbers ? `${Math.max(String(lineCount).length, 2) * 0.75 + 1.5}em` : "0";
+  const lineNumberElements = react.useMemo(() => {
+    if (!lineNumbers) return null;
+    const lines = [];
+    for (let i = 1; i <= lineCount; i++) {
+      lines.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              color: i === activeLine ? themeColors.foreground : themeColors.gutterForeground,
+              backgroundColor: i === activeLine ? themeColors.activeLineBackground : void 0
+            },
+            className: "pr-3 text-right text-[13px] leading-[1.5] select-none",
+            children: i
+          },
+          i
+        )
+      );
+    }
+    return lines;
+  }, [lineNumbers, lineCount, activeLine, themeColors]);
+  const containerStyle = {
+    backgroundColor: themeColors.background,
+    color: themeColors.foreground,
+    minHeight: _minHeight,
+    maxHeight: _maxHeight
+  };
+  const isEmpty = textareaRef.current ? textareaRef.current.value.length === 0 : highlightedHtml.length === 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "data-fancy-code-panel": "",
-      ref: _containerRef,
-      className: reactFancy.cn("text-sm", className)
+      className: reactFancy.cn("relative overflow-auto", className),
+      style: containerStyle,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-full", children: [
+        lineNumbers && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "sticky left-0 z-10 shrink-0 pt-2.5 pb-2.5 pl-2",
+            style: {
+              backgroundColor: themeColors.gutterBackground,
+              borderRight: `1px solid ${themeColors.gutterBorder}`,
+              width: gutterWidth
+            },
+            children: lineNumberElements
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "pre",
+            {
+              className: "pointer-events-none absolute inset-0 m-0 overflow-hidden border-none p-2.5 text-[13px] leading-[1.5]",
+              "aria-hidden": "true",
+              style: {
+                whiteSpace: wordWrap ? "pre-wrap" : "pre",
+                overflowWrap: wordWrap ? "break-word" : "normal"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx("code", { dangerouslySetInnerHTML: { __html: highlightedHtml + "\n" } })
+            }
+          ),
+          placeholder && isEmpty && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "pointer-events-none absolute left-0 top-0 p-2.5 text-[13px] leading-[1.5] opacity-40",
+              style: { color: themeColors.foreground },
+              children: placeholder
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              className: "relative m-0 block w-full resize-none overflow-hidden border-none bg-transparent p-2.5 text-[13px] leading-[1.5] text-transparent outline-none",
+              style: {
+                caretColor: themeColors.cursorColor,
+                minHeight: _minHeight ? _minHeight - 40 : 80,
+                whiteSpace: wordWrap ? "pre-wrap" : "pre",
+                overflowWrap: wordWrap ? "break-word" : "normal"
+              },
+              spellCheck: false,
+              autoComplete: "off",
+              autoCorrect: "off",
+              autoCapitalize: "off",
+              readOnly,
+              onKeyDown: handleKeyDown,
+              onInput: handleInput,
+              onScroll: handleScroll,
+              onSelect: handleSelect,
+              onClick: handleSelect
+            }
+          )
+        ] })
+      ] })
     }
   );
 }
@@ -70,25 +170,519 @@ function getRegisteredLanguages() {
   }
   return names;
 }
+
+// src/engine/tokenizers/javascript.ts
+var KEYWORDS = /* @__PURE__ */ new Set([
+  "abstract",
+  "arguments",
+  "as",
+  "async",
+  "await",
+  "boolean",
+  "break",
+  "byte",
+  "case",
+  "catch",
+  "char",
+  "class",
+  "const",
+  "continue",
+  "debugger",
+  "default",
+  "delete",
+  "do",
+  "double",
+  "else",
+  "enum",
+  "export",
+  "extends",
+  "false",
+  "final",
+  "finally",
+  "float",
+  "for",
+  "from",
+  "function",
+  "get",
+  "goto",
+  "if",
+  "implements",
+  "import",
+  "in",
+  "instanceof",
+  "int",
+  "interface",
+  "keyof",
+  "let",
+  "long",
+  "native",
+  "new",
+  "null",
+  "of",
+  "package",
+  "private",
+  "protected",
+  "public",
+  "readonly",
+  "return",
+  "set",
+  "short",
+  "static",
+  "super",
+  "switch",
+  "synchronized",
+  "this",
+  "throw",
+  "throws",
+  "transient",
+  "true",
+  "try",
+  "type",
+  "typeof",
+  "undefined",
+  "var",
+  "void",
+  "volatile",
+  "while",
+  "with",
+  "yield"
+]);
+var TYPE_KEYWORDS = /* @__PURE__ */ new Set([
+  "string",
+  "number",
+  "boolean",
+  "any",
+  "void",
+  "never",
+  "unknown",
+  "object",
+  "symbol",
+  "bigint",
+  "undefined",
+  "null"
+]);
+var tokenizeJavaScript = (source) => {
+  const tokens = [];
+  const len = source.length;
+  let i = 0;
+  while (i < len) {
+    const ch = source[i];
+    if (ch === " " || ch === "	" || ch === "\n" || ch === "\r") {
+      i++;
+      continue;
+    }
+    if (ch === "/" && source[i + 1] === "/") {
+      const pos = i;
+      i += 2;
+      while (i < len && source[i] !== "\n") i++;
+      tokens.push({ type: "comment", start: pos, end: i });
+      continue;
+    }
+    if (ch === "/" && source[i + 1] === "*") {
+      const pos = i;
+      i += 2;
+      while (i < len && !(source[i] === "*" && source[i + 1] === "/")) i++;
+      i += 2;
+      tokens.push({ type: "comment", start: pos, end: i });
+      continue;
+    }
+    if (ch === "`") {
+      const pos = i;
+      i++;
+      while (i < len && source[i] !== "`") {
+        if (source[i] === "\\") i++;
+        i++;
+      }
+      i++;
+      tokens.push({ type: "string", start: pos, end: i });
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      const pos = i;
+      const quote = ch;
+      i++;
+      while (i < len && source[i] !== quote) {
+        if (source[i] === "\\") i++;
+        i++;
+      }
+      i++;
+      tokens.push({ type: "string", start: pos, end: i });
+      continue;
+    }
+    if (ch >= "0" && ch <= "9" || ch === "." && source[i + 1] >= "0" && source[i + 1] <= "9") {
+      const pos = i;
+      if (ch === "0" && (source[i + 1] === "x" || source[i + 1] === "X")) {
+        i += 2;
+        while (i < len && /[0-9a-fA-F_]/.test(source[i])) i++;
+      } else if (ch === "0" && (source[i + 1] === "b" || source[i + 1] === "B")) {
+        i += 2;
+        while (i < len && /[01_]/.test(source[i])) i++;
+      } else {
+        while (i < len && /[0-9_.]/.test(source[i])) i++;
+        if (i < len && (source[i] === "e" || source[i] === "E")) {
+          i++;
+          if (i < len && (source[i] === "+" || source[i] === "-")) i++;
+          while (i < len && source[i] >= "0" && source[i] <= "9") i++;
+        }
+      }
+      if (i < len && source[i] === "n") i++;
+      tokens.push({ type: "number", start: pos, end: i });
+      continue;
+    }
+    if (/[a-zA-Z_$]/.test(ch)) {
+      const pos = i;
+      i++;
+      while (i < len && /[a-zA-Z0-9_$]/.test(source[i])) i++;
+      const word = source.slice(pos, i);
+      let j = i;
+      while (j < len && (source[j] === " " || source[j] === "	")) j++;
+      if (TYPE_KEYWORDS.has(word)) {
+        tokens.push({ type: "type", start: pos, end: i });
+      } else if (KEYWORDS.has(word)) {
+        tokens.push({ type: "keyword", start: pos, end: i });
+      } else if (source[j] === "(") {
+        tokens.push({ type: "function", start: pos, end: i });
+      } else if (word[0] >= "A" && word[0] <= "Z") {
+        tokens.push({ type: "type", start: pos, end: i });
+      } else {
+        tokens.push({ type: "variable", start: pos, end: i });
+      }
+      continue;
+    }
+    if ("+-*/%=<>!&|^~?:".includes(ch)) {
+      const pos = i;
+      i++;
+      while (i < len && "+-*/%=<>!&|^~?:".includes(source[i])) i++;
+      tokens.push({ type: "operator", start: pos, end: i });
+      continue;
+    }
+    if ("(){}[];,.@#".includes(ch)) {
+      tokens.push({ type: "punctuation", start: i, end: i + 1 });
+      i++;
+      continue;
+    }
+    tokens.push({ type: "plain", start: i, end: i + 1 });
+    i++;
+  }
+  return tokens;
+};
+
+// src/engine/tokenizers/html.ts
+var tokenizeHtml = (source) => {
+  const tokens = [];
+  const len = source.length;
+  let i = 0;
+  while (i < len) {
+    if (source[i] === "<" && source.slice(i, i + 4) === "<!--") {
+      const pos2 = i;
+      i += 4;
+      while (i < len && source.slice(i, i + 3) !== "-->") i++;
+      i += 3;
+      tokens.push({ type: "comment", start: pos2, end: i });
+      continue;
+    }
+    if (source[i] === "<" && source.slice(i, i + 9).toUpperCase() === "<!DOCTYPE") {
+      const pos2 = i;
+      while (i < len && source[i] !== ">") i++;
+      i++;
+      tokens.push({ type: "keyword", start: pos2, end: i });
+      continue;
+    }
+    if (source[i] === "<") {
+      tokens.push({ type: "punctuation", start: i, end: i + 1 });
+      i++;
+      if (i < len && source[i] === "/") {
+        tokens.push({ type: "punctuation", start: i, end: i + 1 });
+        i++;
+      }
+      if (i < len && /[a-zA-Z]/.test(source[i])) {
+        const pos2 = i;
+        while (i < len && /[a-zA-Z0-9-]/.test(source[i])) i++;
+        tokens.push({ type: "tag", start: pos2, end: i });
+      }
+      while (i < len && source[i] !== ">" && !(source[i] === "/" && source[i + 1] === ">")) {
+        if (source[i] === " " || source[i] === "	" || source[i] === "\n" || source[i] === "\r") {
+          i++;
+          continue;
+        }
+        if (/[a-zA-Z_@:]/.test(source[i])) {
+          const pos2 = i;
+          while (i < len && /[a-zA-Z0-9_\-:.]/.test(source[i])) i++;
+          tokens.push({ type: "attribute", start: pos2, end: i });
+          while (i < len && (source[i] === " " || source[i] === "	")) i++;
+          if (i < len && source[i] === "=") {
+            tokens.push({ type: "operator", start: i, end: i + 1 });
+            i++;
+            while (i < len && (source[i] === " " || source[i] === "	")) i++;
+            if (i < len && (source[i] === '"' || source[i] === "'")) {
+              const quote = source[i];
+              const pos3 = i;
+              i++;
+              while (i < len && source[i] !== quote) i++;
+              i++;
+              tokens.push({ type: "attributeValue", start: pos3, end: i });
+            } else if (i < len && /[^\s>]/.test(source[i])) {
+              const pos3 = i;
+              while (i < len && /[^\s>]/.test(source[i])) i++;
+              tokens.push({ type: "attributeValue", start: pos3, end: i });
+            }
+          }
+          continue;
+        }
+        i++;
+      }
+      if (i < len && source[i] === "/") {
+        tokens.push({ type: "punctuation", start: i, end: i + 1 });
+        i++;
+      }
+      if (i < len && source[i] === ">") {
+        tokens.push({ type: "punctuation", start: i, end: i + 1 });
+        i++;
+      }
+      continue;
+    }
+    const pos = i;
+    while (i < len && source[i] !== "<") i++;
+    if (i > pos) {
+      tokens.push({ type: "plain", start: pos, end: i });
+    }
+  }
+  return tokens;
+};
+
+// src/engine/tokenizers/php.ts
+var PHP_KEYWORDS = /* @__PURE__ */ new Set([
+  "abstract",
+  "and",
+  "array",
+  "as",
+  "break",
+  "callable",
+  "case",
+  "catch",
+  "class",
+  "clone",
+  "const",
+  "continue",
+  "declare",
+  "default",
+  "do",
+  "echo",
+  "else",
+  "elseif",
+  "empty",
+  "enddeclare",
+  "endfor",
+  "endforeach",
+  "endif",
+  "endswitch",
+  "endwhile",
+  "enum",
+  "eval",
+  "exit",
+  "extends",
+  "false",
+  "final",
+  "finally",
+  "fn",
+  "for",
+  "foreach",
+  "function",
+  "global",
+  "goto",
+  "if",
+  "implements",
+  "include",
+  "include_once",
+  "instanceof",
+  "insteadof",
+  "interface",
+  "isset",
+  "list",
+  "match",
+  "namespace",
+  "new",
+  "null",
+  "or",
+  "print",
+  "private",
+  "protected",
+  "public",
+  "readonly",
+  "require",
+  "require_once",
+  "return",
+  "self",
+  "static",
+  "switch",
+  "throw",
+  "trait",
+  "true",
+  "try",
+  "unset",
+  "use",
+  "var",
+  "while",
+  "xor",
+  "yield"
+]);
+function tokenizePhpBlock(source, offset) {
+  const tokens = [];
+  const len = source.length;
+  let i = offset;
+  while (i < len) {
+    const ch = source[i];
+    if (ch === "?" && source[i + 1] === ">") {
+      return { tokens, end: i };
+    }
+    if (ch === " " || ch === "	" || ch === "\n" || ch === "\r") {
+      i++;
+      continue;
+    }
+    if (ch === "/" && source[i + 1] === "/" || ch === "#") {
+      const pos = i;
+      while (i < len && source[i] !== "\n") i++;
+      tokens.push({ type: "comment", start: pos, end: i });
+      continue;
+    }
+    if (ch === "/" && source[i + 1] === "*") {
+      const pos = i;
+      i += 2;
+      while (i < len && !(source[i] === "*" && source[i + 1] === "/")) i++;
+      i += 2;
+      tokens.push({ type: "comment", start: pos, end: i });
+      continue;
+    }
+    if (ch === "$") {
+      const pos = i;
+      i++;
+      while (i < len && /[a-zA-Z0-9_]/.test(source[i])) i++;
+      tokens.push({ type: "variable", start: pos, end: i });
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      const pos = i;
+      const quote = ch;
+      i++;
+      while (i < len && source[i] !== quote) {
+        if (source[i] === "\\") i++;
+        i++;
+      }
+      i++;
+      tokens.push({ type: "string", start: pos, end: i });
+      continue;
+    }
+    if (ch >= "0" && ch <= "9") {
+      const pos = i;
+      while (i < len && /[0-9_.]/.test(source[i])) i++;
+      if (i < len && (source[i] === "e" || source[i] === "E")) {
+        i++;
+        if (i < len && (source[i] === "+" || source[i] === "-")) i++;
+        while (i < len && source[i] >= "0" && source[i] <= "9") i++;
+      }
+      tokens.push({ type: "number", start: pos, end: i });
+      continue;
+    }
+    if (/[a-zA-Z_]/.test(ch)) {
+      const pos = i;
+      i++;
+      while (i < len && /[a-zA-Z0-9_]/.test(source[i])) i++;
+      const word = source.slice(pos, i);
+      let j = i;
+      while (j < len && (source[j] === " " || source[j] === "	")) j++;
+      if (PHP_KEYWORDS.has(word.toLowerCase())) {
+        tokens.push({ type: "keyword", start: pos, end: i });
+      } else if (source[j] === "(") {
+        tokens.push({ type: "function", start: pos, end: i });
+      } else if (word[0] >= "A" && word[0] <= "Z") {
+        tokens.push({ type: "type", start: pos, end: i });
+      } else {
+        tokens.push({ type: "variable", start: pos, end: i });
+      }
+      continue;
+    }
+    if ("+-*/%=<>!&|^~?:.".includes(ch)) {
+      const pos = i;
+      i++;
+      while (i < len && "+-*/%=<>!&|^~?:.".includes(source[i])) i++;
+      tokens.push({ type: "operator", start: pos, end: i });
+      continue;
+    }
+    if ("(){}[];,@\\".includes(ch)) {
+      tokens.push({ type: "punctuation", start: i, end: i + 1 });
+      i++;
+      continue;
+    }
+    tokens.push({ type: "plain", start: i, end: i + 1 });
+    i++;
+  }
+  return { tokens, end: i };
+}
+var tokenizePhp = (source) => {
+  const tokens = [];
+  const len = source.length;
+  let i = 0;
+  let htmlChunkStart = 0;
+  while (i < len) {
+    if (source[i] === "<" && source[i + 1] === "?") {
+      if (i > htmlChunkStart) {
+        const htmlChunk = source.slice(htmlChunkStart, i);
+        const htmlTokens = tokenizeHtml(htmlChunk);
+        for (const t of htmlTokens) {
+          tokens.push({ type: t.type, start: t.start + htmlChunkStart, end: t.end + htmlChunkStart });
+        }
+      }
+      const tagStart = i;
+      i += 2;
+      if (i < len && source.slice(i, i + 3).toLowerCase() === "php") {
+        i += 3;
+      } else if (i < len && source[i] === "=") {
+        i++;
+      }
+      tokens.push({ type: "keyword", start: tagStart, end: i });
+      const result = tokenizePhpBlock(source, i);
+      tokens.push(...result.tokens);
+      i = result.end;
+      if (i < len && source[i] === "?" && source[i + 1] === ">") {
+        tokens.push({ type: "keyword", start: i, end: i + 2 });
+        i += 2;
+      }
+      htmlChunkStart = i;
+      continue;
+    }
+    i++;
+  }
+  if (htmlChunkStart < len) {
+    const htmlChunk = source.slice(htmlChunkStart);
+    const htmlTokens = tokenizeHtml(htmlChunk);
+    for (const t of htmlTokens) {
+      tokens.push({ type: t.type, start: t.start + htmlChunkStart, end: t.end + htmlChunkStart });
+    }
+  }
+  return tokens;
+};
+
+// src/languages/builtin.ts
 registerLanguage({
   name: "JavaScript",
   aliases: ["js", "javascript", "jsx"],
-  support: () => langJavascript.javascript({ jsx: true })
+  tokenize: tokenizeJavaScript
 });
 registerLanguage({
   name: "TypeScript",
   aliases: ["ts", "typescript", "tsx"],
-  support: () => langJavascript.javascript({ typescript: true, jsx: true })
+  tokenize: tokenizeJavaScript
+  // Same tokenizer — JS/TS syntax is identical for highlighting
 });
 registerLanguage({
   name: "HTML",
   aliases: ["html", "htm"],
-  support: () => langHtml.html()
+  tokenize: tokenizeHtml
 });
 registerLanguage({
   name: "PHP",
   aliases: ["php"],
-  support: () => langPhp.php()
+  tokenize: tokenizePhp
 });
 var iconBtnClass = "inline-flex items-center justify-center rounded-md p-1 text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-200";
 function LanguageSelector() {
@@ -194,396 +788,286 @@ function getTheme(name) {
 function getRegisteredThemes() {
   return Array.from(themeRegistry.keys());
 }
-var editorTheme = view.EditorView.theme(
-  {
-    "&": {
-      backgroundColor: "#ffffff",
-      color: "#1e1e2e"
-    },
-    ".cm-content": {
-      caretColor: "#3b82f6"
-    },
-    ".cm-cursor, .cm-dropCursor": {
-      borderLeftColor: "#3b82f6"
-    },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
-      backgroundColor: "#dbeafe"
-    },
-    ".cm-activeLine": {
-      backgroundColor: "#f8fafc"
-    },
-    ".cm-gutters": {
-      backgroundColor: "#f8fafc",
-      color: "#94a3b8",
-      borderRight: "1px solid #e2e8f0"
-    },
-    ".cm-activeLineGutter": {
-      backgroundColor: "#f1f5f9",
-      color: "#475569"
-    },
-    ".cm-foldPlaceholder": {
-      backgroundColor: "#e2e8f0",
-      color: "#64748b",
-      border: "none"
-    },
-    ".cm-tooltip": {
-      backgroundColor: "#ffffff",
-      border: "1px solid #e2e8f0"
-    },
-    ".cm-tooltip .cm-tooltip-arrow:before": {
-      borderTopColor: "#e2e8f0",
-      borderBottomColor: "#e2e8f0"
-    },
-    ".cm-tooltip .cm-tooltip-arrow:after": {
-      borderTopColor: "#ffffff",
-      borderBottomColor: "#ffffff"
-    },
-    ".cm-tooltip-autocomplete": {
-      "& > ul > li[aria-selected]": {
-        backgroundColor: "#dbeafe",
-        color: "#1e40af"
-      }
-    },
-    ".cm-searchMatch": {
-      backgroundColor: "#fef08a",
-      outline: "1px solid #facc15"
-    },
-    ".cm-searchMatch.cm-searchMatch-selected": {
-      backgroundColor: "#bbf7d0",
-      outline: "1px solid #22c55e"
-    },
-    ".cm-selectionMatch": {
-      backgroundColor: "#e0f2fe"
-    },
-    ".cm-matchingBracket, .cm-nonmatchingBracket": {
-      outline: "1px solid #94a3b8"
-    },
-    ".cm-matchingBracket": {
-      backgroundColor: "#e0f2fe"
-    }
-  },
-  { dark: false }
-);
-var highlightStyle = language.HighlightStyle.define([
-  { tag: highlight.tags.keyword, color: "#8b5cf6" },
-  { tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.macroName], color: "#1e1e2e" },
-  { tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName], color: "#2563eb" },
-  { tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)], color: "#d97706" },
-  { tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], color: "#1e1e2e" },
-  { tag: [highlight.tags.typeName, highlight.tags.className, highlight.tags.number, highlight.tags.changed, highlight.tags.annotation, highlight.tags.modifier, highlight.tags.self, highlight.tags.namespace], color: "#d97706" },
-  { tag: [highlight.tags.operator, highlight.tags.operatorKeyword, highlight.tags.url, highlight.tags.escape, highlight.tags.regexp, highlight.tags.link, highlight.tags.special(highlight.tags.string)], color: "#0891b2" },
-  { tag: [highlight.tags.meta, highlight.tags.comment], color: "#94a3b8", fontStyle: "italic" },
-  { tag: highlight.tags.strong, fontWeight: "bold" },
-  { tag: highlight.tags.emphasis, fontStyle: "italic" },
-  { tag: highlight.tags.strikethrough, textDecoration: "line-through" },
-  { tag: highlight.tags.link, color: "#2563eb", textDecoration: "underline" },
-  { tag: highlight.tags.heading, fontWeight: "bold", color: "#8b5cf6" },
-  { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: "#d97706" },
-  { tag: [highlight.tags.processingInstruction, highlight.tags.string, highlight.tags.inserted], color: "#059669" },
-  { tag: highlight.tags.invalid, color: "#ef4444" },
-  { tag: highlight.tags.tagName, color: "#dc2626" },
-  { tag: highlight.tags.attributeName, color: "#d97706" },
-  { tag: highlight.tags.attributeValue, color: "#059669" }
-]);
+
+// src/themes/light.ts
 registerTheme({
   name: "light",
   variant: "light",
-  editorTheme,
-  highlightStyle
+  colors: {
+    background: "#ffffff",
+    foreground: "#1e1e2e",
+    gutterBackground: "#f8fafc",
+    gutterForeground: "#94a3b8",
+    gutterBorder: "#e2e8f0",
+    activeLineBackground: "#f8fafc",
+    selectionBackground: "#dbeafe",
+    cursorColor: "#3b82f6",
+    keyword: "#8b5cf6",
+    string: "#059669",
+    comment: "#94a3b8",
+    number: "#d97706",
+    operator: "#0891b2",
+    function: "#2563eb",
+    type: "#d97706",
+    tag: "#dc2626",
+    attribute: "#d97706",
+    attributeValue: "#059669",
+    punctuation: "#64748b",
+    variable: "#1e1e2e"
+  }
 });
-var editorTheme2 = view.EditorView.theme(
-  {
-    "&": {
-      backgroundColor: "#18181b",
-      color: "#e4e4e7"
-    },
-    ".cm-content": {
-      caretColor: "#60a5fa"
-    },
-    ".cm-cursor, .cm-dropCursor": {
-      borderLeftColor: "#60a5fa"
-    },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
-      backgroundColor: "#1e3a5f"
-    },
-    ".cm-activeLine": {
-      backgroundColor: "#27272a"
-    },
-    ".cm-gutters": {
-      backgroundColor: "#18181b",
-      color: "#52525b",
-      borderRight: "1px solid #27272a"
-    },
-    ".cm-activeLineGutter": {
-      backgroundColor: "#27272a",
-      color: "#a1a1aa"
-    },
-    ".cm-foldPlaceholder": {
-      backgroundColor: "#3f3f46",
-      color: "#a1a1aa",
-      border: "none"
-    },
-    ".cm-tooltip": {
-      backgroundColor: "#27272a",
-      border: "1px solid #3f3f46",
-      color: "#e4e4e7"
-    },
-    ".cm-tooltip .cm-tooltip-arrow:before": {
-      borderTopColor: "#3f3f46",
-      borderBottomColor: "#3f3f46"
-    },
-    ".cm-tooltip .cm-tooltip-arrow:after": {
-      borderTopColor: "#27272a",
-      borderBottomColor: "#27272a"
-    },
-    ".cm-tooltip-autocomplete": {
-      "& > ul > li[aria-selected]": {
-        backgroundColor: "#1e3a5f",
-        color: "#93c5fd"
-      }
-    },
-    ".cm-searchMatch": {
-      backgroundColor: "#854d0e",
-      outline: "1px solid #a16207"
-    },
-    ".cm-searchMatch.cm-searchMatch-selected": {
-      backgroundColor: "#166534",
-      outline: "1px solid #15803d"
-    },
-    ".cm-selectionMatch": {
-      backgroundColor: "#1e3a5f"
-    },
-    ".cm-matchingBracket, .cm-nonmatchingBracket": {
-      outline: "1px solid #71717a"
-    },
-    ".cm-matchingBracket": {
-      backgroundColor: "#3f3f46"
-    }
-  },
-  { dark: true }
-);
-var highlightStyle2 = language.HighlightStyle.define([
-  { tag: highlight.tags.keyword, color: "#c084fc" },
-  { tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.macroName], color: "#e4e4e7" },
-  { tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName], color: "#60a5fa" },
-  { tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)], color: "#fbbf24" },
-  { tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], color: "#e4e4e7" },
-  { tag: [highlight.tags.typeName, highlight.tags.className, highlight.tags.number, highlight.tags.changed, highlight.tags.annotation, highlight.tags.modifier, highlight.tags.self, highlight.tags.namespace], color: "#fbbf24" },
-  { tag: [highlight.tags.operator, highlight.tags.operatorKeyword, highlight.tags.url, highlight.tags.escape, highlight.tags.regexp, highlight.tags.link, highlight.tags.special(highlight.tags.string)], color: "#22d3ee" },
-  { tag: [highlight.tags.meta, highlight.tags.comment], color: "#71717a", fontStyle: "italic" },
-  { tag: highlight.tags.strong, fontWeight: "bold" },
-  { tag: highlight.tags.emphasis, fontStyle: "italic" },
-  { tag: highlight.tags.strikethrough, textDecoration: "line-through" },
-  { tag: highlight.tags.link, color: "#60a5fa", textDecoration: "underline" },
-  { tag: highlight.tags.heading, fontWeight: "bold", color: "#c084fc" },
-  { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: "#fbbf24" },
-  { tag: [highlight.tags.processingInstruction, highlight.tags.string, highlight.tags.inserted], color: "#34d399" },
-  { tag: highlight.tags.invalid, color: "#f87171" },
-  { tag: highlight.tags.tagName, color: "#f87171" },
-  { tag: highlight.tags.attributeName, color: "#fbbf24" },
-  { tag: highlight.tags.attributeValue, color: "#34d399" }
-]);
+
+// src/themes/dark.ts
 registerTheme({
   name: "dark",
   variant: "dark",
-  editorTheme: editorTheme2,
-  highlightStyle: highlightStyle2
+  colors: {
+    background: "#18181b",
+    foreground: "#e4e4e7",
+    gutterBackground: "#18181b",
+    gutterForeground: "#52525b",
+    gutterBorder: "#27272a",
+    activeLineBackground: "#27272a",
+    selectionBackground: "#1e3a5f",
+    cursorColor: "#60a5fa",
+    keyword: "#c084fc",
+    string: "#34d399",
+    comment: "#71717a",
+    number: "#fbbf24",
+    operator: "#22d3ee",
+    function: "#60a5fa",
+    type: "#fbbf24",
+    tag: "#f87171",
+    attribute: "#fbbf24",
+    attributeValue: "#34d399",
+    punctuation: "#a1a1aa",
+    variable: "#e4e4e7"
+  }
 });
 
-// src/hooks/use-codemirror.ts
-function resolveLanguageExtension(name) {
-  const def = getLanguage(name);
-  if (!def) return [];
-  const result = def.support();
-  if (result instanceof Promise) {
-    return [];
-  }
-  return result;
+// src/engine/highlight.ts
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function resolveThemeExtensions(name) {
-  const def = getTheme(name);
-  if (!def) {
-    const fallback = getTheme("dark");
-    if (!fallback) return [];
-    return [fallback.editorTheme, language.syntaxHighlighting(fallback.highlightStyle)];
+function highlightCode(source, tokens, colors) {
+  if (tokens.length === 0) return escapeHtml(source);
+  const colorMap = {
+    keyword: colors.keyword,
+    string: colors.string,
+    comment: colors.comment,
+    number: colors.number,
+    operator: colors.operator,
+    function: colors.function,
+    type: colors.type,
+    tag: colors.tag,
+    attribute: colors.attribute,
+    attributeValue: colors.attributeValue,
+    punctuation: colors.punctuation,
+    variable: colors.variable,
+    plain: colors.foreground
+  };
+  const parts = [];
+  let pos = 0;
+  for (const token of tokens) {
+    if (token.start > pos) {
+      parts.push(escapeHtml(source.slice(pos, token.start)));
+    }
+    const text = escapeHtml(source.slice(token.start, token.end));
+    const color = colorMap[token.type];
+    const style = token.type === "comment" ? `color:${color};font-style:italic` : `color:${color}`;
+    parts.push(`<span style="${style}">${text}</span>`);
+    pos = token.end;
+  }
+  if (pos < source.length) {
+    parts.push(escapeHtml(source.slice(pos)));
   }
-  return [def.editorTheme, language.syntaxHighlighting(def.highlightStyle)];
+  return parts.join("");
 }
-function useCodemirror({
-  containerRef,
+
+// src/hooks/use-editor-engine.ts
+var DEFAULT_COLORS = {
+  background: "#18181b",
+  foreground: "#e4e4e7",
+  gutterBackground: "#18181b",
+  gutterForeground: "#52525b",
+  gutterBorder: "#27272a",
+  activeLineBackground: "#27272a",
+  selectionBackground: "#1e3a5f",
+  cursorColor: "#60a5fa",
+  keyword: "#c084fc",
+  string: "#34d399",
+  comment: "#71717a",
+  number: "#fbbf24",
+  operator: "#22d3ee",
+  function: "#60a5fa",
+  type: "#fbbf24",
+  tag: "#f87171",
+  attribute: "#fbbf24",
+  attributeValue: "#34d399",
+  punctuation: "#a1a1aa",
+  variable: "#e4e4e7"
+};
+function useEditorEngine({
   value,
   onChange,
-  language: language$1,
+  language,
   theme,
   readOnly,
-  lineNumbers,
-  wordWrap,
   tabSize,
-  placeholder,
-  minHeight,
-  maxHeight,
-  searchEnabled,
-  additionalExtensions,
   onCursorChange
 }) {
-  const viewRef = react.useRef(null);
-  const isExternalUpdate = react.useRef(false);
+  const textareaRef = react.useRef(null);
   const onChangeRef = react.useRef(onChange);
   const onCursorChangeRef = react.useRef(onCursorChange);
   onChangeRef.current = onChange;
   onCursorChangeRef.current = onCursorChange;
-  const languageComp = react.useRef(new state.Compartment());
-  const themeComp = react.useRef(new state.Compartment());
-  const lineNumbersComp = react.useRef(new state.Compartment());
-  const wrapComp = react.useRef(new state.Compartment());
-  const tabSizeComp = react.useRef(new state.Compartment());
-  const readOnlyComp = react.useRef(new state.Compartment());
-  const placeholderComp = react.useRef(new state.Compartment());
-  const heightComp = react.useRef(new state.Compartment());
-  function buildHeightExtension(min, max) {
-    const styles = {};
-    if (min) styles.minHeight = `${min}px`;
-    if (max) styles.maxHeight = `${max}px`;
-    if (Object.keys(styles).length === 0) return [];
-    return view.EditorView.theme({
-      "&": { ...max ? { maxHeight: `${max}px` } : {} },
-      ".cm-scroller": { overflow: "auto", ...styles }
-    });
-  }
-  react.useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-    const updateListener = view.EditorView.updateListener.of((update) => {
-      if (update.docChanged && !isExternalUpdate.current) {
-        onChangeRef.current?.(update.state.doc.toString());
-      }
-      if (update.selectionSet || update.docChanged) {
-        const pos = update.state.selection.main;
-        const line = update.state.doc.lineAt(pos.head);
-        onCursorChangeRef.current?.({
-          line: line.number,
-          col: pos.head - line.from + 1,
-          selectionLength: Math.abs(pos.to - pos.from)
-        });
-      }
-    });
-    const state$1 = state.EditorState.create({
-      doc: value,
-      extensions: [
-        // Compartmentalized extensions
-        languageComp.current.of(resolveLanguageExtension(language$1)),
-        themeComp.current.of(resolveThemeExtensions(theme)),
-        lineNumbersComp.current.of(lineNumbers ? [view.lineNumbers(), view.highlightActiveLineGutter()] : []),
-        wrapComp.current.of(wordWrap ? view.EditorView.lineWrapping : []),
-        tabSizeComp.current.of(state.EditorState.tabSize.of(tabSize)),
-        readOnlyComp.current.of(state.EditorState.readOnly.of(readOnly)),
-        placeholderComp.current.of(placeholder ? view.placeholder(placeholder) : []),
-        heightComp.current.of(buildHeightExtension(minHeight, maxHeight)),
-        // Static extensions
-        commands.history(),
-        language.foldGutter(),
-        view.drawSelection(),
-        view.dropCursor(),
-        language.indentOnInput(),
-        language.bracketMatching(),
-        autocomplete.closeBrackets(),
-        autocomplete.autocompletion(),
-        view.highlightActiveLine(),
-        search.highlightSelectionMatches(),
-        view.keymap.of([
-          ...autocomplete.closeBracketsKeymap,
-          ...commands.defaultKeymap,
-          ...search.searchKeymap,
-          ...commands.historyKeymap,
-          ...language.foldKeymap,
-          ...autocomplete.completionKeymap,
-          commands.indentWithTab
-        ]),
-        updateListener,
-        ...additionalExtensions ?? []
-      ]
-    });
-    const view$1 = new view.EditorView({ state: state$1, parent: container });
-    viewRef.current = view$1;
-    return () => {
-      view$1.destroy();
-      viewRef.current = null;
-    };
-  }, [containerRef]);
-  react.useEffect(() => {
-    const view = viewRef.current;
-    if (!view) return;
-    const currentDoc = view.state.doc.toString();
-    if (value !== currentDoc) {
-      isExternalUpdate.current = true;
-      view.dispatch({
-        changes: { from: 0, to: currentDoc.length, insert: value }
-      });
-      isExternalUpdate.current = false;
+  const [scrollTop, setScrollTop] = react.useState(0);
+  const [scrollLeft, setScrollLeft] = react.useState(0);
+  const [activeLine, setActiveLine] = react.useState(1);
+  const themeColors = react.useMemo(() => {
+    const def = getTheme(theme);
+    return def?.colors ?? DEFAULT_COLORS;
+  }, [theme]);
+  const tokenizer = react.useMemo(() => {
+    const def = getLanguage(language);
+    return def?.tokenize ?? null;
+  }, [language]);
+  const highlightedHtml = react.useMemo(() => {
+    if (!tokenizer) {
+      return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    }
+    const tokens = tokenizer(value);
+    return highlightCode(value, tokens, themeColors);
+  }, [value, tokenizer, themeColors]);
+  const lineCount = react.useMemo(() => {
+    let count = 1;
+    for (let i = 0; i < value.length; i++) {
+      if (value[i] === "\n") count++;
     }
+    return count;
   }, [value]);
   react.useEffect(() => {
-    const view = viewRef.current;
-    if (!view) return;
-    const def = getLanguage(language$1);
-    if (!def) {
-      view.dispatch({ effects: languageComp.current.reconfigure([]) });
-      return;
-    }
-    const result = def.support();
-    if (result instanceof Promise) {
-      result.then((ext) => {
-        if (viewRef.current) {
-          viewRef.current.dispatch({ effects: languageComp.current.reconfigure(ext) });
+    const ta = textareaRef.current;
+    if (!ta || ta.value === value) return;
+    const { selectionStart, selectionEnd } = ta;
+    ta.value = value;
+    ta.selectionStart = selectionStart;
+    ta.selectionEnd = selectionEnd;
+  }, [value]);
+  const updateCursorInfo = react.useCallback(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    const pos = ta.selectionStart;
+    const textBefore = ta.value.slice(0, pos);
+    const line = (textBefore.match(/\n/g) || []).length + 1;
+    const lastNewline = textBefore.lastIndexOf("\n");
+    const col = pos - lastNewline;
+    const selLen = Math.abs(ta.selectionEnd - ta.selectionStart);
+    setActiveLine(line);
+    onCursorChangeRef.current?.({ line, col, selectionLength: selLen });
+  }, []);
+  const handleInput = react.useCallback(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    onChangeRef.current?.(ta.value);
+    updateCursorInfo();
+  }, [updateCursorInfo]);
+  const handleSelect = react.useCallback(() => {
+    updateCursorInfo();
+  }, [updateCursorInfo]);
+  const handleScroll = react.useCallback(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    setScrollTop(ta.scrollTop);
+    setScrollLeft(ta.scrollLeft);
+  }, []);
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (readOnly) {
+        if (e.key === "c" && (e.metaKey || e.ctrlKey)) return;
+        if (e.key === "a" && (e.metaKey || e.ctrlKey)) return;
+        e.preventDefault();
+        return;
+      }
+      if (e.key === "Tab") {
+        e.preventDefault();
+        const ta = e.currentTarget;
+        const start = ta.selectionStart;
+        const end = ta.selectionEnd;
+        const spaces = " ".repeat(tabSize);
+        if (e.shiftKey) {
+          const lines = ta.value.split("\n");
+          const startLine = ta.value.slice(0, start).split("\n").length - 1;
+          const endLine = ta.value.slice(0, end).split("\n").length - 1;
+          let removed = 0;
+          for (let i = startLine; i <= endLine; i++) {
+            const match = lines[i].match(new RegExp(`^ {1,${tabSize}}`));
+            if (match) {
+              removed += match[0].length;
+              lines[i] = lines[i].slice(match[0].length);
+            }
+          }
+          const newValue = lines.join("\n");
+          ta.value = newValue;
+          ta.selectionStart = Math.max(0, start - (startLine === endLine ? removed : tabSize));
+          ta.selectionEnd = Math.max(0, end - removed);
+          onChangeRef.current?.(newValue);
+        } else if (start !== end) {
+          const lines = ta.value.split("\n");
+          const startLine = ta.value.slice(0, start).split("\n").length - 1;
+          const endLine = ta.value.slice(0, end).split("\n").length - 1;
+          for (let i = startLine; i <= endLine; i++) {
+            lines[i] = spaces + lines[i];
+          }
+          const newValue = lines.join("\n");
+          ta.value = newValue;
+          ta.selectionStart = start + tabSize;
+          ta.selectionEnd = end + (endLine - startLine + 1) * tabSize;
+          onChangeRef.current?.(newValue);
+        } else {
+          const before = ta.value.slice(0, start);
+          const after = ta.value.slice(end);
+          ta.value = before + spaces + after;
+          ta.selectionStart = ta.selectionEnd = start + tabSize;
+          onChangeRef.current?.(ta.value);
         }
-      });
-    } else {
-      view.dispatch({ effects: languageComp.current.reconfigure(result) });
-    }
-  }, [language$1]);
-  react.useEffect(() => {
-    const view = viewRef.current;
-    if (!view) return;
-    view.dispatch({ effects: themeComp.current.reconfigure(resolveThemeExtensions(theme)) });
-  }, [theme]);
-  react.useEffect(() => {
-    const view$1 = viewRef.current;
-    if (!view$1) return;
-    view$1.dispatch({
-      effects: lineNumbersComp.current.reconfigure(
-        lineNumbers ? [view.lineNumbers(), view.highlightActiveLineGutter()] : []
-      )
-    });
-  }, [lineNumbers]);
-  react.useEffect(() => {
-    const view$1 = viewRef.current;
-    if (!view$1) return;
-    view$1.dispatch({
-      effects: wrapComp.current.reconfigure(wordWrap ? view.EditorView.lineWrapping : [])
-    });
-  }, [wordWrap]);
-  react.useEffect(() => {
-    const view = viewRef.current;
-    if (!view) return;
-    view.dispatch({
-      effects: tabSizeComp.current.reconfigure(state.EditorState.tabSize.of(tabSize))
-    });
-  }, [tabSize]);
-  react.useEffect(() => {
-    const view = viewRef.current;
-    if (!view) return;
-    view.dispatch({
-      effects: readOnlyComp.current.reconfigure(state.EditorState.readOnly.of(readOnly))
-    });
-  }, [readOnly]);
-  react.useEffect(() => {
-    const view$1 = viewRef.current;
-    if (!view$1) return;
-    view$1.dispatch({
-      effects: placeholderComp.current.reconfigure(placeholder ? view.placeholder(placeholder) : [])
-    });
-  }, [placeholder]);
-  return { view: viewRef.current };
+        updateCursorInfo();
+        return;
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        const ta = e.currentTarget;
+        const start = ta.selectionStart;
+        const end = ta.selectionEnd;
+        const before = ta.value.slice(0, start);
+        const after = ta.value.slice(end);
+        const currentLine = before.split("\n").pop() || "";
+        const indent = currentLine.match(/^(\s*)/)?.[1] || "";
+        const lastChar = before.trimEnd().slice(-1);
+        const extraIndent = lastChar === "{" || lastChar === "(" ? " ".repeat(tabSize) : "";
+        const insertion = "\n" + indent + extraIndent;
+        ta.value = before + insertion + after;
+        ta.selectionStart = ta.selectionEnd = start + insertion.length;
+        onChangeRef.current?.(ta.value);
+        updateCursorInfo();
+        return;
+      }
+    },
+    [readOnly, tabSize, updateCursorInfo]
+  );
+  return {
+    textareaRef,
+    highlightedHtml,
+    lineCount,
+    activeLine,
+    themeColors,
+    handleKeyDown,
+    handleInput,
+    handleScroll,
+    handleSelect,
+    scrollTop,
+    scrollLeft
+  };
 }
 function subscribe(callback) {
   const mq = window.matchMedia("(prefers-color-scheme: dark)");
@@ -614,8 +1098,7 @@ function CodeEditorRoot({
   tabSize: tabSizeProp = 2,
   placeholder,
   minHeight,
-  maxHeight,
-  extensions: additionalExtensions
+  maxHeight
 }) {
   const [currentValue, setCurrentValue] = reactFancy.useControllableState(valueProp, defaultValue, onChange);
   const isDark = useDarkMode();
@@ -637,22 +1120,14 @@ function CodeEditorRoot({
   const [isWordWrap, setIsWordWrap] = react.useState(wordWrapProp);
   const [cursorPosition, setCursorPosition] = react.useState({ line: 1, col: 1 });
   const [selectionLength, setSelectionLength] = react.useState(0);
-  const containerRef = react.useRef(null);
-  const { view } = useCodemirror({
-    containerRef,
+  react.useRef(null);
+  const engineReturn = useEditorEngine({
     value: currentValue,
     onChange: setCurrentValue,
     language: currentLanguage,
     theme: resolvedTheme,
     readOnly,
-    lineNumbers: showLineNumbers,
-    wordWrap: isWordWrap,
     tabSize: tabSizeProp,
-    placeholder,
-    minHeight,
-    maxHeight,
-    searchEnabled: true,
-    additionalExtensions,
     onCursorChange: ({ line, col, selectionLength: sel }) => {
       setCursorPosition({ line, col });
       setSelectionLength(sel);
@@ -660,19 +1135,25 @@ function CodeEditorRoot({
   });
   const contextValue = react.useMemo(
     () => ({
-      view,
-      getValue: () => view?.state.doc.toString() ?? currentValue,
+      getValue: () => engineReturn.textareaRef.current?.value ?? currentValue,
       getSelection: () => {
-        if (!view) return "";
-        const sel = view.state.selection.main;
-        return view.state.sliceDoc(sel.from, sel.to);
+        const ta = engineReturn.textareaRef.current;
+        if (!ta) return "";
+        return ta.value.slice(ta.selectionStart, ta.selectionEnd);
       },
       setValue: (v) => setCurrentValue(v),
       replaceSelection: (text) => {
-        if (!view) return;
-        view.dispatch(view.state.replaceSelection(text));
+        const ta = engineReturn.textareaRef.current;
+        if (!ta) return;
+        const start = ta.selectionStart;
+        const end = ta.selectionEnd;
+        const before = ta.value.slice(0, start);
+        const after = ta.value.slice(end);
+        ta.value = before + text + after;
+        ta.selectionStart = ta.selectionEnd = start + text.length;
+        setCurrentValue(ta.value);
       },
-      focus: () => view?.focus(),
+      focus: () => engineReturn.textareaRef.current?.focus(),
       language: currentLanguage,
       setLanguage,
       theme: resolvedTheme,
@@ -683,23 +1164,24 @@ function CodeEditorRoot({
       toggleWordWrap: () => setIsWordWrap((w) => !w),
       toggleLineNumbers: () => setShowLineNumbers((l) => !l),
       copyToClipboard: async () => {
-        const text = view?.state.doc.toString() ?? currentValue;
+        const text = engineReturn.textareaRef.current?.value ?? currentValue;
         await navigator.clipboard.writeText(text);
       },
       cursorPosition,
       selectionLength,
-      _containerRef: containerRef,
+      placeholder,
+      _engineReturn: engineReturn,
       _minHeight: minHeight,
       _maxHeight: maxHeight
     }),
-    [view, currentValue, currentLanguage, setLanguage, resolvedTheme, readOnly, showLineNumbers, isWordWrap, tabSizeProp, cursorPosition, selectionLength, setCurrentValue, minHeight, maxHeight]
+    [engineReturn, currentValue, currentLanguage, setLanguage, resolvedTheme, readOnly, showLineNumbers, isWordWrap, tabSizeProp, cursorPosition, selectionLength, setCurrentValue, placeholder, minHeight, maxHeight]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(CodeEditorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "data-fancy-code-editor": "",
       className: reactFancy.cn(
-        "overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900",
+        "overflow-hidden",
         className
       ),
       children