@youversion/platform-react-ui 1.20.2 → 1.21.0

package/dist/index.js

@@ -29,6 +29,247 @@ import {
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { useBooks, useTheme } from "@youversion/platform-react-hooks";
 
+// ../core/dist/chunk-2Z2S2WY3.js
+var NON_BREAKING_SPACE = "\xA0";
+var FOOTNOTE_KEY_ATTR = "data-footnote-key";
+var NEEDS_SPACE_BEFORE = /^[^\s.,;:!?)}\]'"'»›]/;
+var ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "DIV",
+  "P",
+  "SPAN",
+  "SUP",
+  "SUB",
+  "EM",
+  "STRONG",
+  "I",
+  "B",
+  "SMALL",
+  "BR",
+  "SECTION",
+  "TABLE",
+  "THEAD",
+  "TBODY",
+  "TR",
+  "TD",
+  "TH"
+]);
+var DROP_ENTIRELY_TAGS = /* @__PURE__ */ new Set([
+  "SCRIPT",
+  "STYLE",
+  "IFRAME",
+  "OBJECT",
+  "EMBED",
+  "SVG",
+  "MATH",
+  "FORM",
+  "INPUT",
+  "BUTTON",
+  "TEXTAREA",
+  "SELECT",
+  "TEMPLATE",
+  "LINK",
+  "META",
+  "BASE",
+  "NOSCRIPT"
+]);
+var ALLOWED_ATTRS = /* @__PURE__ */ new Set(["class", "v", "colspan", "rowspan", "dir", "usfm"]);
+function sanitizeBibleHtmlDocument(doc) {
+  const root = doc.body ?? doc.documentElement;
+  for (const el of Array.from(root.querySelectorAll("*"))) {
+    const tag = el.tagName;
+    if (DROP_ENTIRELY_TAGS.has(tag)) {
+      el.remove();
+      continue;
+    }
+    if (!ALLOWED_TAGS.has(tag)) {
+      el.replaceWith(...Array.from(el.childNodes));
+      continue;
+    }
+    for (const attr of Array.from(el.attributes)) {
+      const name = attr.name.toLowerCase();
+      if (name.startsWith("on")) {
+        el.removeAttribute(attr.name);
+        continue;
+      }
+      if (!ALLOWED_ATTRS.has(name) && !name.startsWith("data-")) {
+        el.removeAttribute(attr.name);
+      }
+    }
+  }
+}
+function wrapVerseContent(doc) {
+  function wrapParagraphContent(doc2, paragraph, verseNum) {
+    const children = Array.from(paragraph.childNodes);
+    if (children.length === 0) return;
+    const wrapper = doc2.createElement("span");
+    wrapper.className = "yv-v";
+    wrapper.setAttribute("v", verseNum);
+    const firstChild = children[0];
+    if (firstChild) {
+      paragraph.insertBefore(wrapper, firstChild);
+    }
+    children.forEach((child) => {
+      wrapper.appendChild(child);
+    });
+  }
+  function wrapParagraphsUntilBoundary(doc2, verseNum, startParagraph, endParagraph) {
+    if (!startParagraph) return;
+    let currentParagraph = startParagraph.nextElementSibling;
+    while (currentParagraph && currentParagraph !== endParagraph) {
+      const isHeading = currentParagraph.classList.contains("yv-h") || currentParagraph.matches(
+        ".s1, .s2, .s3, .s4, .ms, .ms1, .ms2, .ms3, .ms4, .mr, .sp, .sr, .qa, .r"
+      );
+      if (isHeading) {
+        currentParagraph = currentParagraph.nextElementSibling;
+        continue;
+      }
+      if (currentParagraph.querySelector(".yv-v[v]")) break;
+      if (currentParagraph.classList.contains("p") || currentParagraph.tagName === "P") {
+        wrapParagraphContent(doc2, currentParagraph, verseNum);
+      }
+      currentParagraph = currentParagraph.nextElementSibling;
+    }
+  }
+  function handleParagraphWrapping(doc2, currentParagraph, nextParagraph, verseNum) {
+    if (!currentParagraph) return;
+    if (!nextParagraph) {
+      wrapParagraphsUntilBoundary(doc2, verseNum, currentParagraph);
+      return;
+    }
+    if (currentParagraph !== nextParagraph) {
+      wrapParagraphsUntilBoundary(doc2, verseNum, currentParagraph, nextParagraph);
+    }
+  }
+  function processVerseMarker(marker, index, markers) {
+    const verseNum = marker.getAttribute("v");
+    if (!verseNum) return;
+    const nextMarker = markers[index + 1];
+    const nodesToWrap = collectNodesBetweenMarkers(marker, nextMarker);
+    if (nodesToWrap.length === 0) return;
+    const currentParagraph = marker.closest(".p, p, div.p");
+    const nextParagraph = nextMarker?.closest(".p, p, div.p") || null;
+    const doc2 = marker.ownerDocument;
+    wrapNodesInVerse(marker, verseNum, nodesToWrap);
+    handleParagraphWrapping(doc2, currentParagraph, nextParagraph, verseNum);
+  }
+  function wrapNodesInVerse(marker, verseNum, nodes) {
+    const wrapper = marker.ownerDocument.createElement("span");
+    wrapper.className = "yv-v";
+    wrapper.setAttribute("v", verseNum);
+    const firstNode = nodes[0];
+    if (firstNode) {
+      marker.parentNode?.insertBefore(wrapper, firstNode);
+    }
+    nodes.forEach((node) => {
+      wrapper.appendChild(node);
+    });
+    marker.remove();
+  }
+  function shouldStopCollecting(node, endMarker) {
+    if (node === endMarker) return true;
+    if (endMarker && node.nodeType === 1 && node.contains(endMarker)) return true;
+    return false;
+  }
+  function shouldSkipNode(node) {
+    return node.nodeType === 1 && node.classList.contains("yv-h");
+  }
+  function collectNodesBetweenMarkers(startMarker, endMarker) {
+    const nodes = [];
+    let current = startMarker.nextSibling;
+    while (current && !shouldStopCollecting(current, endMarker)) {
+      if (shouldSkipNode(current)) {
+        current = current.nextSibling;
+        continue;
+      }
+      nodes.push(current);
+      current = current.nextSibling;
+    }
+    return nodes;
+  }
+  const verseMarkers = Array.from(doc.querySelectorAll(".yv-v[v]"));
+  verseMarkers.forEach(processVerseMarker);
+}
+function assignFootnoteKeys(doc) {
+  let introIdx = 0;
+  doc.querySelectorAll(".yv-n.f").forEach((fn) => {
+    const verseNum = fn.closest(".yv-v[v]")?.getAttribute("v");
+    fn.setAttribute(FOOTNOTE_KEY_ATTR, verseNum ?? `intro-${introIdx++}`);
+  });
+}
+function replaceFootnotesWithAnchors(doc, footnotes) {
+  for (const fn of footnotes) {
+    const key = fn.getAttribute(FOOTNOTE_KEY_ATTR);
+    if (!key) continue;
+    const prev = fn.previousSibling;
+    const next = fn.nextSibling;
+    const prevText = prev?.textContent ?? "";
+    const nextText = next?.textContent ?? "";
+    const prevNeedsSpace = prevText.length > 0 && !/\s$/.test(prevText);
+    const nextNeedsSpace = nextText.length > 0 && NEEDS_SPACE_BEFORE.test(nextText);
+    if (prevNeedsSpace && nextNeedsSpace && fn.parentNode) {
+      fn.parentNode.insertBefore(doc.createTextNode(" "), fn);
+    }
+    const anchor = doc.createElement("span");
+    anchor.setAttribute("data-verse-footnote", key);
+    anchor.setAttribute("data-verse-footnote-content", fn.innerHTML);
+    fn.replaceWith(anchor);
+  }
+}
+function addNbspToVerseLabels(doc) {
+  doc.querySelectorAll(".yv-vlbl").forEach((label) => {
+    const text = label.textContent || "";
+    if (!text.endsWith(NON_BREAKING_SPACE)) {
+      label.textContent = text + NON_BREAKING_SPACE;
+    }
+  });
+}
+function fixIrregularTables(doc) {
+  doc.querySelectorAll("table").forEach((table) => {
+    const rows = table.querySelectorAll("tr");
+    if (rows.length === 0) return;
+    let maxColumns = 0;
+    rows.forEach((row) => {
+      let count = 0;
+      row.querySelectorAll("td, th").forEach((cell) => {
+        count += parseInt(cell.getAttribute("colspan") || "1", 10);
+      });
+      maxColumns = Math.max(maxColumns, count);
+    });
+    if (maxColumns > 1) {
+      rows.forEach((row) => {
+        const cells = row.querySelectorAll("td, th");
+        if (cells.length === 1) {
+          const existing = parseInt(cells[0].getAttribute("colspan") || "1", 10);
+          if (existing < maxColumns) {
+            cells[0].setAttribute("colspan", maxColumns.toString());
+          }
+        }
+      });
+    }
+  });
+}
+function transformBibleHtml(html, options) {
+  const doc = options.parseHtml(html);
+  sanitizeBibleHtmlDocument(doc);
+  wrapVerseContent(doc);
+  assignFootnoteKeys(doc);
+  const footnotes = Array.from(doc.querySelectorAll(".yv-n.f"));
+  replaceFootnotesWithAnchors(doc, footnotes);
+  addNbspToVerseLabels(doc);
+  fixIrregularTables(doc);
+  const transformedHtml = options.serializeHtml(doc);
+  return { html: transformedHtml };
+}
+function transformBibleHtmlForBrowser(html) {
+  if (typeof globalThis.DOMParser === "undefined") {
+    throw new Error("DOMParser is required to transform Bible HTML in browser environments");
+  }
+  return transformBibleHtml(html, {
+    parseHtml: (h) => new DOMParser().parseFromString(h, "text/html"),
+    serializeHtml: (doc) => doc.body.innerHTML
+  });
+}
+
 // ../../node_modules/.pnpm/zod@4.1.12/node_modules/zod/v4/classic/external.js
 var external_exports = {};
 __export(external_exports, {
@@ -13251,12 +13492,18 @@ var BibleClient = (_a = class {
   /**
    * Fetches a passage (range of verses) from the Bible using the passages endpoint.
    * This is the new API format that returns HTML-formatted content.
+   *
+   * Note: The HTML returned from the API contains inline footnote content that should
+   * be transformed before rendering. Use `transformBibleHtml()` or
+   * `transformBibleHtmlForBrowser()` to clean up the HTML and extract footnotes.
+   *
    * @param versionId The version ID.
    * @param usfm The USFM reference (e.g., "JHN.3.1-2", "GEN.1", "JHN.3.16").
    * @param format The format to return ("html" or "text", default: "html").
    * @param include_headings Whether to include headings in the content.
    * @param include_notes Whether to include notes in the content.
    * @returns The requested BiblePassage object with HTML content.
+   *
    * @example
    * ```ts
    * // Get a single verse
@@ -13267,6 +13514,10 @@ var BibleClient = (_a = class {
    *
    * // Get an entire chapter
    * const chapter = await bibleClient.getPassage(3034, "GEN.1");
+   *
+   * // Transform HTML before rendering
+   * const passage = await bibleClient.getPassage(3034, "JHN.3.16", "html", true, true);
+   * const transformed = transformBibleHtmlForBrowser(passage.content);
    * ```
    */
   async getPassage(versionId, usfm, format = "html", include_headings, include_notes) {
@@ -15716,8 +15967,11 @@ var Footnote = (props) => /* @__PURE__ */ jsx21(
 );
 
 // src/lib/verse-html-utils.ts
-import DOMPurify from "isomorphic-dompurify";
-var NON_BREAKING_SPACE = "\xA0";
+var INTER_FONT = '"Inter", sans-serif';
+var SOURCE_SERIF_FONT = '"Source Serif 4", serif';
+
+// src/components/verse.tsx
+import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs7 } from "react/jsx-runtime";
 var LETTERS = "abcdefghijklmnopqrstuvwxyz";
 function getFootnoteMarker(index) {
   const base = LETTERS.length;
@@ -15730,238 +15984,34 @@ function getFootnoteMarker(index) {
   } while (value >= 0);
   return marker;
 }
-var INTER_FONT = '"Inter", sans-serif';
-var SOURCE_SERIF_FONT = '"Source Serif 4", serif';
-function wrapVerseContent(doc) {
-  function wrapParagraphContent(doc2, paragraph, verseNum) {
-    const children = Array.from(paragraph.childNodes);
-    if (children.length === 0) return;
-    const wrapper = doc2.createElement("span");
-    wrapper.className = "yv-v";
-    wrapper.setAttribute("v", verseNum);
-    const firstChild = children[0];
-    if (firstChild) {
-      paragraph.insertBefore(wrapper, firstChild);
-    }
-    children.forEach((child) => {
-      wrapper.appendChild(child);
-    });
-  }
-  function wrapParagraphsUntilBoundary(doc2, verseNum, startParagraph, endParagraph) {
-    if (!startParagraph) return;
-    let currentP = startParagraph.nextElementSibling;
-    while (currentP && currentP !== endParagraph) {
-      const isHeading = currentP.classList.contains("yv-h") || currentP.matches(".s1, .s2, .s3, .s4, .ms, .ms1, .ms2, .ms3, .ms4, .mr, .sp, .sr, .qa, .r");
-      if (isHeading) {
-        currentP = currentP.nextElementSibling;
-        continue;
-      }
-      if (currentP.querySelector(".yv-v[v]")) break;
-      if (currentP.classList.contains("p") || currentP.tagName === "P") {
-        wrapParagraphContent(doc2, currentP, verseNum);
-      }
-      currentP = currentP.nextElementSibling;
-    }
-  }
-  function handleParagraphWrapping(doc2, currentParagraph, nextParagraph, verseNum) {
-    if (!currentParagraph) return;
-    if (!nextParagraph) {
-      wrapParagraphsUntilBoundary(doc2, verseNum, currentParagraph);
-      return;
-    }
-    if (currentParagraph !== nextParagraph) {
-      wrapParagraphsUntilBoundary(doc2, verseNum, currentParagraph, nextParagraph);
-    }
-  }
-  function processVerseMarker(marker, index, markers) {
-    const verseNum = marker.getAttribute("v");
-    if (!verseNum) return;
-    const nextMarker = markers[index + 1];
-    const nodesToWrap = collectNodesBetweenMarkers(marker, nextMarker);
-    if (nodesToWrap.length === 0) return;
-    const currentParagraph = marker.closest(".p, p, div.p");
-    const nextParagraph = nextMarker?.closest(".p, p, div.p") || null;
-    const doc2 = marker.ownerDocument;
-    wrapNodesInVerse(marker, verseNum, nodesToWrap);
-    handleParagraphWrapping(doc2, currentParagraph, nextParagraph, verseNum);
-  }
-  function wrapNodesInVerse(marker, verseNum, nodes) {
-    const wrapper = marker.ownerDocument.createElement("span");
-    wrapper.className = "yv-v";
-    wrapper.setAttribute("v", verseNum);
-    const firstNode = nodes[0];
-    if (firstNode) {
-      marker.parentNode?.insertBefore(wrapper, firstNode);
-    }
-    nodes.forEach((node) => {
-      wrapper.appendChild(node);
-    });
-    marker.remove();
-  }
-  function shouldStopCollecting(node, endMarker) {
-    if (node === endMarker) return true;
-    if (endMarker && node instanceof Element && node.contains(endMarker)) return true;
-    return false;
-  }
-  function shouldSkipNode(node) {
-    return node instanceof Element && node.classList.contains("yv-h");
-  }
-  function collectNodesBetweenMarkers(startMarker, endMarker) {
-    const nodes = [];
-    let current = startMarker.nextSibling;
-    while (current && !shouldStopCollecting(current, endMarker)) {
-      if (shouldSkipNode(current)) {
-        current = current.nextSibling;
-        continue;
-      }
-      nodes.push(current);
-      current = current.nextSibling;
-    }
-    return nodes;
-  }
-  const verseMarkers = Array.from(doc.querySelectorAll(".yv-v[v]"));
-  verseMarkers.forEach(processVerseMarker);
-}
-var NEEDS_SPACE_BEFORE = /^[^\s.,;:!?)}\]'"»›]/;
-function buildVerseHtml(wrappers) {
+function getVerseHtmlFromDom(container, verseNum) {
+  const wrappers = container.querySelectorAll(`.yv-v[v="${verseNum}"]`);
+  if (!wrappers.length) return "";
   const parts = [];
   let noteIdx = 0;
-  for (let i = 0; i < wrappers.length; i++) {
+  wrappers.forEach((wrapper, i) => {
     if (i > 0) parts.push(" ");
-    const clone2 = wrappers[i].cloneNode(true);
-    const ownerDoc = wrappers[i].ownerDocument;
+    const clone2 = wrapper.cloneNode(true);
     clone2.querySelectorAll(".yv-h, .yv-vlbl").forEach((el) => el.remove());
-    clone2.querySelectorAll(".yv-n.f").forEach((fn) => {
-      const marker = ownerDoc.createElement("sup");
-      marker.className = "yv:text-muted-foreground";
-      marker.textContent = getFootnoteMarker(noteIdx++);
-      fn.replaceWith(marker);
+    clone2.querySelectorAll("[data-verse-footnote]").forEach((anchor) => {
+      const sup = wrapper.ownerDocument.createElement("sup");
+      sup.className = "yv:text-muted-foreground";
+      sup.textContent = getFootnoteMarker(noteIdx++);
+      anchor.replaceWith(sup);
     });
     parts.push(clone2.innerHTML);
-  }
-  return parts.join("");
-}
-var FOOTNOTE_KEY_ATTR = "data-footnote-key";
-function assignFootnoteKeys(doc) {
-  let introIdx = 0;
-  doc.querySelectorAll(".yv-n.f").forEach((fn) => {
-    const verseNum = fn.closest(".yv-v[v]")?.getAttribute("v");
-    fn.setAttribute(FOOTNOTE_KEY_ATTR, verseNum ?? `intro-${introIdx++}`);
   });
+  return parts.join("");
 }
-function replaceFootnotesWithAnchors(doc, footnotes) {
-  for (const fn of footnotes) {
-    const key = fn.getAttribute(FOOTNOTE_KEY_ATTR);
-    const prev = fn.previousSibling;
-    const next = fn.nextSibling;
-    const prevText = prev?.textContent ?? "";
-    const nextText = next?.textContent ?? "";
-    const prevNeedsSpace = prevText.length > 0 && !/\s$/.test(prevText);
-    const nextNeedsSpace = nextText.length > 0 && NEEDS_SPACE_BEFORE.test(nextText);
-    if (prevNeedsSpace && nextNeedsSpace && fn.parentNode) {
-      fn.parentNode.insertBefore(doc.createTextNode(" "), fn);
-    }
-    const anchor = doc.createElement("span");
-    anchor.setAttribute("data-verse-footnote", key);
-    fn.replaceWith(anchor);
-  }
-}
-function extractNotesFromWrappedHtml(doc) {
-  const footnotes = Array.from(doc.querySelectorAll(".yv-n.f"));
-  if (!footnotes.length) return {};
-  const footnotesByKey = /* @__PURE__ */ new Map();
-  for (const fn of footnotes) {
-    const key = fn.getAttribute(FOOTNOTE_KEY_ATTR);
-    let arr = footnotesByKey.get(key);
-    if (!arr) {
-      arr = [];
-      footnotesByKey.set(key, arr);
-    }
-    arr.push(fn);
-  }
-  const wrappersByVerse = /* @__PURE__ */ new Map();
-  doc.querySelectorAll(".yv-v[v]").forEach((el) => {
-    const verseNum = el.getAttribute("v");
-    if (!verseNum) return;
-    const arr = wrappersByVerse.get(verseNum);
-    if (arr) arr.push(el);
-    else wrappersByVerse.set(verseNum, [el]);
-  });
-  const notes = {};
-  for (const [key, fns] of footnotesByKey) {
-    const wrappers = wrappersByVerse.get(key);
-    notes[key] = {
-      verseHtml: wrappers ? buildVerseHtml(wrappers) : "",
-      notes: fns.map((fn) => fn.innerHTML),
-      hasVerseContext: !!wrappers
-    };
-  }
-  replaceFootnotesWithAnchors(doc, footnotes);
-  return notes;
-}
-function addNbspToVerseLabels(doc) {
-  doc.querySelectorAll(".yv-vlbl").forEach((label) => {
-    const text = label.textContent || "";
-    if (!text.endsWith(NON_BREAKING_SPACE)) {
-      label.textContent = text + NON_BREAKING_SPACE;
-    }
-  });
-}
-function fixIrregularTables(doc) {
-  doc.querySelectorAll("table").forEach((table) => {
-    const rows = table.querySelectorAll("tr");
-    if (rows.length === 0) return;
-    let maxColumns = 0;
-    rows.forEach((row) => {
-      let count = 0;
-      row.querySelectorAll("td, th").forEach((cell) => {
-        count += cell instanceof HTMLTableCellElement ? parseInt(cell.getAttribute("colspan") || "1", 10) : 1;
-      });
-      maxColumns = Math.max(maxColumns, count);
-    });
-    if (maxColumns > 1) {
-      rows.forEach((row) => {
-        const cells = row.querySelectorAll("td, th");
-        if (cells.length === 1 && cells[0] instanceof HTMLTableCellElement) {
-          const existing = parseInt(cells[0].getAttribute("colspan") || "1", 10);
-          if (existing < maxColumns) {
-            cells[0].setAttribute("colspan", maxColumns.toString());
-          }
-        }
-      });
-    }
-  });
-}
-var DOMPURIFY_CONFIG = {
-  ALLOWED_ATTR: ["class", "style", "id", "v", "usfm"],
-  ALLOW_DATA_ATTR: true
-};
-function transformBibleHtml(html) {
-  if (typeof window === "undefined" || !("DOMParser" in window)) {
-    return { html, notes: {} };
-  }
-  const doc = new DOMParser().parseFromString(
-    DOMPurify.sanitize(html, DOMPURIFY_CONFIG),
-    "text/html"
-  );
-  wrapVerseContent(doc);
-  assignFootnoteKeys(doc);
-  const notes = extractNotesFromWrappedHtml(doc);
-  addNbspToVerseLabels(doc);
-  fixIrregularTables(doc);
-  return { html: doc.body.innerHTML, notes };
-}
-
-// src/components/verse.tsx
-import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs7 } from "react/jsx-runtime";
 var VerseFootnoteButton = memo(function VerseFootnoteButton2({
   verseNum,
-  verseNotes,
+  notes,
+  verseHtml,
+  hasVerseContext,
   reference,
   fontSize,
   theme
 }) {
-  const { hasVerseContext } = verseNotes;
   const verseReference = reference ? `${reference}:${verseNum}` : `Verse ${verseNum}`;
   return /* @__PURE__ */ jsxs7(Popover, { children: [
     /* @__PURE__ */ jsx22(PopoverTrigger, { "data-yv-sdk": true, "data-yv-theme": theme, asChild: true, children: /* @__PURE__ */ jsx22(
@@ -15986,11 +16036,11 @@ var VerseFootnoteButton = memo(function VerseFootnoteButton2({
               {
                 className: "yv:mb-3 yv:font-serif yv:*:font-serif",
                 style: { fontSize: fontSize ? `${fontSize}px` : "1.25rem" },
-                dangerouslySetInnerHTML: { __html: verseNotes.verseHtml }
+                dangerouslySetInnerHTML: { __html: verseHtml }
               }
             )
           ] }),
-          /* @__PURE__ */ jsx22("ul", { className: "yv:list-none yv:p-0 yv:m-0 yv:space-y-1", children: verseNotes.notes.map((note, index) => {
+          /* @__PURE__ */ jsx22("ul", { className: "yv:list-none yv:p-0 yv:m-0 yv:space-y-1", children: notes.map((note, index) => {
             const marker = getFootnoteMarker(index);
             return /* @__PURE__ */ jsxs7(
               "li",
@@ -16029,7 +16079,6 @@ function VerseUnavailableMessage() {
 }
 function BibleTextHtml({
   html,
-  notes,
   reference,
   fontSize,
   theme,
@@ -16038,19 +16087,32 @@ function BibleTextHtml({
   highlightedVerses = {}
 }) {
   const contentRef = useRef3(null);
-  const [placeholders, setPlaceholders] = useState3([]);
+  const [footnoteData, setFootnoteData] = useState3([]);
   const providerTheme = useTheme3();
   const currentTheme = theme || providerTheme;
   useLayoutEffect(() => {
     if (!contentRef.current) return;
     contentRef.current.innerHTML = html;
     const anchors = contentRef.current.querySelectorAll("[data-verse-footnote]");
+    const notesByKey = /* @__PURE__ */ new Map();
+    anchors.forEach((el) => {
+      const verseNum = el.getAttribute("data-verse-footnote");
+      if (!verseNum) return;
+      const content = el.getAttribute("data-verse-footnote-content") || "";
+      const existing = notesByKey.get(verseNum);
+      if (existing) existing.push(content);
+      else notesByKey.set(verseNum, [content]);
+    });
     const result = [];
     anchors.forEach((el) => {
       const verseNum = el.getAttribute("data-verse-footnote");
-      if (verseNum) result.push({ verseNum, el });
+      if (!verseNum) return;
+      const allNotes = notesByKey.get(verseNum) || [];
+      const hasVerseContext = el.closest(".yv-v[v]") !== null;
+      const verseHtml = hasVerseContext ? getVerseHtmlFromDom(contentRef.current, verseNum) : "";
+      result.push({ verseNum, el, notes: allNotes, verseHtml, hasVerseContext });
     });
-    setPlaceholders(result);
+    setFootnoteData(result);
   }, [html]);
   useLayoutEffect(() => {
     if (!contentRef.current) return;
@@ -16070,15 +16132,15 @@ function BibleTextHtml({
   } : void 0;
   return /* @__PURE__ */ jsxs7(Fragment2, { children: [
     /* @__PURE__ */ jsx22("div", { ref: contentRef, onClick: handleClick }),
-    placeholders.map(({ verseNum, el }, index) => {
-      const verseNotes = notes[verseNum];
-      if (!verseNotes) return null;
-      return createPortal(
+    footnoteData.map(
+      ({ verseNum, el, notes, verseHtml, hasVerseContext }, index) => createPortal(
         /* @__PURE__ */ jsx22(
           VerseFootnoteButton,
           {
             verseNum,
-            verseNotes,
+            notes,
+            verseHtml,
+            hasVerseContext,
             reference,
             fontSize,
             theme: currentTheme
@@ -16086,8 +16148,8 @@ function BibleTextHtml({
         ),
         el,
         `${verseNum}-${index}`
-      );
-    })
+      )
+    )
   ] });
 }
 var Verse = {
@@ -16130,7 +16192,10 @@ var Verse = {
       onVerseSelect,
       highlightedVerses
     }, ref) => {
-      const transformedData = useMemo3(() => transformBibleHtml(html), [html]);
+      const transformedHtml = useMemo3(
+        () => typeof window === "undefined" ? html : transformBibleHtmlForBrowser(html).html,
+        [html]
+      );
       const providerTheme = useTheme3();
       const currentTheme = theme || providerTheme;
       return /* @__PURE__ */ jsx22(
@@ -16149,8 +16214,7 @@ var Verse = {
           children: /* @__PURE__ */ jsx22(
             BibleTextHtml,
             {
-              html: transformedData.html,
-              notes: transformedData.notes,
+              html: transformedHtml,
               reference,
               fontSize,
               theme: currentTheme,
@@ -17488,5 +17552,6 @@ export {
   YouVersionProvider,
   YouVersionUserInfo,
   getAdjacentChapter,
+  transformBibleHtml,
   useYVAuth3 as useYVAuth
 };

package/dist/lib/verse-html-utils.d.ts

@@ -1,32 +1,4 @@
-/**
- * Converts a 0-based footnote index into an alphabetic marker.
- *
- * Examples with LETTERS = "abcdefghijklmnopqrstuvwxyz":
- * 0 -> "a", 25 -> "z", 26 -> "aa", 27 -> "ab"
- *
- * This uses spreadsheet-style indexing and derives its base from
- * LETTERS.length so there are no hardcoded numeric assumptions.
- */
-export declare function getFootnoteMarker(index: number): string;
-export type VerseNotes = {
-    verseHtml: string;
-    notes: string[];
-    hasVerseContext: boolean;
-};
 export declare const INTER_FONT: "\"Inter\", sans-serif";
 export declare const SOURCE_SERIF_FONT: "\"Source Serif 4\", serif";
 export type FontFamily = typeof INTER_FONT | typeof SOURCE_SERIF_FONT | (string & {});
-/**
- * Full transformation pipeline for Bible HTML from the API.
- *
- * 1. Sanitize (DOMPurify)
- * 2. Wrap verse content in selectable spans
- * 3. Extract footnotes and replace with portal anchors
- * 4. Add non-breaking spaces to verse labels
- * 5. Fix irregular table layouts
- */
-export declare function transformBibleHtml(html: string): {
-    html: string;
-    notes: Record<string, VerseNotes>;
-};
 //# sourceMappingURL=verse-html-utils.d.ts.map