Add debug display bookmarklet and React debug entry point

[MattiasBuelens]

Summary

Stacked on #200. This PR adds two things:

• A standalone script, dist/THEOplayerUI.debug.bookmarklet.js, that injects the debug display into any page using Open Video UI. It works with ESM, UMD, React or bundled apps, because it doesn't rely on the page's module graph.
• A @theoplayer/react-ui/debug entry point with React wrappers for the debug elements.

The intended bookmarklet:

javascript:(()=>{const s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/@theoplayer/web-ui@2/dist/THEOplayerUI.debug.bookmarklet.js';document.head.append(s)})()

Bookmarklet bundle (src/debug/bookmarklet.ts, IIFE, ~55 KB)

• Bundles its own Lit, DebugDisplay and RollingChart. DebugButton is left out because it extends the page's Button.
• It needs its own copy because the page's Open Video UI isn't reachable from a classic script: ESM apps bundle it, and the UMD build keeps its Lit private.
• DebugDisplay now deep-imports only pure helpers (Attribute, stateReceiver, version) instead of ../index, so the bundle registers nothing from the main UI. The page's UIContainer accepts our copy of stateReceiver, because receivers are recognized by a string-keyed prototype property.
• On each run, the script finds the outermost theoplayer-default-ui / theolive-default-ui / theoplayer-ui elements, including inside open shadow roots. It only uses UIs that have an overlay slot, so older versions aren't supported. For each UI, it either toggles an existing direct-child <theoplayer-debug-display> or appends a new one with slot="overlay". UIContainer's MutationObserver then registers the new display and sets its player.
• It's not added to exports, since nothing imports it by specifier. files: ['dist/'] already publishes it, and CDNs serve it by path.

Idempotent registration

• The debug elements now use defineElementOnce(name, ctor) instead of @customElement. Running the bookmarklet again doesn't throw, and neither does running it on a page that already imports @theoplayer/web-ui/debug.

version on UI elements

• UIContainer and DefaultUI get a read-only version getter. THEOliveDefaultUI inherits it.
• The debug display reads the version from its closest UI element and falls back to its own bundled version. So the bookmarklet reports the page's UI version, not its own.

React: @theoplayer/react-ui/debug

• DebugDisplay and DebugButton are createComponent wrappers around the elements from @theoplayer/web-ui/debug. DebugButton maps onClick.
• The entry is ESM only (./debug → types + import), the same as the web-ui debug entry. It is built as dist/THEOplayerReactUI.debug.mjs and .d.ts, keeping react, @lit/react, @theoplayer/web-ui and @theoplayer/web-ui/debug external. It is left out of typedoc.
• DebugButton lists its events inline instead of importing ButtonEvents, so the unused Button wrapper isn't pulled into the debug bundle.

import { DefaultUI } from '@theoplayer/react-ui';
import { DebugButton, DebugDisplay } from '@theoplayer/react-ui/debug';

<DefaultUI overlay={<DebugDisplay hidden />} bottomControlBar={<DebugButton />} />;

Docs

• New guide docs/guides/debug-display.md with a screenshot (docs/assets/debug-display.png). It covers adding the debug display through @theoplayer/web-ui/debug and the overlay slot, and gives the bookmarklet code to paste as a bookmark URL.
• New React guide docs/react/guides/debug-display.md, linked from the web guide.
• The bookmarklet is a text code block (with the Docusaurus copy button), not a drag-to-bookmarks link, because React 19 replaces javascript: URLs in href. The text language also stops Prettier from reformatting the one-liner.

Checks

• Format, typecheck and build pass, as do the SSR tests for web-ui and React. A new React SSR case renders DebugDisplay and DebugButton in DefaultUI.
• The bookmarklet bundle has no external imports and only registers theoplayer-debug-display and theoplayer-rolling-chart. The main React bundle contains no theoplayer-debug.
• In Chrome, I injected the script into the example page both with and without the ESM debug entry loaded. It toggles on each run without creating a duplicate element or throwing a define error, and it shows THEOplayer 11.4.0 / UI 2.5.0.

Link to Devin session: https://dolby.devinenterprise.com/sessions/50ad8a122b354986bcfc78390b5a7f00
Open in Devin Desktop: https://dolby.devinenterprise.com/desktop/session/50ad8a122b354986bcfc78390b5a7f00?variant=devin
Requested by: @MattiasBuelens

[devin-ai-integration]

I'll fix CI failures and address comments from users with write access. I'll skip comments containing "(aside)".

• Disable automatic comment, CI, and merge conflict monitoring

[changeset-bot]

🦋 Changeset detected

Latest commit: b8ed4f3

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

This PR includes changesets to release 2 packages

Name	Type
@theoplayer/web-ui	Minor
@theoplayer/react-ui	Minor

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