@drghaliasri/butex 5.5.4 → 5.6.0

package/dist/react-document.mjs

@@ -349,6 +349,66 @@ function fromMathObjectJson(json, mode = "english") {
     closing: json.closing
   };
 }
+function scriptsToJson(node, path) {
+  return {
+    ...node.superscript ? { superscript: chainToJson(node.superscript, `${path}.superscript`) } : {},
+    ...node.subscript ? { subscript: chainToJson(node.subscript, `${path}.subscript`) } : {}
+  };
+}
+function nodeToJson(node, path) {
+  const scripts = scriptsToJson(node, path);
+  if (node instanceof CharNode || node instanceof NumberNode || node instanceof OperatorNode) {
+    return { node_type: node.nodeType, expr: node.expr, ...scripts };
+  }
+  if (node instanceof DelimiterNode) {
+    return {
+      node_type: "DelimiterObject",
+      left_delim_expr: node.leftDelimExpr,
+      inner_expr: chainToJson(node.innerExpr, `${path}.inner_expr`),
+      right_delim_expr: node.rightDelimExpr,
+      ...scripts
+    };
+  }
+  if (node instanceof CommandNode) {
+    return {
+      node_type: "CommandObject",
+      name: node.name,
+      optional_args: node.optionalArgs.map((arg, index) => chainToJson(arg, `${path}.optional_args[${String(index)}]`)),
+      mandatory_args: node.mandatoryArgs.map((arg, index) => chainToJson(arg, `${path}.mandatory_args[${String(index)}]`)),
+      ...scripts
+    };
+  }
+  if (node instanceof EnvNode) {
+    return {
+      node_type: "EnvObject",
+      opening: node.opening,
+      lines: node.lines.map((line, index) => chainToJson(line, `${path}.lines[${String(index)}]`)),
+      closing: node.closing,
+      ...scripts
+    };
+  }
+  throw new Error(`Unsupported runtime math node at ${path}: ${node.nodeType}`);
+}
+function chainToJson(chain, path) {
+  if (!(chain instanceof ChainNode)) {
+    throw new Error(`Expected live ChainNode at ${path}`);
+  }
+  return {
+    node_type: "ChainClass",
+    chain: chain.chain.map((node, index) => nodeToJson(node, `${path}.chain[${String(index)}]`))
+  };
+}
+function toMathObjectJson(math) {
+  if (math.nodeType !== "MathObject" || !Array.isArray(math.lines) || math.lines.length === 0) {
+    throw new Error("Cannot serialize invalid runtime MathObject");
+  }
+  return {
+    node_type: "MathObject",
+    math_mode: math.mathMode,
+    lines: math.lines.map((line, index) => chainToJson(line, `$.lines[${String(index)}]`)),
+    closing: math.closing
+  };
+}
 function renderMathNodeLatex(math) {
   const lines = math.lines.map((line) => line.arabicLatex());
   if (math.mathMode === "$" || math.mathMode === "\\(") {
@@ -1238,6 +1298,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     category: "operators1",
     Tex: "\\neq",
     mirror: true,
+    compileMirror: true,
     Label: "\u2260",
     title: "\u0644\u0627 \u064A\u0633\u0627\u0648\u064A",
     svg_path: null
@@ -1277,6 +1338,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     Tex: "\\leq",
     mirror: true,
     displayMirror: false,
+    compileMirror: true,
     Label: "\u2264",
     title: "\u0623\u0635\u063A\u0631 \u0645\u0646 \u0623\u0648 \u064A\u0633\u0627\u0648\u064A",
     svg_path: null
@@ -1287,6 +1349,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     Tex: "\\geq",
     mirror: true,
     displayMirror: false,
+    compileMirror: true,
     Label: "\u2265",
     title: "\u0623\u0643\u0628\u0631 \u0645\u0646 \u0623\u0648 \u064A\u0633\u0627\u0648\u064A",
     svg_path: null
@@ -1297,6 +1360,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     Tex: "\\coloneqq",
     mirror: true,
     displayMirror: false,
+    compileMirror: true,
     Label: "\u2254",
     title: "\u064A\u0639\u0631\u0641 \u0628\u0623\u0646\u0647 \u064A\u0633\u0627\u0648\u064A",
     svg_path: null
@@ -1307,6 +1371,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     Tex: "\\eqqcolon",
     mirror: true,
     displayMirror: false,
+    compileMirror: true,
     Label: "\u2255",
     title: "\u064A\u0633\u0627\u0648\u064A \u0628\u0627\u0644\u062A\u0639\u0631\u064A\u0641",
     svg_path: null
@@ -1318,6 +1383,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     Tex: "\\propto",
     mirror: true,
     displayMirror: false,
+    compileMirror: true,
     Label: "\u221D",
     title: "\u064A\u062A\u0646\u0627\u0633\u0628 \u0645\u0639",
     svg_path: null
@@ -1328,6 +1394,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     Tex: "\\in",
     mirror: true,
     displayMirror: false,
+    compileMirror: true,
     Label: "\u2208",
     title: "\u064A\u0646\u062A\u0645\u064A \u0625\u0644\u0649",
     svg_path: null
@@ -1348,6 +1415,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     Tex: "\\subset",
     mirror: true,
     displayMirror: false,
+    compileMirror: true,
     Label: "\u2282",
     title: "\u0645\u062C\u0645\u0648\u0639\u0629 \u062C\u0632\u0626\u064A\u0629 \u0645\u0646",
     svg_path: null
@@ -1358,6 +1426,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     Tex: "\\supset",
     mirror: true,
     displayMirror: false,
+    compileMirror: true,
     Label: "\u2283",
     title: "\u0645\u062C\u0645\u0648\u0639\u0629 \u0634\u0627\u0645\u0644\u0629 \u0644\u0640",
     svg_path: null
@@ -1368,6 +1437,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     Tex: "\\subseteq",
     mirror: true,
     displayMirror: false,
+    compileMirror: true,
     Label: "\u2286",
     title: "\u0645\u062C\u0645\u0648\u0639\u0629 \u062C\u0632\u0626\u064A\u0629 \u0623\u0648 \u062A\u0633\u0627\u0648\u064A",
     svg_path: null
@@ -1378,6 +1448,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     Tex: "\\supseteq",
     mirror: true,
     displayMirror: false,
+    compileMirror: true,
     Label: "\u2287",
     title: "\u0645\u062C\u0645\u0648\u0639\u0629 \u0634\u0627\u0645\u0644\u0629 \u0623\u0648 \u062A\u0633\u0627\u0648\u064A",
     svg_path: null
@@ -1418,6 +1489,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     Tex: "\\nsubseteq",
     mirror: true,
     displayMirror: false,
+    compileMirror: true,
     Label: "\u2288",
     title: "\u0644\u064A\u0633\u062A \u0645\u062C\u0645\u0648\u0639\u0629 \u062C\u0632\u0626\u064A\u0629 \u0623\u0648 \u062A\u0633\u0627\u0648\u064A",
     svg_path: null
@@ -1428,6 +1500,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     Tex: "\\nsupseteq",
     mirror: true,
     displayMirror: false,
+    compileMirror: true,
     Label: "\u2289",
     title: "\u0644\u064A\u0633\u062A \u0645\u062C\u0645\u0648\u0639\u0629 \u0634\u0627\u0645\u0644\u0629 \u0623\u0648 \u062A\u0633\u0627\u0648\u064A",
     svg_path: null
@@ -1475,6 +1548,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     Tex: "\\ddots",
     mirror: true,
     displayMirror: false,
+    compileMirror: true,
     Label: "\u22F1",
     title: "\u0646\u0642\u0627\u0637 \u0642\u0637\u0631\u064A\u0629",
     svg_path: null
@@ -1494,6 +1568,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     category: "operators3",
     Tex: "\\implies",
     mirror: true,
+    compileMirror: true,
     Label: "\u21D2",
     title: "\u064A\u0633\u062A\u0644\u0632\u0645",
     svg_path: null
@@ -1503,6 +1578,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     category: "operators3",
     Tex: "\\impliedby",
     mirror: true,
+    compileMirror: true,
     Label: "\u21D0",
     title: "\u0645\u0633\u062A\u0644\u0632\u0645 \u0645\u0646",
     svg_path: null
@@ -1521,6 +1597,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     category: "operators3",
     Tex: "\\Longrightarrow",
     mirror: true,
+    compileMirror: true,
     Label: "\u27F9",
     title: "\u0633\u0647\u0645 \u0645\u0632\u062F\u0648\u062C \u0637\u0648\u064A\u0644 \u0625\u0644\u0649 \u0627\u0644\u064A\u0645\u064A\u0646",
     svg_path: null
@@ -1530,6 +1607,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     category: "operators3",
     Tex: "\\Longleftarrow",
     mirror: true,
+    compileMirror: true,
     Label: "\u27F8",
     title: "\u0633\u0647\u0645 \u0645\u0632\u062F\u0648\u062C \u0637\u0648\u064A\u0644 \u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631",
     svg_path: null
@@ -1539,6 +1617,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     category: "operators3",
     Tex: "\\to",
     mirror: true,
+    compileMirror: true,
     Label: "\u2192",
     title: "\u064A\u0624\u0648\u0644 \u0625\u0644\u0649",
     svg_path: null
@@ -1548,6 +1627,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     category: "operators3",
     Tex: "\\rightleftharpoons",
     mirror: true,
+    compileMirror: true,
     Label: "\u21CC",
     title: "\u0627\u062A\u0632\u0627\u0646",
     svg_path: null
@@ -1557,6 +1637,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     category: "operators3",
     Tex: "\\leftarrow",
     mirror: true,
+    compileMirror: true,
     Label: "\u2190",
     title: "\u0633\u0647\u0645 \u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631",
     svg_path: null
@@ -1566,6 +1647,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     category: "operators3",
     Tex: "\\rightarrow",
     mirror: true,
+    compileMirror: true,
     Label: "\u2192",
     title: "\u0633\u0647\u0645 \u0625\u0644\u0649 \u0627\u0644\u064A\u0645\u064A\u0646",
     svg_path: null
@@ -1575,6 +1657,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     category: "operators3",
     Tex: "\\Leftarrow",
     mirror: true,
+    compileMirror: true,
     Label: "\u21D0",
     title: "\u0633\u0647\u0645 \u0645\u0632\u062F\u0648\u062C \u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631",
     svg_path: null
@@ -1584,6 +1667,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     category: "operators3",
     Tex: "\\Rightarrow",
     mirror: true,
+    compileMirror: true,
     Label: "\u21D2",
     title: "\u0633\u0647\u0645 \u0645\u0632\u062F\u0648\u062C \u0625\u0644\u0649 \u0627\u0644\u064A\u0645\u064A\u0646",
     svg_path: null
@@ -1593,6 +1677,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     category: "operators3",
     Tex: "\\leftharpoonup",
     mirror: true,
+    compileMirror: true,
     Label: "\u21BC",
     title: "\u0633\u0647\u0645 \u062E\u0637\u0627\u0641\u064A \u0639\u0644\u0648\u064A \u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631",
     svg_path: null
@@ -1602,6 +1687,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     category: "operators3",
     Tex: "\\rightharpoonup",
     mirror: true,
+    compileMirror: true,
     Label: "\u21C0",
     title: "\u0633\u0647\u0645 \u062E\u0637\u0627\u0641\u064A \u0639\u0644\u0648\u064A \u0625\u0644\u0649 \u0627\u0644\u064A\u0645\u064A\u0646",
     svg_path: null
@@ -1611,6 +1697,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     category: "operators3",
     Tex: "\\leftharpoondown",
     mirror: true,
+    compileMirror: true,
     Label: "\u21BD",
     title: "\u0633\u0647\u0645 \u062E\u0637\u0627\u0641\u064A \u0633\u0641\u0644\u064A \u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631",
     svg_path: null
@@ -1620,6 +1707,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     category: "operators3",
     Tex: "\\rightharpoondown",
     mirror: true,
+    compileMirror: true,
     Label: "\u21C1",
     title: "\u0633\u0647\u0645 \u062E\u0637\u0627\u0641\u064A \u0633\u0641\u0644\u064A \u0625\u0644\u0649 \u0627\u0644\u064A\u0645\u064A\u0646",
     svg_path: null
@@ -1630,6 +1718,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     category: "integrals",
     Tex: "\\int",
     mirror: true,
+    compileMirror: true,
     Label: "\u222B",
     title: "\u062A\u0643\u0627\u0645\u0644",
     svg_path: null
@@ -1640,6 +1729,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     Tex: "\\iint",
     mirror: true,
     displayMirror: false,
+    compileMirror: true,
     Label: "\u222C",
     title: "\u062A\u0643\u0627\u0645\u0644 \u0645\u0632\u062F\u0648\u062C",
     svg_path: null
@@ -1650,6 +1740,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     Tex: "\\iiint",
     mirror: true,
     displayMirror: false,
+    compileMirror: true,
     Label: "\u222D",
     title: "\u062A\u0643\u0627\u0645\u0644 \u062B\u0644\u0627\u062B\u064A",
     svg_path: null
@@ -1660,6 +1751,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     Tex: "\\iiiint",
     mirror: true,
     displayMirror: false,
+    compileMirror: true,
     Label: "\u2A0C",
     title: "\u062A\u0643\u0627\u0645\u0644 \u0631\u0628\u0627\u0639\u064A",
     svg_path: null
@@ -1670,6 +1762,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     Tex: "\\oint",
     mirror: true,
     displayMirror: false,
+    compileMirror: true,
     Label: "\u222E",
     title: "\u062A\u0643\u0627\u0645\u0644 \u0645\u063A\u0644\u0642",
     svg_path: null
@@ -1680,6 +1773,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     Tex: "\\oiint",
     mirror: true,
     displayMirror: false,
+    compileMirror: true,
     Label: "\u222F",
     title: "\u062A\u0643\u0627\u0645\u0644 \u0633\u0637\u062D\u064A \u0645\u063A\u0644\u0642",
     svg_path: null
@@ -1690,6 +1784,7 @@ var ATOMIC_OPERATOR_COMMANDS = {
     Tex: "\\oiiint",
     mirror: true,
     displayMirror: false,
+    compileMirror: true,
     Label: "\u2230",
     title: "\u062A\u0643\u0627\u0645\u0644 \u062D\u062C\u0645\u064A \u0645\u063A\u0644\u0642",
     svg_path: null
@@ -1699,8 +1794,9 @@ function shouldMirrorOperatorDisplay(command) {
   return command?.displayMirror ?? command?.mirror ?? false;
 }
 var MIRRORED_OPERATOR_TEX = Object.values(ATOMIC_OPERATOR_COMMANDS).filter((command) => command.mirror).map((command) => command.Tex).sort((a, b) => b.length - a.length);
-function matchingMirroredOperator(tex, index) {
-  for (const operatorTex of MIRRORED_OPERATOR_TEX) {
+var COMPILE_MIRRORED_OPERATOR_TEX = Object.values(ATOMIC_OPERATOR_COMMANDS).filter((command) => "compileMirror" in command && command.compileMirror).map((command) => command.Tex).sort((a, b) => b.length - a.length);
+function matchingMirroredOperatorFrom(tex, index, operatorTexList) {
+  for (const operatorTex of operatorTexList) {
     if (!tex.startsWith(operatorTex, index)) {
       continue;
     }
@@ -1731,19 +1827,26 @@ function findMatchingBrace(tex, openIndex) {
   }
   return -1;
 }
-function mirrorBuTeXOperatorsInTex(tex) {
+function mirrorBuTeXOperatorsInTex(tex, options = {}) {
+  const mirroredOperatorTex = options.target === "compile" ? COMPILE_MIRRORED_OPERATOR_TEX : MIRRORED_OPERATOR_TEX;
   let result = "";
   let index = 0;
   while (index < tex.length) {
     if (tex.startsWith("\\butexmirror{", index)) {
       const end = findMatchingBrace(tex, index + "\\butexmirror".length);
       if (end !== -1) {
-        result += tex.slice(index, end + 1);
+        const bodyStart = index + "\\butexmirror{".length;
+        const body = tex.slice(bodyStart, end);
+        if (options.target === "compile" && MIRRORED_OPERATOR_TEX.includes(body) && !mirroredOperatorTex.includes(body)) {
+          result += body;
+        } else {
+          result += tex.slice(index, end + 1);
+        }
         index = end + 1;
         continue;
       }
     }
-    const operatorTex = matchingMirroredOperator(tex, index);
+    const operatorTex = matchingMirroredOperatorFrom(tex, index, mirroredOperatorTex);
     if (operatorTex) {
       result += `\\butexmirror{${operatorTex}}`;
       index += operatorTex.length;
@@ -8688,6 +8791,11 @@ var WIDGET_CHROME_CSS = `
   font-family: ${BUTEX_DIWANI_OUTLINE_FONT_STACK};
 }
 
+.butex-widget .font-mode-btn--maghribi,
+.butex-widget .character-font-option--maghribi {
+  font-family: ${BUTEX_MAGHRIBI_FONT_STACK};
+}
+
 .butex-widget .character-font-options {
   position: absolute;
   z-index: 10;
@@ -9222,6 +9330,36 @@ var WIDGET_CHROME_CSS = `
   background: var(--butex-dev-inset-bg);
   color: var(--butex-dev-inset-fg);
 }
+
+.butex-widget .debug-json-import {
+  display: grid;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.butex-widget .debug-json-import textarea {
+  min-height: 150px;
+  resize: vertical;
+  border: 1px solid var(--butex-dev-inset-border);
+  border-radius: 8px;
+  padding: 8px 10px;
+  direction: ltr;
+  text-align: left;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  background: var(--butex-dev-inset-bg);
+  color: var(--butex-dev-inset-fg);
+}
+
+.butex-widget .debug-json-error {
+  margin: 0;
+  border: 1px solid rgba(220, 38, 38, 0.45);
+  background: rgba(254, 226, 226, 0.9);
+  color: #991b1b;
+  border-radius: 8px;
+  padding: 8px 10px;
+  white-space: pre-wrap;
+}
 `.trim();
 var CHROME_STYLE_ID = "butex-widget-chrome-css";
 function injectWidgetChromeCss(doc) {
@@ -9240,6 +9378,32 @@ function uiLocaleDirection(locale) {
   return locale === "ar" ? "rtl" : "ltr";
 }
 
+// src/debugJson.ts
+function lineColumnForPosition(text, position) {
+  const before = text.slice(0, Math.max(0, position));
+  const lines = before.split("\n");
+  return {
+    line: lines.length,
+    column: (lines[lines.length - 1]?.length ?? 0) + 1
+  };
+}
+function parseJsonDebugInput(text) {
+  try {
+    return { ok: true, value: JSON.parse(text) };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    const positionMatch = message.match(/position\s+(\d+)/i);
+    if (positionMatch) {
+      const position = Number(positionMatch[1]);
+      if (Number.isFinite(position)) {
+        const location = lineColumnForPosition(text, position);
+        return { ok: false, error: `Invalid JSON at line ${String(location.line)}, column ${String(location.column)}: ${message}` };
+      }
+    }
+    return { ok: false, error: `Invalid JSON: ${message}` };
+  }
+}
+
 // src/react/ButexEditor.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var DIGIT_FORM_OPTIONS = [
@@ -9355,6 +9519,7 @@ ${latex || messages.empty}`;
 var ButexEditor = forwardRef(
   function ButexEditor2({ className, debug = false, defaultSide, uiLocale = "ar", initialSession, onSessionChange }, ref) {
     const messages = equationEditorMessages(uiLocale);
+    const debugEnabled = debug || typeof window !== "undefined" && new URLSearchParams(window.location.search).get("debug") === "1";
     const wrapperRef = useRef(null);
     const surfaceRef = useRef(null);
     const inputRef = useRef(null);
@@ -9372,7 +9537,7 @@ var ButexEditor = forwardRef(
     const digitFormBtnRef = useRef(null);
     const runtimeRef = useRef(null);
     const debugRef = useRef(debug);
-    debugRef.current = debug;
+    debugRef.current = debugEnabled;
     const uiLocaleRef = useRef(uiLocale);
     uiLocaleRef.current = uiLocale;
     const onSessionChangeRef = useRef(onSessionChange);
@@ -9380,6 +9545,9 @@ var ButexEditor = forwardRef(
     const debugBodyHiddenRef = useRef(false);
     const [debugBodyHidden, setDebugBodyHidden] = useState(false);
     debugBodyHiddenRef.current = debugBodyHidden;
+    const [debugImportOpen, setDebugImportOpen] = useState(false);
+    const [debugImportText, setDebugImportText] = useState("");
+    const [debugImportError, setDebugImportError] = useState("");
     const [digitMenuOpen, setDigitMenuOpen] = useState(false);
     const [characterFontMenuOpen, setCharacterFontMenuOpen] = useState(false);
     const [delimiterMenuOpen, setDelimiterMenuOpen] = useState(false);
@@ -9460,6 +9628,54 @@ ${arabic || currentMessages.empty}`;
     }, []);
     const updatePreviewRef = useRef(updatePreview);
     updatePreviewRef.current = updatePreview;
+    async function copyDebugText(text) {
+      try {
+        await navigator.clipboard.writeText(text);
+      } catch {
+      }
+    }
+    function currentMathObjectJsonText() {
+      const session = runtimeRef.current?.getSession();
+      if (!session) {
+        return "";
+      }
+      const math = mathNodeFromEditorSession(session);
+      if (!math.ok) {
+        return "";
+      }
+      return JSON.stringify(toMathObjectJson(math.math), null, 2);
+    }
+    function openDebugMathObjectImport() {
+      setDebugImportText(currentMathObjectJsonText());
+      setDebugImportError("");
+      setDebugImportOpen(true);
+    }
+    function applyDebugMathObjectImport() {
+      const parsed = parseJsonDebugInput(debugImportText);
+      if (!parsed.ok) {
+        setDebugImportError(parsed.error);
+        return;
+      }
+      try {
+        const math = fromMathObjectJson(parsed.value, activeEditorSide);
+        const result = mathObjectToEditorSession(math);
+        if (!result.editable) {
+          setDebugImportError(result.reason);
+          return;
+        }
+        const next = { ...result.session, activeSide: activeEditorSide };
+        runtimeRef.current?.setSession(next);
+        setSelectedDigitForm(next.currentDigitForm ?? "western");
+        setSelectedCharacterFont(next.currentCharacterFont ?? "default");
+        setActiveEditorSide(next.activeSide);
+        onSessionChangeRef.current?.(next);
+        setDebugImportError("");
+        setDebugImportOpen(false);
+        void updatePreviewRef.current(next);
+      } catch (importError) {
+        setDebugImportError(importError instanceof Error ? importError.message : String(importError));
+      }
+    }
     useEffect(() => {
       injectWidgetChromeCss();
       injectBuTeXEditorStyles(typeof document !== "undefined" ? document : void 0);
@@ -10620,7 +10836,7 @@ ${arabic || currentMessages.empty}`;
             /* @__PURE__ */ jsx("div", { ref: renderErrorRef, className: "error", hidden: true })
           ] }),
           /* @__PURE__ */ jsx("section", { className: "panel panel-preview", "aria-label": messages.renderPreview, children: /* @__PURE__ */ jsx("div", { ref: mathOutputRef, className: "preview-box" }) }),
-          debug ? /* @__PURE__ */ jsxs("section", { className: "panel", children: [
+          debugEnabled ? /* @__PURE__ */ jsxs("section", { className: "panel", children: [
             /* @__PURE__ */ jsxs("div", { className: "dev-strip", children: [
               /* @__PURE__ */ jsx("span", { className: "dev-badge", children: messages.development }),
               /* @__PURE__ */ jsx("div", { ref: latexLinesRef, className: "ascii" }),
@@ -10628,6 +10844,8 @@ ${arabic || currentMessages.empty}`;
             ] }),
             /* @__PURE__ */ jsxs("div", { style: { marginTop: 12 }, children: [
               /* @__PURE__ */ jsxs("div", { className: "debug-head", children: [
+                /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void copyDebugText(currentMathObjectJsonText()), children: "Copy MathObject JSON" }),
+                /* @__PURE__ */ jsx("button", { type: "button", "aria-expanded": debugImportOpen, onClick: openDebugMathObjectImport, children: "Import MathObject JSON" }),
                 /* @__PURE__ */ jsx(
                   "button",
                   {
@@ -10663,6 +10881,35 @@ ${arabic || currentMessages.empty}`;
                   }
                 )
               ] }),
+              debugImportOpen ? /* @__PURE__ */ jsxs("div", { className: "debug-json-import", children: [
+                /* @__PURE__ */ jsx(
+                  "textarea",
+                  {
+                    value: debugImportText,
+                    "aria-label": "Import MathObject JSON",
+                    spellCheck: false,
+                    onChange: (event) => {
+                      setDebugImportText(event.currentTarget.value);
+                      setDebugImportError("");
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "debug-head", children: [
+                  /* @__PURE__ */ jsx("button", { type: "button", onClick: applyDebugMathObjectImport, children: "Apply" }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setDebugImportOpen(false);
+                        setDebugImportError("");
+                      },
+                      children: "Cancel"
+                    }
+                  )
+                ] }),
+                debugImportError ? /* @__PURE__ */ jsx("p", { className: "debug-json-error", children: debugImportError }) : null
+              ] }) : null,
               /* @__PURE__ */ jsx("div", { ref: debugLogRef, className: "debug-log" })
             ] })
           ] }) : null