[abharms]

Summary

• render YouVersionAuthButton, BibleChapterPicker.Root, and BibleVersionPicker.Root with childless span Shadow DOM hosts
• preserve valid phrasing-content parsing and reuse the server host during hydration
• cover authenticated streaming SSR (in its own YouVersionAuthButton.ssr.test.tsx file) plus both picker roots, including the distinct console-diagnostic contracts
• add a patch changeset for @youversion/platform-react-ui

Requirement evidence

Requirement	Evidence
The three affected roots use phrasing-safe hosts	Each public root passes hostElement="span"; the shared default remains unchanged. Reverting any one root to div fails that root's test.
The server host is childless and styled	Auth and picker tests assert the exact <span data-yv-shadow-host="true" style="display:contents"></span> server markup.
Server parsing preserves <p>Before … after</p>	Auth and picker tests assert one intact paragraph with the host inside it. The picker tests also assert the host sits between Before and after.
Hydration reuses the server host	All three cases compare the hydrated host by identity and capture zero recoverable errors.
Auth coverage exercises the lazy provider	The auth test streams an includeAuth YouVersionProvider, waits for onAllReady, then parses and hydrates the completed output.
Diagnostics remain bug-specific	Auth filters only invalid-nesting diagnostics (cannot be a child/descendant of, cannot contain a nested, validateDOMNesting) because same-process rendering can emit unrelated multiple-renderer messages; an inline comment records why. Picker tests retain their blanket console check outside YouVersionProvider.

Review scope

Required outcomes

• change only the auth-button and two picker-root host tags from div to span
• preserve childless styled hosts, isolation, refs, events, triggers, and overlay behavior
• retain default hosts and unnamed components unchanged

Non-goals

• redesigning ShadowIsolationBoundary or changing its default host
• changing ADR 0010 or the coordinated Shadow DOM changeset
• repairing unrelated Bible-reader test timeouts

Verification

At 49abb72 (current head):

• CI — Lint, Type Check, Build, Test, Integration Tests, and Shadow DOM (Firefox, WebKit) passed
• affected unit tests — 7/7 passed across YouVersionAuthButton.ssr.test.tsx, YouVersionAuthButton.test.tsx, and bible-picker-shadow-isolation.test.tsx

At 1d1bddb (before the two test-only follow-up commits):

• pnpm lint, pnpm typecheck, pnpm build, git diff --check — passed
• pnpm --filter @youversion/platform-react-ui test:shadow-browser — 42 passed, 4 skipped across 18 files
• pnpm --filter @youversion/platform-react-ui test:shadow-safari — all 42 focused stories passed in fresh SafariDriver sessions on their first attempt
• pnpm test — all changed tests passed; six existing Bible-reader tests exceeded their 5-second timeout under local full-suite load (an independent run passed 591/591)

The follow-up commits change only tests, so the local browser and Safari runs were not repeated.

Review audits

Standards, Spec, and Compatibility audits at 1d1bddb found no implementation defect, documented-standard violation, or consumer regression. The follow-up commits address their test findings: the auth host is asserted childless, the picker host position is asserted, the dead diagnostic pattern is fixed, and the auth SSR test runs in its own file so its multiple-renderer output no longer reaches other auth tests.

Known remaining gaps, not addressed here:

• no browser test asserts computed display:contents for these three hosts (identical code path for div and span)
• bible-chapter-picker.test.tsx and bible-version-picker.test.tsx use ReuseShadowBoundary, so only the isolation test and shadow stories exercise the standalone span host
• ADR 0010 still documents only the div ordinary-boundary host (non-goal above)
• consumer markup that was valid only because picker roots were transparent outside phrasing contexts (for example directly in <tr>) still reparents; a span host cannot fix that, and the ticket scopes the fix to phrasing content

Jira

YPE-6218

Confidence Score: 5/5

The PR appears safe to merge.

Summary

Changes YouVersionAuthButton and both picker roots to childless span hosts so server-rendered paragraphs stay intact.

• Auth and Bible picker hosts stay in paragraph text.

_{Reviews (4) · Last reviewed commit: "docs(ui): record phrasing host validatio..." · Reviewed by Greptile}

[changeset-bot]

🦋 Changeset detected

Latest commit: b3e726a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@youversion/platform-react-ui	Patch
vite-react	Patch
@youversion/platform-core	Patch
@youversion/platform-react-hooks	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-11-02T21:08:21.309074Z	b3e726a	New commits

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[abharms]

@codex review

[chatgpt-codex-connector]

Codex Review: Didn't find any major issues. Delightful!

Reviewed commit: 5e836ed237

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[camrun91]

Thanks, @abharms! The fix is correct and small, and the tests are good. The CI is green. I have 2 required changes. Both are short doc updates.

1. Required: update the server markup contract in ADR 0010
docs/adr/0010-automatic-shadow-dom-style-isolation.md:104-109
The ADR shows a div host in the server markup. After this change, YouVersionAuthButton, BibleChapterPicker.Root, BibleVersionPicker.Root, Separator, and ProfileAvatar render a span host. The ADR is now not correct for these components. Readers use the ADR as the record of the contract (docs/review-guidelines.md: "Are API changes documented"). This is a fix to a fact, not a change to the decision.
Please add 1 sentence. For example: "Components that can be in phrasing content (YouVersionAuthButton, the picker roots, Separator, ProfileAvatar) use a span host with the same attributes."

2. Required: record the Safari rerun in the validation plan
docs/shadow-dom-isolation-plan.md:157-178
The rollout policy (:14, :122, :199-202) says that a host change needs a new actual-Safari run, and that we keep the completed gate in the validation plan. The PR body says that the run passed (42/42 at 1d1bddb). But the plan still shows YPE-6214 as the last Safari validation.
Please add a short YPE-6218 note with the result only. For example: "YPE-6218 host-tag change: targeted actual-Safari gate repeated and passed; YPE-6214 limitations unchanged."

When these 2 changes are done, I can approve. Thank you!

[abharms]

@camrun91 ready for another look.