@drghaliasri/butex 4.0.1 → 4.2.0

package/dist/react-document.js

@@ -946,6 +946,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",
@@ -1769,6 +1779,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";
@@ -1917,6 +1943,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) {
@@ -1951,6 +1980,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) {
@@ -2474,6 +2506,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",
@@ -2504,6 +2658,7 @@ var ENGLISH_COMMAND_TITLES = {
   ln: "Natural logarithm",
   log: "Logarithm",
   det: "Determinant",
+  ad: "Derivative (d / ad)",
   N: "Natural numbers",
   Z: "Integers",
   Q: "Rational numbers",
@@ -2615,6 +2770,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",
@@ -2718,6 +2877,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",
@@ -3425,10 +3588,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);
 }
@@ -3499,6 +3679,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);
@@ -3969,6 +4167,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;
   }
@@ -3976,7 +4179,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") {
@@ -3986,7 +4189,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;
 }
 
@@ -4507,7 +4711,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) {
@@ -4633,7 +4837,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
@@ -5351,6 +5555,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;
@@ -5514,6 +5722,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();
@@ -5581,7 +5797,95 @@ function createEditorRuntime(options) {
   return api;
 }
 
+// src/document/normalizeCharImport.ts
+var WRAPPER_SPECS = [
+  { prefix: "\\butexdiwanioutline", font: "diwaniOutline" },
+  { prefix: "\\diwanioutlineshaded", font: "diwaniOutline" },
+  { prefix: "\\butexdiwani", font: "diwani" },
+  { prefix: "\\butextakween", font: "takween" },
+  { prefix: "\\diwani", font: "diwani" },
+  { prefix: "\\takween", font: "takween" },
+  { prefix: "\\text" }
+];
+function readBracedArg(source, openBraceIndex) {
+  if (source[openBraceIndex] !== "{") {
+    return null;
+  }
+  let depth = 0;
+  for (let index = openBraceIndex; index < source.length; index += 1) {
+    const char = source[index];
+    if (char === "{") {
+      depth += 1;
+    } else if (char === "}") {
+      depth -= 1;
+      if (depth === 0) {
+        return { inner: source.slice(openBraceIndex + 1, index), end: index + 1 };
+      }
+    }
+  }
+  return null;
+}
+function peelWrapper(source) {
+  for (const wrapper of WRAPPER_SPECS) {
+    if (!source.startsWith(wrapper.prefix)) {
+      continue;
+    }
+    const braced = readBracedArg(source, wrapper.prefix.length);
+    if (!braced || braced.end !== source.length) {
+      continue;
+    }
+    return { inner: braced.inner, font: wrapper.font };
+  }
+  return null;
+}
+function normalizeCharImportExpr(expr) {
+  const original = expr;
+  let current = expr;
+  let characterFont = "default";
+  let changed = false;
+  while (true) {
+    const peeled = peelWrapper(current);
+    if (!peeled) {
+      break;
+    }
+    current = peeled.inner;
+    if (peeled.font) {
+      characterFont = peeled.font;
+    }
+    changed = true;
+  }
+  if (!changed) {
+    return { expr: original, characterFont: "default" };
+  }
+  if (current.includes("\\")) {
+    return { expr: original, characterFont: "default" };
+  }
+  return { expr: current, characterFont };
+}
+
 // src/document/mathEditorAdapter.ts
+var COMMAND_FONT_MAP = {
+  "\\text": "infer",
+  "\\butextakween": "takween",
+  "\\takween": "takween",
+  "\\butexdiwani": "diwani",
+  "\\diwani": "diwani",
+  "\\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;
@@ -5693,6 +5997,42 @@ function envToEditorNode(node) {
   const scripts = attachScripts(node, env);
   return scripts ?? { editable: true, node: env };
 }
+function charFromTextLikeCommand(node) {
+  const commandFont = COMMAND_FONT_MAP[node.name];
+  if (commandFont === void 0) {
+    return null;
+  }
+  if (node.optionalArgs.length > 0 || node.mandatoryArgs.length !== 1) {
+    return null;
+  }
+  const arg = node.mandatoryArgs[0];
+  if (arg.chain.length !== 1) {
+    return null;
+  }
+  const child = arg.chain[0];
+  if (child instanceof CommandNode) {
+    const nested = charFromTextLikeCommand(child);
+    if (!nested?.editable) {
+      return null;
+    }
+    if (commandFont !== "infer") {
+      nested.node.characterFont = commandFont;
+    }
+    const scripts2 = attachScripts(node, nested.node);
+    return scripts2 ?? nested;
+  }
+  if (!(child instanceof CharNode)) {
+    return null;
+  }
+  const normalized = normalizeCharImportExpr(child.expr);
+  const characterFont = commandFont === "infer" ? normalized.characterFont : commandFont;
+  const editorNode = createEditorNode("char", normalized.expr);
+  if (characterFont !== "default") {
+    editorNode.characterFont = characterFont;
+  }
+  const scripts = attachScripts(node, editorNode);
+  return scripts ?? { editable: true, node: editorNode };
+}
 function commandToEditorNode(node) {
   if (node.name === "\\frac" && node.mandatoryArgs.length >= 2) {
     const frac = createFracNode();
@@ -5750,11 +6090,19 @@ function commandToEditorNode(node) {
     }
     return { editable: true, node: atomicOperator };
   }
+  const textLike = charFromTextLikeCommand(node);
+  if (textLike) {
+    return textLike;
+  }
   return { editable: false, reason: `\u0623\u0645\u0631 \u0631\u064A\u0627\u0636\u064A \u063A\u064A\u0631 \u0645\u062F\u0639\u0648\u0645 \u062D\u0627\u0644\u064A\u0627: ${node.name}` };
 }
 function astNodeToEditorNode(node) {
   if (node instanceof CharNode) {
-    const editorNode = createEditorNode("char", node.expr);
+    const normalized = normalizeCharImportExpr(node.expr);
+    const editorNode = createEditorNode("char", normalized.expr);
+    if (normalized.characterFont !== "default") {
+      editorNode.characterFont = normalized.characterFont;
+    }
     const scripts = attachScripts(node, editorNode);
     return scripts ?? { editable: true, node: editorNode };
   }
@@ -5863,7 +6211,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") {
@@ -7734,6 +8082,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");
@@ -7871,6 +8220,7 @@ var ButexEditor = (0, import_react.forwardRef)(
     const [functionMenuOpen, setFunctionMenuOpen] = (0, import_react.useState)(false);
     const [limitsSeriesMenuOpen, setLimitsSeriesMenuOpen] = (0, import_react.useState)(false);
     const [function2MenuOpen, setFunction2MenuOpen] = (0, import_react.useState)(false);
+    const [derivativeMenuOpen, setDerivativeMenuOpen] = (0, import_react.useState)(false);
     const [groupMenuOpen, setGroupMenuOpen] = (0, import_react.useState)(false);
     const [operatorMenuOpen, setOperatorMenuOpen] = (0, import_react.useState)(false);
     const [operator2MenuOpen, setOperator2MenuOpen] = (0, import_react.useState)(false);
@@ -8529,6 +8879,87 @@ ${arabic || currentMessages.empty}`;
                     ]
                   }
                 ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "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__ */ (0, import_jsx_runtime.jsx)(
+                        "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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "function-command-options", role: "listbox", "aria-label": messages.insertDerivative, hidden: !derivativeMenuOpen, children: [
+                        DERIVATIVE_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "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__ */ (0, import_jsx_runtime.jsx)(
+                          "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__ */ (0, import_jsx_runtime.jsx)(
+                          "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__ */ (0, import_jsx_runtime.jsxs)(
                   "div",
                   {