@drghaliasri/butex 5.3.1 → 5.3.2

package/dist/react-document2.mjs

@@ -268,6 +268,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) => {
@@ -313,7 +317,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 = {}) {
@@ -323,15 +328,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) {
@@ -816,6 +839,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");
@@ -1086,7 +1126,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
       })
     );
   }
@@ -7518,6 +7559,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) {
@@ -7551,6 +7595,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";
@@ -8101,13 +8187,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") {
@@ -8162,7 +8246,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
       }))
     };
   }
@@ -8313,6 +8398,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",
@@ -8443,6 +8537,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",
@@ -8680,7 +8783,10 @@ function focusArticleMetaPanel(panel) {
 }
 
 // src/react-document2/ButexDocumentEditor2.tsx
-import { useCallback as useCallback2, useEffect as useEffect8, useMemo, useRef as useRef7, useState as useState9 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect8, useMemo as useMemo2, useRef as useRef7, useState as useState12 } from "react";
+
+// src/react-document2/BlockEditor.tsx
+import { useState as useState3 } from "react";
 
 // src/react-document2/InlineField.tsx
 import { useRef as useRef3 } from "react";
@@ -9717,6 +9823,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,
@@ -9725,8 +9843,18 @@ function FloatMetaEditor({
   labelPlaceholder,
   labelDir,
   messages,
+  ownerId,
+  references,
+  labels,
   onChange
 }) {
+  const [labelOverride, setLabelOverride] = useState3(null);
+  const displayedLabel = labelOverride ?? label;
+  const labelError = labelEnabled ? document2KeyError(displayedLabel, {
+    references,
+    labels,
+    excludeOwnerId: ownerId
+  }) : null;
   return /* @__PURE__ */ jsxs5("div", { className: "butex-document2-widget__float-meta", children: [
     /* @__PURE__ */ jsxs5("label", { className: "butex-document2-widget__float-meta-toggle", children: [
       /* @__PURE__ */ jsx7(
@@ -9776,15 +9904,27 @@ function FloatMetaEditor({
       /* @__PURE__ */ jsx7(
         "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__ */ jsx7("p", { className: "butex-document2-widget__field-error", children: labelError === "invalid" ? messages.keyRulesHint : keyErrorMessage(labelError, messages) }) : null
     ] }) : null
   ] });
 }
@@ -9843,6 +9983,8 @@ function BlockEditor({
   onManageReferences
 }) {
   const messages = document2Messages(uiLocale);
+  const labels = documentNode ? collectDocument2Labels(documentNode) : [];
+  const referenceList = references ?? [];
   const showChrome = depth === 0;
   const chromeClass = [
     blockChromeClass(block),
@@ -10005,6 +10147,9 @@ function BlockEditor({
           labelPlaceholder: messages.tableLabelPlaceholder,
           labelDir: uiLocaleDirection(uiLocale),
           messages,
+          ownerId: block.id,
+          references: referenceList,
+          labels,
           onChange: (patch) => onFloatMetaChange?.(block.id, "table", patch)
         }
       )
@@ -10048,6 +10193,9 @@ function BlockEditor({
           labelPlaceholder: messages.figureLabelPlaceholder,
           labelDir: uiLocaleDirection(uiLocale),
           messages,
+          ownerId: block.id,
+          references: referenceList,
+          labels,
           onChange: (patch) => onFloatMetaChange?.(block.id, "image", patch)
         }
       )
@@ -10056,14 +10204,16 @@ function BlockEditor({
   if (block.kind === "bibliography") {
     return /* @__PURE__ */ jsxs5("section", { className: chromeClass, children: [
       header,
-      /* @__PURE__ */ jsx7("ol", { className: "butex-document2-widget__bibliography-editor", dir: documentDirection, children: references.map((reference, index) => /* @__PURE__ */ jsxs5("li", { children: [
+      /* @__PURE__ */ jsx7("ol", { className: "butex-document2-widget__bibliography-editor", dir: documentDirection, children: referenceList.map((reference, index) => /* @__PURE__ */ jsxs5("li", { children: [
         /* @__PURE__ */ jsxs5("strong", { children: [
           "[",
-          index + 1,
+          formatBibliographyNumber(index + 1, { documentDirection, digitForm }),
           "] ",
           reference.key
         ] }),
-        /* @__PURE__ */ jsx7("span", { children: [reference.authors, reference.title, reference.venue, reference.year].filter(Boolean).join(" \u2014 ") })
+        /* @__PURE__ */ jsx7("span", { children: bibliographyEntryBody(reference, reference.fieldSeparator, {
+          digitForm: digitForm ?? (documentDirection === "rtl" ? "arabicIndic" : "western")
+        }) })
       ] }, reference.id)) }),
       onManageReferences ? /* @__PURE__ */ jsx7("button", { type: "button", onClick: onManageReferences, children: messages.manageReferences }) : null
     ] });
@@ -10075,19 +10225,21 @@ function BlockEditor({
 }
 
 // src/react-document2/CitePickerPopover.tsx
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function CitePickerPopover({
   open,
   references,
   initialKeys = [],
   uiLocale = "ar",
+  digitForm = "arabicIndic",
   onClose,
   onConfirm,
   onManageReferences
 }) {
   const messages = document2Messages(uiLocale);
-  const [selected, setSelected] = useState3(initialKeys);
+  const documentDirection = uiLocale === "ar" ? "rtl" : "ltr";
+  const [selected, setSelected] = useState4(initialKeys);
   useEffect3(() => {
     if (open) {
       setSelected(initialKeys);
@@ -10114,12 +10266,13 @@ function CitePickerPopover({
         references.length === 0 ? /* @__PURE__ */ jsx8("p", { className: "butex-document2-widget__cite-picker-empty", children: messages.noReferencesYet }) : /* @__PURE__ */ jsx8("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__ */ jsx8("li", { children: /* @__PURE__ */ jsxs6("label", { className: "butex-document2-widget__cite-picker-item", children: [
             /* @__PURE__ */ jsx8("input", { type: "checkbox", checked, onChange: () => toggleKey(reference.key) }),
             /* @__PURE__ */ jsxs6("span", { children: [
               /* @__PURE__ */ jsxs6("strong", { children: [
                 "[",
-                index + 1,
+                numberLabel,
                 "] ",
                 reference.key
               ] }),
@@ -10147,16 +10300,16 @@ function CitePickerPopover({
 }
 
 // src/react-document2/DocumentInsertToolbar.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 
 // src/react-document2/TableInsertPopover.tsx
-import { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function TableInsertPopover({ uiLocale = "ar", onConfirm }) {
   const messages = document2Messages(uiLocale);
-  const [open, setOpen] = useState4(false);
-  const [rows, setRows] = useState4("3");
-  const [cols, setCols] = useState4("3");
+  const [open, setOpen] = useState5(false);
+  const [rows, setRows] = useState5("3");
+  const [cols, setCols] = useState5("3");
   const rootRef = useRef4(null);
   useEffect4(() => {
     if (!open) {
@@ -10249,7 +10402,7 @@ function DocumentInsertToolbar({
   onDigitFormChange
 }) {
   const messages = document2Messages(uiLocale);
-  const [digitMenuOpen, setDigitMenuOpen] = useState5(false);
+  const [digitMenuOpen, setDigitMenuOpen] = useState6(false);
   function digitTitle(id) {
     if (id === "arabicIndic") {
       return messages.arabicIndicDigits;
@@ -10420,7 +10573,8 @@ function PreviewBlock({
   output,
   resolveImageUrl,
   uiLocale,
-  documentDirection
+  documentDirection,
+  digitForm
 }) {
   const messages = document2Messages(uiLocale);
   const floatCaptionSeparator = uiLocale === "ar" ? ": " : ". ";
@@ -10479,7 +10633,8 @@ function PreviewBlock({
           output,
           resolveImageUrl,
           uiLocale,
-          documentDirection
+          documentDirection,
+          digitForm
         },
         child.id
       ))
@@ -10509,10 +10664,10 @@ function PreviewBlock({
       ] }),
       " ",
       /* @__PURE__ */ jsxs9("span", { children: [
-        [item.authors, item.title, item.venue, item.year].filter(Boolean).join(", "),
+        bibliographyEntryBody(item, item.fieldSeparator, { digitForm }),
         item.url ? /* @__PURE__ */ jsxs9(Fragment, { children: [
           " ",
-          /* @__PURE__ */ jsx11("a", { href: item.url, target: "_blank", rel: "noreferrer", children: item.url })
+          /* @__PURE__ */ jsx11("a", { href: absoluteHttpHref(item.url), target: "_blank", rel: "noreferrer", children: item.url })
         ] }) : null
       ] })
     ] }, item.id)) });
@@ -10524,9 +10679,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__ */ jsxs9("div", { className: "butex-document2-widget__preview", dir: documentDirection, children: [
     blocks.map((block) => /* @__PURE__ */ jsx11(
@@ -10536,7 +10693,8 @@ function DocumentPreview({
         output,
         resolveImageUrl,
         uiLocale,
-        documentDirection
+        documentDirection,
+        digitForm: resolvedDigitForm
       },
       block.id
     )),
@@ -10545,7 +10703,7 @@ function DocumentPreview({
 }
 
 // src/react-document2/EquationDrawer.tsx
-import { useEffect as useEffect6, useRef as useRef6 } from "react";
+import { useEffect as useEffect6, useRef as useRef6, useState as useState8 } from "react";
 
 // src/react/ButexEditor.tsx
 import {
@@ -10554,7 +10712,7 @@ import {
   useEffect as useEffect5,
   useImperativeHandle,
   useRef as useRef5,
-  useState as useState6
+  useState as useState7
 } from "react";
 
 // src/react/widgetChromeCss.ts
@@ -11626,32 +11784,32 @@ var ButexEditor = forwardRef(
     const onSessionChangeRef = useRef5(onSessionChange);
     onSessionChangeRef.current = onSessionChange;
     const debugBodyHiddenRef = useRef5(false);
-    const [debugBodyHidden, setDebugBodyHidden] = useState6(false);
+    const [debugBodyHidden, setDebugBodyHidden] = useState7(false);
     debugBodyHiddenRef.current = debugBodyHidden;
-    const [digitMenuOpen, setDigitMenuOpen] = useState6(false);
-    const [characterFontMenuOpen, setCharacterFontMenuOpen] = useState6(false);
-    const [delimiterMenuOpen, setDelimiterMenuOpen] = useState6(false);
-    const [matrixMenuOpen, setMatrixMenuOpen] = useState6(false);
-    const [spacingMenuOpen, setSpacingMenuOpen] = useState6(false);
-    const [functionMenuOpen, setFunctionMenuOpen] = useState6(false);
-    const [limitsSeriesMenuOpen, setLimitsSeriesMenuOpen] = useState6(false);
-    const [function2MenuOpen, setFunction2MenuOpen] = useState6(false);
-    const [derivativeMenuOpen, setDerivativeMenuOpen] = useState6(false);
-    const [groupMenuOpen, setGroupMenuOpen] = useState6(false);
-    const [operatorMenuOpen, setOperatorMenuOpen] = useState6(false);
-    const [operator2MenuOpen, setOperator2MenuOpen] = useState6(false);
-    const [operator3MenuOpen, setOperator3MenuOpen] = useState6(false);
-    const [dotMenuOpen, setDotMenuOpen] = useState6(false);
-    const [integralMenuOpen, setIntegralMenuOpen] = useState6(false);
-    const [selectedDigitForm2, setSelectedDigitForm] = useState6("western");
-    const [selectedCharacterFont, setSelectedCharacterFont] = useState6("default");
-    const [activeEditorSide, setActiveEditorSide] = useState6("arabic");
-    const [envPaletteMode, setEnvPaletteMode] = useState6("matrix");
-    const [matrixStyle, setMatrixStyle] = useState6("pmatrix");
-    const [matrixRows, setMatrixRows] = useState6(2);
-    const [matrixColumns, setMatrixColumns] = useState6(2);
-    const [matrixHover, setMatrixHover] = useState6(null);
-    const [arrayAlignmentColumn, setArrayAlignmentColumn] = useState6(1);
+    const [digitMenuOpen, setDigitMenuOpen] = useState7(false);
+    const [characterFontMenuOpen, setCharacterFontMenuOpen] = useState7(false);
+    const [delimiterMenuOpen, setDelimiterMenuOpen] = useState7(false);
+    const [matrixMenuOpen, setMatrixMenuOpen] = useState7(false);
+    const [spacingMenuOpen, setSpacingMenuOpen] = useState7(false);
+    const [functionMenuOpen, setFunctionMenuOpen] = useState7(false);
+    const [limitsSeriesMenuOpen, setLimitsSeriesMenuOpen] = useState7(false);
+    const [function2MenuOpen, setFunction2MenuOpen] = useState7(false);
+    const [derivativeMenuOpen, setDerivativeMenuOpen] = useState7(false);
+    const [groupMenuOpen, setGroupMenuOpen] = useState7(false);
+    const [operatorMenuOpen, setOperatorMenuOpen] = useState7(false);
+    const [operator2MenuOpen, setOperator2MenuOpen] = useState7(false);
+    const [operator3MenuOpen, setOperator3MenuOpen] = useState7(false);
+    const [dotMenuOpen, setDotMenuOpen] = useState7(false);
+    const [integralMenuOpen, setIntegralMenuOpen] = useState7(false);
+    const [selectedDigitForm2, setSelectedDigitForm] = useState7("western");
+    const [selectedCharacterFont, setSelectedCharacterFont] = useState7("default");
+    const [activeEditorSide, setActiveEditorSide] = useState7("arabic");
+    const [envPaletteMode, setEnvPaletteMode] = useState7("matrix");
+    const [matrixStyle, setMatrixStyle] = useState7("pmatrix");
+    const [matrixRows, setMatrixRows] = useState7(2);
+    const [matrixColumns, setMatrixColumns] = useState7(2);
+    const [matrixHover, setMatrixHover] = useState7(null);
+    const [arrayAlignmentColumn, setArrayAlignmentColumn] = useState7(1);
     useImperativeHandle(ref, () => ({
       getRuntime: () => runtimeRef.current
     }));
@@ -12836,6 +12994,18 @@ ButexEditor.displayName = "ButexEditor";
 
 // src/react-document2/EquationDrawer.tsx
 import { jsx as jsx13, jsxs as jsxs11 } from "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,
@@ -12845,6 +13015,9 @@ function EquationDrawer({
   uiLocale = "ar",
   labelEnabled = false,
   label = "",
+  labels = [],
+  references = [],
+  ownerId = "",
   onLabelEnabledChange,
   onLabelChange,
   onMathModeChange,
@@ -12854,6 +13027,16 @@ function EquationDrawer({
 }) {
   const messages = document2Messages(uiLocale);
   const latestSession = useRef6(session);
+  const [labelOverride, setLabelOverride] = useState8(null);
+  const displayedLabel = labelOverride ?? label;
+  const labelError = labelEnabled && mathMode === "display" ? document2KeyError(displayedLabel, {
+    references,
+    labels,
+    excludeOwnerId: ownerId || void 0
+  }) : null;
+  useEffect6(() => {
+    setLabelOverride(null);
+  }, [ownerId, label]);
   useEffect6(() => {
     const onKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -12914,12 +13097,27 @@ function EquationDrawer({
               /* @__PURE__ */ jsx13(
                 "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__ */ jsx13("p", { className: "butex-document2-widget__field-error", children: labelError === "invalid" ? messages.keyRulesHint : keyErrorMessage2(labelError, messages) }) : null
             ] }) : null
           ] }) : null,
           reason ? /* @__PURE__ */ jsx13("p", { className: "butex-document2-widget__error", children: uiLocale === "en" ? messages.equationUnavailable : reason }) : null,
@@ -12937,7 +13135,15 @@ function EquationDrawer({
           ),
           /* @__PURE__ */ jsxs11("div", { className: "butex-document2-widget__row", children: [
             canDelete && onDelete ? /* @__PURE__ */ jsx13("button", { type: "button", className: "butex-document2-widget__button--danger", onClick: onDelete, children: messages.deleteEquation }) : null,
-            /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => onSave({ ...latestSession.current, activeSide: equationSide }), children: messages.saveEquation })
+            /* @__PURE__ */ jsx13(
+              "button",
+              {
+                type: "button",
+                disabled: labelEnabled && mathMode === "display" && labelError !== null,
+                onClick: () => onSave({ ...latestSession.current, activeSide: equationSide }),
+                children: messages.saveEquation
+              }
+            )
           ] })
         ]
       }
@@ -12946,92 +13152,243 @@ function EquationDrawer({
 }
 
 // src/react-document2/LabelsPanel.tsx
+import { useState as useState9 } from "react";
 import { jsx as jsx14, jsxs as jsxs12 } from "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 (kind === "tab") {
-    return messages.labelKindTab;
+  if (error === "invalid") {
+    return messages.keyInvalid;
   }
-  return messages.labelKindEq;
+  if (error === "duplicate") {
+    return messages.keyDuplicate;
+  }
+  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] = useState9({});
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ jsx14("div", { className: "butex-document2-widget__refs-backdrop", role: "presentation", onClick: onClose, children: /* @__PURE__ */ jsxs12("div", { className: "butex-document2-widget__refs-panel", role: "dialog", "aria-label": messages.labelsTitle, onClick: (event) => event.stopPropagation(), children: [
-    /* @__PURE__ */ jsxs12("header", { className: "butex-document2-widget__refs-header", children: [
-      /* @__PURE__ */ jsx14("strong", { children: messages.labelsTitle }),
-      /* @__PURE__ */ jsx14("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.close, "aria-label": messages.close, onClick: onClose, children: "\xD7" })
-    ] }),
-    /* @__PURE__ */ jsx14("p", { className: "butex-document2-widget__labels-help", children: messages.labelsHelp }),
-    labels.length === 0 ? /* @__PURE__ */ jsx14("p", { className: "butex-document2-widget__cite-picker-empty", children: messages.noLabelsYet }) : /* @__PURE__ */ jsx14("ul", { className: "butex-document2-widget__refs-list", children: labels.map((entry) => /* @__PURE__ */ jsxs12("li", { className: "butex-document2-widget__refs-item", children: [
-      /* @__PURE__ */ jsx14("div", { className: "butex-document2-widget__refs-item-head", children: /* @__PURE__ */ jsxs12("strong", { children: [
-        "[",
-        kindLabel(entry.kind, uiLocale),
-        " ",
-        entry.number,
-        "] ",
-        entry.key
-      ] }) }),
-      /* @__PURE__ */ jsxs12("div", { className: "butex-document2-widget__refs-grid", children: [
-        /* @__PURE__ */ jsxs12("label", { className: "butex-document2-widget__refs-field", children: [
-          /* @__PURE__ */ jsx14("span", { children: messages.floatLabel }),
-          /* @__PURE__ */ jsx14(
-            "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__ */ jsx14("div", { className: "butex-document2-widget__refs-backdrop", role: "presentation", onClick: onClose, children: /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      className: "butex-document2-widget__refs-panel",
+      role: "dialog",
+      "aria-label": messages.labelsTitle,
+      onClick: (event) => event.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxs12("header", { className: "butex-document2-widget__refs-header", children: [
+          /* @__PURE__ */ jsx14("strong", { children: messages.labelsTitle }),
+          /* @__PURE__ */ jsx14("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__ */ jsxs12("label", { className: "butex-document2-widget__refs-field", children: [
-          /* @__PURE__ */ jsx14("span", { children: messages.floatCaption }),
-          /* @__PURE__ */ jsx14(
-            "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__ */ jsx14("p", { className: "butex-document2-widget__labels-help", children: messages.labelsHelp }),
+        labels.length === 0 ? /* @__PURE__ */ jsx14("p", { className: "butex-document2-widget__cite-picker-empty", children: messages.noLabelsYet }) : /* @__PURE__ */ jsx14("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__ */ jsxs12("li", { className: "butex-document2-widget__refs-item", children: [
+            /* @__PURE__ */ jsxs12("div", { className: "butex-document2-widget__refs-item-head", children: [
+              /* @__PURE__ */ jsx14("strong", { children: title }),
+              /* @__PURE__ */ jsx14("span", { className: "butex-document2-widget__refs-item-key", children: entry.key })
+            ] }),
+            /* @__PURE__ */ jsx14(
+              "div",
+              {
+                className: "butex-document2-widget__modal-preview",
+                dir: uiLocaleDirection(uiLocale),
+                "aria-label": messages.captionPreview,
+                children: captionPreview
               }
-            }
-          )
-        ] }) : null
-      ] })
-    ] }, `${entry.kind}:${entry.ownerId}`)) })
-  ] }) });
+            ),
+            /* @__PURE__ */ jsxs12("div", { className: "butex-document2-widget__refs-grid", children: [
+              /* @__PURE__ */ jsxs12("label", { className: "butex-document2-widget__refs-field", children: [
+                /* @__PURE__ */ jsx14("span", { children: messages.floatLabel }),
+                /* @__PURE__ */ jsx14(
+                  "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__ */ jsx14("p", { className: "butex-document2-widget__field-error", children: entryKeyError === "invalid" ? messages.keyRulesHint : keyErrorMessage3(entryKeyError, messages) }) : null
+              ] }),
+              entry.kind === "fig" || entry.kind === "tab" ? /* @__PURE__ */ jsxs12("label", { className: "butex-document2-widget__refs-field", children: [
+                /* @__PURE__ */ jsx14("span", { children: messages.floatCaption }),
+                /* @__PURE__ */ jsx14(
+                  "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
-import { useState as useState7 } from "react";
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
-var EMPTY_DRAFT = { key: "", authors: "", title: "", year: "", url: "", venue: "" };
+import { useMemo, useState as useState10 } from "react";
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+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__ */ jsxs13("div", { className: "butex-document2-widget__refs-field butex-document2-widget__refs-separator", children: [
+    /* @__PURE__ */ jsx15("span", { children: messages.referenceFieldSeparator }),
+    /* @__PURE__ */ jsxs13("div", { className: "butex-document2-widget__refs-separator-toggle", role: "group", "aria-label": messages.referenceFieldSeparator, children: [
+      /* @__PURE__ */ jsx15(
+        "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__ */ jsx15(
+        "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__ */ jsxs13(
+    "div",
+    {
+      className: "butex-document2-widget__modal-preview",
+      dir: uiLocaleDirection(uiLocale),
+      "aria-label": messages.referencePreview,
+      children: [
+        numberLabel ? /* @__PURE__ */ jsxs13("span", { className: "butex-document2-widget__modal-preview-number", children: [
+          "[",
+          numberLabel,
+          "] "
+        ] }) : null,
+        body.length > 0 ? body : /* @__PURE__ */ jsx15("span", { className: "butex-document2-widget__cite-picker-empty", children: "\u2026" }),
+        url.trim().length > 0 ? /* @__PURE__ */ jsxs13(Fragment3, { children: [
+          " ",
+          /* @__PURE__ */ jsx15("span", { className: "butex-document2-widget__modal-preview-url", children: url.trim() })
+        ] }) : null
+      ]
+    }
+  );
+}
 function ReferencesPanel({
   open,
   references,
+  labels = [],
   uiLocale = "ar",
+  digitForm = "arabicIndic",
   onClose,
   onAdd,
   onUpdate,
@@ -13039,101 +13396,190 @@ function ReferencesPanel({
   onMove
 }) {
   const messages = document2Messages(uiLocale);
-  const [draft, setDraft] = useState7(EMPTY_DRAFT);
+  const [draft, setDraft] = useState10(EMPTY_DRAFT);
+  const [draftKeyTouched, setDraftKeyTouched] = useState10(false);
+  const [keyOverrides, setKeyOverrides] = useState10({});
+  const draftSeparator = draft.field_separator === "," ? "," : DEFAULT_REFERENCE_FIELD_SEPARATOR;
+  const documentDirection = uiLocale === "ar" ? "rtl" : "ltr";
+  const draftKeyError = useMemo(
+    () => document2KeyError(draft.key ?? "", {
+      references,
+      labels
+    }),
+    [draft.key, references, labels]
+  );
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ jsx15("div", { className: "butex-document2-widget__refs-backdrop", role: "presentation", onClick: onClose, children: /* @__PURE__ */ jsxs13("div", { className: "butex-document2-widget__refs-panel", role: "dialog", "aria-label": messages.referencesTitle, onClick: (event) => event.stopPropagation(), children: [
-    /* @__PURE__ */ jsxs13("header", { className: "butex-document2-widget__refs-header", children: [
-      /* @__PURE__ */ jsx15("strong", { children: messages.referencesTitle }),
-      /* @__PURE__ */ jsx15("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.close, "aria-label": messages.close, onClick: onClose, children: "\xD7" })
-    ] }),
-    /* @__PURE__ */ jsxs13("div", { className: "butex-document2-widget__refs-add", children: [
-      /* @__PURE__ */ jsx15("h3", { children: messages.addReference }),
-      /* @__PURE__ */ jsx15("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__ */ jsxs13("label", { className: "butex-document2-widget__refs-field", children: [
-        /* @__PURE__ */ jsx15("span", { children: label }),
-        /* @__PURE__ */ jsx15(
-          "input",
-          {
-            value: draft[field] ?? "",
-            onChange: (event) => {
-              const value = event.currentTarget.value;
-              setDraft((current) => ({ ...current, [field]: value }));
-            }
-          }
-        )
-      ] }, field)) }),
-      /* @__PURE__ */ jsx15(
-        "button",
-        {
-          type: "button",
-          className: "butex-document2-widget__primary-btn",
-          disabled: !draft.key?.trim(),
-          onClick: () => {
-            onAdd(draft);
-            setDraft(EMPTY_DRAFT);
-          },
-          children: messages.addReference
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx15("ul", { className: "butex-document2-widget__refs-list", children: references.map((reference, index) => /* @__PURE__ */ jsxs13("li", { className: "butex-document2-widget__refs-item", children: [
-      /* @__PURE__ */ jsxs13("div", { className: "butex-document2-widget__refs-item-head", children: [
-        /* @__PURE__ */ jsxs13("strong", { children: [
-          "[",
-          index + 1,
-          "] ",
-          reference.key
+  return /* @__PURE__ */ jsx15("div", { className: "butex-document2-widget__refs-backdrop", role: "presentation", onClick: onClose, children: /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      className: "butex-document2-widget__refs-panel",
+      role: "dialog",
+      "aria-label": messages.referencesTitle,
+      onClick: (event) => event.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxs13("header", { className: "butex-document2-widget__refs-header", children: [
+          /* @__PURE__ */ jsx15("strong", { children: messages.referencesTitle }),
+          /* @__PURE__ */ jsx15("button", { type: "button", className: "butex-document2-widget__icon-btn", title: messages.close, "aria-label": messages.close, onClick: onClose, children: "\xD7" })
         ] }),
-        /* @__PURE__ */ jsxs13("div", { className: "butex-document2-widget__refs-item-actions", children: [
-          /* @__PURE__ */ jsx15("button", { type: "button", title: messages.moveUp, "aria-label": messages.moveUp, disabled: index === 0, onClick: () => onMove(reference.id, -1), children: "\u2191" }),
+        /* @__PURE__ */ jsxs13("div", { className: "butex-document2-widget__refs-add", children: [
+          /* @__PURE__ */ jsx15("h3", { children: messages.addReference }),
+          /* @__PURE__ */ jsxs13("div", { className: "butex-document2-widget__refs-grid", children: [
+            REFERENCE_FIELDS.map(([field, messageKey]) => /* @__PURE__ */ jsxs13("label", { className: "butex-document2-widget__refs-field", children: [
+              /* @__PURE__ */ jsx15("span", { children: messages[messageKey] }),
+              /* @__PURE__ */ jsx15(
+                "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__ */ jsx15("p", { className: "butex-document2-widget__field-error", children: draftKeyError === "invalid" ? messages.keyRulesHint : keyErrorMessage4(draftKeyError, messages) }) : null
+            ] }, field)),
+            /* @__PURE__ */ jsx15(
+              FieldSeparatorToggle,
+              {
+                value: draftSeparator,
+                messages,
+                onChange: (next) => setDraft((current) => ({ ...current, field_separator: next }))
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx15(
-            "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__ */ jsx15("button", { type: "button", title: messages.deleteReference, "aria-label": messages.deleteReference, onClick: () => onRemove(reference.id), children: "\xD7" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx15("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__ */ jsxs13("label", { className: "butex-document2-widget__refs-field", children: [
-        /* @__PURE__ */ jsx15("span", { children: label }),
-        /* @__PURE__ */ jsx15(
-          "input",
-          {
-            value: reference[field],
-            onChange: (event) => {
-              const value = event.currentTarget.value;
-              onUpdate(reference.id, { [field]: value });
+          /* @__PURE__ */ jsx15(
+            "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__ */ jsx15("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__ */ jsxs13("li", { className: "butex-document2-widget__refs-item", children: [
+            /* @__PURE__ */ jsxs13("div", { className: "butex-document2-widget__refs-item-head", children: [
+              /* @__PURE__ */ jsxs13("strong", { children: [
+                "[",
+                numberLabel,
+                "] ",
+                reference.key
+              ] }),
+              /* @__PURE__ */ jsxs13("div", { className: "butex-document2-widget__refs-item-actions", children: [
+                /* @__PURE__ */ jsx15("button", { type: "button", title: messages.moveUp, "aria-label": messages.moveUp, disabled: index === 0, onClick: () => onMove(reference.id, -1), children: "\u2191" }),
+                /* @__PURE__ */ jsx15(
+                  "button",
+                  {
+                    type: "button",
+                    title: messages.moveDown,
+                    "aria-label": messages.moveDown,
+                    disabled: index === references.length - 1,
+                    onClick: () => onMove(reference.id, 1),
+                    children: "\u2193"
+                  }
+                ),
+                /* @__PURE__ */ jsx15("button", { type: "button", title: messages.deleteReference, "aria-label": messages.deleteReference, onClick: () => onRemove(reference.id), children: "\xD7" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx15(
+              ReferencePreview,
+              {
+                authors: reference.authors,
+                title: reference.title,
+                venue: reference.venue,
+                year: reference.year,
+                url: reference.url,
+                fieldSeparator: reference.fieldSeparator,
+                numberLabel,
+                messages,
+                uiLocale,
+                digitForm
+              }
+            ),
+            /* @__PURE__ */ jsxs13("div", { className: "butex-document2-widget__refs-grid", children: [
+              REFERENCE_FIELDS.map(([field, messageKey]) => /* @__PURE__ */ jsxs13("label", { className: "butex-document2-widget__refs-field", children: [
+                /* @__PURE__ */ jsx15("span", { children: messages[messageKey] }),
+                /* @__PURE__ */ jsx15(
+                  "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__ */ jsx15("p", { className: "butex-document2-widget__field-error", children: entryKeyError === "invalid" ? messages.keyRulesHint : keyErrorMessage4(entryKeyError, messages) }) : null
+              ] }, field)),
+              /* @__PURE__ */ jsx15(
+                FieldSeparatorToggle,
+                {
+                  value: reference.fieldSeparator,
+                  messages,
+                  onChange: (next) => onUpdate(reference.id, { field_separator: next })
+                }
+              )
+            ] })
+          ] }, reference.id);
+        }) })
+      ]
+    }
+  ) });
 }
 
 // src/react-document2/RefPickerPopover.tsx
-import { useEffect as useEffect7, useState as useState8 } from "react";
+import { useEffect as useEffect7, useState as useState11 } from "react";
 import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 function RefPickerPopover({
   open,
@@ -13141,13 +13587,15 @@ function RefPickerPopover({
   initialKeys = [],
   initialRefCommand = "ref",
   uiLocale = "ar",
+  digitForm = "arabicIndic",
   onClose,
   onConfirm,
   onManageLabels
 }) {
   const messages = document2Messages(uiLocale);
-  const [selected, setSelected] = useState8(initialKeys);
-  const [refCommand, setRefCommand] = useState8(initialRefCommand);
+  const documentDirection = uiLocale === "ar" ? "rtl" : "ltr";
+  const [selected, setSelected] = useState11(initialKeys);
+  const [refCommand, setRefCommand] = useState11(initialRefCommand);
   useEffect7(() => {
     if (open) {
       setSelected(initialKeys);
@@ -13175,16 +13623,18 @@ function RefPickerPopover({
         ] }),
         labels.length === 0 ? /* @__PURE__ */ jsx16("p", { className: "butex-document2-widget__cite-picker-empty", children: messages.noLabelsYet }) : /* @__PURE__ */ jsx16("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__ */ jsx16("li", { children: /* @__PURE__ */ jsxs14("label", { className: "butex-document2-widget__cite-picker-item", children: [
             /* @__PURE__ */ jsx16("input", { type: "radio", name: "butex-ref-key", checked, onChange: () => selectKey(entry.key, entry.kind) }),
             /* @__PURE__ */ jsxs14("span", { children: [
               /* @__PURE__ */ jsxs14("strong", { children: [
-                "[",
-                entry.kind,
+                title,
                 " ",
-                entry.number,
-                "] ",
-                entry.key
+                /* @__PURE__ */ jsx16("span", { className: "butex-document2-widget__refs-item-key", children: entry.key })
               ] }),
               entry.caption ? /* @__PURE__ */ jsx16("span", { className: "butex-document2-widget__cite-picker-meta", children: entry.caption }) : null
             ] })
@@ -14376,6 +14826,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;
@@ -14384,6 +14852,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;
@@ -14666,7 +15186,7 @@ function injectBuTeXDocument2Styles(doc) {
 }
 
 // src/react-document2/ButexDocumentEditor2.tsx
-import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function mathDelimiters(mode) {
   return mode === "inline" ? { opening: "$", closing: "$" } : { opening: "\\[", closing: "\\]" };
 }
@@ -14875,24 +15395,24 @@ function ButexDocumentEditor2({
   onLatexChange
 }) {
   const messages = document2Messages(uiLocale);
-  const initialState = useMemo(
+  const initialState = useMemo2(
     () => resolveInitialDocument2(initialDocument, uiLocale, documentMeta),
     [initialDocument, documentMeta, uiLocale]
   );
-  const [documentNode, setDocumentNode] = useState9(initialState.document);
-  const [error, setError] = useState9(initialState.error);
-  const [editorOpen, setEditorOpen] = useState9(true);
-  const [previewOpen, setPreviewOpen] = useState9(true);
-  const [selectedMath, setSelectedMath] = useState9(null);
-  const [citePicker, setCitePicker] = useState9(null);
-  const [referencesOpen, setReferencesOpen] = useState9(false);
-  const [labelsOpen, setLabelsOpen] = useState9(false);
-  const [refPicker, setRefPicker] = useState9(null);
-  const [digitFormState, setDigitFormState] = useState9(null);
-  const [editorFocus, setEditorFocus] = useState9(createEmptyDocument2EditorFocus());
-  const [collapsedBlockIds, setCollapsedBlockIds] = useState9(() => /* @__PURE__ */ new Set());
-  const [blockSelectionState, setBlockSelectionState] = useState9(emptyBlockSelection);
-  const [historyTick, setHistoryTick] = useState9(0);
+  const [documentNode, setDocumentNode] = useState12(initialState.document);
+  const [error, setError] = useState12(initialState.error);
+  const [editorOpen, setEditorOpen] = useState12(true);
+  const [previewOpen, setPreviewOpen] = useState12(true);
+  const [selectedMath, setSelectedMath] = useState12(null);
+  const [citePicker, setCitePicker] = useState12(null);
+  const [referencesOpen, setReferencesOpen] = useState12(false);
+  const [labelsOpen, setLabelsOpen] = useState12(false);
+  const [refPicker, setRefPicker] = useState12(null);
+  const [digitFormState, setDigitFormState] = useState12(null);
+  const [editorFocus, setEditorFocus] = useState12(createEmptyDocument2EditorFocus());
+  const [collapsedBlockIds, setCollapsedBlockIds] = useState12(() => /* @__PURE__ */ new Set());
+  const [blockSelectionState, setBlockSelectionState] = useState12(emptyBlockSelection);
+  const [historyTick, setHistoryTick] = useState12(0);
   const digitForm = digitFormProp ?? digitFormState ?? (documentDirection === "rtl" ? "arabicIndic" : "western");
   const historyRef = useRef7(createDocument2History());
   const documentRef = useRef7(documentNode);
@@ -14903,8 +15423,8 @@ function ButexDocumentEditor2({
   const pendingFocusRef = useRef7(null);
   documentRef.current = documentNode;
   const latex = document2Latex(documentNode);
-  const documentLabels = useMemo(() => collectDocument2Labels(documentNode), [documentNode]);
-  const preview = useMemo(
+  const documentLabels = useMemo2(() => collectDocument2Labels(documentNode), [documentNode]);
+  const preview = useMemo2(
     () => document2Preview(documentNode, mathOutput, equationSide, {
       documentDirection,
       digitForm,
@@ -14912,7 +15432,7 @@ function ButexDocumentEditor2({
     }),
     [documentNode, documentDirection, digitForm, equationSide, mathOutput, uiLocale]
   );
-  const debugEnabled = useMemo(() => {
+  const debugEnabled = useMemo2(() => {
     if (debug) {
       return true;
     }
@@ -14921,8 +15441,8 @@ function ButexDocumentEditor2({
     }
     return new URLSearchParams(window.location.search).get("debug") === "1";
   }, [debug]);
-  const canUndo = useMemo(() => document2HistoryCanUndo(historyRef.current), [historyTick, documentNode]);
-  const canRedo = useMemo(() => document2HistoryCanRedo(historyRef.current), [historyTick, documentNode]);
+  const canUndo = useMemo2(() => document2HistoryCanUndo(historyRef.current), [historyTick, documentNode]);
+  const canRedo = useMemo2(() => 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);
@@ -15583,6 +16103,7 @@ function ButexDocumentEditor2({
                       output: mathOutput,
                       documentDirection,
                       uiLocale,
+                      digitForm,
                       resolveImageUrl
                     }
                   )
@@ -15592,7 +16113,7 @@ function ButexDocumentEditor2({
           }
         ),
         debugEnabled ? /* @__PURE__ */ jsxs15("div", { className: "butex-document2-widget__dev", children: [
-          debugEnabled && documentNode.diagnostics.length > 0 ? /* @__PURE__ */ jsxs15(Fragment3, { children: [
+          debugEnabled && documentNode.diagnostics.length > 0 ? /* @__PURE__ */ jsxs15(Fragment4, { children: [
             /* @__PURE__ */ jsx17("strong", { children: messages.importWarnings }),
             documentNode.diagnostics.map((diagnostic) => /* @__PURE__ */ jsx17("p", { className: "butex-document2-widget__dev-diagnostic", children: formatDocument2Diagnostic(diagnostic, messages) }, `${diagnostic.path}-${diagnostic.message}`))
           ] }) : null,
@@ -15612,6 +16133,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),
@@ -15627,6 +16151,7 @@ function ButexDocumentEditor2({
             references: documentNode.references,
             initialKeys: citePicker?.keys ?? [],
             uiLocale,
+            digitForm,
             onClose: () => setCitePicker(null),
             onConfirm: confirmCiteKeys,
             onManageReferences: () => {
@@ -15643,6 +16168,7 @@ function ButexDocumentEditor2({
             initialKeys: refPicker?.keys ?? [],
             initialRefCommand: refPicker?.refCommand ?? "ref",
             uiLocale,
+            digitForm,
             onClose: () => setRefPicker(null),
             onConfirm: confirmRefKeys,
             onManageLabels: () => {
@@ -15656,7 +16182,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"),
@@ -15669,7 +16197,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),