@drghaliasri/butex 5.6.0 → 6.0.0

package/dist/react-document2.js

@@ -38,8 +38,9 @@ var import_react = require("react");
 
 // src/document2/ids.ts
 var nextId = 1;
+var instanceId = `${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}`;
 function document2Id(prefix) {
-  const id = `${prefix}_${String(nextId)}`;
+  const id = `${prefix}_${instanceId}_${String(nextId)}`;
   nextId += 1;
   return id;
 }
@@ -1204,6 +1205,19 @@ function asBlockJson(value) {
   }
   return value;
 }
+function blockIdFromJson(json, state) {
+  const imported = typeof json.id === "string" ? json.id.trim() : "";
+  if (imported.length > 0 && !state.used.has(imported)) {
+    state.used.add(imported);
+    return imported;
+  }
+  let generated = document2Id("block");
+  while (state.used.has(generated)) {
+    generated = document2Id("block");
+  }
+  state.used.add(generated);
+  return generated;
+}
 function pushDiagnostic(diagnostics, options, path, message) {
   if (options.strict) {
     throw new Error(message);
@@ -1385,40 +1399,44 @@ function pushFormattedTextTokens(tokens, text, sourceStart, formats) {
 function closingForList(command) {
   return command === "\\begin{itemize}" ? "\\end{itemize}" : "\\end{enumerate}";
 }
-function parseTextBlock(json, options, path, diagnostics) {
+function parseTextBlock(json, options, path, diagnostics, blockIds) {
   const value = requireString(json.value, `${json.command} requires string value`);
   return {
-    id: document2Id("block"),
+    id: blockIdFromJson(json, blockIds),
     kind: "textBlock",
     command: json.command,
     field: createInlineField2(value, json.math_objects ?? [], options, `${path}.value`, diagnostics, json.command === "\\paragraph" ? json.formats ?? [] : []),
     ...json.centered === true ? { centered: true } : {}
   };
 }
-function parseListItem(json, options, path, diagnostics) {
+function parseListItem(json, options, path, diagnostics, blockIds) {
   const value = requireString(json.value, "Document list item requires string value");
   const blocksJson = Array.isArray(json.blocks) ? json.blocks : [];
   return {
     id: document2Id("item"),
     field: createInlineField2(value, json.math_objects ?? [], options, `${path}.value`, diagnostics, json.formats ?? []),
-    blocks: blocksJson.map((block, index) => parseBlock(asBlockJson(block), options, `${path}.blocks[${String(index)}]`, diagnostics))
+    blocks: blocksJson.map(
+      (block, index) => parseBlock(asBlockJson(block), options, `${path}.blocks[${String(index)}]`, diagnostics, blockIds)
+    )
   };
 }
-function parseListBlock(json, options, path, diagnostics) {
+function parseListBlock(json, options, path, diagnostics, blockIds) {
   if (!Array.isArray(json.items)) {
     throw new Error(`${json.command} requires items array`);
   }
   const command = json.command;
   const closing = closingForList(command);
   return {
-    id: document2Id("block"),
+    id: blockIdFromJson(json, blockIds),
     kind: "list",
     command,
     closing,
-    items: json.items.map((item, index) => parseListItem(item, options, `${path}.items[${String(index)}]`, diagnostics))
+    items: json.items.map(
+      (item, index) => parseListItem(item, options, `${path}.items[${String(index)}]`, diagnostics, blockIds)
+    )
   };
 }
-function parseTableBlock(json, options, path, diagnostics) {
+function parseTableBlock(json, options, path, diagnostics, blockIds) {
   if (!Array.isArray(json.rows)) {
     throw new Error("\\begin{tabular} requires rows array");
   }
@@ -1441,7 +1459,7 @@ function parseTableBlock(json, options, path, diagnostics) {
     pushDiagnostic(diagnostics, options, path, `math_objects count mismatch: detected ${String(mathObjectIndex)}, got ${String(mathObjects.length)}`);
   }
   return {
-    id: document2Id("block"),
+    id: blockIdFromJson(json, blockIds),
     kind: "table",
     command: "\\begin{tabular}",
     closing: "\\end{tabular}",
@@ -1450,11 +1468,11 @@ function parseTableBlock(json, options, path, diagnostics) {
     ...parseFloatMetaFromJson(json)
   };
 }
-function parseImageBlock(json) {
+function parseImageBlock(json, blockIds) {
   const assetId = typeof json.asset_id === "string" && json.asset_id.length > 0 ? json.asset_id : void 0;
   const value = assetId !== void 0 ? typeof json.value === "string" ? json.value : "" : requireString(json.value, "\\includegraphics requires string value");
   return {
-    id: document2Id("block"),
+    id: blockIdFromJson(json, blockIds),
     kind: "image",
     command: "\\includegraphics",
     value,
@@ -1463,43 +1481,43 @@ function parseImageBlock(json) {
     ...parseFloatMetaFromJson(json)
   };
 }
-function parseRawBlock(json) {
+function parseRawBlock(json, blockIds) {
   return {
-    id: document2Id("block"),
+    id: blockIdFromJson(json, blockIds),
     kind: "raw",
     command: "\\raw",
     value: typeof json.value === "string" ? json.value : ""
   };
 }
-function parseBibliographyBlock() {
+function parseBibliographyBlock(json, blockIds) {
   return {
-    id: document2Id("block"),
+    id: blockIdFromJson(json, blockIds),
     kind: "bibliography",
     command: "\\begin{thebibliography}",
     closing: "\\end{thebibliography}"
   };
 }
-function parseBlock(json, options, path, diagnostics) {
+function parseBlock(json, options, path, diagnostics, blockIds) {
   if (TEXT_COMMANDS.has(json.command)) {
-    return parseTextBlock(json, options, path, diagnostics);
+    return parseTextBlock(json, options, path, diagnostics, blockIds);
   }
   if (LIST_COMMANDS.has(json.command)) {
-    return parseListBlock(json, options, path, diagnostics);
+    return parseListBlock(json, options, path, diagnostics, blockIds);
   }
   if (json.command === "\\begin{tabular}") {
-    return parseTableBlock(json, options, path, diagnostics);
+    return parseTableBlock(json, options, path, diagnostics, blockIds);
   }
   if (json.command === "\\includegraphics") {
-    return parseImageBlock(json);
+    return parseImageBlock(json, blockIds);
   }
   if (json.command === "\\begin{thebibliography}" || json.command === "\\bibliography") {
-    return parseBibliographyBlock();
+    return parseBibliographyBlock(json, blockIds);
   }
   if (json.command === "\\raw") {
-    return parseRawBlock(json);
+    return parseRawBlock(json, blockIds);
   }
   return {
-    id: document2Id("block"),
+    id: blockIdFromJson(json, blockIds),
     kind: "raw",
     command: "\\raw",
     value: typeof json.value === "string" ? json.value : json.command
@@ -1513,11 +1531,14 @@ function fromDocumentJson2(json, options = {}) {
     throw new Error("DocumentObject requires blocks array");
   }
   const diagnostics = [];
+  const blockIds = { used: /* @__PURE__ */ new Set() };
   return {
     nodeType: "DocumentObject",
     meta: normalizeDocument2Meta(json.meta),
     references: parseReferences(json.references),
-    blocks: json.blocks.map((block, index) => parseBlock(asBlockJson(block), options, `$.blocks[${String(index)}]`, diagnostics)),
+    blocks: json.blocks.map(
+      (block, index) => parseBlock(asBlockJson(block), options, `$.blocks[${String(index)}]`, diagnostics, blockIds)
+    ),
     diagnostics
   };
 }
@@ -8690,12 +8711,23 @@ function addDocument2TableBlock(document2, columns = "lll", rowCount = 3, colCou
   };
   return insertDocument2BlockAfter(document2, afterBlockId, block);
 }
-function addDocument2ImageBlock(document2, src = "", afterBlockId) {
+function normalizeImageInput(srcOrAsset) {
+  if (typeof srcOrAsset === "string") {
+    return srcOrAsset.length > 0 ? { value: srcOrAsset, assetId: srcOrAsset } : { value: "" };
+  }
+  if (srcOrAsset && srcOrAsset.assetId.length > 0) {
+    return { value: srcOrAsset.value ?? srcOrAsset.assetId, assetId: srcOrAsset.assetId };
+  }
+  return { value: "" };
+}
+function addDocument2ImageBlock(document2, srcOrAsset, afterBlockId) {
+  const image = normalizeImageInput(srcOrAsset);
   const block = {
     id: document2Id("block"),
     kind: "image",
     command: "\\includegraphics",
-    value: src,
+    value: image.value,
+    ...image.assetId !== void 0 ? { assetId: image.assetId } : {},
     options: { width: "0.8\\columnwidth" },
     ...defaultFloatMeta()
   };
@@ -8722,6 +8754,55 @@ function updateDocument2ImageValue(document2, blockId, value) {
   visit(next.blocks);
   return next;
 }
+function updateDocument2ImageAsset(document2, blockId, asset) {
+  const next = cloneDocument(document2);
+  const image = normalizeImageInput(asset);
+  function visit(blocks) {
+    for (const block of blocks) {
+      if (block.id === blockId && block.kind === "image") {
+        block.value = image.value;
+        if (image.assetId !== void 0) {
+          block.assetId = image.assetId;
+        } else {
+          delete block.assetId;
+        }
+        return true;
+      }
+      if (block.kind === "list") {
+        for (const item of block.items) {
+          if (visit(item.blocks)) {
+            return true;
+          }
+        }
+      }
+    }
+    return false;
+  }
+  visit(next.blocks);
+  return next;
+}
+function clearDocument2ImageAsset(document2, blockId) {
+  const next = cloneDocument(document2);
+  function visit(blocks) {
+    for (const block of blocks) {
+      if (block.id === blockId && block.kind === "image") {
+        block.value = "";
+        delete block.assetId;
+        return true;
+      }
+      if (block.kind === "list") {
+        for (const item of block.items) {
+          if (visit(item.blocks)) {
+            return true;
+          }
+        }
+      }
+    }
+    return false;
+  }
+  visit(next.blocks);
+  return next;
+}
 function updateDocument2ImageMeta(document2, blockId, patch) {
   const next = cloneDocument(document2);
   function visit(blocks) {
@@ -9017,6 +9098,159 @@ function updateDocument2Meta(document2, patch) {
   return next;
 }
 
+// src/document2/exportJson.ts
+function serializeField(field) {
+  let value = "";
+  let hasPersistedMath = false;
+  const formats = [];
+  const mathObjects = [];
+  for (const token of field.tokens) {
+    if (token.kind === "text") {
+      const start = value.length;
+      value += token.text;
+      if (token.text.length > 0 && (token.style?.bold || token.style?.italic || token.style?.underline)) {
+        formats.push({
+          start,
+          end: value.length,
+          ...token.style.bold ? { bold: true } : {},
+          ...token.style.italic ? { italic: true } : {},
+          ...token.style.underline ? { underline: true } : {}
+        });
+      }
+      continue;
+    }
+    if (token.kind === "cite") {
+      value += citeTokenLatex(token.keys);
+      continue;
+    }
+    if (token.kind === "ref") {
+      value += refTokenLatex(token.keys, token.refCommand);
+      continue;
+    }
+    value += token.source;
+    if (!token.math || token.sourceOwner === "raw") {
+      if (token.labelEnabled !== void 0 || token.label !== void 0) {
+        hasPersistedMath = true;
+        mathObjects.push({
+          node_type: "RawMathObject",
+          ...token.labelEnabled !== void 0 ? { label_enabled: token.labelEnabled } : {},
+          ...token.label !== void 0 ? { label: token.label } : {}
+        });
+      } else {
+        mathObjects.push(null);
+      }
+      continue;
+    }
+    hasPersistedMath = true;
+    mathObjects.push({
+      ...toMathObjectJson(token.math),
+      ...token.sourceSide ? { source_side: token.sourceSide } : {},
+      source_owner: token.sourceOwner,
+      ...token.labelEnabled !== void 0 ? { label_enabled: token.labelEnabled } : {},
+      ...token.label !== void 0 ? { label: token.label } : {}
+    });
+  }
+  return { value, formats, mathObjects, hasPersistedMath };
+}
+function fieldJson(field) {
+  const serialized = serializeField(field);
+  return {
+    value: serialized.value,
+    ...serialized.formats.length > 0 ? { formats: serialized.formats } : {},
+    ...serialized.hasPersistedMath ? { math_objects: serialized.mathObjects } : {}
+  };
+}
+function listItemJson(item) {
+  const field = fieldJson(item.field);
+  return {
+    value: field.value ?? "",
+    ...field.formats ? { formats: field.formats } : {},
+    ...field.math_objects ? { math_objects: field.math_objects } : {},
+    ...item.blocks.length > 0 ? { blocks: item.blocks.map(blockJson) } : {}
+  };
+}
+function blockJson(block) {
+  if (block.kind === "textBlock") {
+    return {
+      id: block.id,
+      command: block.command,
+      ...fieldJson(block.field),
+      ...block.command === "\\paragraph" ? { centered: block.centered === true } : {}
+    };
+  }
+  if (block.kind === "list") {
+    return {
+      id: block.id,
+      command: block.command,
+      closing: block.closing,
+      items: block.items.map(listItemJson)
+    };
+  }
+  if (block.kind === "table") {
+    const fields = block.rows.map((row) => row.map(serializeField));
+    const hasPersistedMath = fields.some((row) => row.some((field) => field.hasPersistedMath));
+    return {
+      id: block.id,
+      command: block.command,
+      closing: block.closing,
+      columns: block.columns,
+      rows: fields.map((row) => row.map((field) => field.value)),
+      ...fields.some((row) => row.some((field) => field.formats.length > 0)) ? { cell_formats: fields.map((row) => row.map((field) => field.formats)) } : {},
+      ...hasPersistedMath ? { math_objects: fields.flatMap((row) => row.flatMap((field) => field.mathObjects)) } : {},
+      centered: block.centered,
+      caption_enabled: block.captionEnabled,
+      caption: block.caption,
+      label_enabled: block.labelEnabled,
+      label: block.label
+    };
+  }
+  if (block.kind === "image") {
+    return {
+      id: block.id,
+      command: block.command,
+      value: block.value,
+      ...block.assetId !== void 0 ? { asset_id: block.assetId } : {},
+      options: { ...block.options },
+      centered: block.centered,
+      caption_enabled: block.captionEnabled,
+      caption: block.caption,
+      label_enabled: block.labelEnabled,
+      label: block.label
+    };
+  }
+  if (block.kind === "bibliography") {
+    return { id: block.id, command: block.command, closing: block.closing };
+  }
+  return { id: block.id, command: block.command, value: block.value };
+}
+function referenceJson(reference) {
+  return {
+    key: reference.key,
+    authors: reference.authors,
+    title: reference.title,
+    year: reference.year,
+    url: reference.url,
+    venue: reference.venue,
+    field_separator: reference.fieldSeparator
+  };
+}
+function toDocumentJson2(document2) {
+  if (document2.nodeType !== "DocumentObject" || !Array.isArray(document2.blocks)) {
+    throw new Error("toDocumentJson2 requires a live Document2Node");
+  }
+  return {
+    node_type: "DocumentObject",
+    meta: {
+      title: document2.meta.title,
+      authors: document2.meta.authors,
+      date: { ...document2.meta.date },
+      abstract: document2.meta.abstract
+    },
+    references: document2.references.map(referenceJson),
+    blocks: document2.blocks.map(blockJson)
+  };
+}
+
 // src/document2/keys.ts
 var DOCUMENT2_KEY_PATTERN = /^[\p{L}\p{M}0-9:._-]+$/u;
 function normalizeDocument2Key(key) {
@@ -9497,155 +9731,6 @@ ${body}
 `;
 }
 
-// src/document2/exportJson.ts
-function serializeField(field) {
-  let value = "";
-  let hasPersistedMath = false;
-  const formats = [];
-  const mathObjects = [];
-  for (const token of field.tokens) {
-    if (token.kind === "text") {
-      const start = value.length;
-      value += token.text;
-      if (token.text.length > 0 && (token.style?.bold || token.style?.italic || token.style?.underline)) {
-        formats.push({
-          start,
-          end: value.length,
-          ...token.style.bold ? { bold: true } : {},
-          ...token.style.italic ? { italic: true } : {},
-          ...token.style.underline ? { underline: true } : {}
-        });
-      }
-      continue;
-    }
-    if (token.kind === "cite") {
-      value += citeTokenLatex(token.keys);
-      continue;
-    }
-    if (token.kind === "ref") {
-      value += refTokenLatex(token.keys, token.refCommand);
-      continue;
-    }
-    value += token.source;
-    if (!token.math || token.sourceOwner === "raw") {
-      if (token.labelEnabled !== void 0 || token.label !== void 0) {
-        hasPersistedMath = true;
-        mathObjects.push({
-          node_type: "RawMathObject",
-          ...token.labelEnabled !== void 0 ? { label_enabled: token.labelEnabled } : {},
-          ...token.label !== void 0 ? { label: token.label } : {}
-        });
-      } else {
-        mathObjects.push(null);
-      }
-      continue;
-    }
-    hasPersistedMath = true;
-    mathObjects.push({
-      ...toMathObjectJson(token.math),
-      ...token.sourceSide ? { source_side: token.sourceSide } : {},
-      source_owner: token.sourceOwner,
-      ...token.labelEnabled !== void 0 ? { label_enabled: token.labelEnabled } : {},
-      ...token.label !== void 0 ? { label: token.label } : {}
-    });
-  }
-  return { value, formats, mathObjects, hasPersistedMath };
-}
-function fieldJson(field) {
-  const serialized = serializeField(field);
-  return {
-    value: serialized.value,
-    ...serialized.formats.length > 0 ? { formats: serialized.formats } : {},
-    ...serialized.hasPersistedMath ? { math_objects: serialized.mathObjects } : {}
-  };
-}
-function listItemJson(item) {
-  const field = fieldJson(item.field);
-  return {
-    value: field.value ?? "",
-    ...field.formats ? { formats: field.formats } : {},
-    ...field.math_objects ? { math_objects: field.math_objects } : {},
-    ...item.blocks.length > 0 ? { blocks: item.blocks.map(blockJson) } : {}
-  };
-}
-function blockJson(block) {
-  if (block.kind === "textBlock") {
-    return {
-      command: block.command,
-      ...fieldJson(block.field),
-      ...block.command === "\\paragraph" ? { centered: block.centered === true } : {}
-    };
-  }
-  if (block.kind === "list") {
-    return {
-      command: block.command,
-      closing: block.closing,
-      items: block.items.map(listItemJson)
-    };
-  }
-  if (block.kind === "table") {
-    const fields = block.rows.map((row) => row.map(serializeField));
-    const hasPersistedMath = fields.some((row) => row.some((field) => field.hasPersistedMath));
-    return {
-      command: block.command,
-      closing: block.closing,
-      columns: block.columns,
-      rows: fields.map((row) => row.map((field) => field.value)),
-      ...fields.some((row) => row.some((field) => field.formats.length > 0)) ? { cell_formats: fields.map((row) => row.map((field) => field.formats)) } : {},
-      ...hasPersistedMath ? { math_objects: fields.flatMap((row) => row.flatMap((field) => field.mathObjects)) } : {},
-      centered: block.centered,
-      caption_enabled: block.captionEnabled,
-      caption: block.caption,
-      label_enabled: block.labelEnabled,
-      label: block.label
-    };
-  }
-  if (block.kind === "image") {
-    return {
-      command: block.command,
-      value: block.value,
-      ...block.assetId !== void 0 ? { asset_id: block.assetId } : {},
-      options: { ...block.options },
-      centered: block.centered,
-      caption_enabled: block.captionEnabled,
-      caption: block.caption,
-      label_enabled: block.labelEnabled,
-      label: block.label
-    };
-  }
-  if (block.kind === "bibliography") {
-    return { command: block.command, closing: block.closing };
-  }
-  return { command: block.command, value: block.value };
-}
-function referenceJson(reference) {
-  return {
-    key: reference.key,
-    authors: reference.authors,
-    title: reference.title,
-    year: reference.year,
-    url: reference.url,
-    venue: reference.venue,
-    field_separator: reference.fieldSeparator
-  };
-}
-function toDocumentJson2(document2) {
-  if (document2.nodeType !== "DocumentObject" || !Array.isArray(document2.blocks)) {
-    throw new Error("toDocumentJson2 requires a live Document2Node");
-  }
-  return {
-    node_type: "DocumentObject",
-    meta: {
-      title: document2.meta.title,
-      authors: document2.meta.authors,
-      date: { ...document2.meta.date },
-      abstract: document2.meta.abstract
-    },
-    references: document2.references.map(referenceJson),
-    blocks: document2.blocks.map(blockJson)
-  };
-}
-
 // src/document2/history.ts
 var DEFAULT_DOCUMENT2_HISTORY_MAX_DEPTH = 100;
 function createDocument2History(maxDepth = DEFAULT_DOCUMENT2_HISTORY_MAX_DEPTH) {
@@ -9991,6 +10076,15 @@ var DOCUMENT2_MESSAGES = {
     loadDocumentError: "\u062A\u0639\u0630\u0631 \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0645\u0633\u062A\u0646\u062F",
     runtimePersistenceError: "\u0644\u0627 \u064A\u0645\u0643\u0646 \u062A\u062D\u0645\u064A\u0644 Document2Node \u0628\u0639\u062F JSON.stringify. \u0627\u062D\u0641\u0638 Document2Json \u0628\u0627\u0633\u062A\u062E\u062F\u0627\u0645 toDocumentJson2.",
     emptyImagePath: "\u0644\u0627 \u064A\u0648\u062C\u062F \u0645\u0633\u0627\u0631 \u0635\u0648\u0631\u0629",
+    noImageSelected: "\u0644\u0627 \u0635\u0648\u0631\u0629 \u0645\u062D\u062F\u062F\u0629",
+    chooseImage: "\u0627\u062E\u062A\u064A\u0627\u0631 \u0635\u0648\u0631\u0629",
+    changeImage: "\u062A\u063A\u064A\u064A\u0631",
+    removeImage: "\u0625\u0632\u0627\u0644\u0629",
+    selectImageAsset: "\u0627\u062E\u062A\u064A\u0627\u0631 \u0635\u0648\u0631\u0629",
+    noImageAssets: "\u0644\u0627 \u062A\u0648\u062C\u062F \u0635\u0648\u0631 \u0645\u062A\u0627\u062D\u0629",
+    loadingImageAssets: "\u062C\u0627\u0631 \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0635\u0648\u0631\u2026",
+    advancedImagePath: "\u062E\u064A\u0627\u0631\u0627\u062A \u0645\u062A\u0642\u062F\u0645\u0629",
+    imagePreviewAlt: "\u0645\u0639\u0627\u064A\u0646\u0629 \u0627\u0644\u0635\u0648\u0631\u0629",
     blockSelection: "\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u062A\u0644",
     selectBlock: "\u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u062A\u0644\u0629",
     selectedBlockCount: "\u0645\u062D\u062F\u062F\u0629",
@@ -10135,6 +10229,15 @@ var DOCUMENT2_MESSAGES = {
     loadDocumentError: "Could not load document",
     runtimePersistenceError: "A Document2Node cannot be loaded after JSON.stringify. Persist Document2Json with toDocumentJson2 instead.",
     emptyImagePath: "Empty image path",
+    noImageSelected: "No image selected",
+    chooseImage: "Choose image",
+    changeImage: "Change",
+    removeImage: "Remove",
+    selectImageAsset: "Select image",
+    noImageAssets: "No images available",
+    loadingImageAssets: "Loading images\u2026",
+    advancedImagePath: "Advanced",
+    imagePreviewAlt: "Image preview",
     blockSelection: "Block selection",
     selectBlock: "Select block",
     selectedBlockCount: "selected",
@@ -11623,6 +11726,167 @@ function FloatMetaEditor({
     ] }) : null
   ] });
 }
+function ImageAssetEditor({
+  block,
+  uiLocale,
+  messages,
+  resolveImageUrl,
+  onRequestImagePick,
+  listImageAssets,
+  renderImageBlockEditor,
+  onSelectAsset,
+  onClearAsset,
+  onImageSrcChange,
+  onBlockFocus
+}) {
+  const [assets, setAssets] = (0, import_react4.useState)([]);
+  const [assetsLoaded, setAssetsLoaded] = (0, import_react4.useState)(false);
+  const [assetsLoading, setAssetsLoading] = (0, import_react4.useState)(false);
+  const [advancedOpen, setAdvancedOpen] = (0, import_react4.useState)(false);
+  const hasImage = block.value.length > 0 || Boolean(block.assetId);
+  const resolvedUrl = hasImage ? resolveImageUrl ? resolveImageUrl({ assetId: block.assetId, value: block.value }) : block.value : "";
+  const current = block.assetId ? { assetId: block.assetId, value: block.value } : null;
+  const canUsePicker = Boolean(onRequestImagePick);
+  (0, import_react4.useEffect)(() => {
+    let alive = true;
+    if (!listImageAssets || onRequestImagePick) {
+      setAssets([]);
+      setAssetsLoaded(false);
+      setAssetsLoading(false);
+      return () => {
+        alive = false;
+      };
+    }
+    setAssetsLoading(true);
+    Promise.resolve(listImageAssets()).then((nextAssets) => {
+      if (!alive) {
+        return;
+      }
+      setAssets(nextAssets);
+      setAssetsLoaded(true);
+    }).catch(() => {
+      if (!alive) {
+        return;
+      }
+      setAssets([]);
+      setAssetsLoaded(true);
+    }).finally(() => {
+      if (alive) {
+        setAssetsLoading(false);
+      }
+    });
+    return () => {
+      alive = false;
+    };
+  }, [listImageAssets, onRequestImagePick]);
+  async function requestImagePick() {
+    if (!onRequestImagePick) {
+      return;
+    }
+    const nextAsset = await onRequestImagePick({ blockId: block.id, current });
+    if (nextAsset) {
+      onSelectAsset?.(block.id, nextAsset);
+    }
+  }
+  function selectListedAsset(assetId) {
+    const nextAsset = assets.find((asset) => asset.assetId === assetId);
+    if (nextAsset) {
+      onSelectAsset?.(block.id, nextAsset);
+    }
+  }
+  const imageFieldId = `butex-d2-img-${block.id}`;
+  const selectId = `butex-d2-img-asset-${block.id}`;
+  const canSelectListedAsset = !canUsePicker && assets.length > 0;
+  function activateImagePicker() {
+    if (canUsePicker) {
+      void requestImagePick();
+      return;
+    }
+    if (canSelectListedAsset && typeof document !== "undefined") {
+      document.getElementById(selectId)?.focus();
+    }
+  }
+  const defaultUi = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "butex-document2-widget__image-editor", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `butex-document2-widget__image-asset ${hasImage ? "butex-document2-widget__image-asset--filled" : "butex-document2-widget__image-asset--empty"}`, children: hasImage ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      resolvedUrl ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { className: "butex-document2-widget__image-thumb", src: resolvedUrl, alt: messages.imagePreviewAlt }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "butex-document2-widget__image-asset-main", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "butex-document2-widget__image-asset-title", dir: "ltr", children: block.assetId ?? block.value }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "butex-document2-widget__image-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: activateImagePicker, disabled: !canUsePicker && !canSelectListedAsset, children: messages.changeImage }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "butex-document2-widget__button--danger", onClick: () => onClearAsset?.(block.id), children: messages.removeImage })
+        ] })
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "butex-document2-widget__image-empty-content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: messages.noImageSelected }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: activateImagePicker, disabled: !canUsePicker && !canSelectListedAsset, children: messages.chooseImage })
+    ] }) }),
+    !canUsePicker ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "butex-document2-widget__image-select", htmlFor: selectId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: messages.selectImageAsset }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "select",
+        {
+          id: selectId,
+          value: "",
+          disabled: !canSelectListedAsset,
+          onFocus: () => onBlockFocus?.(block.id),
+          onChange: (event) => selectListedAsset(event.currentTarget.value),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", children: assetsLoading ? messages.loadingImageAssets : assetsLoaded && assets.length === 0 ? messages.noImageAssets : messages.selectImageAsset }),
+            assets.map((asset) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: asset.assetId, children: asset.label ?? asset.value ?? asset.assetId }, asset.assetId))
+          ]
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "details",
+      {
+        className: "butex-document2-widget__image-advanced",
+        open: advancedOpen,
+        onToggle: (event) => setAdvancedOpen(event.currentTarget.open),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("summary", { children: messages.advancedImagePath }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "butex-document2-widget__image-src-label", htmlFor: imageFieldId, children: messages.imagePath }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "textarea",
+            {
+              id: imageFieldId,
+              className: "butex-document2-widget__inline-text",
+              value: block.value,
+              dir: "ltr",
+              "aria-label": messages.imagePathLabel,
+              rows: 1,
+              ref: (element) => {
+                if (element) {
+                  element.style.height = "auto";
+                  element.style.height = `${String(element.scrollHeight)}px`;
+                }
+              },
+              onFocus: () => onBlockFocus?.(block.id),
+              onChange: (event) => {
+                onImageSrcChange?.(block.id, event.currentTarget.value);
+                event.currentTarget.style.height = "auto";
+                event.currentTarget.style.height = `${String(event.currentTarget.scrollHeight)}px`;
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+  if (renderImageBlockEditor) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: renderImageBlockEditor({
+      blockId: block.id,
+      assetId: block.assetId,
+      value: block.value,
+      resolvedUrl,
+      uiLocale,
+      onSelectAsset: (asset) => onSelectAsset?.(block.id, asset),
+      onClearAsset: () => onClearAsset?.(block.id),
+      defaultUi
+    }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: defaultUi });
+}
 function blockSummary(block, referenceCount, messages) {
   if (block.kind === "textBlock") {
     return inlineFieldSummary(block.field);
@@ -11671,6 +11935,12 @@ function BlockEditor({
   onRefFocus,
   onFieldBlur,
   onImageSrcChange,
+  onImageAssetChange,
+  onImageAssetClear,
+  resolveImageUrl,
+  onRequestImagePick,
+  listImageAssets,
+  renderImageBlockEditor,
   onFloatMetaChange,
   onParagraphCenteredChange,
   onAddListItem,
@@ -11813,6 +12083,12 @@ function BlockEditor({
               onCiteFocus,
               onFieldBlur,
               onImageSrcChange,
+              onImageAssetChange,
+              onImageAssetClear,
+              resolveImageUrl,
+              onRequestImagePick,
+              listImageAssets,
+              renderImageBlockEditor,
               onAddListItem,
               onRemoveListItem,
               onManageReferences
@@ -11851,31 +12127,22 @@ function BlockEditor({
     ] });
   }
   if (block.kind === "image") {
-    const imageFieldId = `butex-d2-img-${block.id}`;
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { className: chromeClass, children: [
       header,
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "butex-document2-widget__image-src-label", htmlFor: imageFieldId, children: messages.imagePath }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "textarea",
+        ImageAssetEditor,
         {
-          id: imageFieldId,
-          className: "butex-document2-widget__inline-text",
-          value: block.value,
-          dir: "ltr",
-          "aria-label": messages.imagePathLabel,
-          rows: 1,
-          ref: (element) => {
-            if (element) {
-              element.style.height = "auto";
-              element.style.height = `${String(element.scrollHeight)}px`;
-            }
-          },
-          onFocus: () => onBlockFocus?.(block.id),
-          onChange: (event) => {
-            onImageSrcChange?.(block.id, event.currentTarget.value);
-            event.currentTarget.style.height = "auto";
-            event.currentTarget.style.height = `${String(event.currentTarget.scrollHeight)}px`;
-          }
+          block,
+          uiLocale,
+          messages,
+          resolveImageUrl,
+          onRequestImagePick,
+          listImageAssets,
+          renderImageBlockEditor,
+          onSelectAsset: onImageAssetChange,
+          onClearAsset: onImageAssetClear,
+          onImageSrcChange,
+          onBlockFocus
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -16750,6 +17017,94 @@ var DOCUMENT2_WIDGET_CSS = `
   border-color: var(--butex-document2-dev-border);
 }
 
+.butex-document2-widget__image-editor {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+}
+
+.butex-document2-widget__image-asset {
+  align-items: center;
+  border: 1px solid var(--butex-document2-border);
+  border-radius: 8px;
+  display: flex;
+  gap: 12px;
+  min-height: 128px;
+  min-width: 0;
+  padding: 12px;
+}
+
+.butex-document2-widget__image-asset--empty {
+  border-style: dashed;
+  justify-content: center;
+}
+
+.butex-document2-widget__image-empty-content,
+.butex-document2-widget__image-asset-main,
+.butex-document2-widget__image-select,
+.butex-document2-widget__image-advanced {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.butex-document2-widget__image-empty-content {
+  justify-items: center;
+  text-align: center;
+}
+
+.butex-document2-widget__image-thumb {
+  aspect-ratio: 4 / 3;
+  background: var(--butex-document2-bg);
+  border: 1px solid var(--butex-document2-border);
+  border-radius: 8px;
+  flex: 0 0 128px;
+  max-width: 38%;
+  object-fit: cover;
+  width: 128px;
+}
+
+.butex-document2-widget__image-asset-title {
+  color: var(--butex-document2-muted);
+  display: block;
+  overflow: hidden;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.butex-document2-widget__image-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.butex-document2-widget__image-select span,
+.butex-document2-widget__image-src-label {
+  color: var(--butex-document2-muted);
+  font-size: 0.86rem;
+}
+
+.butex-document2-widget__image-select select {
+  background: var(--butex-document2-input-bg);
+  border: 1px solid var(--butex-document2-border);
+  border-radius: 8px;
+  color: var(--butex-document2-fg);
+  min-height: 36px;
+  padding: 6px 8px;
+}
+
+.butex-document2-widget__image-select select:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.butex-document2-widget__image-advanced summary {
+  color: var(--butex-document2-muted);
+  cursor: pointer;
+  font-size: 0.86rem;
+}
+
 .butex-document2-widget__dev pre {
   background: var(--butex-document2-dev-code-bg);
   color: var(--butex-document2-dev-code-fg);
@@ -17628,951 +17983,995 @@ function resolveInitialDocument2(initialDocument, uiLocale = "ar", documentMeta)
     };
   }
 }
-function ButexDocumentEditor2({
-  initialDocument,
-  documentMeta,
-  className,
-  debug = false,
-  documentDirection = "rtl",
-  equationSide = "arabic",
-  editableEquations = true,
-  previewOnly = false,
-  uiLocale = "ar",
-  mathOutput = "svg",
-  digitForm: digitFormProp,
-  onDigitFormChange,
-  resolveImageUrl,
-  onDocumentChange,
-  onDocumentJsonChange,
-  onLatexChange
-}) {
-  const messages = document2Messages(uiLocale);
-  const initialState = (0, import_react13.useMemo)(
-    () => resolveInitialDocument2(initialDocument, uiLocale, documentMeta),
-    [initialDocument, documentMeta, uiLocale]
-  );
-  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 [debugImportOpen, setDebugImportOpen] = (0, import_react13.useState)(false);
-  const [debugImportText, setDebugImportText] = (0, import_react13.useState)("");
-  const [debugImportError, setDebugImportError] = (0, import_react13.useState)("");
-  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");
-  function equationSessionWithDocumentDigits(session) {
-    return setCurrentDigitForm(session, digitForm);
-  }
-  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, { digitForm });
-  const documentJson = (0, import_react13.useMemo)(() => toDocumentJson2(documentNode), [documentNode]);
-  const documentLabels = (0, import_react13.useMemo)(() => collectDocument2Labels(documentNode), [documentNode]);
-  const preview = (0, import_react13.useMemo)(
-    () => document2Preview(documentNode, mathOutput, equationSide, {
-      documentDirection,
-      digitForm,
-      uiLocale
-    }),
-    [documentNode, documentDirection, digitForm, equationSide, mathOutput, uiLocale]
-  );
-  const debugEnabled = (0, import_react13.useMemo)(() => {
-    if (debug) {
-      return true;
-    }
-    if (typeof window === "undefined") {
-      return false;
-    }
-    return new URLSearchParams(window.location.search).get("debug") === "1";
-  }, [debug]);
-  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);
-  const canMoveSelectionDown = Boolean(blockSelection && blockSelection.to < documentNode.blocks.length - 1);
-  const formatTextToken = (0, import_react13.useMemo)(() => findFormatTextToken(documentNode, editorFocus), [documentNode, editorFocus]);
-  const canFormatText = formatTextToken !== null;
-  const activeTextStyles = formatTextToken?.style ?? {};
-  function clearBlockSelection() {
-    setBlockSelectionState(emptyBlockSelection());
-  }
-  function toggleSelectBlock(blockId, shiftKey) {
-    const index = documentRef.current.blocks.findIndex((block) => block.id === blockId);
-    if (index < 0) {
-      return;
-    }
-    const blockCount = documentRef.current.blocks.length;
-    setBlockSelectionState(
-      (current) => shiftKey ? extendBlockSelectionFromAnchor(current, index, blockCount) : toggleBlockInSelection(current, index, blockCount)
+var ButexDocumentEditor2 = (0, import_react13.forwardRef)(
+  function ButexDocumentEditor22({
+    initialDocument,
+    documentMeta,
+    className,
+    debug = false,
+    documentDirection = "rtl",
+    equationSide = "arabic",
+    editableEquations = true,
+    previewOnly = false,
+    uiLocale = "ar",
+    mathOutput = "svg",
+    digitForm: digitFormProp,
+    onDigitFormChange,
+    resolveImageUrl,
+    onRequestImagePick,
+    listImageAssets,
+    renderImageBlockEditor,
+    onDocumentChange,
+    onDocumentJsonChange,
+    onLatexChange
+  }, ref) {
+    const messages = document2Messages(uiLocale);
+    const initialState = (0, import_react13.useMemo)(
+      () => resolveInitialDocument2(initialDocument, uiLocale, documentMeta),
+      [initialDocument, documentMeta, uiLocale]
     );
-  }
-  function moveSelectedBlocks(direction) {
-    const selection = normalizeBlockSelection(blockSelectionState.selection, documentRef.current.blocks.length);
-    if (!selection) {
-      return;
-    }
-    const next = moveDocument2BlockRange(documentRef.current, selection.from, selection.to, direction);
-    if (next === documentRef.current) {
-      return;
-    }
-    applyDocument(next, "immediate");
-    const remapped = remapSelectionAfterRangeMove(selection, direction);
-    setBlockSelectionState({
-      selection: normalizeBlockSelection(remapped, next.blocks.length),
-      anchor: blockSelectionState.anchor === null ? null : blockSelectionState.anchor + direction
-    });
-  }
-  function deleteSelectedBlocks() {
-    const selection = normalizeBlockSelection(blockSelectionState.selection, documentRef.current.blocks.length);
-    if (!selection) {
-      return;
-    }
-    applyDocument(removeDocument2BlockRange(documentRef.current, selection.from, selection.to), "immediate");
-    clearBlockSelection();
-  }
-  (0, import_react13.useEffect)(() => {
-    injectBuTeXDocument2Styles();
-  }, []);
-  (0, import_react13.useEffect)(() => {
-    if (!editableEquations || previewOnly) {
-      setSelectedMath(null);
-    }
-  }, [editableEquations, previewOnly]);
-  (0, import_react13.useEffect)(() => {
-    const next = resolveInitialDocument2(initialDocument, uiLocale, documentMeta);
-    setDocumentNode(next.document);
-    setError(next.error);
-    setSelectedMath(null);
-    setCollapsedBlockIds(/* @__PURE__ */ new Set());
-    historyRef.current = createDocument2History();
-    setHistoryTick((tick) => tick + 1);
-  }, [initialDocument, documentMeta, uiLocale]);
-  (0, import_react13.useEffect)(() => {
-    onDocumentChange?.(documentNode);
-  }, [documentNode, onDocumentChange]);
-  (0, import_react13.useEffect)(() => {
-    onDocumentJsonChange?.(documentJson);
-  }, [documentJson, onDocumentJsonChange]);
-  (0, import_react13.useEffect)(() => {
-    onLatexChange?.(latex);
-  }, [latex, onLatexChange]);
-  (0, import_react13.useEffect)(() => {
-    const pending = pendingFocusRef.current;
-    const root = widgetRef.current;
-    if (!pending || !root) {
-      return;
+    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 [debugImportOpen, setDebugImportOpen] = (0, import_react13.useState)(false);
+    const [debugImportText, setDebugImportText] = (0, import_react13.useState)("");
+    const [debugImportError, setDebugImportError] = (0, import_react13.useState)("");
+    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");
+    function equationSessionWithDocumentDigits(session) {
+      return setCurrentDigitForm(session, digitForm);
+    }
+    const historyRef = (0, import_react13.useRef)(createDocument2History());
+    const documentRef = (0, import_react13.useRef)(documentNode);
+    const editorFocusRef = (0, import_react13.useRef)(editorFocus);
+    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;
+    editorFocusRef.current = editorFocus;
+    const latex = document2Latex(documentNode, { digitForm });
+    const documentJson = (0, import_react13.useMemo)(() => toDocumentJson2(documentNode), [documentNode]);
+    const documentLabels = (0, import_react13.useMemo)(() => collectDocument2Labels(documentNode), [documentNode]);
+    const preview = (0, import_react13.useMemo)(
+      () => document2Preview(documentNode, mathOutput, equationSide, {
+        documentDirection,
+        digitForm,
+        uiLocale
+      }),
+      [documentNode, documentDirection, digitForm, equationSide, mathOutput, uiLocale]
+    );
+    const debugEnabled = (0, import_react13.useMemo)(() => {
+      if (debug) {
+        return true;
+      }
+      if (typeof window === "undefined") {
+        return false;
+      }
+      return new URLSearchParams(window.location.search).get("debug") === "1";
+    }, [debug]);
+    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);
+    const canMoveSelectionDown = Boolean(blockSelection && blockSelection.to < documentNode.blocks.length - 1);
+    const formatTextToken = (0, import_react13.useMemo)(() => findFormatTextToken(documentNode, editorFocus), [documentNode, editorFocus]);
+    const canFormatText = formatTextToken !== null;
+    const activeTextStyles = formatTextToken?.style ?? {};
+    function clearBlockSelection() {
+      setBlockSelectionState(emptyBlockSelection());
+    }
+    function toggleSelectBlock(blockId, shiftKey) {
+      const index = documentRef.current.blocks.findIndex((block) => block.id === blockId);
+      if (index < 0) {
+        return;
+      }
+      const blockCount = documentRef.current.blocks.length;
+      setBlockSelectionState(
+        (current) => shiftKey ? extendBlockSelectionFromAnchor(current, index, blockCount) : toggleBlockInSelection(current, index, blockCount)
+      );
     }
-    pendingFocusRef.current = null;
-    requestAnimationFrame(() => {
-      if (pending.kind === "math") {
-        const mathButton = Array.from(root.querySelectorAll("[data-math-token-id]")).find(
-          (button) => button.dataset.mathTokenId === pending.tokenId
-        );
-        mathButton?.focus();
+    function moveSelectedBlocks(direction) {
+      const selection = normalizeBlockSelection(blockSelectionState.selection, documentRef.current.blocks.length);
+      if (!selection) {
         return;
       }
-      if (pending.kind === "cite") {
-        const citeButton = Array.from(root.querySelectorAll("[data-cite-token-id]")).find(
-          (button) => button.dataset.citeTokenId === pending.tokenId
-        );
-        citeButton?.focus();
+      const next = moveDocument2BlockRange(documentRef.current, selection.from, selection.to, direction);
+      if (next === documentRef.current) {
         return;
       }
-      if (pending.kind === "ref") {
-        const refButton = Array.from(root.querySelectorAll("[data-ref-token-id]")).find(
-          (button) => button.dataset.refTokenId === pending.tokenId
-        );
-        refButton?.focus();
+      applyDocument(next, "immediate");
+      const remapped = remapSelectionAfterRangeMove(selection, direction);
+      setBlockSelectionState({
+        selection: normalizeBlockSelection(remapped, next.blocks.length),
+        anchor: blockSelectionState.anchor === null ? null : blockSelectionState.anchor + direction
+      });
+    }
+    function deleteSelectedBlocks() {
+      const selection = normalizeBlockSelection(blockSelectionState.selection, documentRef.current.blocks.length);
+      if (!selection) {
         return;
       }
-      const textarea = Array.from(root.querySelectorAll("textarea[data-field-id][data-text-token-id]")).find(
-        (element) => element.dataset.fieldId === pending.fieldId && element.dataset.textTokenId === pending.textTokenId
-      );
-      if (!textarea) {
+      applyDocument(removeDocument2BlockRange(documentRef.current, selection.from, selection.to), "immediate");
+      clearBlockSelection();
+    }
+    (0, import_react13.useEffect)(() => {
+      injectBuTeXDocument2Styles();
+    }, []);
+    (0, import_react13.useEffect)(() => {
+      if (!editableEquations || previewOnly) {
+        setSelectedMath(null);
+      }
+    }, [editableEquations, previewOnly]);
+    (0, import_react13.useEffect)(() => {
+      const next = resolveInitialDocument2(initialDocument, uiLocale, documentMeta);
+      setDocumentNode(next.document);
+      setError(next.error);
+      setSelectedMath(null);
+      setCollapsedBlockIds(/* @__PURE__ */ new Set());
+      historyRef.current = createDocument2History();
+      setHistoryTick((tick) => tick + 1);
+    }, [initialDocument, documentMeta, uiLocale]);
+    (0, import_react13.useEffect)(() => {
+      onDocumentChange?.(documentNode);
+    }, [documentNode, onDocumentChange]);
+    (0, import_react13.useEffect)(() => {
+      onDocumentJsonChange?.(documentJson);
+    }, [documentJson, onDocumentJsonChange]);
+    (0, import_react13.useEffect)(() => {
+      onLatexChange?.(latex);
+    }, [latex, onLatexChange]);
+    (0, import_react13.useEffect)(() => {
+      const pending = pendingFocusRef.current;
+      const root = widgetRef.current;
+      if (!pending || !root) {
         return;
       }
-      const safeOffset = Math.max(0, Math.min(pending.caretOffset, textarea.value.length));
-      textarea.focus();
-      textarea.setSelectionRange(safeOffset, safeOffset);
-    });
-  }, [documentNode]);
-  const bumpHistoryUi = (0, import_react13.useCallback)(() => {
-    setHistoryTick((tick) => tick + 1);
-  }, []);
-  const applyDocument = (0, import_react13.useCallback)(
-    (next, mode = "immediate") => {
-      if (mode === "immediate") {
-        pushDocument2Snapshot(historyRef.current, documentRef.current);
-        bumpHistoryUi();
-      } else if (mode === "text") {
-        if (!textSnapshotArmedRef.current) {
+      pendingFocusRef.current = null;
+      requestAnimationFrame(() => {
+        if (pending.kind === "math") {
+          const mathButton = Array.from(root.querySelectorAll("[data-math-token-id]")).find(
+            (button) => button.dataset.mathTokenId === pending.tokenId
+          );
+          mathButton?.focus();
+          return;
+        }
+        if (pending.kind === "cite") {
+          const citeButton = Array.from(root.querySelectorAll("[data-cite-token-id]")).find(
+            (button) => button.dataset.citeTokenId === pending.tokenId
+          );
+          citeButton?.focus();
+          return;
+        }
+        if (pending.kind === "ref") {
+          const refButton = Array.from(root.querySelectorAll("[data-ref-token-id]")).find(
+            (button) => button.dataset.refTokenId === pending.tokenId
+          );
+          refButton?.focus();
+          return;
+        }
+        const textarea = Array.from(root.querySelectorAll("textarea[data-field-id][data-text-token-id]")).find(
+          (element) => element.dataset.fieldId === pending.fieldId && element.dataset.textTokenId === pending.textTokenId
+        );
+        if (!textarea) {
+          return;
+        }
+        const safeOffset = Math.max(0, Math.min(pending.caretOffset, textarea.value.length));
+        textarea.focus();
+        textarea.setSelectionRange(safeOffset, safeOffset);
+      });
+    }, [documentNode]);
+    const bumpHistoryUi = (0, import_react13.useCallback)(() => {
+      setHistoryTick((tick) => tick + 1);
+    }, []);
+    const applyDocument = (0, import_react13.useCallback)(
+      (next, mode = "immediate") => {
+        if (mode === "immediate") {
           pushDocument2Snapshot(historyRef.current, documentRef.current);
-          textSnapshotArmedRef.current = true;
           bumpHistoryUi();
+        } else if (mode === "text") {
+          if (!textSnapshotArmedRef.current) {
+            pushDocument2Snapshot(historyRef.current, documentRef.current);
+            textSnapshotArmedRef.current = true;
+            bumpHistoryUi();
+          }
+          if (textDebounceRef.current !== null) {
+            window.clearTimeout(textDebounceRef.current);
+          }
+          textDebounceRef.current = window.setTimeout(() => {
+            textSnapshotArmedRef.current = false;
+          }, 400);
         }
-        if (textDebounceRef.current !== null) {
-          window.clearTimeout(textDebounceRef.current);
+        documentRef.current = next;
+        setDocumentNode(next);
+      },
+      [bumpHistoryUi]
+    );
+    const afterBlockId = (0, import_react13.useCallback)(() => resolveInsertAfterBlockId(documentRef.current, editorFocusRef.current), []);
+    const insertImageBlock = (0, import_react13.useCallback)(
+      (srcOrAsset = "") => {
+        clearBlockSelection();
+        const after = resolveInsertAfterBlockId(documentRef.current, editorFocusRef.current);
+        applyDocument(addDocument2ImageBlock(documentRef.current, srcOrAsset, after), "immediate");
+      },
+      [applyDocument]
+    );
+    (0, import_react13.useImperativeHandle)(
+      ref,
+      () => ({
+        insertImageBlock,
+        updateImageBlockValue(blockId, value) {
+          applyDocument(updateDocument2ImageValue(documentRef.current, blockId, value), "immediate");
+        },
+        updateImageBlockAsset(blockId, asset) {
+          applyDocument(updateDocument2ImageAsset(documentRef.current, blockId, asset), "immediate");
+        },
+        getDocumentJson() {
+          return toDocumentJson2(documentRef.current);
         }
-        textDebounceRef.current = window.setTimeout(() => {
-          textSnapshotArmedRef.current = false;
-        }, 400);
+      }),
+      [applyDocument, insertImageBlock]
+    );
+    function undoDocument() {
+      const restored = restoreDocument2Undo(historyRef.current, documentRef.current);
+      if (!restored) {
+        return;
       }
-      setDocumentNode(next);
-    },
-    [bumpHistoryUi]
-  );
-  const afterBlockId = (0, import_react13.useCallback)(() => resolveInsertAfterBlockId(documentRef.current, editorFocus), [editorFocus]);
-  function undoDocument() {
-    const restored = restoreDocument2Undo(historyRef.current, documentRef.current);
-    if (!restored) {
-      return;
-    }
-    textSnapshotArmedRef.current = false;
-    clearBlockSelection();
-    setDocumentNode(restored);
-    bumpHistoryUi();
-  }
-  function redoDocument() {
-    const restored = restoreDocument2Redo(historyRef.current, documentRef.current);
-    if (!restored) {
-      return;
+      textSnapshotArmedRef.current = false;
+      clearBlockSelection();
+      documentRef.current = restored;
+      setDocumentNode(restored);
+      bumpHistoryUi();
     }
-    textSnapshotArmedRef.current = false;
-    clearBlockSelection();
-    setDocumentNode(restored);
-    bumpHistoryUi();
-  }
-  function openBlock(blockId) {
-    if (!blockId) {
-      return;
+    function redoDocument() {
+      const restored = restoreDocument2Redo(historyRef.current, documentRef.current);
+      if (!restored) {
+        return;
+      }
+      textSnapshotArmedRef.current = false;
+      clearBlockSelection();
+      documentRef.current = restored;
+      setDocumentNode(restored);
+      bumpHistoryUi();
     }
-    setCollapsedBlockIds((current) => {
-      if (!current.has(blockId)) {
-        return current;
+    function openBlock(blockId) {
+      if (!blockId) {
+        return;
       }
-      const next = new Set(current);
-      next.delete(blockId);
-      return next;
-    });
-  }
-  function toggleBlockCollapse(blockId) {
-    setCollapsedBlockIds((current) => {
-      const next = new Set(current);
-      if (next.has(blockId)) {
+      setCollapsedBlockIds((current) => {
+        if (!current.has(blockId)) {
+          return current;
+        }
+        const next = new Set(current);
         next.delete(blockId);
-      } else {
-        next.add(blockId);
-      }
-      return next;
-    });
-  }
-  function collapseAllBlocks() {
-    setCollapsedBlockIds(new Set(documentRef.current.blocks.map((block) => block.id)));
-  }
-  function openAllBlocks() {
-    setCollapsedBlockIds(/* @__PURE__ */ new Set());
-  }
-  async function copyDebugText(text) {
-    try {
-      await navigator.clipboard.writeText(text);
-    } catch {
+        return next;
+      });
     }
-  }
-  function openDebugJsonImport() {
-    setDebugImportText(JSON.stringify(documentJson, null, 2));
-    setDebugImportError("");
-    setDebugImportOpen(true);
-  }
-  function applyDebugJsonImport() {
-    const parsed = parseJsonDebugInput(debugImportText);
-    if (!parsed.ok) {
-      setDebugImportError(parsed.error);
-      return;
+    function toggleBlockCollapse(blockId) {
+      setCollapsedBlockIds((current) => {
+        const next = new Set(current);
+        if (next.has(blockId)) {
+          next.delete(blockId);
+        } else {
+          next.add(blockId);
+        }
+        return next;
+      });
     }
-    try {
-      const imported = fromDocumentJson2(parsed.value);
-      textSnapshotArmedRef.current = false;
-      if (textDebounceRef.current !== null) {
-        window.clearTimeout(textDebounceRef.current);
-        textDebounceRef.current = null;
-      }
-      setDocumentNode(imported);
-      setError(null);
-      setSelectedMath(null);
-      setCitePicker(null);
-      setRefPicker(null);
-      clearBlockSelection();
+    function collapseAllBlocks() {
+      setCollapsedBlockIds(new Set(documentRef.current.blocks.map((block) => block.id)));
+    }
+    function openAllBlocks() {
       setCollapsedBlockIds(/* @__PURE__ */ new Set());
-      setEditorFocus(createEmptyDocument2EditorFocus());
-      historyRef.current = createDocument2History();
-      bumpHistoryUi();
+    }
+    async function copyDebugText(text) {
+      try {
+        await navigator.clipboard.writeText(text);
+      } catch {
+      }
+    }
+    function openDebugJsonImport() {
+      setDebugImportText(JSON.stringify(documentJson, null, 2));
       setDebugImportError("");
-      setDebugImportOpen(false);
-    } catch (importError) {
-      setDebugImportError(importError instanceof Error ? importError.message : String(importError));
+      setDebugImportOpen(true);
     }
-  }
-  (0, import_react13.useEffect)(() => {
-    const root = widgetRef.current;
-    if (!root) {
-      return;
+    function applyDebugJsonImport() {
+      const parsed = parseJsonDebugInput(debugImportText);
+      if (!parsed.ok) {
+        setDebugImportError(parsed.error);
+        return;
+      }
+      try {
+        const imported = fromDocumentJson2(parsed.value);
+        textSnapshotArmedRef.current = false;
+        if (textDebounceRef.current !== null) {
+          window.clearTimeout(textDebounceRef.current);
+          textDebounceRef.current = null;
+        }
+        setDocumentNode(imported);
+        setError(null);
+        setSelectedMath(null);
+        setCitePicker(null);
+        setRefPicker(null);
+        clearBlockSelection();
+        setCollapsedBlockIds(/* @__PURE__ */ new Set());
+        setEditorFocus(createEmptyDocument2EditorFocus());
+        historyRef.current = createDocument2History();
+        bumpHistoryUi();
+        setDebugImportError("");
+        setDebugImportOpen(false);
+      } catch (importError) {
+        setDebugImportError(importError instanceof Error ? importError.message : String(importError));
+      }
     }
-    const onKeyDown = (event) => {
-      if (!editorOpen) {
+    (0, import_react13.useEffect)(() => {
+      const root = widgetRef.current;
+      if (!root) {
         return;
       }
-      const mod = event.ctrlKey || event.metaKey;
-      if (!mod) {
+      const onKeyDown = (event) => {
+        if (!editorOpen) {
+          return;
+        }
+        const mod = event.ctrlKey || event.metaKey;
+        if (!mod) {
+          return;
+        }
+        if (event.key.toLowerCase() === "z" && !event.shiftKey) {
+          event.preventDefault();
+          undoDocument();
+        } else if (event.key.toLowerCase() === "z" && event.shiftKey || event.key.toLowerCase() === "y") {
+          event.preventDefault();
+          redoDocument();
+        }
+      };
+      root.addEventListener("keydown", onKeyDown);
+      return () => root.removeEventListener("keydown", onKeyDown);
+    }, [editorOpen]);
+    function rememberFieldFocus(blockId, fieldId, textTokenId, caretOffset, selectionStart, selectionEnd) {
+      openBlock(blockId);
+      clearBlockSelection();
+      setEditorFocus({ blockId, fieldId, textTokenId, caretOffset, selectionStart, selectionEnd });
+    }
+    function rememberMathFocus(blockId, fieldId) {
+      openBlock(blockId);
+      clearBlockSelection();
+      setEditorFocus({ blockId, fieldId, textTokenId: null, caretOffset: 0, selectionStart: 0, selectionEnd: 0 });
+    }
+    function rememberBlockFocus(blockId) {
+      openBlock(blockId);
+      setEditorFocus((current) => ({ ...current, blockId }));
+    }
+    function onFieldBlur() {
+      textSnapshotArmedRef.current = false;
+    }
+    function openNewEquation(mode) {
+      if (!editableEquations) {
         return;
       }
-      if (event.key.toLowerCase() === "z" && !event.shiftKey) {
-        event.preventDefault();
-        undoDocument();
-      } else if (event.key.toLowerCase() === "z" && event.shiftKey || event.key.toLowerCase() === "y") {
-        event.preventDefault();
-        redoDocument();
+      const target = resolveInsertField(documentRef.current, editorFocus);
+      if (target?.fieldId) {
+        openBlock(topLevelBlockIdForField(documentRef.current, target.fieldId));
       }
-    };
-    root.addEventListener("keydown", onKeyDown);
-    return () => root.removeEventListener("keydown", onKeyDown);
-  }, [editorOpen]);
-  function rememberFieldFocus(blockId, fieldId, textTokenId, caretOffset, selectionStart, selectionEnd) {
-    openBlock(blockId);
-    clearBlockSelection();
-    setEditorFocus({ blockId, fieldId, textTokenId, caretOffset, selectionStart, selectionEnd });
-  }
-  function rememberMathFocus(blockId, fieldId) {
-    openBlock(blockId);
-    clearBlockSelection();
-    setEditorFocus({ blockId, fieldId, textTokenId: null, caretOffset: 0, selectionStart: 0, selectionEnd: 0 });
-  }
-  function rememberBlockFocus(blockId) {
-    openBlock(blockId);
-    setEditorFocus((current) => ({ ...current, blockId }));
-  }
-  function onFieldBlur() {
-    textSnapshotArmedRef.current = false;
-  }
-  function openNewEquation(mode) {
-    if (!editableEquations) {
-      return;
-    }
-    const target = resolveInsertField(documentRef.current, editorFocus);
-    if (target?.fieldId) {
-      openBlock(topLevelBlockIdForField(documentRef.current, target.fieldId));
-    }
-    setSelectedMath({
-      tokenId: null,
-      fieldId: target?.fieldId ?? null,
-      textTokenId: target?.textTokenId ?? null,
-      insertAt: target?.caretOffset ?? 0,
-      mathMode: mode,
-      session: equationSessionWithDocumentDigits(createEmptyEquationSession(equationSide)),
-      reason: null,
-      labelEnabled: false,
-      label: ""
-    });
-  }
-  function openMath(token) {
-    if (!editableEquations) {
-      return;
+      setSelectedMath({
+        tokenId: null,
+        fieldId: target?.fieldId ?? null,
+        textTokenId: target?.textTokenId ?? null,
+        insertAt: target?.caretOffset ?? 0,
+        mathMode: mode,
+        session: equationSessionWithDocumentDigits(createEmptyEquationSession(equationSide)),
+        reason: null,
+        labelEnabled: false,
+        label: ""
+      });
     }
-    openBlock(topLevelBlockIdForToken(documentRef.current, token.id));
-    const result = mathTokenToEditorSession(token.math, equationSide);
-    const mode = token.display ? "display" : "inline";
-    if (!result.editable) {
+    function openMath(token) {
+      if (!editableEquations) {
+        return;
+      }
+      openBlock(topLevelBlockIdForToken(documentRef.current, token.id));
+      const result = mathTokenToEditorSession(token.math, equationSide);
+      const mode = token.display ? "display" : "inline";
+      if (!result.editable) {
+        setSelectedMath({
+          tokenId: token.id,
+          fieldId: null,
+          insertAt: 0,
+          textTokenId: null,
+          mathMode: mode,
+          session: equationSessionWithDocumentDigits(createEmptyEquationSession(equationSide)),
+          reason: result.reason,
+          labelEnabled: Boolean(token.labelEnabled),
+          label: token.label ?? ""
+        });
+        return;
+      }
       setSelectedMath({
         tokenId: token.id,
         fieldId: null,
         insertAt: 0,
         textTokenId: null,
         mathMode: mode,
-        session: equationSessionWithDocumentDigits(createEmptyEquationSession(equationSide)),
-        reason: result.reason,
+        session: equationSessionWithDocumentDigits(result.session),
+        reason: null,
         labelEnabled: Boolean(token.labelEnabled),
         label: token.label ?? ""
       });
-      return;
     }
-    setSelectedMath({
-      tokenId: token.id,
-      fieldId: null,
-      insertAt: 0,
-      textTokenId: null,
-      mathMode: mode,
-      session: equationSessionWithDocumentDigits(result.session),
-      reason: null,
-      labelEnabled: Boolean(token.labelEnabled),
-      label: token.label ?? ""
-    });
-  }
-  function toggleEditorPanel() {
-    setEditorOpen((open) => {
-      if (open && !previewOpen) {
-        setPreviewOpen(true);
+    function toggleEditorPanel() {
+      setEditorOpen((open) => {
+        if (open && !previewOpen) {
+          setPreviewOpen(true);
+        }
+        return !open;
+      });
+    }
+    function togglePreviewPanel() {
+      setPreviewOpen((open) => {
+        if (open && !editorOpen) {
+          setEditorOpen(true);
+        }
+        return !open;
+      });
+    }
+    function saveEquation(session) {
+      if (!selectedMath) {
+        return;
       }
-      return !open;
-    });
-  }
-  function togglePreviewPanel() {
-    setPreviewOpen((open) => {
-      if (open && !editorOpen) {
-        setEditorOpen(true);
+      const delimiters = mathDelimiters(selectedMath.mathMode);
+      if (selectedMath.tokenId) {
+        let next2 = replaceMathTokenFromSession(
+          documentRef.current,
+          selectedMath.tokenId,
+          session,
+          delimiters.opening,
+          delimiters.closing,
+          equationSide
+        );
+        if (selectedMath.mathMode === "display") {
+          next2 = updateMathTokenLabel(next2, selectedMath.tokenId, {
+            labelEnabled: selectedMath.labelEnabled,
+            label: selectedMath.label
+          });
+        } else {
+          next2 = updateMathTokenLabel(next2, selectedMath.tokenId, { labelEnabled: false, label: "" });
+        }
+        pendingFocusRef.current = { kind: "math", tokenId: selectedMath.tokenId };
+        applyDocument(next2, "immediate");
+        setSelectedMath(null);
+        return;
       }
-      return !open;
-    });
-  }
-  function saveEquation(session) {
-    if (!selectedMath) {
-      return;
-    }
-    const delimiters = mathDelimiters(selectedMath.mathMode);
-    if (selectedMath.tokenId) {
-      let next2 = replaceMathTokenFromSession(
-        documentRef.current,
-        selectedMath.tokenId,
+      let current = documentRef.current;
+      let fieldId = selectedMath.fieldId;
+      let textTokenId = selectedMath.textTokenId;
+      let insertAt = selectedMath.insertAt;
+      if (!fieldId) {
+        const anchor = afterBlockId();
+        current = addDocument2TextBlock(current, "\\paragraph", anchor);
+        const anchorIndex = anchor ? current.blocks.findIndex((block) => block.id === anchor) : -1;
+        const newIndex = anchorIndex >= 0 ? anchorIndex + 1 : current.blocks.length - 1;
+        const newBlock = current.blocks[newIndex];
+        const field = newBlock?.kind === "textBlock" ? newBlock.field : null;
+        if (!field) {
+          setSelectedMath(null);
+          return;
+        }
+        fieldId = field.id;
+        textTokenId = field.tokens.find((token) => token.kind === "text")?.id ?? null;
+        insertAt = 0;
+      }
+      let next = insertMathTokenAtCaret(
+        current,
+        fieldId,
+        textTokenId,
+        insertAt,
         session,
         delimiters.opening,
         delimiters.closing,
         equationSide
       );
-      if (selectedMath.mathMode === "display") {
-        next2 = updateMathTokenLabel(next2, selectedMath.tokenId, {
-          labelEnabled: selectedMath.labelEnabled,
+      const trailingTextTokenId = trailingTextTokenAfterInsertedMath(current, next, fieldId, textTokenId, insertAt);
+      const fieldAfter = findInlineFieldById(next, fieldId);
+      const insertedMathId = trailingTextTokenId && fieldAfter ? fieldAfter.tokens[Math.max(
+        0,
+        fieldAfter.tokens.findIndex((token) => token.id === trailingTextTokenId) - 1
+      )]?.kind === "math" ? fieldAfter.tokens[Math.max(
+        0,
+        fieldAfter.tokens.findIndex((token) => token.id === trailingTextTokenId) - 1
+      )]?.id : null : fieldAfter?.tokens.filter((token) => token.kind === "math").at(-1)?.id ?? null;
+      if (insertedMathId && selectedMath.mathMode === "display" && selectedMath.labelEnabled) {
+        next = updateMathTokenLabel(next, insertedMathId, {
+          labelEnabled: true,
           label: selectedMath.label
         });
-      } else {
-        next2 = updateMathTokenLabel(next2, selectedMath.tokenId, { labelEnabled: false, label: "" });
       }
-      pendingFocusRef.current = { kind: "math", tokenId: selectedMath.tokenId };
-      applyDocument(next2, "immediate");
+      if (trailingTextTokenId) {
+        pendingFocusRef.current = { kind: "text", fieldId, textTokenId: trailingTextTokenId, caretOffset: 0 };
+      }
+      applyDocument(next, "immediate");
       setSelectedMath(null);
-      return;
     }
-    let current = documentRef.current;
-    let fieldId = selectedMath.fieldId;
-    let textTokenId = selectedMath.textTokenId;
-    let insertAt = selectedMath.insertAt;
-    if (!fieldId) {
-      const anchor = afterBlockId();
-      current = addDocument2TextBlock(current, "\\paragraph", anchor);
-      const anchorIndex = anchor ? current.blocks.findIndex((block) => block.id === anchor) : -1;
-      const newIndex = anchorIndex >= 0 ? anchorIndex + 1 : current.blocks.length - 1;
-      const newBlock = current.blocks[newIndex];
-      const field = newBlock?.kind === "textBlock" ? newBlock.field : null;
-      if (!field) {
-        setSelectedMath(null);
+    function deleteSelectedEquation() {
+      if (!selectedMath?.tokenId) {
         return;
       }
-      fieldId = field.id;
-      textTokenId = field.tokens.find((token) => token.kind === "text")?.id ?? null;
-      insertAt = 0;
-    }
-    let next = insertMathTokenAtCaret(
-      current,
-      fieldId,
-      textTokenId,
-      insertAt,
-      session,
-      delimiters.opening,
-      delimiters.closing,
-      equationSide
-    );
-    const trailingTextTokenId = trailingTextTokenAfterInsertedMath(current, next, fieldId, textTokenId, insertAt);
-    const fieldAfter = findInlineFieldById(next, fieldId);
-    const insertedMathId = trailingTextTokenId && fieldAfter ? fieldAfter.tokens[Math.max(
-      0,
-      fieldAfter.tokens.findIndex((token) => token.id === trailingTextTokenId) - 1
-    )]?.kind === "math" ? fieldAfter.tokens[Math.max(
-      0,
-      fieldAfter.tokens.findIndex((token) => token.id === trailingTextTokenId) - 1
-    )]?.id : null : fieldAfter?.tokens.filter((token) => token.kind === "math").at(-1)?.id ?? null;
-    if (insertedMathId && selectedMath.mathMode === "display" && selectedMath.labelEnabled) {
-      next = updateMathTokenLabel(next, insertedMathId, {
-        labelEnabled: true,
-        label: selectedMath.label
-      });
-    }
-    if (trailingTextTokenId) {
-      pendingFocusRef.current = { kind: "text", fieldId, textTokenId: trailingTextTokenId, caretOffset: 0 };
-    }
-    applyDocument(next, "immediate");
-    setSelectedMath(null);
-  }
-  function deleteSelectedEquation() {
-    if (!selectedMath?.tokenId) {
-      return;
+      const current = documentRef.current;
+      const next = removeMathTokenById(current, selectedMath.tokenId);
+      pendingFocusRef.current = focusAfterDeletedMath(current, next, selectedMath.tokenId);
+      applyDocument(next, "immediate");
+      setSelectedMath(null);
     }
-    const current = documentRef.current;
-    const next = removeMathTokenById(current, selectedMath.tokenId);
-    pendingFocusRef.current = focusAfterDeletedMath(current, next, selectedMath.tokenId);
-    applyDocument(next, "immediate");
-    setSelectedMath(null);
-  }
-  function deleteMathToken(tokenId) {
-    const current = documentRef.current;
-    const next = removeMathTokenById(current, tokenId);
-    pendingFocusRef.current = focusAfterDeletedMath(current, next, tokenId);
-    applyDocument(next, "immediate");
-  }
-  function openCitePickerForInsert() {
-    const target = resolveInsertField(documentRef.current, editorFocus);
-    setCitePicker({
-      tokenId: null,
-      fieldId: target?.fieldId ?? null,
-      textTokenId: target?.textTokenId ?? editorFocus.textTokenId,
-      caretOffset: target?.caretOffset ?? editorFocus.caretOffset,
-      keys: []
-    });
-  }
-  function openCite(token) {
-    setCitePicker({
-      tokenId: token.id,
-      fieldId: null,
-      textTokenId: null,
-      caretOffset: 0,
-      keys: [...token.keys]
-    });
-  }
-  function confirmCiteKeys(keys) {
-    if (!citePicker || keys.length === 0) {
-      setCitePicker(null);
-      return;
+    function deleteMathToken(tokenId) {
+      const current = documentRef.current;
+      const next = removeMathTokenById(current, tokenId);
+      pendingFocusRef.current = focusAfterDeletedMath(current, next, tokenId);
+      applyDocument(next, "immediate");
+    }
+    function openCitePickerForInsert() {
+      const target = resolveInsertField(documentRef.current, editorFocus);
+      setCitePicker({
+        tokenId: null,
+        fieldId: target?.fieldId ?? null,
+        textTokenId: target?.textTokenId ?? editorFocus.textTokenId,
+        caretOffset: target?.caretOffset ?? editorFocus.caretOffset,
+        keys: []
+      });
     }
-    if (citePicker.tokenId) {
-      applyDocument(updateCiteTokenKeys(documentRef.current, citePicker.tokenId, keys), "immediate");
-      pendingFocusRef.current = { kind: "cite", tokenId: citePicker.tokenId };
-      setCitePicker(null);
-      return;
+    function openCite(token) {
+      setCitePicker({
+        tokenId: token.id,
+        fieldId: null,
+        textTokenId: null,
+        caretOffset: 0,
+        keys: [...token.keys]
+      });
     }
-    const target = resolveInsertField(documentRef.current, editorFocus);
-    const fieldId = citePicker.fieldId ?? target?.fieldId;
-    if (!fieldId) {
+    function confirmCiteKeys(keys) {
+      if (!citePicker || keys.length === 0) {
+        setCitePicker(null);
+        return;
+      }
+      if (citePicker.tokenId) {
+        applyDocument(updateCiteTokenKeys(documentRef.current, citePicker.tokenId, keys), "immediate");
+        pendingFocusRef.current = { kind: "cite", tokenId: citePicker.tokenId };
+        setCitePicker(null);
+        return;
+      }
+      const target = resolveInsertField(documentRef.current, editorFocus);
+      const fieldId = citePicker.fieldId ?? target?.fieldId;
+      if (!fieldId) {
+        setCitePicker(null);
+        return;
+      }
+      const textTokenId = citePicker.textTokenId ?? target?.textTokenId ?? null;
+      const caretOffset = citePicker.caretOffset ?? target?.caretOffset ?? 0;
+      const next = insertCiteTokenAtCaret(documentRef.current, fieldId, textTokenId, caretOffset, keys);
+      applyDocument(next, "immediate");
       setCitePicker(null);
-      return;
     }
-    const textTokenId = citePicker.textTokenId ?? target?.textTokenId ?? null;
-    const caretOffset = citePicker.caretOffset ?? target?.caretOffset ?? 0;
-    const next = insertCiteTokenAtCaret(documentRef.current, fieldId, textTokenId, caretOffset, keys);
-    applyDocument(next, "immediate");
-    setCitePicker(null);
-  }
-  function deleteCiteToken(tokenId) {
-    applyDocument(removeCiteTokenById(documentRef.current, tokenId), "immediate");
-  }
-  function openRefPickerForInsert() {
-    const target = resolveInsertField(documentRef.current, editorFocus);
-    setRefPicker({
-      tokenId: null,
-      fieldId: target?.fieldId ?? null,
-      textTokenId: target?.textTokenId ?? editorFocus.textTokenId,
-      caretOffset: target?.caretOffset ?? editorFocus.caretOffset,
-      keys: [],
-      refCommand: "ref"
-    });
-  }
-  function openRef(token) {
-    setRefPicker({
-      tokenId: token.id,
-      fieldId: null,
-      textTokenId: null,
-      caretOffset: 0,
-      keys: [...token.keys],
-      refCommand: token.refCommand
-    });
-  }
-  function confirmRefKeys(keys, refCommand) {
-    if (!refPicker || keys.length === 0) {
-      setRefPicker(null);
-      return;
+    function deleteCiteToken(tokenId) {
+      applyDocument(removeCiteTokenById(documentRef.current, tokenId), "immediate");
+    }
+    function openRefPickerForInsert() {
+      const target = resolveInsertField(documentRef.current, editorFocus);
+      setRefPicker({
+        tokenId: null,
+        fieldId: target?.fieldId ?? null,
+        textTokenId: target?.textTokenId ?? editorFocus.textTokenId,
+        caretOffset: target?.caretOffset ?? editorFocus.caretOffset,
+        keys: [],
+        refCommand: "ref"
+      });
     }
-    if (refPicker.tokenId) {
-      applyDocument(updateRefTokenKeys(documentRef.current, refPicker.tokenId, keys, refCommand), "immediate");
-      pendingFocusRef.current = { kind: "ref", tokenId: refPicker.tokenId };
-      setRefPicker(null);
-      return;
+    function openRef(token) {
+      setRefPicker({
+        tokenId: token.id,
+        fieldId: null,
+        textTokenId: null,
+        caretOffset: 0,
+        keys: [...token.keys],
+        refCommand: token.refCommand
+      });
     }
-    const target = resolveInsertField(documentRef.current, editorFocus);
-    const fieldId = refPicker.fieldId ?? target?.fieldId;
-    if (!fieldId) {
+    function confirmRefKeys(keys, refCommand) {
+      if (!refPicker || keys.length === 0) {
+        setRefPicker(null);
+        return;
+      }
+      if (refPicker.tokenId) {
+        applyDocument(updateRefTokenKeys(documentRef.current, refPicker.tokenId, keys, refCommand), "immediate");
+        pendingFocusRef.current = { kind: "ref", tokenId: refPicker.tokenId };
+        setRefPicker(null);
+        return;
+      }
+      const target = resolveInsertField(documentRef.current, editorFocus);
+      const fieldId = refPicker.fieldId ?? target?.fieldId;
+      if (!fieldId) {
+        setRefPicker(null);
+        return;
+      }
+      const textTokenId = refPicker.textTokenId ?? target?.textTokenId ?? null;
+      const caretOffset = refPicker.caretOffset ?? target?.caretOffset ?? 0;
+      const next = insertRefTokenAtCaret(documentRef.current, fieldId, textTokenId, caretOffset, keys, refCommand);
+      applyDocument(next, "immediate");
       setRefPicker(null);
-      return;
     }
-    const textTokenId = refPicker.textTokenId ?? target?.textTokenId ?? null;
-    const caretOffset = refPicker.caretOffset ?? target?.caretOffset ?? 0;
-    const next = insertRefTokenAtCaret(documentRef.current, fieldId, textTokenId, caretOffset, keys, refCommand);
-    applyDocument(next, "immediate");
-    setRefPicker(null);
-  }
-  function deleteRefToken(tokenId) {
-    applyDocument(removeRefTokenById(documentRef.current, tokenId), "immediate");
-  }
-  function toggleInlineTextStyle(styleName) {
-    if (!canFormatText || !editorFocus.fieldId || !editorFocus.textTokenId) {
-      return;
+    function deleteRefToken(tokenId) {
+      applyDocument(removeRefTokenById(documentRef.current, tokenId), "immediate");
     }
-    applyDocument(
-      toggleTextTokenStyle(
-        documentRef.current,
-        editorFocus.fieldId,
-        editorFocus.textTokenId,
-        editorFocus.selectionStart,
-        editorFocus.selectionEnd,
-        styleName
-      ),
-      "immediate"
-    );
-  }
-  const showEditorPanel = !previewOnly && editorOpen;
-  const showPreviewPanel = previewOnly || previewOpen;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    "div",
-    {
-      ref: widgetRef,
-      className: ["butex-document2-widget", className].filter(Boolean).join(" "),
-      dir: uiLocaleDirection(uiLocale),
-      lang: uiLocale,
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "butex-document2-widget__shell", children: [
-        !previewOnly ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "butex-document2-widget__toolbar", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-            DocumentInsertToolbar,
-            {
-              canUndo,
-              canRedo,
-              editableEquations,
-              uiLocale,
-              digitForm,
-              selectionCount,
-              canMoveSelectionUp,
-              canMoveSelectionDown,
-              canFormatText,
-              activeTextStyles,
-              onUndo: undoDocument,
-              onRedo: redoDocument,
-              onToggleTextStyle: toggleInlineTextStyle,
-              onMoveSelectionUp: () => moveSelectedBlocks(-1),
-              onMoveSelectionDown: () => moveSelectedBlocks(1),
-              onDeleteSelection: deleteSelectedBlocks,
-              onAddSection: () => {
-                clearBlockSelection();
-                applyDocument(addDocument2TextBlock(documentRef.current, "\\section", afterBlockId()), "immediate");
-              },
-              onAddSubsection: () => {
-                clearBlockSelection();
-                applyDocument(addDocument2TextBlock(documentRef.current, "\\subsection", afterBlockId()), "immediate");
-              },
-              onAddSubsubsection: () => {
-                clearBlockSelection();
-                applyDocument(addDocument2TextBlock(documentRef.current, "\\subsubsection", afterBlockId()), "immediate");
-              },
-              onAddParagraph: () => {
-                clearBlockSelection();
-                applyDocument(addDocument2TextBlock(documentRef.current, "\\paragraph", afterBlockId()), "immediate");
-              },
-              onAddInlineEquation: () => openNewEquation("inline"),
-              onAddDisplayEquation: () => openNewEquation("display"),
-              onAddTable: (rowCount, colCount) => {
-                clearBlockSelection();
-                applyDocument(addDocument2TableBlock(documentRef.current, "l".repeat(colCount), rowCount, colCount, afterBlockId()), "immediate");
-              },
-              onAddList: () => {
-                clearBlockSelection();
-                applyDocument(addDocument2ListBlock(documentRef.current, false, afterBlockId()), "immediate");
-              },
-              onAddEnumerate: () => {
-                clearBlockSelection();
-                applyDocument(addDocument2ListBlock(documentRef.current, true, afterBlockId()), "immediate");
-              },
-              onAddFigure: () => {
-                clearBlockSelection();
-                applyDocument(addDocument2ImageBlock(documentRef.current, "", afterBlockId()), "immediate");
-              },
-              onInsertCitation: openCitePickerForInsert,
-              onInsertInternalRef: openRefPickerForInsert,
-              onInsertBibliography: () => {
-                clearBlockSelection();
-                applyDocument(ensureDocument2BibliographyBlock(documentRef.current, afterBlockId()), "immediate");
-              },
-              onManageReferences: () => setReferencesOpen(true),
-              onManageLabels: () => setLabelsOpen(true),
-              onOpenArticleMeta: () => focusArticleMetaPanel(articleMetaPanelRef.current),
-              onDigitFormChange: (next) => {
-                setDigitFormState(next);
-                onDigitFormChange?.(next);
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.panels, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", "aria-pressed": editorOpen, onClick: toggleEditorPanel, children: editorOpen ? messages.hideEditor : messages.editor }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", "aria-pressed": previewOpen, onClick: togglePreviewPanel, children: previewOpen ? messages.hidePreview : messages.preview })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.collapseBlocks, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", onClick: collapseAllBlocks, children: messages.collapseAll }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", onClick: openAllBlocks, children: messages.openAll })
-          ] })
-        ] }) : null,
-        error ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "butex-document2-widget__error", children: error }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-          "div",
-          {
-            className: `butex-document2-widget__layout butex-document2-widget__layout--editor-${showEditorPanel ? "open" : "closed"} butex-document2-widget__layout--preview-${showPreviewPanel ? "open" : "closed"}`,
-            children: [
-              !previewOnly ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                "section",
-                {
-                  className: "butex-document2-widget__panel butex-document2-widget__editor-panel",
-                  "aria-label": messages.documentEditor,
-                  "aria-hidden": !showEditorPanel,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "butex-document2-widget__blocks", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                      ArticleMetaPanel,
-                      {
-                        meta: documentNode.meta ?? emptyDocument2Meta(),
-                        uiLocale,
-                        digitForm,
-                        panelRef: articleMetaPanelRef,
-                        onChange: (patch) => {
-                          clearBlockSelection();
-                          applyDocument(updateDocument2Meta(documentRef.current, patch), "text");
-                        }
-                      }
-                    ),
-                    documentNode.blocks.map((block, blockIndex) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                      BlockEditor,
-                      {
-                        block,
-                        references: documentNode.references,
-                        documentNode,
-                        documentDirection,
-                        digitForm,
-                        mathOutput,
-                        equationSide,
-                        editableEquations,
-                        editableCitations: !previewOnly,
-                        uiLocale,
-                        isCollapsed: collapsedBlockIds.has(block.id),
-                        selected: Boolean(blockSelection && blockIndex >= blockSelection.from && blockIndex <= blockSelection.to),
-                        onToggleSelect: toggleSelectBlock,
-                        onTextChange: (fieldId, tokenId, text) => {
-                          clearBlockSelection();
-                          applyDocument(updateTextToken(documentRef.current, fieldId, tokenId, text), "text");
-                        },
-                        onOpenMath: openMath,
-                        onDeleteMath: editableEquations ? deleteMathToken : void 0,
-                        onOpenCite: openCite,
-                        onDeleteCite: deleteCiteToken,
-                        onOpenRef: openRef,
-                        onDeleteRef: deleteRefToken,
-                        onToggleCollapse: toggleBlockCollapse,
-                        onBlockFocus: rememberBlockFocus,
-                        onFieldFocus: rememberFieldFocus,
-                        onMathFocus: rememberMathFocus,
-                        onFieldBlur,
-                        onImageSrcChange: (blockId, value) => {
-                          clearBlockSelection();
-                          applyDocument(updateDocument2ImageValue(documentRef.current, blockId, value), "text");
-                        },
-                        onFloatMetaChange: (blockId, kind, patch) => {
-                          clearBlockSelection();
-                          applyDocument(
-                            kind === "image" ? updateDocument2ImageMeta(documentRef.current, blockId, patch) : updateDocument2TableMeta(documentRef.current, blockId, patch),
-                            "text"
-                          );
-                        },
-                        onParagraphCenteredChange: (blockId, centered) => {
-                          clearBlockSelection();
-                          applyDocument(updateDocument2TextBlockCentered(documentRef.current, blockId, centered), "text");
-                        },
-                        onAddListItem: (listBlockId) => {
-                          clearBlockSelection();
-                          applyDocument(addDocument2ListItem(documentRef.current, listBlockId), "immediate");
-                        },
-                        onRemoveListItem: (listBlockId, itemId) => {
-                          clearBlockSelection();
-                          applyDocument(removeDocument2ListItem(documentRef.current, listBlockId, itemId), "immediate");
-                        },
-                        onManageReferences: () => setReferencesOpen(true)
-                      },
-                      block.id
-                    ))
-                  ] })
-                }
-              ) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                "section",
-                {
-                  className: "butex-document2-widget__panel butex-document2-widget__preview-panel",
-                  "aria-label": messages.documentPreview,
-                  "aria-hidden": !showPreviewPanel,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                    DocumentPreview,
-                    {
-                      blocks: preview.blocks,
-                      output: mathOutput,
-                      documentDirection,
-                      uiLocale,
-                      digitForm,
-                      resolveImageUrl
-                    }
-                  )
-                }
-              )
-            ]
-          }
+    function toggleInlineTextStyle(styleName) {
+      if (!canFormatText || !editorFocus.fieldId || !editorFocus.textTokenId) {
+        return;
+      }
+      applyDocument(
+        toggleTextTokenStyle(
+          documentRef.current,
+          editorFocus.fieldId,
+          editorFocus.textTokenId,
+          editorFocus.selectionStart,
+          editorFocus.selectionEnd,
+          styleName
         ),
-        debugEnabled ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "butex-document2-widget__dev", children: [
-          debugEnabled && documentNode.diagnostics.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("strong", { children: messages.importWarnings }),
-            documentNode.diagnostics.map((diagnostic) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "butex-document2-widget__dev-diagnostic", children: formatDocument2Diagnostic(diagnostic, messages) }, `${diagnostic.path}-${diagnostic.message}`))
-          ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "butex-document2-widget__dev-actions", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", onClick: () => void copyDebugText(JSON.stringify(documentJson, null, 2)), children: "Copy JSON" }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", onClick: () => void copyDebugText(latex), children: "Copy TeX" }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", "aria-expanded": debugImportOpen, onClick: openDebugJsonImport, children: "Import JSON" })
-          ] }),
-          debugImportOpen ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "butex-document2-widget__dev-import", children: [
+        "immediate"
+      );
+    }
+    const showEditorPanel = !previewOnly && editorOpen;
+    const showPreviewPanel = previewOnly || previewOpen;
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "div",
+      {
+        ref: widgetRef,
+        className: ["butex-document2-widget", className].filter(Boolean).join(" "),
+        dir: uiLocaleDirection(uiLocale),
+        lang: uiLocale,
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "butex-document2-widget__shell", children: [
+          !previewOnly ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "butex-document2-widget__toolbar", children: [
             /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              "textarea",
+              DocumentInsertToolbar,
               {
-                value: debugImportText,
-                "aria-label": "Import Document2 JSON",
-                spellCheck: false,
-                onChange: (event) => {
-                  setDebugImportText(event.currentTarget.value);
-                  setDebugImportError("");
+                canUndo,
+                canRedo,
+                editableEquations,
+                uiLocale,
+                digitForm,
+                selectionCount,
+                canMoveSelectionUp,
+                canMoveSelectionDown,
+                canFormatText,
+                activeTextStyles,
+                onUndo: undoDocument,
+                onRedo: redoDocument,
+                onToggleTextStyle: toggleInlineTextStyle,
+                onMoveSelectionUp: () => moveSelectedBlocks(-1),
+                onMoveSelectionDown: () => moveSelectedBlocks(1),
+                onDeleteSelection: deleteSelectedBlocks,
+                onAddSection: () => {
+                  clearBlockSelection();
+                  applyDocument(addDocument2TextBlock(documentRef.current, "\\section", afterBlockId()), "immediate");
+                },
+                onAddSubsection: () => {
+                  clearBlockSelection();
+                  applyDocument(addDocument2TextBlock(documentRef.current, "\\subsection", afterBlockId()), "immediate");
+                },
+                onAddSubsubsection: () => {
+                  clearBlockSelection();
+                  applyDocument(addDocument2TextBlock(documentRef.current, "\\subsubsection", afterBlockId()), "immediate");
+                },
+                onAddParagraph: () => {
+                  clearBlockSelection();
+                  applyDocument(addDocument2TextBlock(documentRef.current, "\\paragraph", afterBlockId()), "immediate");
+                },
+                onAddInlineEquation: () => openNewEquation("inline"),
+                onAddDisplayEquation: () => openNewEquation("display"),
+                onAddTable: (rowCount, colCount) => {
+                  clearBlockSelection();
+                  applyDocument(addDocument2TableBlock(documentRef.current, "l".repeat(colCount), rowCount, colCount, afterBlockId()), "immediate");
+                },
+                onAddList: () => {
+                  clearBlockSelection();
+                  applyDocument(addDocument2ListBlock(documentRef.current, false, afterBlockId()), "immediate");
+                },
+                onAddEnumerate: () => {
+                  clearBlockSelection();
+                  applyDocument(addDocument2ListBlock(documentRef.current, true, afterBlockId()), "immediate");
+                },
+                onAddFigure: () => insertImageBlock(""),
+                onInsertCitation: openCitePickerForInsert,
+                onInsertInternalRef: openRefPickerForInsert,
+                onInsertBibliography: () => {
+                  clearBlockSelection();
+                  applyDocument(ensureDocument2BibliographyBlock(documentRef.current, afterBlockId()), "immediate");
+                },
+                onManageReferences: () => setReferencesOpen(true),
+                onManageLabels: () => setLabelsOpen(true),
+                onOpenArticleMeta: () => focusArticleMetaPanel(articleMetaPanelRef.current),
+                onDigitFormChange: (next) => {
+                  setDigitFormState(next);
+                  onDigitFormChange?.(next);
                 }
               }
             ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.panels, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", "aria-pressed": editorOpen, onClick: toggleEditorPanel, children: editorOpen ? messages.hideEditor : messages.editor }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", "aria-pressed": previewOpen, onClick: togglePreviewPanel, children: previewOpen ? messages.hidePreview : messages.preview })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.collapseBlocks, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", onClick: collapseAllBlocks, children: messages.collapseAll }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", onClick: openAllBlocks, children: messages.openAll })
+            ] })
+          ] }) : null,
+          error ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "butex-document2-widget__error", children: error }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+            "div",
+            {
+              className: `butex-document2-widget__layout butex-document2-widget__layout--editor-${showEditorPanel ? "open" : "closed"} butex-document2-widget__layout--preview-${showPreviewPanel ? "open" : "closed"}`,
+              children: [
+                !previewOnly ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  "section",
+                  {
+                    className: "butex-document2-widget__panel butex-document2-widget__editor-panel",
+                    "aria-label": messages.documentEditor,
+                    "aria-hidden": !showEditorPanel,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "butex-document2-widget__blocks", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                        ArticleMetaPanel,
+                        {
+                          meta: documentNode.meta ?? emptyDocument2Meta(),
+                          uiLocale,
+                          digitForm,
+                          panelRef: articleMetaPanelRef,
+                          onChange: (patch) => {
+                            clearBlockSelection();
+                            applyDocument(updateDocument2Meta(documentRef.current, patch), "text");
+                          }
+                        }
+                      ),
+                      documentNode.blocks.map((block, blockIndex) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                        BlockEditor,
+                        {
+                          block,
+                          references: documentNode.references,
+                          documentNode,
+                          documentDirection,
+                          digitForm,
+                          mathOutput,
+                          equationSide,
+                          editableEquations,
+                          editableCitations: !previewOnly,
+                          uiLocale,
+                          isCollapsed: collapsedBlockIds.has(block.id),
+                          selected: Boolean(blockSelection && blockIndex >= blockSelection.from && blockIndex <= blockSelection.to),
+                          onToggleSelect: toggleSelectBlock,
+                          onTextChange: (fieldId, tokenId, text) => {
+                            clearBlockSelection();
+                            applyDocument(updateTextToken(documentRef.current, fieldId, tokenId, text), "text");
+                          },
+                          onOpenMath: openMath,
+                          onDeleteMath: editableEquations ? deleteMathToken : void 0,
+                          onOpenCite: openCite,
+                          onDeleteCite: deleteCiteToken,
+                          onOpenRef: openRef,
+                          onDeleteRef: deleteRefToken,
+                          onToggleCollapse: toggleBlockCollapse,
+                          onBlockFocus: rememberBlockFocus,
+                          onFieldFocus: rememberFieldFocus,
+                          onMathFocus: rememberMathFocus,
+                          onFieldBlur,
+                          onImageSrcChange: (blockId, value) => {
+                            clearBlockSelection();
+                            applyDocument(updateDocument2ImageValue(documentRef.current, blockId, value), "text");
+                          },
+                          onImageAssetChange: (blockId, asset) => {
+                            clearBlockSelection();
+                            applyDocument(updateDocument2ImageAsset(documentRef.current, blockId, asset), "immediate");
+                          },
+                          onImageAssetClear: (blockId) => {
+                            clearBlockSelection();
+                            applyDocument(clearDocument2ImageAsset(documentRef.current, blockId), "immediate");
+                          },
+                          resolveImageUrl,
+                          onRequestImagePick,
+                          listImageAssets,
+                          renderImageBlockEditor,
+                          onFloatMetaChange: (blockId, kind, patch) => {
+                            clearBlockSelection();
+                            applyDocument(
+                              kind === "image" ? updateDocument2ImageMeta(documentRef.current, blockId, patch) : updateDocument2TableMeta(documentRef.current, blockId, patch),
+                              "text"
+                            );
+                          },
+                          onParagraphCenteredChange: (blockId, centered) => {
+                            clearBlockSelection();
+                            applyDocument(updateDocument2TextBlockCentered(documentRef.current, blockId, centered), "text");
+                          },
+                          onAddListItem: (listBlockId) => {
+                            clearBlockSelection();
+                            applyDocument(addDocument2ListItem(documentRef.current, listBlockId), "immediate");
+                          },
+                          onRemoveListItem: (listBlockId, itemId) => {
+                            clearBlockSelection();
+                            applyDocument(removeDocument2ListItem(documentRef.current, listBlockId, itemId), "immediate");
+                          },
+                          onManageReferences: () => setReferencesOpen(true)
+                        },
+                        block.id
+                      ))
+                    ] })
+                  }
+                ) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  "section",
+                  {
+                    className: "butex-document2-widget__panel butex-document2-widget__preview-panel",
+                    "aria-label": messages.documentPreview,
+                    "aria-hidden": !showPreviewPanel,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                      DocumentPreview,
+                      {
+                        blocks: preview.blocks,
+                        output: mathOutput,
+                        documentDirection,
+                        uiLocale,
+                        digitForm,
+                        resolveImageUrl
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          debugEnabled ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "butex-document2-widget__dev", children: [
+            debugEnabled && documentNode.diagnostics.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("strong", { children: messages.importWarnings }),
+              documentNode.diagnostics.map((diagnostic) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "butex-document2-widget__dev-diagnostic", children: formatDocument2Diagnostic(diagnostic, messages) }, `${diagnostic.path}-${diagnostic.message}`))
+            ] }) : null,
             /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "butex-document2-widget__dev-actions", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", onClick: applyDebugJsonImport, children: "Apply" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", onClick: () => void copyDebugText(JSON.stringify(documentJson, null, 2)), children: "Copy JSON" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", onClick: () => void copyDebugText(latex), children: "Copy TeX" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", "aria-expanded": debugImportOpen, onClick: openDebugJsonImport, children: "Import JSON" })
+            ] }),
+            debugImportOpen ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "butex-document2-widget__dev-import", children: [
               /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                "button",
+                "textarea",
                 {
-                  type: "button",
-                  onClick: () => {
-                    setDebugImportOpen(false);
+                  value: debugImportText,
+                  "aria-label": "Import Document2 JSON",
+                  spellCheck: false,
+                  onChange: (event) => {
+                    setDebugImportText(event.currentTarget.value);
                     setDebugImportError("");
-                  },
-                  children: "Cancel"
+                  }
                 }
-              )
-            ] }),
-            debugImportError ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "butex-document2-widget__dev-error", children: debugImportError }) : null
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "butex-document2-widget__dev-actions", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", onClick: applyDebugJsonImport, children: "Apply" }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setDebugImportOpen(false);
+                      setDebugImportError("");
+                    },
+                    children: "Cancel"
+                  }
+                )
+              ] }),
+              debugImportError ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "butex-document2-widget__dev-error", children: debugImportError }) : null
+            ] }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("strong", { children: "LaTeX" }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("pre", { children: latex }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("strong", { children: "JSON" }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("pre", { children: JSON.stringify(documentJson, null, 2) }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("strong", { children: "AST" }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("pre", { children: JSON.stringify(documentNode, null, 2) })
           ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("strong", { children: "LaTeX" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("pre", { children: latex }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("strong", { children: "JSON" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("pre", { children: JSON.stringify(documentJson, null, 2) }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("strong", { children: "AST" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("pre", { children: JSON.stringify(documentNode, null, 2) })
-        ] }) : null,
-        !previewOnly && selectedMath ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          EquationDrawer,
-          {
-            debug: debugEnabled,
-            session: selectedMath.session,
-            reason: selectedMath.reason,
-            mathMode: selectedMath.mathMode,
-            canDelete: Boolean(selectedMath.tokenId),
-            equationSide,
-            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),
-            onClose: () => setSelectedMath(null),
-            onSave: saveEquation,
-            onDelete: deleteSelectedEquation
-          }
-        ) : null,
-        !previewOnly ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          CitePickerPopover,
-          {
-            open: citePicker !== null,
-            references: documentNode.references,
-            initialKeys: citePicker?.keys ?? [],
-            uiLocale,
-            digitForm,
-            onClose: () => setCitePicker(null),
-            onConfirm: confirmCiteKeys,
-            onManageReferences: () => {
-              setCitePicker(null);
-              setReferencesOpen(true);
+          !previewOnly && selectedMath ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            EquationDrawer,
+            {
+              debug: debugEnabled,
+              session: selectedMath.session,
+              reason: selectedMath.reason,
+              mathMode: selectedMath.mathMode,
+              canDelete: Boolean(selectedMath.tokenId),
+              equationSide,
+              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),
+              onClose: () => setSelectedMath(null),
+              onSave: saveEquation,
+              onDelete: deleteSelectedEquation
             }
-          }
-        ) : null,
-        !previewOnly ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          RefPickerPopover,
-          {
-            open: refPicker !== null,
-            labels: documentLabels,
-            initialKeys: refPicker?.keys ?? [],
-            initialRefCommand: refPicker?.refCommand ?? "ref",
-            uiLocale,
-            digitForm,
-            onClose: () => setRefPicker(null),
-            onConfirm: confirmRefKeys,
-            onManageLabels: () => {
-              setRefPicker(null);
-              setLabelsOpen(true);
+          ) : null,
+          !previewOnly ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            CitePickerPopover,
+            {
+              open: citePicker !== null,
+              references: documentNode.references,
+              initialKeys: citePicker?.keys ?? [],
+              uiLocale,
+              digitForm,
+              onClose: () => setCitePicker(null),
+              onConfirm: confirmCiteKeys,
+              onManageReferences: () => {
+                setCitePicker(null);
+                setReferencesOpen(true);
+              }
             }
-          }
-        ) : null,
-        !previewOnly ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          ReferencesPanel,
-          {
-            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"),
-            onRemove: (referenceId) => applyDocument(removeDocument2Reference(documentRef.current, referenceId), "immediate"),
-            onMove: (referenceId, direction) => applyDocument(moveDocument2Reference(documentRef.current, referenceId, direction), "immediate")
-          }
-        ) : null,
-        !previewOnly ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          LabelsPanel,
-          {
-            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),
-              "text"
-            ),
-            onUpdateEquationLabel: (tokenId, patch) => applyDocument(updateMathTokenLabel(documentRef.current, tokenId, patch), "text")
-          }
-        ) : null
-      ] })
-    }
-  );
-}
+          ) : null,
+          !previewOnly ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            RefPickerPopover,
+            {
+              open: refPicker !== null,
+              labels: documentLabels,
+              initialKeys: refPicker?.keys ?? [],
+              initialRefCommand: refPicker?.refCommand ?? "ref",
+              uiLocale,
+              digitForm,
+              onClose: () => setRefPicker(null),
+              onConfirm: confirmRefKeys,
+              onManageLabels: () => {
+                setRefPicker(null);
+                setLabelsOpen(true);
+              }
+            }
+          ) : null,
+          !previewOnly ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            ReferencesPanel,
+            {
+              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"),
+              onRemove: (referenceId) => applyDocument(removeDocument2Reference(documentRef.current, referenceId), "immediate"),
+              onMove: (referenceId, direction) => applyDocument(moveDocument2Reference(documentRef.current, referenceId, direction), "immediate")
+            }
+          ) : null,
+          !previewOnly ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            LabelsPanel,
+            {
+              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),
+                "text"
+              ),
+              onUpdateEquationLabel: (tokenId, patch) => applyDocument(updateMathTokenLabel(documentRef.current, tokenId, patch), "text")
+            }
+          ) : null
+        ] })
+      }
+    );
+  }
+);
+ButexDocumentEditor2.displayName = "ButexDocumentEditor2";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ButexDocumentEditor2,