@drghaliasri/butex 5.3.0 → 5.3.2

package/dist/react-document2.js

@@ -73,9 +73,11 @@ function formatDigits(value, digitForm = "western") {
 }
 
 // src/document2/articleMeta.ts
-var BUTEX_BASMALA_LINE1 = "\u0628\u0650\u0633\u0652\u0645\u0650 \u0627\u0644\u0644\u064E\u0651\u0647\u0650 \u0627\u0644\u0631\u064E\u0651\u062D\u0652\u0645\u064E\u0670\u0646\u0650 \u0627\u0644\u0631\u064E\u0651\u062D\u0650\u064A\u0645\u0650";
-var BUTEX_BASMALA_SALAWAT = "\u0635\u064E\u0644\u064E\u0651\u0649 \u0627\u0644\u0644\u064E\u0651\u0647\u064F \u0639\u064E\u0644\u064E\u064A\u0652\u0647\u0650 \u0648\u064E\u0633\u064E\u0644\u064E\u0651\u0645\u064E";
+var BUTEX_BASMALA_LINE1 = "\u0628\u0650\u0633\u0652\u0645\u0650 \u0671\u0644\u0644\u064E\u0651\u0670\u0647\u0650 \u0671\u0644\u0631\u064E\u0651\u062D\u0652\u0645\u064E\u0670\u0646\u0650 \u0671\u0644\u0631\u064E\u0651\u062D\u0650\u064A\u0645\u0650";
+var BUTEX_BASMALA_LINE2 = "\u0648\u064E\u0671\u0644\u0635\u064E\u0651\u0644\u064E\u0627\u0629\u064F \u0648\u064E\u0671\u0644\u0633\u064E\u0651\u0644\u064E\u0627\u0645\u064F \u0639\u064E\u0644\u064E\u0649\u0670 \u0631\u064E\u0633\u064F\u0648\u0644\u0650 \u0671\u0644\u0644\u064E\u0651\u0670\u0647\u0650";
+var BUTEX_BASMALA_SALAWAT = "\u0635\u064E\u0644\u064E\u0651\u0649 \u0671\u0644\u0644\u064E\u0651\u0647\u064F \u0639\u064E\u0644\u064E\u064A\u0652\u0647\u0650 \u0648\u064E\u0633\u064E\u0644\u064E\u0651\u0645\u064E";
 var BUTEX_BASMALA = `${BUTEX_BASMALA_LINE1}
+${BUTEX_BASMALA_LINE2}
 ${BUTEX_BASMALA_SALAWAT}`;
 var BUTEX_CLOSING_HAMDALA = "\u0627\u0644\u0652\u062D\u064E\u0645\u0652\u062F\u064F \u0644\u0650\u0644\u064E\u0651\u0647\u0650 \u0646\u064E\u0641\u064E\u0639\u064E\u0646\u064E\u0627 \u0628\u0650\u0639\u0650\u0644\u0652\u0645\u0650\u0647\u0650";
 function escapeButexTextArg(text) {
@@ -89,26 +91,60 @@ function butexDiwaniDisplayLatex(text) {
 ${butexDiwaniDisplayTex(text)}
 \\]`;
 }
+var BASMALA_LINES = [BUTEX_BASMALA_LINE1, BUTEX_BASMALA_LINE2, BUTEX_BASMALA_SALAWAT];
 function butexBasmalaDisplayTex() {
-  return `${butexDiwaniDisplayTex(BUTEX_BASMALA_LINE1)} \\\\ ${butexDiwaniDisplayTex(BUTEX_BASMALA_SALAWAT)}`;
+  return BASMALA_LINES.map((line) => butexDiwaniDisplayTex(line)).join(" \\\\ ");
 }
 function butexBasmalaDisplayLatex() {
   return `\\[
 ${butexBasmalaDisplayTex()}
 \\]`;
 }
-function butexBasmalaTitlingPreamble() {
-  return [
+function butexInColumnMaketitleHook() {
+  return String.raw`\makeatletter
+\renewcommand{\maketitle}{%
+  \par
+  \begingroup
+    \renewcommand\thefootnote{\@fnsymbol\c@footnote}%
+    \def\@makefnmark{\rlap{\@textsuperscript{\normalfont\@thefnmark}}}%
+    \long\def\@makefntext##1{\parindent 1em\noindent
+      \hb@xt@1.8em{\hss\@textsuperscript{\normalfont\@thefnmark}}##1}%
+    \@maketitle
+    \thispagestyle{plain}\@thanks
+  \endgroup
+  \setcounter{footnote}{0}%
+  \global\let\thanks\relax
+  \global\let\maketitle\relax
+  \global\let\@maketitle\relax
+  \global\let\@thanks\@empty
+  \global\let\@author\@empty
+  \global\let\@date\@empty
+  \global\let\@title\@empty
+  \global\let\title\relax
+  \global\let\author\relax
+  \global\let\date\relax
+  \global\let\and\relax
+}
+\makeatother`;
+}
+function butexBasmalaTitlingPreamble(options = {}) {
+  const lines = [
     "\\usepackage{titling}",
     "\\pretitle{%",
     "  \\begin{center}",
-    `  ${butexDiwaniDisplayTex(BUTEX_BASMALA_LINE1)}\\\\`,
-    `  ${butexDiwaniDisplayTex(BUTEX_BASMALA_SALAWAT)}`,
+    ...BASMALA_LINES.map((line, index) => {
+      const suffix = index < BASMALA_LINES.length - 1 ? "\\\\" : "";
+      return `  ${butexDiwaniDisplayTex(line)}${suffix}`;
+    }),
     "  \\par\\vspace{1.5em}",
     "  \\LARGE",
     "}",
     "\\posttitle{\\par\\end{center}}"
-  ].join("\n");
+  ];
+  if (options.twocolumn) {
+    lines.push(butexInColumnMaketitleHook());
+  }
+  return lines.join("\n");
 }
 var HIJRI_YEAR_MIN = 1400;
 var HIJRI_YEAR_MAX = 1500;
@@ -267,6 +303,10 @@ function cloneDocument2Meta(meta) {
 }
 
 // src/document2/citations.ts
+var DEFAULT_REFERENCE_FIELD_SEPARATOR = "\u060C";
+function normalizeReferenceFieldSeparator(value) {
+  return value === "," ? "," : DEFAULT_REFERENCE_FIELD_SEPARATOR;
+}
 function referenceNumberMap(references) {
   const map = /* @__PURE__ */ new Map();
   references.forEach((reference, index) => {
@@ -312,7 +352,8 @@ function referenceFromJson(json) {
     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 : ""
+    venue: typeof json.venue === "string" ? json.venue : "",
+    fieldSeparator: normalizeReferenceFieldSeparator(json.field_separator)
   };
 }
 function createEmptyReference2(partial = {}) {
@@ -322,15 +363,33 @@ function createEmptyReference2(partial = {}) {
     title: partial.title,
     year: partial.year,
     url: partial.url,
-    venue: partial.venue
+    venue: partial.venue,
+    field_separator: partial.field_separator
   });
 }
+function bibliographyEntryBody(reference, separator = reference.fieldSeparator, options = {}) {
+  const year = options.digitForm !== void 0 ? formatDigits(reference.year, options.digitForm) : reference.year;
+  const parts = [reference.authors, reference.title, reference.venue, year].filter((part) => part.trim().length > 0);
+  return parts.join(`${separator} `);
+}
 function bibliographyEntryLatex(reference) {
-  const parts = [reference.authors, reference.title, reference.venue, reference.year].filter((part) => part.trim().length > 0);
-  const body = parts.join(", ");
+  const body = bibliographyEntryBody(reference);
   const url = reference.url.trim().length > 0 ? ` \\url{${reference.url}}` : "";
   return `\\bibitem{${reference.key}} ${body}${url}`.trim();
 }
+function absoluteHttpHref(url) {
+  const trimmed = url.trim();
+  if (trimmed.length === 0) {
+    return "";
+  }
+  if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(trimmed)) {
+    return trimmed;
+  }
+  if (trimmed.startsWith("//")) {
+    return `https:${trimmed}`;
+  }
+  return `https://${trimmed}`;
+}
 
 // src/ast/commands/index.ts
 function renderCommandCore(context) {
@@ -815,6 +874,23 @@ function labelNumberMap(document2) {
   }
   return map;
 }
+function formatFloatCaptionTitle(kind, number, options = {}) {
+  const locale = options.uiLocale ?? "ar";
+  const kindWord = kind === "fig" ? locale === "ar" ? "\u0627\u0644\u0634\u0643\u0644" : "Figure" : kind === "tab" ? locale === "ar" ? "\u0627\u0644\u062C\u062F\u0648\u0644" : "Table" : locale === "ar" ? "\u0627\u0644\u0645\u0639\u0627\u062F\u0644\u0629" : "Equation";
+  const digits = formatBibliographyNumber(number, {
+    documentDirection: options.documentDirection ?? (locale === "ar" ? "rtl" : "ltr"),
+    digitForm: options.digitForm ?? (locale === "ar" ? "arabicIndic" : "western")
+  });
+  return `${kindWord} ${digits}`;
+}
+function formatFloatCaptionPreview(title, caption, uiLocale = "ar") {
+  const trimmed = caption?.trim() ?? "";
+  if (trimmed.length === 0) {
+    return title;
+  }
+  const separator = uiLocale === "ar" ? ": " : ". ";
+  return `${title}${separator}${trimmed}`;
+}
 function formatRefLabel(keys, document2, refCommand, options = {}) {
   const documentDirection = options.documentDirection ?? "rtl";
   const digitForm = options.digitForm ?? (documentDirection === "rtl" ? "arabicIndic" : "western");
@@ -1085,7 +1161,8 @@ function parseReferences(json) {
         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
+        venue: typeof entry.venue === "string" ? entry.venue : void 0,
+        field_separator: entry.field_separator === "," || entry.field_separator === "\u060C" ? entry.field_separator : void 0
       })
     );
   }
@@ -7232,7 +7309,7 @@ function addDocument2ImageBlock(document2, src = "", afterBlockId) {
     kind: "image",
     command: "\\includegraphics",
     value: src,
-    options: { width: "0.8\\textwidth" },
+    options: { width: "0.8\\columnwidth" },
     ...defaultFloatMeta()
   };
   return insertDocument2BlockAfter(document2, afterBlockId, block);
@@ -7517,6 +7594,9 @@ function updateDocument2Reference(document2, referenceId, patch) {
   if (typeof patch.venue === "string") {
     reference.venue = patch.venue;
   }
+  if (patch.field_separator === "," || patch.field_separator === "\u060C") {
+    reference.fieldSeparator = patch.field_separator;
+  }
   return next;
 }
 function removeDocument2Reference(document2, referenceId) {
@@ -7550,6 +7630,48 @@ function updateDocument2Meta(document2, patch) {
   return next;
 }
 
+// src/document2/keys.ts
+var DOCUMENT2_KEY_PATTERN = /^[\p{L}\p{M}0-9:._-]+$/u;
+function normalizeDocument2Key(key) {
+  return key.normalize("NFC").trim();
+}
+function isDuplicateDocument2Key(key, namespace) {
+  const normalized = normalizeDocument2Key(key);
+  if (normalized.length === 0) {
+    return false;
+  }
+  for (const reference of namespace.references ?? []) {
+    if (namespace.excludeReferenceId && reference.id === namespace.excludeReferenceId) {
+      continue;
+    }
+    if (normalizeDocument2Key(reference.key) === normalized) {
+      return true;
+    }
+  }
+  for (const label of namespace.labels ?? []) {
+    if (namespace.excludeOwnerId && label.ownerId === namespace.excludeOwnerId) {
+      continue;
+    }
+    if (normalizeDocument2Key(label.key) === normalized) {
+      return true;
+    }
+  }
+  return false;
+}
+function document2KeyError(key, namespace = {}) {
+  const normalized = normalizeDocument2Key(key);
+  if (normalized.length === 0) {
+    return "empty";
+  }
+  if (!DOCUMENT2_KEY_PATTERN.test(normalized)) {
+    return "invalid";
+  }
+  if (isDuplicateDocument2Key(normalized, namespace)) {
+    return "duplicate";
+  }
+  return null;
+}
+
 // src/document2/arabicPreamble.ts
 function arabicXeLatexPreamblePkg(twocolumn = false) {
   const classOptions = twocolumn ? "12pt,a4paper,notitlepage,twocolumn" : "12pt,a4paper,notitlepage";
@@ -7832,8 +7954,16 @@ function tableBlockLatex(block) {
   lines.push("\\end{table}");
   return lines.join("\n");
 }
-function imageOptionsLatex(block) {
-  const entries = Object.entries(block.options);
+function remapImageWidthForColumns(value) {
+  return value.replace(/\\textwidth\b/g, "\\columnwidth");
+}
+function imageOptionsLatex(block, constrainToColumn) {
+  const entries = Object.entries(block.options).map(([key, value]) => {
+    if (constrainToColumn && key === "width") {
+      return [key, remapImageWidthForColumns(value)];
+    }
+    return [key, value];
+  });
   if (entries.length === 0) {
     return "";
   }
@@ -7844,7 +7974,7 @@ function imageBlockLatex(block) {
   if (block.centered) {
     lines.push("  \\centering");
   }
-  lines.push(`  ${block.command}${imageOptionsLatex(block)}{${block.value}}`);
+  lines.push(`  ${block.command}${imageOptionsLatex(block, true)}{${block.value}}`);
   lines.push(...floatCaptionLabelLines(block));
   lines.push("\\end{figure}");
   return lines.join("\n");
@@ -7874,11 +8004,11 @@ ${block.closing}`;
 function authorLatex(authors) {
   return authors.split(/\n+/).map((line) => line.trim()).filter((line) => line.length > 0).join(" \\\\ ");
 }
-function articleMaketitlePreamble(meta) {
+function articleMaketitlePreamble(meta, twocolumn = false) {
   if (!document2HasMaketitle(meta)) {
     return "";
   }
-  const parts = [butexBasmalaTitlingPreamble()];
+  const parts = [butexBasmalaTitlingPreamble({ twocolumn })];
   if (meta.title.trim().length > 0) {
     parts.push(`\\title{${meta.title.trim()}}`);
   }
@@ -7904,21 +8034,22 @@ ${meta.abstract.trim()}
 }
 function document2Latex(document2, options = {}) {
   const meta = document2.meta ?? emptyDocument2Meta();
+  const twocolumn = options.twocolumn === true;
   const front = articleFrontMatterLatex(meta);
   const bodyBlocks = document2.blocks.map((block) => blockLatex(block, document2.references));
   const closing = butexDiwaniDisplayLatex(BUTEX_CLOSING_HAMDALA);
   const body = [...front, ...bodyBlocks, closing].filter((part) => part.length > 0).join("\n\n");
   const wrapDocument = options.wrapDocument !== false;
   if (!wrapDocument) {
-    const metaPreamble = articleMaketitlePreamble(meta);
+    const metaPreamble = articleMaketitlePreamble(meta, twocolumn);
     return metaPreamble.length > 0 ? `${metaPreamble}
 
 ${body}` : body;
   }
   const preamble = getArabicXeLatexPreamble({
     digitsMapping: options.digitsMapping ?? "arabicdigits",
-    twocolumn: options.twocolumn === true
-  }) + "\n" + articleMaketitlePreamble(meta);
+    twocolumn
+  }) + "\n" + articleMaketitlePreamble(meta, twocolumn);
   return `${preamble}
 \\begin{document}
 
@@ -8091,13 +8222,11 @@ function floatNumberLabel(document2, key, previewOptions) {
   if (!hit || hit.kind !== "fig" && hit.kind !== "tab") {
     return void 0;
   }
-  const locale = previewOptions.uiLocale ?? "ar";
-  const kindWord = hit.kind === "fig" ? locale === "ar" ? "\u0627\u0644\u0634\u0643\u0644" : "Figure" : locale === "ar" ? "\u0627\u0644\u062C\u062F\u0648\u0644" : "Table";
-  const digits = formatBibliographyNumber(hit.number, {
+  return formatFloatCaptionTitle(hit.kind, hit.number, {
+    uiLocale: previewOptions.uiLocale ?? "ar",
     documentDirection: previewOptions.documentDirection,
     digitForm: previewOptions.digitForm
   });
-  return `${kindWord} ${digits}`;
 }
 function blockPreview(block, islands, output, equationSide, document2, previewOptions) {
   if (block.kind === "textBlock") {
@@ -8152,7 +8281,8 @@ function blockPreview(block, islands, output, equationSide, document2, previewOp
         title: reference.title,
         year: reference.year,
         url: reference.url,
-        venue: reference.venue
+        venue: reference.venue,
+        fieldSeparator: reference.fieldSeparator
       }))
     };
   }
@@ -8303,6 +8433,15 @@ var DOCUMENT2_MESSAGES = {
     labelKindFig: "\u0634\u0643\u0644",
     labelKindTab: "\u062C\u062F\u0648\u0644",
     labelKindEq: "\u0645\u0639\u0627\u062F\u0644\u0629",
+    captionPreview: "\u0645\u0639\u0627\u064A\u0646\u0629 \u0627\u0644\u062A\u0639\u0644\u064A\u0642",
+    referencePreview: "\u0645\u0639\u0627\u064A\u0646\u0629 \u0627\u0644\u0645\u0631\u062C\u0639",
+    referenceFieldSeparator: "\u0641\u0627\u0635\u0644 \u0627\u0644\u062D\u0642\u0648\u0644",
+    referenceCommaLtr: "\u0641\u0627\u0635\u0644\u0629 \u0625\u0646\u062C\u0644\u064A\u0632\u064A\u0629 ,",
+    referenceCommaRtl: "\u0641\u0627\u0635\u0644\u0629 \u0639\u0631\u0628\u064A\u0629 \u060C",
+    keyEmpty: "\u0627\u0644\u0645\u0641\u062A\u0627\u062D \u0645\u0637\u0644\u0648\u0628",
+    keyInvalid: "\u0627\u0644\u0645\u0641\u062A\u0627\u062D \u063A\u064A\u0631 \u0635\u0627\u0644\u062D: \u0628\u062F\u0648\u0646 \u0645\u0633\u0627\u0641\u0627\u062A\u060C \u0648\u064A\u064F\u0633\u0645\u062D \u0628\u0627\u0644\u062D\u0631\u0648\u0641 \u0648\u0627\u0644\u0623\u0631\u0642\u0627\u0645 \u0648`:._-` \u0641\u0642\u0637",
+    keyDuplicate: "\u0647\u0630\u0627 \u0627\u0644\u0645\u0641\u062A\u0627\u062D \u0645\u0633\u062A\u062E\u062F\u0645 \u0645\u0633\u0628\u0642\u0627\u064B",
+    keyRulesHint: "\u062D\u0631\u0648\u0641 (\u0639\u0631\u0628\u064A\u0629 \u0623\u0648 \u0644\u0627\u062A\u064A\u0646\u064A\u0629) \u0648\u0623\u0631\u0642\u0627\u0645 \u0648`:._-` \u0628\u062F\u0648\u0646 \u0645\u0633\u0627\u0641\u0627\u062A",
     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",
@@ -8433,6 +8572,15 @@ var DOCUMENT2_MESSAGES = {
     labelKindFig: "Figure",
     labelKindTab: "Table",
     labelKindEq: "Equation",
+    captionPreview: "Caption preview",
+    referencePreview: "Reference preview",
+    referenceFieldSeparator: "Field separator",
+    referenceCommaLtr: "Latin comma ,",
+    referenceCommaRtl: "Arabic comma \u060C",
+    keyEmpty: "Key is required",
+    keyInvalid: "Invalid key: letters, digits, and `:._-` only; no spaces",
+    keyDuplicate: "This key is already in use",
+    keyRulesHint: "Letters (Arabic or Latin), digits, and `:._-`; no spaces",
     citePickerTitle: "Select references",
     noReferencesYet: "No references yet. Add a reference first.",
     editCitation: "Edit citation",
@@ -8563,6 +8711,8 @@ function ArticleMetaPanel({
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "butex-document2-widget__article-meta-fixed", dir: "rtl", children: [
           BUTEX_BASMALA_LINE1,
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
+          BUTEX_BASMALA_LINE2,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
           BUTEX_BASMALA_SALAWAT
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "butex-document2-widget__article-meta-grid", children: [
@@ -8668,7 +8818,10 @@ function focusArticleMetaPanel(panel) {
 }
 
 // src/react-document2/ButexDocumentEditor2.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
+
+// src/react-document2/BlockEditor.tsx
+var import_react4 = require("react");
 
 // src/react-document2/InlineField.tsx
 var import_react3 = require("react");
@@ -9705,6 +9858,18 @@ function inlineFieldSummary(field) {
     }).join("")
   );
 }
+function keyErrorMessage(error, messages) {
+  if (error === "empty") {
+    return messages.keyEmpty;
+  }
+  if (error === "invalid") {
+    return messages.keyInvalid;
+  }
+  if (error === "duplicate") {
+    return messages.keyDuplicate;
+  }
+  return null;
+}
 function FloatMetaEditor({
   captionEnabled,
   caption,
@@ -9713,8 +9878,18 @@ function FloatMetaEditor({
   labelPlaceholder,
   labelDir,
   messages,
+  ownerId,
+  references,
+  labels,
   onChange
 }) {
+  const [labelOverride, setLabelOverride] = (0, import_react4.useState)(null);
+  const displayedLabel = labelOverride ?? label;
+  const labelError = labelEnabled ? document2KeyError(displayedLabel, {
+    references,
+    labels,
+    excludeOwnerId: ownerId
+  }) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "butex-document2-widget__float-meta", children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "butex-document2-widget__float-meta-toggle", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -9764,15 +9939,27 @@ function FloatMetaEditor({
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "input",
         {
-          value: label,
+          value: displayedLabel,
           dir: labelDir,
           placeholder: labelPlaceholder,
+          "aria-invalid": labelError !== null ? true : void 0,
           onChange: (event) => {
             const value = event.currentTarget.value;
+            setLabelOverride(value);
+            const error = document2KeyError(value, {
+              references,
+              labels,
+              excludeOwnerId: ownerId
+            });
+            if (error !== null) {
+              return;
+            }
             onChange({ label: value });
+            setLabelOverride(null);
           }
         }
-      )
+      ),
+      labelError !== null ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "butex-document2-widget__field-error", children: labelError === "invalid" ? messages.keyRulesHint : keyErrorMessage(labelError, messages) }) : null
     ] }) : null
   ] });
 }
@@ -9831,6 +10018,8 @@ function BlockEditor({
   onManageReferences
 }) {
   const messages = document2Messages(uiLocale);
+  const labels = documentNode ? collectDocument2Labels(documentNode) : [];
+  const referenceList = references ?? [];
   const showChrome = depth === 0;
   const chromeClass = [
     blockChromeClass(block),
@@ -9993,6 +10182,9 @@ function BlockEditor({
           labelPlaceholder: messages.tableLabelPlaceholder,
           labelDir: uiLocaleDirection(uiLocale),
           messages,
+          ownerId: block.id,
+          references: referenceList,
+          labels,
           onChange: (patch) => onFloatMetaChange?.(block.id, "table", patch)
         }
       )
@@ -10036,6 +10228,9 @@ function BlockEditor({
           labelPlaceholder: messages.figureLabelPlaceholder,
           labelDir: uiLocaleDirection(uiLocale),
           messages,
+          ownerId: block.id,
+          references: referenceList,
+          labels,
           onChange: (patch) => onFloatMetaChange?.(block.id, "image", patch)
         }
       )
@@ -10044,14 +10239,16 @@ function BlockEditor({
   if (block.kind === "bibliography") {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { className: chromeClass, children: [
       header,
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ol", { className: "butex-document2-widget__bibliography-editor", dir: documentDirection, children: references.map((reference, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ol", { className: "butex-document2-widget__bibliography-editor", dir: documentDirection, children: referenceList.map((reference, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("strong", { children: [
           "[",
-          index + 1,
+          formatBibliographyNumber(index + 1, { documentDirection, digitForm }),
           "] ",
           reference.key
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: [reference.authors, reference.title, reference.venue, reference.year].filter(Boolean).join(" \u2014 ") })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: bibliographyEntryBody(reference, reference.fieldSeparator, {
+          digitForm: digitForm ?? (documentDirection === "rtl" ? "arabicIndic" : "western")
+        }) })
       ] }, reference.id)) }),
       onManageReferences ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: onManageReferences, children: messages.manageReferences }) : null
     ] });
@@ -10063,20 +10260,22 @@ function BlockEditor({
 }
 
 // src/react-document2/CitePickerPopover.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function CitePickerPopover({
   open,
   references,
   initialKeys = [],
   uiLocale = "ar",
+  digitForm = "arabicIndic",
   onClose,
   onConfirm,
   onManageReferences
 }) {
   const messages = document2Messages(uiLocale);
-  const [selected, setSelected] = (0, import_react4.useState)(initialKeys);
-  (0, import_react4.useEffect)(() => {
+  const documentDirection = uiLocale === "ar" ? "rtl" : "ltr";
+  const [selected, setSelected] = (0, import_react5.useState)(initialKeys);
+  (0, import_react5.useEffect)(() => {
     if (open) {
       setSelected(initialKeys);
     }
@@ -10102,12 +10301,13 @@ function CitePickerPopover({
         references.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "butex-document2-widget__cite-picker-empty", children: messages.noReferencesYet }) : /* @__PURE__ */ (0, import_jsx_runtime8.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 ");
+          const numberLabel = formatBibliographyNumber(index + 1, { documentDirection, digitForm });
           return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "butex-document2-widget__cite-picker-item", children: [
             /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "checkbox", checked, onChange: () => toggleKey(reference.key) }),
             /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
               /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("strong", { children: [
                 "[",
-                index + 1,
+                numberLabel,
                 "] ",
                 reference.key
               ] }),
@@ -10135,18 +10335,18 @@ function CitePickerPopover({
 }
 
 // src/react-document2/DocumentInsertToolbar.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/react-document2/TableInsertPopover.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function TableInsertPopover({ uiLocale = "ar", onConfirm }) {
   const messages = document2Messages(uiLocale);
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  const [rows, setRows] = (0, import_react5.useState)("3");
-  const [cols, setCols] = (0, import_react5.useState)("3");
-  const rootRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const [open, setOpen] = (0, import_react6.useState)(false);
+  const [rows, setRows] = (0, import_react6.useState)("3");
+  const [cols, setCols] = (0, import_react6.useState)("3");
+  const rootRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
     if (!open) {
       return;
     }
@@ -10237,7 +10437,7 @@ function DocumentInsertToolbar({
   onDigitFormChange
 }) {
   const messages = document2Messages(uiLocale);
-  const [digitMenuOpen, setDigitMenuOpen] = (0, import_react6.useState)(false);
+  const [digitMenuOpen, setDigitMenuOpen] = (0, import_react7.useState)(false);
   function digitTitle(id) {
     if (id === "arabicIndic") {
       return messages.arabicIndicDigits;
@@ -10408,7 +10608,8 @@ function PreviewBlock({
   output,
   resolveImageUrl,
   uiLocale,
-  documentDirection
+  documentDirection,
+  digitForm
 }) {
   const messages = document2Messages(uiLocale);
   const floatCaptionSeparator = uiLocale === "ar" ? ": " : ". ";
@@ -10467,7 +10668,8 @@ function PreviewBlock({
           output,
           resolveImageUrl,
           uiLocale,
-          documentDirection
+          documentDirection,
+          digitForm
         },
         child.id
       ))
@@ -10497,10 +10699,10 @@ function PreviewBlock({
       ] }),
       " ",
       /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
-        [item.authors, item.title, item.venue, item.year].filter(Boolean).join(", "),
+        bibliographyEntryBody(item, item.fieldSeparator, { digitForm }),
         item.url ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("a", { href: item.url, target: "_blank", rel: "noreferrer", children: item.url })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("a", { href: absoluteHttpHref(item.url), target: "_blank", rel: "noreferrer", children: item.url })
         ] }) : null
       ] })
     ] }, item.id)) });
@@ -10512,9 +10714,11 @@ function DocumentPreview({
   output,
   documentDirection = "rtl",
   uiLocale = "ar",
+  digitForm,
   resolveImageUrl
 }) {
   const messages = document2Messages(uiLocale);
+  const resolvedDigitForm = digitForm ?? (documentDirection === "rtl" ? "arabicIndic" : "western");
   const hasBody = blocks.some(isBodyPreviewBlock);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "butex-document2-widget__preview", dir: documentDirection, children: [
     blocks.map((block) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -10524,7 +10728,8 @@ function DocumentPreview({
         output,
         resolveImageUrl,
         uiLocale,
-        documentDirection
+        documentDirection,
+        digitForm: resolvedDigitForm
       },
       block.id
     )),
@@ -10533,10 +10738,10 @@ function DocumentPreview({
 }
 
 // src/react-document2/EquationDrawer.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/react/ButexEditor.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/react/widgetChromeCss.ts
 var WIDGET_CHROME_CSS = `
@@ -11582,61 +11787,61 @@ function passiveTreeText(session, messages) {
 
 ${latex || messages.empty}`;
 }
-var ButexEditor = (0, import_react7.forwardRef)(
+var ButexEditor = (0, import_react8.forwardRef)(
   function ButexEditor2({ className, debug = false, defaultSide, uiLocale = "ar", initialSession, onSessionChange }, ref) {
     const messages = equationEditorMessages(uiLocale);
-    const wrapperRef = (0, import_react7.useRef)(null);
-    const surfaceRef = (0, import_react7.useRef)(null);
-    const mathOutputRef = (0, import_react7.useRef)(null);
-    const renderErrorRef = (0, import_react7.useRef)(null);
-    const latexLinesRef = (0, import_react7.useRef)(null);
-    const passivePreviewRef = (0, import_react7.useRef)(null);
-    const debugLogRef = (0, import_react7.useRef)(null);
-    const undoBtnRef = (0, import_react7.useRef)(null);
-    const redoBtnRef = (0, import_react7.useRef)(null);
-    const copyBtnRef = (0, import_react7.useRef)(null);
-    const cutBtnRef = (0, import_react7.useRef)(null);
-    const splitTypingBtnRef = (0, import_react7.useRef)(null);
-    const characterFontBtnRef = (0, import_react7.useRef)(null);
-    const digitFormBtnRef = (0, import_react7.useRef)(null);
-    const runtimeRef = (0, import_react7.useRef)(null);
-    const debugRef = (0, import_react7.useRef)(debug);
+    const wrapperRef = (0, import_react8.useRef)(null);
+    const surfaceRef = (0, import_react8.useRef)(null);
+    const mathOutputRef = (0, import_react8.useRef)(null);
+    const renderErrorRef = (0, import_react8.useRef)(null);
+    const latexLinesRef = (0, import_react8.useRef)(null);
+    const passivePreviewRef = (0, import_react8.useRef)(null);
+    const debugLogRef = (0, import_react8.useRef)(null);
+    const undoBtnRef = (0, import_react8.useRef)(null);
+    const redoBtnRef = (0, import_react8.useRef)(null);
+    const copyBtnRef = (0, import_react8.useRef)(null);
+    const cutBtnRef = (0, import_react8.useRef)(null);
+    const splitTypingBtnRef = (0, import_react8.useRef)(null);
+    const characterFontBtnRef = (0, import_react8.useRef)(null);
+    const digitFormBtnRef = (0, import_react8.useRef)(null);
+    const runtimeRef = (0, import_react8.useRef)(null);
+    const debugRef = (0, import_react8.useRef)(debug);
     debugRef.current = debug;
-    const uiLocaleRef = (0, import_react7.useRef)(uiLocale);
+    const uiLocaleRef = (0, import_react8.useRef)(uiLocale);
     uiLocaleRef.current = uiLocale;
-    const onSessionChangeRef = (0, import_react7.useRef)(onSessionChange);
+    const onSessionChangeRef = (0, import_react8.useRef)(onSessionChange);
     onSessionChangeRef.current = onSessionChange;
-    const debugBodyHiddenRef = (0, import_react7.useRef)(false);
-    const [debugBodyHidden, setDebugBodyHidden] = (0, import_react7.useState)(false);
+    const debugBodyHiddenRef = (0, import_react8.useRef)(false);
+    const [debugBodyHidden, setDebugBodyHidden] = (0, import_react8.useState)(false);
     debugBodyHiddenRef.current = debugBodyHidden;
-    const [digitMenuOpen, setDigitMenuOpen] = (0, import_react7.useState)(false);
-    const [characterFontMenuOpen, setCharacterFontMenuOpen] = (0, import_react7.useState)(false);
-    const [delimiterMenuOpen, setDelimiterMenuOpen] = (0, import_react7.useState)(false);
-    const [matrixMenuOpen, setMatrixMenuOpen] = (0, import_react7.useState)(false);
-    const [spacingMenuOpen, setSpacingMenuOpen] = (0, import_react7.useState)(false);
-    const [functionMenuOpen, setFunctionMenuOpen] = (0, import_react7.useState)(false);
-    const [limitsSeriesMenuOpen, setLimitsSeriesMenuOpen] = (0, import_react7.useState)(false);
-    const [function2MenuOpen, setFunction2MenuOpen] = (0, import_react7.useState)(false);
-    const [derivativeMenuOpen, setDerivativeMenuOpen] = (0, import_react7.useState)(false);
-    const [groupMenuOpen, setGroupMenuOpen] = (0, import_react7.useState)(false);
-    const [operatorMenuOpen, setOperatorMenuOpen] = (0, import_react7.useState)(false);
-    const [operator2MenuOpen, setOperator2MenuOpen] = (0, import_react7.useState)(false);
-    const [operator3MenuOpen, setOperator3MenuOpen] = (0, import_react7.useState)(false);
-    const [dotMenuOpen, setDotMenuOpen] = (0, import_react7.useState)(false);
-    const [integralMenuOpen, setIntegralMenuOpen] = (0, import_react7.useState)(false);
-    const [selectedDigitForm2, setSelectedDigitForm] = (0, import_react7.useState)("western");
-    const [selectedCharacterFont, setSelectedCharacterFont] = (0, import_react7.useState)("default");
-    const [activeEditorSide, setActiveEditorSide] = (0, import_react7.useState)("arabic");
-    const [envPaletteMode, setEnvPaletteMode] = (0, import_react7.useState)("matrix");
-    const [matrixStyle, setMatrixStyle] = (0, import_react7.useState)("pmatrix");
-    const [matrixRows, setMatrixRows] = (0, import_react7.useState)(2);
-    const [matrixColumns, setMatrixColumns] = (0, import_react7.useState)(2);
-    const [matrixHover, setMatrixHover] = (0, import_react7.useState)(null);
-    const [arrayAlignmentColumn, setArrayAlignmentColumn] = (0, import_react7.useState)(1);
-    (0, import_react7.useImperativeHandle)(ref, () => ({
+    const [digitMenuOpen, setDigitMenuOpen] = (0, import_react8.useState)(false);
+    const [characterFontMenuOpen, setCharacterFontMenuOpen] = (0, import_react8.useState)(false);
+    const [delimiterMenuOpen, setDelimiterMenuOpen] = (0, import_react8.useState)(false);
+    const [matrixMenuOpen, setMatrixMenuOpen] = (0, import_react8.useState)(false);
+    const [spacingMenuOpen, setSpacingMenuOpen] = (0, import_react8.useState)(false);
+    const [functionMenuOpen, setFunctionMenuOpen] = (0, import_react8.useState)(false);
+    const [limitsSeriesMenuOpen, setLimitsSeriesMenuOpen] = (0, import_react8.useState)(false);
+    const [function2MenuOpen, setFunction2MenuOpen] = (0, import_react8.useState)(false);
+    const [derivativeMenuOpen, setDerivativeMenuOpen] = (0, import_react8.useState)(false);
+    const [groupMenuOpen, setGroupMenuOpen] = (0, import_react8.useState)(false);
+    const [operatorMenuOpen, setOperatorMenuOpen] = (0, import_react8.useState)(false);
+    const [operator2MenuOpen, setOperator2MenuOpen] = (0, import_react8.useState)(false);
+    const [operator3MenuOpen, setOperator3MenuOpen] = (0, import_react8.useState)(false);
+    const [dotMenuOpen, setDotMenuOpen] = (0, import_react8.useState)(false);
+    const [integralMenuOpen, setIntegralMenuOpen] = (0, import_react8.useState)(false);
+    const [selectedDigitForm2, setSelectedDigitForm] = (0, import_react8.useState)("western");
+    const [selectedCharacterFont, setSelectedCharacterFont] = (0, import_react8.useState)("default");
+    const [activeEditorSide, setActiveEditorSide] = (0, import_react8.useState)("arabic");
+    const [envPaletteMode, setEnvPaletteMode] = (0, import_react8.useState)("matrix");
+    const [matrixStyle, setMatrixStyle] = (0, import_react8.useState)("pmatrix");
+    const [matrixRows, setMatrixRows] = (0, import_react8.useState)(2);
+    const [matrixColumns, setMatrixColumns] = (0, import_react8.useState)(2);
+    const [matrixHover, setMatrixHover] = (0, import_react8.useState)(null);
+    const [arrayAlignmentColumn, setArrayAlignmentColumn] = (0, import_react8.useState)(1);
+    (0, import_react8.useImperativeHandle)(ref, () => ({
       getRuntime: () => runtimeRef.current
     }));
-    const updatePreview = (0, import_react7.useCallback)(async (session) => {
+    const updatePreview = (0, import_react8.useCallback)(async (session) => {
       const mathOutputEl = mathOutputRef.current;
       const renderErrorEl = renderErrorRef.current;
       const latexLinesEl = latexLinesRef.current;
@@ -11686,9 +11891,9 @@ ${arabic || currentMessages.empty}`;
         }
       }
     }, []);
-    const updatePreviewRef = (0, import_react7.useRef)(updatePreview);
+    const updatePreviewRef = (0, import_react8.useRef)(updatePreview);
     updatePreviewRef.current = updatePreview;
-    (0, import_react7.useEffect)(() => {
+    (0, import_react8.useEffect)(() => {
       injectWidgetChromeCss();
       injectBuTeXEditorStyles(typeof document !== "undefined" ? document : void 0);
       const surfaceEl = surfaceRef.current;
@@ -11744,7 +11949,7 @@ ${arabic || currentMessages.empty}`;
         runtimeRef.current = null;
       };
     }, []);
-    (0, import_react7.useEffect)(() => {
+    (0, import_react8.useEffect)(() => {
       runtimeRef.current?.setUiLocale(uiLocale);
       const session = runtimeRef.current?.getSession();
       if (session) {
@@ -12817,6 +13022,18 @@ ButexEditor.displayName = "ButexEditor";
 
 // src/react-document2/EquationDrawer.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
+function keyErrorMessage2(error, messages) {
+  if (error === "empty") {
+    return messages.keyEmpty;
+  }
+  if (error === "invalid") {
+    return messages.keyInvalid;
+  }
+  if (error === "duplicate") {
+    return messages.keyDuplicate;
+  }
+  return null;
+}
 function EquationDrawer({
   session,
   reason,
@@ -12826,6 +13043,9 @@ function EquationDrawer({
   uiLocale = "ar",
   labelEnabled = false,
   label = "",
+  labels = [],
+  references = [],
+  ownerId = "",
   onLabelEnabledChange,
   onLabelChange,
   onMathModeChange,
@@ -12834,8 +13054,18 @@ function EquationDrawer({
   onDelete
 }) {
   const messages = document2Messages(uiLocale);
-  const latestSession = (0, import_react8.useRef)(session);
-  (0, import_react8.useEffect)(() => {
+  const latestSession = (0, import_react9.useRef)(session);
+  const [labelOverride, setLabelOverride] = (0, import_react9.useState)(null);
+  const displayedLabel = labelOverride ?? label;
+  const labelError = labelEnabled && mathMode === "display" ? document2KeyError(displayedLabel, {
+    references,
+    labels,
+    excludeOwnerId: ownerId || void 0
+  }) : null;
+  (0, import_react9.useEffect)(() => {
+    setLabelOverride(null);
+  }, [ownerId, label]);
+  (0, import_react9.useEffect)(() => {
     const onKeyDown = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -12895,12 +13125,27 @@ function EquationDrawer({
               /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "input",
                 {
-                  value: label,
+                  value: displayedLabel,
                   dir: uiLocaleDirection(uiLocale),
                   placeholder: messages.equationLabelPlaceholder,
-                  onChange: (event) => onLabelChange?.(event.currentTarget.value)
+                  "aria-invalid": labelError !== null ? true : void 0,
+                  onChange: (event) => {
+                    const value = event.currentTarget.value;
+                    setLabelOverride(value);
+                    const error = document2KeyError(value, {
+                      references,
+                      labels,
+                      excludeOwnerId: ownerId || void 0
+                    });
+                    if (error !== null) {
+                      return;
+                    }
+                    onLabelChange?.(value);
+                    setLabelOverride(null);
+                  }
                 }
-              )
+              ),
+              labelError !== null ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "butex-document2-widget__field-error", children: labelError === "invalid" ? messages.keyRulesHint : keyErrorMessage2(labelError, messages) }) : null
             ] }) : null
           ] }) : null,
           reason ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "butex-document2-widget__error", children: uiLocale === "en" ? messages.equationUnavailable : reason }) : null,
@@ -12918,7 +13163,15 @@ function EquationDrawer({
           ),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "butex-document2-widget__row", children: [
             canDelete && onDelete ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", className: "butex-document2-widget__button--danger", onClick: onDelete, children: messages.deleteEquation }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => onSave({ ...latestSession.current, activeSide: equationSide }), children: messages.saveEquation })
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "button",
+              {
+                type: "button",
+                disabled: labelEnabled && mathMode === "display" && labelError !== null,
+                onClick: () => onSave({ ...latestSession.current, activeSide: equationSide }),
+                children: messages.saveEquation
+              }
+            )
           ] })
         ]
       }
@@ -12927,92 +13180,243 @@ function EquationDrawer({
 }
 
 // src/react-document2/LabelsPanel.tsx
+var import_react10 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-function kindLabel(kind, uiLocale) {
-  const messages = document2Messages(uiLocale);
-  if (kind === "fig") {
-    return messages.labelKindFig;
+function keyErrorMessage3(error, messages) {
+  if (error === "empty") {
+    return messages.keyEmpty;
+  }
+  if (error === "invalid") {
+    return messages.keyInvalid;
   }
-  if (kind === "tab") {
-    return messages.labelKindTab;
+  if (error === "duplicate") {
+    return messages.keyDuplicate;
   }
-  return messages.labelKindEq;
+  return null;
 }
 function LabelsPanel({
   open,
   labels,
+  references = [],
   uiLocale = "ar",
+  digitForm = "arabicIndic",
   onClose,
   onUpdateFloat,
   onUpdateEquationLabel
 }) {
   const messages = document2Messages(uiLocale);
+  const documentDirection = uiLocale === "ar" ? "rtl" : "ltr";
+  const [keyOverrides, setKeyOverrides] = (0, import_react10.useState)({});
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "butex-document2-widget__refs-backdrop", role: "presentation", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "butex-document2-widget__refs-panel", role: "dialog", "aria-label": messages.labelsTitle, onClick: (event) => event.stopPropagation(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("header", { className: "butex-document2-widget__refs-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { children: messages.labelsTitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsx)("p", { className: "butex-document2-widget__labels-help", children: messages.labelsHelp }),
-    labels.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "butex-document2-widget__cite-picker-empty", children: messages.noLabelsYet }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: "butex-document2-widget__refs-list", children: labels.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("li", { className: "butex-document2-widget__refs-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "butex-document2-widget__refs-item-head", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("strong", { children: [
-        "[",
-        kindLabel(entry.kind, uiLocale),
-        " ",
-        entry.number,
-        "] ",
-        entry.key
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "butex-document2-widget__refs-grid", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "butex-document2-widget__refs-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: messages.floatLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            "input",
-            {
-              value: entry.key,
-              dir: uiLocaleDirection(uiLocale),
-              onChange: (event) => {
-                const value = event.currentTarget.value;
-                if (entry.kind === "eq") {
-                  onUpdateEquationLabel?.(entry.ownerId, { label: value, labelEnabled: true });
-                } else if (entry.kind === "fig" || entry.kind === "tab") {
-                  onUpdateFloat?.(entry.ownerId, entry.kind, { label: value, labelEnabled: true });
-                }
-              }
-            }
-          )
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "butex-document2-widget__refs-backdrop", role: "presentation", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
+    {
+      className: "butex-document2-widget__refs-panel",
+      role: "dialog",
+      "aria-label": messages.labelsTitle,
+      onClick: (event) => event.stopPropagation(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("header", { className: "butex-document2-widget__refs-header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { children: messages.labelsTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.close, "aria-label": messages.close, onClick: onClose, children: "\xD7" })
         ] }),
-        entry.kind === "fig" || entry.kind === "tab" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "butex-document2-widget__refs-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: messages.floatCaption }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            "input",
-            {
-              value: entry.caption,
-              onChange: (event) => {
-                const value = event.currentTarget.value;
-                const kind = entry.kind;
-                if (kind === "fig" || kind === "tab") {
-                  onUpdateFloat?.(entry.ownerId, kind, { caption: value, captionEnabled: true });
-                }
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "butex-document2-widget__labels-help", children: messages.labelsHelp }),
+        labels.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "butex-document2-widget__cite-picker-empty", children: messages.noLabelsYet }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: "butex-document2-widget__refs-list", children: labels.map((entry) => {
+          const title = formatFloatCaptionTitle(entry.kind, entry.number, {
+            uiLocale,
+            digitForm,
+            documentDirection
+          });
+          const captionPreview = entry.kind === "eq" ? title : formatFloatCaptionPreview(title, entry.caption, uiLocale);
+          const overrideKey = `${entry.kind}:${entry.ownerId}`;
+          const displayedKey = keyOverrides[overrideKey] ?? entry.key;
+          const entryKeyError = document2KeyError(displayedKey, {
+            references,
+            labels,
+            excludeOwnerId: entry.ownerId
+          });
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("li", { className: "butex-document2-widget__refs-item", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "butex-document2-widget__refs-item-head", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "butex-document2-widget__refs-item-key", children: entry.key })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "div",
+              {
+                className: "butex-document2-widget__modal-preview",
+                dir: uiLocaleDirection(uiLocale),
+                "aria-label": messages.captionPreview,
+                children: captionPreview
               }
-            }
-          )
-        ] }) : null
-      ] })
-    ] }, `${entry.kind}:${entry.ownerId}`)) })
-  ] }) });
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "butex-document2-widget__refs-grid", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "butex-document2-widget__refs-field", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: messages.floatLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  "input",
+                  {
+                    value: displayedKey,
+                    dir: uiLocaleDirection(uiLocale),
+                    "aria-invalid": entryKeyError !== null ? true : void 0,
+                    onChange: (event) => {
+                      const value = event.currentTarget.value;
+                      setKeyOverrides((current) => ({ ...current, [overrideKey]: value }));
+                      const error = document2KeyError(value, {
+                        references,
+                        labels,
+                        excludeOwnerId: entry.ownerId
+                      });
+                      if (error !== null) {
+                        return;
+                      }
+                      if (entry.kind === "eq") {
+                        onUpdateEquationLabel?.(entry.ownerId, { label: value, labelEnabled: true });
+                      } else if (entry.kind === "fig" || entry.kind === "tab") {
+                        onUpdateFloat?.(entry.ownerId, entry.kind, { label: value, labelEnabled: true });
+                      }
+                      setKeyOverrides((current) => {
+                        const next = { ...current };
+                        delete next[overrideKey];
+                        return next;
+                      });
+                    }
+                  }
+                ),
+                entryKeyError !== null ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "butex-document2-widget__field-error", children: entryKeyError === "invalid" ? messages.keyRulesHint : keyErrorMessage3(entryKeyError, messages) }) : null
+              ] }),
+              entry.kind === "fig" || entry.kind === "tab" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "butex-document2-widget__refs-field", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: messages.floatCaption }),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  "input",
+                  {
+                    value: entry.caption,
+                    onChange: (event) => {
+                      const value = event.currentTarget.value;
+                      const kind = entry.kind;
+                      if (kind === "fig" || kind === "tab") {
+                        onUpdateFloat?.(entry.ownerId, kind, { caption: value, captionEnabled: true });
+                      }
+                    }
+                  }
+                )
+              ] }) : null
+            ] })
+          ] }, overrideKey);
+        }) })
+      ]
+    }
+  ) });
 }
 
 // src/react-document2/ReferencesPanel.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var EMPTY_DRAFT = { key: "", authors: "", title: "", year: "", url: "", venue: "" };
+var EMPTY_DRAFT = {
+  key: "",
+  authors: "",
+  title: "",
+  year: "",
+  url: "",
+  venue: "",
+  field_separator: DEFAULT_REFERENCE_FIELD_SEPARATOR
+};
+var REFERENCE_FIELDS = [
+  ["key", "referenceKey"],
+  ["authors", "referenceAuthors"],
+  ["title", "referenceTitle"],
+  ["year", "referenceYear"],
+  ["venue", "referenceVenue"],
+  ["url", "referenceUrl"]
+];
+function keyErrorMessage4(error, messages) {
+  if (error === "empty") {
+    return messages.keyEmpty;
+  }
+  if (error === "invalid") {
+    return messages.keyInvalid;
+  }
+  if (error === "duplicate") {
+    return messages.keyDuplicate;
+  }
+  return null;
+}
+function FieldSeparatorToggle({
+  value,
+  messages,
+  onChange
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "butex-document2-widget__refs-field butex-document2-widget__refs-separator", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: messages.referenceFieldSeparator }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "butex-document2-widget__refs-separator-toggle", role: "group", "aria-label": messages.referenceFieldSeparator, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "button",
+        {
+          type: "button",
+          className: value === "\u060C" ? "is-active" : void 0,
+          title: messages.referenceCommaRtl,
+          "aria-label": messages.referenceCommaRtl,
+          "aria-pressed": value === "\u060C",
+          onClick: () => onChange("\u060C"),
+          children: "\u060C"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "button",
+        {
+          type: "button",
+          className: value === "," ? "is-active" : void 0,
+          title: messages.referenceCommaLtr,
+          "aria-label": messages.referenceCommaLtr,
+          "aria-pressed": value === ",",
+          onClick: () => onChange(","),
+          children: ","
+        }
+      )
+    ] })
+  ] });
+}
+function ReferencePreview({
+  authors,
+  title,
+  venue,
+  year,
+  url,
+  fieldSeparator,
+  numberLabel,
+  messages,
+  uiLocale,
+  digitForm
+}) {
+  const body = bibliographyEntryBody({ authors, title, venue, year, fieldSeparator }, fieldSeparator, { digitForm });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      className: "butex-document2-widget__modal-preview",
+      dir: uiLocaleDirection(uiLocale),
+      "aria-label": messages.referencePreview,
+      children: [
+        numberLabel ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "butex-document2-widget__modal-preview-number", children: [
+          "[",
+          numberLabel,
+          "] "
+        ] }) : null,
+        body.length > 0 ? body : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "butex-document2-widget__cite-picker-empty", children: "\u2026" }),
+        url.trim().length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "butex-document2-widget__modal-preview-url", children: url.trim() })
+        ] }) : null
+      ]
+    }
+  );
+}
 function ReferencesPanel({
   open,
   references,
+  labels = [],
   uiLocale = "ar",
+  digitForm = "arabicIndic",
   onClose,
   onAdd,
   onUpdate,
@@ -13020,101 +13424,190 @@ function ReferencesPanel({
   onMove
 }) {
   const messages = document2Messages(uiLocale);
-  const [draft, setDraft] = (0, import_react9.useState)(EMPTY_DRAFT);
+  const [draft, setDraft] = (0, import_react11.useState)(EMPTY_DRAFT);
+  const [draftKeyTouched, setDraftKeyTouched] = (0, import_react11.useState)(false);
+  const [keyOverrides, setKeyOverrides] = (0, import_react11.useState)({});
+  const draftSeparator = draft.field_separator === "," ? "," : DEFAULT_REFERENCE_FIELD_SEPARATOR;
+  const documentDirection = uiLocale === "ar" ? "rtl" : "ltr";
+  const draftKeyError = (0, import_react11.useMemo)(
+    () => document2KeyError(draft.key ?? "", {
+      references,
+      labels
+    }),
+    [draft.key, references, labels]
+  );
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "butex-document2-widget__refs-backdrop", role: "presentation", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "butex-document2-widget__refs-panel", role: "dialog", "aria-label": messages.referencesTitle, onClick: (event) => event.stopPropagation(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("header", { className: "butex-document2-widget__refs-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { children: messages.referencesTitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsxs)("div", { className: "butex-document2-widget__refs-add", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { children: messages.addReference }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsxs)("label", { className: "butex-document2-widget__refs-field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "input",
-          {
-            value: draft[field] ?? "",
-            onChange: (event) => {
-              const value = event.currentTarget.value;
-              setDraft((current) => ({ ...current, [field]: value }));
-            }
-          }
-        )
-      ] }, field)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)("ul", { className: "butex-document2-widget__refs-list", children: references.map((reference, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("li", { className: "butex-document2-widget__refs-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "butex-document2-widget__refs-item-head", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("strong", { children: [
-          "[",
-          index + 1,
-          "] ",
-          reference.key
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "butex-document2-widget__refs-backdrop", role: "presentation", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      className: "butex-document2-widget__refs-panel",
+      role: "dialog",
+      "aria-label": messages.referencesTitle,
+      onClick: (event) => event.stopPropagation(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("header", { className: "butex-document2-widget__refs-header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { children: messages.referencesTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsxs)("div", { className: "butex-document2-widget__refs-item-actions", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsxs)("div", { className: "butex-document2-widget__refs-add", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { children: messages.addReference }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "butex-document2-widget__refs-grid", children: [
+            REFERENCE_FIELDS.map(([field, messageKey]) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "butex-document2-widget__refs-field", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: messages[messageKey] }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                "input",
+                {
+                  value: draft[field] ?? "",
+                  "aria-invalid": field === "key" && draftKeyTouched && draftKeyError !== null ? true : void 0,
+                  onChange: (event) => {
+                    const value = event.currentTarget.value;
+                    if (field === "key") {
+                      setDraftKeyTouched(true);
+                    }
+                    setDraft((current) => ({ ...current, [field]: value }));
+                  }
+                }
+              ),
+              field === "key" && draftKeyTouched && draftKeyError !== null ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "butex-document2-widget__field-error", children: draftKeyError === "invalid" ? messages.keyRulesHint : keyErrorMessage4(draftKeyError, messages) }) : null
+            ] }, field)),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              FieldSeparatorToggle,
+              {
+                value: draftSeparator,
+                messages,
+                onChange: (next) => setDraft((current) => ({ ...current, field_separator: next }))
+              }
+            )
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-            "button",
+            ReferencePreview,
             {
-              type: "button",
-              title: messages.moveDown,
-              "aria-label": messages.moveDown,
-              disabled: index === references.length - 1,
-              onClick: () => onMove(reference.id, 1),
-              children: "\u2193"
+              authors: draft.authors ?? "",
+              title: draft.title ?? "",
+              venue: draft.venue ?? "",
+              year: draft.year ?? "",
+              url: draft.url ?? "",
+              fieldSeparator: draftSeparator,
+              messages,
+              uiLocale,
+              digitForm
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", title: messages.deleteReference, "aria-label": messages.deleteReference, onClick: () => onRemove(reference.id), children: "\xD7" })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsxs)("label", { className: "butex-document2-widget__refs-field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "input",
-          {
-            value: reference[field],
-            onChange: (event) => {
-              const value = event.currentTarget.value;
-              onUpdate(reference.id, { [field]: value });
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "butex-document2-widget__primary-btn",
+              disabled: draftKeyError !== null,
+              onClick: () => {
+                onAdd({ ...draft, field_separator: draftSeparator });
+                setDraft(EMPTY_DRAFT);
+                setDraftKeyTouched(false);
+              },
+              children: messages.addReference
             }
-          }
-        )
-      ] }, field)) })
-    ] }, reference.id)) })
-  ] }) });
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { className: "butex-document2-widget__refs-list", children: references.map((reference, index) => {
+          const displayedKey = keyOverrides[reference.id] ?? reference.key;
+          const entryKeyError = document2KeyError(displayedKey, {
+            references,
+            labels,
+            excludeReferenceId: reference.id
+          });
+          const numberLabel = formatBibliographyNumber(index + 1, { documentDirection, digitForm });
+          return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("li", { className: "butex-document2-widget__refs-item", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "butex-document2-widget__refs-item-head", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("strong", { children: [
+                "[",
+                numberLabel,
+                "] ",
+                reference.key
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "butex-document2-widget__refs-item-actions", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.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_runtime15.jsx)("button", { type: "button", title: messages.deleteReference, "aria-label": messages.deleteReference, onClick: () => onRemove(reference.id), children: "\xD7" })
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              ReferencePreview,
+              {
+                authors: reference.authors,
+                title: reference.title,
+                venue: reference.venue,
+                year: reference.year,
+                url: reference.url,
+                fieldSeparator: reference.fieldSeparator,
+                numberLabel,
+                messages,
+                uiLocale,
+                digitForm
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "butex-document2-widget__refs-grid", children: [
+              REFERENCE_FIELDS.map(([field, messageKey]) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "butex-document2-widget__refs-field", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: messages[messageKey] }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  "input",
+                  {
+                    value: field === "key" ? displayedKey : reference[field],
+                    "aria-invalid": field === "key" && entryKeyError !== null ? true : void 0,
+                    onChange: (event) => {
+                      const value = event.currentTarget.value;
+                      if (field !== "key") {
+                        onUpdate(reference.id, { [field]: value });
+                        return;
+                      }
+                      setKeyOverrides((current) => ({ ...current, [reference.id]: value }));
+                      const error = document2KeyError(value, {
+                        references,
+                        labels,
+                        excludeReferenceId: reference.id
+                      });
+                      if (error === null) {
+                        onUpdate(reference.id, { key: value });
+                        setKeyOverrides((current) => {
+                          const next = { ...current };
+                          delete next[reference.id];
+                          return next;
+                        });
+                      }
+                    }
+                  }
+                ),
+                field === "key" && entryKeyError !== null ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "butex-document2-widget__field-error", children: entryKeyError === "invalid" ? messages.keyRulesHint : keyErrorMessage4(entryKeyError, messages) }) : null
+              ] }, field)),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                FieldSeparatorToggle,
+                {
+                  value: reference.fieldSeparator,
+                  messages,
+                  onChange: (next) => onUpdate(reference.id, { field_separator: next })
+                }
+              )
+            ] })
+          ] }, reference.id);
+        }) })
+      ]
+    }
+  ) });
 }
 
 // src/react-document2/RefPickerPopover.tsx
-var import_react10 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function RefPickerPopover({
   open,
@@ -13122,14 +13615,16 @@ function RefPickerPopover({
   initialKeys = [],
   initialRefCommand = "ref",
   uiLocale = "ar",
+  digitForm = "arabicIndic",
   onClose,
   onConfirm,
   onManageLabels
 }) {
   const messages = document2Messages(uiLocale);
-  const [selected, setSelected] = (0, import_react10.useState)(initialKeys);
-  const [refCommand, setRefCommand] = (0, import_react10.useState)(initialRefCommand);
-  (0, import_react10.useEffect)(() => {
+  const documentDirection = uiLocale === "ar" ? "rtl" : "ltr";
+  const [selected, setSelected] = (0, import_react12.useState)(initialKeys);
+  const [refCommand, setRefCommand] = (0, import_react12.useState)(initialRefCommand);
+  (0, import_react12.useEffect)(() => {
     if (open) {
       setSelected(initialKeys);
       setRefCommand(initialRefCommand);
@@ -13156,16 +13651,18 @@ function RefPickerPopover({
         ] }),
         labels.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "butex-document2-widget__cite-picker-empty", children: messages.noLabelsYet }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "butex-document2-widget__cite-picker-list", children: labels.map((entry) => {
           const checked = selected.includes(entry.key);
+          const title = formatFloatCaptionTitle(entry.kind, entry.number, {
+            uiLocale,
+            digitForm,
+            documentDirection
+          });
           return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: "butex-document2-widget__cite-picker-item", children: [
             /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", { type: "radio", name: "butex-ref-key", checked, onChange: () => selectKey(entry.key, entry.kind) }),
             /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { children: [
               /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("strong", { children: [
-                "[",
-                entry.kind,
+                title,
                 " ",
-                entry.number,
-                "] ",
-                entry.key
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "butex-document2-widget__refs-item-key", children: entry.key })
               ] }),
               entry.caption ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "butex-document2-widget__cite-picker-meta", children: entry.caption }) : null
             ] })
@@ -14357,6 +14854,24 @@ var DOCUMENT2_WIDGET_CSS = `
   width: 100%;
 }
 
+.butex-document2-widget__field-error {
+  color: #b42318;
+  font-size: 0.85em;
+  line-height: 1.35;
+  margin: 0;
+}
+
+.butex-document2-widget__field-hint {
+  color: var(--butex-document2-muted);
+  font-size: 0.82em;
+  line-height: 1.35;
+  margin: 0;
+}
+
+.butex-document2-widget__refs-field input[aria-invalid='true'] {
+  border-color: color-mix(in srgb, #b42318 55%, var(--butex-document2-border));
+}
+
 .butex-document2-widget__refs-item {
   border: 1px solid var(--butex-document2-border);
   border-radius: 10px;
@@ -14365,6 +14880,58 @@ var DOCUMENT2_WIDGET_CSS = `
   padding: 0.75rem;
 }
 
+.butex-document2-widget__refs-item-key {
+  color: var(--butex-document2-muted);
+  font-size: 0.9em;
+  font-weight: 500;
+}
+
+.butex-document2-widget__modal-preview {
+  background: color-mix(in srgb, var(--butex-document2-panel) 88%, var(--butex-document2-accent-bg));
+  border: 1px dashed color-mix(in srgb, var(--butex-document2-accent) 30%, var(--butex-document2-border));
+  border-radius: 8px;
+  color: inherit;
+  font-size: 0.95em;
+  line-height: 1.55;
+  padding: 0.55rem 0.7rem;
+  text-align: center;
+}
+
+.butex-document2-widget__modal-preview-number {
+  color: var(--butex-document2-muted);
+  font-weight: 600;
+}
+
+.butex-document2-widget__modal-preview-url {
+  color: var(--butex-document2-accent);
+  word-break: break-all;
+}
+
+.butex-document2-widget__refs-separator-toggle {
+  display: inline-flex;
+  gap: 0.35rem;
+}
+
+.butex-document2-widget__refs-separator-toggle button {
+  background: var(--butex-document2-input-bg, var(--butex-document2-panel));
+  border: 1px solid var(--butex-document2-border);
+  border-radius: 6px;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-size: 1.15em;
+  line-height: 1;
+  min-width: 2.25rem;
+  padding: 0.35rem 0.55rem;
+}
+
+.butex-document2-widget__refs-separator-toggle button.is-active {
+  background: var(--butex-document2-accent-bg);
+  border-color: color-mix(in srgb, var(--butex-document2-accent) 45%, var(--butex-document2-border));
+  color: var(--butex-document2-accent);
+  font-weight: 700;
+}
+
 .butex-document2-widget__refs-item-actions {
   display: inline-flex;
   gap: 0.25rem;
@@ -14856,36 +15423,36 @@ function ButexDocumentEditor2({
   onLatexChange
 }) {
   const messages = document2Messages(uiLocale);
-  const initialState = (0, import_react11.useMemo)(
+  const initialState = (0, import_react13.useMemo)(
     () => resolveInitialDocument2(initialDocument, uiLocale, documentMeta),
     [initialDocument, documentMeta, uiLocale]
   );
-  const [documentNode, setDocumentNode] = (0, import_react11.useState)(initialState.document);
-  const [error, setError] = (0, import_react11.useState)(initialState.error);
-  const [editorOpen, setEditorOpen] = (0, import_react11.useState)(true);
-  const [previewOpen, setPreviewOpen] = (0, import_react11.useState)(true);
-  const [selectedMath, setSelectedMath] = (0, import_react11.useState)(null);
-  const [citePicker, setCitePicker] = (0, import_react11.useState)(null);
-  const [referencesOpen, setReferencesOpen] = (0, import_react11.useState)(false);
-  const [labelsOpen, setLabelsOpen] = (0, import_react11.useState)(false);
-  const [refPicker, setRefPicker] = (0, import_react11.useState)(null);
-  const [digitFormState, setDigitFormState] = (0, import_react11.useState)(null);
-  const [editorFocus, setEditorFocus] = (0, import_react11.useState)(createEmptyDocument2EditorFocus());
-  const [collapsedBlockIds, setCollapsedBlockIds] = (0, import_react11.useState)(() => /* @__PURE__ */ new Set());
-  const [blockSelectionState, setBlockSelectionState] = (0, import_react11.useState)(emptyBlockSelection);
-  const [historyTick, setHistoryTick] = (0, import_react11.useState)(0);
+  const [documentNode, setDocumentNode] = (0, import_react13.useState)(initialState.document);
+  const [error, setError] = (0, import_react13.useState)(initialState.error);
+  const [editorOpen, setEditorOpen] = (0, import_react13.useState)(true);
+  const [previewOpen, setPreviewOpen] = (0, import_react13.useState)(true);
+  const [selectedMath, setSelectedMath] = (0, import_react13.useState)(null);
+  const [citePicker, setCitePicker] = (0, import_react13.useState)(null);
+  const [referencesOpen, setReferencesOpen] = (0, import_react13.useState)(false);
+  const [labelsOpen, setLabelsOpen] = (0, import_react13.useState)(false);
+  const [refPicker, setRefPicker] = (0, import_react13.useState)(null);
+  const [digitFormState, setDigitFormState] = (0, import_react13.useState)(null);
+  const [editorFocus, setEditorFocus] = (0, import_react13.useState)(createEmptyDocument2EditorFocus());
+  const [collapsedBlockIds, setCollapsedBlockIds] = (0, import_react13.useState)(() => /* @__PURE__ */ new Set());
+  const [blockSelectionState, setBlockSelectionState] = (0, import_react13.useState)(emptyBlockSelection);
+  const [historyTick, setHistoryTick] = (0, import_react13.useState)(0);
   const digitForm = digitFormProp ?? digitFormState ?? (documentDirection === "rtl" ? "arabicIndic" : "western");
-  const historyRef = (0, import_react11.useRef)(createDocument2History());
-  const documentRef = (0, import_react11.useRef)(documentNode);
-  const textSnapshotArmedRef = (0, import_react11.useRef)(false);
-  const textDebounceRef = (0, import_react11.useRef)(null);
-  const widgetRef = (0, import_react11.useRef)(null);
-  const articleMetaPanelRef = (0, import_react11.useRef)(null);
-  const pendingFocusRef = (0, import_react11.useRef)(null);
+  const historyRef = (0, import_react13.useRef)(createDocument2History());
+  const documentRef = (0, import_react13.useRef)(documentNode);
+  const textSnapshotArmedRef = (0, import_react13.useRef)(false);
+  const textDebounceRef = (0, import_react13.useRef)(null);
+  const widgetRef = (0, import_react13.useRef)(null);
+  const articleMetaPanelRef = (0, import_react13.useRef)(null);
+  const pendingFocusRef = (0, import_react13.useRef)(null);
   documentRef.current = documentNode;
   const latex = document2Latex(documentNode);
-  const documentLabels = (0, import_react11.useMemo)(() => collectDocument2Labels(documentNode), [documentNode]);
-  const preview = (0, import_react11.useMemo)(
+  const documentLabels = (0, import_react13.useMemo)(() => collectDocument2Labels(documentNode), [documentNode]);
+  const preview = (0, import_react13.useMemo)(
     () => document2Preview(documentNode, mathOutput, equationSide, {
       documentDirection,
       digitForm,
@@ -14893,7 +15460,7 @@ function ButexDocumentEditor2({
     }),
     [documentNode, documentDirection, digitForm, equationSide, mathOutput, uiLocale]
   );
-  const debugEnabled = (0, import_react11.useMemo)(() => {
+  const debugEnabled = (0, import_react13.useMemo)(() => {
     if (debug) {
       return true;
     }
@@ -14902,8 +15469,8 @@ function ButexDocumentEditor2({
     }
     return new URLSearchParams(window.location.search).get("debug") === "1";
   }, [debug]);
-  const canUndo = (0, import_react11.useMemo)(() => document2HistoryCanUndo(historyRef.current), [historyTick, documentNode]);
-  const canRedo = (0, import_react11.useMemo)(() => document2HistoryCanRedo(historyRef.current), [historyTick, documentNode]);
+  const canUndo = (0, import_react13.useMemo)(() => document2HistoryCanUndo(historyRef.current), [historyTick, documentNode]);
+  const canRedo = (0, import_react13.useMemo)(() => document2HistoryCanRedo(historyRef.current), [historyTick, documentNode]);
   const blockSelection = normalizeBlockSelection(blockSelectionState.selection, documentNode.blocks.length);
   const selectionCount = blockSelection ? blockSelection.to - blockSelection.from + 1 : 0;
   const canMoveSelectionUp = Boolean(blockSelection && blockSelection.from > 0);
@@ -14945,15 +15512,15 @@ function ButexDocumentEditor2({
     applyDocument(removeDocument2BlockRange(documentRef.current, selection.from, selection.to), "immediate");
     clearBlockSelection();
   }
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     injectBuTeXDocument2Styles();
   }, []);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!editableEquations || previewOnly) {
       setSelectedMath(null);
     }
   }, [editableEquations, previewOnly]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const next = resolveInitialDocument2(initialDocument, uiLocale, documentMeta);
     setDocumentNode(next.document);
     setError(next.error);
@@ -14962,13 +15529,13 @@ function ButexDocumentEditor2({
     historyRef.current = createDocument2History();
     setHistoryTick((tick) => tick + 1);
   }, [initialDocument, documentMeta, uiLocale]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     onDocumentChange?.(documentNode);
   }, [documentNode, onDocumentChange]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     onLatexChange?.(latex);
   }, [latex, onLatexChange]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const pending = pendingFocusRef.current;
     const root = widgetRef.current;
     if (!pending || !root) {
@@ -15008,10 +15575,10 @@ function ButexDocumentEditor2({
       textarea.setSelectionRange(safeOffset, safeOffset);
     });
   }, [documentNode]);
-  const bumpHistoryUi = (0, import_react11.useCallback)(() => {
+  const bumpHistoryUi = (0, import_react13.useCallback)(() => {
     setHistoryTick((tick) => tick + 1);
   }, []);
-  const applyDocument = (0, import_react11.useCallback)(
+  const applyDocument = (0, import_react13.useCallback)(
     (next, mode = "immediate") => {
       if (mode === "immediate") {
         pushDocument2Snapshot(historyRef.current, documentRef.current);
@@ -15033,7 +15600,7 @@ function ButexDocumentEditor2({
     },
     [bumpHistoryUi]
   );
-  const afterBlockId = (0, import_react11.useCallback)(() => resolveInsertAfterBlockId(documentRef.current, editorFocus), [editorFocus]);
+  const afterBlockId = (0, import_react13.useCallback)(() => resolveInsertAfterBlockId(documentRef.current, editorFocus), [editorFocus]);
   function undoDocument() {
     const restored = restoreDocument2Undo(historyRef.current, documentRef.current);
     if (!restored) {
@@ -15084,7 +15651,7 @@ function ButexDocumentEditor2({
   function openAllBlocks() {
     setCollapsedBlockIds(/* @__PURE__ */ new Set());
   }
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     const root = widgetRef.current;
     if (!root) {
       return;
@@ -15564,6 +16131,7 @@ function ButexDocumentEditor2({
                       output: mathOutput,
                       documentDirection,
                       uiLocale,
+                      digitForm,
                       resolveImageUrl
                     }
                   )
@@ -15593,6 +16161,9 @@ function ButexDocumentEditor2({
             uiLocale,
             labelEnabled: selectedMath.labelEnabled,
             label: selectedMath.label,
+            labels: documentLabels,
+            references: documentNode.references,
+            ownerId: selectedMath.tokenId ?? void 0,
             onLabelEnabledChange: (enabled) => setSelectedMath((current) => current ? { ...current, labelEnabled: enabled } : current),
             onLabelChange: (nextLabel) => setSelectedMath((current) => current ? { ...current, label: nextLabel } : current),
             onMathModeChange: (mode) => setSelectedMath((current) => current ? { ...current, mathMode: mode } : current),
@@ -15608,6 +16179,7 @@ function ButexDocumentEditor2({
             references: documentNode.references,
             initialKeys: citePicker?.keys ?? [],
             uiLocale,
+            digitForm,
             onClose: () => setCitePicker(null),
             onConfirm: confirmCiteKeys,
             onManageReferences: () => {
@@ -15624,6 +16196,7 @@ function ButexDocumentEditor2({
             initialKeys: refPicker?.keys ?? [],
             initialRefCommand: refPicker?.refCommand ?? "ref",
             uiLocale,
+            digitForm,
             onClose: () => setRefPicker(null),
             onConfirm: confirmRefKeys,
             onManageLabels: () => {
@@ -15637,7 +16210,9 @@ function ButexDocumentEditor2({
           {
             open: referencesOpen,
             references: documentNode.references,
+            labels: documentLabels,
             uiLocale,
+            digitForm,
             onClose: () => setReferencesOpen(false),
             onAdd: (partial) => applyDocument(addDocument2Reference(documentRef.current, partial), "immediate"),
             onUpdate: (referenceId, patch) => applyDocument(updateDocument2Reference(documentRef.current, referenceId, patch), "immediate"),
@@ -15650,7 +16225,9 @@ function ButexDocumentEditor2({
           {
             open: labelsOpen,
             labels: documentLabels,
+            references: documentNode.references,
             uiLocale,
+            digitForm,
             onClose: () => setLabelsOpen(false),
             onUpdateFloat: (ownerId, kind, patch) => applyDocument(
               kind === "fig" ? updateDocument2ImageMeta(documentRef.current, ownerId, patch) : updateDocument2TableMeta(documentRef.current, ownerId, patch),