@formulaxjs/editor 0.2.0 → 0.3.1

package/dist/index.cjs

@@ -20,101 +20,178 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // 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,
-  FormulaXEditor: () => import_kity_runtime2.FormulaXEditor,
-  createFormulaElement: () => createFormulaElement,
-  createFormulaMarkup: () => createFormulaMarkup,
-  createKityEditor: () => import_kity_runtime2.createKityEditor,
+  clearFormulaXPerfMarks: () => clearFormulaXPerfMarks,
   ensureFormulaXModalStyles: () => ensureFormulaXModalStyles,
-  ensureKityRuntime: () => import_kity_runtime2.ensureKityRuntime,
-  escapeAttribute: () => escapeAttribute,
-  escapeHtml: () => escapeHtml,
-  findFormulaElement: () => findFormulaElement,
   formulaXModalStyles: () => formulaXModalStyles,
-  getFormulaLatexFromElement: () => getFormulaLatexFromElement,
-  isFormulaElement: () => isFormulaElement,
+  markFormulaXPerf: () => markFormulaXPerf,
+  measureFormulaXPerf: () => measureFormulaXPerf,
   mountFormulaXEditor: () => mountFormulaXEditor,
-  mountKityEditor: () => import_kity_runtime2.mountKityEditor,
-  replaceFormulaElement: () => replaceFormulaElement,
-  serializeSvgForInsertion: () => serializeSvgForInsertion
+  preloadFormulaXEditor: () => preloadFormulaXEditor,
+  recordFormulaXPerfPoint: () => recordFormulaXPerfPoint,
+  renderFormulaXEditorLoadingState: () => renderFormulaXEditorLoadingState,
+  scheduleFormulaXEditorPreload: () => scheduleFormulaXEditorPreload,
+  waitForFormulaXAnimationFrame: () => waitForFormulaXAnimationFrame
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/formula-modal.ts
 var import_core = require("@formulaxjs/core");
-var import_kity_runtime = require("@formulaxjs/kity-runtime");
+var import_kity_runtime2 = require("@formulaxjs/kity-runtime");
+var import_renderer = require("@formulaxjs/renderer");
+var import_renderer_kity = require("@formulaxjs/renderer-kity");
 
-// 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}` : ""
-    )
+// src/perf.ts
+var import_kity_runtime = require("@formulaxjs/kity-runtime");
+function getPerfHost() {
+  return globalThis;
+}
+function getPerfState() {
+  const host = getPerfHost();
+  host.__FORMULAX_PERF_STATE__ ??= {
+    reportedMeasureCount: 0,
+    reportScheduled: false
   };
-  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"]`);
+  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 recordFormulaXPerfPoint(name) {
+  const markName = markFormulaXPerf(name);
+  if (!markName) {
+    return;
+  }
+  measureFormulaXPerf(name, markName, markName);
+  clearFormulaXPerfMarks(markName);
+}
+function clearFormulaXPerfMarks(...marks) {
+  if (!hasPerfSupport()) {
+    return;
+  }
+  for (const mark of marks) {
+    if (!mark) {
+      continue;
+    }
+    performance.clearMarks(mark);
+  }
+}
+async function preloadFormulaXEditor() {
+  await (0, import_kity_runtime.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 = 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()?.();
+      }
+    };
+  }
+  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
@@ -223,6 +300,8 @@ var formulaXModalStyles = `
 }
 
 .fx-formula-kity-host .kf-editor {
+  box-sizing: border-box;
+  width: 100%;
   height: var(--fx-formula-editor-body-height) !important;
   overflow: visible !important;
 }
@@ -255,8 +334,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;
 }
 
@@ -331,60 +409,35 @@ 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) {
+  (0, import_renderer.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 mountFormulaXEditor(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>
   `;
-  const readyPromise = (0, import_kity_runtime.mountKityEditor)(root, {
+}
+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 = (0, import_kity_runtime2.mountKityEditor)(root, {
     initialLatex,
     height: options.height ?? "100%",
     autofocus: options.autofocus ?? true,
@@ -397,6 +450,9 @@ function mountFormulaXEditor(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) => {
@@ -405,11 +461,13 @@ function mountFormulaXEditor(root, options = {}) {
       root.innerHTML = `
           <div class="fx-formula-editor-error">
             Failed to load FormulaX editor.
-            <pre>${escapeHtml(error instanceof Error ? error.message : String(error))}</pre>
+            <pre>${(0, import_renderer.escapeHtml)(error instanceof Error ? error.message : String(error))}</pre>
           </div>
         `;
     }
     throw error;
+  }).finally(() => {
+    clearFormulaXPerfMarks(mountStart);
   });
   const getCurrentLatex = async () => {
     const readyHandle = handle ?? await readyPromise;
@@ -435,8 +493,8 @@ function mountFormulaXEditor(root, options = {}) {
     },
     async getRenderHtml() {
       await readyPromise;
-      await waitForFormulaSvgLayout(root);
-      return renderCurrentFormulaAsSvgHtml(root);
+      await (0, import_renderer_kity.waitForKityFormulaSvgLayout)(root);
+      return (0, import_renderer_kity.serializeKityFormulaFromRoot)(root);
     },
     destroy() {
       if (destroyed) return;
@@ -486,325 +544,18 @@ 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/index.ts
-var import_kity_runtime2 = require("@formulaxjs/kity-runtime");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  DEFAULT_FORMULA_ATTRIBUTE,
-  DEFAULT_FORMULA_CLASS,
-  FORMULA_FLAG_ATTRIBUTE,
-  FormulaXEditor,
-  createFormulaElement,
-  createFormulaMarkup,
-  createKityEditor,
+  clearFormulaXPerfMarks,
   ensureFormulaXModalStyles,
-  ensureKityRuntime,
-  escapeAttribute,
-  escapeHtml,
-  findFormulaElement,
   formulaXModalStyles,
-  getFormulaLatexFromElement,
-  isFormulaElement,
+  markFormulaXPerf,
+  measureFormulaXPerf,
   mountFormulaXEditor,
-  mountKityEditor,
-  replaceFormulaElement,
-  serializeSvgForInsertion
+  preloadFormulaXEditor,
+  recordFormulaXPerfPoint,
+  renderFormulaXEditorLoadingState,
+  scheduleFormulaXEditorPreload,
+  waitForFormulaXAnimationFrame
 });
 //# sourceMappingURL=index.cjs.map