feat(core): add pip button component

[mihar-22]

Closes #274

Summary

Add PiP (picture-in-picture) button component for toggling video PiP mode. Includes core interaction logic, HTML custom element, and React component — following the same three-layer architecture as the existing fullscreen button.

Changes

• PiPButtonCore with props, state projection, label resolution, ARIA attrs, and async toggle with availability guard
• PiPButtonDataAttrs exposing data-pip and data-availability for CSS styling
• PiPButtonElement custom element (<media-pip-button>) wired to the player store via selectPiP
• PiPButton React component with forwardRef, render prop support, and state-driven data attributes
• Custom element registration and tag name map augmentation
• 13 unit tests covering state projection, labels, ARIA, toggle, disabled/unsupported guards, and error handling

Implementation details

This only covers standard Video PiP (HTMLVideoElement.requestPictureInPicture). Document PiP (the newer documentPictureInPicture.requestWindow() API) is deferred to a follow-up — the button calls requestPiP()/exitPiP() from the store, so it will work with Document PiP when that's added to the store layer without any button changes.

Testing

pnpm -F @videojs/core test src/core/ui/pip-button

All 13 tests pass. Full build and typecheck clean.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
vjs-10-demo-react	Ignored	Preview	Feb 13, 2026 11:19am

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	5b86ce0
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/698f08aa38263c00084a4e4f
😎 Deploy Preview	https://deploy-preview-525--vjs10-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

📦 Bundle Size Report

Package	Size	Diff		%
@videojs/core	4.08 kB	+77 B	████████	+1.9%	🔺
@videojs/element	1.60 kB	0 B	░░░░░░░░	0%	✅
@videojs/html	7.51 kB	+113 B	██████░░	+1.5%	🔺
@videojs/react	6.62 kB	+88 B	██████░░	+1.3%	🔺
@videojs/store	1.86 kB	0 B	░░░░░░░░	0%	✅
@videojs/utils	1.87 kB	0 B	░░░░░░░░	0%	✅

Total: 23.54 kB · +278 B · +1.2%

---

Entry Breakdown

Subpath sizes are the additional bytes on top of the root entry point, measured by bundling root + subpath together and subtracting the root-only size.

@videojs/core

Entry	Base	PR	Diff	%
.	1.32 kB	1.39 kB	+77 B	+5.7%	🔺
./dom	2.68 kB	2.68 kB	0 B	0%	✅
total	4.00 kB	4.08 kB	+77 B	+1.9%

@videojs/element

Entry	Base	PR	Diff	%
.	817 B	817 B	0 B	0%	✅
./context	823 B	823 B	0 B	0%	✅
total	1.60 kB	1.60 kB	0 B	0%

@videojs/store

Entry	Base	PR	Diff	%
.	1.29 kB	1.29 kB	0 B	0%	✅
./html	394 B	394 B	0 B	0%	✅
./react	190 B	190 B	0 B	0%	✅
total	1.86 kB	1.86 kB	0 B	0%

@videojs/utils

Entry	Base	PR	Diff	%
./array	104 B	104 B	0 B	0%	✅
./dom	553 B	553 B	0 B	0%	✅
./events	227 B	227 B	0 B	0%	✅
./function	181 B	181 B	0 B	0%	✅
./object	119 B	119 B	0 B	0%	✅
./predicate	265 B	265 B	0 B	0%	✅
./time	465 B	465 B	0 B	0%	✅
total	1.87 kB	1.87 kB	0 B	0%

---

ℹ️ How to interpret

Sizes are minified + brotli, measured with esbuild.
Package totals are computed as root size + marginal subpath costs.
Subpath marginal cost = (root + subpath bundled together) − root alone.

Icon	Meaning
✅	No change
🔺	Increased ≤ 10%
🔴	Increased > 10%
🔽	Decreased
🆕	New (no baseline)

Run pnpm size locally to check current sizes.