@formulaxjs/editor 0.1.1 → 0.3.0

package/dist/index.global.js

@@ -21,6 +21,105 @@ var FormulaX = (() => {
   };
   var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+  // ../kity-runtime/public/assets/images/toolbar/btn.png
+  var btn_default;
+  var init_btn = __esm({
+    "../kity-runtime/public/assets/images/toolbar/btn.png"() {
+      btn_default = "./btn-5DANP6JY.png";
+    }
+  });
+
+  // ../kity-runtime/public/assets/images/toolbar/other.png
+  var other_default;
+  var init_other = __esm({
+    "../kity-runtime/public/assets/images/toolbar/other.png"() {
+      other_default = "./other-OMWJFGL5.png";
+    }
+  });
+
+  // ../kity-runtime/public/assets/styles/editor.css?url
+  var editor_default;
+  var init_editor = __esm({
+    "../kity-runtime/public/assets/styles/editor.css?url"() {
+      editor_default = "./editor-JT5KLVXX.css?url";
+    }
+  });
+
+  // ../kity-runtime/public/resource/KF_AMS_BB.woff
+  var KF_AMS_BB_default;
+  var init_KF_AMS_BB = __esm({
+    "../kity-runtime/public/resource/KF_AMS_BB.woff"() {
+      KF_AMS_BB_default = "./KF_AMS_BB-5QF7FUSO.woff";
+    }
+  });
+
+  // ../kity-runtime/public/resource/KF_AMS_CAL.woff
+  var KF_AMS_CAL_default;
+  var init_KF_AMS_CAL = __esm({
+    "../kity-runtime/public/resource/KF_AMS_CAL.woff"() {
+      KF_AMS_CAL_default = "./KF_AMS_CAL-NXRNLAZN.woff";
+    }
+  });
+
+  // ../kity-runtime/public/resource/KF_AMS_FRAK.woff
+  var KF_AMS_FRAK_default;
+  var init_KF_AMS_FRAK = __esm({
+    "../kity-runtime/public/resource/KF_AMS_FRAK.woff"() {
+      KF_AMS_FRAK_default = "./KF_AMS_FRAK-CO33WWN4.woff";
+    }
+  });
+
+  // ../kity-runtime/public/resource/KF_AMS_MAIN.woff
+  var KF_AMS_MAIN_default;
+  var init_KF_AMS_MAIN = __esm({
+    "../kity-runtime/public/resource/KF_AMS_MAIN.woff"() {
+      KF_AMS_MAIN_default = "./KF_AMS_MAIN-25QJVAWY.woff";
+    }
+  });
+
+  // ../kity-runtime/public/resource/KF_AMS_ROMAN.woff
+  var KF_AMS_ROMAN_default;
+  var init_KF_AMS_ROMAN = __esm({
+    "../kity-runtime/public/resource/KF_AMS_ROMAN.woff"() {
+      KF_AMS_ROMAN_default = "./KF_AMS_ROMAN-243BR7HH.woff";
+    }
+  });
+
+  // ../kity-runtime/src/asset-manifest.ts
+  var kityFontAssets, kityToolbarAssets, kityStyleAssets, kityAssetManifest;
+  var init_asset_manifest = __esm({
+    "../kity-runtime/src/asset-manifest.ts"() {
+      "use strict";
+      init_btn();
+      init_other();
+      init_editor();
+      init_KF_AMS_BB();
+      init_KF_AMS_CAL();
+      init_KF_AMS_FRAK();
+      init_KF_AMS_MAIN();
+      init_KF_AMS_ROMAN();
+      kityFontAssets = {
+        KF_AMS_BB: KF_AMS_BB_default,
+        KF_AMS_CAL: KF_AMS_CAL_default,
+        KF_AMS_FRAK: KF_AMS_FRAK_default,
+        KF_AMS_MAIN: KF_AMS_MAIN_default,
+        KF_AMS_ROMAN: KF_AMS_ROMAN_default
+      };
+      kityToolbarAssets = {
+        btn: btn_default,
+        other: other_default
+      };
+      kityStyleAssets = {
+        editor: editor_default
+      };
+      kityAssetManifest = {
+        fonts: kityFontAssets,
+        toolbar: kityToolbarAssets,
+        styles: kityStyleAssets
+      };
+    }
+  });
+
   // ../kity-runtime/src/vendor/legacy-box-type.ts
   var legacyBoxType;
   var init_legacy_box_type = __esm({
@@ -4919,28 +5018,30 @@ var FormulaX = (() => {
 
   // ../kity-runtime/src/vendor/legacy-ui-utils.ts
   function createLegacyUiUtils() {
-    return {
-      ele: createElement,
-      getRectBox,
-      on(target, type, fn) {
-        addEvent(target, type, fn);
-        return this;
-      },
-      delegate(target, selector, type, fn) {
-        delegateEvent(target, selector, type, fn);
-        return this;
-      },
-      publish(topic, ...args) {
-        publish(topic, ...args);
-      },
-      subscribe,
-      getClassList
-    };
+    return legacyUiUtils;
   }
+  var legacyUiUtils;
   var init_legacy_ui_utils = __esm({
     "../kity-runtime/src/vendor/legacy-ui-utils.ts"() {
       "use strict";
       init_dom_utils();
+      legacyUiUtils = {
+        ele: createElement,
+        getRectBox,
+        on(target, type, fn) {
+          addEvent(target, type, fn);
+          return this;
+        },
+        delegate(target, selector, type, fn) {
+          delegateEvent(target, selector, type, fn);
+          return this;
+        },
+        publish(topic, ...args) {
+          publish(topic, ...args);
+        },
+        subscribe,
+        getClassList
+      };
     }
   });
 
@@ -4963,7 +5064,11 @@ var FormulaX = (() => {
   var init_toolbar_assets = __esm({
     "../kity-runtime/src/toolbar-assets.ts"() {
       "use strict";
-      toolbarAssetFileMap = {};
+      init_asset_manifest();
+      toolbarAssetFileMap = {
+        "btn.png": kityToolbarAssets.btn,
+        "other.png": kityToolbarAssets.other
+      };
     }
   });
 
@@ -7357,18 +7462,18 @@ var FormulaX = (() => {
             this.addPoint(p0[0], p0[1]);
             this.addPoint(p3[0], p3[1]);
             for (i = 0; i <= 1; i++) {
-              let f = function(t3) {
-                return Math.pow(1 - t3, 3) * p0[i] + 3 * Math.pow(1 - t3, 2) * t3 * p1[i] + 3 * (1 - t3) * Math.pow(t3, 2) * p2[i] + Math.pow(t3, 3) * p3[i];
+              let f = function(t) {
+                return Math.pow(1 - t, 3) * p0[i] + 3 * Math.pow(1 - t, 2) * t * p1[i] + 3 * (1 - t) * Math.pow(t, 2) * p2[i] + Math.pow(t, 3) * p3[i];
               };
               let b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i];
               let a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i];
               let c = 3 * p1[i] - 3 * p0[i];
               if (a == 0) {
                 if (b == 0) continue;
-                let t3 = -c / b;
-                if (0 < t3 && t3 < 1) {
-                  if (i == 0) this.addX(f(t3));
-                  if (i == 1) this.addY(f(t3));
+                let t = -c / b;
+                if (0 < t && t < 1) {
+                  if (i == 0) this.addX(f(t));
+                  if (i == 1) this.addY(f(t));
                 }
                 continue;
               }
@@ -14197,16 +14302,16 @@ var FormulaX = (() => {
     };
     _p[5] = {
       value: function() {
-        let t2 = true;
+        let t = true;
         return {
-          ".": t2,
-          "{": t2,
-          "}": t2,
-          "[": t2,
-          "]": t2,
-          "(": t2,
-          ")": t2,
-          "|": t2
+          ".": t,
+          "{": t,
+          "}": t,
+          "[": t,
+          "]": t,
+          "(": t,
+          ")": t,
+          "|": t
         };
       }
     };
@@ -14871,7 +14976,7 @@ var FormulaX = (() => {
     return serviceObject;
   }
   var defaultOptions, components, kity2, kf, KFEditor, editor_default2;
-  var init_editor = __esm({
+  var init_editor2 = __esm({
     "../kity-runtime/src/legacy/editor.ts"() {
       "use strict";
       init_legacy_utils();
@@ -14991,7 +15096,7 @@ var FormulaX = (() => {
   var init_factory = __esm({
     "../kity-runtime/src/legacy/factory.ts"() {
       "use strict";
-      init_editor();
+      init_editor2();
       init_runtime_interop();
       EditorWrapper = class {
         callbacks = [];
@@ -19949,7 +20054,7 @@ var FormulaX = (() => {
   var init_start = __esm({
     "../kity-runtime/src/boot/start.ts"() {
       "use strict";
-      init_editor();
+      init_editor2();
       init_factory();
       init_ui();
       init_parser();
@@ -19966,87 +20071,18 @@ var FormulaX = (() => {
   // src/index.ts
   var index_exports = {};
   __export(index_exports, {
-    DEFAULT_FORMULA_ATTRIBUTE: () => DEFAULT_FORMULA_ATTRIBUTE,
-    DEFAULT_FORMULA_CLASS: () => DEFAULT_FORMULA_CLASS,
-    FORMULA_FLAG_ATTRIBUTE: () => FORMULA_FLAG_ATTRIBUTE,
-    FormulaEditor: () => FormulaEditor,
-    createFormulaElement: () => createFormulaElement,
-    createFormulaMarkup: () => createFormulaMarkup,
-    editorStyles: () => editorStyles,
+    clearFormulaXPerfMarks: () => clearFormulaXPerfMarks2,
     ensureFormulaXModalStyles: () => ensureFormulaXModalStyles,
-    escapeAttribute: () => escapeAttribute,
-    escapeHtml: () => escapeHtml,
-    findFormulaElement: () => findFormulaElement,
     formulaXModalStyles: () => formulaXModalStyles,
-    getFormulaLatexFromElement: () => getFormulaLatexFromElement,
-    isFormulaElement: () => isFormulaElement,
-    mountFormulaXKityEditor: () => mountFormulaXKityEditor,
-    renderInteractiveHtml: () => renderInteractiveHtml,
-    replaceFormulaElement: () => replaceFormulaElement,
-    serializeSvgForInsertion: () => serializeSvgForInsertion,
-    t: () => t,
-    translations: () => translations
-  });
-
-  // src/dom-renderer.ts
-  var joinPath = (path) => path.join(".");
-  var renderInteractiveHtml = (doc2, activePath) => `
-  <div class="fx-editor-surface" data-role="surface">
-    ${renderChildren(doc2.body, [], activePath)}
-  </div>
-`;
-  var renderChildren = (nodes, basePath, activePath) => {
-    const html = [];
-    for (let index = 0; index <= nodes.length; index += 1) {
-      const path = joinPath([...basePath, index]);
-      const isActive = path === joinPath(activePath);
-      html.push(
-        `<button class="fx-slot${isActive ? " is-active" : ""}" data-path="${path}" type="button" title="${path}"></button>`
-      );
-      if (index < nodes.length) {
-        html.push(renderNode(nodes[index], [...basePath, index], activePath));
-      }
-    }
-    return html.join("");
-  };
-  var renderNode = (node, path, activePath) => {
-    const pathValue = joinPath(path);
-    const isActive = (p) => joinPath(p) === joinPath(activePath);
-    switch (node.type) {
-      case "text":
-        return `<span class="fx-node fx-text" data-node-path="${pathValue}">${node.value}</span>`;
-      case "group":
-        return `<span class="fx-node fx-group" data-node-path="${pathValue}">${renderChildren(node.body, [...path, 0], activePath)}</span>`;
-      case "frac":
-        return `<span class="fx-node fx-frac" data-node-path="${pathValue}">
-        <span class="fx-frac-num${isActive([...path, 0]) ? " is-active" : ""}" data-path="${joinPath([...path, 0])}">${renderChildren(node.numerator, [...path, 0], activePath)}</span>
-        <span class="fx-frac-line"></span>
-        <span class="fx-frac-den${isActive([...path, 1]) ? " is-active" : ""}" data-path="${joinPath([...path, 1])}">${renderChildren(node.denominator, [...path, 1], activePath)}</span>
-      </span>`;
-      case "supsub":
-        return `<span class="fx-node fx-supsub" data-node-path="${pathValue}">
-        <span class="fx-supsub-base">${renderChildren(node.base, [...path, 0], activePath)}</span>
-        <span class="fx-supsub-stack">
-          <span class="fx-sup${isActive([...path, 1]) ? " is-active" : ""}" data-path="${joinPath([...path, 1])}">${renderChildren(node.sup ?? [], [...path, 1], activePath)}</span>
-          <span class="fx-sub${isActive([...path, 2]) ? " is-active" : ""}" data-path="${joinPath([...path, 2])}">${renderChildren(node.sub ?? [], [...path, 2], activePath)}</span>
-        </span>
-      </span>`;
-      case "sqrt":
-        return `<span class="fx-node fx-sqrt" data-node-path="${pathValue}">
-        <span class="fx-sqrt-symbol">\u221A</span>
-        <span class="fx-sqrt-body${isActive([...path, 0]) ? " is-active" : ""}" data-path="${joinPath([...path, 0])}">${renderChildren(node.value, [...path, 0], activePath)}</span>
-      </span>`;
-      case "fenced":
-        return `<span class="fx-node fx-fenced" data-node-path="${pathValue}">
-        <span class="fx-fence">${node.left}</span>
-        <span class="fx-fenced-body${isActive([...path, 0]) ? " is-active" : ""}" data-path="${joinPath([...path, 0])}">${renderChildren(node.body, [...path, 0], activePath)}</span>
-        <span class="fx-fence">${node.right}</span>
-      </span>`;
-      case "doc":
-        return renderChildren(node.body, [0], activePath);
-    }
-    throw new Error(`Unsupported node type: ${String(node.type)}`);
-  };
+    markFormulaXPerf: () => markFormulaXPerf2,
+    measureFormulaXPerf: () => measureFormulaXPerf2,
+    mountFormulaXEditor: () => mountFormulaXEditor,
+    preloadFormulaXEditor: () => preloadFormulaXEditor,
+    recordFormulaXPerfPoint: () => recordFormulaXPerfPoint,
+    renderFormulaXEditorLoadingState: () => renderFormulaXEditorLoadingState,
+    scheduleFormulaXEditorPreload: () => scheduleFormulaXEditorPreload,
+    waitForFormulaXAnimationFrame: () => waitForFormulaXAnimationFrame
+  });
 
   // ../core/src/ast.ts
   var text = (value) => ({ type: "text", value });
@@ -20071,125 +20107,11 @@ var FormulaX = (() => {
     body
   });
 
-  // ../core/src/traversal.ts
-  var resolveContainer = (node, branch) => {
-    switch (node.type) {
-      case "doc":
-      case "group":
-        if (branch !== 0) throw new Error("Invalid branch");
-        return node.body;
-      case "frac":
-        if (branch === 0) return node.numerator;
-        if (branch === 1) return node.denominator;
-        break;
-      case "supsub":
-        if (branch === 0) return node.base;
-        if (branch === 1) return node.sup ?? (node.sup = []);
-        if (branch === 2) return node.sub ?? (node.sub = []);
-        break;
-      case "sqrt":
-        if (branch !== 0) throw new Error("Invalid branch");
-        return node.value;
-      case "fenced":
-        if (branch !== 0) throw new Error("Invalid branch");
-        return node.body;
-      default:
-        break;
-    }
-    throw new Error("Invalid branch");
-  };
-  var cloneDoc = (node) => structuredClone(node);
-  var resolveParent = (root2, path) => {
-    if (path.length === 0) {
-      return { container: root2.body, index: root2.body.length };
-    }
-    if (path.length === 1) {
-      return { container: root2.body, index: path[0] };
-    }
-    let current = root2.body[path[0]];
-    if (!current) {
-      return { container: root2.body, index: path[0] };
-    }
-    let container = root2.body;
-    for (let i2 = 1; i2 < path.length - 2; i2 += 2) {
-      const branch = path[i2];
-      const index = path[i2 + 1];
-      container = resolveContainer(current, branch);
-      current = container[index];
-    }
-    container = resolveContainer(current, path[path.length - 2]);
-    return {
-      container,
-      index: path[path.length - 1] ?? container.length
-    };
-  };
-  var insertAtPath = (root2, path, node) => {
-    const next = cloneDoc(root2);
-    const { container, index } = resolveParent(next, path);
-    container.splice(index, 0, node);
-    return next;
-  };
-  var removeAtPath = (root2, path) => {
-    const next = cloneDoc(root2);
-    const { container, index } = resolveParent(next, path);
-    if (index > 0) {
-      container.splice(index - 1, 1);
-    }
-    return next;
-  };
-
-  // ../core/src/transaction.ts
-  var FormulaTransaction = class {
-    doc;
-    selection;
-    constructor(state) {
-      this.doc = structuredClone(state.doc);
-      this.selection = structuredClone(state.selection);
-    }
-    insert(node) {
-      this.doc = insertAtPath(this.doc, this.selection.focus, node);
-      this.selection = {
-        anchor: [...this.selection.focus],
-        focus: [...this.selection.focus.slice(0, -1), (this.selection.focus.at(-1) ?? 0) + 1]
-      };
-      return this;
-    }
-    deleteBackward() {
-      this.doc = removeAtPath(this.doc, this.selection.focus);
-      this.selection = {
-        anchor: [...this.selection.focus.slice(0, -1), Math.max((this.selection.focus.at(-1) ?? 0) - 1, 0)],
-        focus: [...this.selection.focus.slice(0, -1), Math.max((this.selection.focus.at(-1) ?? 0) - 1, 0)]
-      };
-      return this;
-    }
-    moveFocus(nextFocus) {
-      this.selection = {
-        anchor: [...nextFocus],
-        focus: [...nextFocus]
-      };
-      return this;
-    }
-    apply() {
-      return {
-        doc: this.doc,
-        selection: this.selection
-      };
-    }
-  };
-
   // ../core/src/commands.ts
-  var insertText = (value) => (state) => new FormulaTransaction(state).insert(text(value)).apply();
-  var insertFraction = () => (state) => new FormulaTransaction(state).insert(frac([], [])).apply();
-  var insertSuperscript = () => (state) => new FormulaTransaction(state).insert(supsub([text("x")], [text("2")])).apply();
-  var insertSubscript = () => (state) => new FormulaTransaction(state).insert(supsub([text("x")], void 0, [text("i")])).apply();
-  var insertSqrt = () => (state) => new FormulaTransaction(state).insert(sqrt([])).apply();
-  var insertFenced = (left = "(", right = ")") => (state) => new FormulaTransaction(state).insert(fenced(left, right, [])).apply();
-  var backspace = () => (state) => new FormulaTransaction(state).deleteBackward().apply();
   var createEmptyState = () => ({
     doc: { type: "doc", body: [] },
     selection: { anchor: [0], focus: [0] }
   });
-  var applyCommand = (state, command) => command(state);
 
   // ../core/src/latex.ts
   var isAlpha = (char) => /[a-zA-Z]/.test(char);
@@ -20447,337 +20369,11 @@ var FormulaX = (() => {
   };
   var parseLatex = (input) => new LatexParser(input).parse();
 
-  // src/styles.ts
-  var editorStyles = `
-@keyframes fx-blink {
-  0%, 50% { opacity: 1; }
-  51%, 100% { opacity: 0; }
-}
-.fx-editor {
-  border: 1px solid #d8d4c7;
-  border-radius: 2px;
-  background: #fffefb;
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
-  padding: 24px 28px;
-  font-family: Cambria, 'Times New Roman', serif;
-  font-size: 25px;
-  line-height: 1.7;
-  min-height: 120px;
-  position: relative;
-}
-.fx-editor:focus-within {
-  border-color: #7bbb59;
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 0 3px rgba(123, 187, 89, 0.18);
-}
-.fx-editor-surface {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 3px;
-  cursor: text;
-}
-.fx-node {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  padding: 2px 3px;
-  border-radius: 2px;
-  transition: background 0.12s ease;
-}
-.fx-node:hover {
-  background: rgba(122, 186, 89, 0.12);
-}
-.fx-text {
-  color: #2b2925;
-}
-.fx-group {
-  background: rgba(243, 241, 230, 0.82);
-  border: 1px dashed #c8c0a8;
-}
-.fx-frac {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  vertical-align: middle;
-  padding: 0 5px;
-}
-.fx-frac-num, .fx-frac-den {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  padding: 3px 8px;
-  min-width: 24px;
-  min-height: 28px;
-  border-radius: 2px;
-  transition: all 0.15s ease;
-}
-.fx-frac-num {
-  border-bottom: 2px solid #2e2c29;
-  padding-bottom: 6px;
-}
-.fx-frac-den {
-  border-top: 2px solid #2e2c29;
-  padding-top: 6px;
-}
-.fx-frac-num:hover, .fx-frac-den:hover {
-  background: rgba(122, 186, 89, 0.1);
-}
-.fx-frac-num.is-active, .fx-frac-den.is-active {
-  background: rgba(122, 186, 89, 0.16);
-  box-shadow: inset 0 0 0 1px rgba(83, 184, 86, 0.5);
-}
-.fx-supsub {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 0;
-}
-.fx-supsub-base {
-  display: inline-flex;
-  align-items: center;
-  padding: 0 2px;
-}
-.fx-supsub-stack {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: flex-start;
-  font-size: 0.65em;
-  margin-left: 2px;
-}
-.fx-sup, .fx-sub {
-  display: flex;
-  align-items: center;
-  min-width: 16px;
-  min-height: 20px;
-  padding: 0 4px;
-  border-radius: 2px;
-  transition: all 0.15s ease;
-}
-.fx-sup {
-  vertical-align: super;
-}
-.fx-sub {
-  vertical-align: sub;
-}
-.fx-sup:hover, .fx-sub:hover {
-  background: rgba(122, 186, 89, 0.1);
-}
-.fx-sup.is-active, .fx-sub.is-active {
-  background: rgba(122, 186, 89, 0.16);
-  box-shadow: inset 0 0 0 1px rgba(83, 184, 86, 0.5);
-}
-.fx-sqrt {
-  display: inline-flex;
-  align-items: baseline;
-}
-.fx-sqrt-symbol {
-  font-size: 1.1em;
-  color: #2e2c29;
-  margin-right: 2px;
-}
-.fx-sqrt-body {
-  display: inline-flex;
-  align-items: center;
-  border-top: 2px solid #2e2c29;
-  padding: 4px 6px 0;
-  margin-left: 2px;
-}
-.fx-sqrt-body:hover {
-  background: rgba(122, 186, 89, 0.1);
-}
-.fx-sqrt-body.is-active {
-  background: rgba(122, 186, 89, 0.16);
-}
-.fx-fenced {
-  display: inline-flex;
-  align-items: center;
-  background: rgba(243, 241, 230, 0.78);
-  border-radius: 3px;
-  padding: 0 4px;
-}
-.fx-fence {
-  color: #59554d;
-  font-size: 1.2em;
-  padding: 0 2px;
-}
-.fx-fenced-body {
-  display: inline-flex;
-  align-items: center;
-  padding: 0 6px;
-}
-.fx-fenced-body:hover {
-  background: rgba(122, 186, 89, 0.1);
-  border-radius: 2px;
-}
-.fx-fenced-body.is-active {
-  background: rgba(122, 186, 89, 0.16);
-  border-radius: 2px;
-}
-.fx-slot {
-  width: 3px;
-  height: 1.2em;
-  border: none;
-  background: #53b856;
-  padding: 0;
-  margin: 0 1px;
-  cursor: text;
-  border-radius: 1px;
-  vertical-align: middle;
-}
-.fx-slot.is-active {
-  animation: fx-blink 1s infinite;
-}
-.fx-slot:hover {
-  background: #77c75b;
-}
-`;
-
-  // src/editor.ts
-  var FormulaEditor = class {
-    state;
-    root;
-    onChange;
-    locale;
-    constructor(options) {
-      this.root = options.root;
-      this.state = options.initialState ?? createEmptyState();
-      this.onChange = options.onChange;
-      this.locale = options.locale ?? "en";
-      this.root.classList.add("fx-editor");
-      this.root.tabIndex = 0;
-      this.ensureStyles();
-      this.bindEvents();
-      this.render();
-    }
-    getState() {
-      return structuredClone(this.state);
-    }
-    getLocale() {
-      return this.locale;
-    }
-    setState(state) {
-      this.state = structuredClone(state);
-      this.render();
-    }
-    dispatch(command) {
-      this.state = applyCommand(this.state, command);
-      this.render();
-      this.onChange?.(this.getState());
-    }
-    ensureStyles() {
-      if (document.getElementById("fx-editor-styles")) return;
-      const style = document.createElement("style");
-      style.id = "fx-editor-styles";
-      style.textContent = editorStyles;
-      document.head.appendChild(style);
-    }
-    bindEvents() {
-      this.root.addEventListener("click", (event2) => {
-        const target = event2.target;
-        const pathValue = target.dataset.path;
-        if (pathValue === void 0) return;
-        const path = pathValue === "" ? [] : pathValue.split(".").map(Number);
-        this.moveSelection(path);
-      });
-      this.root.addEventListener("keydown", (event2) => {
-        if (event2.key === "Backspace") {
-          event2.preventDefault();
-          this.dispatch(backspace());
-          return;
-        }
-        if (event2.key === "/") {
-          event2.preventDefault();
-          this.dispatch(insertFraction());
-          return;
-        }
-        if (event2.key === "^") {
-          event2.preventDefault();
-          this.dispatch(insertSuperscript());
-          return;
-        }
-        if (event2.key === "_") {
-          event2.preventDefault();
-          this.dispatch(insertSubscript());
-          return;
-        }
-        if (event2.key === "r" && event2.ctrlKey) {
-          event2.preventDefault();
-          this.dispatch(insertSqrt());
-          return;
-        }
-        if (event2.key === "(") {
-          event2.preventDefault();
-          this.dispatch(insertFenced("(", ")"));
-          return;
-        }
-        if (event2.key.length === 1 && !event2.ctrlKey && !event2.metaKey) {
-          event2.preventDefault();
-          this.dispatch(insertText(event2.key));
-        }
-      });
-    }
-    moveSelection(path) {
-      this.state = {
-        ...this.state,
-        selection: {
-          anchor: [...path],
-          focus: [...path]
-        }
-      };
-      this.render();
-      this.onChange?.(this.getState());
-    }
-    render() {
-      this.root.innerHTML = renderInteractiveHtml(this.state.doc, this.state.selection.focus);
-    }
-  };
-
-  // ../kity-runtime/public/assets/images/toolbar/btn.png
-  var btn_default = "./btn-5DANP6JY.png";
-
-  // ../kity-runtime/public/assets/images/toolbar/other.png
-  var other_default = "./other-OMWJFGL5.png";
-
-  // ../kity-runtime/public/assets/styles/editor.css?url
-  var editor_default = "./editor-JT5KLVXX.css?url";
-
-  // ../kity-runtime/public/resource/KF_AMS_BB.woff
-  var KF_AMS_BB_default = "./KF_AMS_BB-5QF7FUSO.woff";
-
-  // ../kity-runtime/public/resource/KF_AMS_CAL.woff
-  var KF_AMS_CAL_default = "./KF_AMS_CAL-NXRNLAZN.woff";
-
-  // ../kity-runtime/public/resource/KF_AMS_FRAK.woff
-  var KF_AMS_FRAK_default = "./KF_AMS_FRAK-CO33WWN4.woff";
-
-  // ../kity-runtime/public/resource/KF_AMS_MAIN.woff
-  var KF_AMS_MAIN_default = "./KF_AMS_MAIN-25QJVAWY.woff";
-
-  // ../kity-runtime/public/resource/KF_AMS_ROMAN.woff
-  var KF_AMS_ROMAN_default = "./KF_AMS_ROMAN-243BR7HH.woff";
-
-  // ../kity-runtime/src/asset-manifest.ts
-  var kityFontAssets = {
-    KF_AMS_BB: KF_AMS_BB_default,
-    KF_AMS_CAL: KF_AMS_CAL_default,
-    KF_AMS_FRAK: KF_AMS_FRAK_default,
-    KF_AMS_MAIN: KF_AMS_MAIN_default,
-    KF_AMS_ROMAN: KF_AMS_ROMAN_default
-  };
-  var kityToolbarAssets = {
-    btn: btn_default,
-    other: other_default
-  };
-  var kityStyleAssets = {
-    editor: editor_default
-  };
-  var kityAssetManifest = {
-    fonts: kityFontAssets,
-    toolbar: kityToolbarAssets,
-    styles: kityStyleAssets
-  };
+  // ../kity-runtime/src/index.ts
+  init_asset_manifest();
 
   // ../kity-runtime/src/create-editor.ts
+  init_asset_manifest();
   init_legacy_box_type();
 
   // ../kity-runtime/src/vendor/char-position.ts
@@ -23270,19 +22866,19 @@ var FormulaX = (() => {
       return this;
     },
     _applyTransform() {
-      const t2 = this.transform;
+      const t = this.transform;
       const result = [];
-      if (t2.translate) {
-        result.push(["translate(", t2.translate, ")"]);
+      if (t.translate) {
+        result.push(["translate(", t.translate, ")"]);
       }
-      if (t2.rotate) {
-        result.push(["rotate(", t2.rotate, ")"]);
+      if (t.rotate) {
+        result.push(["rotate(", t.rotate, ")"]);
       }
-      if (t2.scale) {
-        result.push(["scale(", t2.scale, ")"]);
+      if (t.scale) {
+        result.push(["scale(", t.scale, ")"]);
       }
-      if (t2.matrix) {
-        result.push(["matrix(", t2.matrix, ")"]);
+      if (t.matrix) {
+        result.push(["matrix(", t.matrix, ")"]);
       }
       this.node.setAttribute("transform", utils_default.flatten(result).join(" "));
       return this;
@@ -23291,8 +22887,8 @@ var FormulaX = (() => {
       this.transform.matrix = m;
       return this._applyTransform();
     },
-    setTranslate(t2) {
-      this.transform.translate = t2 !== null && [].slice.call(arguments) || null;
+    setTranslate(t) {
+      this.transform.translate = t !== null && [].slice.call(arguments) || null;
       return this._applyTransform();
     },
     setRotate(r) {
@@ -24180,13 +23776,87 @@ var FormulaX = (() => {
     targetWindow.kity = kity;
   }
 
+  // ../kity-runtime/src/perf.ts
+  function getPerfHost() {
+    return globalThis;
+  }
+  function getPerfState() {
+    const host = getPerfHost();
+    host.__FORMULAX_PERF_STATE__ ??= {
+      reportedMeasureCount: 0,
+      reportScheduled: false
+    };
+    return host.__FORMULAX_PERF_STATE__;
+  }
+  function hasPerfSupport() {
+    return typeof performance !== "undefined" && typeof performance.mark === "function" && typeof performance.measure === "function" && typeof performance.getEntriesByType === "function";
+  }
+  function isPerfDebugEnabled() {
+    return getPerfHost().__FORMULAX_PERF__ === true;
+  }
+  function schedulePerfReport() {
+    if (!hasPerfSupport() || !isPerfDebugEnabled()) {
+      return;
+    }
+    const state = getPerfState();
+    if (state.reportScheduled) {
+      return;
+    }
+    state.reportScheduled = true;
+    queueMicrotask(() => {
+      state.reportScheduled = false;
+      const entries = performance.getEntriesByType("measure").filter((entry) => entry.name.startsWith("fx:")).sort((left, right) => left.startTime - right.startTime);
+      const nextEntries = entries.slice(state.reportedMeasureCount);
+      state.reportedMeasureCount = entries.length;
+      if (!nextEntries.length) {
+        return;
+      }
+      console.table(nextEntries.map((entry) => ({
+        name: entry.name,
+        duration: Number(entry.duration.toFixed(2)),
+        startTime: Number(entry.startTime.toFixed(2))
+      })));
+    });
+  }
+  function markFormulaXPerf(name) {
+    if (!hasPerfSupport()) {
+      return null;
+    }
+    const markName = `${name}::${Date.now()}::${Math.random().toString(36).slice(2, 8)}`;
+    performance.mark(markName);
+    return markName;
+  }
+  function measureFormulaXPerf(name, startMark, endMark) {
+    if (!hasPerfSupport() || !startMark) {
+      return null;
+    }
+    const resolvedEndMark = endMark ?? markFormulaXPerf(`${name}:end`);
+    if (!resolvedEndMark) {
+      return null;
+    }
+    performance.measure(name, startMark, resolvedEndMark);
+    schedulePerfReport();
+    return resolvedEndMark;
+  }
+  function clearFormulaXPerfMarks(...marks) {
+    if (!hasPerfSupport()) {
+      return;
+    }
+    for (const mark of marks) {
+      if (!mark) {
+        continue;
+      }
+      performance.clearMarks(mark);
+    }
+  }
+
   // ../kity-runtime/src/create-editor.ts
   init_toolbar_assets();
   var DEFAULT_LATEX = "x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}";
   var DEFAULT_EDITOR_HEIGHT = "auto";
   var KITY_STYLE_ID = "formulax-kity-editor-styles";
   var runtimePromise = null;
-  function resolveContainer2(el) {
+  function resolveContainer(el) {
     if (typeof el === "string") {
       const element = document.querySelector(el);
       if (!(element instanceof HTMLElement)) {
@@ -24220,13 +23890,14 @@ var FormulaX = (() => {
   }
   function ensureKityStylesheet(doc2, href) {
     if (doc2.getElementById(KITY_STYLE_ID)) {
-      return;
+      return false;
     }
     const link = doc2.createElement("link");
     link.id = KITY_STYLE_ID;
     link.rel = "stylesheet";
     link.href = href;
     doc2.head.appendChild(link);
+    return true;
   }
   function hydrateLegacyKf(runtimeWindow) {
     const requireFormula = runtimeWindow.__kityFormulaRequire__;
@@ -24274,7 +23945,7 @@ var FormulaX = (() => {
       kity: runtimeWindow.kity,
       otherPosition: legacyOtherPosition,
       uiDef: legacyUiDef,
-      uiUtils: createLegacyUiUtils()
+      uiUtils: legacyUiUtils
     };
   }
   async function ensureKityRuntime() {
@@ -24282,65 +23953,115 @@ var FormulaX = (() => {
       return runtimePromise;
     }
     runtimePromise = (async () => {
+      const runtimeTotalStart = markFormulaXPerf("fx:kity-runtime:total");
       const runtimeWindow = window;
       runtimeWindow.kf = runtimeWindow.kf ?? {};
       installKityRuntime(runtimeWindow);
-      const { installLegacyKityFormulaRuntime: installLegacyKityFormulaRuntime2 } = await Promise.resolve().then(() => (init_install(), install_exports));
-      installLegacyKityFormulaRuntime2(runtimeWindow);
-      hydrateLegacyKf(runtimeWindow);
-      const { installLegacyParserRuntime: installLegacyParserRuntime2 } = await Promise.resolve().then(() => (init_install2(), install_exports2));
-      installLegacyParserRuntime2(runtimeWindow);
-      installLegacyRuntime(runtimeWindow);
-      const { installKityEditorStart: installKityEditorStart2 } = await Promise.resolve().then(() => (init_start(), start_exports));
-      installKityEditorStart2(runtimeWindow);
+      try {
+        const formulaImportStart = markFormulaXPerf("fx:kity-runtime:formula-import");
+        const { installLegacyKityFormulaRuntime: installLegacyKityFormulaRuntime2 } = await Promise.resolve().then(() => (init_install(), install_exports));
+        const formulaImportEnd = markFormulaXPerf("fx:kity-runtime:formula-import:end");
+        measureFormulaXPerf("fx:kity-runtime:formula-import", formulaImportStart, formulaImportEnd);
+        clearFormulaXPerfMarks(formulaImportStart, formulaImportEnd);
+        const formulaInstallStart = markFormulaXPerf("fx:kity-runtime:formula-install");
+        installLegacyKityFormulaRuntime2(runtimeWindow);
+        hydrateLegacyKf(runtimeWindow);
+        const formulaInstallEnd = markFormulaXPerf("fx:kity-runtime:formula-install:end");
+        measureFormulaXPerf("fx:kity-runtime:formula-install", formulaInstallStart, formulaInstallEnd);
+        clearFormulaXPerfMarks(formulaInstallStart, formulaInstallEnd);
+        const parserImportStart = markFormulaXPerf("fx:kity-runtime:parser-import");
+        const { installLegacyParserRuntime: installLegacyParserRuntime2 } = await Promise.resolve().then(() => (init_install2(), install_exports2));
+        const parserImportEnd = markFormulaXPerf("fx:kity-runtime:parser-import:end");
+        measureFormulaXPerf("fx:kity-runtime:parser-import", parserImportStart, parserImportEnd);
+        clearFormulaXPerfMarks(parserImportStart, parserImportEnd);
+        const parserInstallStart = markFormulaXPerf("fx:kity-runtime:parser-install");
+        installLegacyParserRuntime2(runtimeWindow);
+        const parserInstallEnd = markFormulaXPerf("fx:kity-runtime:parser-install:end");
+        measureFormulaXPerf("fx:kity-runtime:parser-install", parserInstallStart, parserInstallEnd);
+        clearFormulaXPerfMarks(parserInstallStart, parserInstallEnd);
+        installLegacyRuntime(runtimeWindow);
+        const bootImportStart = markFormulaXPerf("fx:kity-runtime:boot-import");
+        const { installKityEditorStart: installKityEditorStart2 } = await Promise.resolve().then(() => (init_start(), start_exports));
+        const bootImportEnd = markFormulaXPerf("fx:kity-runtime:boot-import:end");
+        measureFormulaXPerf("fx:kity-runtime:boot-import", bootImportStart, bootImportEnd);
+        clearFormulaXPerfMarks(bootImportStart, bootImportEnd);
+        const bootInstallStart = markFormulaXPerf("fx:kity-runtime:boot-install");
+        installKityEditorStart2(runtimeWindow);
+        const bootInstallEnd = markFormulaXPerf("fx:kity-runtime:boot-install:end");
+        measureFormulaXPerf("fx:kity-runtime:boot-install", bootInstallStart, bootInstallEnd);
+        clearFormulaXPerfMarks(bootInstallStart, bootInstallEnd);
+      } finally {
+        const runtimeTotalEnd = markFormulaXPerf("fx:kity-runtime:total:end");
+        measureFormulaXPerf("fx:kity-runtime:total", runtimeTotalStart, runtimeTotalEnd);
+        clearFormulaXPerfMarks(runtimeTotalStart, runtimeTotalEnd);
+      }
     })();
     return runtimePromise;
   }
   async function createKityEditor(container, options = {}) {
+    const createEditorStart = markFormulaXPerf("fx:create-kity-editor:total");
     const fontsize = options.render?.fontsize ?? 40;
     const editorHeight = normalizeCssSize(options.height, DEFAULT_EDITOR_HEIGHT);
     const assets = resolveEditorAssets(options.assets);
-    ensureKityStylesheet(document, assets.styles.editor);
-    setToolbarAssetUrls(assets.toolbar);
-    await ensureKityRuntime();
-    const runtimeWindow = window;
-    if (!runtimeWindow.kf?.EditorFactory) {
-      throw new Error("Kity editor runtime did not initialize");
-    }
-    container.innerHTML = "";
-    const host = document.createElement("div");
-    host.className = "kf-editor";
-    host.style.width = "100%";
-    host.style.height = editorHeight;
-    container.appendChild(host);
-    const factory2 = runtimeWindow.kf.EditorFactory.create(host, {
-      render: {
-        fontsize
-      },
-      resource: {
-        path: "",
-        fonts: assets.fonts
+    try {
+      const stylesheetInserted = ensureKityStylesheet(document, assets.styles.editor);
+      if (stylesheetInserted) {
+        const stylesheetInsertedMark = markFormulaXPerf("fx:kity-css:link-inserted");
+        measureFormulaXPerf("fx:kity-css:link-inserted", createEditorStart, stylesheetInsertedMark);
+        clearFormulaXPerfMarks(stylesheetInsertedMark);
       }
-    });
-    return {
-      ready: factory2.ready.bind(factory2),
-      execCommand(name, value) {
-        factory2.ready(function execWhenReady() {
-          this.execCommand(name, value);
-        });
-      },
-      focus() {
-        factory2.ready(function focusWhenReady() {
-          this.execCommand("focus");
-        });
-      },
-      destroy() {
-        container.innerHTML = "";
-      },
-      host,
-      raw: factory2
-    };
-  }
+      setToolbarAssetUrls(assets.toolbar);
+      await ensureKityRuntime();
+      const runtimeReadyMark = markFormulaXPerf("fx:kity-runtime:ready-for-editor");
+      measureFormulaXPerf("fx:kity-runtime:ready-for-editor", createEditorStart, runtimeReadyMark);
+      clearFormulaXPerfMarks(runtimeReadyMark);
+      const runtimeWindow = window;
+      if (!runtimeWindow.kf?.EditorFactory) {
+        throw new Error("Kity editor runtime did not initialize");
+      }
+      container.innerHTML = "";
+      const host = document.createElement("div");
+      host.className = "kf-editor";
+      host.style.width = "100%";
+      host.style.height = editorHeight;
+      container.appendChild(host);
+      const factoryCreateStart = markFormulaXPerf("fx:kity-editor-factory:create");
+      const factory2 = runtimeWindow.kf.EditorFactory.create(host, {
+        render: {
+          fontsize
+        },
+        resource: {
+          path: "",
+          fonts: assets.fonts
+        }
+      });
+      const factoryCreateEnd = markFormulaXPerf("fx:kity-editor-factory:create:end");
+      measureFormulaXPerf("fx:kity-editor-factory:create", factoryCreateStart, factoryCreateEnd);
+      clearFormulaXPerfMarks(factoryCreateStart, factoryCreateEnd);
+      return {
+        ready: factory2.ready.bind(factory2),
+        execCommand(name, value) {
+          factory2.ready(function execWhenReady() {
+            this.execCommand(name, value);
+          });
+        },
+        focus() {
+          factory2.ready(function focusWhenReady() {
+            this.execCommand("focus");
+          });
+        },
+        destroy() {
+          container.innerHTML = "";
+        },
+        host,
+        raw: factory2
+      };
+    } finally {
+      const createEditorEnd = markFormulaXPerf("fx:create-kity-editor:total:end");
+      measureFormulaXPerf("fx:create-kity-editor:total", createEditorStart, createEditorEnd);
+      clearFormulaXPerfMarks(createEditorStart, createEditorEnd);
+    }
+  }
   async function mountKityEditor(container, options = {}) {
     const editor = await createKityEditor(container, options);
     const initialLatex = options.initialLatex ?? DEFAULT_LATEX;
@@ -24359,7 +24080,7 @@ var FormulaX = (() => {
     handlePromise;
     constructor(options) {
       const { el, ...editorOptions } = options;
-      this.container = resolveContainer2(el);
+      this.container = resolveContainer(el);
       this.options = editorOptions;
       this.handlePromise = mountKityEditor(this.container, this.options);
     }
@@ -24410,292 +24131,14 @@ var FormulaX = (() => {
   init_legacy_ui_utils();
   init_legacy_utils();
 
-  // src/formula-node.ts
-  var DEFAULT_FORMULA_ATTRIBUTE = "data-formulax-latex";
-  var FORMULA_FLAG_ATTRIBUTE = "data-formulax";
-  var DEFAULT_FORMULA_CLASS = "formulax-math";
-  function escapeAttribute(value) {
-    return value.replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
-  }
+  // ../renderer/src/markup.ts
   function escapeHtml(value) {
     return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
   }
-  function createFormulaMarkup(latex, options = {}) {
-    const attributeName = options.attributeName ?? DEFAULT_FORMULA_ATTRIBUTE;
-    const className = options.className ?? DEFAULT_FORMULA_CLASS;
-    const displayClass = options.displayMode ? `${className} ${className}--block` : className;
-    const safeLatex = escapeAttribute(latex);
-    const cursorStyle = options.cursorStyle?.trim() || "pointer";
-    const extraAttributes = {
-      ...options.extraAttributes ?? {},
-      style: mergeInlineStyles(
-        typeof options.extraAttributes?.style === "string" ? options.extraAttributes.style : "",
-        cursorStyle ? `cursor: ${cursorStyle}` : ""
-      )
-    };
-    const serializedAttributes = Object.entries(extraAttributes).filter(([, value]) => value !== null && value !== void 0 && value !== false).map(([key, value]) => value === true ? key : `${key}="${escapeAttribute(String(value))}"`);
-    return [
-      "<span",
-      ` class="${escapeAttribute(displayClass)}"`,
-      ` ${FORMULA_FLAG_ATTRIBUTE}="true"`,
-      ` ${attributeName}="${safeLatex}"`,
-      ` data-latex="${safeLatex}"`,
-      ' contenteditable="false"',
-      ' role="button"',
-      ' tabindex="0"',
-      serializedAttributes.length ? ` ${serializedAttributes.join(" ")}` : "",
-      ">",
-      options.renderHtml ?? `<span class="${escapeAttribute(className)}__render">${escapeHtml(latex || "\\square")}</span>`,
-      "</span>"
-    ].join("");
-  }
-  function mergeInlineStyles(existingStyle, nextStyle) {
-    const existing = existingStyle.trim().replace(/;+\s*$/, "");
-    const next = nextStyle.trim().replace(/;+\s*$/, "");
-    if (!existing) return next;
-    if (!next) return existing;
-    return `${existing}; ${next}`;
-  }
-  function createFormulaElement(ownerDocument, latex, options = {}) {
-    const wrapper = ownerDocument.createElement("span");
-    wrapper.innerHTML = createFormulaMarkup(latex, options);
-    return wrapper.firstElementChild;
-  }
-  function replaceFormulaElement(target, latex, options = {}) {
-    const next = createFormulaElement(target.ownerDocument ?? document, latex, options);
-    if (!next) return null;
-    target.replaceWith(next);
-    return next;
-  }
-  function getFormulaLatexFromElement(element, attributeName = DEFAULT_FORMULA_ATTRIBUTE) {
-    return element.getAttribute(attributeName) ?? element.getAttribute("data-latex") ?? "";
-  }
-  function isFormulaElement(node) {
-    if (!node || typeof node !== "object") return false;
-    const element = node;
-    return typeof element.getAttribute === "function" && element.getAttribute(FORMULA_FLAG_ATTRIBUTE) === "true";
-  }
-  function findFormulaElement(node) {
-    if (!node) return null;
-    const element = node.nodeType === 1 ? node : node.parentElement;
-    return element?.closest?.(`[${FORMULA_FLAG_ATTRIBUTE}="true"]`);
-  }
-
-  // src/formula-modal.ts
-  var EMPTY_FORMULA_PLACEHOLDER = "\\placeholder ";
-  var STYLE_ID = "fx-formula-modal-styles";
-  var formulaXModalStyles = `
-.fx-formula-modal-open {
-  overflow: hidden;
-}
-
-.fx-formula-modal-root {
-  position: fixed;
-  inset: 0;
-  z-index: 2147483000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.fx-formula-modal-backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(15, 23, 42, 0.48);
-}
-
-.fx-formula-modal {
-  --fx-formula-editor-body-height: 264px;
-  --fx-formula-workspace-height: 168px;
-  position: relative;
-  width: min(860px, calc(100vw - 32px));
-  height: auto;
-  max-height: calc(100vh - 32px);
-  background: #fff;
-  border-radius: 14px;
-  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
-  display: flex;
-  flex-direction: column;
-  overflow: visible;
-  isolation: isolate;
-}
-
-.fx-formula-modal__header,
-.fx-formula-modal__footer,
-.fx-formula-modal__title,
-.fx-formula-modal__close,
-.fx-formula-modal__button,
-.fx-formula-editor-loading,
-.fx-formula-editor-error {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-}
-
-.fx-formula-modal__header {
-  min-height: 56px;
-  padding: 0 20px;
-  border-bottom: 1px solid #e5e7eb;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-shrink: 0;
-  position: relative;
-  z-index: 3;
-  background: #fff;
-  border-radius: 14px 14px 0 0;
-}
-
-.fx-formula-modal__title {
-  font-size: 16px;
-  font-weight: 650;
-  margin: 0;
-  color: #111827;
-}
-
-.fx-formula-modal__close {
-  border: 0;
-  background: transparent;
-  font-size: 24px;
-  line-height: 1;
-  cursor: pointer;
-  color: #6b7280;
-}
-
-.fx-formula-modal__body {
-  flex: 0 0 auto;
-  height: var(--fx-formula-editor-body-height);
-  padding: 0;
-  overflow: visible;
-  min-height: var(--fx-formula-editor-body-height);
-  position: relative;
-  z-index: 2;
-}
-
-.fx-formula-editor-host {
-  width: 100%;
-  height: var(--fx-formula-editor-body-height);
-  min-height: var(--fx-formula-editor-body-height);
-  overflow: visible;
-  position: relative;
-}
-
-.fx-formula-kity-host {
-  width: 100%;
-  height: var(--fx-formula-editor-body-height);
-  min-height: var(--fx-formula-editor-body-height);
-  overflow: visible;
-  position: relative;
-}
-
-.fx-formula-kity-host .kf-editor {
-  height: var(--fx-formula-editor-body-height) !important;
-  overflow: visible !important;
-}
-
-.fx-formula-kity-host .kf-editor-toolbar {
-  overflow: visible;
-  position: relative;
-  z-index: 20;
-}
-
-.fx-formula-kity-host .kf-editor-ui-button-mount-point,
-.fx-formula-kity-host .kf-editor-ui-area-mount,
-.fx-formula-kity-host .kf-editor-ui-box,
-.fx-formula-kity-host .kf-editor-ui-list {
-  z-index: 1000;
-}
-
-.fx-formula-kity-host .kf-editor-edit-area,
-.fx-formula-kity-host .kf-editor-canvas-container {
-  min-height: var(--fx-formula-workspace-height);
-  height: var(--fx-formula-workspace-height);
-}
-
-.fx-formula-kity-host .kf-editor-edit-area {
-  flex: 0 0 auto;
-  overflow: hidden;
-}
-
-.fx-formula-kity-host .kf-editor,
-.fx-formula-kity-host .kf-editor svg text,
-.fx-formula-kity-host .kf-editor-ui-area-item-text,
-.fx-formula-kity-host .kf-editor-ui-box-item-text,
-.fx-formula-kity-host .kf-editor-ui-box-item-val,
-.formulax-math__render {
-  font-family: "KF AMS MAIN", "Cambria Math", "Latin Modern Math", "Times New Roman", serif !important;
-}
-
-.fx-formula-kity-host .kf-editor-ui-box-item-content,
-.fx-formula-kity-host .kf-editor-ui-box-item-val {
-  min-width: 32px;
-  min-height: 32px;
-}
-
-.fx-formula-kity-host .kf-editor-ui-box-item-val svg,
-.fx-formula-kity-host .kf-editor-ui-box-item-val img,
-.fx-formula-kity-host .kf-editor-ui-area-item-img,
-.fx-formula-kity-host .kf-editor-ui-area-item-text {
-  display: block;
-}
-
-.fx-formula-editor-loading {
-  height: var(--fx-formula-editor-body-height);
-  padding: 24px;
-  color: #4b5563;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.fx-formula-editor-error {
-  padding: 24px;
-  color: #dc2626;
-  font-size: 14px;
-}
-
-.fx-formula-editor-error pre {
-  white-space: pre-wrap;
-  word-break: break-all;
-  color: #991b1b;
-  background: #fef2f2;
-  border: 1px solid #fecaca;
-  border-radius: 8px;
-  padding: 12px;
-  margin-top: 8px;
-}
-
-.fx-formula-modal__footer {
-  min-height: 64px;
-  padding: 12px 20px;
-  border-top: 1px solid #e5e7eb;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 12px;
-  flex-shrink: 0;
-  position: relative;
-  z-index: 1;
-  background: #fff;
-  border-radius: 0 0 14px 14px;
-}
-
-.fx-formula-modal__button {
-  appearance: none;
-  border: 1px solid #d1d5db;
-  background: #fff;
-  color: #111827;
-  border-radius: 8px;
-  padding: 8px 14px;
-  font-size: 14px;
-  cursor: pointer;
-}
-
-.fx-formula-modal__button--primary {
-  border-color: #2563eb;
-  background: #2563eb;
-  color: #fff;
-}
 
+  // ../renderer/src/styles.ts
+  var FORMULAX_BASE_STYLE_ID = "fx-formulax-base-styles";
+  var formulaXBaseStyles = `
 .formulax-math {
   display: inline-flex;
   align-items: center;
@@ -24714,224 +24157,68 @@ var FormulaX = (() => {
   background: rgba(37, 99, 235, 0.06);
 }
 
-.formulax-math__svg {
+.formulax-math__render,
+.formulax-math__svg,
+.formulax-math__image {
   display: inline-block;
-  flex: 0 0 auto;
   max-width: 100%;
-  vertical-align: -0.35em;
   pointer-events: none;
 }
 
+.formulax-math__render {
+  vertical-align: middle;
+  font-family: "KF AMS MAIN", "Cambria Math", "Latin Modern Math", "Times New Roman", serif;
+}
+
+.formulax-math__svg {
+  flex: 0 0 auto;
+  vertical-align: -0.35em;
+}
+
 .formulax-math__image {
-  display: inline-block;
-  max-width: 100%;
   height: auto;
   vertical-align: middle;
-  pointer-events: none;
 }
 `;
-  function ensureFormulaXModalStyles(doc2 = document) {
-    if (doc2.getElementById(STYLE_ID)) return;
+  function ensureFormulaXBaseStyles(doc2 = document) {
+    if (doc2.getElementById(FORMULAX_BASE_STYLE_ID)) return;
     const style = doc2.createElement("style");
-    style.id = STYLE_ID;
-    style.textContent = formulaXModalStyles;
+    style.id = FORMULAX_BASE_STYLE_ID;
+    style.textContent = formulaXBaseStyles;
     doc2.head.appendChild(style);
   }
-  function mountFormulaXKityEditor(root2, options = {}) {
-    let destroyed = false;
-    let latestLatex = options.initialLatex ?? "";
-    let handle = null;
-    const initialLatex = latestLatex.trim() ? latestLatex : EMPTY_FORMULA_PLACEHOLDER;
-    root2.classList.add("fx-formula-kity-host");
-    root2.innerHTML = `
-    <div class="fx-formula-editor-loading" role="status" aria-live="polite">
-      Loading FormulaX editor...
-    </div>
-  `;
-    const readyPromise = mountKityEditor(root2, {
-      initialLatex,
-      height: options.height ?? "100%",
-      autofocus: options.autofocus ?? true,
-      assets: options.assets,
-      render: {
-        fontsize: options.render?.fontsize ?? 40
-      }
-    }).then((nextHandle) => {
-      if (destroyed) {
-        nextHandle.destroy();
-        throw new Error("FormulaX editor mount cancelled");
-      }
-      handle = nextHandle;
-      return nextHandle;
-    }).catch((error) => {
-      console.error("[FormulaX] Failed to load FormulaX editor:", error);
-      if (!destroyed) {
-        root2.innerHTML = `
-          <div class="fx-formula-editor-error">
-            Failed to load FormulaX editor.
-            <pre>${escapeHtml(error instanceof Error ? error.message : String(error))}</pre>
-          </div>
-        `;
-      }
-      throw error;
-    });
-    const getCurrentLatex = async () => {
-      const readyHandle = handle ?? await readyPromise;
-      const latex = await tryReadLatexFromKityHandle(readyHandle);
-      if (latex !== null) {
-        latestLatex = latex;
-      }
-      return latestLatex;
-    };
-    return {
-      root: root2,
-      getLatex: getCurrentLatex,
-      async getState() {
-        const latex = await getCurrentLatex();
-        try {
-          return {
-            ...createEmptyState(),
-            doc: parseLatex(latex)
-          };
-        } catch {
-          return createEmptyState();
-        }
-      },
-      async getRenderHtml() {
-        await readyPromise;
-        await waitForFormulaSvgLayout(root2);
-        return renderCurrentFormulaAsSvgHtml(root2);
-      },
-      destroy() {
-        if (destroyed) return;
-        destroyed = true;
-        void readyPromise.then((readyHandle) => readyHandle.destroy()).catch(() => void 0);
-        root2.innerHTML = "";
-      }
-    };
-  }
-  async function tryReadLatexFromKityHandle(handle) {
-    try {
-      let isEmpty = false;
-      handle.ready(function ready() {
-        const result = this.execCommand("content.is.empty");
-        isEmpty = result === true;
-      });
-      if (isEmpty) {
-        return "";
-      }
-    } catch {
-    }
-    const candidates = [
-      "get.source",
-      "getSource",
-      "getLatex",
-      "get.latex",
-      "get.content",
-      "getContent"
-    ];
-    for (const command of candidates) {
-      try {
-        let value = null;
-        handle.ready(function ready() {
-          value = this.execCommand(command);
-        });
-        if (typeof value === "string" && value.trim()) {
-          return value;
-        }
-        if (value && typeof value === "object" && "latex" in value) {
-          const latex = value.latex;
-          if (typeof latex === "string" && latex.trim()) {
-            return latex;
-          }
-        }
-      } catch {
-      }
-    }
-    return null;
-  }
-  function renderCurrentFormulaAsSvgHtml(root2) {
-    const svg2 = findFormulaSvg(root2);
-    if (!svg2) {
-      return "";
-    }
-    return serializeSvgForInsertion(svg2);
-  }
-  async function waitForFormulaSvgLayout(root2) {
-    const doc2 = root2.ownerDocument ?? document;
-    const view = doc2.defaultView ?? window;
-    await waitForDocumentFonts(doc2);
-    let previous = readRenderedFormulaBox(root2);
-    for (let attempt = 0; attempt < 4; attempt += 1) {
-      await waitForAnimationFrame(view);
-      const current = readRenderedFormulaBox(root2);
-      if (previous && current && areSvgBoxesClose(previous, current)) {
-        return;
-      }
-      previous = current;
-    }
-  }
-  function findFormulaSvg(root2) {
-    return root2.querySelector(
-      ".kf-editor-edit-area svg, .kf-editor-canvas-container svg, svg"
-    );
-  }
-  function readRenderedFormulaBox(root2) {
-    const svg2 = findFormulaSvg(root2);
-    if (!svg2) {
-      return null;
-    }
+
+  // ../renderer/src/svg.ts
+  function readRenderedFormulaSvgBox(svg2) {
     return getInlineSvgContent(svg2)?.box ?? readSvgBox(svg2);
   }
-  function areSvgBoxesClose(left, right) {
-    return Math.abs(left.x - right.x) < 0.01 && Math.abs(left.y - right.y) < 0.01 && Math.abs(left.width - right.width) < 0.01 && Math.abs(left.height - right.height) < 0.01;
-  }
-  async function waitForDocumentFonts(doc2) {
-    if (!doc2.fonts?.ready) {
-      return;
-    }
-    try {
-      await doc2.fonts.ready;
-    } catch {
-    }
-  }
-  function waitForAnimationFrame(view) {
-    return new Promise((resolve) => {
-      view.requestAnimationFrame(() => resolve());
-    });
-  }
   function serializeSvgForInsertion(svg2) {
     const content = getInlineSvgContent(svg2);
     const inlineViewport = content ? createInlineSvgViewport(content.box) : null;
     const clone = content && inlineViewport ? createInlineSvgClone(svg2, content, inlineViewport) : svg2.cloneNode(true);
     uniquifySvgIds(clone);
     sizeSvgForInlineDisplay(clone, svg2, inlineViewport);
-    clone.removeAttribute("id");
-    clone.removeAttribute("xmlns");
-    clone.removeAttribute("xmlns:xlink");
-    clone.setAttribute("class", mergeClassNames(clone.getAttribute("class"), "formulax-math__svg"));
     clone.setAttribute("focusable", "false");
     clone.setAttribute("aria-hidden", "true");
-    clone.setAttribute("preserveAspectRatio", clone.getAttribute("preserveAspectRatio") || "xMinYMin meet");
-    return new XMLSerializer().serializeToString(clone);
+    clone.setAttribute("class", mergeClassNames(clone.getAttribute("class"), "formulax-math__svg"));
+    return clone.outerHTML;
   }
   function getInlineSvgContent(svg2) {
-    const candidates = [
-      '[data-root="true"] > g[data-type="kf-editor-exp-content-box"]',
-      'g[data-type="kf-editor-exp-content-box"]',
-      'g[data-type="kf-container"]',
-      "svg > g, g"
+    const selectorCandidates = [
+      '[data-type="kf-editor-exp-content-box"]',
+      '[data-root="true"] [data-type="kf-editor-exp-content-box"]',
+      'g[data-root="true"]'
     ];
-    for (const selector of candidates) {
-      const content = svg2.querySelector(selector);
-      const rootSpace = content ? readSvgBoxInRootSpace(content) : null;
-      if (content && rootSpace) {
-        return {
-          root: content,
-          box: rootSpace.box,
-          matrix: rootSpace.matrix
-        };
-      }
+    for (const selector of selectorCandidates) {
+      const element = svg2.querySelector(selector);
+      if (!element) continue;
+      const rootSpace = readSvgBoxInRootSpace(element);
+      if (!rootSpace) continue;
+      return {
+        box: rootSpace.box,
+        matrix: rootSpace.matrix,
+        root: element
+      };
     }
     return null;
   }
@@ -25099,7 +24386,7 @@ var FormulaX = (() => {
     clone.setAttribute("height", roundLength(height2));
     clone.setAttribute(
       "style",
-      mergeInlineStyles2(
+      mergeInlineStyles(
         clone.getAttribute("style"),
         `width:${roundLength(inlineWidthEm)}em`,
         `height:${inlineHeightEm}em`
@@ -25143,85 +24430,562 @@ var FormulaX = (() => {
   function mergeClassNames(...values) {
     return values.flatMap((value) => value?.split(/\s+/) ?? []).filter(Boolean).filter((value, index, list) => list.indexOf(value) === index).join(" ");
   }
-  function mergeInlineStyles2(...values) {
+  function mergeInlineStyles(...values) {
     return values.flatMap((value) => value?.split(";") ?? []).map((value) => value.trim()).filter(Boolean).join("; ");
   }
 
-  // src/i18n.ts
-  var translations = {
-    en: {
-      equation: "Equation",
-      structures: "Structures",
-      symbols: "Symbols",
-      matrices: "Matrices",
-      templates: "Templates",
-      insert: "Insert",
-      greek: "Greek",
-      operators: "Operators",
-      relations: "Relations",
-      fraction: "Fraction",
-      superscript: "Superscript",
-      subscript: "Subscript",
-      squareRoot: "Square Root",
-      parentheses: "Parentheses",
-      plusMinus: "Plus Minus",
-      multiply: "Multiply",
-      divide: "Divide",
-      dot: "Dot",
-      union: "Union",
-      intersect: "Intersection",
-      lessOrEqual: "Less or Equal",
-      greaterOrEqual: "Greater or Equal",
-      notEqual: "Not Equal",
-      approximate: "Approximate",
-      infinity: "Infinity",
-      arrow: "Arrow",
-      limit: "Limit",
-      sine: "Sine",
-      logarithm: "Logarithm",
-      matrix: "Matrix",
-      summation: "Summation",
-      integral: "Integral",
-      placeholder: "WPS-inspired ribbon layout. Some tiles are placeholders for future SDK features."
-    },
-    zh: {
-      equation: "\u516C\u5F0F",
-      structures: "\u7ED3\u6784",
-      symbols: "\u7B26\u53F7",
-      matrices: "\u77E9\u9635",
-      templates: "\u6A21\u677F",
-      insert: "\u63D2\u5165",
-      greek: "\u5E0C\u814A\u5B57\u6BCD",
-      operators: "\u8FD0\u7B97\u7B26",
-      relations: "\u5173\u7CFB",
-      fraction: "\u5206\u6570",
-      superscript: "\u4E0A\u6807",
-      subscript: "\u4E0B\u6807",
-      squareRoot: "\u5E73\u65B9\u6839",
-      parentheses: "\u62EC\u53F7",
-      plusMinus: "\u52A0\u51CF",
-      multiply: "\u4E58",
-      divide: "\u9664",
-      dot: "\u70B9\u4E58",
-      union: "\u5E76\u96C6",
-      intersect: "\u4EA4\u96C6",
-      lessOrEqual: "\u5C0F\u4E8E\u7B49\u4E8E",
-      greaterOrEqual: "\u5927\u4E8E\u7B49\u4E8E",
-      notEqual: "\u4E0D\u7B49\u4E8E",
-      approximate: "\u7EA6\u7B49\u4E8E",
-      infinity: "\u65E0\u7A77",
-      arrow: "\u7BAD\u5934",
-      limit: "\u6781\u9650",
-      sine: "\u6B63\u5F26",
-      logarithm: "\u5BF9\u6570",
-      matrix: "\u77E9\u9635",
-      summation: "\u6C42\u548C",
-      integral: "\u79EF\u5206",
-      placeholder: "WPS \u98CE\u683C\u7684\u5DE5\u5177\u680F\u5E03\u5C40\u3002\u90E8\u5206\u6309\u94AE\u4ECD\u662F\u672A\u6765 SDK \u529F\u80FD\u7684\u5360\u4F4D\u9879\u3002"
+  // ../renderer-kity/src/dom.ts
+  async function waitForDocumentFonts(doc2) {
+    if (!doc2.fonts?.ready) return;
+    try {
+      await doc2.fonts.ready;
+    } catch {
+    }
+  }
+  function waitForAnimationFrame(view) {
+    return new Promise((resolve) => {
+      view.requestAnimationFrame(() => resolve());
+    });
+  }
+
+  // ../renderer-kity/src/serialize.ts
+  function findKityFormulaSvg(root2) {
+    return root2.querySelector(
+      ".kf-editor-edit-area svg, .kf-editor-canvas-container svg, svg"
+    );
+  }
+  function serializeKityFormulaFromRoot(root2) {
+    const svg2 = findKityFormulaSvg(root2);
+    if (!svg2) {
+      return "";
     }
-  };
-  function t(locale, key) {
-    return translations[locale][key] ?? translations.en[key];
+    return serializeSvgForInsertion(svg2);
+  }
+  async function waitForKityFormulaSvgLayout(root2) {
+    const doc2 = root2.ownerDocument ?? document;
+    const view = doc2.defaultView ?? window;
+    await waitForDocumentFonts(doc2);
+    let previous = readRenderedFormulaBox(root2);
+    for (let attempt = 0; attempt < 4; attempt += 1) {
+      await waitForAnimationFrame(view);
+      const current = readRenderedFormulaBox(root2);
+      if (previous && current && areSvgBoxesClose(previous, current)) {
+        return;
+      }
+      previous = current;
+    }
+  }
+  function readRenderedFormulaBox(root2) {
+    const svg2 = findKityFormulaSvg(root2);
+    if (!svg2) {
+      return null;
+    }
+    return readRenderedFormulaSvgBox(svg2);
+  }
+  function areSvgBoxesClose(left, right) {
+    return Math.abs(left.x - right.x) < 0.01 && Math.abs(left.y - right.y) < 0.01 && Math.abs(left.width - right.width) < 0.01 && Math.abs(left.height - right.height) < 0.01;
+  }
+
+  // src/perf.ts
+  function getPerfHost2() {
+    return globalThis;
+  }
+  function getPerfState2() {
+    const host = getPerfHost2();
+    host.__FORMULAX_PERF_STATE__ ??= {
+      reportedMeasureCount: 0,
+      reportScheduled: false
+    };
+    return host.__FORMULAX_PERF_STATE__;
+  }
+  function hasPerfSupport2() {
+    return typeof performance !== "undefined" && typeof performance.mark === "function" && typeof performance.measure === "function" && typeof performance.getEntriesByType === "function";
+  }
+  function isPerfDebugEnabled2() {
+    return getPerfHost2().__FORMULAX_PERF__ === true;
+  }
+  function schedulePerfReport2() {
+    if (!hasPerfSupport2() || !isPerfDebugEnabled2()) {
+      return;
+    }
+    const state = getPerfState2();
+    if (state.reportScheduled) {
+      return;
+    }
+    state.reportScheduled = true;
+    queueMicrotask(() => {
+      state.reportScheduled = false;
+      const entries = performance.getEntriesByType("measure").filter((entry) => entry.name.startsWith("fx:")).sort((left, right) => left.startTime - right.startTime);
+      const nextEntries = entries.slice(state.reportedMeasureCount);
+      state.reportedMeasureCount = entries.length;
+      if (!nextEntries.length) {
+        return;
+      }
+      console.table(nextEntries.map((entry) => ({
+        name: entry.name,
+        duration: Number(entry.duration.toFixed(2)),
+        startTime: Number(entry.startTime.toFixed(2))
+      })));
+    });
+  }
+  function markFormulaXPerf2(name) {
+    if (!hasPerfSupport2()) {
+      return null;
+    }
+    const markName = `${name}::${Date.now()}::${Math.random().toString(36).slice(2, 8)}`;
+    performance.mark(markName);
+    return markName;
+  }
+  function measureFormulaXPerf2(name, startMark, endMark) {
+    if (!hasPerfSupport2() || !startMark) {
+      return null;
+    }
+    const resolvedEndMark = endMark ?? markFormulaXPerf2(`${name}:end`);
+    if (!resolvedEndMark) {
+      return null;
+    }
+    performance.measure(name, startMark, resolvedEndMark);
+    schedulePerfReport2();
+    return resolvedEndMark;
+  }
+  function recordFormulaXPerfPoint(name) {
+    const markName = markFormulaXPerf2(name);
+    if (!markName) {
+      return;
+    }
+    measureFormulaXPerf2(name, markName, markName);
+    clearFormulaXPerfMarks2(markName);
+  }
+  function clearFormulaXPerfMarks2(...marks) {
+    if (!hasPerfSupport2()) {
+      return;
+    }
+    for (const mark of marks) {
+      if (!mark) {
+        continue;
+      }
+      performance.clearMarks(mark);
+    }
+  }
+  async function preloadFormulaXEditor() {
+    await ensureKityRuntime();
+  }
+  function scheduleFormulaXEditorPreload(mode, target) {
+    if (mode === false || typeof window === "undefined") {
+      return () => void 0;
+    }
+    let disposed = false;
+    let triggered = false;
+    const cleanupCallbacks = [];
+    const trigger = () => {
+      if (disposed || triggered) {
+        return;
+      }
+      triggered = true;
+      while (cleanupCallbacks.length) {
+        cleanupCallbacks.pop()?.();
+      }
+      void preloadFormulaXEditor();
+    };
+    if (mode === "idle") {
+      const host = getPerfHost2();
+      if (typeof host.requestIdleCallback === "function") {
+        const handle = host.requestIdleCallback(() => {
+          trigger();
+        });
+        cleanupCallbacks.push(() => {
+          host.cancelIdleCallback?.(handle);
+        });
+      } else {
+        const handle = window.setTimeout(() => {
+          trigger();
+        }, 1);
+        cleanupCallbacks.push(() => {
+          window.clearTimeout(handle);
+        });
+      }
+      return () => {
+        disposed = true;
+        while (cleanupCallbacks.length) {
+          cleanupCallbacks.pop()?.();
+        }
+      };
+    }
+    if (target && "addEventListener" in target && "removeEventListener" in target) {
+      const eventTarget = target;
+      const onActivate = () => {
+        trigger();
+      };
+      eventTarget.addEventListener("pointerenter", onActivate, { once: true, passive: true });
+      eventTarget.addEventListener("focusin", onActivate, { once: true });
+      cleanupCallbacks.push(() => {
+        eventTarget.removeEventListener("pointerenter", onActivate);
+        eventTarget.removeEventListener("focusin", onActivate);
+      });
+    }
+    return () => {
+      disposed = true;
+      while (cleanupCallbacks.length) {
+        cleanupCallbacks.pop()?.();
+      }
+    };
+  }
+  function waitForFormulaXAnimationFrame() {
+    if (typeof window === "undefined" || typeof window.requestAnimationFrame !== "function") {
+      return Promise.resolve();
+    }
+    return new Promise((resolve) => {
+      window.requestAnimationFrame(() => resolve());
+    });
+  }
+
+  // src/formula-modal.ts
+  var EMPTY_FORMULA_PLACEHOLDER = "\\placeholder ";
+  var STYLE_ID = "fx-formula-modal-styles";
+  var formulaXModalStyles = `
+.fx-formula-modal-open {
+  overflow: hidden;
+}
+
+.fx-formula-modal-root {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fx-formula-modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.48);
+}
+
+.fx-formula-modal {
+  --fx-formula-editor-body-height: 264px;
+  --fx-formula-workspace-height: 168px;
+  position: relative;
+  width: min(860px, calc(100vw - 32px));
+  height: auto;
+  max-height: calc(100vh - 32px);
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+  isolation: isolate;
+}
+
+.fx-formula-modal__header,
+.fx-formula-modal__footer,
+.fx-formula-modal__title,
+.fx-formula-modal__close,
+.fx-formula-modal__button,
+.fx-formula-editor-loading,
+.fx-formula-editor-error {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.fx-formula-modal__header {
+  min-height: 56px;
+  padding: 0 20px;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 3;
+  background: #fff;
+  border-radius: 14px 14px 0 0;
+}
+
+.fx-formula-modal__title {
+  font-size: 16px;
+  font-weight: 650;
+  margin: 0;
+  color: #111827;
+}
+
+.fx-formula-modal__close {
+  border: 0;
+  background: transparent;
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+  color: #6b7280;
+}
+
+.fx-formula-modal__body {
+  flex: 0 0 auto;
+  height: var(--fx-formula-editor-body-height);
+  padding: 0;
+  overflow: visible;
+  min-height: var(--fx-formula-editor-body-height);
+  position: relative;
+  z-index: 2;
+}
+
+.fx-formula-editor-host {
+  width: 100%;
+  height: var(--fx-formula-editor-body-height);
+  min-height: var(--fx-formula-editor-body-height);
+  overflow: visible;
+  position: relative;
+}
+
+.fx-formula-kity-host {
+  width: 100%;
+  height: var(--fx-formula-editor-body-height);
+  min-height: var(--fx-formula-editor-body-height);
+  overflow: visible;
+  position: relative;
+}
+
+.fx-formula-kity-host .kf-editor {
+  height: var(--fx-formula-editor-body-height) !important;
+  overflow: visible !important;
+}
+
+.fx-formula-kity-host .kf-editor-toolbar {
+  overflow: visible;
+  position: relative;
+  z-index: 20;
+}
+
+.fx-formula-kity-host .kf-editor-ui-button-mount-point,
+.fx-formula-kity-host .kf-editor-ui-area-mount,
+.fx-formula-kity-host .kf-editor-ui-box,
+.fx-formula-kity-host .kf-editor-ui-list {
+  z-index: 1000;
+}
+
+.fx-formula-kity-host .kf-editor-edit-area,
+.fx-formula-kity-host .kf-editor-canvas-container {
+  min-height: var(--fx-formula-workspace-height);
+  height: var(--fx-formula-workspace-height);
+}
+
+.fx-formula-kity-host .kf-editor-edit-area {
+  flex: 0 0 auto;
+  overflow: hidden;
+}
+
+.fx-formula-kity-host .kf-editor,
+.fx-formula-kity-host .kf-editor svg text,
+.fx-formula-kity-host .kf-editor-ui-area-item-text,
+.fx-formula-kity-host .kf-editor-ui-box-item-text,
+.fx-formula-kity-host .kf-editor-ui-box-item-val {
+  font-family: "KF AMS MAIN", "Cambria Math", "Latin Modern Math", "Times New Roman", serif !important;
+}
+
+.fx-formula-kity-host .kf-editor-ui-box-item-content,
+.fx-formula-kity-host .kf-editor-ui-box-item-val {
+  min-width: 32px;
+  min-height: 32px;
+}
+
+.fx-formula-kity-host .kf-editor-ui-box-item-val svg,
+.fx-formula-kity-host .kf-editor-ui-box-item-val img,
+.fx-formula-kity-host .kf-editor-ui-area-item-img,
+.fx-formula-kity-host .kf-editor-ui-area-item-text {
+  display: block;
+}
+
+.fx-formula-editor-loading {
+  height: var(--fx-formula-editor-body-height);
+  padding: 24px;
+  color: #4b5563;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fx-formula-editor-error {
+  padding: 24px;
+  color: #dc2626;
+  font-size: 14px;
+}
+
+.fx-formula-editor-error pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: #991b1b;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 8px;
+  padding: 12px;
+  margin-top: 8px;
+}
+
+.fx-formula-modal__footer {
+  min-height: 64px;
+  padding: 12px 20px;
+  border-top: 1px solid #e5e7eb;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+  background: #fff;
+  border-radius: 0 0 14px 14px;
+}
+
+.fx-formula-modal__button {
+  appearance: none;
+  border: 1px solid #d1d5db;
+  background: #fff;
+  color: #111827;
+  border-radius: 8px;
+  padding: 8px 14px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.fx-formula-modal__button--primary {
+  border-color: #2563eb;
+  background: #2563eb;
+  color: #fff;
+}
+`;
+  function ensureFormulaXModalStyles(doc2 = document) {
+    ensureFormulaXBaseStyles(doc2);
+    if (doc2.getElementById(STYLE_ID)) return;
+    const style = doc2.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = formulaXModalStyles;
+    doc2.head.appendChild(style);
+  }
+  function renderFormulaXEditorLoadingState(root2) {
+    root2.classList.add("fx-formula-kity-host");
+    root2.innerHTML = `
+    <div class="fx-formula-editor-loading" role="status" aria-live="polite">
+      Loading FormulaX editor...
+    </div>
+  `;
+  }
+  function mountFormulaXEditor(root2, options = {}) {
+    recordFormulaXPerfPoint("fx:formula-editor:mount:start");
+    const mountStart = markFormulaXPerf2("fx:formula-editor:mount:start:scope");
+    let destroyed = false;
+    let latestLatex = options.initialLatex ?? "";
+    let handle = null;
+    const initialLatex = latestLatex.trim() ? latestLatex : EMPTY_FORMULA_PLACEHOLDER;
+    renderFormulaXEditorLoadingState(root2);
+    const loadingVisibleMark = markFormulaXPerf2("fx:formula-editor:loading-visible");
+    measureFormulaXPerf2("fx:formula-editor:loading-visible", mountStart, loadingVisibleMark);
+    clearFormulaXPerfMarks2(loadingVisibleMark);
+    const readyPromise = mountKityEditor(root2, {
+      initialLatex,
+      height: options.height ?? "100%",
+      autofocus: options.autofocus ?? true,
+      assets: options.assets,
+      render: {
+        fontsize: options.render?.fontsize ?? 40
+      }
+    }).then((nextHandle) => {
+      if (destroyed) {
+        nextHandle.destroy();
+        throw new Error("FormulaX editor mount cancelled");
+      }
+      const readyMark = markFormulaXPerf2("fx:kity-editor:ready");
+      measureFormulaXPerf2("fx:kity-editor:ready", mountStart, readyMark);
+      clearFormulaXPerfMarks2(readyMark);
+      handle = nextHandle;
+      return nextHandle;
+    }).catch((error) => {
+      console.error("[FormulaX] Failed to load FormulaX editor:", error);
+      if (!destroyed) {
+        root2.innerHTML = `
+          <div class="fx-formula-editor-error">
+            Failed to load FormulaX editor.
+            <pre>${escapeHtml(error instanceof Error ? error.message : String(error))}</pre>
+          </div>
+        `;
+      }
+      throw error;
+    }).finally(() => {
+      clearFormulaXPerfMarks2(mountStart);
+    });
+    const getCurrentLatex = async () => {
+      const readyHandle = handle ?? await readyPromise;
+      const latex = await tryReadLatexFromKityHandle(readyHandle);
+      if (latex !== null) {
+        latestLatex = latex;
+      }
+      return latestLatex;
+    };
+    return {
+      root: root2,
+      getLatex: getCurrentLatex,
+      async getState() {
+        const latex = await getCurrentLatex();
+        try {
+          return {
+            ...createEmptyState(),
+            doc: parseLatex(latex)
+          };
+        } catch {
+          return createEmptyState();
+        }
+      },
+      async getRenderHtml() {
+        await readyPromise;
+        await waitForKityFormulaSvgLayout(root2);
+        return serializeKityFormulaFromRoot(root2);
+      },
+      destroy() {
+        if (destroyed) return;
+        destroyed = true;
+        void readyPromise.then((readyHandle) => readyHandle.destroy()).catch(() => void 0);
+        root2.innerHTML = "";
+      }
+    };
+  }
+  async function tryReadLatexFromKityHandle(handle) {
+    try {
+      let isEmpty = false;
+      handle.ready(function ready() {
+        const result = this.execCommand("content.is.empty");
+        isEmpty = result === true;
+      });
+      if (isEmpty) {
+        return "";
+      }
+    } catch {
+    }
+    const candidates = [
+      "get.source",
+      "getSource",
+      "getLatex",
+      "get.latex",
+      "get.content",
+      "getContent"
+    ];
+    for (const command of candidates) {
+      try {
+        let value = null;
+        handle.ready(function ready() {
+          value = this.execCommand(command);
+        });
+        if (typeof value === "string" && value.trim()) {
+          return value;
+        }
+        if (value && typeof value === "object" && "latex" in value) {
+          const latex = value.latex;
+          if (typeof latex === "string" && latex.trim()) {
+            return latex;
+          }
+        }
+      } catch {
+      }
+    }
+    return null;
   }
   return __toCommonJS(index_exports);
 })();