@drghaliasri/butex 4.1.0 → 4.3.0

package/dist/react-document2.mjs

@@ -935,6 +935,16 @@ var ATOMIC_COMMANDS = {
     arabicLabel: "\u0645\u062D\u062F\u062F",
     title: "\u0645\u062D\u062F\u062F"
   },
+  ////////////////////// Derivatives ////////////////////////////////
+  ad: {
+    id: "ad",
+    category: "derivative",
+    englishTex: "\\mathrm{d}",
+    englishLabel: "d",
+    arabicTex: "\\ad",
+    arabicLabel: "\u0621",
+    title: "\u0639\u0644\u0627\u0645\u0629 \u0627\u0644\u0627\u0634\u062A\u0642\u0627\u0642"
+  },
   ////////////////////// Groups /////////////////////////////////
   N: {
     id: "N",
@@ -1758,6 +1768,22 @@ function createEditorSession(englishTree, arabicTree, activeSide = "arabic") {
   };
 }
 
+// src/editor/divideOperator.ts
+var DIVIDE_OPERATOR_EN = "/";
+var DIVIDE_OPERATOR_AR = "\\";
+function isDivideOperatorExpr(expr) {
+  return expr === DIVIDE_OPERATOR_EN || expr === DIVIDE_OPERATOR_AR;
+}
+function divideOperatorSurfaceExpr(expr, side) {
+  if (!isDivideOperatorExpr(expr)) {
+    return expr;
+  }
+  return side === "arabic" ? DIVIDE_OPERATOR_AR : DIVIDE_OPERATOR_EN;
+}
+function renderDivideOperatorLatex(side) {
+  return side === "arabic" ? "\\backslash" : DIVIDE_OPERATOR_EN;
+}
+
 // src/editor/digits.ts
 var WESTERN = "0123456789";
 var ARABIC_INDIC = "\u0660\u0661\u0662\u0663\u0664\u0665\u0666\u0667\u0668\u0669";
@@ -1906,6 +1932,9 @@ function renderNodeEnglish(node, options) {
   if (node.kind === "char") {
     return `${renderCharContent(node, options)}${latinScripts(node, options)}`;
   }
+  if (node.kind === "operator" && isDivideOperatorExpr(node.expr)) {
+    return `${renderDivideOperatorLatex("english")}${latinScripts(node, options)}`;
+  }
   return `${formatDigits(node.expr, selectedDigitForm(options))}${latinScripts(node, options)}`;
 }
 function renderNodeArabic(node, options) {
@@ -1940,6 +1969,9 @@ function renderNodeArabic(node, options) {
     const content = renderCharContent(node, options);
     return arabicScripts(node, (node.characterFont ?? "default") === "default" ? `\\text{${escapeText(expr)}}` : content, options);
   }
+  if (node.kind === "operator" && isDivideOperatorExpr(node.expr)) {
+    return arabicScripts(node, renderDivideOperatorLatex("arabic"), options);
+  }
   return arabicScripts(node, formatDigits(node.expr, selectedDigitForm(options)), options);
 }
 function renderChainEnglish(chain, options) {
@@ -2463,6 +2495,128 @@ function undoRedoCanRedo(stacks) {
   return stacks.future.length > 0;
 }
 
+// src/editor/derivativeTemplates.ts
+var ARABIC_VAR = "\u0633";
+var ENGLISH_VAR = "x";
+function mirroredAd() {
+  const english = createAtomicCommandNode("ad");
+  const arabic = createAtomicCommandNode("ad");
+  arabic.id = english.id;
+  return { english, arabic };
+}
+function mirroredVar() {
+  const english = createEditorNode("char", ENGLISH_VAR);
+  const arabic = createEditorNode("char", ARABIC_VAR);
+  arabic.id = english.id;
+  return { english, arabic };
+}
+function withMirroredSuperscript2(english, arabic) {
+  const englishSup = createEditorChain([createEditorNode("number", "2")]);
+  const arabicSup = createEditorChain([createEditorNode("number", "2")]);
+  arabicSup.id = englishSup.id;
+  arabicSup.nodes[0].id = englishSup.nodes[0].id;
+  english.superscript = englishSup;
+  arabic.superscript = arabicSup;
+}
+function syncChainIds(english, arabic) {
+  arabic.id = english.id;
+  const limit = Math.min(english.nodes.length, arabic.nodes.length);
+  for (let index = 0; index < limit; index += 1) {
+    arabic.nodes[index].id = english.nodes[index].id;
+  }
+}
+function syncFracIds(englishFrac, arabicFrac) {
+  arabicFrac.id = englishFrac.id;
+  if (englishFrac.numerator && arabicFrac.numerator) {
+    syncChainIds(englishFrac.numerator, arabicFrac.numerator);
+  }
+  if (englishFrac.denominator && arabicFrac.denominator) {
+    syncChainIds(englishFrac.denominator, arabicFrac.denominator);
+  }
+}
+function buildAdVarChain() {
+  const ad = mirroredAd();
+  const variable = mirroredVar();
+  const english = createEditorChain([ad.english, variable.english]);
+  const arabic = createEditorChain([ad.arabic, variable.arabic]);
+  syncChainIds(english, arabic);
+  return { english, arabic };
+}
+function mirroredEmptyDelimiter() {
+  const english = createDelimiterNode("", "");
+  const arabic = createDelimiterNode("", "");
+  arabic.id = english.id;
+  if (english.innerExpr && arabic.innerExpr) {
+    syncChainIds(english.innerExpr, arabic.innerExpr);
+  }
+  return { english, arabic };
+}
+function setMirroredDelimiterInner(english, arabic, pairs) {
+  const englishInner = createEditorChain(pairs.map((pair) => pair.english));
+  const arabicInner = createEditorChain(pairs.map((pair) => pair.arabic));
+  syncChainIds(englishInner, arabicInner);
+  english.innerExpr = englishInner;
+  arabic.innerExpr = arabicInner;
+}
+function buildFirstDerivativeFrac() {
+  const englishFrac = createFracNode();
+  const arabicFrac = createFracNode();
+  syncFracIds(englishFrac, arabicFrac);
+  const numerator = buildAdVarChain();
+  const denominator = buildAdVarChain();
+  englishFrac.numerator = numerator.english;
+  englishFrac.denominator = denominator.english;
+  arabicFrac.numerator = numerator.arabic;
+  arabicFrac.denominator = denominator.arabic;
+  return { english: englishFrac, arabic: arabicFrac };
+}
+function buildSecondDerivativeFrac() {
+  const englishFrac = createFracNode();
+  const arabicFrac = createFracNode();
+  syncFracIds(englishFrac, arabicFrac);
+  const numAd = mirroredAd();
+  const numVar = mirroredVar();
+  withMirroredSuperscript2(numAd.english, numAd.arabic);
+  const englishNumerator = createEditorChain([numAd.english, numVar.english]);
+  const arabicNumerator = createEditorChain([numAd.arabic, numVar.arabic]);
+  syncChainIds(englishNumerator, arabicNumerator);
+  englishFrac.numerator = englishNumerator;
+  arabicFrac.numerator = arabicNumerator;
+  const denGroup = mirroredEmptyDelimiter();
+  const denInnerAd = mirroredAd();
+  const denInnerVar = mirroredVar();
+  setMirroredDelimiterInner(denGroup.english, denGroup.arabic, [
+    { english: denInnerAd.english, arabic: denInnerAd.arabic },
+    { english: denInnerVar.english, arabic: denInnerVar.arabic }
+  ]);
+  withMirroredSuperscript2(denGroup.english, denGroup.arabic);
+  englishFrac.denominator = createEditorChain([denGroup.english]);
+  arabicFrac.denominator = createEditorChain([denGroup.arabic]);
+  syncChainIds(englishFrac.denominator, arabicFrac.denominator);
+  return { english: englishFrac, arabic: arabicFrac };
+}
+var DERIVATIVE_TEMPLATE_VAR_CARET_INDEX = 1;
+function derivativeTemplateInitialCaret(englishFrac) {
+  const denominator = englishFrac.denominator;
+  if (!denominator) {
+    return {
+      chainId: englishFrac.numerator?.id ?? "",
+      index: DERIVATIVE_TEMPLATE_VAR_CARET_INDEX
+    };
+  }
+  const loneDelimiter = denominator.nodes.length === 1 && denominator.nodes[0]?.kind === "delimiter" && denominator.nodes[0].innerExpr;
+  if (loneDelimiter) {
+    return {
+      chainId: denominator.nodes[0].innerExpr.id,
+      index: DERIVATIVE_TEMPLATE_VAR_CARET_INDEX
+    };
+  }
+  return {
+    chainId: denominator.id,
+    index: DERIVATIVE_TEMPLATE_VAR_CARET_INDEX
+  };
+}
+
 // src/editor/uiLocale.ts
 var ENGLISH_COMMAND_TITLES = {
   cos: "Cosine",
@@ -2493,6 +2647,7 @@ var ENGLISH_COMMAND_TITLES = {
   ln: "Natural logarithm",
   log: "Logarithm",
   det: "Determinant",
+  ad: "Derivative (d / ad)",
   N: "Natural numbers",
   Z: "Integers",
   Q: "Rational numbers",
@@ -2604,6 +2759,10 @@ var EQUATION_EDITOR_MESSAGES = {
     insertFunction: "\u0625\u062F\u0631\u0627\u062C \u062F\u0627\u0644\u0629",
     insertLimitsSeries: "\u0625\u062F\u0631\u0627\u062C \u062D\u062F\u0648\u062F \u0648\u0645\u062A\u0633\u0644\u0633\u0644\u0627\u062A",
     insertAdditionalFunctions: "\u0625\u062F\u0631\u0627\u062C \u062F\u0648\u0627\u0644 \u0625\u0636\u0627\u0641\u064A\u0629",
+    derivatives: "\u0627\u0644\u0627\u0634\u062A\u0642\u0627\u0642",
+    insertDerivative: "\u0625\u062F\u0631\u0627\u062C \u0639\u0644\u0627\u0645\u0629 \u0627\u0634\u062A\u0642\u0627\u0642",
+    insertFirstDerivative: "\u0625\u062F\u0631\u0627\u062C \u0627\u0634\u062A\u0642\u0627\u0642 \u0623\u0648\u0644",
+    insertSecondDerivative: "\u0625\u062F\u0631\u0627\u062C \u0627\u0634\u062A\u0642\u0627\u0642 \u062B\u0627\u0646\u064A",
     insertNumberSets: "\u0625\u062F\u0631\u0627\u062C \u0645\u062C\u0645\u0648\u0639\u0627\u062A \u0623\u0639\u062F\u0627\u062F",
     operations: "\u0627\u0644\u0639\u0645\u0644\u064A\u0627\u062A",
     insertOperation: "\u0625\u062F\u0631\u0627\u062C \u0631\u0645\u0632 \u0639\u0645\u0644\u064A\u0629",
@@ -2707,6 +2866,10 @@ var EQUATION_EDITOR_MESSAGES = {
     insertFunction: "Insert function",
     insertLimitsSeries: "Insert limits and series",
     insertAdditionalFunctions: "Insert additional functions",
+    derivatives: "Derivatives",
+    insertDerivative: "Insert derivative marker",
+    insertFirstDerivative: "Insert first derivative",
+    insertSecondDerivative: "Insert second derivative",
     insertNumberSets: "Insert number sets",
     operations: "Operators",
     insertOperation: "Insert operator",
@@ -3414,10 +3577,27 @@ function insertNumber(session, expr) {
   inserted.forceSplitNextLeaf = false;
   return inserted;
 }
+function insertDivideOperator(session) {
+  const base = replaceSelectionFirst(session);
+  const next = cloneEditorSession(base);
+  const englishNode = createEditorNode("operator", DIVIDE_OPERATOR_EN);
+  const arabicNode = createEditorNode("operator", DIVIDE_OPERATOR_AR);
+  arabicNode.id = englishNode.id;
+  insertMirroredNode(next, next.caret.chainId, next.caret.index, englishNode, arabicNode);
+  markExprSync(next, englishNode.id);
+  next.caret.index += 1;
+  next.selectedStructureNodeId = null;
+  syncSelectionToCaret(next);
+  appendDebug(next, "insertDivideOperator", "");
+  return next;
+}
 function insertOperator(session, expr) {
   if (expr === "." && !session.splitLeafTyping && precedingIsExtendableNumber(session)) {
     return insertNumber(session, ".");
   }
+  if (expr === DIVIDE_OPERATOR_EN || expr === DIVIDE_OPERATOR_AR) {
+    return insertDivideOperator(session);
+  }
   const base = replaceSelectionFirst(session);
   return insertLeaf(base, "operator", expr);
 }
@@ -3488,6 +3668,24 @@ function insertFraction(session) {
   appendDebug(next, "insertFraction", "");
   return next;
 }
+function insertDerivativeFrac(session, build, debugLabel) {
+  const base = replaceSelectionFirst(session);
+  const next = cloneEditorSession(base);
+  const { english, arabic } = build();
+  insertMirroredNode(next, next.caret.chainId, next.caret.index, english, arabic);
+  syncSubtreeRecursive(next, english, arabic);
+  next.caret = derivativeTemplateInitialCaret(english);
+  next.selectedStructureNodeId = null;
+  syncSelectionToCaret(next);
+  appendDebug(next, debugLabel, "");
+  return next;
+}
+function insertFirstDerivative(session) {
+  return insertDerivativeFrac(session, buildFirstDerivativeFrac, "insertFirstDerivative");
+}
+function insertSecondDerivative(session) {
+  return insertDerivativeFrac(session, buildSecondDerivativeFrac, "insertSecondDerivative");
+}
 function insertSqrt(session) {
   const base = replaceSelectionFirst(session);
   const next = cloneEditorSession(base);
@@ -3958,6 +4156,11 @@ function pasteText(session, text) {
       i += 1;
       continue;
     }
+    if (ch === DIVIDE_OPERATOR_AR) {
+      s = insertDivideOperator(s);
+      i += 1;
+      continue;
+    }
     s = insertChar(s, ch);
     i += 1;
   }
@@ -3965,7 +4168,7 @@ function pasteText(session, text) {
 }
 
 // src/editor/display/base.ts
-function buildBaseNodeBody(node, digitForm = "western") {
+function buildBaseNodeBody(node, digitForm = "western", side = "english") {
   const value = document.createElement("span");
   value.className = "node-value";
   if (node.kind === "char" && node.characterFont === "takween") {
@@ -3975,7 +4178,8 @@ function buildBaseNodeBody(node, digitForm = "western") {
   } else if (node.kind === "char" && node.characterFont === "diwaniOutline") {
     value.classList.add("node-value--diwani-outline");
   }
-  value.textContent = node.expr === "" ? "\u25A1" : formatDigits(node.expr, digitForm);
+  const surfaceExpr = node.kind === "operator" ? divideOperatorSurfaceExpr(node.expr, side) : node.expr;
+  value.textContent = surfaceExpr === "" ? "\u25A1" : formatDigits(surfaceExpr, digitForm);
   return value;
 }
 
@@ -4496,7 +4700,7 @@ function buildFunctionAtomicCommandBody(node, side, spec) {
     value.appendChild(label);
     return value;
   }
-  value.textContent = side === "arabic" ? spec?.arabicLabel ?? node.expr : spec?.englishTex.replace("\\", "") ?? node.expr;
+  value.textContent = side === "arabic" ? spec?.arabicLabel ?? node.expr : spec?.englishLabel ?? spec?.englishTex.replace(/^\\/, "") ?? node.expr;
   return value;
 }
 function buildSpacingAtomicCommandBody(spec, side, uiLocale) {
@@ -4622,7 +4826,7 @@ function buildNodeBody(node, buildChain, side, digitForm = "western", uiLocale =
   if (node.kind === "atomicOperatorCommand") {
     return buildAtomicOperatorCommandNodeBody(node, side, uiLocale);
   }
-  return buildBaseNodeBody(node, digitForm);
+  return buildBaseNodeBody(node, digitForm, side);
 }
 
 // src/editor/styles.ts
@@ -5340,6 +5544,10 @@ function createEditorRuntime(options) {
         applyStructural((prev) => insertNumber(prev, char));
         return;
       }
+      if (char === "\\") {
+        applyStructural((prev) => insertDivideOperator(prev));
+        return;
+      }
       if (isOperator(char)) {
         applyStructural((prev) => insertOperator(prev, char));
         return;
@@ -5503,6 +5711,14 @@ function createEditorRuntime(options) {
       applyStructural((prev) => insertFraction(prev));
       surfaceEl.focus();
     },
+    insertFirstDerivative: () => {
+      applyStructural((prev) => insertFirstDerivative(prev));
+      surfaceEl.focus();
+    },
+    insertSecondDerivative: () => {
+      applyStructural((prev) => insertSecondDerivative(prev));
+      surfaceEl.focus();
+    },
     insertMatrixEnv: (style, rows, columns) => {
       applyStructural((prev) => insertMatrixEnv(prev, style, rows, columns));
       surfaceEl.focus();
@@ -5646,6 +5862,19 @@ var COMMAND_FONT_MAP = {
   "\\butexdiwanioutline": "diwaniOutline",
   "\\diwanioutlineshaded": "diwaniOutline"
 };
+var CHAR_FONT_EXPORT_TEX = {
+  takween: "\\butextakween",
+  diwani: "\\butexdiwani",
+  diwaniOutline: "\\butexdiwanioutline"
+};
+function charEditorNodeToAstNode(node) {
+  const font = node.characterFont ?? "default";
+  const charNode = new CharNode(node.expr);
+  if (font === "default") {
+    return charNode;
+  }
+  return new CommandNode(CHAR_FONT_EXPORT_TEX[font], [], [new ChainNode([charNode])]);
+}
 function commandIdForTex(tex) {
   for (const spec of Object.values(ATOMIC_COMMANDS)) {
     const renderTex = spec.arabicRenderTex;
@@ -5971,7 +6200,7 @@ function editorEnvToAstNode(node) {
 function editorNodeToAstNode(node) {
   let astNode;
   if (node.kind === "char") {
-    astNode = new CharNode(node.expr);
+    astNode = charEditorNodeToAstNode(node);
   } else if (node.kind === "number") {
     astNode = new NumberNode(node.expr);
   } else if (node.kind === "operator") {
@@ -8772,6 +9001,7 @@ var CHARACTER_FONT_OPTIONS = [
 var FUNCTION_COMMANDS = atomicCommandsByCategory("function");
 var LIMITS_SERIES_COMMANDS = atomicCommandsByCategory("limits_series");
 var FUNCTION2_COMMANDS = atomicCommandsByCategory("function2");
+var DERIVATIVE_COMMANDS = atomicCommandsByCategory("derivative");
 var GROUP_COMMANDS = atomicCommandsByCategory("groups");
 var SPACING_COMMANDS = atomicCommandsByCategory("spacing").filter(isSpacingCommandSpec);
 var OPERATOR_COMMANDS = atomicOperatorCommandsByCategory("operators1");
@@ -8909,6 +9139,7 @@ var ButexEditor = forwardRef(
     const [functionMenuOpen, setFunctionMenuOpen] = useState3(false);
     const [limitsSeriesMenuOpen, setLimitsSeriesMenuOpen] = useState3(false);
     const [function2MenuOpen, setFunction2MenuOpen] = useState3(false);
+    const [derivativeMenuOpen, setDerivativeMenuOpen] = useState3(false);
     const [groupMenuOpen, setGroupMenuOpen] = useState3(false);
     const [operatorMenuOpen, setOperatorMenuOpen] = useState3(false);
     const [operator2MenuOpen, setOperator2MenuOpen] = useState3(false);
@@ -9567,6 +9798,87 @@ ${arabic || currentMessages.empty}`;
                     ]
                   }
                 ),
+                /* @__PURE__ */ jsxs6(
+                  "div",
+                  {
+                    className: "function-command-menu function-command-menu--derivative",
+                    onBlur: (event) => {
+                      const nextFocus = event.relatedTarget;
+                      if (!(nextFocus instanceof Node) || !event.currentTarget.contains(nextFocus)) {
+                        setDerivativeMenuOpen(false);
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx8(
+                        "button",
+                        {
+                          className: "icon-btn function-command-btn",
+                          type: "button",
+                          title: messages.insertDerivative,
+                          "aria-label": messages.insertDerivative,
+                          "aria-haspopup": "listbox",
+                          "aria-expanded": derivativeMenuOpen,
+                          onClick: () => setDerivativeMenuOpen((open) => !open),
+                          children: DERIVATIVE_COMMANDS[0]?.arabicLabel ?? "\u0621"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs6("div", { className: "function-command-options", role: "listbox", "aria-label": messages.insertDerivative, hidden: !derivativeMenuOpen, children: [
+                        DERIVATIVE_COMMANDS.map((command) => /* @__PURE__ */ jsx8(
+                          "button",
+                          {
+                            className: "function-command-option",
+                            type: "button",
+                            role: "option",
+                            title: atomicCommandTitle(command, uiLocale),
+                            "aria-label": atomicCommandTitle(command, uiLocale),
+                            onMouseDown: (event) => event.preventDefault(),
+                            onClick: () => {
+                              runtimeRef.current?.insertAtomicCommand(command.id);
+                              setDerivativeMenuOpen(false);
+                              focusSurface();
+                            },
+                            children: command.arabicLabel
+                          },
+                          command.id
+                        )),
+                        /* @__PURE__ */ jsx8(
+                          "button",
+                          {
+                            className: "function-command-option",
+                            type: "button",
+                            role: "option",
+                            title: messages.insertFirstDerivative,
+                            "aria-label": messages.insertFirstDerivative,
+                            onMouseDown: (event) => event.preventDefault(),
+                            onClick: () => {
+                              runtimeRef.current?.insertFirstDerivative();
+                              setDerivativeMenuOpen(false);
+                              focusSurface();
+                            },
+                            children: "\u0621/\u0633"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx8(
+                          "button",
+                          {
+                            className: "function-command-option",
+                            type: "button",
+                            role: "option",
+                            title: messages.insertSecondDerivative,
+                            "aria-label": messages.insertSecondDerivative,
+                            onMouseDown: (event) => event.preventDefault(),
+                            onClick: () => {
+                              runtimeRef.current?.insertSecondDerivative();
+                              setDerivativeMenuOpen(false);
+                              focusSurface();
+                            },
+                            children: "\u0621\xB2/\u0633\xB2"
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ),
                 /* @__PURE__ */ jsxs6(
                   "div",
                   {
@@ -11216,6 +11528,7 @@ function ButexDocumentEditor2({
   documentDirection = "rtl",
   equationSide = "arabic",
   editableEquations = true,
+  previewOnly = false,
   uiLocale = "ar",
   mathOutput = "svg",
   onDocumentChange,
@@ -11258,10 +11571,10 @@ function ButexDocumentEditor2({
     injectBuTeXDocument2Styles();
   }, []);
   useEffect5(() => {
-    if (!editableEquations) {
+    if (!editableEquations || previewOnly) {
       setSelectedMath(null);
     }
-  }, [editableEquations]);
+  }, [editableEquations, previewOnly]);
   useEffect5(() => {
     const next = resolveInitialDocument2(initialDocument, uiLocale);
     setDocumentNode(next.document);
@@ -11550,6 +11863,8 @@ function ButexDocumentEditor2({
     pendingFocusRef.current = focusAfterDeletedMath(current, next, tokenId);
     applyDocument(next, "immediate");
   }
+  const showEditorPanel = !previewOnly && editorOpen;
+  const showPreviewPanel = previewOnly || previewOpen;
   return /* @__PURE__ */ jsx10(
     "div",
     {
@@ -11558,7 +11873,7 @@ function ButexDocumentEditor2({
       dir: uiLocaleDirection(uiLocale),
       lang: uiLocale,
       children: /* @__PURE__ */ jsxs8("div", { className: "butex-document2-widget__shell", children: [
-        /* @__PURE__ */ jsxs8("div", { className: "butex-document2-widget__toolbar", children: [
+        !previewOnly ? /* @__PURE__ */ jsxs8("div", { className: "butex-document2-widget__toolbar", children: [
           /* @__PURE__ */ jsx10(
             DocumentInsertToolbar,
             {
@@ -11588,19 +11903,19 @@ function ButexDocumentEditor2({
             /* @__PURE__ */ jsx10("button", { type: "button", onClick: collapseAllBlocks, children: messages.collapseAll }),
             /* @__PURE__ */ jsx10("button", { type: "button", onClick: openAllBlocks, children: messages.openAll })
           ] })
-        ] }),
+        ] }) : null,
         error ? /* @__PURE__ */ jsx10("p", { className: "butex-document2-widget__error", children: error }) : null,
         /* @__PURE__ */ jsxs8(
           "div",
           {
-            className: `butex-document2-widget__layout butex-document2-widget__layout--editor-${editorOpen ? "open" : "closed"} butex-document2-widget__layout--preview-${previewOpen ? "open" : "closed"}`,
+            className: `butex-document2-widget__layout butex-document2-widget__layout--editor-${showEditorPanel ? "open" : "closed"} butex-document2-widget__layout--preview-${showPreviewPanel ? "open" : "closed"}`,
             children: [
-              /* @__PURE__ */ jsx10(
+              !previewOnly ? /* @__PURE__ */ jsx10(
                 "section",
                 {
                   className: "butex-document2-widget__panel butex-document2-widget__editor-panel",
                   "aria-label": messages.documentEditor,
-                  "aria-hidden": !editorOpen,
+                  "aria-hidden": !showEditorPanel,
                   children: /* @__PURE__ */ jsx10("div", { className: "butex-document2-widget__blocks", children: documentNode.blocks.map((block, blockIndex) => /* @__PURE__ */ jsx10(
                     BlockEditor,
                     {
@@ -11630,13 +11945,13 @@ function ButexDocumentEditor2({
                     block.id
                   )) })
                 }
-              ),
+              ) : null,
               /* @__PURE__ */ jsx10(
                 "section",
                 {
                   className: "butex-document2-widget__panel butex-document2-widget__preview-panel",
                   "aria-label": messages.documentPreview,
-                  "aria-hidden": !previewOpen,
+                  "aria-hidden": !showPreviewPanel,
                   children: /* @__PURE__ */ jsx10(DocumentPreview, { blocks: preview.blocks, output: mathOutput, documentDirection, uiLocale })
                 }
               )
@@ -11653,7 +11968,7 @@ function ButexDocumentEditor2({
           /* @__PURE__ */ jsx10("strong", { children: "AST" }),
           /* @__PURE__ */ jsx10("pre", { children: JSON.stringify(documentNode, null, 2) })
         ] }) : null,
-        selectedMath ? /* @__PURE__ */ jsx10(
+        !previewOnly && selectedMath ? /* @__PURE__ */ jsx10(
           EquationDrawer,
           {
             session: selectedMath.session,