@formulaxjs/editor 0.1.1 → 0.3.0

package/dist/index.js

@@ -1,434 +1,164 @@
-// src/dom-renderer.ts
-var joinPath = (path) => path.join(".");
-var renderInteractiveHtml = (doc, activePath) => `
-  <div class="fx-editor-surface" data-role="surface">
-    ${renderChildren(doc.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)}`);
-};
-
-// src/editor.ts
+// src/formula-modal.ts
+import { createEmptyState, parseLatex } from "@formulaxjs/core";
+import { mountKityEditor } from "@formulaxjs/kity-runtime";
+import { escapeHtml, ensureFormulaXBaseStyles } from "@formulaxjs/renderer";
 import {
-  applyCommand,
-  backspace,
-  createEmptyState,
-  insertFenced,
-  insertFraction,
-  insertSqrt,
-  insertSubscript,
-  insertSuperscript,
-  insertText
-} from "@formulaxjs/core";
-
-// 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;
+  serializeKityFormulaFromRoot,
+  waitForKityFormulaSvgLayout
+} from "@formulaxjs/renderer-kity";
+
+// src/perf.ts
+import { ensureKityRuntime } from "@formulaxjs/kity-runtime";
+function getPerfHost() {
+  return globalThis;
+}
+function getPerfState() {
+  const host = getPerfHost();
+  host.__FORMULAX_PERF_STATE__ ??= {
+    reportedMeasureCount: 0,
+    reportScheduled: false
+  };
+  return host.__FORMULAX_PERF_STATE__;
 }
-.fx-slot {
-  width: 3px;
-  height: 1.2em;
-  border: none;
-  background: #53b856;
-  padding: 0;
-  margin: 0 1px;
-  cursor: text;
-  border-radius: 1px;
-  vertical-align: middle;
+function hasPerfSupport() {
+  return typeof performance !== "undefined" && typeof performance.mark === "function" && typeof performance.measure === "function" && typeof performance.getEntriesByType === "function";
 }
-.fx-slot.is-active {
-  animation: fx-blink 1s infinite;
+function isPerfDebugEnabled() {
+  return getPerfHost().__FORMULAX_PERF__ === true;
 }
-.fx-slot:hover {
-  background: #77c75b;
+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))
+    })));
+  });
 }
-`;
-
-// 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();
+function markFormulaXPerf(name) {
+  if (!hasPerfSupport()) {
+    return null;
   }
-  getState() {
-    return structuredClone(this.state);
+  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;
   }
-  getLocale() {
-    return this.locale;
+  const resolvedEndMark = endMark ?? markFormulaXPerf(`${name}:end`);
+  if (!resolvedEndMark) {
+    return null;
   }
-  setState(state) {
-    this.state = structuredClone(state);
-    this.render();
+  performance.measure(name, startMark, resolvedEndMark);
+  schedulePerfReport();
+  return resolvedEndMark;
+}
+function recordFormulaXPerfPoint(name) {
+  const markName = markFormulaXPerf(name);
+  if (!markName) {
+    return;
   }
-  dispatch(command) {
-    this.state = applyCommand(this.state, command);
-    this.render();
-    this.onChange?.(this.getState());
+  measureFormulaXPerf(name, markName, markName);
+  clearFormulaXPerfMarks(markName);
+}
+function clearFormulaXPerfMarks(...marks) {
+  if (!hasPerfSupport()) {
+    return;
   }
-  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);
+  for (const mark of marks) {
+    if (!mark) {
+      continue;
+    }
+    performance.clearMarks(mark);
   }
-  bindEvents() {
-    this.root.addEventListener("click", (event) => {
-      const target = event.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", (event) => {
-      if (event.key === "Backspace") {
-        event.preventDefault();
-        this.dispatch(backspace());
-        return;
-      }
-      if (event.key === "/") {
-        event.preventDefault();
-        this.dispatch(insertFraction());
-        return;
-      }
-      if (event.key === "^") {
-        event.preventDefault();
-        this.dispatch(insertSuperscript());
-        return;
-      }
-      if (event.key === "_") {
-        event.preventDefault();
-        this.dispatch(insertSubscript());
-        return;
-      }
-      if (event.key === "r" && event.ctrlKey) {
-        event.preventDefault();
-        this.dispatch(insertSqrt());
-        return;
-      }
-      if (event.key === "(") {
-        event.preventDefault();
-        this.dispatch(insertFenced("(", ")"));
-        return;
-      }
-      if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
-        event.preventDefault();
-        this.dispatch(insertText(event.key));
-      }
-    });
+}
+async function preloadFormulaXEditor() {
+  await ensureKityRuntime();
+}
+function scheduleFormulaXEditorPreload(mode, target) {
+  if (mode === false || typeof window === "undefined") {
+    return () => void 0;
   }
-  moveSelection(path) {
-    this.state = {
-      ...this.state,
-      selection: {
-        anchor: [...path],
-        focus: [...path]
+  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 = getPerfHost();
+    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()?.();
       }
     };
-    this.render();
-    this.onChange?.(this.getState());
   }
-  render() {
-    this.root.innerHTML = renderInteractiveHtml(this.state.doc, this.state.selection.focus);
+  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);
+    });
   }
-};
-
-// src/formula-modal.ts
-import { createEmptyState as createEmptyState2, parseLatex } from "@formulaxjs/core";
-import { mountKityEditor } from "@formulaxjs/kity-runtime";
-
-// 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;");
-}
-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}` : ""
-    )
+  return () => {
+    disposed = true;
+    while (cleanupCallbacks.length) {
+      cleanupCallbacks.pop()?.();
+    }
   };
-  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"]`);
+function waitForFormulaXAnimationFrame() {
+  if (typeof window === "undefined" || typeof window.requestAnimationFrame !== "function") {
+    return Promise.resolve();
+  }
+  return new Promise((resolve) => {
+    window.requestAnimationFrame(() => resolve());
+  });
 }
 
 // src/formula-modal.ts
@@ -569,8 +299,7 @@ var formulaXModalStyles = `
 .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 {
+.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;
 }
 
@@ -645,59 +374,34 @@ var formulaXModalStyles = `
   background: #2563eb;
   color: #fff;
 }
-
-.formulax-math {
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-  line-height: 1;
-  padding: 0 2px;
-  margin: 0 1px;
-  border-radius: 3px;
-  background: transparent;
-  cursor: pointer;
-  user-select: none;
-}
-
-.formulax-math:hover {
-  outline: 1px solid rgba(37, 99, 235, 0.35);
-  background: rgba(37, 99, 235, 0.06);
-}
-
-.formulax-math__svg {
-  display: inline-block;
-  flex: 0 0 auto;
-  max-width: 100%;
-  vertical-align: -0.35em;
-  pointer-events: none;
-}
-
-.formulax-math__image {
-  display: inline-block;
-  max-width: 100%;
-  height: auto;
-  vertical-align: middle;
-  pointer-events: none;
-}
 `;
 function ensureFormulaXModalStyles(doc = document) {
+  ensureFormulaXBaseStyles(doc);
   if (doc.getElementById(STYLE_ID)) return;
   const style = doc.createElement("style");
   style.id = STYLE_ID;
   style.textContent = formulaXModalStyles;
   doc.head.appendChild(style);
 }
-function mountFormulaXKityEditor(root, options = {}) {
-  let destroyed = false;
-  let latestLatex = options.initialLatex ?? "";
-  let handle = null;
-  const initialLatex = latestLatex.trim() ? latestLatex : EMPTY_FORMULA_PLACEHOLDER;
+function renderFormulaXEditorLoadingState(root) {
   root.classList.add("fx-formula-kity-host");
   root.innerHTML = `
     <div class="fx-formula-editor-loading" role="status" aria-live="polite">
       Loading FormulaX editor...
     </div>
   `;
+}
+function mountFormulaXEditor(root, options = {}) {
+  recordFormulaXPerfPoint("fx:formula-editor:mount:start");
+  const mountStart = markFormulaXPerf("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(root);
+  const loadingVisibleMark = markFormulaXPerf("fx:formula-editor:loading-visible");
+  measureFormulaXPerf("fx:formula-editor:loading-visible", mountStart, loadingVisibleMark);
+  clearFormulaXPerfMarks(loadingVisibleMark);
   const readyPromise = mountKityEditor(root, {
     initialLatex,
     height: options.height ?? "100%",
@@ -711,6 +415,9 @@ function mountFormulaXKityEditor(root, options = {}) {
       nextHandle.destroy();
       throw new Error("FormulaX editor mount cancelled");
     }
+    const readyMark = markFormulaXPerf("fx:kity-editor:ready");
+    measureFormulaXPerf("fx:kity-editor:ready", mountStart, readyMark);
+    clearFormulaXPerfMarks(readyMark);
     handle = nextHandle;
     return nextHandle;
   }).catch((error) => {
@@ -724,6 +431,8 @@ function mountFormulaXKityEditor(root, options = {}) {
         `;
     }
     throw error;
+  }).finally(() => {
+    clearFormulaXPerfMarks(mountStart);
   });
   const getCurrentLatex = async () => {
     const readyHandle = handle ?? await readyPromise;
@@ -740,17 +449,17 @@ function mountFormulaXKityEditor(root, options = {}) {
       const latex = await getCurrentLatex();
       try {
         return {
-          ...createEmptyState2(),
+          ...createEmptyState(),
           doc: parseLatex(latex)
         };
       } catch {
-        return createEmptyState2();
+        return createEmptyState();
       }
     },
     async getRenderHtml() {
       await readyPromise;
-      await waitForFormulaSvgLayout(root);
-      return renderCurrentFormulaAsSvgHtml(root);
+      await waitForKityFormulaSvgLayout(root);
+      return serializeKityFormulaFromRoot(root);
     },
     destroy() {
       if (destroyed) return;
@@ -800,399 +509,17 @@ async function tryReadLatexFromKityHandle(handle) {
   }
   return null;
 }
-function renderCurrentFormulaAsSvgHtml(root) {
-  const svg = findFormulaSvg(root);
-  if (!svg) {
-    return "";
-  }
-  return serializeSvgForInsertion(svg);
-}
-async function waitForFormulaSvgLayout(root) {
-  const doc = root.ownerDocument ?? document;
-  const view = doc.defaultView ?? window;
-  await waitForDocumentFonts(doc);
-  let previous = readRenderedFormulaBox(root);
-  for (let attempt = 0; attempt < 4; attempt += 1) {
-    await waitForAnimationFrame(view);
-    const current = readRenderedFormulaBox(root);
-    if (previous && current && areSvgBoxesClose(previous, current)) {
-      return;
-    }
-    previous = current;
-  }
-}
-function findFormulaSvg(root) {
-  return root.querySelector(
-    ".kf-editor-edit-area svg, .kf-editor-canvas-container svg, svg"
-  );
-}
-function readRenderedFormulaBox(root) {
-  const svg = findFormulaSvg(root);
-  if (!svg) {
-    return null;
-  }
-  return getInlineSvgContent(svg)?.box ?? readSvgBox(svg);
-}
-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(doc) {
-  if (!doc.fonts?.ready) {
-    return;
-  }
-  try {
-    await doc.fonts.ready;
-  } catch {
-  }
-}
-function waitForAnimationFrame(view) {
-  return new Promise((resolve) => {
-    view.requestAnimationFrame(() => resolve());
-  });
-}
-function serializeSvgForInsertion(svg) {
-  const content = getInlineSvgContent(svg);
-  const inlineViewport = content ? createInlineSvgViewport(content.box) : null;
-  const clone = content && inlineViewport ? createInlineSvgClone(svg, content, inlineViewport) : svg.cloneNode(true);
-  uniquifySvgIds(clone);
-  sizeSvgForInlineDisplay(clone, svg, 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);
-}
-function getInlineSvgContent(svg) {
-  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"
-  ];
-  for (const selector of candidates) {
-    const content = svg.querySelector(selector);
-    const rootSpace = content ? readSvgBoxInRootSpace(content) : null;
-    if (content && rootSpace) {
-      return {
-        root: content,
-        box: rootSpace.box,
-        matrix: rootSpace.matrix
-      };
-    }
-  }
-  return null;
-}
-function readSvgBoxInRootSpace(element) {
-  const box = readSvgBox(element);
-  const matrix = getSvgRootSpaceMatrix(element);
-  if (!box || !matrix) {
-    return null;
-  }
-  const points = [
-    { x: box.x, y: box.y },
-    { x: box.x + box.width, y: box.y },
-    { x: box.x, y: box.y + box.height },
-    { x: box.x + box.width, y: box.y + box.height }
-  ].map((point) => ({
-    x: matrix.a * point.x + matrix.c * point.y + matrix.e,
-    y: matrix.b * point.x + matrix.d * point.y + matrix.f
-  }));
-  const xs = points.map((point) => point.x);
-  const ys = points.map((point) => point.y);
-  const x = Math.min(...xs);
-  const y = Math.min(...ys);
-  const width = Math.max(...xs) - x;
-  const height = Math.max(...ys) - y;
-  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
-    return null;
-  }
-  return {
-    box: { x, y, width, height },
-    matrix
-  };
-}
-function getSvgRootSpaceMatrix(element) {
-  const elementMatrix = typeof element.getCTM === "function" ? element.getCTM() : null;
-  const rootMatrix = typeof element.ownerSVGElement?.getCTM === "function" ? element.ownerSVGElement.getCTM() : null;
-  if (!elementMatrix) {
-    return null;
-  }
-  return rootMatrix ? multiplySvgMatrices(invertSvgMatrix(rootMatrix), elementMatrix) : toSvgMatrixLike(elementMatrix);
-}
-function invertSvgMatrix(matrix) {
-  const determinant = matrix.a * matrix.d - matrix.b * matrix.c;
-  if (!Number.isFinite(determinant) || determinant === 0) {
-    return {
-      a: 1,
-      b: 0,
-      c: 0,
-      d: 1,
-      e: 0,
-      f: 0
-    };
-  }
-  return {
-    a: matrix.d / determinant,
-    b: -matrix.b / determinant,
-    c: -matrix.c / determinant,
-    d: matrix.a / determinant,
-    e: (matrix.c * matrix.f - matrix.d * matrix.e) / determinant,
-    f: (matrix.b * matrix.e - matrix.a * matrix.f) / determinant
-  };
-}
-function multiplySvgMatrices(left, right) {
-  return {
-    a: left.a * right.a + left.c * right.b,
-    b: left.b * right.a + left.d * right.b,
-    c: left.a * right.c + left.c * right.d,
-    d: left.b * right.c + left.d * right.d,
-    e: left.a * right.e + left.c * right.f + left.e,
-    f: left.b * right.e + left.d * right.f + left.f
-  };
-}
-function toSvgMatrixLike(matrix) {
-  return {
-    a: matrix.a,
-    b: matrix.b,
-    c: matrix.c,
-    d: matrix.d,
-    e: matrix.e,
-    f: matrix.f
-  };
-}
-function readSvgBox(element) {
-  if (typeof element.getBBox !== "function") {
-    return null;
-  }
-  try {
-    const box = element.getBBox();
-    if (!Number.isFinite(box.width) || !Number.isFinite(box.height) || box.width <= 0 || box.height <= 0) {
-      return null;
-    }
-    return {
-      x: box.x,
-      y: box.y,
-      width: box.width,
-      height: box.height
-    };
-  } catch {
-    return null;
-  }
-}
-function createInlineSvgViewport(contentBox) {
-  const edgePadding = Math.max(0.5, Math.min(contentBox.width, contentBox.height) * 6e-3);
-  const inset = edgePadding / 2;
-  return {
-    x: contentBox.x - inset,
-    y: contentBox.y - inset,
-    width: contentBox.width + edgePadding,
-    height: contentBox.height + edgePadding
-  };
-}
-function createInlineSvgClone(source, content, viewport) {
-  const clone = source.cloneNode(false);
-  const ownerDocument = source.ownerDocument;
-  copySvgRootAttributes(source, clone);
-  clone.setAttribute(
-    "viewBox",
-    `0 0 ${roundLength(viewport.width)} ${roundLength(viewport.height)}`
-  );
-  Array.from(source.children).forEach((child) => {
-    if (child.tagName.toLowerCase() === "defs") {
-      clone.appendChild(child.cloneNode(true));
-    }
-  });
-  const wrapper = ownerDocument.createElementNS("http://www.w3.org/2000/svg", "g");
-  wrapper.setAttribute(
-    "transform",
-    `translate(${roundLength(-viewport.x)} ${roundLength(-viewport.y)})`
-  );
-  const flattened = ownerDocument.createElementNS("http://www.w3.org/2000/svg", "g");
-  flattened.setAttribute(
-    "transform",
-    `matrix(${roundLength(content.matrix.a)} ${roundLength(content.matrix.b)} ${roundLength(content.matrix.c)} ${roundLength(content.matrix.d)} ${roundLength(content.matrix.e)} ${roundLength(content.matrix.f)})`
-  );
-  flattened.appendChild(content.root.cloneNode(true));
-  wrapper.appendChild(flattened);
-  clone.appendChild(wrapper);
-  return clone;
-}
-function copySvgRootAttributes(source, target) {
-  const excluded = /* @__PURE__ */ new Set([
-    "id",
-    "width",
-    "height",
-    "viewBox",
-    "class",
-    "focusable",
-    "aria-hidden",
-    "xmlns",
-    "xmlns:xlink"
-  ]);
-  Array.from(source.attributes).forEach((attribute) => {
-    if (excluded.has(attribute.name)) return;
-    target.setAttribute(attribute.name, attribute.value);
-  });
-}
-function sizeSvgForInlineDisplay(clone, source, viewport) {
-  const viewBox = clone.viewBox?.baseVal;
-  const rect = source.getBoundingClientRect();
-  const width = viewport?.width || viewBox?.width || rect.width || Number(clone.getAttribute("width")) || 1;
-  const height = viewport?.height || viewBox?.height || rect.height || Number(clone.getAttribute("height")) || 1;
-  const ratio = Math.max(0.1, width / Math.max(1, height));
-  const inlineHeightEm = 0.875;
-  const inlineWidthEm = Math.min(40, Math.max(0.75, ratio * inlineHeightEm));
-  clone.setAttribute("width", roundLength(width));
-  clone.setAttribute("height", roundLength(height));
-  clone.setAttribute(
-    "style",
-    mergeInlineStyles2(
-      clone.getAttribute("style"),
-      `width:${roundLength(inlineWidthEm)}em`,
-      `height:${inlineHeightEm}em`
-    )
-  );
-}
-function roundLength(value) {
-  return String(Math.round(value * 1e3) / 1e3);
-}
-function uniquifySvgIds(svg) {
-  const idMap = /* @__PURE__ */ new Map();
-  const prefix = `fx-${randomIdPrefix()}-`;
-  const elementsWithId = svg.querySelectorAll("[id]");
-  elementsWithId.forEach((element) => {
-    const id = element.getAttribute("id");
-    if (!id) return;
-    const nextId = `${prefix}${id}`;
-    idMap.set(id, nextId);
-    element.setAttribute("id", nextId);
-  });
-  if (!idMap.size) return;
-  svg.querySelectorAll("*").forEach((element) => {
-    Array.from(element.attributes).forEach((attribute) => {
-      const nextValue = rewriteSvgReferences(attribute.value, idMap);
-      if (nextValue !== attribute.value) {
-        element.setAttribute(attribute.name, nextValue);
-      }
-    });
-  });
-}
-function randomIdPrefix() {
-  return Math.random().toString(36).slice(2, 5).padEnd(3, "0");
-}
-function rewriteSvgReferences(value, idMap) {
-  let nextValue = value;
-  idMap.forEach((nextId, id) => {
-    nextValue = nextValue.replaceAll(`#${id}`, `#${nextId}`).replaceAll(`url(${id})`, `url(${nextId})`).replaceAll(`url(#${id})`, `url(#${nextId})`);
-  });
-  return nextValue;
-}
-function mergeClassNames(...values) {
-  return values.flatMap((value) => value?.split(/\s+/) ?? []).filter(Boolean).filter((value, index, list) => list.indexOf(value) === index).join(" ");
-}
-function mergeInlineStyles2(...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"
-  }
-};
-function t(locale, key) {
-  return translations[locale][key] ?? translations.en[key];
-}
 export {
-  DEFAULT_FORMULA_ATTRIBUTE,
-  DEFAULT_FORMULA_CLASS,
-  FORMULA_FLAG_ATTRIBUTE,
-  FormulaEditor,
-  createFormulaElement,
-  createFormulaMarkup,
-  editorStyles,
+  clearFormulaXPerfMarks,
   ensureFormulaXModalStyles,
-  escapeAttribute,
-  escapeHtml,
-  findFormulaElement,
   formulaXModalStyles,
-  getFormulaLatexFromElement,
-  isFormulaElement,
-  mountFormulaXKityEditor,
-  renderInteractiveHtml,
-  replaceFormulaElement,
-  serializeSvgForInsertion,
-  t,
-  translations
+  markFormulaXPerf,
+  measureFormulaXPerf,
+  mountFormulaXEditor,
+  preloadFormulaXEditor,
+  recordFormulaXPerfPoint,
+  renderFormulaXEditorLoadingState,
+  scheduleFormulaXEditorPreload,
+  waitForFormulaXAnimationFrame
 };
 //# sourceMappingURL=index.js.map