@drghaliasri/butex 4.3.0 → 5.0.0

package/dist/react-document2.js

@@ -34,7 +34,7 @@ __export(react_document2_entry_exports, {
 module.exports = __toCommonJS(react_document2_entry_exports);
 
 // src/react-document2/ButexDocumentEditor2.tsx
-var import_react6 = require("react");
+var import_react9 = require("react");
 
 // src/document2/ids.ts
 var nextId = 1;
@@ -44,6 +44,100 @@ function document2Id(prefix) {
   return id;
 }
 
+// src/editor/digits.ts
+var WESTERN = "0123456789";
+var ARABIC_INDIC = "\u0660\u0661\u0662\u0663\u0664\u0665\u0666\u0667\u0668\u0669";
+var PERSIAN_INDIC = "\u06F0\u06F1\u06F2\u06F3\u06F4\u06F5\u06F6\u06F7\u06F8\u06F9";
+var digitSets = {
+  western: WESTERN,
+  arabicIndic: ARABIC_INDIC,
+  persianIndic: PERSIAN_INDIC
+};
+function digitValue(char) {
+  const western = WESTERN.indexOf(char);
+  if (western >= 0) {
+    return western;
+  }
+  const arabicIndic = ARABIC_INDIC.indexOf(char);
+  if (arabicIndic >= 0) {
+    return arabicIndic;
+  }
+  return PERSIAN_INDIC.indexOf(char);
+}
+function formatDigits(value, digitForm = "western") {
+  const target = digitSets[digitForm];
+  return Array.from(value, (char) => {
+    const value2 = digitValue(char);
+    return value2 >= 0 ? target[value2] : char;
+  }).join("");
+}
+
+// src/document2/citations.ts
+function referenceNumberMap(references) {
+  const map = /* @__PURE__ */ new Map();
+  references.forEach((reference, index) => {
+    if (!map.has(reference.key)) {
+      map.set(reference.key, index + 1);
+    }
+  });
+  return map;
+}
+function resolveCiteNumbers(keys, references) {
+  const map = referenceNumberMap(references);
+  return keys.map((key) => map.get(key) ?? null);
+}
+function formatCiteLabel(keys, references, options = {}) {
+  const documentDirection = options.documentDirection ?? "rtl";
+  const digitForm = options.digitForm ?? (documentDirection === "rtl" ? "arabicIndic" : "western");
+  const numbers = resolveCiteNumbers(keys, references).map((value) => value === null ? "?" : String(value));
+  const display = documentDirection === "rtl" ? [...numbers].reverse() : numbers;
+  const separator = documentDirection === "rtl" ? "\u060C" : ", ";
+  const body = display.map((part) => formatDigits(part, digitForm)).join(separator);
+  return `[${body}]`;
+}
+function formatBibliographyNumber(index, options = {}) {
+  const documentDirection = options.documentDirection ?? "rtl";
+  const digitForm = options.digitForm ?? (documentDirection === "rtl" ? "arabicIndic" : "western");
+  return formatDigits(String(index), digitForm);
+}
+function parseCiteKeys(source) {
+  const match = /^\\cite\{([^}]*)\}$/.exec(source.trim());
+  if (!match) {
+    return [];
+  }
+  return (match[1] ?? "").split(",").map((key) => key.trim()).filter((key) => key.length > 0);
+}
+function citeTokenLatex(keys) {
+  return `\\cite{${keys.join(",")}}`;
+}
+function referenceFromJson(json) {
+  return {
+    id: document2Id("ref"),
+    key: json.key,
+    authors: typeof json.authors === "string" ? json.authors : "",
+    title: typeof json.title === "string" ? json.title : "",
+    year: typeof json.year === "string" ? json.year : "",
+    url: typeof json.url === "string" ? json.url : "",
+    venue: typeof json.venue === "string" ? json.venue : ""
+  };
+}
+function createEmptyReference2(partial = {}) {
+  return referenceFromJson({
+    key: partial.key ?? `ref${String(Date.now()).slice(-4)}`,
+    authors: partial.authors,
+    title: partial.title,
+    year: partial.year,
+    url: partial.url,
+    venue: partial.venue
+  });
+}
+function bibliographyEntryLatex(reference) {
+  const parts = [reference.authors, reference.title, reference.venue, reference.year].filter((part) => part.trim().length > 0);
+  const body = parts.join(", ");
+  const url = reference.url.trim().length > 0 ? ` \\url{${reference.url}}` : "";
+  return `\\bibitem{${reference.key}} ${body}${url}`.trim();
+}
+
 // src/ast/commands/index.ts
 function renderCommandCore(context) {
   const optional = context.optionalArgs.map((arg) => `[${context.renderChain(arg)}]`).join("");
@@ -462,53 +556,84 @@ function environmentSpan(value, start) {
   const end = closingStart + closing.length;
   return { start, end, source: value.slice(start, end), opening, closing, display: true };
 }
-function detectMathSpans2(value) {
-  const spans = [];
-  let i = 0;
-  while (i < value.length) {
-    if (value.startsWith("\\begin{", i)) {
-      const span = environmentSpan(value, i);
-      if (span) {
-        spans.push(span);
-        i = span.end;
-        continue;
-      }
+function citeSpan(value, start) {
+  if (!value.startsWith("\\cite{", start) || isEscaped(value, start)) {
+    return null;
+  }
+  const openBrace = start + "\\cite".length;
+  if (value[openBrace] !== "{") {
+    return null;
+  }
+  let depth = 0;
+  for (let i = openBrace; i < value.length; i += 1) {
+    const char = value[i];
+    if (char === "{" && !isEscaped(value, i)) {
+      depth += 1;
+      continue;
     }
-    if (value.startsWith("\\(", i)) {
-      const close = value.indexOf("\\)", i + 2);
-      if (close >= 0) {
-        const end = close + 2;
-        spans.push({ start: i, end, source: value.slice(i, end), opening: "\\(", closing: "\\)", display: false });
-        i = end;
-        continue;
+    if (char === "}" && !isEscaped(value, i)) {
+      depth -= 1;
+      if (depth === 0) {
+        const end = i + 1;
+        const source = value.slice(start, end);
+        return { kind: "cite", start, end, source, keys: parseCiteKeys(source) };
       }
     }
-    if (value.startsWith("\\[", i)) {
-      const close = value.indexOf("\\]", i + 2);
-      if (close >= 0) {
-        const end = close + 2;
-        spans.push({ start: i, end, source: value.slice(i, end), opening: "\\[", closing: "\\]", display: true });
-        i = end;
-        continue;
-      }
+  }
+  return null;
+}
+function mathSpanAt(value, i) {
+  if (value.startsWith("\\begin{", i)) {
+    return environmentSpan(value, i);
+  }
+  if (value.startsWith("\\(", i)) {
+    const close = value.indexOf("\\)", i + 2);
+    if (close >= 0) {
+      const end = close + 2;
+      return { start: i, end, source: value.slice(i, end), opening: "\\(", closing: "\\)", display: false };
     }
-    if (value.startsWith("$$", i) && !isEscaped(value, i)) {
-      const close = value.indexOf("$$", i + 2);
-      if (close >= 0) {
-        const end = close + 2;
-        spans.push({ start: i, end, source: value.slice(i, end), opening: "$$", closing: "$$", display: true });
-        i = end;
-        continue;
-      }
+  }
+  if (value.startsWith("\\[", i)) {
+    const close = value.indexOf("\\]", i + 2);
+    if (close >= 0) {
+      const end = close + 2;
+      return { start: i, end, source: value.slice(i, end), opening: "\\[", closing: "\\]", display: true };
     }
-    if (value[i] === "$" && !isEscaped(value, i)) {
-      const close = findClosingDollar(value, i + 1);
-      if (close >= 0) {
-        const end = close + 1;
-        spans.push({ start: i, end, source: value.slice(i, end), opening: "$", closing: "$", display: false });
-        i = end;
-        continue;
-      }
+  }
+  if (value.startsWith("$$", i) && !isEscaped(value, i)) {
+    const close = value.indexOf("$$", i + 2);
+    if (close >= 0) {
+      const end = close + 2;
+      return { start: i, end, source: value.slice(i, end), opening: "$$", closing: "$$", display: true };
+    }
+  }
+  if (value[i] === "$" && !isEscaped(value, i)) {
+    const close = findClosingDollar(value, i + 1);
+    if (close >= 0) {
+      const end = close + 1;
+      return { start: i, end, source: value.slice(i, end), opening: "$", closing: "$", display: false };
+    }
+  }
+  return null;
+}
+function detectMathSpans2(value) {
+  return detectInlineSpans2(value).filter((span) => span.kind === "math").map(({ kind: _kind, ...span }) => span);
+}
+function detectInlineSpans2(value) {
+  const spans = [];
+  let i = 0;
+  while (i < value.length) {
+    const cite = citeSpan(value, i);
+    if (cite) {
+      spans.push(cite);
+      i = cite.end;
+      continue;
+    }
+    const math = mathSpanAt(value, i);
+    if (math) {
+      spans.push({ kind: "math", ...math });
+      i = math.end;
+      continue;
     }
     i += 1;
   }
@@ -545,19 +670,53 @@ function pushDiagnostic(diagnostics, options, path, message) {
   }
   diagnostics.push({ code: "math_alignment", message, path });
 }
+function parseReferences(json) {
+  if (!Array.isArray(json)) {
+    return [];
+  }
+  const references = [];
+  for (const entry of json) {
+    if (!isObject2(entry) || typeof entry.key !== "string" || entry.key.trim().length === 0) {
+      continue;
+    }
+    references.push(
+      referenceFromJson({
+        key: entry.key.trim(),
+        authors: typeof entry.authors === "string" ? entry.authors : void 0,
+        title: typeof entry.title === "string" ? entry.title : void 0,
+        year: typeof entry.year === "string" ? entry.year : void 0,
+        url: typeof entry.url === "string" ? entry.url : void 0,
+        venue: typeof entry.venue === "string" ? entry.venue : void 0
+      })
+    );
+  }
+  return references;
+}
 function createInlineField2(value = "", mathObjects = [], options = {}, path = "$", diagnostics = []) {
   const mode = options.mode ?? "english";
-  const spans = detectMathSpans2(value);
+  const spans = detectInlineSpans2(value);
+  const mathSpans = spans.filter((span) => span.kind === "math");
   const tokens = [];
   let index = 0;
-  if (mathObjects.length > 0 && mathObjects.length !== spans.length) {
-    pushDiagnostic(diagnostics, options, path, `math_objects count mismatch: detected ${String(spans.length)}, got ${String(mathObjects.length)}`);
+  let mathObjectIndex = 0;
+  if (mathObjects.length > 0 && mathObjects.length !== mathSpans.length) {
+    pushDiagnostic(diagnostics, options, path, `math_objects count mismatch: detected ${String(mathSpans.length)}, got ${String(mathObjects.length)}`);
   }
-  spans.forEach((span, spanIndex) => {
+  for (const span of spans) {
     if (span.start > index) {
       tokens.push({ id: document2Id("text"), kind: "text", text: value.slice(index, span.start) });
     }
-    const mathJson = mathObjects[spanIndex];
+    if (span.kind === "cite") {
+      tokens.push({
+        id: document2Id("cite"),
+        kind: "cite",
+        keys: span.keys.length > 0 ? span.keys : []
+      });
+      index = span.end;
+      continue;
+    }
+    const mathJson = mathObjects[mathObjectIndex];
+    mathObjectIndex += 1;
     if (mathJson && (mathJson.math_mode !== span.opening || mathJson.closing !== span.closing)) {
       pushDiagnostic(diagnostics, options, path, "math_objects order mismatch");
     }
@@ -589,7 +748,7 @@ function createInlineField2(value = "", mathObjects = [], options = {}, path = "
       });
     }
     index = span.end;
-  });
+  }
   if (index < value.length || tokens.length === 0) {
     tokens.push({ id: document2Id("text"), kind: "text", text: value.slice(index) });
   }
@@ -661,11 +820,14 @@ function parseTableBlock(json, options, path, diagnostics) {
   };
 }
 function parseImageBlock(json) {
+  const assetId = typeof json.asset_id === "string" && json.asset_id.length > 0 ? json.asset_id : void 0;
+  const value = assetId !== void 0 ? typeof json.value === "string" ? json.value : "" : requireString(json.value, "\\includegraphics requires string value");
   return {
     id: document2Id("block"),
     kind: "image",
     command: "\\includegraphics",
-    value: requireString(json.value, "\\includegraphics requires string value"),
+    value,
+    ...assetId !== void 0 ? { assetId } : {},
     options: isRecordOfStrings(json.options) ? json.options : {}
   };
 }
@@ -677,6 +839,14 @@ function parseRawBlock(json) {
     value: typeof json.value === "string" ? json.value : ""
   };
 }
+function parseBibliographyBlock() {
+  return {
+    id: document2Id("block"),
+    kind: "bibliography",
+    command: "\\begin{thebibliography}",
+    closing: "\\end{thebibliography}"
+  };
+}
 function parseBlock(json, options, path, diagnostics) {
   if (TEXT_COMMANDS.has(json.command)) {
     return parseTextBlock(json, options, path, diagnostics);
@@ -690,6 +860,9 @@ function parseBlock(json, options, path, diagnostics) {
   if (json.command === "\\includegraphics") {
     return parseImageBlock(json);
   }
+  if (json.command === "\\begin{thebibliography}" || json.command === "\\bibliography") {
+    return parseBibliographyBlock();
+  }
   if (json.command === "\\raw") {
     return parseRawBlock(json);
   }
@@ -710,12 +883,13 @@ function fromDocumentJson2(json, options = {}) {
   const diagnostics = [];
   return {
     nodeType: "DocumentObject",
+    references: parseReferences(json.references),
     blocks: json.blocks.map((block, index) => parseBlock(asBlockJson(block), options, `$.blocks[${String(index)}]`, diagnostics)),
     diagnostics
   };
 }
 function createEmptyDocument2() {
-  return { nodeType: "DocumentObject", blocks: [], diagnostics: [] };
+  return { nodeType: "DocumentObject", references: [], blocks: [], diagnostics: [] };
 }
 
 // src/editor/atomicCommands.ts
@@ -1819,34 +1993,6 @@ 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";
-var PERSIAN_INDIC = "\u06F0\u06F1\u06F2\u06F3\u06F4\u06F5\u06F6\u06F7\u06F8\u06F9";
-var digitSets = {
-  western: WESTERN,
-  arabicIndic: ARABIC_INDIC,
-  persianIndic: PERSIAN_INDIC
-};
-function digitValue(char) {
-  const western = WESTERN.indexOf(char);
-  if (western >= 0) {
-    return western;
-  }
-  const arabicIndic = ARABIC_INDIC.indexOf(char);
-  if (arabicIndic >= 0) {
-    return arabicIndic;
-  }
-  return PERSIAN_INDIC.indexOf(char);
-}
-function formatDigits(value, digitForm = "western") {
-  const target = digitSets[digitForm];
-  return Array.from(value, (char) => {
-    const value2 = digitValue(char);
-    return value2 >= 0 ? target[value2] : char;
-  }).join("");
-}
-
 // src/editor/render.ts
 function selectedDigitForm(options) {
   return options?.digitForm ?? "western";
@@ -6405,6 +6551,7 @@ function cloneBlock(block) {
 function cloneDocument(document2) {
   return {
     nodeType: "DocumentObject",
+    references: document2.references.map((reference) => ({ ...reference })),
     blocks: document2.blocks.map(cloneBlock),
     diagnostics: document2.diagnostics.map((diagnostic) => ({ ...diagnostic }))
   };
@@ -6687,12 +6834,335 @@ function removeDocument2ListItem(document2, listBlockId, itemId) {
   });
   return next;
 }
+function citeTokenFromKeys(keys) {
+  return { id: document2Id("cite"), kind: "cite", keys: [...keys] };
+}
+function insertCiteTokenAtCaret(document2, fieldId, textTokenId, caretOffset, keys) {
+  if (keys.length === 0) {
+    return document2;
+  }
+  const next = cloneDocument(document2);
+  const citeToken = citeTokenFromKeys(keys);
+  visitFields(next.blocks, (field) => {
+    if (field.id !== fieldId) {
+      return false;
+    }
+    const textIndex = textTokenId ? field.tokens.findIndex((token) => token.id === textTokenId && token.kind === "text") : field.tokens.findIndex((token) => token.kind === "text");
+    if (textIndex < 0) {
+      field.tokens.push(citeToken);
+      field.tokens.push({ id: document2Id("text"), kind: "text", text: "" });
+      return true;
+    }
+    const current = field.tokens[textIndex];
+    const [before, after] = splitTextTokenAt(current, caretOffset);
+    const parts = [...field.tokens.slice(0, textIndex)];
+    if (before.text.length > 0) {
+      parts.push(before);
+    }
+    parts.push(citeToken);
+    parts.push(after);
+    parts.push(...field.tokens.slice(textIndex + 1));
+    field.tokens = normalizeFieldTokens(parts);
+    return true;
+  });
+  return next;
+}
+function updateCiteTokenKeys(document2, tokenId, keys) {
+  if (keys.length === 0) {
+    return document2;
+  }
+  const next = cloneDocument(document2);
+  visitFields(next.blocks, (field) => {
+    const token = field.tokens.find((entry) => entry.id === tokenId && entry.kind === "cite");
+    if (!token) {
+      return false;
+    }
+    token.keys = [...keys];
+    return true;
+  });
+  return next;
+}
+function removeCiteTokenById(document2, tokenId) {
+  const next = cloneDocument(document2);
+  visitFields(next.blocks, (field) => {
+    const index = field.tokens.findIndex((token) => token.id === tokenId && token.kind === "cite");
+    if (index < 0) {
+      return false;
+    }
+    field.tokens = normalizeFieldTokens(stitchTextAroundRemovedToken(field.tokens, index));
+    return true;
+  });
+  return next;
+}
+function ensureDocument2BibliographyBlock(document2, afterBlockId) {
+  if (document2.blocks.some((block2) => block2.kind === "bibliography")) {
+    return document2;
+  }
+  const block = {
+    id: document2Id("block"),
+    kind: "bibliography",
+    command: "\\begin{thebibliography}",
+    closing: "\\end{thebibliography}"
+  };
+  return insertDocument2BlockAfter(document2, afterBlockId ?? null, block);
+}
+function addDocument2Reference(document2, partial = {}) {
+  const next = cloneDocument(document2);
+  next.references.push(createEmptyReference2(partial));
+  return next;
+}
+function updateDocument2Reference(document2, referenceId, patch) {
+  const next = cloneDocument(document2);
+  const reference = next.references.find((entry) => entry.id === referenceId);
+  if (!reference) {
+    return document2;
+  }
+  if (typeof patch.key === "string" && patch.key.trim().length > 0) {
+    reference.key = patch.key.trim();
+  }
+  if (typeof patch.authors === "string") {
+    reference.authors = patch.authors;
+  }
+  if (typeof patch.title === "string") {
+    reference.title = patch.title;
+  }
+  if (typeof patch.year === "string") {
+    reference.year = patch.year;
+  }
+  if (typeof patch.url === "string") {
+    reference.url = patch.url;
+  }
+  if (typeof patch.venue === "string") {
+    reference.venue = patch.venue;
+  }
+  return next;
+}
+function removeDocument2Reference(document2, referenceId) {
+  const next = cloneDocument(document2);
+  next.references = next.references.filter((reference) => reference.id !== referenceId);
+  return next;
+}
+function moveDocument2Reference(document2, referenceId, direction) {
+  const next = cloneDocument(document2);
+  const index = next.references.findIndex((reference2) => reference2.id === referenceId);
+  const targetIndex = index + direction;
+  if (index < 0 || targetIndex < 0 || targetIndex >= next.references.length) {
+    return document2;
+  }
+  const [reference] = next.references.splice(index, 1);
+  if (!reference) {
+    return document2;
+  }
+  next.references.splice(targetIndex, 0, reference);
+  return next;
+}
+
+// src/document2/arabicPreamble.ts
+function arabicXeLatexPreamblePkg() {
+  return String.raw`
+\documentclass[12pt,a4paper]{article}
+\usepackage{amsmath,amsfonts,amssymb,mathrsfs,tikz,fancyhdr, mathtools}
+\usepackage{fontspec} % For loading OpenType fonts
+\usepackage{unicode-math} % For setting the math font
+\usepackage{polyglossia} % For Arabic support
+\usepackage{array}
+\usepackage{cancel}
+\usepackage{bidi} % For bidirectional text handling
+\usepackage{multirow}
+\usepackage{booktabs}
+\usepackage{graphicx} % For \reflectbox
+\usepackage{xcolor}
+\usepackage{tikz}
+\usepackage{tcolorbox}  % For tcolorbox environment
+\usepackage{textcomp}    % For \textrightarrow command
+
+
+% visit : https://www.symbolcopy.com/punctuation-symbol.html
+% for inversed punctuation
+
+% save inverted comma for use - copy paste ->  ،
+% save back tick for use - copy paste ->  ` + "`";
+}
+function arabicXeLatexPreambleFont(digitsMapping = "arabicdigits") {
+  return `
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+% Toggle between eastern and western digits by changing the Mapping in the below fonts (inside math font as well) between "arabicdigits" and "digits"
+\\setdefaultlanguage[calendar=gregorian]{arabic}  % from polyglossia
+\\setmainfont[Script=Arabic , Mapping=${digitsMapping}]{Amiri}
+\\newfontfamily\\diwani[Script=Arabic,Mapping=${digitsMapping}]{Diwani Letter}
+\\newfontfamily\\diwanioutlineshaded[Script=Arabic,Mapping=${digitsMapping}]{Diwani Outline Shaded}
+\\newfontfamily\\takween[Script=Arabic,Mapping=${digitsMapping}]{Takween}
+\\newfontfamily\\boldarabic[Script=Arabic,Mapping=${digitsMapping}]{Amiri Bold}
+\\newfontfamily\\italicarabic[Script=Arabic,Mapping=${digitsMapping}]{Amiri Italic}
+
+% Explicitly set math font to XITS Math
+% Remove "Script=Arabic" to cancel reflected symbols and other RTL symbols
+\\setmathfont[Script=Arabic , Mapping=${digitsMapping}]{XITS Math} % Ensure XITS Math is correctly installed and available
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+`;
+}
+function arabicXeLatexPreambleCmd() {
+  return String.raw`
+% Run with XeLaTeX compiler
+\newcommand{\butextakween}[1]{\text{\takween{#1}}}
+\newcommand{\butexdiwani}[1]{\text{\diwani{#1}}}
+\newcommand{\butexdiwanioutline}[1]{\text{\diwanioutlineshaded{#1}}}
+
+\newcommand{\arabN}{\text{\diwanioutlineshaded{ط}}}
+\newcommand{\arabZ}{\text{\diwanioutlineshaded{ص}}}
+\newcommand{\arabQ}{\text{\diwanioutlineshaded{ن}}}
+\newcommand{\arabR}{\text{\diwanioutlineshaded{ح}}}
+\newcommand{\arabC}{\text{\diwanioutlineshaded{ع}}}
+\newcommand{\arabH}{\text{\diwanioutlineshaded{ر}}}
+
+
+\newcommand{\lowerscript}[1]{\raisebox{-4pt}{\scriptsize #1}}
+\newcommand{\llowerscript}[1]{\raisebox{-8pt}{\scriptsize #1}}
+\newcommand{\lllowerscript}[2]{\raisebox{#2pt}{\scriptsize #1}}
+
+\newcommand{\arabdsub}[3]{\prescript{}{#1}{\prescript{}{#2}{#3}}} % arabic double subscript
+\newcommand{\arabsub}[2]{\prescript{}{#1}{#2}} % arabic single subscript
+
+
+
+\newcommand{\upperscript}[1]{\raisebox{8pt}{\scriptsize #1}}
+\newcommand{\uupperscript}[2]{\raisebox{#2pt}{\scriptsize #1}}
+\newcommand{\vertbar}{\rule[-1ex]{0.5pt}{2.5ex}}
+\newcommand{\horzbar}{\rule[.5ex]{2.5ex}{0.5pt}}
+
+\newcommand{\arabsqrt}[2]{\reflectbox{\(\sqrt[\reflectbox{\(#1\)}]{\reflectbox{\(#2\)}}\)}}
+\newcommand{\arabvec}[1]{\reflectbox{$\vec{\reflectbox{$#1$}}$}}
+
+\newcommand{\arabexp}[1]{{}^{#1}\!\raisebox{-4.5pt}{\text{\diwani{ه}}}}
+\newcommand{\arablog}[2]{\left(\text{#2}\right)\!\prescript{}{\text{#1}}{\text{\diwani{لو}}}}
+\newcommand{\arabnlog}[1]{\left(\text{#1}\right)\!\prescript{}{\text{\diwani{ه}}}{\text{\diwani{لو}}}}
+
+\newcommand{\arabcos}[1]{\left(#1\right)\!\!\raisebox{-2.5pt}{\text{\diwani{جتا}}}}
+\newcommand{\arabsin}[1]{\left(#1\right)\!\!\raisebox{-2.5pt}{\text{\diwani{جا}}}}
+\newcommand{\arabtan}[1]{\left(#1\right)\!\!\raisebox{-2.5pt}{\text{\diwani{ظا}}}}
+\newcommand{\arabcot}[1]{\left(#1\right)\!\!\raisebox{-2.5pt}{\text{\diwani{ظتا}}}}
+\newcommand{\arabsec}[1]{\left(#1\right)\!\!\raisebox{-2.5pt}{\text{\diwani{قا}}}}
+\newcommand{\arabcsc}[1]{\left(#1\right)\!\!\raisebox{-2.5pt}{\text{\diwani{قتا}}}}
+
+\newcommand{\arabacos}[1]{\left(#1\right)\!\!\raisebox{-2.5pt}{\text{\diwani{قجتا}}}}
+\newcommand{\arabasin}[1]{\left(#1\right)\!\!\raisebox{-2.5pt}{\text{\diwani{قجا}}}}
+\newcommand{\arabatan}[1]{\left(#1\right)\!\!\raisebox{-2.5pt}{\text{\diwani{قظا}}}}
+\newcommand{\arabacot}[1]{\left(#1\right)\!\!\raisebox{-2.5pt}{\text{\diwani{قظتا}}}}
+\newcommand{\arabasec}[1]{\left(#1\right)\!\!\raisebox{-2.5pt}{\text{\diwani{ققا}}}}
+\newcommand{\arabacsc}[1]{\left(#1\right)\!\!\raisebox{-2.5pt}{\text{\diwani{ققتا}}}}
+
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+% summation
+\newcommand{\arablim}[2]{\underset{#2 \leftarrow #1}{\text{نـــــها}}}
+\newcommand{\arabsum}[2]{\underset{#1}{\overset{#2}{\text{مجـــ}}}}
+\newcommand{\arabprod}[2]{\underset{#1}{\overset{#2}{\text{جـــذ}}}}
+\newcommand{\arabint}[2]{\prescript{#2}{#1\!\!\!}\int}
+
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+% we define this command to make it ease for change of notation later
+\newcommand{\ad}[0]{\text{ء}} % "ad" for arabic differentiation or derivative (ء" لإشتقاق")
+\newcommand{\arpi}[0]{\!\text{\diwani{ط}}}
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+% differentials
+
+\newcommand{\arabdiff}[2]{\frac{#1\ad}{#2\ad}} % arabic differential
+\newcommand{\arabddiff}[2]{\frac{#1{}^{2}\ad}{{}^{2}#2\ad}} % arabic second differential
+
+\newcommand{\arabode}[2][-5pt]{\stackrel{\raisebox{#1}{$\cdot$}}{\text{#2}}}
+\newcommand{\arabodde}[2][-5pt]{\stackrel{\raisebox{#1}{$\vcenter{\hbox{$\cdot\!\cdot$}}$}}{\text{#2}}}
+\newcommand{\araboddde}[2][-5pt]{\stackrel{\raisebox{#1}{$\vcenter{\hbox{$\cdot\!\cdot\!\cdot$}}$}}{\text{#2}}}
+\newcommand{\arabpde}[1]{\prescript{}{#1\!\!}{\nabla}} % arabic partial differential equation (PDE)
+
+\newcommand{\arabprime}[0]{\reflectbox{$\prime$}\!} % arabic prime notation
+\newcommand{\arabpprime}[0]{\reflectbox{$\prime$}\reflectbox{$\prime$}\!} % arabic prime notation
+\newcommand{\arabppprime}[0]{\reflectbox{$\prime$}\reflectbox{$\prime$}\reflectbox{$\prime$}\!} % arabic prime notation
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+% probability
+\newcommand{\ap}[0]{\!\text{\diwani{حـ}}} % arabic Probability - used a lot so short form
+\newcommand{\arabExpct}[0]{\text{\diwani{توقـ}}} % arabic Expectation
+\newcommand{\arabVar}[0]{\!\text{\diwani{با}}} % arabic Variance
+\newcommand{\arabCov}[0]{\!\text{\diwani{ت}}} % arabic Covariance
+
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+% custom commands specific to lesson
+\newcommand{\lagrange}[2]{\left(#2\right)\!\prescript{}{#1}{\text{\diwani{لا}}}}
+\newcommand{\xii}[0]{\left(\prescript{}{\text{يـ}}{\text{س}}\right)\!}
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+
+\newcommand{\arsqrt}[2][]{\reflectbox{\(\sqrt[\reflectbox{\(#1\)}]{\reflectbox{\(#2\)}}\)}}
+\newcommand{\arexp}[0]{\!\raisebox{-4.5pt}{\text{\diwani{ه}}}}
+\newcommand{\arlog}[0]{\!\!\text{\diwani{لو}}}
+\newcommand{\arln}[0]{\!\!\prescript{}{\text{\diwani{ه}}}{\text{\diwani{لو}}}}
+\newcommand{\ardet}[0]{\!\!\text{\diwani{محدد}}}
+
+\newcommand{\arsum}[0]{\text{مجـــ}}
+\newcommand{\arprod}[0]{\text{جـــذ}}
+
+\newcommand{\arlim}[0]{\text{نـــــها}}
+\newcommand{\armax}[0]{\text{أكبر}}
+\newcommand{\armin}[0]{\text{أصغر}}
+\newcommand{\arsup}[0]{\text{أعلى}}
+\newcommand{\arinf}[0]{\text{أدنى}}
+
+\newcommand{\arsin}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{جا}}}}
+\newcommand{\arcos}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{جتا}}}}
+\newcommand{\artan}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{ظا}}}}
+\newcommand{\arcot}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{ظتا}}}}
+\newcommand{\arsec}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{قا}}}}
+\newcommand{\arcsc}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{قتا}}}}   
+
+\newcommand{\arasin}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{قجا}}}}
+\newcommand{\aracos}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{قجتا}}}}
+\newcommand{\aratan}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{قظا}}}}
+\newcommand{\aracot}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{قظتا}}}}
+\newcommand{\arasec}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{ققا}}}}
+\newcommand{\aracsc}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{ققتا}}}}
+
+\newcommand{\arsinh}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{جزا}}}}
+\newcommand{\arcosh}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{جتزا}}}}
+\newcommand{\artanh}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{ظزا}}}}
+\newcommand{\arcoth}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{ظتزا}}}}
+\newcommand{\arsech}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{قزا}}}}
+\newcommand{\arcsch}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{قتزا}}}}
+
+\newcommand{\arasinh}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{قجزا}}}}
+\newcommand{\aracosh}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{قجتزا}}}}  
+\newcommand{\aratanh}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{قظزا}}}}
+\newcommand{\aracoth}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{قظتزا}}}}
+\newcommand{\arasech}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{ققزا}}}}
+\newcommand{\aracsch}[0]{\!\!\raisebox{-2.5pt}{\text{\diwani{ققتزا}}}}
+
+\newcommand{\unit}[1]{\text{#1}}
+\newcommand{\idx}[1]{#1}
+\newcommand{\arbinom}[2]{\left(\begin{array}{c} #1 \\ #2 \end{array} \right)}
+`;
+}
+function getArabicXeLatexPreamble(digitsMapping = "arabicdigits") {
+  return arabicXeLatexPreamblePkg() + arabicXeLatexPreambleFont(digitsMapping) + arabicXeLatexPreambleCmd();
+}
 
 // src/document2/exportLatex.ts
 function tokenLatex(token) {
   if (token.kind === "text") {
     return token.text;
   }
+  if (token.kind === "cite") {
+    return citeTokenLatex(token.keys);
+  }
   if (!token.math || token.sourceOwner === "raw" || token.sourceOwner === "editor") {
     return token.source;
   }
@@ -6707,9 +7177,9 @@ function textBlockLatex(block) {
 function indent(value) {
   return value.split("\n").map((line) => `  ${line}`).join("\n");
 }
-function listBlockLatex(block) {
+function listBlockLatex(block, references) {
   const items = block.items.map((item) => {
-    const nested = item.blocks.map((child) => "\n" + indent(blockLatex(child))).join("");
+    const nested = item.blocks.map((child) => "\n" + indent(blockLatex(child, references))).join("");
     return `  \\item ${inlineFieldLatex(item.field)}${nested}`;
   }).join("\n");
   return `${block.command}
@@ -6729,12 +7199,12 @@ function imageOptionsLatex(block) {
   }
   return `[${entries.map(([key, value]) => `${key}=${value}`).join(",")}]`;
 }
-function blockLatex(block) {
+function blockLatex(block, references) {
   if (block.kind === "textBlock") {
     return textBlockLatex(block);
   }
   if (block.kind === "list") {
-    return listBlockLatex(block);
+    return listBlockLatex(block, references);
   }
   if (block.kind === "table") {
     return tableBlockLatex(block);
@@ -6742,10 +7212,29 @@ function blockLatex(block) {
   if (block.kind === "image") {
     return `${block.command}${imageOptionsLatex(block)}{${block.value}}`;
   }
+  if (block.kind === "bibliography") {
+    const width = String(Math.max(references.length, 9));
+    const items = references.map((reference) => `  ${bibliographyEntryLatex(reference)}`).join("\n");
+    return `${block.command}{${width}}
+${items}
+${block.closing}`;
+  }
   return block.value;
 }
-function document2Latex(document2) {
-  return document2.blocks.map((block) => blockLatex(block)).join("\n\n");
+function document2Latex(document2, options = {}) {
+  const body = document2.blocks.map((block) => blockLatex(block, document2.references)).join("\n\n");
+  const wrapDocument = options.wrapDocument !== false;
+  if (!wrapDocument) {
+    return body;
+  }
+  const preamble = getArabicXeLatexPreamble(options.digitsMapping ?? "arabicdigits");
+  return `${preamble}
+\\begin{document}
+
+${body}
+
+\\end{document}
+`;
 }
 
 // src/document2/history.ts
@@ -6783,16 +7272,24 @@ function document2HistoryCanRedo(stacks) {
 
 // src/document2/previewModel.ts
 function mathTex(token, equationSide) {
-  if (token.kind === "text") {
-    return token.text;
-  }
   return mathTokenSourceForSide(token, equationSide);
 }
-function previewInlines(field, islands, output, equationSide) {
+function previewInlines(field, islands, output, equationSide, document2, previewOptions) {
   return field.tokens.map((token) => {
     if (token.kind === "text") {
       return { kind: "text", text: token.text };
     }
+    if (token.kind === "cite") {
+      return {
+        kind: "cite",
+        id: token.id,
+        keys: [...token.keys],
+        label: formatCiteLabel(token.keys, document2.references, {
+          documentDirection: previewOptions.documentDirection,
+          digitForm: previewOptions.digitForm
+        })
+      };
+    }
     const island = {
       id: token.id,
       tex: mathTex(token, equationSide),
@@ -6804,21 +7301,22 @@ function previewInlines(field, islands, output, equationSide) {
     return { kind: "math", ...island };
   });
 }
-function textBlockPreview(block, islands, output, equationSide) {
+function textBlockPreview(block, islands, output, equationSide, document2, previewOptions) {
+  const inlines = previewInlines(block.field, islands, output, equationSide, document2, previewOptions);
   if (block.command === "\\section") {
-    return { kind: "heading", id: block.id, level: 1, inlines: previewInlines(block.field, islands, output, equationSide) };
+    return { kind: "heading", id: block.id, level: 1, inlines };
   }
   if (block.command === "\\subsection") {
-    return { kind: "heading", id: block.id, level: 2, inlines: previewInlines(block.field, islands, output, equationSide) };
+    return { kind: "heading", id: block.id, level: 2, inlines };
   }
   if (block.command === "\\subsubsection") {
-    return { kind: "heading", id: block.id, level: 3, inlines: previewInlines(block.field, islands, output, equationSide) };
+    return { kind: "heading", id: block.id, level: 3, inlines };
   }
-  return { kind: "paragraph", id: block.id, inlines: previewInlines(block.field, islands, output, equationSide) };
+  return { kind: "paragraph", id: block.id, inlines };
 }
-function blockPreview(block, islands, output, equationSide) {
+function blockPreview(block, islands, output, equationSide, document2, previewOptions) {
   if (block.kind === "textBlock") {
-    return textBlockPreview(block, islands, output, equationSide);
+    return textBlockPreview(block, islands, output, equationSide, document2, previewOptions);
   }
   if (block.kind === "list") {
     return {
@@ -6827,23 +7325,56 @@ function blockPreview(block, islands, output, equationSide) {
       ordered: block.command === "\\begin{enumerate}",
       items: block.items.map((item) => ({
         id: item.id,
-        inlines: previewInlines(item.field, islands, output, equationSide),
-        blocks: item.blocks.map((child) => blockPreview(child, islands, output, equationSide))
+        inlines: previewInlines(item.field, islands, output, equationSide, document2, previewOptions),
+        blocks: item.blocks.map((child) => blockPreview(child, islands, output, equationSide, document2, previewOptions))
       }))
     };
   }
   if (block.kind === "table") {
-    return { kind: "table", id: block.id, rows: block.rows.map((row) => row.map((cell) => previewInlines(cell, islands, output, equationSide))) };
+    return {
+      kind: "table",
+      id: block.id,
+      rows: block.rows.map((row) => row.map((cell) => previewInlines(cell, islands, output, equationSide, document2, previewOptions)))
+    };
   }
   if (block.kind === "image") {
-    return { kind: "image", id: block.id, src: block.value, options: block.options };
+    return {
+      kind: "image",
+      id: block.id,
+      src: block.value,
+      ...block.assetId !== void 0 ? { assetId: block.assetId } : {},
+      options: block.options
+    };
+  }
+  if (block.kind === "bibliography") {
+    return {
+      kind: "bibliography",
+      id: block.id,
+      items: document2.references.map((reference, index) => ({
+        id: reference.id,
+        numberLabel: formatBibliographyNumber(index + 1, {
+          documentDirection: previewOptions.documentDirection,
+          digitForm: previewOptions.digitForm
+        }),
+        key: reference.key,
+        authors: reference.authors,
+        title: reference.title,
+        year: reference.year,
+        url: reference.url,
+        venue: reference.venue
+      }))
+    };
   }
   return { kind: "omit", id: block.id };
 }
-function document2Preview(document2, output = "svg", equationSide = "arabic") {
+function document2Preview(document2, output = "svg", equationSide = "arabic", previewOptions = {}) {
   const mathIslands = [];
+  const options = {
+    documentDirection: previewOptions.documentDirection ?? "rtl",
+    digitForm: previewOptions.digitForm ?? (previewOptions.documentDirection === "ltr" ? "western" : "arabicIndic")
+  };
   return {
-    blocks: document2.blocks.map((block) => blockPreview(block, mathIslands, output, equationSide)),
+    blocks: document2.blocks.map((block) => blockPreview(block, mathIslands, output, equationSide, document2, options)),
     mathIslands
   };
 }
@@ -6851,19 +7382,282 @@ function document2Preview(document2, output = "svg", equationSide = "arabic") {
 // src/react-document2/InlineField.tsx
 var import_react2 = require("react");
 
-// src/react-document2/MathIsland.tsx
-var import_react = require("react");
-
-// src/mathjax/svgPatcher.ts
-var SVG_ARABSQRT_SELECTOR = 'mjx-container[jax="SVG"] svg .mjx-rtl-mirror[data-mjx-rtl-root="true"]';
-var ARABSQRT_SELECTOR = '.mjx-rtl-mirror[data-mjx-rtl-root="true"]';
-var PATCHED_ATTR = "data-butex-svg-arabsqrt";
-var ROOT_INDEX_SCALE = 0.72;
-var ROOT_INDEX_GAP_FACTOR = 0.08;
-var ROOT_INDEX_MIN_GAP = 2;
-var ROOT_INDEX_Y_RAISE = 18;
-var ROOT_INDEX_LEFT_SHIFT = 360;
-var VIEWBOX_PADDING = 20;
+// src/react-document2/uiMessages.ts
+var DOCUMENT2_MESSAGES = {
+  ar: {
+    undoRedo: "\u062A\u0631\u0627\u062C\u0639 \u0648\u0625\u0639\u0627\u062F\u0629",
+    undo: "\u062A\u0631\u0627\u062C\u0639",
+    redo: "\u0625\u0639\u0627\u062F\u0629",
+    structure: "\u0647\u064A\u0643\u0644",
+    content: "\u0645\u062D\u062A\u0648\u0649",
+    addSection: "\u0625\u0636\u0627\u0641\u0629 \u0642\u0633\u0645",
+    addSubsection: "\u0625\u0636\u0627\u0641\u0629 \u0641\u0631\u0639",
+    addSubsubsection: "\u0625\u0636\u0627\u0641\u0629 \u0641\u0631\u0639 \u0635\u063A\u064A\u0631",
+    addParagraph: "\u0625\u0636\u0627\u0641\u0629 \u0641\u0642\u0631\u0629",
+    inlineEquation: "\u0645\u0639\u0627\u062F\u0644\u0629 \u062F\u0627\u062E\u0644 \u0627\u0644\u0633\u0637\u0631",
+    displayEquation: "\u0645\u0639\u0627\u062F\u0644\u0629 \u0645\u0639\u0631\u0648\u0636\u0629",
+    bulletedList: "\u0642\u0627\u0626\u0645\u0629 \u0646\u0642\u0637\u064A\u0629",
+    numberedList: "\u0642\u0627\u0626\u0645\u0629 \u0645\u0631\u0642\u0645\u0629",
+    insertImage: "\u0625\u062F\u0631\u0627\u062C \u0635\u0648\u0631\u0629",
+    insertTable: "\u0625\u062F\u0631\u0627\u062C \u062C\u062F\u0648\u0644",
+    tableSize: "\u062D\u062C\u0645 \u0627\u0644\u062C\u062F\u0648\u0644",
+    rows: "\u0635\u0641\u0648\u0641",
+    columns: "\u0623\u0639\u0645\u062F\u0629",
+    insert: "\u0625\u062F\u0631\u0627\u062C",
+    panels: "\u0627\u0644\u0644\u0648\u062D\u0627\u062A",
+    hideEditor: "\u0625\u062E\u0641\u0627\u0621 \u0627\u0644\u062A\u062D\u0631\u064A\u0631",
+    editor: "\u062A\u062D\u0631\u064A\u0631",
+    hidePreview: "\u0625\u062E\u0641\u0627\u0621 \u0627\u0644\u0645\u0639\u0627\u064A\u0646\u0629",
+    preview: "\u0645\u0639\u0627\u064A\u0646\u0629",
+    collapseBlocks: "\u0637\u064A \u0627\u0644\u0643\u062A\u0644",
+    collapseAll: "\u0637\u064A \u0627\u0644\u0643\u0644",
+    openAll: "\u0641\u062A\u062D \u0627\u0644\u0643\u0644",
+    documentEditor: "\u062A\u062D\u0631\u064A\u0631 \u0627\u0644\u0645\u0633\u062A\u0646\u062F",
+    documentPreview: "\u0645\u0639\u0627\u064A\u0646\u0629 \u0627\u0644\u0645\u0633\u062A\u0646\u062F",
+    importWarnings: "\u062A\u0646\u0628\u064A\u0647\u0627\u062A \u0627\u0644\u0627\u0633\u062A\u064A\u0631\u0627\u062F (\u0648\u0636\u0639 \u0627\u0644\u062A\u0637\u0648\u064A\u0631)",
+    emptyDocument: "\u0627\u0644\u0645\u0633\u062A\u0646\u062F \u0641\u0627\u0631\u063A",
+    text: "\u0646\u0635",
+    editEquation: "\u062A\u062D\u0631\u064A\u0631 \u0627\u0644\u0645\u0639\u0627\u062F\u0644\u0629",
+    rawEquation: "\u0645\u0639\u0627\u062F\u0644\u0629 \u062E\u0627\u0645",
+    deleteEquation: "\u062D\u0630\u0641 \u0627\u0644\u0645\u0639\u0627\u062F\u0644\u0629",
+    equationUnavailable: "\u0647\u0630\u0647 \u0627\u0644\u0645\u0639\u0627\u062F\u0644\u0629 \u063A\u064A\u0631 \u0645\u062A\u0627\u062D\u0629 \u0644\u0644\u062A\u062D\u0631\u064A\u0631 \u062D\u0627\u0644\u064A\u0627",
+    closeEquationDialog: "\u0625\u063A\u0644\u0627\u0642 \u0646\u0627\u0641\u0630\u0629 \u0627\u0644\u0645\u0639\u0627\u062F\u0644\u0629",
+    equationEditorTitle: "\u062A\u062D\u0631\u064A\u0631 \u0627\u0644\u0645\u0639\u0627\u062F\u0644\u0629",
+    close: "\u0625\u063A\u0644\u0627\u0642",
+    equationType: "\u0646\u0648\u0639 \u0627\u0644\u0645\u0639\u0627\u062F\u0644\u0629",
+    inline: "\u062F\u0627\u062E\u0644 \u0627\u0644\u0633\u0637\u0631",
+    displayed: "\u0645\u0639\u0631\u0648\u0636\u0629",
+    saveEquation: "\u062D\u0641\u0638 \u0627\u0644\u0645\u0639\u0627\u062F\u0644\u0629",
+    section: "\u0642\u0633\u0645",
+    subsection: "\u0641\u0631\u0639",
+    subsubsection: "\u0641\u0631\u0639 \u0635\u063A\u064A\u0631",
+    paragraph: "\u0641\u0642\u0631\u0629",
+    list: "\u0642\u0627\u0626\u0645\u0629",
+    table: "\u062C\u062F\u0648\u0644",
+    image: "\u0635\u0648\u0631\u0629",
+    raw: "\u062E\u0627\u0645",
+    bibliography: "\u0627\u0644\u0645\u0631\u0627\u062C\u0639",
+    openBlock: "\u0641\u062A\u062D \u0627\u0644\u0643\u062A\u0644\u0629",
+    collapseBlock: "\u0637\u064A \u0627\u0644\u0643\u062A\u0644\u0629",
+    moveUp: "\u0646\u0642\u0644 \u0644\u0623\u0639\u0644\u0649",
+    moveDown: "\u0646\u0642\u0644 \u0644\u0623\u0633\u0641\u0644",
+    deleteBlock: "\u062D\u0630\u0641 \u0627\u0644\u0643\u062A\u0644\u0629",
+    item: "\u0639\u0646\u0635\u0631",
+    deleteItem: "\u062D\u0630\u0641 \u0627\u0644\u0639\u0646\u0635\u0631",
+    addItem: "\u0639\u0646\u0635\u0631",
+    imagePath: "\u0645\u0633\u0627\u0631 \u0627\u0644\u0645\u0644\u0641 (\\includegraphics)",
+    imagePathLabel: "\u0645\u0633\u0627\u0631 \u0627\u0644\u0635\u0648\u0631\u0629",
+    loadDocumentError: "\u062A\u0639\u0630\u0631 \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0645\u0633\u062A\u0646\u062F",
+    importOrderMismatch: "\u062A\u0631\u062A\u064A\u0628 \u0623\u0648 \u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u0645\u062D\u062F\u062F\u0627\u062A \u0641\u064A math_objects \u0644\u0627 \u062A\u0637\u0627\u0628\u0642 \u0645\u0627 \u0648\u0631\u062F \u0641\u064A \u0627\u0644\u0646\u0635.",
+    importCountMismatch: "\u0639\u062F\u0645 \u062A\u0637\u0627\u0628\u0642 \u0628\u064A\u0646 \u0627\u0644\u0645\u0648\u0627\u0636\u0639 \u0627\u0644\u0631\u064A\u0627\u0636\u064A\u0629 \u0627\u0644\u0645\u0633\u062A\u062E\u0631\u062C\u0629 \u0645\u0646 \u0627\u0644\u0646\u0635 \u0648\u0639\u062F\u062F \u0639\u0646\u0627\u0635\u0631 math_objects.",
+    importWarning: "\u062A\u0646\u0628\u064A\u0647 \u0627\u0644\u0627\u0633\u062A\u064A\u0631\u0627\u062F",
+    path: "\u0627\u0644\u0645\u0633\u0627\u0631",
+    sectionGlyph: "\u0642",
+    subsectionGlyph: "\u0641",
+    subsubsectionGlyph: "\u0635",
+    paragraphGlyph: "\u0623\u0628\u062C",
+    insertCitation: "\u0625\u062F\u0631\u0627\u062C \u0627\u0642\u062A\u0628\u0627\u0633",
+    insertBibliography: "\u0625\u062F\u0631\u0627\u062C \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0645\u0631\u0627\u062C\u0639",
+    manageReferences: "\u0625\u062F\u0627\u0631\u0629 \u0627\u0644\u0645\u0631\u0627\u062C\u0639",
+    citePickerTitle: "\u0627\u062E\u062A\u064A\u0627\u0631 \u0627\u0644\u0645\u0631\u0627\u062C\u0639",
+    noReferencesYet: "\u0644\u0627 \u062A\u0648\u062C\u062F \u0645\u0631\u0627\u062C\u0639 \u0628\u0639\u062F. \u0623\u0636\u0641 \u0645\u0631\u062C\u0639\u0627\u064B \u0623\u0648\u0644\u0627\u064B.",
+    editCitation: "\u062A\u062D\u0631\u064A\u0631 \u0627\u0644\u0627\u0642\u062A\u0628\u0627\u0633",
+    deleteCitation: "\u062D\u0630\u0641 \u0627\u0644\u0627\u0642\u062A\u0628\u0627\u0633",
+    referencesTitle: "\u0627\u0644\u0645\u0631\u0627\u062C\u0639",
+    addReference: "\u0625\u0636\u0627\u0641\u0629 \u0645\u0631\u062C\u0639",
+    deleteReference: "\u062D\u0630\u0641 \u0627\u0644\u0645\u0631\u062C\u0639",
+    referenceKey: "\u0627\u0644\u0645\u0641\u062A\u0627\u062D",
+    referenceAuthors: "\u0627\u0644\u0645\u0624\u0644\u0641\u0648\u0646",
+    referenceTitle: "\u0627\u0644\u0639\u0646\u0648\u0627\u0646",
+    referenceYear: "\u0627\u0644\u0633\u0646\u0629",
+    referenceVenue: "\u0627\u0644\u0645\u062C\u0644\u0629 / \u0627\u0644\u0645\u0624\u062A\u0645\u0631",
+    referenceUrl: "\u0627\u0644\u0631\u0627\u0628\u0637",
+    chooseDigitForm: "\u0634\u0643\u0644 \u0627\u0644\u0623\u0631\u0642\u0627\u0645",
+    westernDigits: "\u0623\u0631\u0642\u0627\u0645 \u063A\u0631\u0628\u064A\u0629",
+    arabicIndicDigits: "\u0623\u0631\u0642\u0627\u0645 \u0639\u0631\u0628\u064A\u0629 \u0647\u0646\u062F\u064A\u0629",
+    persianIndicDigits: "\u0623\u0631\u0642\u0627\u0645 \u0641\u0627\u0631\u0633\u064A\u0629"
+  },
+  en: {
+    undoRedo: "Undo and redo",
+    undo: "Undo",
+    redo: "Redo",
+    structure: "Structure",
+    content: "Content",
+    addSection: "Add section",
+    addSubsection: "Add subsection",
+    addSubsubsection: "Add subsubsection",
+    addParagraph: "Add paragraph",
+    inlineEquation: "Inline equation",
+    displayEquation: "Display equation",
+    bulletedList: "Bulleted list",
+    numberedList: "Numbered list",
+    insertImage: "Insert image",
+    insertTable: "Insert table",
+    tableSize: "Table size",
+    rows: "Rows",
+    columns: "Columns",
+    insert: "Insert",
+    panels: "Panels",
+    hideEditor: "Hide editor",
+    editor: "Editor",
+    hidePreview: "Hide preview",
+    preview: "Preview",
+    collapseBlocks: "Collapse blocks",
+    collapseAll: "Collapse all",
+    openAll: "Open all",
+    documentEditor: "Document editor",
+    documentPreview: "Document preview",
+    importWarnings: "Import warnings (development mode)",
+    emptyDocument: "The document is empty",
+    text: "Text",
+    editEquation: "Edit equation",
+    rawEquation: "Raw equation",
+    deleteEquation: "Delete equation",
+    equationUnavailable: "This equation is not currently available for editing",
+    closeEquationDialog: "Close equation dialog",
+    equationEditorTitle: "Edit equation",
+    close: "Close",
+    equationType: "Equation type",
+    inline: "Inline",
+    displayed: "Displayed",
+    saveEquation: "Save equation",
+    section: "Section",
+    subsection: "Subsection",
+    subsubsection: "Subsubsection",
+    paragraph: "Paragraph",
+    list: "List",
+    table: "Table",
+    image: "Image",
+    raw: "Raw",
+    bibliography: "Bibliography",
+    openBlock: "Open block",
+    collapseBlock: "Collapse block",
+    moveUp: "Move up",
+    moveDown: "Move down",
+    deleteBlock: "Delete block",
+    item: "Item",
+    deleteItem: "Delete item",
+    addItem: "Item",
+    imagePath: "File path (\\includegraphics)",
+    imagePathLabel: "Image path",
+    loadDocumentError: "Could not load document",
+    importOrderMismatch: "The math_objects delimiter order or types do not match the document text.",
+    importCountMismatch: "The detected math positions do not match the number of math_objects entries.",
+    importWarning: "Import warning",
+    path: "Path",
+    sectionGlyph: "H1",
+    subsectionGlyph: "H2",
+    subsubsectionGlyph: "H3",
+    paragraphGlyph: "P",
+    insertCitation: "Insert citation",
+    insertBibliography: "Insert bibliography",
+    manageReferences: "Manage references",
+    citePickerTitle: "Select references",
+    noReferencesYet: "No references yet. Add a reference first.",
+    editCitation: "Edit citation",
+    deleteCitation: "Delete citation",
+    referencesTitle: "References",
+    addReference: "Add reference",
+    deleteReference: "Delete reference",
+    referenceKey: "Key",
+    referenceAuthors: "Authors",
+    referenceTitle: "Title",
+    referenceYear: "Year",
+    referenceVenue: "Journal / conference",
+    referenceUrl: "URL",
+    chooseDigitForm: "Digit form",
+    westernDigits: "Western digits",
+    arabicIndicDigits: "Arabic-Indic digits",
+    persianIndicDigits: "Persian digits"
+  }
+};
+function document2Messages(locale) {
+  return DOCUMENT2_MESSAGES[locale];
+}
+
+// src/react-document2/CiteChip.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function CiteChip({
+  token,
+  references,
+  documentDirection = "rtl",
+  digitForm,
+  editable = true,
+  uiLocale = "ar",
+  buttonRef,
+  onOpen,
+  onDelete,
+  onFocus,
+  onRequestTextFocus
+}) {
+  const messages = document2Messages(uiLocale);
+  const label = formatCiteLabel(token.keys, references, { documentDirection, digitForm });
+  const forwardArrowKey = documentDirection === "rtl" ? "ArrowLeft" : "ArrowRight";
+  const backwardArrowKey = documentDirection === "rtl" ? "ArrowRight" : "ArrowLeft";
+  if (!editable) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "butex-document2-widget__cite-chip-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "butex-document2-widget__cite-chip", "data-editable": "false", children: label }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "butex-document2-widget__cite-chip-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "butex-document2-widget__cite-chip",
+        "data-editable": "true",
+        "data-cite-token-id": token.id,
+        ref: buttonRef,
+        title: messages.editCitation,
+        onClick: () => onOpen(token),
+        onFocus: () => onFocus?.(token.id),
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            onOpen(token);
+            return;
+          }
+          if (event.key === forwardArrowKey) {
+            event.preventDefault();
+            onRequestTextFocus?.(token.id, 1);
+            return;
+          }
+          if (event.key === backwardArrowKey) {
+            event.preventDefault();
+            onRequestTextFocus?.(token.id, -1);
+          }
+        },
+        children: label
+      }
+    ),
+    onDelete ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "butex-document2-widget__cite-chip-delete",
+        title: messages.deleteCitation,
+        "aria-label": messages.deleteCitation,
+        onClick: (event) => {
+          event.stopPropagation();
+          onDelete(token.id);
+        },
+        children: "\xD7"
+      }
+    ) : null
+  ] });
+}
+
+// src/react-document2/MathIsland.tsx
+var import_react = require("react");
+
+// src/mathjax/svgPatcher.ts
+var SVG_ARABSQRT_SELECTOR = 'mjx-container[jax="SVG"] svg .mjx-rtl-mirror[data-mjx-rtl-root="true"]';
+var ARABSQRT_SELECTOR = '.mjx-rtl-mirror[data-mjx-rtl-root="true"]';
+var PATCHED_ATTR = "data-butex-svg-arabsqrt";
+var ROOT_INDEX_SCALE = 0.72;
+var ROOT_INDEX_GAP_FACTOR = 0.08;
+var ROOT_INDEX_MIN_GAP = 2;
+var ROOT_INDEX_Y_RAISE = 18;
+var ROOT_INDEX_LEFT_SHIFT = 360;
+var VIEWBOX_PADDING = 20;
 function closestArabSqrtRoot(element) {
   return element.closest('.mjx-rtl-mirror[data-mjx-rtl-root="true"]');
 }
@@ -7213,7 +8007,7 @@ async function renderBuTeXMathIsland(tex, options = {}) {
 }
 
 // src/react-document2/MathIsland.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function MathIsland({ id, tex, display, output = "svg" }) {
   const ref = (0, import_react.useRef)(null);
   const version = (0, import_react.useRef)(0);
@@ -7264,7 +8058,7 @@ function MathIsland({ id, tex, display, output = "svg" }) {
       cancelled = true;
     };
   }, [display, output, tex]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "span",
     {
       ref,
@@ -7278,159 +8072,8 @@ function MathIsland({ id, tex, display, output = "svg" }) {
   );
 }
 
-// src/react-document2/uiMessages.ts
-var DOCUMENT2_MESSAGES = {
-  ar: {
-    undoRedo: "\u062A\u0631\u0627\u062C\u0639 \u0648\u0625\u0639\u0627\u062F\u0629",
-    undo: "\u062A\u0631\u0627\u062C\u0639",
-    redo: "\u0625\u0639\u0627\u062F\u0629",
-    structure: "\u0647\u064A\u0643\u0644",
-    content: "\u0645\u062D\u062A\u0648\u0649",
-    addSection: "\u0625\u0636\u0627\u0641\u0629 \u0642\u0633\u0645",
-    addSubsection: "\u0625\u0636\u0627\u0641\u0629 \u0641\u0631\u0639",
-    addSubsubsection: "\u0625\u0636\u0627\u0641\u0629 \u0641\u0631\u0639 \u0635\u063A\u064A\u0631",
-    addParagraph: "\u0625\u0636\u0627\u0641\u0629 \u0641\u0642\u0631\u0629",
-    inlineEquation: "\u0645\u0639\u0627\u062F\u0644\u0629 \u062F\u0627\u062E\u0644 \u0627\u0644\u0633\u0637\u0631",
-    displayEquation: "\u0645\u0639\u0627\u062F\u0644\u0629 \u0645\u0639\u0631\u0648\u0636\u0629",
-    bulletedList: "\u0642\u0627\u0626\u0645\u0629 \u0646\u0642\u0637\u064A\u0629",
-    numberedList: "\u0642\u0627\u0626\u0645\u0629 \u0645\u0631\u0642\u0645\u0629",
-    insertImage: "\u0625\u062F\u0631\u0627\u062C \u0635\u0648\u0631\u0629",
-    insertTable: "\u0625\u062F\u0631\u0627\u062C \u062C\u062F\u0648\u0644",
-    tableSize: "\u062D\u062C\u0645 \u0627\u0644\u062C\u062F\u0648\u0644",
-    rows: "\u0635\u0641\u0648\u0641",
-    columns: "\u0623\u0639\u0645\u062F\u0629",
-    insert: "\u0625\u062F\u0631\u0627\u062C",
-    panels: "\u0627\u0644\u0644\u0648\u062D\u0627\u062A",
-    hideEditor: "\u0625\u062E\u0641\u0627\u0621 \u0627\u0644\u062A\u062D\u0631\u064A\u0631",
-    editor: "\u062A\u062D\u0631\u064A\u0631",
-    hidePreview: "\u0625\u062E\u0641\u0627\u0621 \u0627\u0644\u0645\u0639\u0627\u064A\u0646\u0629",
-    preview: "\u0645\u0639\u0627\u064A\u0646\u0629",
-    collapseBlocks: "\u0637\u064A \u0627\u0644\u0643\u062A\u0644",
-    collapseAll: "\u0637\u064A \u0627\u0644\u0643\u0644",
-    openAll: "\u0641\u062A\u062D \u0627\u0644\u0643\u0644",
-    documentEditor: "\u062A\u062D\u0631\u064A\u0631 \u0627\u0644\u0645\u0633\u062A\u0646\u062F",
-    documentPreview: "\u0645\u0639\u0627\u064A\u0646\u0629 \u0627\u0644\u0645\u0633\u062A\u0646\u062F",
-    importWarnings: "\u062A\u0646\u0628\u064A\u0647\u0627\u062A \u0627\u0644\u0627\u0633\u062A\u064A\u0631\u0627\u062F (\u0648\u0636\u0639 \u0627\u0644\u062A\u0637\u0648\u064A\u0631)",
-    emptyDocument: "\u0627\u0644\u0645\u0633\u062A\u0646\u062F \u0641\u0627\u0631\u063A",
-    text: "\u0646\u0635",
-    editEquation: "\u062A\u062D\u0631\u064A\u0631 \u0627\u0644\u0645\u0639\u0627\u062F\u0644\u0629",
-    rawEquation: "\u0645\u0639\u0627\u062F\u0644\u0629 \u062E\u0627\u0645",
-    deleteEquation: "\u062D\u0630\u0641 \u0627\u0644\u0645\u0639\u0627\u062F\u0644\u0629",
-    equationUnavailable: "\u0647\u0630\u0647 \u0627\u0644\u0645\u0639\u0627\u062F\u0644\u0629 \u063A\u064A\u0631 \u0645\u062A\u0627\u062D\u0629 \u0644\u0644\u062A\u062D\u0631\u064A\u0631 \u062D\u0627\u0644\u064A\u0627",
-    closeEquationDialog: "\u0625\u063A\u0644\u0627\u0642 \u0646\u0627\u0641\u0630\u0629 \u0627\u0644\u0645\u0639\u0627\u062F\u0644\u0629",
-    equationEditorTitle: "\u062A\u062D\u0631\u064A\u0631 \u0627\u0644\u0645\u0639\u0627\u062F\u0644\u0629",
-    close: "\u0625\u063A\u0644\u0627\u0642",
-    equationType: "\u0646\u0648\u0639 \u0627\u0644\u0645\u0639\u0627\u062F\u0644\u0629",
-    inline: "\u062F\u0627\u062E\u0644 \u0627\u0644\u0633\u0637\u0631",
-    displayed: "\u0645\u0639\u0631\u0648\u0636\u0629",
-    saveEquation: "\u062D\u0641\u0638 \u0627\u0644\u0645\u0639\u0627\u062F\u0644\u0629",
-    section: "\u0642\u0633\u0645",
-    subsection: "\u0641\u0631\u0639",
-    subsubsection: "\u0641\u0631\u0639 \u0635\u063A\u064A\u0631",
-    paragraph: "\u0641\u0642\u0631\u0629",
-    list: "\u0642\u0627\u0626\u0645\u0629",
-    table: "\u062C\u062F\u0648\u0644",
-    image: "\u0635\u0648\u0631\u0629",
-    raw: "\u062E\u0627\u0645",
-    openBlock: "\u0641\u062A\u062D \u0627\u0644\u0643\u062A\u0644\u0629",
-    collapseBlock: "\u0637\u064A \u0627\u0644\u0643\u062A\u0644\u0629",
-    moveUp: "\u0646\u0642\u0644 \u0644\u0623\u0639\u0644\u0649",
-    moveDown: "\u0646\u0642\u0644 \u0644\u0623\u0633\u0641\u0644",
-    deleteBlock: "\u062D\u0630\u0641 \u0627\u0644\u0643\u062A\u0644\u0629",
-    item: "\u0639\u0646\u0635\u0631",
-    deleteItem: "\u062D\u0630\u0641 \u0627\u0644\u0639\u0646\u0635\u0631",
-    addItem: "\u0639\u0646\u0635\u0631",
-    imagePath: "\u0645\u0633\u0627\u0631 \u0627\u0644\u0645\u0644\u0641 (\\includegraphics)",
-    imagePathLabel: "\u0645\u0633\u0627\u0631 \u0627\u0644\u0635\u0648\u0631\u0629",
-    loadDocumentError: "\u062A\u0639\u0630\u0631 \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0645\u0633\u062A\u0646\u062F",
-    importOrderMismatch: "\u062A\u0631\u062A\u064A\u0628 \u0623\u0648 \u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u0645\u062D\u062F\u062F\u0627\u062A \u0641\u064A math_objects \u0644\u0627 \u062A\u0637\u0627\u0628\u0642 \u0645\u0627 \u0648\u0631\u062F \u0641\u064A \u0627\u0644\u0646\u0635.",
-    importCountMismatch: "\u0639\u062F\u0645 \u062A\u0637\u0627\u0628\u0642 \u0628\u064A\u0646 \u0627\u0644\u0645\u0648\u0627\u0636\u0639 \u0627\u0644\u0631\u064A\u0627\u0636\u064A\u0629 \u0627\u0644\u0645\u0633\u062A\u062E\u0631\u062C\u0629 \u0645\u0646 \u0627\u0644\u0646\u0635 \u0648\u0639\u062F\u062F \u0639\u0646\u0627\u0635\u0631 math_objects.",
-    importWarning: "\u062A\u0646\u0628\u064A\u0647 \u0627\u0644\u0627\u0633\u062A\u064A\u0631\u0627\u062F",
-    path: "\u0627\u0644\u0645\u0633\u0627\u0631",
-    sectionGlyph: "\u0642",
-    subsectionGlyph: "\u0641",
-    subsubsectionGlyph: "\u0635",
-    paragraphGlyph: "\u0623\u0628\u062C"
-  },
-  en: {
-    undoRedo: "Undo and redo",
-    undo: "Undo",
-    redo: "Redo",
-    structure: "Structure",
-    content: "Content",
-    addSection: "Add section",
-    addSubsection: "Add subsection",
-    addSubsubsection: "Add subsubsection",
-    addParagraph: "Add paragraph",
-    inlineEquation: "Inline equation",
-    displayEquation: "Display equation",
-    bulletedList: "Bulleted list",
-    numberedList: "Numbered list",
-    insertImage: "Insert image",
-    insertTable: "Insert table",
-    tableSize: "Table size",
-    rows: "Rows",
-    columns: "Columns",
-    insert: "Insert",
-    panels: "Panels",
-    hideEditor: "Hide editor",
-    editor: "Editor",
-    hidePreview: "Hide preview",
-    preview: "Preview",
-    collapseBlocks: "Collapse blocks",
-    collapseAll: "Collapse all",
-    openAll: "Open all",
-    documentEditor: "Document editor",
-    documentPreview: "Document preview",
-    importWarnings: "Import warnings (development mode)",
-    emptyDocument: "The document is empty",
-    text: "Text",
-    editEquation: "Edit equation",
-    rawEquation: "Raw equation",
-    deleteEquation: "Delete equation",
-    equationUnavailable: "This equation is not currently available for editing",
-    closeEquationDialog: "Close equation dialog",
-    equationEditorTitle: "Edit equation",
-    close: "Close",
-    equationType: "Equation type",
-    inline: "Inline",
-    displayed: "Displayed",
-    saveEquation: "Save equation",
-    section: "Section",
-    subsection: "Subsection",
-    subsubsection: "Subsubsection",
-    paragraph: "Paragraph",
-    list: "List",
-    table: "Table",
-    image: "Image",
-    raw: "Raw",
-    openBlock: "Open block",
-    collapseBlock: "Collapse block",
-    moveUp: "Move up",
-    moveDown: "Move down",
-    deleteBlock: "Delete block",
-    item: "Item",
-    deleteItem: "Delete item",
-    addItem: "Item",
-    imagePath: "File path (\\includegraphics)",
-    imagePathLabel: "Image path",
-    loadDocumentError: "Could not load document",
-    importOrderMismatch: "The math_objects delimiter order or types do not match the document text.",
-    importCountMismatch: "The detected math positions do not match the number of math_objects entries.",
-    importWarning: "Import warning",
-    path: "Path",
-    sectionGlyph: "H1",
-    subsectionGlyph: "H2",
-    subsubsectionGlyph: "H3",
-    paragraphGlyph: "P"
-  }
-};
-function document2Messages(locale) {
-  return DOCUMENT2_MESSAGES[locale];
-}
-
 // src/react-document2/MathChip.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function MathChip({
   token,
   output = "svg",
@@ -7449,12 +8092,12 @@ function MathChip({
   const tex = mathTokenSourceForSide(token, equationSide);
   const forwardArrowKey = documentDirection === "rtl" ? "ArrowLeft" : "ArrowRight";
   const backwardArrowKey = documentDirection === "rtl" ? "ArrowRight" : "ArrowLeft";
-  const island = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MathIsland, { id: token.id, tex, display: token.display, output });
+  const island = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MathIsland, { id: token.id, tex, display: token.display, output });
   if (!editable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "butex-document2-widget__math-chip-wrap", "data-display": token.display ? "true" : "false", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "butex-document2-widget__math-chip", "data-editable": "false", "data-display": token.display ? "true" : "false", children: island }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "butex-document2-widget__math-chip-wrap", "data-display": token.display ? "true" : "false", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "butex-document2-widget__math-chip", "data-editable": "false", "data-display": token.display ? "true" : "false", children: island }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "butex-document2-widget__math-chip-wrap", "data-display": token.display ? "true" : "false", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "butex-document2-widget__math-chip-wrap", "data-display": token.display ? "true" : "false", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "button",
       {
         type: "button",
@@ -7496,7 +8139,7 @@ function MathChip({
         children: island
       }
     ),
-    onDelete ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    onDelete ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "button",
       {
         type: "button",
@@ -7514,7 +8157,7 @@ function MathChip({
 }
 
 // src/react-document2/InlineField.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function rememberCaret(element, blockId, fieldId, tokenId, onFieldFocus) {
   if (!blockId || !onFieldFocus) {
     return;
@@ -7533,21 +8176,28 @@ function fitTextareaHeight(element) {
 function InlineField({
   field,
   blockId,
+  references = [],
   documentDirection = "rtl",
+  digitForm,
   mathOutput = "svg",
   equationSide = "arabic",
   editableEquations = true,
+  editableCitations = true,
   uiLocale = "ar",
   onTextChange,
   onOpenMath,
   onDeleteMath,
+  onOpenCite,
+  onDeleteCite,
   onFieldFocus,
   onMathFocus,
+  onCiteFocus,
   onFieldBlur
 }) {
   const messages = document2Messages(uiLocale);
   const textRefs = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
   const mathRefs = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
+  const citeRefs = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
   function textTokenOffset(tokenId, fallback) {
     const token = field.tokens.find((entry) => entry.id === tokenId && entry.kind === "text");
     if (!token || token.kind !== "text") {
@@ -7573,6 +8223,11 @@ function InlineField({
       mathRefs.current.get(tokenId)?.focus();
     });
   }
+  function focusCiteToken(tokenId) {
+    requestAnimationFrame(() => {
+      citeRefs.current.get(tokenId)?.focus();
+    });
+  }
   function adjacentTokenId(tokenId, direction, kind) {
     const index = field.tokens.findIndex((token) => token.id === tokenId);
     if (index < 0) {
@@ -7586,7 +8241,20 @@ function InlineField({
     }
     return null;
   }
-  function focusTextNearMath(tokenId, direction) {
+  function adjacentIslandId(tokenId, direction) {
+    const index = field.tokens.findIndex((token) => token.id === tokenId);
+    if (index < 0) {
+      return null;
+    }
+    for (let i = index + direction; i >= 0 && i < field.tokens.length; i += direction) {
+      const token = field.tokens[i];
+      if (token?.kind === "math" || token?.kind === "cite") {
+        return { kind: token.kind, id: token.id };
+      }
+    }
+    return null;
+  }
+  function focusTextNearIsland(tokenId, direction) {
     const fallbackDirection = direction === 1 ? -1 : 1;
     const textTokenId = adjacentTokenId(tokenId, direction, "text") ?? adjacentTokenId(tokenId, fallbackDirection, "text");
     if (!textTokenId) {
@@ -7611,60 +8279,100 @@ function InlineField({
   }
   const forwardArrowKey = documentDirection === "rtl" ? "ArrowLeft" : "ArrowRight";
   const backwardArrowKey = documentDirection === "rtl" ? "ArrowRight" : "ArrowLeft";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "butex-document2-widget__inline-field", dir: documentDirection, "data-document-direction": documentDirection, children: field.tokens.map(
-    (token) => token.kind === "text" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "textarea",
-      {
-        className: "butex-document2-widget__inline-text",
-        value: token.text,
-        dir: documentDirection,
-        "aria-label": messages.text,
-        rows: 1,
-        "data-field-id": field.id,
-        "data-text-token-id": token.id,
-        ref: (element) => {
-          if (element) {
-            textRefs.current.set(token.id, element);
-            fitTextareaHeight(element);
-          } else {
-            textRefs.current.delete(token.id);
-          }
-        },
-        onChange: (event) => {
-          onTextChange(field.id, token.id, event.currentTarget.value);
-          fitTextareaHeight(event.currentTarget);
-        },
-        onKeyDown: (event) => {
-          const element = event.currentTarget;
-          const collapsed = element.selectionStart === element.selectionEnd;
-          if (!collapsed) {
-            return;
-          }
-          if (editableEquations && event.key === forwardArrowKey && element.selectionStart === element.value.length) {
-            const nextMathId = adjacentTokenId(token.id, 1, "math");
-            if (nextMathId) {
-              event.preventDefault();
-              focusMathToken(nextMathId);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "butex-document2-widget__inline-field", dir: documentDirection, "data-document-direction": documentDirection, children: field.tokens.map((token) => {
+    if (token.kind === "text") {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "textarea",
+        {
+          className: "butex-document2-widget__inline-text",
+          value: token.text,
+          dir: documentDirection,
+          "aria-label": messages.text,
+          rows: 1,
+          "data-field-id": field.id,
+          "data-text-token-id": token.id,
+          ref: (element) => {
+            if (element) {
+              textRefs.current.set(token.id, element);
+              fitTextareaHeight(element);
+            } else {
+              textRefs.current.delete(token.id);
             }
-          } else if (editableEquations && event.key === backwardArrowKey && element.selectionStart === 0) {
-            const previousMathId = adjacentTokenId(token.id, -1, "math");
-            if (previousMathId) {
-              event.preventDefault();
-              focusMathToken(previousMathId);
+          },
+          onChange: (event) => {
+            onTextChange(field.id, token.id, event.currentTarget.value);
+            fitTextareaHeight(event.currentTarget);
+          },
+          onKeyDown: (event) => {
+            const element = event.currentTarget;
+            const collapsed = element.selectionStart === element.selectionEnd;
+            if (!collapsed) {
+              return;
             }
-          }
+            if (event.key === forwardArrowKey && element.selectionStart === element.value.length) {
+              const next = adjacentIslandId(token.id, 1);
+              if (next) {
+                event.preventDefault();
+                if (next.kind === "math") {
+                  focusMathToken(next.id);
+                } else {
+                  focusCiteToken(next.id);
+                }
+              }
+            } else if (event.key === backwardArrowKey && element.selectionStart === 0) {
+              const previous = adjacentIslandId(token.id, -1);
+              if (previous) {
+                event.preventDefault();
+                if (previous.kind === "math") {
+                  focusMathToken(previous.id);
+                } else {
+                  focusCiteToken(previous.id);
+                }
+              }
+            }
+          },
+          onFocus: (event) => rememberCaret(event.currentTarget, blockId, field.id, token.id, onFieldFocus),
+          onClick: (event) => rememberCaret(event.currentTarget, blockId, field.id, token.id, onFieldFocus),
+          onKeyUp: (event) => {
+            rememberCaret(event.currentTarget, blockId, field.id, token.id, onFieldFocus);
+            fitTextareaHeight(event.currentTarget);
+          },
+          onSelect: (event) => rememberCaret(event.currentTarget, blockId, field.id, token.id, onFieldFocus),
+          onBlur: () => onFieldBlur?.()
         },
-        onFocus: (event) => rememberCaret(event.currentTarget, blockId, field.id, token.id, onFieldFocus),
-        onClick: (event) => rememberCaret(event.currentTarget, blockId, field.id, token.id, onFieldFocus),
-        onKeyUp: (event) => {
-          rememberCaret(event.currentTarget, blockId, field.id, token.id, onFieldFocus);
-          fitTextareaHeight(event.currentTarget);
+        token.id
+      );
+    }
+    if (token.kind === "cite") {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        CiteChip,
+        {
+          token,
+          references,
+          documentDirection,
+          digitForm,
+          editable: editableCitations,
+          uiLocale,
+          buttonRef: (element) => {
+            if (element) {
+              citeRefs.current.set(token.id, element);
+            } else {
+              citeRefs.current.delete(token.id);
+            }
+          },
+          onOpen: (citeToken) => onOpenCite?.(citeToken),
+          onDelete: editableCitations ? onDeleteCite : void 0,
+          onFocus: (tokenId) => {
+            if (blockId && onCiteFocus) {
+              onCiteFocus(blockId, field.id, tokenId);
+            }
+          },
+          onRequestTextFocus: focusTextNearIsland
         },
-        onSelect: (event) => rememberCaret(event.currentTarget, blockId, field.id, token.id, onFieldFocus),
-        onBlur: () => onFieldBlur?.()
-      },
-      token.id
-    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        token.id
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       MathChip,
       {
         token,
@@ -7687,16 +8395,16 @@ function InlineField({
             onMathFocus(blockId, field.id, tokenId);
           }
         },
-        onRequestTextFocus: focusTextNearMath,
+        onRequestTextFocus: focusTextNearIsland,
         onTextInputFromFocus: typeFromMath
       },
       token.id
-    )
-  ) });
+    );
+  }) });
 }
 
 // src/react-document2/BlockEditor.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function blockChromeClass(block) {
   const root = "butex-document2-widget__block";
   if (block.kind === "textBlock") {
@@ -7720,6 +8428,9 @@ function blockChromeClass(block) {
   if (block.kind === "image") {
     return `${root} ${root}--image`;
   }
+  if (block.kind === "bibliography") {
+    return `${root} ${root}--bibliography`;
+  }
   return `${root} ${root}--raw`;
 }
 function blockLabel(block, messages) {
@@ -7744,6 +8455,9 @@ function blockLabel(block, messages) {
   if (block.kind === "image") {
     return messages.image;
   }
+  if (block.kind === "bibliography") {
+    return messages.bibliography;
+  }
   return messages.raw;
 }
 function truncateSummary(value) {
@@ -7758,10 +8472,18 @@ function truncateSummary(value) {
 }
 function inlineFieldSummary(field) {
   return truncateSummary(
-    field.tokens.map((token) => token.kind === "text" ? token.text : " [math] ").join("")
+    field.tokens.map((token) => {
+      if (token.kind === "text") {
+        return token.text;
+      }
+      if (token.kind === "cite") {
+        return " [cite] ";
+      }
+      return " [math] ";
+    }).join("")
   );
 }
-function blockSummary(block) {
+function blockSummary(block, referenceCount) {
   if (block.kind === "textBlock") {
     return inlineFieldSummary(block.field);
   }
@@ -7774,6 +8496,9 @@ function blockSummary(block) {
   if (block.kind === "image") {
     return truncateSummary(block.value || "empty image path");
   }
+  if (block.kind === "bibliography") {
+    return `${String(referenceCount)} ref${referenceCount === 1 ? "" : "s"}`;
+  }
   return truncateSummary(block.value);
 }
 function BlockEditor({
@@ -7781,46 +8506,59 @@ function BlockEditor({
   depth = 0,
   blockIndex = 0,
   blockCount = 1,
+  references = [],
   documentDirection = "rtl",
+  digitForm,
   mathOutput = "svg",
   equationSide = "arabic",
   editableEquations = true,
+  editableCitations = true,
   uiLocale = "ar",
   isCollapsed = false,
   onTextChange,
   onOpenMath,
   onDeleteMath,
+  onOpenCite,
+  onDeleteCite,
   onRemoveBlock,
   onMoveBlock,
   onToggleCollapse,
   onBlockFocus,
   onFieldFocus,
   onMathFocus,
+  onCiteFocus,
   onFieldBlur,
   onImageSrcChange,
   onAddListItem,
-  onRemoveListItem
+  onRemoveListItem,
+  onManageReferences
 }) {
   const messages = document2Messages(uiLocale);
   const showChrome = depth === 0;
   const chromeClass = [blockChromeClass(block), isCollapsed ? "butex-document2-widget__block--collapsed" : ""].filter(Boolean).join(" ");
   const fieldProps = {
     blockId: block.id,
+    references,
     documentDirection,
+    digitForm,
     mathOutput,
     equationSide,
     editableEquations,
+    editableCitations,
     uiLocale,
     onTextChange,
     onOpenMath,
     onDeleteMath,
+    onOpenCite,
+    onDeleteCite,
     onFieldFocus,
     onMathFocus,
+    onCiteFocus,
     onFieldBlur
   };
-  const header = showChrome ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "butex-document2-widget__block-header", onClick: () => onBlockFocus?.(block.id), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "butex-document2-widget__block-title", children: [
-      onToggleCollapse ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  const header = showChrome ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "butex-document2-widget__block-header", onClick: () => onBlockFocus?.(block.id), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "butex-document2-widget__block-title", children: [
+      onToggleCollapse ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
         {
           type: "button",
@@ -7834,78 +8572,85 @@ function BlockEditor({
           children: isCollapsed ? "+" : "-"
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: blockLabel(block, messages) })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: blockLabel(block, messages) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "butex-document2-widget__block-actions", children: [
-      onMoveBlock ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", title: messages.moveUp, "aria-label": messages.moveUp, disabled: blockIndex <= 0, onClick: () => onMoveBlock(block.id, -1), children: "\u2191" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", title: messages.moveDown, "aria-label": messages.moveDown, disabled: blockIndex >= blockCount - 1, onClick: () => onMoveBlock(block.id, 1), children: "\u2193" })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "butex-document2-widget__block-actions", children: [
+      onMoveBlock ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", title: messages.moveUp, "aria-label": messages.moveUp, disabled: blockIndex <= 0, onClick: () => onMoveBlock(block.id, -1), children: "\u2191" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", title: messages.moveDown, "aria-label": messages.moveDown, disabled: blockIndex >= blockCount - 1, onClick: () => onMoveBlock(block.id, 1), children: "\u2193" })
       ] }) : null,
-      onRemoveBlock ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "butex-document2-widget__button--danger", onClick: () => onRemoveBlock(block.id), children: messages.deleteBlock }) : null
+      onRemoveBlock ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "butex-document2-widget__button--danger", onClick: () => onRemoveBlock(block.id), children: messages.deleteBlock }) : null
     ] })
   ] }) : null;
   if (isCollapsed && showChrome) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { className: chromeClass, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: chromeClass, children: [
       header,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "butex-document2-widget__block-summary", children: blockSummary(block) })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "butex-document2-widget__block-summary", children: blockSummary(block, references.length) })
     ] });
   }
   if (block.kind === "textBlock") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { className: chromeClass, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: chromeClass, children: [
       header,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InlineField, { field: block.field, ...fieldProps })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InlineField, { field: block.field, ...fieldProps })
     ] });
   }
   if (block.kind === "list") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { className: chromeClass, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: chromeClass, children: [
       header,
-      block.items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "butex-document2-widget__field", dir: "rtl", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "butex-document2-widget__toolbar-label", children: block.command === "\\begin{enumerate}" ? `${messages.item} ${String(index + 1)}` : messages.item }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "butex-document2-widget__list-item-content", dir: documentDirection, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InlineField, { field: item.field, ...fieldProps }),
-          item.blocks.map((child) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      block.items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "butex-document2-widget__field", dir: "rtl", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "butex-document2-widget__toolbar-label", children: block.command === "\\begin{enumerate}" ? `${messages.item} ${String(index + 1)}` : messages.item }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "butex-document2-widget__list-item-content", dir: documentDirection, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InlineField, { field: item.field, ...fieldProps }),
+          item.blocks.map((child) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             BlockEditor,
             {
               block: child,
               depth: depth + 1,
+              references,
               documentDirection,
+              digitForm,
               mathOutput,
               equationSide,
               editableEquations,
+              editableCitations,
               uiLocale,
               onTextChange,
               onOpenMath,
               onDeleteMath,
+              onOpenCite,
+              onDeleteCite,
               onFieldFocus,
               onMathFocus,
+              onCiteFocus,
               onFieldBlur,
               onImageSrcChange,
               onAddListItem,
-              onRemoveListItem
+              onRemoveListItem,
+              onManageReferences
             },
             child.id
           ))
         ] }),
-        onRemoveListItem && block.items.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "butex-document2-widget__list-item-actions", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "butex-document2-widget__button--danger", onClick: () => onRemoveListItem(block.id, item.id), children: messages.deleteItem }) }) : null
+        onRemoveListItem && block.items.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "butex-document2-widget__list-item-actions", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "butex-document2-widget__button--danger", onClick: () => onRemoveListItem(block.id, item.id), children: messages.deleteItem }) }) : null
       ] }, item.id)),
-      onAddListItem ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "butex-document2-widget__list-footer", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { type: "button", onClick: () => onAddListItem(block.id), children: [
+      onAddListItem ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "butex-document2-widget__list-footer", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { type: "button", onClick: () => onAddListItem(block.id), children: [
         "+ ",
         messages.addItem
       ] }) }) : null
     ] });
   }
   if (block.kind === "table") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { className: chromeClass, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: chromeClass, children: [
       header,
-      block.rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "butex-document2-widget__row", dir: documentDirection, children: row.map((cell) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "butex-document2-widget__table-cell", dir: documentDirection, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InlineField, { field: cell, ...fieldProps }) }, cell.id)) }, rowIndex))
+      block.rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "butex-document2-widget__row", dir: documentDirection, children: row.map((cell) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "butex-document2-widget__table-cell", dir: documentDirection, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InlineField, { field: cell, ...fieldProps }) }, cell.id)) }, rowIndex))
     ] });
   }
   if (block.kind === "image") {
     const imageFieldId = `butex-d2-img-${block.id}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { className: chromeClass, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: chromeClass, children: [
       header,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "butex-document2-widget__image-src-label", htmlFor: imageFieldId, children: messages.imagePath }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "butex-document2-widget__image-src-label", htmlFor: imageFieldId, children: messages.imagePath }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "textarea",
         {
           id: imageFieldId,
@@ -7930,22 +8675,112 @@ function BlockEditor({
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { className: chromeClass, children: [
+  if (block.kind === "bibliography") {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: chromeClass, children: [
+      header,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ol", { className: "butex-document2-widget__bibliography-editor", dir: documentDirection, children: references.map((reference, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("strong", { children: [
+          "[",
+          index + 1,
+          "] ",
+          reference.key
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: [reference.authors, reference.title, reference.venue, reference.year].filter(Boolean).join(" \u2014 ") })
+      ] }, reference.id)) }),
+      onManageReferences ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", onClick: onManageReferences, children: messages.manageReferences }) : null
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: chromeClass, children: [
     header,
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { className: "butex-document2-widget__raw", children: block.value })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pre", { className: "butex-document2-widget__raw", children: block.value })
   ] });
 }
 
+// src/react-document2/CitePickerPopover.tsx
+var import_react3 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function CitePickerPopover({
+  open,
+  references,
+  initialKeys = [],
+  uiLocale = "ar",
+  onClose,
+  onConfirm,
+  onManageReferences
+}) {
+  const messages = document2Messages(uiLocale);
+  const [selected, setSelected] = (0, import_react3.useState)(initialKeys);
+  (0, import_react3.useEffect)(() => {
+    if (open) {
+      setSelected(initialKeys);
+    }
+  }, [open, initialKeys]);
+  if (!open) {
+    return null;
+  }
+  function toggleKey(key) {
+    setSelected((current) => current.includes(key) ? current.filter((entry) => entry !== key) : [...current, key]);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "butex-document2-widget__cite-picker-backdrop", role: "presentation", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      className: "butex-document2-widget__cite-picker",
+      role: "dialog",
+      "aria-label": messages.citePickerTitle,
+      onClick: (event) => event.stopPropagation(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("header", { className: "butex-document2-widget__cite-picker-header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: messages.citePickerTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.close, "aria-label": messages.close, onClick: onClose, children: "\xD7" })
+        ] }),
+        references.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "butex-document2-widget__cite-picker-empty", children: messages.noReferencesYet }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: "butex-document2-widget__cite-picker-list", children: references.map((reference, index) => {
+          const checked = selected.includes(reference.key);
+          const subtitle = [reference.authors, reference.title].filter(Boolean).join(" \u2014 ");
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "butex-document2-widget__cite-picker-item", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "checkbox", checked, onChange: () => toggleKey(reference.key) }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("strong", { children: [
+                "[",
+                index + 1,
+                "] ",
+                reference.key
+              ] }),
+              subtitle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "butex-document2-widget__cite-picker-meta", children: subtitle }) : null
+            ] })
+          ] }) }, reference.id);
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("footer", { className: "butex-document2-widget__cite-picker-footer", children: [
+          onManageReferences ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", onClick: onManageReferences, children: messages.manageReferences }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", onClick: onClose, children: messages.close }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "butex-document2-widget__primary-btn",
+              disabled: selected.length === 0,
+              onClick: () => onConfirm(selected),
+              children: messages.insertCitation
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/react-document2/DocumentInsertToolbar.tsx
+var import_react5 = require("react");
+
 // src/react-document2/TableInsertPopover.tsx
-var import_react3 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react4 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function TableInsertPopover({ uiLocale = "ar", onConfirm }) {
   const messages = document2Messages(uiLocale);
-  const [open, setOpen] = (0, import_react3.useState)(false);
-  const [rows, setRows] = (0, import_react3.useState)("3");
-  const [cols, setCols] = (0, import_react3.useState)("3");
-  const rootRef = (0, import_react3.useRef)(null);
-  (0, import_react3.useEffect)(() => {
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const [rows, setRows] = (0, import_react4.useState)("3");
+  const [cols, setCols] = (0, import_react4.useState)("3");
+  const rootRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
     if (!open) {
       return;
     }
@@ -7963,8 +8798,8 @@ function TableInsertPopover({ uiLocale = "ar", onConfirm }) {
     onConfirm(rowCount, colCount);
     setOpen(false);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "butex-document2-widget__table-popover", ref: rootRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "butex-document2-widget__table-popover", ref: rootRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "button",
       {
         type: "button",
@@ -7977,27 +8812,38 @@ function TableInsertPopover({ uiLocale = "ar", onConfirm }) {
         children: "\u229E"
       }
     ),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "butex-document2-widget__table-popover-panel", role: "dialog", "aria-label": messages.tableSize, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { children: [
+    open ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "butex-document2-widget__table-popover-panel", role: "dialog", "aria-label": messages.tableSize, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { children: [
         messages.rows,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { type: "number", min: 1, max: 20, value: rows, onChange: (event) => setRows(event.currentTarget.value) })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "number", min: 1, max: 20, value: rows, onChange: (event) => setRows(event.currentTarget.value) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { children: [
         messages.columns,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { type: "number", min: 1, max: 10, value: cols, onChange: (event) => setCols(event.currentTarget.value) })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "number", min: 1, max: 10, value: cols, onChange: (event) => setCols(event.currentTarget.value) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", onClick: confirm, children: messages.insert })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: confirm, children: messages.insert })
     ] }) : null
   ] });
 }
 
 // src/react-document2/DocumentInsertToolbar.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var DIGIT_FORMS = ["western", "arabicIndic", "persianIndic"];
+function digitFormLabel(digitForm) {
+  if (digitForm === "arabicIndic") {
+    return "\u0664\u0665\u0666";
+  }
+  if (digitForm === "persianIndic") {
+    return "\u06F4\u06F5\u06F6";
+  }
+  return "456";
+}
 function DocumentInsertToolbar({
   canUndo,
   canRedo,
   editableEquations = true,
   uiLocale = "ar",
+  digitForm = "western",
   onUndo,
   onRedo,
   onAddSection,
@@ -8009,61 +8855,135 @@ function DocumentInsertToolbar({
   onAddTable,
   onAddList,
   onAddEnumerate,
-  onAddFigure
+  onAddFigure,
+  onInsertCitation,
+  onInsertBibliography,
+  onManageReferences,
+  onDigitFormChange
 }) {
   const messages = document2Messages(uiLocale);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "butex-document2-widget__toolbar-insert", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.undoRedo, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: `${messages.undo} (Ctrl+Z)`, "aria-label": messages.undo, disabled: !canUndo, onClick: onUndo, children: "\u21B6" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: `${messages.redo} (Ctrl+Shift+Z)`, "aria-label": messages.redo, disabled: !canRedo, onClick: onRedo, children: "\u21B7" })
+  const [digitMenuOpen, setDigitMenuOpen] = (0, import_react5.useState)(false);
+  function digitTitle(id) {
+    if (id === "arabicIndic") {
+      return messages.arabicIndicDigits;
+    }
+    if (id === "persianIndic") {
+      return messages.persianIndicDigits;
+    }
+    return messages.westernDigits;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "butex-document2-widget__toolbar-insert", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.undoRedo, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: `${messages.undo} (Ctrl+Z)`, "aria-label": messages.undo, disabled: !canUndo, onClick: onUndo, children: "\u21B6" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: `${messages.redo} (Ctrl+Shift+Z)`, "aria-label": messages.redo, disabled: !canRedo, onClick: onRedo, children: "\u21B7" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.structure, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn butex-document2-widget__icon-btn--h1", title: messages.addSection, "aria-label": messages.addSection, onClick: onAddSection, children: messages.sectionGlyph }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn butex-document2-widget__icon-btn--h2", title: messages.addSubsection, "aria-label": messages.addSubsection, onClick: onAddSubsection, children: messages.subsectionGlyph }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn butex-document2-widget__icon-btn--h3", title: messages.addSubsubsection, "aria-label": messages.addSubsubsection, onClick: onAddSubsubsection, children: messages.subsubsectionGlyph }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.addParagraph, "aria-label": messages.addParagraph, onClick: onAddParagraph, children: messages.paragraphGlyph })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.structure, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn butex-document2-widget__icon-btn--h1", title: messages.addSection, "aria-label": messages.addSection, onClick: onAddSection, children: messages.sectionGlyph }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn butex-document2-widget__icon-btn--h2", title: messages.addSubsection, "aria-label": messages.addSubsection, onClick: onAddSubsection, children: messages.subsectionGlyph }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn butex-document2-widget__icon-btn--h3", title: messages.addSubsubsection, "aria-label": messages.addSubsubsection, onClick: onAddSubsubsection, children: messages.subsubsectionGlyph }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.addParagraph, "aria-label": messages.addParagraph, onClick: onAddParagraph, children: messages.paragraphGlyph })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.content, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: `${messages.inlineEquation} ($\u2026$)`, "aria-label": messages.inlineEquation, disabled: !editableEquations, onClick: onAddInlineEquation, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "butex-document2-widget__icon-math-inline", "aria-hidden": "true", children: "$=$" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: `${messages.displayEquation} (\\[\u2026\\])`, "aria-label": messages.displayEquation, disabled: !editableEquations, onClick: onAddDisplayEquation, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "butex-document2-widget__icon-math-display", "aria-hidden": "true", children: "\\[\xF7\\]" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TableInsertPopover, { uiLocale, onConfirm: onAddTable }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.bulletedList, "aria-label": messages.bulletedList, onClick: onAddList, children: "\u2022\u2261" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.numberedList, "aria-label": messages.numberedList, onClick: onAddEnumerate, children: "1." }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.insertImage, "aria-label": messages.insertImage, onClick: onAddFigure, children: "\u{1F5BC}" })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.content, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: `${messages.inlineEquation} ($\u2026$)`, "aria-label": messages.inlineEquation, disabled: !editableEquations, onClick: onAddInlineEquation, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "butex-document2-widget__icon-math-inline", "aria-hidden": "true", children: "$=$" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: `${messages.displayEquation} (\\[\u2026\\])`, "aria-label": messages.displayEquation, disabled: !editableEquations, onClick: onAddDisplayEquation, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "butex-document2-widget__icon-math-display", "aria-hidden": "true", children: "\\[\xF7\\]" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.insertCitation, "aria-label": messages.insertCitation, onClick: onInsertCitation, children: "[]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.insertBibliography, "aria-label": messages.insertBibliography, onClick: onInsertBibliography, children: "Ref" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.manageReferences, "aria-label": messages.manageReferences, onClick: onManageReferences, children: "\u2630" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TableInsertPopover, { uiLocale, onConfirm: onAddTable }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.bulletedList, "aria-label": messages.bulletedList, onClick: onAddList, children: "\u2022\u2261" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.numberedList, "aria-label": messages.numberedList, onClick: onAddEnumerate, children: "1." }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.insertImage, "aria-label": messages.insertImage, onClick: onAddFigure, children: "\u{1F5BC}" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "butex-document2-widget__digit-form-menu", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "butex-document2-widget__icon-btn",
+            title: messages.chooseDigitForm,
+            "aria-label": messages.chooseDigitForm,
+            "aria-expanded": digitMenuOpen,
+            onClick: () => setDigitMenuOpen((open) => !open),
+            children: digitFormLabel(digitForm)
+          }
+        ),
+        digitMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "butex-document2-widget__digit-form-options", role: "listbox", "aria-label": messages.chooseDigitForm, children: DIGIT_FORMS.map((id) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": digitForm === id,
+            title: digitTitle(id),
+            className: "butex-document2-widget__digit-form-option",
+            onClick: () => {
+              onDigitFormChange(id);
+              setDigitMenuOpen(false);
+            },
+            children: digitFormLabel(id)
+          },
+          id
+        )) }) : null
+      ] })
     ] })
   ] });
 }
 
 // src/react-document2/DocumentPreview.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function PreviewInlines({ inlines, output }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: inlines.map(
-    (inline, index) => inline.kind === "text" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: inline.text }, index) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MathIsland, { id: inline.id, tex: inline.tex, display: inline.display, output }, inline.id)
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: inlines.map((inline, index) => {
+    if (inline.kind === "text") {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: inline.text }, index);
+    }
+    if (inline.kind === "cite") {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "butex-document2-widget__preview-cite", children: inline.label }, inline.id);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MathIsland, { id: inline.id, tex: inline.tex, display: inline.display, output }, inline.id);
+  }) });
 }
-function PreviewBlock({ block, output }) {
+function PreviewBlock({
+  block,
+  output,
+  resolveImageUrl
+}) {
   if (block.kind === "heading") {
     const Tag = block.level === 1 ? "h1" : block.level === 2 ? "h2" : "h3";
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Tag, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PreviewInlines, { inlines: block.inlines, output }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Tag, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PreviewInlines, { inlines: block.inlines, output }) });
   }
   if (block.kind === "paragraph") {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PreviewInlines, { inlines: block.inlines, output }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PreviewInlines, { inlines: block.inlines, output }) });
   }
   if (block.kind === "list") {
     const Tag = block.ordered ? "ol" : "ul";
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Tag, { children: block.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PreviewInlines, { inlines: item.inlines, output }),
-      item.blocks.map((child) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PreviewBlock, { block: child, output }, child.id))
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Tag, { children: block.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("li", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PreviewInlines, { inlines: item.inlines, output }),
+      item.blocks.map((child) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PreviewBlock, { block: child, output, resolveImageUrl }, child.id))
     ] }, item.id)) });
   }
   if (block.kind === "omit") {
     return null;
   }
   if (block.kind === "table") {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("table", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tbody", { children: block.rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tr", { children: row.map((cell, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PreviewInlines, { inlines: cell, output }) }, columnIndex)) }, rowIndex)) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("table", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tbody", { children: block.rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tr", { children: row.map((cell, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PreviewInlines, { inlines: cell, output }) }, columnIndex)) }, rowIndex)) }) });
   }
   if (block.kind === "image") {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: block.src, alt: "" });
+    const src = resolveImageUrl ? resolveImageUrl({ assetId: block.assetId, value: block.src }) : block.src;
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("img", { src, alt: "" });
+  }
+  if (block.kind === "bibliography") {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ol", { className: "butex-document2-widget__preview-bibliography", children: block.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("li", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "butex-document2-widget__preview-bib-number", children: [
+        item.numberLabel,
+        "."
+      ] }),
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+        [item.authors, item.title, item.venue, item.year].filter(Boolean).join(", "),
+        item.url ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("a", { href: item.url, target: "_blank", rel: "noreferrer", children: item.url })
+        ] }) : null
+      ] })
+    ] }, item.id)) });
   }
   return null;
 }
@@ -8071,17 +8991,18 @@ function DocumentPreview({
   blocks,
   output,
   documentDirection = "rtl",
-  uiLocale = "ar"
+  uiLocale = "ar",
+  resolveImageUrl
 }) {
   const messages = document2Messages(uiLocale);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "butex-document2-widget__preview", dir: documentDirection, children: blocks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: messages.emptyDocument }) : blocks.map((block) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PreviewBlock, { block, output }, block.id)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "butex-document2-widget__preview", dir: documentDirection, children: blocks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: messages.emptyDocument }) : blocks.map((block) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PreviewBlock, { block, output, resolveImageUrl }, block.id)) });
 }
 
 // src/react-document2/EquationDrawer.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 
 // src/react/ButexEditor.tsx
-var import_react4 = require("react");
+var import_react6 = require("react");
 
 // src/react/widgetChromeCss.ts
 var WIDGET_CHROME_CSS = `
@@ -9014,7 +9935,7 @@ function uiLocaleDirection(locale) {
 }
 
 // src/react/ButexEditor.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var DIGIT_FORM_OPTIONS = [
   { id: "western", label: "456" },
   { id: "arabicIndic", label: "\u0664\u0665\u0666" },
@@ -9056,7 +9977,7 @@ function matrixSizeLabel(rows, columns, messages) {
 function clampMatrixSize(value) {
   return Math.max(1, Math.min(12, Math.trunc(value)));
 }
-function digitFormLabel(digitForm) {
+function digitFormLabel2(digitForm) {
   return DIGIT_FORM_OPTIONS.find((option) => option.id === digitForm)?.label ?? "456";
 }
 function characterFontOption(fontId) {
@@ -9097,16 +10018,16 @@ function renderArabicCommandLabel(command) {
   if (command.id !== "ln") {
     return command.arabicLabel;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "function-command-label-with-sub", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "function-command-label-with-sub__base", children: command.arabicLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "function-command-label-with-sub__sub", children: "\u0647\u0640" })
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "function-command-label-with-sub", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "function-command-label-with-sub__base", children: command.arabicLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "function-command-label-with-sub__sub", children: "\u0647\u0640" })
   ] });
 }
 function renderOperatorCommandLabel(command) {
   if (!command.svg_path) {
     return command.Label;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "span",
     {
       className: "operator-command-svg-label",
@@ -9122,7 +10043,7 @@ function renderOperatorMenuButtonLabel(command, fallback) {
   if (!command) {
     return fallback;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: shouldMirrorOperatorDisplay(command) ? "operator-command-label operator-command-label--mirror" : "operator-command-label", children: renderOperatorCommandLabel(command) });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: shouldMirrorOperatorDisplay(command) ? "operator-command-label operator-command-label--mirror" : "operator-command-label", children: renderOperatorCommandLabel(command) });
 }
 function passiveTreeText(session, messages) {
   const passive = session.activeSide === "arabic" ? session.englishTree : session.arabicTree;
@@ -9132,61 +10053,61 @@ function passiveTreeText(session, messages) {
 
 ${latex || messages.empty}`;
 }
-var ButexEditor = (0, import_react4.forwardRef)(
+var ButexEditor = (0, import_react6.forwardRef)(
   function ButexEditor2({ className, debug = false, defaultSide, uiLocale = "ar", initialSession, onSessionChange }, ref) {
     const messages = equationEditorMessages(uiLocale);
-    const wrapperRef = (0, import_react4.useRef)(null);
-    const surfaceRef = (0, import_react4.useRef)(null);
-    const mathOutputRef = (0, import_react4.useRef)(null);
-    const renderErrorRef = (0, import_react4.useRef)(null);
-    const latexLinesRef = (0, import_react4.useRef)(null);
-    const passivePreviewRef = (0, import_react4.useRef)(null);
-    const debugLogRef = (0, import_react4.useRef)(null);
-    const undoBtnRef = (0, import_react4.useRef)(null);
-    const redoBtnRef = (0, import_react4.useRef)(null);
-    const copyBtnRef = (0, import_react4.useRef)(null);
-    const cutBtnRef = (0, import_react4.useRef)(null);
-    const splitTypingBtnRef = (0, import_react4.useRef)(null);
-    const characterFontBtnRef = (0, import_react4.useRef)(null);
-    const digitFormBtnRef = (0, import_react4.useRef)(null);
-    const runtimeRef = (0, import_react4.useRef)(null);
-    const debugRef = (0, import_react4.useRef)(debug);
+    const wrapperRef = (0, import_react6.useRef)(null);
+    const surfaceRef = (0, import_react6.useRef)(null);
+    const mathOutputRef = (0, import_react6.useRef)(null);
+    const renderErrorRef = (0, import_react6.useRef)(null);
+    const latexLinesRef = (0, import_react6.useRef)(null);
+    const passivePreviewRef = (0, import_react6.useRef)(null);
+    const debugLogRef = (0, import_react6.useRef)(null);
+    const undoBtnRef = (0, import_react6.useRef)(null);
+    const redoBtnRef = (0, import_react6.useRef)(null);
+    const copyBtnRef = (0, import_react6.useRef)(null);
+    const cutBtnRef = (0, import_react6.useRef)(null);
+    const splitTypingBtnRef = (0, import_react6.useRef)(null);
+    const characterFontBtnRef = (0, import_react6.useRef)(null);
+    const digitFormBtnRef = (0, import_react6.useRef)(null);
+    const runtimeRef = (0, import_react6.useRef)(null);
+    const debugRef = (0, import_react6.useRef)(debug);
     debugRef.current = debug;
-    const uiLocaleRef = (0, import_react4.useRef)(uiLocale);
+    const uiLocaleRef = (0, import_react6.useRef)(uiLocale);
     uiLocaleRef.current = uiLocale;
-    const onSessionChangeRef = (0, import_react4.useRef)(onSessionChange);
+    const onSessionChangeRef = (0, import_react6.useRef)(onSessionChange);
     onSessionChangeRef.current = onSessionChange;
-    const debugBodyHiddenRef = (0, import_react4.useRef)(false);
-    const [debugBodyHidden, setDebugBodyHidden] = (0, import_react4.useState)(false);
+    const debugBodyHiddenRef = (0, import_react6.useRef)(false);
+    const [debugBodyHidden, setDebugBodyHidden] = (0, import_react6.useState)(false);
     debugBodyHiddenRef.current = debugBodyHidden;
-    const [digitMenuOpen, setDigitMenuOpen] = (0, import_react4.useState)(false);
-    const [characterFontMenuOpen, setCharacterFontMenuOpen] = (0, import_react4.useState)(false);
-    const [delimiterMenuOpen, setDelimiterMenuOpen] = (0, import_react4.useState)(false);
-    const [matrixMenuOpen, setMatrixMenuOpen] = (0, import_react4.useState)(false);
-    const [spacingMenuOpen, setSpacingMenuOpen] = (0, import_react4.useState)(false);
-    const [functionMenuOpen, setFunctionMenuOpen] = (0, import_react4.useState)(false);
-    const [limitsSeriesMenuOpen, setLimitsSeriesMenuOpen] = (0, import_react4.useState)(false);
-    const [function2MenuOpen, setFunction2MenuOpen] = (0, import_react4.useState)(false);
-    const [derivativeMenuOpen, setDerivativeMenuOpen] = (0, import_react4.useState)(false);
-    const [groupMenuOpen, setGroupMenuOpen] = (0, import_react4.useState)(false);
-    const [operatorMenuOpen, setOperatorMenuOpen] = (0, import_react4.useState)(false);
-    const [operator2MenuOpen, setOperator2MenuOpen] = (0, import_react4.useState)(false);
-    const [operator3MenuOpen, setOperator3MenuOpen] = (0, import_react4.useState)(false);
-    const [dotMenuOpen, setDotMenuOpen] = (0, import_react4.useState)(false);
-    const [integralMenuOpen, setIntegralMenuOpen] = (0, import_react4.useState)(false);
-    const [selectedDigitForm2, setSelectedDigitForm] = (0, import_react4.useState)("western");
-    const [selectedCharacterFont, setSelectedCharacterFont] = (0, import_react4.useState)("default");
-    const [activeEditorSide, setActiveEditorSide] = (0, import_react4.useState)("arabic");
-    const [envPaletteMode, setEnvPaletteMode] = (0, import_react4.useState)("matrix");
-    const [matrixStyle, setMatrixStyle] = (0, import_react4.useState)("pmatrix");
-    const [matrixRows, setMatrixRows] = (0, import_react4.useState)(2);
-    const [matrixColumns, setMatrixColumns] = (0, import_react4.useState)(2);
-    const [matrixHover, setMatrixHover] = (0, import_react4.useState)(null);
-    const [arrayAlignmentColumn, setArrayAlignmentColumn] = (0, import_react4.useState)(1);
-    (0, import_react4.useImperativeHandle)(ref, () => ({
+    const [digitMenuOpen, setDigitMenuOpen] = (0, import_react6.useState)(false);
+    const [characterFontMenuOpen, setCharacterFontMenuOpen] = (0, import_react6.useState)(false);
+    const [delimiterMenuOpen, setDelimiterMenuOpen] = (0, import_react6.useState)(false);
+    const [matrixMenuOpen, setMatrixMenuOpen] = (0, import_react6.useState)(false);
+    const [spacingMenuOpen, setSpacingMenuOpen] = (0, import_react6.useState)(false);
+    const [functionMenuOpen, setFunctionMenuOpen] = (0, import_react6.useState)(false);
+    const [limitsSeriesMenuOpen, setLimitsSeriesMenuOpen] = (0, import_react6.useState)(false);
+    const [function2MenuOpen, setFunction2MenuOpen] = (0, import_react6.useState)(false);
+    const [derivativeMenuOpen, setDerivativeMenuOpen] = (0, import_react6.useState)(false);
+    const [groupMenuOpen, setGroupMenuOpen] = (0, import_react6.useState)(false);
+    const [operatorMenuOpen, setOperatorMenuOpen] = (0, import_react6.useState)(false);
+    const [operator2MenuOpen, setOperator2MenuOpen] = (0, import_react6.useState)(false);
+    const [operator3MenuOpen, setOperator3MenuOpen] = (0, import_react6.useState)(false);
+    const [dotMenuOpen, setDotMenuOpen] = (0, import_react6.useState)(false);
+    const [integralMenuOpen, setIntegralMenuOpen] = (0, import_react6.useState)(false);
+    const [selectedDigitForm2, setSelectedDigitForm] = (0, import_react6.useState)("western");
+    const [selectedCharacterFont, setSelectedCharacterFont] = (0, import_react6.useState)("default");
+    const [activeEditorSide, setActiveEditorSide] = (0, import_react6.useState)("arabic");
+    const [envPaletteMode, setEnvPaletteMode] = (0, import_react6.useState)("matrix");
+    const [matrixStyle, setMatrixStyle] = (0, import_react6.useState)("pmatrix");
+    const [matrixRows, setMatrixRows] = (0, import_react6.useState)(2);
+    const [matrixColumns, setMatrixColumns] = (0, import_react6.useState)(2);
+    const [matrixHover, setMatrixHover] = (0, import_react6.useState)(null);
+    const [arrayAlignmentColumn, setArrayAlignmentColumn] = (0, import_react6.useState)(1);
+    (0, import_react6.useImperativeHandle)(ref, () => ({
       getRuntime: () => runtimeRef.current
     }));
-    const updatePreview = (0, import_react4.useCallback)(async (session) => {
+    const updatePreview = (0, import_react6.useCallback)(async (session) => {
       const mathOutputEl = mathOutputRef.current;
       const renderErrorEl = renderErrorRef.current;
       const latexLinesEl = latexLinesRef.current;
@@ -9236,9 +10157,9 @@ ${arabic || currentMessages.empty}`;
         }
       }
     }, []);
-    const updatePreviewRef = (0, import_react4.useRef)(updatePreview);
+    const updatePreviewRef = (0, import_react6.useRef)(updatePreview);
     updatePreviewRef.current = updatePreview;
-    (0, import_react4.useEffect)(() => {
+    (0, import_react6.useEffect)(() => {
       injectWidgetChromeCss();
       injectBuTeXEditorStyles(typeof document !== "undefined" ? document : void 0);
       const surfaceEl = surfaceRef.current;
@@ -9294,7 +10215,7 @@ ${arabic || currentMessages.empty}`;
         runtimeRef.current = null;
       };
     }, []);
-    (0, import_react4.useEffect)(() => {
+    (0, import_react6.useEffect)(() => {
       runtimeRef.current?.setUiLocale(uiLocale);
       const session = runtimeRef.current?.getSession();
       if (session) {
@@ -9313,24 +10234,24 @@ ${arabic || currentMessages.empty}`;
         runtimeRef.current?.insertMatrixEnv(matrixStyle, rows, columns);
       }
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "div",
       {
         ref: wrapperRef,
         className: `butex-widget ${className ?? ""}`.trim(),
         dir: uiLocaleDirection(uiLocale),
         lang: uiLocale,
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "butex-widget-layout", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { className: "panel", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "toolbar", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "toolbar-group toolbar-history", role: "group", "aria-label": messages.undoRedo, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { ref: undoBtnRef, id: "btn-undo", type: "button", className: "icon-btn", title: messages.undo, "aria-label": messages.undo, children: "\u21B7" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { ref: redoBtnRef, id: "btn-redo", type: "button", className: "icon-btn", title: messages.redo, "aria-label": messages.redo, children: "\u21B6" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "butex-widget-layout", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { className: "panel", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "toolbar", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "toolbar-group toolbar-history", role: "group", "aria-label": messages.undoRedo, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { ref: undoBtnRef, id: "btn-undo", type: "button", className: "icon-btn", title: messages.undo, "aria-label": messages.undo, children: "\u21B7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { ref: redoBtnRef, id: "btn-redo", type: "button", className: "icon-btn", title: messages.redo, "aria-label": messages.redo, children: "\u21B6" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "toolbar-group toolbar-clipboard", role: "group", "aria-label": messages.clipboard, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { ref: copyBtnRef, id: "btn-copy", type: "button", className: "icon-btn", title: messages.copy, "aria-label": messages.copy, disabled: true, children: "\u29C9" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { ref: cutBtnRef, id: "btn-cut", type: "button", className: "icon-btn", title: messages.cut, "aria-label": messages.cut, disabled: true, children: "\u2702" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "toolbar-group toolbar-clipboard", role: "group", "aria-label": messages.clipboard, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { ref: copyBtnRef, id: "btn-copy", type: "button", className: "icon-btn", title: messages.copy, "aria-label": messages.copy, disabled: true, children: "\u29C9" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { ref: cutBtnRef, id: "btn-cut", type: "button", className: "icon-btn", title: messages.cut, "aria-label": messages.cut, disabled: true, children: "\u2702" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "button",
                   {
                     id: "btn-paste",
@@ -9347,9 +10268,9 @@ ${arabic || currentMessages.empty}`;
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "toolbar-group toolbar-settings", role: "group", "aria-label": messages.editorSettings, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { className: "icon-btn accent", type: "button", title: messages.toggleSide, "aria-label": messages.toggleSide, onClick: () => runtimeRef.current?.toggleSide(), children: "\u21C4" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "toolbar-group toolbar-structures", role: "group", "aria-label": messages.structures, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "toolbar-group toolbar-settings", role: "group", "aria-label": messages.editorSettings, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "icon-btn accent", type: "button", title: messages.toggleSide, "aria-label": messages.toggleSide, onClick: () => runtimeRef.current?.toggleSide(), children: "\u21C4" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "toolbar-group toolbar-structures", role: "group", "aria-label": messages.structures, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "div",
                   {
                     className: "delimiter-command-menu",
@@ -9360,7 +10281,7 @@ ${arabic || currentMessages.empty}`;
                       }
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           className: "icon-btn delimiter-command-btn",
@@ -9373,8 +10294,8 @@ ${arabic || currentMessages.empty}`;
                           children: "()"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "delimiter-command-options", role: "listbox", "aria-label": messages.insertDelimiters, hidden: !delimiterMenuOpen, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "delimiter-command-options", role: "listbox", "aria-label": messages.insertDelimiters, hidden: !delimiterMenuOpen, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                           "button",
                           {
                             className: "delimiter-command-option",
@@ -9392,7 +10313,7 @@ ${arabic || currentMessages.empty}`;
                             children: "()"
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                           "button",
                           {
                             className: "delimiter-command-option",
@@ -9410,7 +10331,7 @@ ${arabic || currentMessages.empty}`;
                             children: "[]"
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                           "button",
                           {
                             className: "delimiter-command-option",
@@ -9432,19 +10353,19 @@ ${arabic || currentMessages.empty}`;
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { id: "insert-frac", className: "icon-btn frac-icon-btn", type: "button", title: messages.insertFraction, "aria-label": messages.insertFraction, onClick: () => {
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { id: "insert-frac", className: "icon-btn frac-icon-btn", type: "button", title: messages.insertFraction, "aria-label": messages.insertFraction, onClick: () => {
                   runtimeRef.current?.insertFraction();
                   focusSurface();
-                }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "toolbar-frac-icon", "aria-hidden": "true", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "\u0623" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "\u0628" })
+                }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "toolbar-frac-icon", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "\u0623" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "\u0628" })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { id: "insert-sqrt", className: "icon-btn", type: "button", title: messages.insertRoot, "aria-label": messages.insertRoot, onClick: () => {
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { id: "insert-sqrt", className: "icon-btn", type: "button", title: messages.insertRoot, "aria-label": messages.insertRoot, onClick: () => {
                   runtimeRef.current?.insertSqrt();
                   focusSurface();
-                }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "toolbar-sqrt-icon", "aria-hidden": "true", children: "\u221A" }) })
+                }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "toolbar-sqrt-icon", "aria-hidden": "true", children: "\u221A" }) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "toolbar-group toolbar-environments", role: "group", "aria-label": messages.environments, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "toolbar-group toolbar-environments", role: "group", "aria-label": messages.environments, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                 "div",
                 {
                   className: "matrix-command-menu",
@@ -9455,7 +10376,7 @@ ${arabic || currentMessages.empty}`;
                     }
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       "button",
                       {
                         className: "icon-btn matrix-command-btn",
@@ -9465,20 +10386,20 @@ ${arabic || currentMessages.empty}`;
                         "aria-haspopup": "dialog",
                         "aria-expanded": matrixMenuOpen,
                         onClick: () => setMatrixMenuOpen((open) => !open),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "toolbar-matrix-icon", "aria-hidden": "true", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", {}),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", {}),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", {}),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", {})
+                        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "toolbar-matrix-icon", "aria-hidden": "true", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", {}),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", {}),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", {}),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", {})
                         ] })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "matrix-command-popover", role: "dialog", "aria-label": messages.insertEnvironment, hidden: !matrixMenuOpen, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "matrix-style-options", role: "listbox", "aria-label": messages.environmentType, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "matrix-command-popover", role: "dialog", "aria-label": messages.insertEnvironment, hidden: !matrixMenuOpen, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "matrix-style-options", role: "listbox", "aria-label": messages.environmentType, children: [
                         { id: "matrix", label: messages.matrix },
                         { id: "array", label: messages.array },
                         { id: "aligned", label: messages.aligned }
-                      ].map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      ].map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           type: "button",
@@ -9496,7 +10417,7 @@ ${arabic || currentMessages.empty}`;
                         },
                         option.id
                       )) }),
-                      envPaletteMode === "matrix" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "matrix-style-options", role: "listbox", "aria-label": messages.matrixType, children: MATRIX_STYLES.map((style) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      envPaletteMode === "matrix" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "matrix-style-options", role: "listbox", "aria-label": messages.matrixType, children: MATRIX_STYLES.map((style) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           type: "button",
@@ -9512,15 +10433,15 @@ ${arabic || currentMessages.empty}`;
                         },
                         style.id
                       )) }) : null,
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "matrix-size-readout", children: matrixHover ? matrixSizeLabel(matrixHover.rows, matrixHover.columns, messages) : matrixSizeLabel(matrixRows, matrixColumns, messages) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "matrix-grid-picker", "aria-label": messages.chooseEnvironmentSize, children: Array.from(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "matrix-size-readout", children: matrixHover ? matrixSizeLabel(matrixHover.rows, matrixHover.columns, messages) : matrixSizeLabel(matrixRows, matrixColumns, messages) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "matrix-grid-picker", "aria-label": messages.chooseEnvironmentSize, children: Array.from(
                         { length: 8 },
                         (_, rowIndex) => Array.from({ length: 8 }, (_2, columnIndex) => {
                           const rows = rowIndex + 1;
                           const columns = columnIndex + 1;
                           const activeRows = matrixHover?.rows ?? matrixRows;
                           const activeColumns = matrixHover?.columns ?? matrixColumns;
-                          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                             "button",
                             {
                               type: "button",
@@ -9542,10 +10463,10 @@ ${arabic || currentMessages.empty}`;
                           );
                         })
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "matrix-custom-size", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "matrix-custom-size", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { children: [
                           messages.row,
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                             "input",
                             {
                               type: "number",
@@ -9556,9 +10477,9 @@ ${arabic || currentMessages.empty}`;
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { children: [
                           messages.column,
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                             "input",
                             {
                               type: "number",
@@ -9569,7 +10490,7 @@ ${arabic || currentMessages.empty}`;
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                           "button",
                           {
                             type: "button",
@@ -9587,12 +10508,12 @@ ${arabic || currentMessages.empty}`;
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "matrix-edit-actions", "aria-label": messages.editSelectedEnvironment, children: [
-                        envPaletteMode === "matrix" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", title: messages.applySelectedMatrixStyle, onMouseDown: (event) => event.preventDefault(), onClick: () => runtimeRef.current?.setMatrixEnvStyle(matrixStyle), children: messages.applyStyle }) : null,
-                        envPaletteMode === "array" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "matrix-edit-actions", "aria-label": messages.editSelectedEnvironment, children: [
+                        envPaletteMode === "matrix" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", title: messages.applySelectedMatrixStyle, onMouseDown: (event) => event.preventDefault(), onClick: () => runtimeRef.current?.setMatrixEnvStyle(matrixStyle), children: messages.applyStyle }) : null,
+                        envPaletteMode === "array" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { children: [
                             messages.column,
-                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                               "input",
                               {
                                 type: "number",
@@ -9603,7 +10524,7 @@ ${arabic || currentMessages.empty}`;
                               }
                             )
                           ] }),
-                          ARRAY_ALIGNMENTS.map((alignment) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          ARRAY_ALIGNMENTS.map((alignment) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                             "button",
                             {
                               type: "button",
@@ -9615,19 +10536,19 @@ ${arabic || currentMessages.empty}`;
                             alignment.id
                           ))
                         ] }) : null,
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", title: messages.addRow, onMouseDown: (event) => event.preventDefault(), onClick: () => runtimeRef.current?.addMatrixRow(), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { type: "button", title: messages.addRow, onMouseDown: (event) => event.preventDefault(), onClick: () => runtimeRef.current?.addMatrixRow(), children: [
                           "+",
                           messages.row
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", title: messages.removeRow, onMouseDown: (event) => event.preventDefault(), onClick: () => runtimeRef.current?.removeMatrixRow(), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { type: "button", title: messages.removeRow, onMouseDown: (event) => event.preventDefault(), onClick: () => runtimeRef.current?.removeMatrixRow(), children: [
                           "-",
                           messages.row
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", title: messages.addColumn, onMouseDown: (event) => event.preventDefault(), onClick: () => runtimeRef.current?.addMatrixColumn(), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { type: "button", title: messages.addColumn, onMouseDown: (event) => event.preventDefault(), onClick: () => runtimeRef.current?.addMatrixColumn(), children: [
                           "+",
                           messages.column
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", title: messages.removeColumn, onMouseDown: (event) => event.preventDefault(), onClick: () => runtimeRef.current?.removeMatrixColumn(), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { type: "button", title: messages.removeColumn, onMouseDown: (event) => event.preventDefault(), onClick: () => runtimeRef.current?.removeMatrixColumn(), children: [
                           "-",
                           messages.column
                         ] })
@@ -9636,7 +10557,7 @@ ${arabic || currentMessages.empty}`;
                   ]
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "toolbar-group toolbar-settings", role: "group", "aria-label": messages.spaces, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "toolbar-group toolbar-settings", role: "group", "aria-label": messages.spaces, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                 "div",
                 {
                   className: `spacing-command-menu spacing-command-menu--${activeEditorSide}`,
@@ -9647,7 +10568,7 @@ ${arabic || currentMessages.empty}`;
                     }
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       "button",
                       {
                         className: "icon-btn spacing-command-btn",
@@ -9657,13 +10578,13 @@ ${arabic || currentMessages.empty}`;
                         "aria-haspopup": "listbox",
                         "aria-expanded": spacingMenuOpen,
                         onClick: () => setSpacingMenuOpen((open) => !open),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "spacing-command-glyph spacing-command-glyph--positive spacing-command-glyph--level-2", "aria-hidden": "true", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "spacing-command-glyph__bar" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "spacing-command-glyph__arrow", children: activeEditorSide === "arabic" ? "\u2190" : "\u2192" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "spacing-command-glyph spacing-command-glyph--positive spacing-command-glyph--level-2", "aria-hidden": "true", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "spacing-command-glyph__bar" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "spacing-command-glyph__arrow", children: activeEditorSide === "arabic" ? "\u2190" : "\u2192" })
                         ] })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "spacing-command-options", role: "listbox", "aria-label": messages.insertSpace, hidden: !spacingMenuOpen, children: SPACING_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "spacing-command-options", role: "listbox", "aria-label": messages.insertSpace, hidden: !spacingMenuOpen, children: SPACING_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                       "button",
                       {
                         type: "button",
@@ -9677,12 +10598,12 @@ ${arabic || currentMessages.empty}`;
                           focusSurface();
                         },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: `spacing-command-glyph spacing-command-glyph--${command.spacing.direction} spacing-command-glyph--level-${String(command.spacing.level)}`, "aria-hidden": "true", children: [
-                            command.spacing.direction === "negative" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "spacing-command-glyph__arrow", children: spacingArrow(command, activeEditorSide) }) : null,
-                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "spacing-command-glyph__bar" }),
-                            command.spacing.direction === "positive" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "spacing-command-glyph__arrow", children: spacingArrow(command, activeEditorSide) }) : null
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: `spacing-command-glyph spacing-command-glyph--${command.spacing.direction} spacing-command-glyph--level-${String(command.spacing.level)}`, "aria-hidden": "true", children: [
+                            command.spacing.direction === "negative" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "spacing-command-glyph__arrow", children: spacingArrow(command, activeEditorSide) }) : null,
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "spacing-command-glyph__bar" }),
+                            command.spacing.direction === "positive" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "spacing-command-glyph__arrow", children: spacingArrow(command, activeEditorSide) }) : null
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "spacing-command-option__name", children: atomicCommandTitle(command, uiLocale) })
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "spacing-command-option__name", children: atomicCommandTitle(command, uiLocale) })
                         ]
                       },
                       command.id
@@ -9690,8 +10611,8 @@ ${arabic || currentMessages.empty}`;
                   ]
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "toolbar-group toolbar-functions", role: "group", "aria-label": messages.functions, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "toolbar-group toolbar-functions", role: "group", "aria-label": messages.functions, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "div",
                   {
                     className: "function-command-menu",
@@ -9702,7 +10623,7 @@ ${arabic || currentMessages.empty}`;
                       }
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           className: "icon-btn function-command-btn",
@@ -9715,7 +10636,7 @@ ${arabic || currentMessages.empty}`;
                           children: FUNCTION_COMMANDS[0]?.arabicLabel ?? "\u062F"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "function-command-options", role: "listbox", "aria-label": messages.insertFunction, hidden: !functionMenuOpen, children: FUNCTION_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "function-command-options", role: "listbox", "aria-label": messages.insertFunction, hidden: !functionMenuOpen, children: FUNCTION_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           className: "function-command-option",
@@ -9736,7 +10657,7 @@ ${arabic || currentMessages.empty}`;
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "div",
                   {
                     className: "function-command-menu function-command-menu--limits-series",
@@ -9747,7 +10668,7 @@ ${arabic || currentMessages.empty}`;
                       }
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           className: "icon-btn function-command-btn",
@@ -9760,7 +10681,7 @@ ${arabic || currentMessages.empty}`;
                           children: LIMITS_SERIES_COMMANDS[0]?.arabicLabel ?? "\u062D\u062F"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "function-command-options", role: "listbox", "aria-label": messages.insertLimitsSeries, hidden: !limitsSeriesMenuOpen, children: LIMITS_SERIES_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "function-command-options", role: "listbox", "aria-label": messages.insertLimitsSeries, hidden: !limitsSeriesMenuOpen, children: LIMITS_SERIES_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           className: "function-command-option",
@@ -9781,7 +10702,7 @@ ${arabic || currentMessages.empty}`;
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "div",
                   {
                     className: "function-command-menu function-command-menu--function2",
@@ -9792,7 +10713,7 @@ ${arabic || currentMessages.empty}`;
                       }
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           className: "icon-btn function-command-btn",
@@ -9805,7 +10726,7 @@ ${arabic || currentMessages.empty}`;
                           children: FUNCTION2_COMMANDS[0]?.arabicLabel ?? "\u062F"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "function-command-options", role: "listbox", "aria-label": messages.insertAdditionalFunctions, hidden: !function2MenuOpen, children: FUNCTION2_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "function-command-options", role: "listbox", "aria-label": messages.insertAdditionalFunctions, hidden: !function2MenuOpen, children: FUNCTION2_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           className: "function-command-option",
@@ -9826,7 +10747,7 @@ ${arabic || currentMessages.empty}`;
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "div",
                   {
                     className: "function-command-menu function-command-menu--derivative",
@@ -9837,7 +10758,7 @@ ${arabic || currentMessages.empty}`;
                       }
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           className: "icon-btn function-command-btn",
@@ -9850,8 +10771,8 @@ ${arabic || currentMessages.empty}`;
                           children: DERIVATIVE_COMMANDS[0]?.arabicLabel ?? "\u0621"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "function-command-options", role: "listbox", "aria-label": messages.insertDerivative, hidden: !derivativeMenuOpen, children: [
-                        DERIVATIVE_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "function-command-options", role: "listbox", "aria-label": messages.insertDerivative, hidden: !derivativeMenuOpen, children: [
+                        DERIVATIVE_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                           "button",
                           {
                             className: "function-command-option",
@@ -9869,7 +10790,7 @@ ${arabic || currentMessages.empty}`;
                           },
                           command.id
                         )),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                           "button",
                           {
                             className: "function-command-option",
@@ -9886,7 +10807,7 @@ ${arabic || currentMessages.empty}`;
                             children: "\u0621/\u0633"
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                           "button",
                           {
                             className: "function-command-option",
@@ -9907,7 +10828,7 @@ ${arabic || currentMessages.empty}`;
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "div",
                   {
                     className: "function-command-menu function-command-menu--groups",
@@ -9918,7 +10839,7 @@ ${arabic || currentMessages.empty}`;
                       }
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           className: "icon-btn function-command-btn",
@@ -9931,7 +10852,7 @@ ${arabic || currentMessages.empty}`;
                           children: GROUP_COMMANDS[0]?.arabicLabel ?? "\u0645"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "function-command-options", role: "listbox", "aria-label": messages.insertNumberSets, hidden: !groupMenuOpen, children: GROUP_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "function-command-options", role: "listbox", "aria-label": messages.insertNumberSets, hidden: !groupMenuOpen, children: GROUP_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           className: "function-command-option",
@@ -9953,8 +10874,8 @@ ${arabic || currentMessages.empty}`;
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "toolbar-group toolbar-operators", role: "group", "aria-label": messages.operations, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "toolbar-group toolbar-operators", role: "group", "aria-label": messages.operations, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "div",
                   {
                     className: "function-command-menu operator-command-menu",
@@ -9965,7 +10886,7 @@ ${arabic || currentMessages.empty}`;
                       }
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           className: "icon-btn function-command-btn operator-command-btn",
@@ -9978,7 +10899,7 @@ ${arabic || currentMessages.empty}`;
                           children: renderOperatorMenuButtonLabel(OPERATOR_COMMANDS[0], "\u2217")
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "function-command-options operator-command-options", role: "listbox", "aria-label": messages.insertOperation, hidden: !operatorMenuOpen, children: OPERATOR_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "function-command-options operator-command-options", role: "listbox", "aria-label": messages.insertOperation, hidden: !operatorMenuOpen, children: OPERATOR_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           className: "function-command-option operator-command-option",
@@ -9992,14 +10913,14 @@ ${arabic || currentMessages.empty}`;
                             setOperatorMenuOpen(false);
                             focusSurface();
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: shouldMirrorOperatorDisplay(command) ? "operator-command-label operator-command-label--mirror" : "operator-command-label", children: renderOperatorCommandLabel(command) })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: shouldMirrorOperatorDisplay(command) ? "operator-command-label operator-command-label--mirror" : "operator-command-label", children: renderOperatorCommandLabel(command) })
                         },
                         command.id
                       )) })
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "div",
                   {
                     className: "function-command-menu operator-command-menu",
@@ -10010,7 +10931,7 @@ ${arabic || currentMessages.empty}`;
                       }
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           className: "icon-btn function-command-btn operator-command-btn",
@@ -10023,7 +10944,7 @@ ${arabic || currentMessages.empty}`;
                           children: "\u2229"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "function-command-options operator-command-options", role: "listbox", "aria-label": messages.insertRelationsSets, hidden: !operator2MenuOpen, children: OPERATOR2_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "function-command-options operator-command-options", role: "listbox", "aria-label": messages.insertRelationsSets, hidden: !operator2MenuOpen, children: OPERATOR2_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           className: "function-command-option operator-command-option",
@@ -10037,14 +10958,14 @@ ${arabic || currentMessages.empty}`;
                             setOperator2MenuOpen(false);
                             focusSurface();
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: shouldMirrorOperatorDisplay(command) ? "operator-command-label operator-command-label--mirror" : "operator-command-label", children: renderOperatorCommandLabel(command) })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: shouldMirrorOperatorDisplay(command) ? "operator-command-label operator-command-label--mirror" : "operator-command-label", children: renderOperatorCommandLabel(command) })
                         },
                         command.id
                       )) })
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "div",
                   {
                     className: "function-command-menu operator-command-menu",
@@ -10055,7 +10976,7 @@ ${arabic || currentMessages.empty}`;
                       }
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           className: "icon-btn function-command-btn operator-command-btn",
@@ -10068,7 +10989,7 @@ ${arabic || currentMessages.empty}`;
                           children: renderOperatorMenuButtonLabel(OPERATOR3_COMMANDS[0], "\u21D2")
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "function-command-options operator-command-options", role: "listbox", "aria-label": messages.insertArrows, hidden: !operator3MenuOpen, children: OPERATOR3_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "function-command-options operator-command-options", role: "listbox", "aria-label": messages.insertArrows, hidden: !operator3MenuOpen, children: OPERATOR3_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           className: "function-command-option operator-command-option",
@@ -10082,14 +11003,14 @@ ${arabic || currentMessages.empty}`;
                             setOperator3MenuOpen(false);
                             focusSurface();
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: shouldMirrorOperatorDisplay(command) ? "operator-command-label operator-command-label--mirror" : "operator-command-label", children: renderOperatorCommandLabel(command) })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: shouldMirrorOperatorDisplay(command) ? "operator-command-label operator-command-label--mirror" : "operator-command-label", children: renderOperatorCommandLabel(command) })
                         },
                         command.id
                       )) })
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "div",
                   {
                     className: "function-command-menu operator-command-menu",
@@ -10100,7 +11021,7 @@ ${arabic || currentMessages.empty}`;
                       }
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           className: "icon-btn function-command-btn operator-command-btn",
@@ -10113,7 +11034,7 @@ ${arabic || currentMessages.empty}`;
                           children: renderOperatorMenuButtonLabel(DOT_COMMANDS[0], "\u2026")
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "function-command-options operator-command-options", role: "listbox", "aria-label": messages.insertDots, hidden: !dotMenuOpen, children: DOT_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "function-command-options operator-command-options", role: "listbox", "aria-label": messages.insertDots, hidden: !dotMenuOpen, children: DOT_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           className: "function-command-option operator-command-option",
@@ -10127,14 +11048,14 @@ ${arabic || currentMessages.empty}`;
                             setDotMenuOpen(false);
                             focusSurface();
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: shouldMirrorOperatorDisplay(command) ? "operator-command-label operator-command-label--mirror" : "operator-command-label", children: renderOperatorCommandLabel(command) })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: shouldMirrorOperatorDisplay(command) ? "operator-command-label operator-command-label--mirror" : "operator-command-label", children: renderOperatorCommandLabel(command) })
                         },
                         command.id
                       )) })
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "div",
                   {
                     className: "function-command-menu operator-command-menu",
@@ -10145,7 +11066,7 @@ ${arabic || currentMessages.empty}`;
                       }
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           className: "icon-btn function-command-btn operator-command-btn",
@@ -10158,7 +11079,7 @@ ${arabic || currentMessages.empty}`;
                           children: renderOperatorMenuButtonLabel(INTEGRAL_COMMANDS[0], "\u222B")
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "function-command-options operator-command-options", role: "listbox", "aria-label": messages.insertIntegrals, hidden: !integralMenuOpen, children: INTEGRAL_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "function-command-options operator-command-options", role: "listbox", "aria-label": messages.insertIntegrals, hidden: !integralMenuOpen, children: INTEGRAL_COMMANDS.map((command) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           className: "function-command-option operator-command-option",
@@ -10172,7 +11093,7 @@ ${arabic || currentMessages.empty}`;
                             setIntegralMenuOpen(false);
                             focusSurface();
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: shouldMirrorOperatorDisplay(command) ? "operator-command-label operator-command-label--mirror" : "operator-command-label", children: renderOperatorCommandLabel(command) })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: shouldMirrorOperatorDisplay(command) ? "operator-command-label operator-command-label--mirror" : "operator-command-label", children: renderOperatorCommandLabel(command) })
                         },
                         command.id
                       )) })
@@ -10180,28 +11101,28 @@ ${arabic || currentMessages.empty}`;
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "toolbar-group toolbar-scripts", role: "group", "aria-label": messages.scripts, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { className: "icon-btn script-icon-btn", type: "button", title: messages.addSuperscript, "aria-label": messages.addSuperscript, onClick: () => runtimeRef.current?.addSup(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "toolbar-script-icon toolbar-script-icon--sup", "aria-hidden": "true", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "\u0646" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "\u0633" })
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "toolbar-group toolbar-scripts", role: "group", "aria-label": messages.scripts, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "icon-btn script-icon-btn", type: "button", title: messages.addSuperscript, "aria-label": messages.addSuperscript, onClick: () => runtimeRef.current?.addSup(), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "toolbar-script-icon toolbar-script-icon--sup", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "\u0646" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "\u0633" })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { className: "icon-btn script-icon-btn", type: "button", title: messages.addSubscript, "aria-label": messages.addSubscript, onClick: () => runtimeRef.current?.addSub(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "toolbar-script-icon toolbar-script-icon--sub", "aria-hidden": "true", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "\u0646" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "\u0633" })
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "icon-btn script-icon-btn", type: "button", title: messages.addSubscript, "aria-label": messages.addSubscript, onClick: () => runtimeRef.current?.addSub(), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "toolbar-script-icon toolbar-script-icon--sub", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "\u0646" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "\u0633" })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { className: "icon-btn script-icon-btn remove-script-btn", type: "button", title: messages.removeSuperscript, "aria-label": messages.removeSuperscript, onClick: () => runtimeRef.current?.removeSup(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "toolbar-remove-script-icon toolbar-remove-script-icon--sup", "aria-hidden": "true", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "\u0646" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "\xD7" })
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "icon-btn script-icon-btn remove-script-btn", type: "button", title: messages.removeSuperscript, "aria-label": messages.removeSuperscript, onClick: () => runtimeRef.current?.removeSup(), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "toolbar-remove-script-icon toolbar-remove-script-icon--sup", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "\u0646" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "\xD7" })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { className: "icon-btn script-icon-btn remove-script-btn", type: "button", title: messages.removeSubscript, "aria-label": messages.removeSubscript, onClick: () => runtimeRef.current?.removeSub(), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "toolbar-remove-script-icon toolbar-remove-script-icon--sub", "aria-hidden": "true", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "\u0646" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "\xD7" })
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "icon-btn script-icon-btn remove-script-btn", type: "button", title: messages.removeSubscript, "aria-label": messages.removeSubscript, onClick: () => runtimeRef.current?.removeSub(), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "toolbar-remove-script-icon toolbar-remove-script-icon--sub", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "\u0646" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "\xD7" })
                 ] }) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "toolbar-group toolbar-settings", role: "group", "aria-label": messages.inputStyles, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { className: "icon-btn delete-node-btn", type: "button", title: messages.deleteSelectedStructure, "aria-label": messages.deleteSelectedStructure, onClick: () => runtimeRef.current?.deleteStructure(), children: "\xD7" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { ref: splitTypingBtnRef, id: "toggle-split-leaf-typing", className: "icon-btn ligature-btn", type: "button", title: messages.toggleLetterMerging, "aria-label": messages.toggleLetterMerging, onClick: () => runtimeRef.current?.toggleSplitLeafTyping(), children: "\u0633\u0635\u0639" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "toolbar-group toolbar-settings", role: "group", "aria-label": messages.inputStyles, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "icon-btn delete-node-btn", type: "button", title: messages.deleteSelectedStructure, "aria-label": messages.deleteSelectedStructure, onClick: () => runtimeRef.current?.deleteStructure(), children: "\xD7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { ref: splitTypingBtnRef, id: "toggle-split-leaf-typing", className: "icon-btn ligature-btn", type: "button", title: messages.toggleLetterMerging, "aria-label": messages.toggleLetterMerging, onClick: () => runtimeRef.current?.toggleSplitLeafTyping(), children: "\u0633\u0635\u0639" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "div",
                   {
                     className: "character-font-menu",
@@ -10212,7 +11133,7 @@ ${arabic || currentMessages.empty}`;
                       }
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           ref: characterFontBtnRef,
@@ -10227,7 +11148,7 @@ ${arabic || currentMessages.empty}`;
                           children: characterFontOption(selectedCharacterFont).label
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "character-font-options", role: "listbox", "aria-label": messages.chooseWritingFont, hidden: !characterFontMenuOpen, children: CHARACTER_FONT_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "character-font-options", role: "listbox", "aria-label": messages.chooseWritingFont, hidden: !characterFontMenuOpen, children: CHARACTER_FONT_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           type: "button",
@@ -10249,7 +11170,7 @@ ${arabic || currentMessages.empty}`;
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "div",
                   {
                     className: "digit-form-menu",
@@ -10260,7 +11181,7 @@ ${arabic || currentMessages.empty}`;
                       }
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           ref: digitFormBtnRef,
@@ -10272,10 +11193,10 @@ ${arabic || currentMessages.empty}`;
                           "aria-haspopup": "listbox",
                           "aria-expanded": digitMenuOpen,
                           onClick: () => setDigitMenuOpen((open) => !open),
-                          children: digitFormLabel(selectedDigitForm2)
+                          children: digitFormLabel2(selectedDigitForm2)
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "digit-form-options", role: "listbox", "aria-label": messages.chooseDigitForm, hidden: !digitMenuOpen, children: DIGIT_FORM_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "digit-form-options", role: "listbox", "aria-label": messages.chooseDigitForm, hidden: !digitMenuOpen, children: DIGIT_FORM_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "button",
                         {
                           type: "button",
@@ -10299,7 +11220,7 @@ ${arabic || currentMessages.empty}`;
                 )
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "div",
               {
                 ref: surfaceRef,
@@ -10309,18 +11230,18 @@ ${arabic || currentMessages.empty}`;
                 "aria-label": messages.equationEditor
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: renderErrorRef, className: "error", hidden: true })
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: renderErrorRef, className: "error", hidden: true })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("section", { className: "panel panel-preview", "aria-label": messages.renderPreview, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: mathOutputRef, className: "preview-box" }) }),
-          debug ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { className: "panel", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dev-strip", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "dev-badge", children: messages.development }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: latexLinesRef, className: "ascii" }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: passivePreviewRef, className: "passive-preview-text" })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("section", { className: "panel panel-preview", "aria-label": messages.renderPreview, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: mathOutputRef, className: "preview-box" }) }),
+          debug ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { className: "panel", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "dev-strip", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "dev-badge", children: messages.development }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: latexLinesRef, className: "ascii" }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: passivePreviewRef, className: "passive-preview-text" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { marginTop: 12 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "debug-head", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { marginTop: 12 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "debug-head", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "button",
                   {
                     type: "button",
@@ -10340,7 +11261,7 @@ ${arabic || currentMessages.empty}`;
                     children: debugBodyHidden ? messages.showDebugLog : messages.hideDebugLog
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "button",
                   {
                     type: "button",
@@ -10355,7 +11276,7 @@ ${arabic || currentMessages.empty}`;
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: debugLogRef, className: "debug-log" })
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: debugLogRef, className: "debug-log" })
             ] })
           ] }) : null
         ] })
@@ -10366,7 +11287,7 @@ ${arabic || currentMessages.empty}`;
 ButexEditor.displayName = "ButexEditor";
 
 // src/react-document2/EquationDrawer.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function EquationDrawer({
   session,
   reason,
@@ -10380,8 +11301,8 @@ function EquationDrawer({
   onDelete
 }) {
   const messages = document2Messages(uiLocale);
-  const latestSession = (0, import_react5.useRef)(session);
-  (0, import_react5.useEffect)(() => {
+  const latestSession = (0, import_react7.useRef)(session);
+  (0, import_react7.useEffect)(() => {
     const onKeyDown = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -10390,8 +11311,8 @@ function EquationDrawer({
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "butex-document2-widget__equation-modal", role: "presentation", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "butex-document2-widget__equation-modal", role: "presentation", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "button",
       {
         type: "button",
@@ -10400,7 +11321,7 @@ function EquationDrawer({
         onClick: onClose
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "div",
       {
         className: "butex-document2-widget__equation-modal-panel",
@@ -10410,22 +11331,22 @@ function EquationDrawer({
         dir: uiLocaleDirection(uiLocale),
         lang: uiLocale,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "butex-document2-widget__row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { id: "butex-document2-equation-modal-title", children: messages.equationEditorTitle }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", onClick: onClose, children: messages.close })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "butex-document2-widget__row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { id: "butex-document2-equation-modal-title", children: messages.equationEditorTitle }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", onClick: onClose, children: messages.close })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "butex-document2-widget__row", role: "group", "aria-label": messages.equationType, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { type: "button", "aria-pressed": mathMode === "inline", onClick: () => onMathModeChange("inline"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "butex-document2-widget__row", role: "group", "aria-label": messages.equationType, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { type: "button", "aria-pressed": mathMode === "inline", onClick: () => onMathModeChange("inline"), children: [
               messages.inline,
               " ($)"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { type: "button", "aria-pressed": mathMode === "display", onClick: () => onMathModeChange("display"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { type: "button", "aria-pressed": mathMode === "display", onClick: () => onMathModeChange("display"), children: [
               messages.displayed,
               " (\\\\[)"
             ] })
           ] }),
-          reason ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "butex-document2-widget__error", children: uiLocale === "en" ? messages.equationUnavailable : reason }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          reason ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "butex-document2-widget__error", children: uiLocale === "en" ? messages.equationUnavailable : reason }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             ButexEditor,
             {
               debug: false,
@@ -10437,9 +11358,9 @@ function EquationDrawer({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "butex-document2-widget__row", children: [
-            canDelete && onDelete ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: "butex-document2-widget__button--danger", onClick: onDelete, children: messages.deleteEquation }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", onClick: () => onSave({ ...latestSession.current, activeSide: equationSide }), children: messages.saveEquation })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "butex-document2-widget__row", children: [
+            canDelete && onDelete ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: "butex-document2-widget__button--danger", onClick: onDelete, children: messages.deleteEquation }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", onClick: () => onSave({ ...latestSession.current, activeSide: equationSide }), children: messages.saveEquation })
           ] })
         ]
       }
@@ -10447,6 +11368,108 @@ function EquationDrawer({
   ] });
 }
 
+// src/react-document2/ReferencesPanel.tsx
+var import_react8 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var EMPTY_DRAFT = { key: "", authors: "", title: "", year: "", url: "", venue: "" };
+function ReferencesPanel({
+  open,
+  references,
+  uiLocale = "ar",
+  onClose,
+  onAdd,
+  onUpdate,
+  onRemove,
+  onMove
+}) {
+  const messages = document2Messages(uiLocale);
+  const [draft, setDraft] = (0, import_react8.useState)(EMPTY_DRAFT);
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "butex-document2-widget__refs-backdrop", role: "presentation", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "butex-document2-widget__refs-panel", role: "dialog", "aria-label": messages.referencesTitle, onClick: (event) => event.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("header", { className: "butex-document2-widget__refs-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("strong", { children: messages.referencesTitle }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.close, "aria-label": messages.close, onClick: onClose, children: "\xD7" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "butex-document2-widget__refs-add", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { children: messages.addReference }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "butex-document2-widget__refs-grid", children: [
+        ["key", messages.referenceKey],
+        ["authors", messages.referenceAuthors],
+        ["title", messages.referenceTitle],
+        ["year", messages.referenceYear],
+        ["venue", messages.referenceVenue],
+        ["url", messages.referenceUrl]
+      ].map(([field, label]) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "butex-document2-widget__refs-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "input",
+          {
+            value: draft[field] ?? "",
+            onChange: (event) => setDraft((current) => ({ ...current, [field]: event.currentTarget.value }))
+          }
+        )
+      ] }, field)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "butex-document2-widget__primary-btn",
+          disabled: !draft.key?.trim(),
+          onClick: () => {
+            onAdd(draft);
+            setDraft(EMPTY_DRAFT);
+          },
+          children: messages.addReference
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: "butex-document2-widget__refs-list", children: references.map((reference, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("li", { className: "butex-document2-widget__refs-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "butex-document2-widget__refs-item-head", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("strong", { children: [
+          "[",
+          index + 1,
+          "] ",
+          reference.key
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "butex-document2-widget__refs-item-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", title: messages.moveUp, "aria-label": messages.moveUp, disabled: index === 0, onClick: () => onMove(reference.id, -1), children: "\u2191" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "button",
+            {
+              type: "button",
+              title: messages.moveDown,
+              "aria-label": messages.moveDown,
+              disabled: index === references.length - 1,
+              onClick: () => onMove(reference.id, 1),
+              children: "\u2193"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", title: messages.deleteReference, "aria-label": messages.deleteReference, onClick: () => onRemove(reference.id), children: "\xD7" })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "butex-document2-widget__refs-grid", children: [
+        ["key", messages.referenceKey],
+        ["authors", messages.referenceAuthors],
+        ["title", messages.referenceTitle],
+        ["year", messages.referenceYear],
+        ["venue", messages.referenceVenue],
+        ["url", messages.referenceUrl]
+      ].map(([field, label]) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "butex-document2-widget__refs-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "input",
+          {
+            value: reference[field],
+            onChange: (event) => onUpdate(reference.id, { [field]: event.currentTarget.value })
+          }
+        )
+      ] }, field)) })
+    ] }, reference.id)) })
+  ] }) });
+}
+
 // src/react-document2/editorFocus.ts
 function createEmptyDocument2EditorFocus() {
   return { blockId: null, fieldId: null, textTokenId: null, caretOffset: 0 };
@@ -10953,24 +11976,11 @@ var DOCUMENT2_WIDGET_CSS = `
   grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
 }
 
-.butex-document2-widget__layout--editor-open.butex-document2-widget__layout--preview-closed {
-  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
-}
-
-.butex-document2-widget__layout--editor-closed.butex-document2-widget__layout--preview-open {
-  grid-template-columns: minmax(0, 0fr) minmax(0, 1fr);
-}
-
+/* One visible panel: a single track so the panel fills the widget (previewOnly / hide editor / hide preview). */
+.butex-document2-widget__layout--editor-open.butex-document2-widget__layout--preview-closed,
+.butex-document2-widget__layout--editor-closed.butex-document2-widget__layout--preview-open,
 .butex-document2-widget__layout--editor-closed.butex-document2-widget__layout--preview-closed {
-  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
-}
-
-.butex-document2-widget__layout--preview-open {
-  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
-}
-
-.butex-document2-widget__layout--preview-closed {
-  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
+  grid-template-columns: minmax(0, 1fr);
 }
 
 .butex-document2-widget__editor-panel,
@@ -10988,24 +11998,16 @@ var DOCUMENT2_WIDGET_CSS = `
     box-shadow 0.22s ease;
 }
 
-.butex-document2-widget__layout--editor-closed .butex-document2-widget__editor-panel {
-  border-width: 0;
-  box-shadow: none;
-  opacity: 0;
-  padding-inline: 0;
-  pointer-events: none;
-  transform: translateX(10px);
-  visibility: hidden;
+/* When previewOnly (or display:none) leaves a lone panel, span the full grid. */
+.butex-document2-widget__editor-panel:only-child,
+.butex-document2-widget__preview-panel:only-child {
+  grid-column: 1 / -1;
+  width: 100%;
 }
 
+.butex-document2-widget__layout--editor-closed .butex-document2-widget__editor-panel,
 .butex-document2-widget__layout--preview-closed .butex-document2-widget__preview-panel {
-  border-width: 0;
-  box-shadow: none;
-  opacity: 0;
-  padding-inline: 0;
-  pointer-events: none;
-  transform: translateX(-10px);
-  visibility: hidden;
+  display: none;
 }
 
 .butex-document2-widget__inline-field {
@@ -11179,6 +12181,13 @@ var DOCUMENT2_WIDGET_CSS = `
   vertical-align: middle;
 }
 
+/* Guard against host CSS resets (e.g. Tailwind Preflight's \`svg { display: block }\`).
+ * MathJax v4 inline line-breaking emits an equation as several sibling <svg> chunks;
+ * a block-level svg reset stacks them vertically inside the island. */
+.butex-document2-widget mjx-container svg {
+  display: inline;
+}
+
 .butex-document2-widget__math-chip .butex-document2-widget__math-island {
   margin: 0;
 }
@@ -11340,18 +12349,13 @@ var DOCUMENT2_WIDGET_CSS = `
 }
 
 @media (max-width: 900px) {
-  .butex-document2-widget__layout {
-    grid-template-columns: 1fr;
-  }
-
-  .butex-document2-widget__layout--preview-closed .butex-document2-widget__preview-panel {
-    display: none;
-  }
-
-  .butex-document2-widget__layout--editor-closed .butex-document2-widget__editor-panel {
-    display: none;
+  .butex-document2-widget__layout,
+  .butex-document2-widget__layout--editor-open.butex-document2-widget__layout--preview-open,
+  .butex-document2-widget__layout--editor-open.butex-document2-widget__layout--preview-closed,
+  .butex-document2-widget__layout--editor-closed.butex-document2-widget__layout--preview-open,
+  .butex-document2-widget__layout--editor-closed.butex-document2-widget__layout--preview-closed {
+    grid-template-columns: minmax(0, 1fr);
   }
-
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -11361,6 +12365,223 @@ var DOCUMENT2_WIDGET_CSS = `
     transition: none;
   }
 }
+
+.butex-document2-widget__cite-chip-wrap {
+  align-items: center;
+  display: inline-flex;
+  gap: 2px;
+  margin-inline: 2px;
+  max-width: 100%;
+  vertical-align: baseline;
+}
+
+.butex-document2-widget__cite-chip {
+  background: color-mix(in srgb, var(--butex-document2-accent) 8%, var(--butex-document2-panel));
+  border: 1.5px solid color-mix(in srgb, var(--butex-document2-accent) 45%, var(--butex-document2-border));
+  border-radius: 6px;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.3;
+  min-height: 28px;
+  padding: 2px 8px;
+}
+
+.butex-document2-widget__cite-chip[data-editable="false"] {
+  border-style: dashed;
+  cursor: default;
+}
+
+.butex-document2-widget__cite-chip:hover,
+.butex-document2-widget__cite-chip:focus-visible {
+  background: color-mix(in srgb, var(--butex-document2-accent) 14%, var(--butex-document2-panel));
+  border-color: var(--butex-document2-accent);
+}
+
+.butex-document2-widget__cite-chip-delete {
+  background: transparent;
+  border: none;
+  color: var(--butex-document2-muted);
+  cursor: pointer;
+  font: inherit;
+  line-height: 1;
+  padding: 0 4px;
+}
+
+.butex-document2-widget__preview-cite {
+  color: inherit;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.butex-document2-widget__preview-bibliography,
+.butex-document2-widget__bibliography-editor {
+  display: grid;
+  gap: 0.5rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.butex-document2-widget__preview-bibliography li,
+.butex-document2-widget__bibliography-editor li {
+  display: grid;
+  gap: 0.25rem;
+  grid-template-columns: auto 1fr;
+}
+
+.butex-document2-widget__preview-bib-number {
+  font-variant-numeric: tabular-nums;
+}
+
+.butex-document2-widget__block--bibliography {
+  border-color: color-mix(in srgb, var(--butex-document2-accent) 35%, var(--butex-document2-border));
+}
+
+.butex-document2-widget__digit-form-menu {
+  position: relative;
+}
+
+.butex-document2-widget__digit-form-options {
+  background: var(--butex-document2-panel);
+  border: 1px solid var(--butex-document2-border);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px color-mix(in srgb, #000 16%, transparent);
+  display: grid;
+  gap: 2px;
+  inset-inline-start: 0;
+  margin-top: 4px;
+  padding: 4px;
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+}
+
+.butex-document2-widget__digit-form-option {
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding: 6px 10px;
+  text-align: start;
+}
+
+.butex-document2-widget__digit-form-option[aria-selected="true"],
+.butex-document2-widget__digit-form-option:hover {
+  background: color-mix(in srgb, var(--butex-document2-accent) 12%, var(--butex-document2-panel));
+}
+
+.butex-document2-widget__cite-picker-backdrop,
+.butex-document2-widget__refs-backdrop {
+  align-items: center;
+  background: color-mix(in srgb, #000 35%, transparent);
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  padding: 1rem;
+  position: fixed;
+  z-index: 40;
+}
+
+.butex-document2-widget__cite-picker,
+.butex-document2-widget__refs-panel {
+  background: var(--butex-document2-panel);
+  border: 1px solid var(--butex-document2-border);
+  border-radius: 12px;
+  box-shadow: 0 16px 40px color-mix(in srgb, #000 22%, transparent);
+  display: grid;
+  gap: 0.75rem;
+  max-height: min(80vh, 640px);
+  max-width: 560px;
+  overflow: auto;
+  padding: 1rem;
+  width: min(100%, 560px);
+}
+
+.butex-document2-widget__cite-picker-header,
+.butex-document2-widget__refs-header,
+.butex-document2-widget__cite-picker-footer,
+.butex-document2-widget__refs-item-head {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+}
+
+.butex-document2-widget__cite-picker-list,
+.butex-document2-widget__refs-list {
+  display: grid;
+  gap: 0.5rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.butex-document2-widget__cite-picker-item,
+.butex-document2-widget__refs-field {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.butex-document2-widget__cite-picker-item {
+  align-items: start;
+  grid-template-columns: auto 1fr;
+}
+
+.butex-document2-widget__cite-picker-meta,
+.butex-document2-widget__cite-picker-empty {
+  color: var(--butex-document2-muted);
+  display: block;
+  font-size: 0.92em;
+}
+
+.butex-document2-widget__refs-grid {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+}
+
+.butex-document2-widget__refs-field input {
+  background: var(--butex-document2-input-bg, var(--butex-document2-panel));
+  border: 1px solid var(--butex-document2-border);
+  border-radius: 6px;
+  color: inherit;
+  font: inherit;
+  padding: 0.4rem 0.55rem;
+  width: 100%;
+}
+
+.butex-document2-widget__refs-item {
+  border: 1px solid var(--butex-document2-border);
+  border-radius: 10px;
+  display: grid;
+  gap: 0.5rem;
+  padding: 0.75rem;
+}
+
+.butex-document2-widget__refs-item-actions {
+  display: inline-flex;
+  gap: 0.25rem;
+}
+
+.butex-document2-widget__primary-btn {
+  background: var(--butex-document2-accent);
+  border: none;
+  border-radius: 8px;
+  color: #fff;
+  cursor: pointer;
+  font: inherit;
+  padding: 0.45rem 0.8rem;
+}
+
+.butex-document2-widget__primary-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
 `;
 function injectBuTeXDocument2Styles(doc) {
   const d = doc ?? (typeof document !== "undefined" ? document : void 0);
@@ -11378,7 +12599,7 @@ function injectBuTeXDocument2Styles(doc) {
 }
 
 // src/react-document2/ButexDocumentEditor2.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function mathDelimiters(mode) {
   return mode === "inline" ? { opening: "$", closing: "$" } : { opening: "\\[", closing: "\\]" };
 }
@@ -11559,32 +12780,42 @@ function ButexDocumentEditor2({
   previewOnly = false,
   uiLocale = "ar",
   mathOutput = "svg",
+  digitForm: digitFormProp,
+  onDigitFormChange,
+  resolveImageUrl,
   onDocumentChange,
   onLatexChange
 }) {
   const messages = document2Messages(uiLocale);
-  const initialState = (0, import_react6.useMemo)(() => resolveInitialDocument2(initialDocument, uiLocale), [initialDocument]);
-  const [documentNode, setDocumentNode] = (0, import_react6.useState)(initialState.document);
-  const [error, setError] = (0, import_react6.useState)(initialState.error);
-  const [editorOpen, setEditorOpen] = (0, import_react6.useState)(true);
-  const [previewOpen, setPreviewOpen] = (0, import_react6.useState)(true);
-  const [selectedMath, setSelectedMath] = (0, import_react6.useState)(null);
-  const [editorFocus, setEditorFocus] = (0, import_react6.useState)(createEmptyDocument2EditorFocus());
-  const [collapsedBlockIds, setCollapsedBlockIds] = (0, import_react6.useState)(() => /* @__PURE__ */ new Set());
-  const [historyTick, setHistoryTick] = (0, import_react6.useState)(0);
-  const historyRef = (0, import_react6.useRef)(createDocument2History());
-  const documentRef = (0, import_react6.useRef)(documentNode);
-  const textSnapshotArmedRef = (0, import_react6.useRef)(false);
-  const textDebounceRef = (0, import_react6.useRef)(null);
-  const widgetRef = (0, import_react6.useRef)(null);
-  const pendingFocusRef = (0, import_react6.useRef)(null);
+  const initialState = (0, import_react9.useMemo)(() => resolveInitialDocument2(initialDocument, uiLocale), [initialDocument]);
+  const [documentNode, setDocumentNode] = (0, import_react9.useState)(initialState.document);
+  const [error, setError] = (0, import_react9.useState)(initialState.error);
+  const [editorOpen, setEditorOpen] = (0, import_react9.useState)(true);
+  const [previewOpen, setPreviewOpen] = (0, import_react9.useState)(true);
+  const [selectedMath, setSelectedMath] = (0, import_react9.useState)(null);
+  const [citePicker, setCitePicker] = (0, import_react9.useState)(null);
+  const [referencesOpen, setReferencesOpen] = (0, import_react9.useState)(false);
+  const [digitFormState, setDigitFormState] = (0, import_react9.useState)(null);
+  const [editorFocus, setEditorFocus] = (0, import_react9.useState)(createEmptyDocument2EditorFocus());
+  const [collapsedBlockIds, setCollapsedBlockIds] = (0, import_react9.useState)(() => /* @__PURE__ */ new Set());
+  const [historyTick, setHistoryTick] = (0, import_react9.useState)(0);
+  const digitForm = digitFormProp ?? digitFormState ?? (documentDirection === "rtl" ? "arabicIndic" : "western");
+  const historyRef = (0, import_react9.useRef)(createDocument2History());
+  const documentRef = (0, import_react9.useRef)(documentNode);
+  const textSnapshotArmedRef = (0, import_react9.useRef)(false);
+  const textDebounceRef = (0, import_react9.useRef)(null);
+  const widgetRef = (0, import_react9.useRef)(null);
+  const pendingFocusRef = (0, import_react9.useRef)(null);
   documentRef.current = documentNode;
   const latex = document2Latex(documentNode);
-  const preview = (0, import_react6.useMemo)(
-    () => document2Preview(documentNode, mathOutput, equationSide),
-    [documentNode, equationSide, mathOutput]
+  const preview = (0, import_react9.useMemo)(
+    () => document2Preview(documentNode, mathOutput, equationSide, {
+      documentDirection,
+      digitForm
+    }),
+    [documentNode, documentDirection, digitForm, equationSide, mathOutput]
   );
-  const debugEnabled = (0, import_react6.useMemo)(() => {
+  const debugEnabled = (0, import_react9.useMemo)(() => {
     if (debug) {
       return true;
     }
@@ -11593,17 +12824,17 @@ function ButexDocumentEditor2({
     }
     return new URLSearchParams(window.location.search).get("debug") === "1";
   }, [debug]);
-  const canUndo = (0, import_react6.useMemo)(() => document2HistoryCanUndo(historyRef.current), [historyTick, documentNode]);
-  const canRedo = (0, import_react6.useMemo)(() => document2HistoryCanRedo(historyRef.current), [historyTick, documentNode]);
-  (0, import_react6.useEffect)(() => {
+  const canUndo = (0, import_react9.useMemo)(() => document2HistoryCanUndo(historyRef.current), [historyTick, documentNode]);
+  const canRedo = (0, import_react9.useMemo)(() => document2HistoryCanRedo(historyRef.current), [historyTick, documentNode]);
+  (0, import_react9.useEffect)(() => {
     injectBuTeXDocument2Styles();
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!editableEquations || previewOnly) {
       setSelectedMath(null);
     }
   }, [editableEquations, previewOnly]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const next = resolveInitialDocument2(initialDocument, uiLocale);
     setDocumentNode(next.document);
     setError(next.error);
@@ -11612,13 +12843,13 @@ function ButexDocumentEditor2({
     historyRef.current = createDocument2History();
     setHistoryTick((tick) => tick + 1);
   }, [initialDocument]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     onDocumentChange?.(documentNode);
   }, [documentNode, onDocumentChange]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     onLatexChange?.(latex);
   }, [latex, onLatexChange]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const pending = pendingFocusRef.current;
     const root = widgetRef.current;
     if (!pending || !root) {
@@ -11633,6 +12864,13 @@ function ButexDocumentEditor2({
         mathButton?.focus();
         return;
       }
+      if (pending.kind === "cite") {
+        const citeButton = Array.from(root.querySelectorAll("[data-cite-token-id]")).find(
+          (button) => button.dataset.citeTokenId === pending.tokenId
+        );
+        citeButton?.focus();
+        return;
+      }
       const textarea = Array.from(root.querySelectorAll("textarea[data-field-id][data-text-token-id]")).find(
         (element) => element.dataset.fieldId === pending.fieldId && element.dataset.textTokenId === pending.textTokenId
       );
@@ -11644,10 +12882,10 @@ function ButexDocumentEditor2({
       textarea.setSelectionRange(safeOffset, safeOffset);
     });
   }, [documentNode]);
-  const bumpHistoryUi = (0, import_react6.useCallback)(() => {
+  const bumpHistoryUi = (0, import_react9.useCallback)(() => {
     setHistoryTick((tick) => tick + 1);
   }, []);
-  const applyDocument = (0, import_react6.useCallback)(
+  const applyDocument = (0, import_react9.useCallback)(
     (next, mode = "immediate") => {
       if (mode === "immediate") {
         pushDocument2Snapshot(historyRef.current, documentRef.current);
@@ -11669,7 +12907,7 @@ function ButexDocumentEditor2({
     },
     [bumpHistoryUi]
   );
-  const afterBlockId = (0, import_react6.useCallback)(() => resolveInsertAfterBlockId(documentRef.current, editorFocus), [editorFocus]);
+  const afterBlockId = (0, import_react9.useCallback)(() => resolveInsertAfterBlockId(documentRef.current, editorFocus), [editorFocus]);
   function undoDocument() {
     const restored = restoreDocument2Undo(historyRef.current, documentRef.current);
     if (!restored) {
@@ -11718,7 +12956,7 @@ function ButexDocumentEditor2({
   function openAllBlocks() {
     setCollapsedBlockIds(/* @__PURE__ */ new Set());
   }
-  (0, import_react6.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const root = widgetRef.current;
     if (!root) {
       return;
@@ -11891,24 +13129,70 @@ function ButexDocumentEditor2({
     pendingFocusRef.current = focusAfterDeletedMath(current, next, tokenId);
     applyDocument(next, "immediate");
   }
+  function openCitePickerForInsert() {
+    const target = resolveInsertField(documentRef.current, editorFocus);
+    setCitePicker({
+      tokenId: null,
+      fieldId: target?.fieldId ?? null,
+      textTokenId: target?.textTokenId ?? editorFocus.textTokenId,
+      caretOffset: target?.caretOffset ?? editorFocus.caretOffset,
+      keys: []
+    });
+  }
+  function openCite(token) {
+    setCitePicker({
+      tokenId: token.id,
+      fieldId: null,
+      textTokenId: null,
+      caretOffset: 0,
+      keys: [...token.keys]
+    });
+  }
+  function confirmCiteKeys(keys) {
+    if (!citePicker || keys.length === 0) {
+      setCitePicker(null);
+      return;
+    }
+    if (citePicker.tokenId) {
+      applyDocument(updateCiteTokenKeys(documentRef.current, citePicker.tokenId, keys), "immediate");
+      pendingFocusRef.current = { kind: "cite", tokenId: citePicker.tokenId };
+      setCitePicker(null);
+      return;
+    }
+    const target = resolveInsertField(documentRef.current, editorFocus);
+    const fieldId = citePicker.fieldId ?? target?.fieldId;
+    if (!fieldId) {
+      setCitePicker(null);
+      return;
+    }
+    const textTokenId = citePicker.textTokenId ?? target?.textTokenId ?? null;
+    const caretOffset = citePicker.caretOffset ?? target?.caretOffset ?? 0;
+    const next = insertCiteTokenAtCaret(documentRef.current, fieldId, textTokenId, caretOffset, keys);
+    applyDocument(next, "immediate");
+    setCitePicker(null);
+  }
+  function deleteCiteToken(tokenId) {
+    applyDocument(removeCiteTokenById(documentRef.current, tokenId), "immediate");
+  }
   const showEditorPanel = !previewOnly && editorOpen;
   const showPreviewPanel = previewOnly || previewOpen;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       ref: widgetRef,
       className: ["butex-document2-widget", className].filter(Boolean).join(" "),
       dir: uiLocaleDirection(uiLocale),
       lang: uiLocale,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "butex-document2-widget__shell", children: [
-        !previewOnly ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "butex-document2-widget__toolbar", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "butex-document2-widget__shell", children: [
+        !previewOnly ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "butex-document2-widget__toolbar", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             DocumentInsertToolbar,
             {
               canUndo,
               canRedo,
               editableEquations,
               uiLocale,
+              digitForm,
               onUndo: undoDocument,
               onRedo: redoDocument,
               onAddSection: () => applyDocument(addDocument2TextBlock(documentRef.current, "\\section", afterBlockId()), "immediate"),
@@ -11920,45 +13204,57 @@ function ButexDocumentEditor2({
               onAddTable: (rowCount, colCount) => applyDocument(addDocument2TableBlock(documentRef.current, "l".repeat(colCount), rowCount, colCount, afterBlockId()), "immediate"),
               onAddList: () => applyDocument(addDocument2ListBlock(documentRef.current, false, afterBlockId()), "immediate"),
               onAddEnumerate: () => applyDocument(addDocument2ListBlock(documentRef.current, true, afterBlockId()), "immediate"),
-              onAddFigure: () => applyDocument(addDocument2ImageBlock(documentRef.current, "", afterBlockId()), "immediate")
+              onAddFigure: () => applyDocument(addDocument2ImageBlock(documentRef.current, "", afterBlockId()), "immediate"),
+              onInsertCitation: openCitePickerForInsert,
+              onInsertBibliography: () => applyDocument(ensureDocument2BibliographyBlock(documentRef.current, afterBlockId()), "immediate"),
+              onManageReferences: () => setReferencesOpen(true),
+              onDigitFormChange: (next) => {
+                setDigitFormState(next);
+                onDigitFormChange?.(next);
+              }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.panels, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", "aria-pressed": editorOpen, onClick: toggleEditorPanel, children: editorOpen ? messages.hideEditor : messages.editor }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", "aria-pressed": previewOpen, onClick: togglePreviewPanel, children: previewOpen ? messages.hidePreview : messages.preview })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.panels, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", "aria-pressed": editorOpen, onClick: toggleEditorPanel, children: editorOpen ? messages.hideEditor : messages.editor }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", "aria-pressed": previewOpen, onClick: togglePreviewPanel, children: previewOpen ? messages.hidePreview : messages.preview })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.collapseBlocks, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: collapseAllBlocks, children: messages.collapseAll }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: openAllBlocks, children: messages.openAll })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.collapseBlocks, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: collapseAllBlocks, children: messages.collapseAll }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: openAllBlocks, children: messages.openAll })
           ] })
         ] }) : null,
-        error ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "butex-document2-widget__error", children: error }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        error ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "butex-document2-widget__error", children: error }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "div",
           {
             className: `butex-document2-widget__layout butex-document2-widget__layout--editor-${showEditorPanel ? "open" : "closed"} butex-document2-widget__layout--preview-${showPreviewPanel ? "open" : "closed"}`,
             children: [
-              !previewOnly ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              !previewOnly ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "section",
                 {
                   className: "butex-document2-widget__panel butex-document2-widget__editor-panel",
                   "aria-label": messages.documentEditor,
                   "aria-hidden": !showEditorPanel,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "butex-document2-widget__blocks", children: documentNode.blocks.map((block, blockIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "butex-document2-widget__blocks", children: documentNode.blocks.map((block, blockIndex) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     BlockEditor,
                     {
                       block,
                       blockIndex,
                       blockCount: documentNode.blocks.length,
+                      references: documentNode.references,
                       documentDirection,
+                      digitForm,
                       mathOutput,
                       equationSide,
                       editableEquations,
+                      editableCitations: !previewOnly,
                       uiLocale,
                       isCollapsed: collapsedBlockIds.has(block.id),
                       onTextChange: (fieldId, tokenId, text) => applyDocument(updateTextToken(documentRef.current, fieldId, tokenId, text), "text"),
                       onOpenMath: openMath,
                       onDeleteMath: editableEquations ? deleteMathToken : void 0,
+                      onOpenCite: openCite,
+                      onDeleteCite: deleteCiteToken,
                       onRemoveBlock: (blockId) => applyDocument(removeDocument2BlockById(documentRef.current, blockId), "immediate"),
                       onMoveBlock: (blockId, direction) => applyDocument(moveDocument2BlockById(documentRef.current, blockId, direction), "immediate"),
                       onToggleCollapse: toggleBlockCollapse,
@@ -11968,35 +13264,45 @@ function ButexDocumentEditor2({
                       onFieldBlur,
                       onImageSrcChange: (blockId, value) => applyDocument(updateDocument2ImageValue(documentRef.current, blockId, value), "text"),
                       onAddListItem: (listBlockId) => applyDocument(addDocument2ListItem(documentRef.current, listBlockId), "immediate"),
-                      onRemoveListItem: (listBlockId, itemId) => applyDocument(removeDocument2ListItem(documentRef.current, listBlockId, itemId), "immediate")
+                      onRemoveListItem: (listBlockId, itemId) => applyDocument(removeDocument2ListItem(documentRef.current, listBlockId, itemId), "immediate"),
+                      onManageReferences: () => setReferencesOpen(true)
                     },
                     block.id
                   )) })
                 }
               ) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "section",
                 {
                   className: "butex-document2-widget__panel butex-document2-widget__preview-panel",
                   "aria-label": messages.documentPreview,
                   "aria-hidden": !showPreviewPanel,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DocumentPreview, { blocks: preview.blocks, output: mathOutput, documentDirection, uiLocale })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    DocumentPreview,
+                    {
+                      blocks: preview.blocks,
+                      output: mathOutput,
+                      documentDirection,
+                      uiLocale,
+                      resolveImageUrl
+                    }
+                  )
                 }
               )
             ]
           }
         ),
-        debugEnabled ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "butex-document2-widget__dev", children: [
-          debugEnabled && documentNode.diagnostics.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: messages.importWarnings }),
-            documentNode.diagnostics.map((diagnostic) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "butex-document2-widget__dev-diagnostic", children: formatDocument2Diagnostic(diagnostic, messages) }, `${diagnostic.path}-${diagnostic.message}`))
+        debugEnabled ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "butex-document2-widget__dev", children: [
+          debugEnabled && documentNode.diagnostics.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("strong", { children: messages.importWarnings }),
+            documentNode.diagnostics.map((diagnostic) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "butex-document2-widget__dev-diagnostic", children: formatDocument2Diagnostic(diagnostic, messages) }, `${diagnostic.path}-${diagnostic.message}`))
           ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: "LaTeX" }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("pre", { children: latex }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: "AST" }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("pre", { children: JSON.stringify(documentNode, null, 2) })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("strong", { children: "LaTeX" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("pre", { children: latex }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("strong", { children: "AST" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("pre", { children: JSON.stringify(documentNode, null, 2) })
         ] }) : null,
-        !previewOnly && selectedMath ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        !previewOnly && selectedMath ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           EquationDrawer,
           {
             session: selectedMath.session,
@@ -12010,6 +13316,34 @@ function ButexDocumentEditor2({
             onSave: saveEquation,
             onDelete: deleteSelectedEquation
           }
+        ) : null,
+        !previewOnly ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          CitePickerPopover,
+          {
+            open: citePicker !== null,
+            references: documentNode.references,
+            initialKeys: citePicker?.keys ?? [],
+            uiLocale,
+            onClose: () => setCitePicker(null),
+            onConfirm: confirmCiteKeys,
+            onManageReferences: () => {
+              setCitePicker(null);
+              setReferencesOpen(true);
+            }
+          }
+        ) : null,
+        !previewOnly ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          ReferencesPanel,
+          {
+            open: referencesOpen,
+            references: documentNode.references,
+            uiLocale,
+            onClose: () => setReferencesOpen(false),
+            onAdd: (partial) => applyDocument(addDocument2Reference(documentRef.current, partial), "immediate"),
+            onUpdate: (referenceId, patch) => applyDocument(updateDocument2Reference(documentRef.current, referenceId, patch), "immediate"),
+            onRemove: (referenceId) => applyDocument(removeDocument2Reference(documentRef.current, referenceId), "immediate"),
+            onMove: (referenceId, direction) => applyDocument(moveDocument2Reference(documentRef.current, referenceId, direction), "immediate")
+          }
         ) : null
       ] })
     }