fix(core): render a qs Selah pause on its own end-aligned line

.changeset/qs-selah-own-line.md

@@ -0,0 +1,6 @@
+---
+'@youversion/platform-core': patch
+'@youversion/platform-react-ui': patch
+---
+
+Render a Selah pause on its own italic line, aligned to the end. A pause inside a refrain stays on that line.

.size-limit.js

@@ -16,13 +16,15 @@ export default [
   {
     name: 'core / browser entry',
     path: 'packages/core/dist/browser.js',
-    limit: '2 KB',
+    // extractPauseLines + trailing split; measured ~2.1 kB brotli, +~10%.
+    limit: '2.4 KB',
     ignore: ['jsdom'],
   },
   {
     name: 'core / server entry',
     path: 'packages/core/dist/server.js',
-    limit: '2 KB',
+    // Same pause-line transform surface as browser; measured ~2.18 kB brotli.
+    limit: '2.4 KB',
     ignore: ['jsdom'],
   },
   {

packages/core/src/bible-html-transformer.test.ts

@@ -529,6 +529,207 @@ describe('transformBibleHtml - idempotency', () => {
   });
 });
 
+describe('transformBibleHtml - qs pause punctuation', () => {
+  it('keeps a period after a qs pause with the pause', () => {
+    const html =
+      '<div><div class="q"><span class="qs">Selah</span>.</div><div class="q">Next sentence.</div></div>';
+    const result = transformBibleHtml(html, createAdapters());
+    const doc = new DOMParser().parseFromString(result.html, 'text/html');
+    const pause = doc.querySelector('.yv-qs-line .qs');
+
+    expect(pause?.textContent).toBe('Selah.');
+    expect(pause?.closest('.yv-qs-line')?.textContent).toBe('Selah.');
+    expect(doc.querySelector('.q')?.textContent).toBe('Next sentence.');
+  });
+
+  it('keeps a closing quote, Arabic question mark, and CJK period with the pause', () => {
+    const cases = [
+      { html: '<div><div class="q"><span class="qs">Selah</span>”</div></div>', want: 'Selah”' },
+      { html: '<div><div class="q"><span class="qs">سلاه</span>؟</div></div>', want: 'سلاه؟' },
+      { html: '<div><div class="q"><span class="qs">细拉</span>。</div></div>', want: '细拉。' },
+    ] as const;
+
+    for (const { html, want } of cases) {
+      const result = transformBibleHtml(html, createAdapters());
+      const doc = new DOMParser().parseFromString(result.html, 'text/html');
+      expect(doc.querySelector('.qs')?.textContent).toBe(want);
+    }
+  });
+
+  it('leaves the sentence before a qs pause in q where it was', () => {
+    const html =
+      '<div><div class="q">There is no salvation. <span class="qs">Selah</span></div></div>';
+    const result = transformBibleHtml(html, createAdapters());
+    const doc = new DOMParser().parseFromString(result.html, 'text/html');
+    const line = doc.querySelector('.q');
+
+    expect(line?.querySelector('.qs')).toBeNull();
+    expect(line?.textContent).toContain('There is no salvation.');
+    expect(doc.querySelector('.yv-qs-line .qs')?.textContent).toBe('Selah');
+  });
+
+  it('lifts a non-refrain qs pause onto its own verse-tagged line', () => {
+    const html =
+      '<div><div class="q"><span class="yv-v" v="3"></span>His glory covered the heavens. <span class="qs">Selah</span>.</div></div>';
+    const result = transformBibleHtml(html, createAdapters());
+    const doc = new DOMParser().parseFromString(result.html, 'text/html');
+    const poetry = doc.querySelector('.q .yv-v[v="3"]');
+    const pauseLine = doc.querySelector('.yv-qs-line');
+    const pauseVerse = pauseLine?.querySelector('.yv-v[v="3"]');
+
+    const pause = pauseLine?.querySelector('.qs');
+
+    expect(poetry?.textContent).toContain('His glory covered the heavens.');
+    expect(poetry?.querySelector('.qs')).toBeNull();
+    expect(pause?.textContent).toBe('Selah.');
+    expect(pause && pauseVerse?.contains(pause)).toBe(true);
+    expect(doc.querySelector('.yv-v .yv-qs-line')).toBeNull();
+  });
+
+  it('keeps text that followed a mid-host pause after the pause line', () => {
+    const html =
+      '<div><div class="p"><span class="yv-v" v="1"></span>First. <span class="qs">Selah</span>. <span class="yv-v" v="2"></span>Second verse.</div></div>';
+    const result = transformBibleHtml(html, createAdapters());
+    const doc = new DOMParser().parseFromString(result.html, 'text/html');
+    const parts = [...doc.body.querySelectorAll('.p, .yv-qs-line')].map((el) => ({
+      kind: el.className,
+      text: (el.textContent ?? '').replace(/\s+/g, ' ').trim(),
+    }));
+
+    expect(parts).toEqual([
+      { kind: 'p', text: 'First.' },
+      { kind: 'yv-qs-line', text: 'Selah.' },
+      { kind: 'p', text: 'Second verse.' },
+    ]);
+  });
+
+  it('keeps same-verse text after a pause inside its .yv-v wrapper', () => {
+    const html =
+      '<div><div class="q"><span class="yv-v" v="3">First <span class="qs">Selah</span> last</span></div></div>';
+    const result = transformBibleHtml(html, createAdapters());
+    const doc = new DOMParser().parseFromString(result.html, 'text/html');
+    const before = doc.querySelectorAll('.q')[0];
+    const after = doc.querySelectorAll('.q')[1];
+    const afterVerse = after?.querySelector('.yv-v[v="3"]');
+
+    expect(before?.querySelector('.yv-v[v="3"]')?.textContent).toBe('First ');
+    expect(doc.querySelector('.yv-qs-line .qs')?.textContent).toBe('Selah');
+    expect(afterVerse?.textContent).toBe(' last');
+    expect(after?.querySelector(':scope > .yv-v[v="3"]')).toBeTruthy();
+  });
+
+  it('copies the host reading direction onto the pause line', () => {
+    // Top-level hosts so resolveTextDirection sees both roots after the split.
+    const html =
+      '<div class="q" dir="rtl"><span class="yv-v" v="3"></span>نص. <span class="qs">سلاه</span>.</div>';
+    const result = transformBibleHtml(html, createAdapters());
+    const doc = new DOMParser().parseFromString(result.html, 'text/html');
+
+    expect(doc.querySelector('.yv-qs-line')?.getAttribute('dir')).toBe('rtl');
+    expect(result.direction).toBe('rtl');
+  });
+
+  it('keeps Selah, the footnote marker, then the period when notes are on', () => {
+    const html =
+      '<div><div class="q"><span class="qs">Selah</span><span class="yv-n f"><span class="ft">A note</span></span>.</div></div>';
+    const result = transformBibleHtml(html, createAdapters());
+    const doc = new DOMParser().parseFromString(result.html, 'text/html');
+    const pause = doc.querySelector('.qs');
+    const parts = [...(pause?.childNodes ?? [])].map((node) => {
+      if (node.nodeType === Node.TEXT_NODE) return `text:${node.textContent}`;
+      if (node instanceof Element && node.hasAttribute('data-verse-footnote')) return 'footnote';
+      return node.nodeName;
+    });
+
+    expect(parts).toEqual(['text:Selah', 'footnote', 'text:.']);
+    expect(pause?.querySelector('[data-verse-footnote-content]')).toBeTruthy();
+    expect(
+      pause?.querySelector('[data-verse-footnote]')?.getAttribute('data-verse-footnote-content'),
+    ).toContain('A note');
+  });
+
+  it('keeps the period with Selah when the footnote marker is off', () => {
+    const html =
+      '<div><div class="q"><span class="qs">Selah</span><span class="yv-n f"><span class="ft">A note</span></span>.</div></div>';
+    const result = transformBibleHtml(html, createAdapters());
+    const doc = new DOMParser().parseFromString(result.html, 'text/html');
+    const pause = doc.querySelector('.qs');
+    pause?.querySelector('[data-verse-footnote]')?.remove();
+
+    expect(pause?.textContent).toBe('Selah.');
+  });
+
+  it('keeps a footnote after a qs pause in q4 as the next marker', () => {
+    const html =
+      '<div><div class="q4"><span class="qs">Pausa</span><span class="yv-n f"><span class="ft">Hebrew Selah</span></span></div></div>';
+    const result = transformBibleHtml(html, createAdapters());
+    const doc = new DOMParser().parseFromString(result.html, 'text/html');
+    const pause = doc.querySelector('.yv-qs-line .qs');
+
+    expect(pause?.textContent).toBe('Pausa');
+    expect(pause?.nextElementSibling?.getAttribute('data-verse-footnote')).toBeTruthy();
+    expect(pause?.nextElementSibling?.getAttribute('data-verse-footnote-content')).toContain(
+      'Hebrew Selah',
+    );
+    expect(pause?.closest('.yv-qs-line')).toBeTruthy();
+  });
+
+  it('leaves a qs pause inside qr beside the refrain', () => {
+    const html =
+      '<div><div class="qr"><span class="qs">Pause in his presence</span><span class="yv-n f"><span class="ft">Or Selah</span></span></div></div>';
+    const result = transformBibleHtml(html, createAdapters());
+    const doc = new DOMParser().parseFromString(result.html, 'text/html');
+    const refrain = doc.querySelector('.qr');
+    const pause = refrain?.querySelector(':scope > .qs');
+
+    expect(pause?.textContent).toBe('Pause in his presence');
+    expect(pause?.nextElementSibling?.hasAttribute('data-verse-footnote')).toBe(true);
+    expect(refrain?.className).toBe('qr');
+  });
+
+  it('leaves a period after a qs pause inside qr outside the pause', () => {
+    const html = '<div><div class="qr"><span class="qs">Selah</span>.</div></div>';
+    const result = transformBibleHtml(html, createAdapters());
+    const doc = new DOMParser().parseFromString(result.html, 'text/html');
+    const pause = doc.querySelector('.qr .qs');
+
+    expect(pause?.textContent).toBe('Selah');
+    expect(pause?.nextSibling?.textContent).toBe('.');
+  });
+
+  it('keeps Selah, the footnote marker, then the period when a blank sits between them', () => {
+    const html =
+      '<div><div class="q"><span class="qs">Selah</span> <span class="yv-n f"><span class="ft">A note</span></span>.</div></div>';
+    const result = transformBibleHtml(html, createAdapters());
+    const doc = new DOMParser().parseFromString(result.html, 'text/html');
+    const pause = doc.querySelector('.qs');
+    const parts = [...(pause?.childNodes ?? [])].map((node) => {
+      if (node.nodeType === Node.TEXT_NODE) return `text:${node.textContent}`;
+      if (node instanceof Element && node.hasAttribute('data-verse-footnote')) return 'footnote';
+      return node.nodeName;
+    });
+
+    expect(parts).toEqual(['text:Selah', 'footnote', 'text:.']);
+  });
+
+  it('keeps Selah, the footnote marker, then the period for already-transformed HTML', () => {
+    const html =
+      '<div data-yv-transformed=""><div class="q"><span class="yv-v" v="3"><span class="qs">Selah</span><span data-verse-footnote="3" data-verse-footnote-content="x"></span>.</span></div></div>';
+    const result = transformBibleHtml(html, createAdapters());
+    const doc = new DOMParser().parseFromString(result.html, 'text/html');
+    const pause = doc.querySelector('.yv-qs-line .qs');
+    const parts = [...(pause?.childNodes ?? [])].map((node) => {
+      if (node.nodeType === Node.TEXT_NODE) return `text:${node.textContent}`;
+      if (node instanceof Element && node.hasAttribute('data-verse-footnote')) return 'footnote';
+      return node.nodeName;
+    });
+
+    expect(parts).toEqual(['text:Selah', 'footnote', 'text:.']);
+    expect(doc.querySelector('.yv-qs-line .yv-v[v="3"]')).toBeTruthy();
+    expect(doc.querySelector('.q .qs')).toBeNull();
+  });
+});
+
 describe('transformBibleHtmlForBrowser - DOMParser fallback', () => {
   it('should throw when DOMParser is unavailable', () => {
     const original = globalThis.DOMParser;