Add debug display as a separate ESM entry point

[MattiasBuelens]

Summary

Adds a debug display: an opt-in overlay panel with live playback diagnostics, for developers and for bug reports. It ships as a separate package entry, so none of it ends up in the main bundle.

New @theoplayer/web-ui/debug entry (ESM only)

"./debug": {
  "types": "./dist/THEOplayerUI.debug.d.ts",
  "import": "./dist/THEOplayerUI.debug.mjs"
}

• The entry is built from src/debug/index.ts and registers <theoplayer-debug-display>, <theoplayer-rolling-chart> and <theoplayer-debug-button>.
• Lit, theoplayer/chromeless and @theoplayer/web-ui itself are external. The debug code imports shared pieces (Button, stateReceiver, Attribute, version) from ../index, and a small Rollup plugin (externalizeMainEntry) rewrites that import to import … from '@theoplayer/web-ui'. This keeps a second copy of the UI runtime and its custom elements out of the debug bundle.
• There is no UMD build. The main UMD bundles its own private copy of Lit, so a UMD debug build would have to ship a second one.
• The entry is left out of typedoc for now.
• getSlottedElements now checks localName === 'theoplayer-slot-container' instead of importing isSlotContainer. That import pulled SlotContainer (and its customElements.define) into the debug bundle.

Main UI (generic, no debug-specific code)

• UIContainer, DefaultUI and THEOliveDefaultUI get a new overlay slot. The overlay layer sits above the chrome and below the menu and error layers, and is hidden while a menu is open.
• UIContainer.menuOpened is now publicly readable, and DefaultUI forwards the menu-opened and user-idle attributes.
• React: DefaultUI and THEOliveDefaultUI get a new overlay?: ReactNode prop.

Debug display

• Shows: player and UI version, state/readyState, playback rate (only when ≠ 1), source URL (truncated in the middle to fit the available width, full URL as a tooltip), stream type, MIME type, viewport×DPR vs. content resolution, active video/audio quality, codecs, dropped/total/corrupted frame counters, download speed / buffer health / live latency charts (latency shows the target band from latency.currentConfiguration), a seekable/buffered timeline, and the time of the last sample.
• "Copy" writes a JSON snapshot to the clipboard. The close button hides the panel, and <theoplayer-debug-button> toggles it, with aria-pressed kept in sync.
• Styling: compact top-left panel with rounded corners and a translucent background. Values are monospace and use tabular numbers. Canvas charts are sharp on HiDPI and scale from a zero baseline. Rows with no value are hidden.
• The panel is capped at min(480px, 60%) (with a plain 480px fallback for browsers without CSS min()). On players narrower than 500px it switches to full width through a container query, using the same breakpoint as the menus. Browsers without container queries keep the 60% cap.
• The display is English-only by design, since it's a developer tool.

Usage:

<theoplayer-default-ui>
  <theoplayer-debug-display slot="overlay" hidden></theoplayer-debug-display>
  <theoplayer-debug-button slot="bottom-control-bar"></theoplayer-debug-button>
</theoplayer-default-ui>
<script type="module">
  import '@theoplayer/web-ui';
  import '@theoplayer/web-ui/debug';
</script>

Checks

• Main THEOplayerUI.mjs is 243.6 KB and contains no theoplayer-debug-*. THEOplayerUI.debug.mjs is 34.4 KB.
• The SSR test also imports @theoplayer/web-ui/debug in Node.

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: 1eab814

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

[ceyhun-o]

Looks and works great on Chrome/Safari/Firefox as far as I can see!