@youversion/platform-react-ui 1.17.0 → 1.18.0

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

@@ -1 +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"}
+{"version":3,"file":"bible-card.d.ts","sourceRoot":"","sources":["../../src/components/bible-card.tsx"],"names":[],"mappings":"AAWA,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;AAwEF,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,SAAS,EACT,UAAU,EACV,iBAAyB,GAC1B,EAAE,cAAc,GAAG,KAAK,CAAC,SAAS,CAuDlC"}

package/dist/components/verse.d.ts

@@ -1,4 +1,11 @@
+import { usePassage } from '@youversion/platform-react-hooks';
 import { type FontFamily } from '@/lib/verse-html-utils';
+type PassageResult = ReturnType<typeof usePassage>;
+export type BibleTextViewPassageState = {
+    passage: PassageResult['passage'];
+    loading: PassageResult['loading'];
+    error: PassageResult['error'];
+};
 /**
  * Represents a single verse with its number, text, and optional size.
  */
@@ -57,10 +64,11 @@ export type BibleTextViewProps = {
     selectedVerses?: number[];
     onVerseSelect?: (verses: number[]) => void;
     highlightedVerses?: Record<number, boolean>;
+    passageState?: Partial<BibleTextViewPassageState>;
 };
 /**
  * A component that renders style Bible text.
  */
-export declare const BibleTextView: ({ reference, fontFamily, fontSize, lineHeight, versionId, showVerseNumbers, renderNotes, theme, selectedVerses, onVerseSelect, highlightedVerses, }: BibleTextViewProps) => React.ReactElement;
+export declare const BibleTextView: ({ reference, fontFamily, fontSize, lineHeight, versionId, showVerseNumbers, renderNotes, theme, selectedVerses, onVerseSelect, highlightedVerses, passageState, }: BibleTextViewProps) => React.ReactElement;
 export {};
 //# sourceMappingURL=verse.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"verse.d.ts","sourceRoot":"","sources":["../../src/components/verse.tsx"],"names":[],"mappings":"AAcA,OAAO,EAGL,KAAK,UAAU,EAEhB,MAAM,wBAAwB,CAAC;AAmLhC;;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,YAmD7B,CAAC"}
+{"version":3,"file":"verse.d.ts","sourceRoot":"","sources":["../../src/components/verse.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAY,MAAM,kCAAkC,CAAC;AAYxE,OAAO,EAGL,KAAK,UAAU,EAEhB,MAAM,wBAAwB,CAAC;AAchC,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAEnD,MAAM,MAAM,yBAAyB,GAAG;IACtC,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CAC/B,CAAC;AA4KF;;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;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;CACnD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,mKAa3B,kBAAkB,KAAG,KAAK,CAAC,YAmE7B,CAAC"}

package/dist/index.cjs

@@ -15819,10 +15819,17 @@ function buildVerseHtml(wrappers) {
   }
   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++}`);
+  });
+}
 function replaceFootnotesWithAnchors(doc, footnotes) {
   for (const fn of footnotes) {
-    const verseNum = fn.closest(".yv-v[v]")?.getAttribute("v");
-    if (!verseNum) continue;
+    const key = fn.getAttribute(FOOTNOTE_KEY_ATTR);
     const prev = fn.previousSibling;
     const next = fn.nextSibling;
     const prevText = prev?.textContent ?? "";
@@ -15833,21 +15840,20 @@ function replaceFootnotesWithAnchors(doc, footnotes) {
       fn.parentNode.insertBefore(doc.createTextNode(" "), fn);
     }
     const anchor = doc.createElement("span");
-    anchor.setAttribute("data-verse-footnote", verseNum);
+    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 footnotesByVerse = /* @__PURE__ */ new Map();
+  const footnotesByKey = /* @__PURE__ */ new Map();
   for (const fn of footnotes) {
-    const verseNum = fn.closest(".yv-v[v]")?.getAttribute("v");
-    if (!verseNum) continue;
-    let arr = footnotesByVerse.get(verseNum);
+    const key = fn.getAttribute(FOOTNOTE_KEY_ATTR);
+    let arr = footnotesByKey.get(key);
     if (!arr) {
       arr = [];
-      footnotesByVerse.set(verseNum, arr);
+      footnotesByKey.set(key, arr);
     }
     arr.push(fn);
   }
@@ -15860,10 +15866,12 @@ function extractNotesFromWrappedHtml(doc) {
     else wrappersByVerse.set(verseNum, [el]);
   });
   const notes = {};
-  for (const [verseNum, fns] of footnotesByVerse) {
-    notes[verseNum] = {
-      verseHtml: buildVerseHtml(wrappersByVerse.get(verseNum) ?? []),
-      notes: fns.map((fn) => fn.innerHTML)
+  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);
@@ -15915,6 +15923,7 @@ function transformBibleHtml(html) {
     "text/html"
   );
   wrapVerseContent(doc);
+  assignFootnoteKeys(doc);
   const notes = extractNotesFromWrappedHtml(doc);
   addNbspToVerseLabels(doc);
   fixIrregularTables(doc);
@@ -15975,6 +15984,7 @@ var VerseFootnoteButton = (0, import_react3.memo)(function VerseFootnoteButton2(
   fontSize,
   theme
 }) {
+  const { hasVerseContext } = verseNotes;
   const verseReference = reference ? `${reference}:${verseNum}` : `Verse ${verseNum}`;
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Popover, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PopoverTrigger, { "data-yv-sdk": true, "data-yv-theme": theme, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -15992,15 +16002,17 @@ var VerseFootnoteButton = (0, import_react3.memo)(function VerseFootnoteButton2(
         heading: "Footnotes",
         theme,
         children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "yv:p-3 yv:overflow-y-auto yv:max-h-[33svh]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "yv:font-bold yv:mb-2", children: verseReference }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-            "div",
-            {
-              className: "yv:mb-3 yv:font-serif yv:*:font-serif",
-              style: { fontSize: fontSize ? `${fontSize}px` : "1.25rem" },
-              dangerouslySetInnerHTML: { __html: verseNotes.verseHtml }
-            }
-          ),
+          hasVerseContext && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "yv:font-bold yv:mb-2", children: verseReference }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "div",
+              {
+                className: "yv:mb-3 yv:font-serif yv:*:font-serif",
+                style: { fontSize: fontSize ? `${fontSize}px` : "1.25rem" },
+                dangerouslySetInnerHTML: { __html: verseNotes.verseHtml }
+              }
+            )
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime22.jsxs)(
@@ -16186,17 +16198,29 @@ var BibleTextView = ({
   theme,
   selectedVerses,
   onVerseSelect,
-  highlightedVerses
+  highlightedVerses,
+  passageState
 }) => {
-  const { passage, loading, error: error46 } = (0, import_platform_react_hooks3.usePassage)({
+  const providerTheme = (0, import_platform_react_hooks3.useTheme)();
+  const currentTheme = theme || providerTheme;
+  const hasProvidedPassageState = passageState !== void 0;
+  const {
+    passage: fetchedPassage,
+    loading: fetchedLoading,
+    error: fetchedError
+  } = (0, import_platform_react_hooks3.usePassage)({
     versionId,
     usfm: reference,
     include_headings: true,
-    include_notes: true
+    include_notes: true,
+    options: {
+      enabled: !hasProvidedPassageState
+    }
   });
-  const providerTheme = (0, import_platform_react_hooks3.useTheme)();
-  const currentTheme = theme || providerTheme;
-  if (loading) {
+  const currentPassage = hasProvidedPassageState ? passageState?.passage : fetchedPassage;
+  const currentLoading = hasProvidedPassageState ? passageState?.loading ?? false : fetchedLoading;
+  const currentError = hasProvidedPassageState ? passageState?.error ?? null : fetchedError;
+  if (currentLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { "data-yv-sdk": true, "data-yv-theme": currentTheme, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       Verse.Html,
       {
@@ -16210,19 +16234,19 @@ var BibleTextView = ({
       }
     ) });
   }
-  if (error46) {
+  if (currentError) {
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { "data-yv-sdk": true, "data-yv-theme": currentTheme, className: "yv:mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(VerseUnavailableMessage, {}) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { "data-yv-sdk": true, "data-yv-theme": currentTheme, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     Verse.Html,
     {
-      html: passage?.content || "",
+      html: currentPassage?.content || "",
       fontFamily,
       fontSize,
       lineHeight,
       showVerseNumbers,
       renderNotes,
-      reference: passage?.reference,
+      reference: currentPassage?.reference,
       theme: currentTheme,
       selectedVerses,
       onVerseSelect,
@@ -17201,6 +17225,52 @@ function VerseOfTheDay({
 var import_platform_react_hooks7 = require("@youversion/platform-react-hooks");
 var import_react8 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
+function BibleCardHeaderError() {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "yv:flex yv:flex-col yv:gap-2", role: "alert", "aria-live": "polite", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h2", { className: "yv:font-bold yv:tracking-widest yv:text-xs yv:uppercase yv:text-foreground", children: "Error" }) });
+}
+function BibleCardHeaderReference({
+  passage,
+  version: version2
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("h2", { className: "yv:font-bold yv:tracking-widest yv:text-xs yv:uppercase yv:text-foreground", children: [
+    passage.reference,
+    " ",
+    version2?.localized_abbreviation
+  ] });
+}
+function BibleCardVersionPicker({
+  versionId,
+  onVersionChange,
+  theme
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    BibleVersionPicker.Root,
+    {
+      onVersionChange,
+      versionId,
+      background: theme,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BibleVersionPicker.Trigger, { "aria-label": "Change Bible version", children: ({ version: version2, loading }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          Button,
+          {
+            variant: "secondary",
+            className: "yv:font-bold yv:text-xs",
+            disabled: loading,
+            "data-yv-theme": theme,
+            children: loading ? "Loading..." : version2?.localized_abbreviation || "Select version"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BibleVersionPicker.Content, {})
+      ]
+    }
+  );
+}
+function BibleCardFooter({ copyright }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "yv:grid yv:grid-cols-[1fr_auto] yv:gap-4 yv:items-center yv:mt-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "yv:text-balance yv:text-muted-foreground yv:justify-self-start yv:font-bold yv:text-[0.5rem]", children: copyright || "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "yv:justify-self-end", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SvgComponent, { fontSize: 12 }) })
+  ] });
+}
 function BibleCard({
   reference,
   versionId,
@@ -17209,7 +17279,11 @@ function BibleCard({
 }) {
   const [versionNum, setVersionNum] = (0, import_react8.useState)(versionId);
   const { version: version2 } = (0, import_platform_react_hooks7.useVersion)(versionNum);
-  const { passage } = (0, import_platform_react_hooks7.usePassage)({
+  const {
+    passage,
+    loading: passageLoading,
+    error: passageError
+  } = (0, import_platform_react_hooks7.usePassage)({
     versionId: versionNum,
     usfm: reference,
     include_headings: true,
@@ -17225,30 +17299,14 @@ function BibleCard({
       className: "yv:flex yv:flex-col yv:bg-card yv:p-6 yv:max-w-md yv:rounded-2xl",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "yv:flex yv:justify-between yv:items-center", children: [
-          passage?.reference ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("h2", { className: "yv:font-bold yv:tracking-widest yv:text-xs yv:uppercase yv:text-foreground", children: [
-            passage.reference,
-            " ",
-            version2?.localized_abbreviation
-          ] }) : null,
-          showVersionPicker ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-            BibleVersionPicker.Root,
+          passageError ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BibleCardHeaderError, {}) : null,
+          !passageError && passage ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BibleCardHeaderReference, { passage, version: version2 }) : null,
+          showVersionPicker && !passageError ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            BibleCardVersionPicker,
             {
-              onVersionChange: setVersionNum,
               versionId: versionNum,
-              background: theme,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BibleVersionPicker.Trigger, { "aria-label": "Change Bible version", children: ({ version: version3, loading }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-                  Button,
-                  {
-                    variant: "secondary",
-                    className: "yv:font-bold yv:text-xs",
-                    disabled: loading,
-                    "data-yv-theme": theme,
-                    children: loading ? "Loading..." : version3?.localized_abbreviation || "Select version"
-                  }
-                ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BibleVersionPicker.Content, {})
-              ]
+              onVersionChange: setVersionNum,
+              theme
             }
           ) : null
         ] }),
@@ -17259,13 +17317,15 @@ function BibleCard({
             fontSize: 16,
             fontFamily: SOURCE_SERIF_FONT,
             reference,
-            versionId: versionNum
+            versionId: versionNum,
+            passageState: {
+              passage,
+              loading: passageLoading,
+              error: passageError
+            }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "yv:grid yv:grid-cols-[1fr_auto] yv:gap-4 yv:items-center yv:mt-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32.jsx)("div", { className: "yv:justify-self-end", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SvgComponent, { fontSize: 12 }) })
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BibleCardFooter, { copyright: !passageError ? version2?.copyright : null })
       ]
     }
   );

package/dist/index.js

@@ -15806,10 +15806,17 @@ function buildVerseHtml(wrappers) {
   }
   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++}`);
+  });
+}
 function replaceFootnotesWithAnchors(doc, footnotes) {
   for (const fn of footnotes) {
-    const verseNum = fn.closest(".yv-v[v]")?.getAttribute("v");
-    if (!verseNum) continue;
+    const key = fn.getAttribute(FOOTNOTE_KEY_ATTR);
     const prev = fn.previousSibling;
     const next = fn.nextSibling;
     const prevText = prev?.textContent ?? "";
@@ -15820,21 +15827,20 @@ function replaceFootnotesWithAnchors(doc, footnotes) {
       fn.parentNode.insertBefore(doc.createTextNode(" "), fn);
     }
     const anchor = doc.createElement("span");
-    anchor.setAttribute("data-verse-footnote", verseNum);
+    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 footnotesByVerse = /* @__PURE__ */ new Map();
+  const footnotesByKey = /* @__PURE__ */ new Map();
   for (const fn of footnotes) {
-    const verseNum = fn.closest(".yv-v[v]")?.getAttribute("v");
-    if (!verseNum) continue;
-    let arr = footnotesByVerse.get(verseNum);
+    const key = fn.getAttribute(FOOTNOTE_KEY_ATTR);
+    let arr = footnotesByKey.get(key);
     if (!arr) {
       arr = [];
-      footnotesByVerse.set(verseNum, arr);
+      footnotesByKey.set(key, arr);
     }
     arr.push(fn);
   }
@@ -15847,10 +15853,12 @@ function extractNotesFromWrappedHtml(doc) {
     else wrappersByVerse.set(verseNum, [el]);
   });
   const notes = {};
-  for (const [verseNum, fns] of footnotesByVerse) {
-    notes[verseNum] = {
-      verseHtml: buildVerseHtml(wrappersByVerse.get(verseNum) ?? []),
-      notes: fns.map((fn) => fn.innerHTML)
+  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);
@@ -15902,6 +15910,7 @@ function transformBibleHtml(html) {
     "text/html"
   );
   wrapVerseContent(doc);
+  assignFootnoteKeys(doc);
   const notes = extractNotesFromWrappedHtml(doc);
   addNbspToVerseLabels(doc);
   fixIrregularTables(doc);
@@ -15962,6 +15971,7 @@ var VerseFootnoteButton = memo(function VerseFootnoteButton2({
   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(
@@ -15979,15 +15989,17 @@ var VerseFootnoteButton = memo(function VerseFootnoteButton2({
         heading: "Footnotes",
         theme,
         children: /* @__PURE__ */ jsxs7("div", { className: "yv:p-3 yv:overflow-y-auto yv:max-h-[33svh]", children: [
-          /* @__PURE__ */ jsx22("div", { className: "yv:font-bold yv:mb-2", children: verseReference }),
-          /* @__PURE__ */ jsx22(
-            "div",
-            {
-              className: "yv:mb-3 yv:font-serif yv:*:font-serif",
-              style: { fontSize: fontSize ? `${fontSize}px` : "1.25rem" },
-              dangerouslySetInnerHTML: { __html: verseNotes.verseHtml }
-            }
-          ),
+          hasVerseContext && /* @__PURE__ */ jsxs7(Fragment2, { children: [
+            /* @__PURE__ */ jsx22("div", { className: "yv:font-bold yv:mb-2", children: verseReference }),
+            /* @__PURE__ */ jsx22(
+              "div",
+              {
+                className: "yv:mb-3 yv:font-serif yv:*:font-serif",
+                style: { fontSize: fontSize ? `${fontSize}px` : "1.25rem" },
+                dangerouslySetInnerHTML: { __html: verseNotes.verseHtml }
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx22("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__ */ jsxs7(
@@ -16173,17 +16185,29 @@ var BibleTextView = ({
   theme,
   selectedVerses,
   onVerseSelect,
-  highlightedVerses
+  highlightedVerses,
+  passageState
 }) => {
-  const { passage, loading, error: error46 } = usePassage({
+  const providerTheme = useTheme3();
+  const currentTheme = theme || providerTheme;
+  const hasProvidedPassageState = passageState !== void 0;
+  const {
+    passage: fetchedPassage,
+    loading: fetchedLoading,
+    error: fetchedError
+  } = usePassage({
     versionId,
     usfm: reference,
     include_headings: true,
-    include_notes: true
+    include_notes: true,
+    options: {
+      enabled: !hasProvidedPassageState
+    }
   });
-  const providerTheme = useTheme3();
-  const currentTheme = theme || providerTheme;
-  if (loading) {
+  const currentPassage = hasProvidedPassageState ? passageState?.passage : fetchedPassage;
+  const currentLoading = hasProvidedPassageState ? passageState?.loading ?? false : fetchedLoading;
+  const currentError = hasProvidedPassageState ? passageState?.error ?? null : fetchedError;
+  if (currentLoading) {
     return /* @__PURE__ */ jsx22("div", { "data-yv-sdk": true, "data-yv-theme": currentTheme, children: /* @__PURE__ */ jsx22(
       Verse.Html,
       {
@@ -16197,19 +16221,19 @@ var BibleTextView = ({
       }
     ) });
   }
-  if (error46) {
+  if (currentError) {
     return /* @__PURE__ */ jsx22("div", { "data-yv-sdk": true, "data-yv-theme": currentTheme, className: "yv:mt-4", children: /* @__PURE__ */ jsx22(VerseUnavailableMessage, {}) });
   }
   return /* @__PURE__ */ jsx22("div", { "data-yv-sdk": true, "data-yv-theme": currentTheme, children: /* @__PURE__ */ jsx22(
     Verse.Html,
     {
-      html: passage?.content || "",
+      html: currentPassage?.content || "",
       fontFamily,
       fontSize,
       lineHeight,
       showVerseNumbers,
       renderNotes,
-      reference: passage?.reference,
+      reference: currentPassage?.reference,
       theme: currentTheme,
       selectedVerses,
       onVerseSelect,
@@ -17194,6 +17218,52 @@ function VerseOfTheDay({
 import { usePassage as usePassage3, useVersion as useVersion4, useTheme as useTheme7 } from "@youversion/platform-react-hooks";
 import { useState as useState5 } from "react";
 import { jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
+function BibleCardHeaderError() {
+  return /* @__PURE__ */ jsx32("div", { className: "yv:flex yv:flex-col yv:gap-2", role: "alert", "aria-live": "polite", children: /* @__PURE__ */ jsx32("h2", { className: "yv:font-bold yv:tracking-widest yv:text-xs yv:uppercase yv:text-foreground", children: "Error" }) });
+}
+function BibleCardHeaderReference({
+  passage,
+  version: version2
+}) {
+  return /* @__PURE__ */ jsxs15("h2", { className: "yv:font-bold yv:tracking-widest yv:text-xs yv:uppercase yv:text-foreground", children: [
+    passage.reference,
+    " ",
+    version2?.localized_abbreviation
+  ] });
+}
+function BibleCardVersionPicker({
+  versionId,
+  onVersionChange,
+  theme
+}) {
+  return /* @__PURE__ */ jsxs15(
+    BibleVersionPicker.Root,
+    {
+      onVersionChange,
+      versionId,
+      background: theme,
+      children: [
+        /* @__PURE__ */ jsx32(BibleVersionPicker.Trigger, { "aria-label": "Change Bible version", children: ({ version: version2, loading }) => /* @__PURE__ */ jsx32(
+          Button,
+          {
+            variant: "secondary",
+            className: "yv:font-bold yv:text-xs",
+            disabled: loading,
+            "data-yv-theme": theme,
+            children: loading ? "Loading..." : version2?.localized_abbreviation || "Select version"
+          }
+        ) }),
+        /* @__PURE__ */ jsx32(BibleVersionPicker.Content, {})
+      ]
+    }
+  );
+}
+function BibleCardFooter({ copyright }) {
+  return /* @__PURE__ */ jsxs15("div", { className: "yv:grid yv:grid-cols-[1fr_auto] yv:gap-4 yv:items-center yv:mt-4", children: [
+    /* @__PURE__ */ jsx32("p", { className: "yv:text-balance yv:text-muted-foreground yv:justify-self-start yv:font-bold yv:text-[0.5rem]", children: copyright || "" }),
+    /* @__PURE__ */ jsx32("div", { className: "yv:justify-self-end", children: /* @__PURE__ */ jsx32(SvgComponent, { fontSize: 12 }) })
+  ] });
+}
 function BibleCard({
   reference,
   versionId,
@@ -17202,7 +17272,11 @@ function BibleCard({
 }) {
   const [versionNum, setVersionNum] = useState5(versionId);
   const { version: version2 } = useVersion4(versionNum);
-  const { passage } = usePassage3({
+  const {
+    passage,
+    loading: passageLoading,
+    error: passageError
+  } = usePassage3({
     versionId: versionNum,
     usfm: reference,
     include_headings: true,
@@ -17218,30 +17292,14 @@ function BibleCard({
       className: "yv:flex yv:flex-col yv:bg-card yv:p-6 yv:max-w-md yv:rounded-2xl",
       children: [
         /* @__PURE__ */ jsxs15("div", { className: "yv:flex yv:justify-between yv:items-center", children: [
-          passage?.reference ? /* @__PURE__ */ jsxs15("h2", { className: "yv:font-bold yv:tracking-widest yv:text-xs yv:uppercase yv:text-foreground", children: [
-            passage.reference,
-            " ",
-            version2?.localized_abbreviation
-          ] }) : null,
-          showVersionPicker ? /* @__PURE__ */ jsxs15(
-            BibleVersionPicker.Root,
+          passageError ? /* @__PURE__ */ jsx32(BibleCardHeaderError, {}) : null,
+          !passageError && passage ? /* @__PURE__ */ jsx32(BibleCardHeaderReference, { passage, version: version2 }) : null,
+          showVersionPicker && !passageError ? /* @__PURE__ */ jsx32(
+            BibleCardVersionPicker,
             {
-              onVersionChange: setVersionNum,
               versionId: versionNum,
-              background: theme,
-              children: [
-                /* @__PURE__ */ jsx32(BibleVersionPicker.Trigger, { "aria-label": "Change Bible version", children: ({ version: version3, loading }) => /* @__PURE__ */ jsx32(
-                  Button,
-                  {
-                    variant: "secondary",
-                    className: "yv:font-bold yv:text-xs",
-                    disabled: loading,
-                    "data-yv-theme": theme,
-                    children: loading ? "Loading..." : version3?.localized_abbreviation || "Select version"
-                  }
-                ) }),
-                /* @__PURE__ */ jsx32(BibleVersionPicker.Content, {})
-              ]
+              onVersionChange: setVersionNum,
+              theme
             }
           ) : null
         ] }),
@@ -17252,13 +17310,15 @@ function BibleCard({
             fontSize: 16,
             fontFamily: SOURCE_SERIF_FONT,
             reference,
-            versionId: versionNum
+            versionId: versionNum,
+            passageState: {
+              passage,
+              loading: passageLoading,
+              error: passageError
+            }
           }
         ),
-        /* @__PURE__ */ jsxs15("div", { className: "yv:grid yv:grid-cols-[1fr_auto] yv:gap-4 yv:items-center yv:mt-4", children: [
-          /* @__PURE__ */ jsx32("p", { className: "yv:text-balance yv:text-muted-foreground yv:justify-self-start yv:font-bold yv:text-[0.5rem]", children: version2?.copyright }),
-          /* @__PURE__ */ jsx32("div", { className: "yv:justify-self-end", children: /* @__PURE__ */ jsx32(SvgComponent, { fontSize: 12 }) })
-        ] })
+        /* @__PURE__ */ jsx32(BibleCardFooter, { copyright: !passageError ? version2?.copyright : null })
       ]
     }
   );

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

@@ -11,6 +11,7 @@ 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";

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":"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"}
+{"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;IAChB,eAAe,EAAE,OAAO,CAAC;CAC1B,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;AA4VtF;;;;;;;;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,CAiBpG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youversion/platform-react-ui",
-  "version": "1.17.0",
+  "version": "1.18.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.17.0",
-    "@youversion/platform-react-hooks": "1.17.0"
+    "@youversion/platform-core": "1.18.0",
+    "@youversion/platform-react-hooks": "1.18.0"
   },
   "peerDependencies": {
     "react": ">=19.1.0 <20.0.0",
@@ -76,8 +76,8 @@
     "vite": "7.1.11",
     "vitest": "4.0.4",
     "vitest-browser-react": "2.0.2",
-    "@internal/tsconfig": "0.0.0",
-    "@internal/eslint-config": "0.0.0"
+    "@internal/eslint-config": "0.0.0",
+    "@internal/tsconfig": "0.0.0"
   },
   "publishConfig": {
     "access": "public",