@youversion/platform-react-ui 1.14.3 → 1.15.0

package/dist/components/bible-card.d.ts

@@ -0,0 +1,8 @@
+export type BibleCardProps = {
+    reference: string;
+    versionId: number;
+    background?: 'light' | 'dark';
+    showVersionPicker?: boolean;
+};
+export declare function BibleCard({ reference, versionId, background, showVersionPicker, }: BibleCardProps): React.ReactNode;
+//# sourceMappingURL=bible-card.d.ts.map

package/dist/components/bible-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bible-card.d.ts","sourceRoot":"","sources":["../../src/components/bible-card.tsx"],"names":[],"mappings":"AAQA,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AACF,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,SAAS,EACT,UAAU,EACV,iBAAyB,GAC1B,EAAE,cAAc,GAAG,KAAK,CAAC,SAAS,CAmElC"}

package/dist/components/bible-version-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bible-version-picker.d.ts","sourceRoot":"","sources":["../../src/components/bible-version-picker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAY,MAAM,2BAA2B,CAAC;AASxE,OAAO,EAEL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AASf,OAAO,EAA2B,cAAc,EAAE,MAAM,cAAc,CAAC;AAGvE,eAAO,MAAM,mBAAmB,+CAA+C,CAAC;AAqIhF,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,iBAAS,IAAI,CAAC,EACZ,SAAS,EAAE,mBAAmB,EAC9B,eAAe,EACf,UAAU,EACV,IAAY,EACZ,QAAQ,GACT,EAAE,SAAS,2CAoIX;AAED,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAC/C,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,EAC3C,UAAU,CACX,GAAG;IACF,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,YAAY,GAAG,IAAI,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACtF,CAAC;AAEF,iBAAS,OAAO,CAAC,EAAE,OAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,8BAA8B,2CAkBtF;AAED,iBAAS,OAAO,4CAsTf;AAED,eAAO,MAAM,kBAAkB;;;;CAAgD,CAAC;AAChF,MAAM,MAAM,2BAA2B,GAAG,SAAS,CAAC"}
+{"version":3,"file":"bible-version-picker.d.ts","sourceRoot":"","sources":["../../src/components/bible-version-picker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAY,MAAM,2BAA2B,CAAC;AASxE,OAAO,EAEL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AASf,OAAO,EAA2B,cAAc,EAAE,MAAM,cAAc,CAAC;AAGvE,eAAO,MAAM,mBAAmB,+CAA+C,CAAC;AAqIhF,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,iBAAS,IAAI,CAAC,EACZ,SAAS,EAAE,mBAAmB,EAC9B,eAAe,EACf,UAAU,EACV,IAAY,EACZ,QAAQ,GACT,EAAE,SAAS,2CA+IX;AAED,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAC/C,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,EAC3C,UAAU,CACX,GAAG;IACF,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,YAAY,GAAG,IAAI,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACtF,CAAC;AAEF,iBAAS,OAAO,CAAC,EAAE,OAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,8BAA8B,2CAkBtF;AAED,iBAAS,OAAO,4CAsTf;AAED,eAAO,MAAM,kBAAkB;;;;CAAgD,CAAC;AAChF,MAAM,MAAM,2BAA2B,GAAG,SAAS,CAAC"}

package/dist/components/bible-widget-view.d.ts

@@ -1,8 +1,11 @@
-export type BibleWidgetViewProps = {
-    reference: string;
-    versionId: number;
-    background?: 'light' | 'dark';
-    showVersionPicker?: boolean;
-};
-export declare function BibleWidgetView({ reference, versionId, background, showVersionPicker, }: BibleWidgetViewProps): React.ReactNode;
+import { BibleCard } from './bible-card';
+import type { BibleCardProps } from './bible-card';
+/**
+ * @deprecated Use `BibleCardProps` instead. This type alias will be removed in a future major version.
+ */
+export type BibleWidgetViewProps = BibleCardProps;
+/**
+ * @deprecated Use `BibleCard` instead. This component will be removed in a future major version.
+ */
+export declare const BibleWidgetView: typeof BibleCard;
 //# sourceMappingURL=bible-widget-view.d.ts.map

package/dist/components/bible-widget-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bible-widget-view.d.ts","sourceRoot":"","sources":["../../src/components/bible-widget-view.tsx"],"names":[],"mappings":"AAQA,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AACF,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,SAAS,EACT,UAAU,EACV,iBAAyB,GAC1B,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAmExC"}
+{"version":3,"file":"bible-widget-view.d.ts","sourceRoot":"","sources":["../../src/components/bible-widget-view.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC;AAElD;;GAEG;AACH,eAAO,MAAM,eAAe,kBAAY,CAAC"}

package/dist/components/index.d.ts

@@ -4,5 +4,6 @@ export { BibleVersionPicker, type BibleVersionPickerRootProps, type BibleVersion
 export { YouVersionAuthButton, type YouVersionAuthButtonProps } from './YouVersionAuthButton';
 export { VerseOfTheDay, type VerseOfTheDayProps } from './verse-of-the-day';
 export { BibleTextView, type BibleTextViewProps } from './verse';
+export { BibleCard, type BibleCardProps } from './bible-card';
 export { BibleWidgetView, type BibleWidgetViewProps } from './bible-widget-view';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC/F,OAAO,EAAE,WAAW,EAAE,KAAK,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACxE,OAAO,EACL,kBAAkB,EAClB,KAAK,2BAA2B,EAChC,KAAK,8BAA8B,GACpC,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAC9F,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC/F,OAAO,EAAE,WAAW,EAAE,KAAK,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACxE,OAAO,EACL,kBAAkB,EAClB,KAAK,2BAA2B,EAChC,KAAK,8BAA8B,GACpC,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAC9F,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/verse.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"verse.d.ts","sourceRoot":"","sources":["../../src/components/verse.tsx"],"names":[],"mappings":"AAeA,OAAO,EAIL,KAAK,UAAU,EAGhB,MAAM,wBAAwB,CAAC;AAuPhC;;GAEG;AACH,KAAK,UAAU,GAAG;IAChB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACzB,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC7C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK;IAChB;;;;;;;;OAQG;mCACwC,UAAU,KAAG,KAAK,CAAC,YAAY;;CA6E3E,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC7C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,qJAY3B,kBAAkB,KAAG,KAAK,CAAC,YA2D7B,CAAC"}
+{"version":3,"file":"verse.d.ts","sourceRoot":"","sources":["../../src/components/verse.tsx"],"names":[],"mappings":"AAcA,OAAO,EAGL,KAAK,UAAU,EAEhB,MAAM,wBAAwB,CAAC;AA6JhC;;GAEG;AACH,KAAK,UAAU,GAAG;IAChB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACzB,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC7C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK;IAChB;;;;;;;;OAQG;mCACwC,UAAU,KAAG,KAAK,CAAC,YAAY;;CAwE3E,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC7C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,qJAY3B,kBAAkB,KAAG,KAAK,CAAC,YA2D7B,CAAC"}

package/dist/index.cjs

@@ -35,6 +35,7 @@ __export(index_exports, {
   ApiClient: () => ApiClient,
   BOOK_CANON: () => BOOK_CANON,
   BOOK_IDS: () => BOOK_IDS,
+  BibleCard: () => BibleCard,
   BibleChapterPicker: () => BibleChapterPicker,
   BibleClient: () => BibleClient,
   BibleReader: () => BibleReader,
@@ -15139,7 +15140,17 @@ function Root5({
   const [searchQuery, setSearchQuery] = (0, import_react2.useState)("");
   const [isLanguagesOpen, setIsLanguagesOpen] = (0, import_react2.useState)(false);
   const [recentVersions, setRecentVersions] = (0, import_react2.useState)(getRecentVersions);
-  const [isPopoverOpen, setIsPopoverOpen] = (0, import_react2.useState)(false);
+  const [isPopoverOpen, setIsPopoverOpenRaw] = (0, import_react2.useState)(false);
+  const setIsPopoverOpen = (0, import_react2.useCallback)(
+    (open) => {
+      setIsPopoverOpenRaw(open);
+      if (!open) {
+        setSearchQuery("");
+        setIsLanguagesOpen(false);
+      }
+    },
+    [setSearchQuery]
+  );
   const addRecentVersion = (0, import_react2.useCallback)((version2) => {
     setRecentVersions((prev) => {
       const filtered = prev.filter((v) => v.id !== version2.id);
@@ -15569,13 +15580,24 @@ function PersonIcon(props) {
 
 // src/components/verse.tsx
 var import_platform_react_hooks3 = require("@youversion/platform-react-hooks");
-var import_isomorphic_dompurify = __toESM(require("isomorphic-dompurify"), 1);
 var import_react3 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/lib/verse-html-utils.ts
+var import_isomorphic_dompurify = __toESM(require("isomorphic-dompurify"), 1);
 var NON_BREAKING_SPACE = "\xA0";
 var LETTERS = "abcdefghijklmnopqrstuvwxyz";
+function getFootnoteMarker(index) {
+  const base = LETTERS.length;
+  if (base === 0) return String(index + 1);
+  let value = index;
+  let marker = "";
+  do {
+    marker = LETTERS[value % base] + marker;
+    value = Math.floor(value / base) - 1;
+  } while (value >= 0);
+  return marker;
+}
 var INTER_FONT = '"Inter", sans-serif';
 var SOURCE_SERIF_FONT = '"Source Serif 4", serif';
 function wrapVerseContent(doc) {
@@ -15668,73 +15690,125 @@ function wrapVerseContent(doc) {
   const verseMarkers = Array.from(doc.querySelectorAll(".yv-v[v]"));
   verseMarkers.forEach(processVerseMarker);
 }
+var NEEDS_SPACE_BEFORE = /^[^\s.,;:!?)}\]'"»›]/;
+function buildVerseHtml(wrappers) {
+  const parts = [];
+  let noteIdx = 0;
+  for (let i = 0; i < wrappers.length; i++) {
+    if (i > 0) parts.push(" ");
+    const clone2 = wrappers[i].cloneNode(true);
+    const ownerDoc = wrappers[i].ownerDocument;
+    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);
+    });
+    parts.push(clone2.innerHTML);
+  }
+  return parts.join("");
+}
+function replaceFootnotesWithAnchors(doc, footnotes) {
+  for (const fn of footnotes) {
+    const verseNum = fn.closest(".yv-v[v]")?.getAttribute("v");
+    if (!verseNum) 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", verseNum);
+    fn.replaceWith(anchor);
+  }
+}
 function extractNotesFromWrappedHtml(doc) {
   const footnotes = Array.from(doc.querySelectorAll(".yv-n.f"));
   if (!footnotes.length) return {};
   const footnotesByVerse = /* @__PURE__ */ new Map();
-  footnotes.forEach((fn) => {
+  for (const fn of footnotes) {
     const verseNum = fn.closest(".yv-v[v]")?.getAttribute("v");
-    if (verseNum) {
-      let arr = footnotesByVerse.get(verseNum);
-      if (!arr) {
-        arr = [];
-        footnotesByVerse.set(verseNum, arr);
-      }
-      arr.push(fn);
+    if (!verseNum) continue;
+    let arr = footnotesByVerse.get(verseNum);
+    if (!arr) {
+      arr = [];
+      footnotesByVerse.set(verseNum, 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 = {};
-  const NEEDS_SPACE_BEFORE = /^[^\s.,;:!?)}\]'"»›]/;
-  footnotesByVerse.forEach((fns, verseNum) => {
-    const verseWrappers = Array.from(doc.querySelectorAll(`.yv-v[v="${verseNum}"]`));
-    let verseHtml = "";
-    let noteIdx = 0;
-    verseWrappers.forEach((wrapper, wrapperIdx) => {
-      if (wrapperIdx > 0) verseHtml += " ";
-      const walker = doc.createTreeWalker(wrapper, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
-      let lastWasFootnote = false;
-      while (walker.nextNode()) {
-        const node = walker.currentNode;
-        if (node instanceof Element) {
-          if (node.classList.contains("yv-n") && node.classList.contains("f")) {
-            verseHtml += `<sup class="yv:text-muted-foreground">${LETTERS[noteIdx++] || noteIdx}</sup>`;
-            lastWasFootnote = true;
-          }
-        } else if (node.nodeType === Node.TEXT_NODE) {
-          const parent = node.parentElement;
-          if (parent?.closest(".yv-n.f") || parent?.closest(".yv-h")) continue;
-          if (parent?.classList.contains("yv-vlbl")) continue;
-          let text = node.textContent || "";
-          if (lastWasFootnote && text && NEEDS_SPACE_BEFORE.test(text)) {
-            text = " " + text;
-          }
-          verseHtml += text;
-          lastWasFootnote = false;
-        }
-      }
-    });
+  for (const [verseNum, fns] of footnotesByVerse) {
     notes[verseNum] = {
-      verseHtml,
+      verseHtml: buildVerseHtml(wrappersByVerse.get(verseNum) ?? []),
       notes: fns.map((fn) => fn.innerHTML)
     };
-    const lastWrapper = verseWrappers[verseWrappers.length - 1];
-    if (lastWrapper?.parentNode) {
-      const placeholder = doc.createElement("span");
-      placeholder.setAttribute("data-verse-footnote", verseNum);
-      lastWrapper.parentNode.insertBefore(placeholder, lastWrapper.nextSibling);
+  }
+  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;
     }
   });
-  footnotes.forEach((fn) => {
-    const prev = fn.previousSibling;
-    const next = fn.nextSibling;
-    const prevNeedsSpace = prev?.nodeType === Node.TEXT_NODE && prev.textContent && !/\s$/.test(prev.textContent);
-    const nextNeedsSpace = next?.nodeType === Node.TEXT_NODE && next.textContent && NEEDS_SPACE_BEFORE.test(next.textContent);
-    if (prevNeedsSpace && nextNeedsSpace) {
-      fn.parentNode?.insertBefore(doc.createTextNode(" "), next);
+}
+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());
+          }
+        }
+      });
     }
-    fn.remove();
   });
-  return notes;
+}
+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(
+    import_isomorphic_dompurify.default.sanitize(html, DOMPURIFY_CONFIG),
+    "text/html"
+  );
+  wrapVerseContent(doc);
+  const notes = extractNotesFromWrappedHtml(doc);
+  addNbspToVerseLabels(doc);
+  fixIrregularTables(doc);
+  return { html: doc.body.innerHTML, notes };
 }
 
 // src/components/icons/footnote.tsx
@@ -15795,20 +15869,23 @@ var VerseFootnoteButton = (0, import_react3.memo)(function VerseFootnoteButton2(
               dangerouslySetInnerHTML: { __html: verseNotes.verseHtml }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ul", { className: "yv:list-none yv:p-0 yv:m-0 yv:space-y-1", children: verseNotes.notes.map((note, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-            "li",
-            {
-              className: "yv:flex yv:gap-2 yv:text-xs yv:border-b yv:border-border yv:py-2",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "", children: [
-                  LETTERS[index] || index + 1,
-                  "."
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { dangerouslySetInnerHTML: { __html: note } })
-              ]
-            },
-            LETTERS[index]
-          )) })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ul", { className: "yv:list-none yv:p-0 yv:m-0 yv:space-y-1", children: verseNotes.notes.map((note, index) => {
+            const marker = getFootnoteMarker(index);
+            return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+              "li",
+              {
+                className: "yv:flex yv:gap-2 yv:text-xs yv:border-b yv:border-border yv:py-2",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "", children: [
+                    marker,
+                    "."
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { dangerouslySetInnerHTML: { __html: note } })
+                ]
+              },
+              marker
+            );
+          }) })
         ] })
       }
     )
@@ -15825,57 +15902,39 @@ function BibleTextHtml({
   highlightedVerses = {}
 }) {
   const contentRef = (0, import_react3.useRef)(null);
-  const [placeholders, setPlaceholders] = (0, import_react3.useState)(/* @__PURE__ */ new Map());
+  const [placeholders, setPlaceholders] = (0, import_react3.useState)([]);
   const providerTheme = (0, import_platform_react_hooks3.useTheme)();
   const currentTheme = theme || providerTheme;
   (0, import_react3.useLayoutEffect)(() => {
     if (!contentRef.current) return;
     contentRef.current.innerHTML = html;
-    const map2 = /* @__PURE__ */ new Map();
-    Object.keys(notes).forEach((verseNum) => {
-      const el = contentRef.current?.querySelector(`[data-verse-footnote="${verseNum}"]`);
-      if (el) map2.set(verseNum, el);
+    const anchors = contentRef.current.querySelectorAll("[data-verse-footnote]");
+    const result = [];
+    anchors.forEach((el) => {
+      const verseNum = el.getAttribute("data-verse-footnote");
+      if (verseNum) result.push({ verseNum, el });
     });
-    setPlaceholders(map2);
-  }, [html, notes]);
+    setPlaceholders(result);
+  }, [html]);
   (0, import_react3.useLayoutEffect)(() => {
     if (!contentRef.current) return;
-    const verseElements = contentRef.current.querySelectorAll(".yv-v[v]");
-    verseElements.forEach((el) => {
+    contentRef.current.querySelectorAll(".yv-v[v]").forEach((el) => {
       const verseNum = parseInt(el.getAttribute("v") || "0", 10);
-      if (selectedVerses.includes(verseNum)) {
-        el.classList.add("yv-v-selected");
-      } else {
-        el.classList.remove("yv-v-selected");
-      }
-      if (highlightedVerses[verseNum]) {
-        el.classList.add("yv-v-highlighted");
-      } else {
-        el.classList.remove("yv-v-highlighted");
-      }
+      el.classList.toggle("yv-v-selected", selectedVerses.includes(verseNum));
+      el.classList.toggle("yv-v-highlighted", !!highlightedVerses[verseNum]);
     });
   }, [html, selectedVerses, highlightedVerses]);
-  const selectedVersesRef = (0, import_react3.useRef)(selectedVerses);
-  selectedVersesRef.current = selectedVerses;
-  (0, import_react3.useLayoutEffect)(() => {
-    const element = contentRef.current;
-    if (!element || !onVerseSelect) return;
-    const handleClick = (e) => {
-      const target = e.target;
-      const verseEl = target.closest(".yv-v[v]");
-      if (!verseEl) return;
-      const verseNum = parseInt(verseEl.getAttribute("v") || "0", 10);
-      if (verseNum === 0) return;
-      const current = selectedVersesRef.current;
-      const newSelected = current.includes(verseNum) ? current.filter((v) => v !== verseNum) : [...current, verseNum].sort((a, b) => a - b);
-      onVerseSelect(newSelected);
-    };
-    element.addEventListener("click", handleClick);
-    return () => element.removeEventListener("click", handleClick);
-  }, [onVerseSelect]);
+  const handleClick = onVerseSelect ? (e) => {
+    const verseEl = e.target.closest(".yv-v[v]");
+    if (!verseEl) return;
+    const verseNum = parseInt(verseEl.getAttribute("v") || "0", 10);
+    if (!verseNum) return;
+    const newSelected = selectedVerses.includes(verseNum) ? selectedVerses.filter((v) => v !== verseNum) : [...selectedVerses, verseNum].sort((a, b) => a - b);
+    onVerseSelect(newSelected);
+  } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref: contentRef }),
-    Array.from(placeholders.entries()).map(([verseNum, el]) => {
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref: contentRef, onClick: handleClick }),
+    placeholders.map(({ verseNum, el }, index) => {
       const verseNotes = notes[verseNum];
       if (!verseNotes) return null;
       return (0, import_react_dom.createPortal)(
@@ -15889,68 +15948,12 @@ function BibleTextHtml({
             theme: currentTheme
           }
         ),
-        el
+        el,
+        `${verseNum}-${index}`
       );
     })
   ] });
 }
-var DOMPURIFY_CONFIG = {
-  ALLOWED_ATTR: ["class", "style", "id", "v", "usfm"],
-  ALLOW_DATA_ATTR: true
-};
-function yvDomTransformer(html, extractNotes = false) {
-  if (typeof window === "undefined" || !("DOMParser" in window)) {
-    return { html, notes: {} };
-  }
-  const doc = new DOMParser().parseFromString(
-    import_isomorphic_dompurify.default.sanitize(html, DOMPURIFY_CONFIG),
-    "text/html"
-  );
-  wrapVerseContent(doc);
-  const extractedNotes = extractNotes ? extractNotesFromWrappedHtml(doc) : {};
-  const verseLabels = doc.querySelectorAll(".yv-vlbl");
-  verseLabels.forEach((label) => {
-    const text = label.textContent || "";
-    if (!text.endsWith(NON_BREAKING_SPACE)) {
-      label.textContent = text + NON_BREAKING_SPACE;
-    }
-  });
-  const tables = doc.querySelectorAll("table");
-  tables.forEach((table) => {
-    const rows = table.querySelectorAll("tr");
-    if (rows.length === 0) return;
-    let maxColumns = 0;
-    rows.forEach((row) => {
-      const cells = row.querySelectorAll("td, th");
-      let rowColumnCount = 0;
-      cells.forEach((cell) => {
-        if (cell instanceof HTMLTableCellElement) {
-          const colspan = parseInt(cell.getAttribute("colspan") || "1", 10);
-          rowColumnCount += colspan;
-        } else {
-          rowColumnCount += 1;
-        }
-      });
-      maxColumns = Math.max(maxColumns, rowColumnCount);
-    });
-    if (maxColumns > 1) {
-      rows.forEach((row) => {
-        const cells = row.querySelectorAll("td, th");
-        if (cells.length === 1) {
-          const cell = cells[0];
-          if (cell instanceof HTMLTableCellElement) {
-            const existingColspan = parseInt(cell.getAttribute("colspan") || "1", 10);
-            if (existingColspan < maxColumns) {
-              cell.setAttribute("colspan", maxColumns.toString());
-            }
-          }
-        }
-      });
-    }
-  });
-  const modifiedHtml = doc.body.innerHTML;
-  return { html: modifiedHtml, notes: extractedNotes };
-}
 var Verse = {
   /**
    * Renders a single verse with superscript number and text.
@@ -15991,12 +15994,9 @@ var Verse = {
       onVerseSelect,
       highlightedVerses
     }, ref) => {
-      const [transformedData, setTransformedData] = (0, import_react3.useState)({ html, notes: {} });
+      const transformedData = (0, import_react3.useMemo)(() => transformBibleHtml(html), [html]);
       const providerTheme = (0, import_platform_react_hooks3.useTheme)();
       const currentTheme = theme || providerTheme;
-      (0, import_react3.useEffect)(() => {
-        setTransformedData(yvDomTransformer(html, true));
-      }, [html]);
       return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "section",
         {
@@ -16260,7 +16260,7 @@ function Content5() {
 function UserMenu() {
   const { auth, signIn, signOut, userInfo } = (0, import_platform_react_hooks4.useYVAuth)();
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Popover, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PopoverTrigger, { "data-testid": "user-menu-trigger", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { size: "icon", variant: "secondary", children: auth.isAuthenticated && userInfo?.avatarUrlFormat ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PopoverTrigger, { asChild: true, "data-testid": "user-menu-trigger", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { size: "icon", variant: "secondary", children: auth.isAuthenticated && userInfo?.avatarUrlFormat ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "img",
       {
         src: userInfo.getAvatarUrl(32, 32)?.toString(),
@@ -16353,7 +16353,7 @@ function Toolbar({ border = "top" }) {
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Popover, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PopoverTrigger, { "aria-label": "Settings", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { size: "icon", variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GearIcon, { className: "yv:text-foreground" }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PopoverTrigger, { asChild: true, "aria-label": "Settings", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { size: "icon", variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GearIcon, { className: "yv:text-foreground" }) }) }),
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PopoverContent, { sideOffset: 16, heading: "Reader Settings", theme: background, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "yv:flex yv:flex-col yv:gap-4 yv:p-4", children: [
             /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "yv:grid yv:grid-cols-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -16972,11 +16972,11 @@ function VerseOfTheDay({
   );
 }
 
-// src/components/bible-widget-view.tsx
+// src/components/bible-card.tsx
 var import_platform_react_hooks7 = require("@youversion/platform-react-hooks");
 var import_react8 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-function BibleWidgetView({
+function BibleCard({
   reference,
   versionId,
   background,
@@ -17038,7 +17038,7 @@ function BibleWidgetView({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "yv:grid yv:grid-cols-[1fr_auto] yv:gap-4 yv:items-center yv:mt-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "yv:text-balance yv:text-muted-foreground yv:justify-self-start yv:font-bold yv:text-[0.5rem]", children: version2?.copyright }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "yv:text-balance yv:text-muted-foreground yv:justify-self-start yv:font-bold yv:text-[0.5rem]", children: version2?.copyright }),
           /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "yv:justify-self-end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SvgComponent, { fontSize: 12 }) })
         ] })
       ]
@@ -17046,6 +17046,9 @@ function BibleWidgetView({
   );
 }
 
+// src/components/bible-widget-view.tsx
+var BibleWidgetView = BibleCard;
+
 // src/index.ts
 var import_platform_react_hooks8 = require("@youversion/platform-react-hooks");
 injectStyles();
@@ -17054,6 +17057,7 @@ injectStyles();
   ApiClient,
   BOOK_CANON,
   BOOK_IDS,
+  BibleCard,
   BibleChapterPicker,
   BibleClient,
   BibleReader,

package/dist/index.js

@@ -14726,9 +14726,9 @@ import {
 import {
   createContext as createContext3,
   useContext as useContext3,
-  useEffect as useEffect4,
+  useEffect as useEffect3,
   useLayoutEffect as useLayoutEffect2,
-  useMemo as useMemo3,
+  useMemo as useMemo4,
   useState as useState4
 } from "react";
 
@@ -15121,7 +15121,17 @@ function Root5({
   const [searchQuery, setSearchQuery] = useState2("");
   const [isLanguagesOpen, setIsLanguagesOpen] = useState2(false);
   const [recentVersions, setRecentVersions] = useState2(getRecentVersions);
-  const [isPopoverOpen, setIsPopoverOpen] = useState2(false);
+  const [isPopoverOpen, setIsPopoverOpenRaw] = useState2(false);
+  const setIsPopoverOpen = useCallback(
+    (open) => {
+      setIsPopoverOpenRaw(open);
+      if (!open) {
+        setSearchQuery("");
+        setIsLanguagesOpen(false);
+      }
+    },
+    [setSearchQuery]
+  );
   const addRecentVersion = useCallback((version2) => {
     setRecentVersions((prev) => {
       const filtered = prev.filter((v) => v.id !== version2.id);
@@ -15551,11 +15561,10 @@ function PersonIcon(props) {
 
 // src/components/verse.tsx
 import { usePassage, useTheme as useTheme3 } from "@youversion/platform-react-hooks";
-import DOMPurify from "isomorphic-dompurify";
 import {
   forwardRef as forwardRef2,
   memo,
-  useEffect as useEffect3,
+  useMemo as useMemo3,
   useLayoutEffect,
   useRef as useRef3,
   useState as useState3
@@ -15563,8 +15572,20 @@ import {
 import { createPortal } from "react-dom";
 
 // src/lib/verse-html-utils.ts
+import DOMPurify from "isomorphic-dompurify";
 var NON_BREAKING_SPACE = "\xA0";
 var LETTERS = "abcdefghijklmnopqrstuvwxyz";
+function getFootnoteMarker(index) {
+  const base = LETTERS.length;
+  if (base === 0) return String(index + 1);
+  let value = index;
+  let marker = "";
+  do {
+    marker = LETTERS[value % base] + marker;
+    value = Math.floor(value / base) - 1;
+  } while (value >= 0);
+  return marker;
+}
 var INTER_FONT = '"Inter", sans-serif';
 var SOURCE_SERIF_FONT = '"Source Serif 4", serif';
 function wrapVerseContent(doc) {
@@ -15657,73 +15678,125 @@ function wrapVerseContent(doc) {
   const verseMarkers = Array.from(doc.querySelectorAll(".yv-v[v]"));
   verseMarkers.forEach(processVerseMarker);
 }
+var NEEDS_SPACE_BEFORE = /^[^\s.,;:!?)}\]'"»›]/;
+function buildVerseHtml(wrappers) {
+  const parts = [];
+  let noteIdx = 0;
+  for (let i = 0; i < wrappers.length; i++) {
+    if (i > 0) parts.push(" ");
+    const clone2 = wrappers[i].cloneNode(true);
+    const ownerDoc = wrappers[i].ownerDocument;
+    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);
+    });
+    parts.push(clone2.innerHTML);
+  }
+  return parts.join("");
+}
+function replaceFootnotesWithAnchors(doc, footnotes) {
+  for (const fn of footnotes) {
+    const verseNum = fn.closest(".yv-v[v]")?.getAttribute("v");
+    if (!verseNum) 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", verseNum);
+    fn.replaceWith(anchor);
+  }
+}
 function extractNotesFromWrappedHtml(doc) {
   const footnotes = Array.from(doc.querySelectorAll(".yv-n.f"));
   if (!footnotes.length) return {};
   const footnotesByVerse = /* @__PURE__ */ new Map();
-  footnotes.forEach((fn) => {
+  for (const fn of footnotes) {
     const verseNum = fn.closest(".yv-v[v]")?.getAttribute("v");
-    if (verseNum) {
-      let arr = footnotesByVerse.get(verseNum);
-      if (!arr) {
-        arr = [];
-        footnotesByVerse.set(verseNum, arr);
-      }
-      arr.push(fn);
+    if (!verseNum) continue;
+    let arr = footnotesByVerse.get(verseNum);
+    if (!arr) {
+      arr = [];
+      footnotesByVerse.set(verseNum, 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 = {};
-  const NEEDS_SPACE_BEFORE = /^[^\s.,;:!?)}\]'"»›]/;
-  footnotesByVerse.forEach((fns, verseNum) => {
-    const verseWrappers = Array.from(doc.querySelectorAll(`.yv-v[v="${verseNum}"]`));
-    let verseHtml = "";
-    let noteIdx = 0;
-    verseWrappers.forEach((wrapper, wrapperIdx) => {
-      if (wrapperIdx > 0) verseHtml += " ";
-      const walker = doc.createTreeWalker(wrapper, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
-      let lastWasFootnote = false;
-      while (walker.nextNode()) {
-        const node = walker.currentNode;
-        if (node instanceof Element) {
-          if (node.classList.contains("yv-n") && node.classList.contains("f")) {
-            verseHtml += `<sup class="yv:text-muted-foreground">${LETTERS[noteIdx++] || noteIdx}</sup>`;
-            lastWasFootnote = true;
-          }
-        } else if (node.nodeType === Node.TEXT_NODE) {
-          const parent = node.parentElement;
-          if (parent?.closest(".yv-n.f") || parent?.closest(".yv-h")) continue;
-          if (parent?.classList.contains("yv-vlbl")) continue;
-          let text = node.textContent || "";
-          if (lastWasFootnote && text && NEEDS_SPACE_BEFORE.test(text)) {
-            text = " " + text;
-          }
-          verseHtml += text;
-          lastWasFootnote = false;
-        }
-      }
-    });
+  for (const [verseNum, fns] of footnotesByVerse) {
     notes[verseNum] = {
-      verseHtml,
+      verseHtml: buildVerseHtml(wrappersByVerse.get(verseNum) ?? []),
       notes: fns.map((fn) => fn.innerHTML)
     };
-    const lastWrapper = verseWrappers[verseWrappers.length - 1];
-    if (lastWrapper?.parentNode) {
-      const placeholder = doc.createElement("span");
-      placeholder.setAttribute("data-verse-footnote", verseNum);
-      lastWrapper.parentNode.insertBefore(placeholder, lastWrapper.nextSibling);
+  }
+  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;
     }
   });
-  footnotes.forEach((fn) => {
-    const prev = fn.previousSibling;
-    const next = fn.nextSibling;
-    const prevNeedsSpace = prev?.nodeType === Node.TEXT_NODE && prev.textContent && !/\s$/.test(prev.textContent);
-    const nextNeedsSpace = next?.nodeType === Node.TEXT_NODE && next.textContent && NEEDS_SPACE_BEFORE.test(next.textContent);
-    if (prevNeedsSpace && nextNeedsSpace) {
-      fn.parentNode?.insertBefore(doc.createTextNode(" "), next);
+}
+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());
+          }
+        }
+      });
     }
-    fn.remove();
   });
-  return notes;
+}
+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);
+  const notes = extractNotesFromWrappedHtml(doc);
+  addNbspToVerseLabels(doc);
+  fixIrregularTables(doc);
+  return { html: doc.body.innerHTML, notes };
 }
 
 // src/components/icons/footnote.tsx
@@ -15784,20 +15857,23 @@ var VerseFootnoteButton = memo(function VerseFootnoteButton2({
               dangerouslySetInnerHTML: { __html: verseNotes.verseHtml }
             }
           ),
-          /* @__PURE__ */ jsx20("ul", { className: "yv:list-none yv:p-0 yv:m-0 yv:space-y-1", children: verseNotes.notes.map((note, index) => /* @__PURE__ */ jsxs6(
-            "li",
-            {
-              className: "yv:flex yv:gap-2 yv:text-xs yv:border-b yv:border-border yv:py-2",
-              children: [
-                /* @__PURE__ */ jsxs6("span", { className: "", children: [
-                  LETTERS[index] || index + 1,
-                  "."
-                ] }),
-                /* @__PURE__ */ jsx20("span", { dangerouslySetInnerHTML: { __html: note } })
-              ]
-            },
-            LETTERS[index]
-          )) })
+          /* @__PURE__ */ jsx20("ul", { className: "yv:list-none yv:p-0 yv:m-0 yv:space-y-1", children: verseNotes.notes.map((note, index) => {
+            const marker = getFootnoteMarker(index);
+            return /* @__PURE__ */ jsxs6(
+              "li",
+              {
+                className: "yv:flex yv:gap-2 yv:text-xs yv:border-b yv:border-border yv:py-2",
+                children: [
+                  /* @__PURE__ */ jsxs6("span", { className: "", children: [
+                    marker,
+                    "."
+                  ] }),
+                  /* @__PURE__ */ jsx20("span", { dangerouslySetInnerHTML: { __html: note } })
+                ]
+              },
+              marker
+            );
+          }) })
         ] })
       }
     )
@@ -15814,57 +15890,39 @@ function BibleTextHtml({
   highlightedVerses = {}
 }) {
   const contentRef = useRef3(null);
-  const [placeholders, setPlaceholders] = useState3(/* @__PURE__ */ new Map());
+  const [placeholders, setPlaceholders] = useState3([]);
   const providerTheme = useTheme3();
   const currentTheme = theme || providerTheme;
   useLayoutEffect(() => {
     if (!contentRef.current) return;
     contentRef.current.innerHTML = html;
-    const map2 = /* @__PURE__ */ new Map();
-    Object.keys(notes).forEach((verseNum) => {
-      const el = contentRef.current?.querySelector(`[data-verse-footnote="${verseNum}"]`);
-      if (el) map2.set(verseNum, el);
+    const anchors = contentRef.current.querySelectorAll("[data-verse-footnote]");
+    const result = [];
+    anchors.forEach((el) => {
+      const verseNum = el.getAttribute("data-verse-footnote");
+      if (verseNum) result.push({ verseNum, el });
     });
-    setPlaceholders(map2);
-  }, [html, notes]);
+    setPlaceholders(result);
+  }, [html]);
   useLayoutEffect(() => {
     if (!contentRef.current) return;
-    const verseElements = contentRef.current.querySelectorAll(".yv-v[v]");
-    verseElements.forEach((el) => {
+    contentRef.current.querySelectorAll(".yv-v[v]").forEach((el) => {
       const verseNum = parseInt(el.getAttribute("v") || "0", 10);
-      if (selectedVerses.includes(verseNum)) {
-        el.classList.add("yv-v-selected");
-      } else {
-        el.classList.remove("yv-v-selected");
-      }
-      if (highlightedVerses[verseNum]) {
-        el.classList.add("yv-v-highlighted");
-      } else {
-        el.classList.remove("yv-v-highlighted");
-      }
+      el.classList.toggle("yv-v-selected", selectedVerses.includes(verseNum));
+      el.classList.toggle("yv-v-highlighted", !!highlightedVerses[verseNum]);
     });
   }, [html, selectedVerses, highlightedVerses]);
-  const selectedVersesRef = useRef3(selectedVerses);
-  selectedVersesRef.current = selectedVerses;
-  useLayoutEffect(() => {
-    const element = contentRef.current;
-    if (!element || !onVerseSelect) return;
-    const handleClick = (e) => {
-      const target = e.target;
-      const verseEl = target.closest(".yv-v[v]");
-      if (!verseEl) return;
-      const verseNum = parseInt(verseEl.getAttribute("v") || "0", 10);
-      if (verseNum === 0) return;
-      const current = selectedVersesRef.current;
-      const newSelected = current.includes(verseNum) ? current.filter((v) => v !== verseNum) : [...current, verseNum].sort((a, b) => a - b);
-      onVerseSelect(newSelected);
-    };
-    element.addEventListener("click", handleClick);
-    return () => element.removeEventListener("click", handleClick);
-  }, [onVerseSelect]);
+  const handleClick = onVerseSelect ? (e) => {
+    const verseEl = e.target.closest(".yv-v[v]");
+    if (!verseEl) return;
+    const verseNum = parseInt(verseEl.getAttribute("v") || "0", 10);
+    if (!verseNum) return;
+    const newSelected = selectedVerses.includes(verseNum) ? selectedVerses.filter((v) => v !== verseNum) : [...selectedVerses, verseNum].sort((a, b) => a - b);
+    onVerseSelect(newSelected);
+  } : void 0;
   return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx20("div", { ref: contentRef }),
-    Array.from(placeholders.entries()).map(([verseNum, el]) => {
+    /* @__PURE__ */ jsx20("div", { ref: contentRef, onClick: handleClick }),
+    placeholders.map(({ verseNum, el }, index) => {
       const verseNotes = notes[verseNum];
       if (!verseNotes) return null;
       return createPortal(
@@ -15878,68 +15936,12 @@ function BibleTextHtml({
             theme: currentTheme
           }
         ),
-        el
+        el,
+        `${verseNum}-${index}`
       );
     })
   ] });
 }
-var DOMPURIFY_CONFIG = {
-  ALLOWED_ATTR: ["class", "style", "id", "v", "usfm"],
-  ALLOW_DATA_ATTR: true
-};
-function yvDomTransformer(html, extractNotes = false) {
-  if (typeof window === "undefined" || !("DOMParser" in window)) {
-    return { html, notes: {} };
-  }
-  const doc = new DOMParser().parseFromString(
-    DOMPurify.sanitize(html, DOMPURIFY_CONFIG),
-    "text/html"
-  );
-  wrapVerseContent(doc);
-  const extractedNotes = extractNotes ? extractNotesFromWrappedHtml(doc) : {};
-  const verseLabels = doc.querySelectorAll(".yv-vlbl");
-  verseLabels.forEach((label) => {
-    const text = label.textContent || "";
-    if (!text.endsWith(NON_BREAKING_SPACE)) {
-      label.textContent = text + NON_BREAKING_SPACE;
-    }
-  });
-  const tables = doc.querySelectorAll("table");
-  tables.forEach((table) => {
-    const rows = table.querySelectorAll("tr");
-    if (rows.length === 0) return;
-    let maxColumns = 0;
-    rows.forEach((row) => {
-      const cells = row.querySelectorAll("td, th");
-      let rowColumnCount = 0;
-      cells.forEach((cell) => {
-        if (cell instanceof HTMLTableCellElement) {
-          const colspan = parseInt(cell.getAttribute("colspan") || "1", 10);
-          rowColumnCount += colspan;
-        } else {
-          rowColumnCount += 1;
-        }
-      });
-      maxColumns = Math.max(maxColumns, rowColumnCount);
-    });
-    if (maxColumns > 1) {
-      rows.forEach((row) => {
-        const cells = row.querySelectorAll("td, th");
-        if (cells.length === 1) {
-          const cell = cells[0];
-          if (cell instanceof HTMLTableCellElement) {
-            const existingColspan = parseInt(cell.getAttribute("colspan") || "1", 10);
-            if (existingColspan < maxColumns) {
-              cell.setAttribute("colspan", maxColumns.toString());
-            }
-          }
-        }
-      });
-    }
-  });
-  const modifiedHtml = doc.body.innerHTML;
-  return { html: modifiedHtml, notes: extractedNotes };
-}
 var Verse = {
   /**
    * Renders a single verse with superscript number and text.
@@ -15980,12 +15982,9 @@ var Verse = {
       onVerseSelect,
       highlightedVerses
     }, ref) => {
-      const [transformedData, setTransformedData] = useState3({ html, notes: {} });
+      const transformedData = useMemo3(() => transformBibleHtml(html), [html]);
       const providerTheme = useTheme3();
       const currentTheme = theme || providerTheme;
-      useEffect3(() => {
-        setTransformedData(yvDomTransformer(html, true));
-      }, [html]);
       return /* @__PURE__ */ jsx20(
         "section",
         {
@@ -16145,10 +16144,10 @@ function Root6({
       setCurrentFontFamily(savedFontFamily);
     }
   }, []);
-  useEffect4(() => {
+  useEffect3(() => {
     localStorage.setItem("youversion-platform:reader:font-size", currentFontSize.toString());
   }, [currentFontSize]);
-  useEffect4(() => {
+  useEffect3(() => {
     localStorage.setItem("youversion-platform:reader:font-family", currentFontFamily);
   }, [currentFontFamily]);
   const providerTheme = useTheme4();
@@ -16191,7 +16190,7 @@ function Content5() {
   } = useBibleReaderContext();
   const { books } = useBooks2(versionId);
   const { version: version2 } = useVersion2(versionId);
-  const bookData = useMemo3(() => {
+  const bookData = useMemo4(() => {
     return books?.data?.find((b) => b.id === book);
   }, [books?.data, book]);
   const usfmReference = `${book}.${chapter}`;
@@ -16249,7 +16248,7 @@ function Content5() {
 function UserMenu() {
   const { auth, signIn, signOut, userInfo } = useYVAuth();
   return /* @__PURE__ */ jsxs7(Popover, { children: [
-    /* @__PURE__ */ jsx21(PopoverTrigger, { "data-testid": "user-menu-trigger", children: /* @__PURE__ */ jsx21(Button, { size: "icon", variant: "secondary", children: auth.isAuthenticated && userInfo?.avatarUrlFormat ? /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx21(PopoverTrigger, { asChild: true, "data-testid": "user-menu-trigger", children: /* @__PURE__ */ jsx21(Button, { size: "icon", variant: "secondary", children: auth.isAuthenticated && userInfo?.avatarUrlFormat ? /* @__PURE__ */ jsx21(
       "img",
       {
         src: userInfo.getAvatarUrl(32, 32)?.toString(),
@@ -16342,7 +16341,7 @@ function Toolbar({ border = "top" }) {
           )
         ] }),
         /* @__PURE__ */ jsxs7(Popover, { children: [
-          /* @__PURE__ */ jsx21(PopoverTrigger, { "aria-label": "Settings", children: /* @__PURE__ */ jsx21(Button, { size: "icon", variant: "secondary", children: /* @__PURE__ */ jsx21(GearIcon, { className: "yv:text-foreground" }) }) }),
+          /* @__PURE__ */ jsx21(PopoverTrigger, { asChild: true, "aria-label": "Settings", children: /* @__PURE__ */ jsx21(Button, { size: "icon", variant: "secondary", children: /* @__PURE__ */ jsx21(GearIcon, { className: "yv:text-foreground" }) }) }),
           /* @__PURE__ */ jsx21(PopoverContent, { sideOffset: 16, heading: "Reader Settings", theme: background, children: /* @__PURE__ */ jsxs7("div", { className: "yv:flex yv:flex-col yv:gap-4 yv:p-4", children: [
             /* @__PURE__ */ jsxs7("div", { className: "yv:grid yv:grid-cols-2", children: [
               /* @__PURE__ */ jsx21(
@@ -16433,7 +16432,7 @@ function Toolbar({ border = "top" }) {
 var BibleReader = Object.assign({}, { Root: Root6, Content: Content5, Toolbar });
 
 // src/components/YouVersionAuthButton.tsx
-import React10, { useMemo as useMemo4 } from "react";
+import React10, { useMemo as useMemo5 } from "react";
 
 // src/components/icons/loader.tsx
 import { jsx as jsx22 } from "react/jsx-runtime";
@@ -16595,7 +16594,7 @@ var YouVersionAuthButton = React10.forwardRef(
       }
     };
     const buttonLoading = auth.isLoading;
-    const buttonText = useMemo4(() => {
+    const buttonText = useMemo5(() => {
       if (text) return text;
       const isSignOut = mode === "signOut" || mode === "auto" && auth.isAuthenticated;
       if (size === "short") {
@@ -16967,11 +16966,11 @@ function VerseOfTheDay({
   );
 }
 
-// src/components/bible-widget-view.tsx
+// src/components/bible-card.tsx
 import { usePassage as usePassage3, useVersion as useVersion4, useTheme as useTheme7 } from "@youversion/platform-react-hooks";
 import { useState as useState5 } from "react";
 import { jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
-function BibleWidgetView({
+function BibleCard({
   reference,
   versionId,
   background,
@@ -17033,7 +17032,7 @@ function BibleWidgetView({
           }
         ),
         /* @__PURE__ */ jsxs14("div", { className: "yv:grid yv:grid-cols-[1fr_auto] yv:gap-4 yv:items-center yv:mt-4", children: [
-          /* @__PURE__ */ jsx29("div", { className: "yv:text-balance yv:text-muted-foreground yv:justify-self-start yv:font-bold yv:text-[0.5rem]", children: version2?.copyright }),
+          /* @__PURE__ */ jsx29("p", { className: "yv:text-balance yv:text-muted-foreground yv:justify-self-start yv:font-bold yv:text-[0.5rem]", children: version2?.copyright }),
           /* @__PURE__ */ jsx29("div", { className: "yv:justify-self-end", children: /* @__PURE__ */ jsx29(SvgComponent, { fontSize: 12 }) })
         ] })
       ]
@@ -17041,6 +17040,9 @@ function BibleWidgetView({
   );
 }
 
+// src/components/bible-widget-view.tsx
+var BibleWidgetView = BibleCard;
+
 // src/index.ts
 import {
   YouVersionProvider,
@@ -17051,6 +17053,7 @@ export {
   ApiClient,
   BOOK_CANON,
   BOOK_IDS,
+  BibleCard,
   BibleChapterPicker,
   BibleClient,
   BibleReader,

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

@@ -1,5 +1,13 @@
-export declare const NON_BREAKING_SPACE = "\u00A0";
-export declare const LETTERS = "abcdefghijklmnopqrstuvwxyz";
+/**
+ * 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[];
@@ -8,24 +16,16 @@ 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 & {});
 /**
- * Wraps verse content in `yv-v` elements for easier CSS targeting.
- *
- * Transforms empty verse markers into wrapping containers. When a verse spans
- * multiple paragraphs, creates duplicate wrappers in each paragraph (Bible.com pattern).
- *
- * Before: <span class="yv-v" v="1"></span><span class="yv-vlbl">1</span>Text...
- * After:  <span class="yv-v" v="1"><span class="yv-vlbl">1</span>Text...</span>
+ * Full transformation pipeline for Bible HTML from the API.
  *
- * This enables simple CSS selectors like `.yv-v[v="1"] { background: yellow; }`
+ * 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 wrapVerseContent(doc: Document): void;
-/**
- * Extracts footnotes from wrapped verse HTML and prepares data for footnote popovers.
- *
- * This function assumes verses are already wrapped in `.yv-v[v]` elements (by wrapVerseContent).
- * It uses `.closest('.yv-v[v]')` to find which verse each footnote belongs to.
- *
- * @returns Notes data for popovers, keyed by verse number
- */
-export declare function extractNotesFromWrappedHtml(doc: Document): Record<string, VerseNotes>;
+export declare function transformBibleHtml(html: string): {
+    html: string;
+    notes: Record<string, VerseNotes>;
+};
 //# sourceMappingURL=verse-html-utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"verse-html-utils.d.ts","sourceRoot":"","sources":["../../src/lib/verse-html-utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,WAAW,CAAC;AAE3C,eAAO,MAAM,OAAO,+BAA+B,CAAC;AAEpD,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAG,uBAA8B,CAAC;AACzD,eAAO,MAAM,iBAAiB,EAAG,2BAAkC,CAAC;AACpE,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,GAAG,OAAO,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEtF;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CA0IpD;AAGD;;;;;;;GAOG;AACH,wBAAgB,2BAA2B,CAAC,GAAG,EAAE,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAkGrF"}
+{"version":3,"file":"verse-html-utils.d.ts","sourceRoot":"","sources":["../../src/lib/verse-html-utils.ts"],"names":[],"mappings":"AAMA;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAavD;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAG,uBAA8B,CAAC;AACzD,eAAO,MAAM,iBAAiB,EAAG,2BAAkC,CAAC;AACpE,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,GAAG,OAAO,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AA0UtF;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;CAAE,CAgBpG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youversion/platform-react-ui",
-  "version": "1.14.3",
+  "version": "1.15.0",
   "description": "React SDK for YouVersion Platform",
   "license": "TBD",
   "type": "module",
@@ -38,8 +38,8 @@
     "isomorphic-dompurify": "2.23.0",
     "tailwind-merge": "3.3.1",
     "tw-animate-css": "1.4.0",
-    "@youversion/platform-core": "1.14.3",
-    "@youversion/platform-react-hooks": "1.14.3"
+    "@youversion/platform-core": "1.15.0",
+    "@youversion/platform-react-hooks": "1.15.0"
   },
   "peerDependencies": {
     "react": ">=19.1.0 <20.0.0",