diff --git a/.github/scripts/bundle-size.js b/.github/scripts/bundle-size.js
index 0d2b80ea..a113720d 100644
--- a/.github/scripts/bundle-size.js
+++ b/.github/scripts/bundle-size.js
@@ -35,7 +35,6 @@ const PACKAGES_DIR = join(ROOT, 'packages');
 
 const SKIP_PACKAGES = new Set([
   'sandbox',
-  '__tech-preview__',
   'react-native',
   'skins',
   'icons',
diff --git a/CLAUDE.md b/CLAUDE.md
index 0b9803d6..c8228ecf 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -19,9 +19,6 @@ Refer to **[`CONTRIBUTING.md`](./CONTRIBUTING.md)** for setup, development, and
 | `packages/react-native` | React Native player integration layer.                              |
 | `site/`                 | Astro‑based docs and website.                                       |
 
-IGNORE `packages/__tech-preview__/` — it's legacy code from the Demuxed demo. Don't reference or
-modify it when working in other packages.
-
 ### Dependency Hierarchy
 
 ```text
diff --git a/biome.json b/biome.json
index bc8862f6..842e6a7c 100644
--- a/biome.json
+++ b/biome.json
@@ -132,8 +132,7 @@
       "!**/dist",
       "!**/examples",
       "!**/styles/vjs.css",
-      "!**/packages/*/types",
-      "!**/packages/__tech-preview__"
+      "!**/packages/*/types"
     ]
   }
 }
diff --git a/packages/__tech-preview__/core/CHANGELOG.md b/packages/__tech-preview__/core/CHANGELOG.md
deleted file mode 100644
index 6019d27a..00000000
--- a/packages/__tech-preview__/core/CHANGELOG.md
+++ /dev/null
@@ -1,190 +0,0 @@
-# Changelog
-
-## [0.1.0-preview.10](https://github.com/videojs/v10/compare/@videojs/core@0.1.0-preview.9...@videojs/core@0.1.0-preview.10) (2025-12-06)
-
-
-### Features
-
-* add tooltip core ([#212](https://github.com/videojs/v10/issues/212)) ([cbf41ce](https://github.com/videojs/v10/commit/cbf41ce4c750cd5c3bb6cbf247bad91ccd578cd0))
-
-
-### Bug Fixes
-
-* add popover core, use in html and improve factory ([#204](https://github.com/videojs/v10/issues/204)) ([f3b1b19](https://github.com/videojs/v10/commit/f3b1b199173f3750bc05ad9063fcccbd4163b12b))
-* use popover core in react popover ([#208](https://github.com/videojs/v10/issues/208)) ([99fef78](https://github.com/videojs/v10/commit/99fef78f63e8dd121513b9cd20696a7d35603837))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/utils bumped to 0.1.0-preview.10
-
-## [0.1.0-preview.9](https://github.com/videojs/v10/compare/@videojs/core@0.1.0-preview.8...@videojs/core@0.1.0-preview.9) (2025-11-18)
-
-
-### Bug Fixes
-
-* clean up core, less seams in wrappers ([#197](https://github.com/videojs/v10/issues/197)) ([601a5a3](https://github.com/videojs/v10/commit/601a5a37939605ca38f81a825fd02934e7928c39))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/utils bumped to 0.1.0-preview.9
-
-## [0.1.0-preview.8](https://github.com/videojs/v10/compare/@videojs/core@0.1.0-preview.7...@videojs/core@0.1.0-preview.8) (2025-11-12)
-
-
-### Miscellaneous Chores
-
-* **@videojs/core:** Synchronize videojs versions
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/utils bumped to 0.1.0-preview.8
-
-## [0.1.0-preview.7](https://github.com/videojs/v10/compare/@videojs/core@0.1.0-preview.6...@videojs/core@0.1.0-preview.7) (2025-11-11)
-
-
-### Miscellaneous Chores
-
-* **@videojs/core:** Synchronize videojs versions
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/utils bumped to 0.1.0-preview.7
-
-## [0.1.0-preview.6](https://github.com/videojs/v10/compare/@videojs/core@0.1.0-preview.5...@videojs/core@0.1.0-preview.6) (2025-11-06)
-
-
-### Bug Fixes
-
-* **site:** update discord link ([#170](https://github.com/videojs/v10/issues/170)) ([bb10294](https://github.com/videojs/v10/commit/bb10294419439fb02df650f3e7f7c5496ecc3a73))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/utils bumped to 0.1.0-preview.6
-
-## [0.1.0-preview.5](https://github.com/videojs/v10/compare/@videojs/core@0.1.0-preview.4...@videojs/core@0.1.0-preview.5) (2025-11-03)
-
-
-### Miscellaneous Chores
-
-* **@videojs/core:** Synchronize videojs versions
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/utils bumped to 0.1.0-preview.5
-
-## [0.1.0-preview.4](https://github.com/videojs/v10/compare/@videojs/core@0.1.0-preview.3...@videojs/core@0.1.0-preview.4) (2025-10-30)
-
-
-### Miscellaneous Chores
-
-* **@videojs/core:** Synchronize videojs versions
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/utils bumped to 0.1.0-preview.4
-
-## [0.1.0-preview.3](https://github.com/videojs/v10/compare/@videojs/core@0.1.0-preview.2...@videojs/core@0.1.0-preview.3) (2025-10-29)
-
-
-### Bug Fixes
-
-* **packages:** update version badges ([#138](https://github.com/videojs/v10/issues/138)) ([22d9cb6](https://github.com/videojs/v10/commit/22d9cb64f2e5b9601a2039bb166dbe3fee6a1b3e))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/utils bumped to 0.1.0-preview.3
-
-## [0.1.0-preview.2](https://github.com/videojs/v10/compare/@videojs/core@0.1.0-preview.1...@videojs/core@0.1.0-preview.2) (2025-10-25)
-
-
-### Bug Fixes
-
-* **core:** update README to use v10 terminology ([93dd266](https://github.com/videojs/v10/commit/93dd266f551923e103111019e12834f27cefabe7))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/utils bumped to 0.1.0-preview.2
-
-## [0.1.0-preview.1](https://github.com/videojs/v10/compare/@videojs/core@0.1.0-preview.0...@videojs/core@0.1.0-preview.1) (2025-10-25)
-
-
-### Features
-
-* add a solution for React preview time display ([#50](https://github.com/videojs/v10/issues/50)) ([f78b09f](https://github.com/videojs/v10/commit/f78b09fd16b7a9ee5a404c9260e3e764fb77ddde))
-* add compound html timerange component ([#14](https://github.com/videojs/v10/issues/14)) ([017ecdb](https://github.com/videojs/v10/commit/017ecdbff991d140ea42e4a855269a54e0a19adc))
-* add core range, time and volume range ([#23](https://github.com/videojs/v10/issues/23)) ([687b765](https://github.com/videojs/v10/commit/687b7655b0b6356c28663ca85c8f6d25a1023c18))
-* add display click to play / pause ([#117](https://github.com/videojs/v10/issues/117)) ([4f06ef6](https://github.com/videojs/v10/commit/4f06ef6c7684fd7064ca76685003a1c38ebd09cd))
-* add keyboard control to sliders ([#115](https://github.com/videojs/v10/issues/115)) ([0a49026](https://github.com/videojs/v10/commit/0a4902623d58f51055b1cc65498a0e716533ec29))
-* add range orientation to react components ([#30](https://github.com/videojs/v10/issues/30)) ([5e3cb8a](https://github.com/videojs/v10/commit/5e3cb8ad8134ecaf20b6e021e301a38b8ed06de2))
-* **core,html,react:** implement VolumeRange component with integrated state management ([2282f47](https://github.com/videojs/v10/commit/2282f4799b1c3fc3c55473bdfc2def86384d5d19))
-* **core:** implement temporal state management for time-based media controls ([1e12f66](https://github.com/videojs/v10/commit/1e12f66f16eedfe13af17ccfabca7ab0e8239313))
-* **icons:** add fullscreen enter and exit icons ([29ed5e3](https://github.com/videojs/v10/commit/29ed5e37593d7b5b40dba36bbadac5eed71c2710))
-* **icons:** implement shared SVG icon system across packages ([e0be58e](https://github.com/videojs/v10/commit/e0be58e094e65ea72af99b2c1e1d87c507c251bd))
-* implement current time display components ([5bd0a15](https://github.com/videojs/v10/commit/5bd0a154dbba01d2a5d11eb1f548fe4baa581675))
-* initialize Video.js 10 monorepo with core architecture ([4b0d84e](https://github.com/videojs/v10/commit/4b0d84e9c8adfa7401084389da5deb751420b629))
-* **media-store,html,react:** implement TimeRange component with hook-style architecture ([c29fd2c](https://github.com/videojs/v10/commit/c29fd2c2c1edd61c09a6683041c709a990d8a6f0))
-* **media-store:** add comprehensive time formatting utilities ([7e26e54](https://github.com/videojs/v10/commit/7e26e547ea0b98c6366d6cf1b3800b5f253767a7))
-* **media-store:** add duration display component state definition ([d0036fc](https://github.com/videojs/v10/commit/d0036fc7d68b4e50c5c7af863105900f20bee12c))
-* **media-store:** add fullscreen button component state definition ([e19b98b](https://github.com/videojs/v10/commit/e19b98b1200f80f5303b4c8a76948254c95a8c81))
-* **media-store:** add fullscreen state mediator with shadow DOM support ([7f243c2](https://github.com/videojs/v10/commit/7f243c22d85f45c5f7a88e3638f03ce774667d20))
-* migrate entire monorepo from tsc to tsup for production builds ([7403cc7](https://github.com/videojs/v10/commit/7403cc728119322888e527468a07a7634f43b32a))
-* **monorepo:** migrate prototype code to organized package structure ([4b472ec](https://github.com/videojs/v10/commit/4b472ec49cd91f0af61cb5aaa039d428982d3b91))
-* **react-icons:** implement SVGR-powered auto-generation with full styling support ([6fcb18f](https://github.com/videojs/v10/commit/6fcb18f1d2b108990025f8ea67b3a31e17879d49))
-* rename range to slider ([#46](https://github.com/videojs/v10/issues/46)) ([9c6eaef](https://github.com/videojs/v10/commit/9c6eaef2aa61771ae1407d0a594b3f790e0ff665))
-* **ui:** micro icons, toasted design tweaks ([#52](https://github.com/videojs/v10/issues/52)) ([bd3f0f7](https://github.com/videojs/v10/commit/bd3f0f7510480125653506d8e2e560234f6c06f2))
-* **ui:** port over default skin ([ff4ea36](https://github.com/videojs/v10/commit/ff4ea3693e63ab3b5a728988ca44f3bab669e8ff))
-* **ui:** port over default skin ([9950945](https://github.com/videojs/v10/commit/995094500823e1063e7ae291c9a2ea9a4aa74847))
-* **ui:** skin and icon tweaks ([#59](https://github.com/videojs/v10/issues/59)) ([cdebece](https://github.com/videojs/v10/commit/cdebece1ebe8e5160b90e49ac2cbf05a7e0b6dca))
-
-
-### Bug Fixes
-
-* Clean up more typescript errors. ([87105db](https://github.com/videojs/v10/commit/87105db6be31038fc92862c240898984d02932eb))
-* design tweaks to toasted skin, lint rule tweaks ([#44](https://github.com/videojs/v10/issues/44)) ([3a0767c](https://github.com/videojs/v10/commit/3a0767c3407b2d6d8af3d3a8afd57b1e76efda85))
-* enable eslint & run eslint:fix ([#43](https://github.com/videojs/v10/issues/43)) ([5cb93a1](https://github.com/videojs/v10/commit/5cb93a14a7f47d66d5c71f9b82867621beda236c))
-* **icons:** add currentColor fill to fullscreen icons for proper theming ([d0d4876](https://github.com/videojs/v10/commit/d0d487601eb2da669be9a83cc8201d94998ec334))
-* **media-store:** replace tsup with rollup for consistent build tooling ([77c2932](https://github.com/videojs/v10/commit/77c2932b8d504a3c66e0af3badf3b1332d5d92c0))
-* **media-store:** resolve TypeScript declaration generation build issues ([d8809c5](https://github.com/videojs/v10/commit/d8809c5abe066a39a14b423be239fe7c0c234632))
-* **media-store:** resolve TypeScript error in dispatch method ([3fd26eb](https://github.com/videojs/v10/commit/3fd26eb6544809d6a3e00a45e916f5e9fd61ae2a))
-* **media:** use explicit exports to resolve React package TypeScript errors ([4662dbc](https://github.com/videojs/v10/commit/4662dbcbb1811293c98c803f8057a2534114d4ea))
-* minimal volume slider bug & fix dev infinite bug ([#73](https://github.com/videojs/v10/issues/73)) ([591dab6](https://github.com/videojs/v10/commit/591dab66caf8829017688007320f92b7445c4baa))
-* resolve package dependency and TypeScript export issues ([7154b1e](https://github.com/videojs/v10/commit/7154b1e44674a61735ab0f393a8bed3fcc689f8d))
-* resolve TypeScript build errors across packages ([374db7a](https://github.com/videojs/v10/commit/374db7afc07d6211bfd3f8079bbcd9613f3b69f3))
-* **root:** add videojs keyword to package.json ([4a9f8b2](https://github.com/videojs/v10/commit/4a9f8b2ad6fb27b463dcfe8d1a5fd883c9fa21d1))
-* seek jump back to current time ([#22](https://github.com/videojs/v10/issues/22)) ([a3f9630](https://github.com/videojs/v10/commit/a3f9630bd1eb34a16f339ffd30071b8adc864ca0))
-* **time-display:** clean up time utilities and simplify components ([597e79d](https://github.com/videojs/v10/commit/597e79d7fc12737353c8c9eb3f6e77ef0a04e9ed))
-* **typescript:** resolve declaration file generation for rollup packages ([#1](https://github.com/videojs/v10/issues/1)) ([69670e8](https://github.com/videojs/v10/commit/69670e8d7134db34aee665d8871cd17901625915))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/utils bumped to 0.1.0-preview.1
diff --git a/packages/__tech-preview__/core/README.md b/packages/__tech-preview__/core/README.md
deleted file mode 100644
index 259381eb..00000000
--- a/packages/__tech-preview__/core/README.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# @videojs/core
-
-[![package-badge]][package]
-
-> **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use.
-
-## Overview
-
-`@videojs/core` provides runtime-agnostic core components and utilities shared across Video.js
-packages. These are foundational building blocks used by platform-specific implementations
-(HTML, React, React Native) to create consistent media player experiences.
-
-## Community
-
-If you need help with anything related to Video.js v10, or if you'd like to casually chat with other
-members:
-
-- [Join Discord Server][discord]
-- [See GitHub Discussions][gh-discussions]
-
-## License
-
-[Apache-2.0](./LICENSE)
-
-[package]: https://www.npmjs.com/package/@videojs/core
-[package-badge]: https://img.shields.io/npm/v/@videojs/core/next?label=@videojs/core@next
-[discord]: https://discord.gg/JBqHh485uF
-[gh-discussions]: https://github.com/videojs/v10/discussions
diff --git a/packages/__tech-preview__/core/package.json b/packages/__tech-preview__/core/package.json
deleted file mode 100644
index 3d15e2ff..00000000
--- a/packages/__tech-preview__/core/package.json
+++ /dev/null
@@ -1,55 +0,0 @@
-{
-  "name": "@videojs/core-preview",
-  "type": "module",
-  "version": "0.1.0-preview.10",
-  "description": "Core components and utilities for Video.js",
-  "license": "Apache-2.0",
-  "keywords": [
-    "core",
-    "components",
-    "media",
-    "player",
-    "ui",
-    "time-range",
-    "videojs"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./media": {
-      "types": "./dist/media.d.ts",
-      "default": "./dist/media.js"
-    },
-    "./store": {
-      "types": "./dist/store.d.ts",
-      "default": "./dist/store.js"
-    }
-  },
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsdown",
-    "build:watch": "tsdown --watch --silent",
-    "dev": "pnpm run build:watch",
-    "test": "echo \"No tests yet\"",
-    "clean": "rm -rf dist"
-  },
-  "dependencies": {
-    "@videojs/utils-preview": "workspace:*",
-    "hls.js": "^1.6.7",
-    "nanostores": "^1.0.1"
-  },
-  "devDependencies": {
-    "tsdown": "^0.15.9",
-    "typescript": "^5.9.3"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
diff --git a/packages/__tech-preview__/core/src/components/popover.ts b/packages/__tech-preview__/core/src/components/popover.ts
deleted file mode 100644
index d5ecd959..00000000
--- a/packages/__tech-preview__/core/src/components/popover.ts
+++ /dev/null
@@ -1,319 +0,0 @@
-import { shallowEqual } from '@videojs/utils-preview';
-import {
-  addTranslateToBoundingRect,
-  contains,
-  getDocument,
-  getInBoundsAdjustments,
-  getUntransformedBoundingRect,
-  safePolygon,
-} from '@videojs/utils-preview/dom';
-import { map } from 'nanostores';
-
-type Placement = 'top' | 'top-start' | 'top-end';
-
-export interface PopoverState {
-  openOnHover: boolean;
-  delay: number;
-  closeDelay: number;
-  placement: Placement;
-  sideOffset: number;
-  collisionPadding: number;
-  disableHoverablePopover: boolean;
-  trackCursorAxis?: 'x';
-  _open: boolean;
-  _transitionStatus: 'initial' | 'open' | 'close' | 'unmounted';
-  _collisionOffset: { x: number };
-  _pointerPosition: { x: number };
-  _setTriggerElement: (element: HTMLElement | null) => void;
-  _triggerElement?: HTMLElement | null;
-  _setPopoverElement: (element: HTMLElement | null) => void;
-  _popoverElement?: HTMLElement | null;
-  _setCollisionBoundaryElement: (element: HTMLElement | null) => void;
-  _collisionBoundaryElement?: HTMLElement | null;
-  _popoverStyle?: Partial<CSSStyleDeclaration>;
-  _minLeft?: number;
-  _maxLeft?: number;
-}
-
-export class Popover {
-  #hoverTimeout: ReturnType<typeof setTimeout> | null = null;
-  #resizeObserver: ResizeObserver | null = null;
-  #state = map<PopoverState>({
-    openOnHover: false,
-    delay: 0,
-    closeDelay: 0,
-    placement: 'top',
-    sideOffset: 5,
-    collisionPadding: 0,
-    disableHoverablePopover: false,
-    _open: false,
-    _transitionStatus: 'initial',
-    _collisionOffset: { x: 0 },
-    _pointerPosition: { x: 0 },
-    _setTriggerElement: this._setTriggerElement.bind(this),
-    _setPopoverElement: this._setPopoverElement.bind(this),
-    _setCollisionBoundaryElement: this._setCollisionBoundaryElement.bind(this),
-  });
-
-  _setPopoverElement(element: HTMLElement | null): void {
-    if (!element) {
-      this.#resizeObserver?.disconnect();
-      this.#clearHoverTimeout();
-      this.#popoverElement?.removeEventListener('pointerenter', this);
-      this.#popoverElement?.removeEventListener('focusout', this);
-      getDocument(this.#popoverElement).documentElement.removeEventListener('pointermove', this);
-      return;
-    }
-
-    this.setState({ _popoverElement: element });
-
-    this.#resizeObserver = new ResizeObserver(() => this.#checkCollision());
-    this.#resizeObserver.observe(element);
-
-    element.addEventListener('pointerenter', this);
-    element.addEventListener('focusout', this);
-  }
-
-  _setTriggerElement(element: HTMLElement | null): void {
-    if (!element) {
-      this.#triggerElement?.removeEventListener('pointerenter', this);
-      this.#triggerElement?.removeEventListener('pointerleave', this);
-      this.#triggerElement?.removeEventListener('focusin', this);
-      this.#triggerElement?.removeEventListener('focusout', this);
-      return;
-    }
-
-    this.setState({ _triggerElement: element });
-
-    if (globalThis.matchMedia?.('(hover: hover)')?.matches) {
-      element.addEventListener('pointerenter', this);
-      element.addEventListener('pointerleave', this);
-    }
-
-    element.addEventListener('focusin', this);
-    element.addEventListener('focusout', this);
-  }
-
-  _setCollisionBoundaryElement(element: HTMLElement | null): void {
-    this.setState({ _collisionBoundaryElement: element });
-  }
-
-  subscribe(callback: (state: PopoverState) => void): () => void {
-    return this.#state.subscribe(callback);
-  }
-
-  setState(state: Partial<PopoverState>): void {
-    if (shallowEqual(state, this.#state.get())) return;
-    this.#state.set({ ...this.#state.get(), ...state });
-  }
-
-  getState(): PopoverState {
-    const baseState = this.#state.get();
-    const {
-      placement,
-      sideOffset,
-      trackCursorAxis,
-      _popoverElement,
-      _pointerPosition,
-      _collisionOffset,
-      _minLeft,
-      _maxLeft,
-    } = baseState;
-    const [side, alignment] = placement.split('-');
-
-    const _popoverStyle: Partial<CSSStyleDeclaration> = {
-      ...(_popoverElement ? { positionAnchor: `--${_popoverElement.id}` } : {}),
-      top: `calc(anchor(${side}) - ${sideOffset}px)`,
-    };
-
-    if (trackCursorAxis === 'x') {
-      _popoverStyle.translate = `-50% -100%`;
-      _popoverStyle.left = `clamp(${_minLeft}px, ${_pointerPosition.x}px, ${_maxLeft}px)`;
-    } else {
-      _popoverStyle.translate = `${_collisionOffset.x}px -100%`;
-      _popoverStyle.justifySelf
-        = alignment === 'start' ? 'anchor-start' : alignment === 'end' ? 'anchor-end' : 'anchor-center';
-    }
-
-    return {
-      ...baseState,
-      _popoverStyle,
-    };
-  }
-
-  handleEvent(event: Event): void {
-    switch (event.type) {
-      case 'pointerenter':
-        this.#handlePointerEnter(event as PointerEvent);
-        break;
-      case 'pointerleave':
-        this.#handlePointerLeave(event as PointerEvent);
-        break;
-      case 'pointermove':
-        this.#handlePointerMove(event as PointerEvent);
-        break;
-      case 'focusin':
-        this.#handleFocusIn(event as FocusEvent);
-        break;
-      case 'focusout':
-        this.#handleFocusOut(event as FocusEvent);
-        break;
-      default:
-        break;
-    }
-  }
-
-  get #popoverElement(): HTMLElement | undefined | null {
-    return this.getState()._popoverElement;
-  }
-
-  get #triggerElement(): HTMLElement | undefined | null {
-    return this.getState()._triggerElement;
-  }
-
-  get #open(): boolean {
-    return this.getState()._open;
-  }
-
-  #setOpen(open: boolean): void {
-    if (this.#open === open) return;
-
-    this.setState({ _open: open });
-
-    if (open) {
-      this.setState({ _transitionStatus: 'initial' });
-
-      this.#popoverElement?.showPopover();
-
-      requestAnimationFrame(() => {
-        this.setState({ _transitionStatus: 'open' });
-
-        // This requestAnimationFrame is required for React because it renders async.
-        requestAnimationFrame(() => this.#checkCollision());
-      });
-    } else {
-      this.setState({ _transitionStatus: 'close' });
-
-      // This requestAnimationFrame is required for React because the data- attributes are not updated immediately.
-      requestAnimationFrame(() => {
-        const transitions = this.#popoverElement?.getAnimations().filter(anim => anim instanceof CSSTransition);
-        if (transitions && transitions.length > 0) {
-          Promise.all(transitions.map(t => t.finished))
-            .then(() => this.#popoverElement?.hidePopover())
-            .catch(() => this.#popoverElement?.hidePopover());
-        } else {
-          this.#popoverElement?.hidePopover();
-        }
-      });
-    }
-  }
-
-  #clearHoverTimeout(): void {
-    if (this.#hoverTimeout) {
-      globalThis.clearTimeout(this.#hoverTimeout);
-      this.#hoverTimeout = null;
-    }
-  }
-
-  #handlePointerEnter(event: PointerEvent): void {
-    const { openOnHover, trackCursorAxis } = this.getState();
-    if (!openOnHover) return;
-
-    this.#clearHoverTimeout();
-
-    if (event.currentTarget === this.#popoverElement || trackCursorAxis === 'x') {
-      this.#addPointerMoveListener();
-    }
-
-    if (this.getState()._open) {
-      return;
-    }
-
-    this.#hoverTimeout = globalThis.setTimeout(() => {
-      this.#setOpen(true);
-    }, this.getState().delay);
-  }
-
-  #handlePointerLeave(_event: PointerEvent): void {
-    const { disableHoverablePopover, closeDelay } = this.getState();
-
-    if (!disableHoverablePopover) {
-      this.#addPointerMoveListener();
-    }
-
-    if (disableHoverablePopover) {
-      this.#clearHoverTimeout();
-      this.#hoverTimeout = globalThis.setTimeout(() => {
-        this.#setOpen(false);
-      }, closeDelay);
-    }
-  }
-
-  #addPointerMoveListener(): void {
-    if (!globalThis.matchMedia?.('(hover: hover)')?.matches || !this.#popoverElement) return;
-
-    getDocument(this.#popoverElement).documentElement.addEventListener('pointermove', this);
-  }
-
-  #handlePointerMove(event: PointerEvent): void {
-    const { disableHoverablePopover, openOnHover, trackCursorAxis } = this.getState();
-    if (!openOnHover || !this.#triggerElement || !this.#popoverElement) return;
-
-    if (trackCursorAxis === 'x') {
-      this.setState({ _pointerPosition: { x: event.clientX } });
-
-      // This requestAnimationFrame is required for React because it renders async.
-      requestAnimationFrame(() => this.#checkCollision());
-    }
-
-    if (disableHoverablePopover) {
-      return;
-    }
-
-    const close = safePolygon({ blockPointerEvents: true })({
-      placement: this.getState().placement,
-      elements: {
-        domReference: this.#triggerElement,
-        floating: this.#popoverElement,
-      },
-      x: event.clientX,
-      y: event.clientY,
-      onClose: () => {
-        getDocument(this.#popoverElement).documentElement.removeEventListener('pointermove', this);
-
-        this.#clearHoverTimeout();
-        this.#hoverTimeout = globalThis.setTimeout(() => {
-          this.#setOpen(false);
-        }, this.getState().closeDelay);
-      },
-    });
-    close(event);
-  }
-
-  #handleFocusIn(_event: FocusEvent): void {
-    this.#setOpen(true);
-  }
-
-  #handleFocusOut(event: FocusEvent): void {
-    const relatedTarget = event.relatedTarget as HTMLElement;
-    if (relatedTarget && contains(this.#popoverElement, relatedTarget)) return;
-
-    this.#setOpen(false);
-  }
-
-  #checkCollision(): void {
-    const { _collisionBoundaryElement, _open, _popoverElement, collisionPadding } = this.getState();
-
-    if (!_open || !_collisionBoundaryElement || !_popoverElement) return;
-
-    const popoverRect = getUntransformedBoundingRect(_popoverElement);
-    const boundsRect = getUntransformedBoundingRect(_collisionBoundaryElement);
-    const translatedPopoverRect = addTranslateToBoundingRect(popoverRect, _popoverElement);
-
-    const _minLeft = boundsRect.left + translatedPopoverRect.width / 2 + collisionPadding;
-    const _maxLeft = boundsRect.right - translatedPopoverRect.width / 2 - collisionPadding;
-    const _collisionOffset = getInBoundsAdjustments(popoverRect, boundsRect, collisionPadding);
-
-    this.setState({ _minLeft, _maxLeft, _collisionOffset });
-  }
-}
diff --git a/packages/__tech-preview__/core/src/components/slider.ts b/packages/__tech-preview__/core/src/components/slider.ts
deleted file mode 100644
index 63f5d822..00000000
--- a/packages/__tech-preview__/core/src/components/slider.ts
+++ /dev/null
@@ -1,176 +0,0 @@
-import { getPointProgressOnLine, shallowEqual } from '@videojs/utils-preview';
-import { map } from 'nanostores';
-
-export interface SliderState {
-  _setRootElement: (element: HTMLElement | null) => void;
-  _rootElement: HTMLElement | null;
-  _setTrackElement: (element: HTMLElement | null) => void;
-  _trackElement: HTMLElement | null;
-  _pointerRatio: number;
-  _hovering: boolean;
-  _dragging: boolean;
-  _keying: boolean;
-  _fillWidth: number;
-  _pointerWidth: number;
-  _stepSize: number;
-}
-
-export class Slider {
-  #abortController: AbortController | null = null;
-  #state = map<SliderState>({
-    _setRootElement: this._setRootElement.bind(this),
-    _rootElement: null,
-    _setTrackElement: (element: HTMLElement | null) => this.setState({ _trackElement: element }),
-    _trackElement: null,
-    _pointerRatio: 0,
-    _hovering: false,
-    _dragging: false,
-    _keying: false,
-    _fillWidth: 0,
-    _pointerWidth: 0,
-    _stepSize: 0.01,
-  });
-
-  _setRootElement(element: HTMLElement | null): void {
-    this.setState({ _rootElement: element });
-
-    if (!element) {
-      this.#abortController?.abort();
-      this.#abortController = null;
-      return;
-    }
-
-    this.#abortController = new AbortController();
-    const { signal } = this.#abortController;
-
-    element.addEventListener('pointerdown', this, { signal });
-    element.addEventListener('pointermove', this, { signal });
-    element.addEventListener('pointerup', this, { signal });
-    element.addEventListener('pointerenter', this, { signal });
-    element.addEventListener('pointerleave', this, { signal });
-    element.addEventListener('keydown', this, { signal });
-    element.addEventListener('keyup', this, { signal });
-  }
-
-  subscribe(callback: (state: SliderState) => void): () => void {
-    return this.#state.subscribe(callback);
-  }
-
-  setState(state: Partial<SliderState>): void {
-    if (shallowEqual(state, this.#state.get())) return;
-    this.#state.set({ ...this.#state.get(), ...state });
-  }
-
-  getState(): SliderState {
-    const state = this.#state.get();
-
-    let _pointerWidth = 0;
-    if (state._hovering) {
-      _pointerWidth = state._pointerRatio;
-    }
-
-    return { ...state, _pointerWidth };
-  }
-
-  handleEvent(event: Event): void {
-    const { type } = event;
-    switch (type) {
-      case 'pointerdown':
-        this.#handlePointerDown(event as PointerEvent);
-        break;
-      case 'pointermove':
-        this.#handlePointerMove(event as PointerEvent);
-        break;
-      case 'pointerup':
-        this.#handlePointerUp(event as PointerEvent);
-        break;
-      case 'pointerenter':
-        this.#handlePointerEnter(event as PointerEvent);
-        break;
-      case 'pointerleave':
-        this.#handlePointerLeave(event as PointerEvent);
-        break;
-      case 'keydown':
-        this.#handleKeyDown(event as KeyboardEvent);
-        break;
-      case 'keyup':
-        this.#handleKeyUp(event as KeyboardEvent);
-        break;
-    }
-  }
-
-  getPointerRatio(evt: PointerEvent): number {
-    const { _trackElement } = this.#state.get();
-    if (!_trackElement) return 0;
-
-    const rect = _trackElement.getBoundingClientRect();
-    return getPointProgressOnLine(
-      evt.clientX,
-      evt.clientY,
-      { x: rect.left, y: rect.bottom },
-      { x: rect.right, y: rect.top },
-    );
-  }
-
-  #handlePointerDown(event: PointerEvent) {
-    this.#state.get()._rootElement?.setPointerCapture(event.pointerId);
-    this.setState({ _pointerRatio: this.getPointerRatio(event), _dragging: true });
-  }
-
-  #handlePointerMove(event: PointerEvent) {
-    this.setState({ _pointerRatio: this.getPointerRatio(event) });
-  }
-
-  #handlePointerUp(event: PointerEvent) {
-    this.setState({ _pointerRatio: this.getPointerRatio(event), _dragging: false });
-    this.#state.get()._rootElement?.releasePointerCapture(event.pointerId);
-  }
-
-  #handlePointerEnter(_event: PointerEvent) {
-    this.setState({ _hovering: true });
-  }
-
-  #handlePointerLeave(_event: PointerEvent) {
-    this.setState({ _hovering: false });
-  }
-
-  #handleKeyDown(event: KeyboardEvent) {
-    const { key } = event;
-    const { _pointerRatio, _stepSize } = this.#state.get();
-
-    let newRatio = _pointerRatio;
-
-    switch (key) {
-      case 'ArrowLeft':
-      case 'ArrowDown':
-        event.preventDefault();
-        newRatio = Math.max(0, _pointerRatio - _stepSize);
-        break;
-      case 'ArrowRight':
-      case 'ArrowUp':
-        event.preventDefault();
-        newRatio = Math.min(1, _pointerRatio + _stepSize);
-        break;
-      case 'Home':
-        event.preventDefault();
-        newRatio = 0;
-        break;
-      case 'End':
-        event.preventDefault();
-        newRatio = 1;
-        break;
-      default:
-        return; // Don't update state for other keys
-    }
-
-    this.setState({ _pointerRatio: newRatio, _keying: true });
-  }
-
-  #handleKeyUp(_event: KeyboardEvent) {
-    this.setState({ _keying: false });
-  }
-
-  setStepSize(stepSize: number): void {
-    this.setState({ _stepSize: Math.max(0.001, Math.min(1, stepSize)) });
-  }
-}
diff --git a/packages/__tech-preview__/core/src/components/time-slider.ts b/packages/__tech-preview__/core/src/components/time-slider.ts
deleted file mode 100644
index 05e3e44c..00000000
--- a/packages/__tech-preview__/core/src/components/time-slider.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import type { SliderState } from './slider';
-
-import { formatTime } from '@videojs/utils-preview';
-import { Slider } from './slider';
-
-export interface TimeSliderState extends SliderState {
-  currentTime: number;
-  duration: number;
-  requestSeek: (time: number) => void;
-  requestPreview: (time: number) => void;
-  _currentTimeText: string;
-  _durationText: string;
-}
-
-export class TimeSlider extends Slider {
-  #seekingTime: number | null = null;
-  #oldCurrentTime: number | null = null;
-
-  getState(): TimeSliderState {
-    const state = super.getState() as TimeSliderState;
-
-    // When dragging or keying, use pointer position for immediate feedback;
-    // While seeking, use seeking time so it doesn't jump back to the current time;
-    // Otherwise, use current time;
-    let _fillWidth = 0;
-    if (state._dragging || state._keying) {
-      _fillWidth = state._pointerRatio * 100;
-    } else if (state.duration > 0) {
-      if (this.#seekingTime !== null && this.#oldCurrentTime === state.currentTime) {
-        _fillWidth = (this.#seekingTime / state.duration) * 100;
-      } else {
-        _fillWidth = (state.currentTime / state.duration) * 100;
-        this.#seekingTime = null;
-      }
-    }
-
-    this.#oldCurrentTime = state.currentTime;
-
-    const _currentTimeText = formatTime(state.currentTime);
-    const _durationText = formatTime(state.duration);
-
-    return { ...state, _fillWidth, _currentTimeText, _durationText };
-  }
-
-  setState(newState: Partial<TimeSliderState>): void {
-    const state = this.getState();
-    // When not dragging or keying, set pointer ratio to current time / duration.
-    if (!state._hovering && !state._dragging && !state._keying && newState.currentTime && newState.duration) {
-      super.setState({ ...newState, _pointerRatio: newState.currentTime / newState.duration });
-      return;
-    }
-    super.setState(newState);
-  }
-
-  handleEvent(event: Event): void {
-    const { type } = event;
-    switch (type) {
-      case 'pointerdown':
-        this.#handlePointerDown(event as PointerEvent);
-        break;
-      case 'pointermove':
-        this.#handlePointerMove(event as PointerEvent);
-        break;
-      case 'pointerup':
-        this.#handlePointerUp(event as PointerEvent);
-        break;
-      case 'keydown':
-        this.#handleKeyDown(event as KeyboardEvent);
-        break;
-      default:
-        super.handleEvent(event);
-        break;
-    }
-  }
-
-  #handlePointerDown(event: PointerEvent) {
-    super.handleEvent(event);
-
-    const { _pointerRatio, duration, requestSeek } = super.getState() as TimeSliderState;
-
-    this.#seekingTime = _pointerRatio * duration;
-    requestSeek(this.#seekingTime);
-  }
-
-  #handlePointerMove(event: PointerEvent) {
-    super.handleEvent(event);
-
-    const { _dragging, _pointerRatio, duration, requestSeek, requestPreview } = super.getState() as TimeSliderState;
-
-    const previewTime = _pointerRatio * duration;
-    requestPreview(previewTime);
-
-    if (_dragging) {
-      this.#seekingTime = previewTime;
-      requestSeek(this.#seekingTime);
-    }
-  }
-
-  #handlePointerUp(event: PointerEvent) {
-    const { _dragging, _pointerRatio, duration, requestSeek } = super.getState() as TimeSliderState;
-
-    if (_dragging) {
-      this.#seekingTime = _pointerRatio * duration;
-      requestSeek(this.#seekingTime);
-    }
-
-    super.handleEvent(event);
-  }
-
-  #handleKeyDown(event: KeyboardEvent) {
-    super.handleEvent(event);
-
-    const { _pointerRatio, duration, requestSeek } = super.getState() as TimeSliderState;
-
-    this.#seekingTime = _pointerRatio * duration;
-    requestSeek(this.#seekingTime);
-  }
-}
diff --git a/packages/__tech-preview__/core/src/components/tooltip.ts b/packages/__tech-preview__/core/src/components/tooltip.ts
deleted file mode 100644
index 9135c744..00000000
--- a/packages/__tech-preview__/core/src/components/tooltip.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { PopoverState } from './popover';
-import { Popover } from './popover';
-
-export interface TooltipState extends PopoverState {}
-
-export class Tooltip extends Popover {
-  constructor() {
-    super();
-    this.setState({
-      openOnHover: true,
-      disableHoverablePopover: true,
-    });
-  }
-}
diff --git a/packages/__tech-preview__/core/src/components/volume-slider.ts b/packages/__tech-preview__/core/src/components/volume-slider.ts
deleted file mode 100644
index e62307f7..00000000
--- a/packages/__tech-preview__/core/src/components/volume-slider.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import type { SliderState } from './slider';
-
-import { Slider } from './slider';
-
-export interface VolumeSliderState extends SliderState {
-  volume: number;
-  muted: boolean;
-  volumeLevel: string;
-  requestVolumeChange: (volume: number) => void;
-  _volumeText: string;
-}
-
-export class VolumeSlider extends Slider {
-  constructor() {
-    super();
-    this.setStepSize(0.1);
-  }
-
-  getState(): VolumeSliderState {
-    const state = super.getState() as VolumeSliderState;
-
-    // When dragging or keying, use pointer position for immediate feedback;
-    // Otherwise, use current volume;
-    let _fillWidth = 0;
-    if (state._dragging || state._keying) {
-      _fillWidth = state._pointerRatio * 100;
-    } else {
-      _fillWidth = state.muted ? 0 : (state.volume || 0) * 100;
-    }
-
-    const _volumeText = formatVolume(state.muted ? 0 : state.volume || 0);
-
-    return { ...state, _fillWidth, _volumeText };
-  }
-
-  setState(newState: Partial<VolumeSliderState>): void {
-    const state = this.getState();
-    // When not dragging or keying, set pointer ratio to current volume.
-    if (!state._dragging && !state._keying && newState.volume) {
-      super.setState({ ...newState, _pointerRatio: newState.volume });
-      return;
-    }
-    super.setState(newState);
-  }
-
-  handleEvent(event: Event): void {
-    const { type } = event;
-    switch (type) {
-      case 'pointerdown':
-        this.#handlePointerDown(event as PointerEvent);
-        break;
-      case 'pointermove':
-        this.#handlePointerMove(event as PointerEvent);
-        break;
-      case 'pointerup':
-        this.#handlePointerUp(event as PointerEvent);
-        break;
-      case 'keydown':
-        this.#handleKeyDown(event as KeyboardEvent);
-        break;
-      default:
-        super.handleEvent(event);
-        break;
-    }
-  }
-
-  #handlePointerDown(event: PointerEvent) {
-    super.handleEvent(event);
-
-    const { _pointerRatio, requestVolumeChange } = super.getState() as VolumeSliderState;
-    requestVolumeChange(_pointerRatio);
-  }
-
-  #handlePointerMove(event: PointerEvent) {
-    super.handleEvent(event);
-
-    const { _dragging, _pointerRatio, requestVolumeChange } = super.getState() as VolumeSliderState;
-
-    if (_dragging) {
-      requestVolumeChange(_pointerRatio);
-    }
-  }
-
-  #handlePointerUp(event: PointerEvent) {
-    const { _dragging, _pointerRatio, requestVolumeChange } = super.getState() as VolumeSliderState;
-
-    if (_dragging) {
-      requestVolumeChange(_pointerRatio);
-    }
-
-    super.handleEvent(event);
-  }
-
-  #handleKeyDown(event: KeyboardEvent) {
-    super.handleEvent(event);
-
-    const { _pointerRatio, requestVolumeChange } = super.getState() as VolumeSliderState;
-    requestVolumeChange(_pointerRatio);
-  }
-}
-
-function formatVolume(volume: number): string {
-  return `${Math.round(volume * 100)}%`;
-}
diff --git a/packages/__tech-preview__/core/src/index.ts b/packages/__tech-preview__/core/src/index.ts
deleted file mode 100644
index 2709088f..00000000
--- a/packages/__tech-preview__/core/src/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { Popover, type PopoverState } from './components/popover';
-export { TimeSlider, type TimeSliderState } from './components/time-slider';
-export { Tooltip, type TooltipState } from './components/tooltip';
-export { VolumeSlider, type VolumeSliderState } from './components/volume-slider';
diff --git a/packages/__tech-preview__/core/src/media/engine/hls-engine.ts b/packages/__tech-preview__/core/src/media/engine/hls-engine.ts
deleted file mode 100644
index 70d93f7f..00000000
--- a/packages/__tech-preview__/core/src/media/engine/hls-engine.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import Hls from 'hls.js';
-
-/** @TODO Move interface/type defs (CJP) */
-/** @TODO Narrow and/or parameterize EventTarget via generics/inference (CJP) */
-export interface PlaybackEngine extends EventTarget {
-  src: HTMLMediaElement['src'] | undefined;
-  // NOTE: Unlike other APIs, this *must* be an HTMLMediaElement based on internal and/or external API assumptions (CJP)
-  mediaElement: HTMLMediaElement | undefined;
-  /** @TODO Widen/extend and/or parameterize EventTarget via generics/inference (CJP) */
-  element: HTMLElement | undefined;
-  destroy: () => void;
-}
-
-export class HlsPlaybackEngine extends EventTarget {
-  constructor() {
-    super();
-  }
-
-  protected _hlsInstance: Hls | undefined;
-
-  get src(): string | undefined {
-    return this._hlsInstance?.url ?? undefined;
-  }
-
-  set src(src: string | undefined) {
-    if (this.src === src) return;
-
-    if (!this._hlsInstance) {
-      this._createHlsInstance();
-    }
-
-    if (!this.src && src) {
-      this._hlsInstance?.loadSource(src);
-    }
-  }
-
-  // NOTE: Some playback engines may not rely on an underlying HTMLMediaElement but still have
-  // an HTMLElement (e.g. HTMLCanvasElement, HTMLImageElement, etc.). This API provides a more
-  // generic interface for cases where we want more minimal assumptions (e.g. fullscreen behaviors for most playtforms but not iOS)
-  get element(): HTMLElement | undefined {
-    return this.mediaElement;
-  }
-
-  set element(val) {
-    if (this.element === val) return;
-    /** @TODO programmatic type checking? (CJP) */
-    this.mediaElement = val as HTMLMediaElement;
-  }
-
-  get mediaElement(): HTMLMediaElement | undefined {
-    return this._hlsInstance?.media ?? undefined;
-  }
-
-  set mediaElement(val) {
-    if (this.mediaElement === val) return;
-
-    if (!this._hlsInstance) {
-      this._createHlsInstance();
-    }
-
-    if (!this.mediaElement && val) {
-      this._hlsInstance?.attachMedia(val);
-    }
-  }
-
-  protected _createHlsInstance(): void {
-    this._hlsInstance = new Hls();
-  }
-
-  protected _destroyHlsInstance(): void {
-    this._hlsInstance?.destroy();
-    this._hlsInstance = undefined;
-  }
-
-  destroy(): void {
-    this._destroyHlsInstance();
-  }
-}
-
-export const createHlsPlaybackEngine = (): PlaybackEngine => new HlsPlaybackEngine();
diff --git a/packages/__tech-preview__/core/src/media/engine/index.ts b/packages/__tech-preview__/core/src/media/engine/index.ts
deleted file mode 100644
index a2bef9fa..00000000
--- a/packages/__tech-preview__/core/src/media/engine/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { PlaybackEngine as IBasePlaybackEngine } from './hls-engine';
-export { createHlsPlaybackEngine, HlsPlaybackEngine } from './hls-engine';
diff --git a/packages/__tech-preview__/core/src/media/index.ts b/packages/__tech-preview__/core/src/media/index.ts
deleted file mode 100644
index 7ae7feee..00000000
--- a/packages/__tech-preview__/core/src/media/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './engine';
-export type { AudibleMediaStateOwner, MediaStateOwner, PlayableMediaStateOwner } from './playable';
-export { createMediaPlaybackController, Events, MediaPlaybackController } from './playable';
diff --git a/packages/__tech-preview__/core/src/media/playable.ts b/packages/__tech-preview__/core/src/media/playable.ts
deleted file mode 100644
index 9bc3002b..00000000
--- a/packages/__tech-preview__/core/src/media/playable.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import type { PlaybackEngine } from '@/media/engine/hls-engine';
-import { createHlsPlaybackEngine } from '@/media/engine/hls-engine';
-
-/** @TODO Split out "playable" vs. "audible" vs. "temporal" and compose via factory (current mixin pattern or spreadable mixin pattern) (CJP) */
-export const Events = [
-  'volumechange',
-  'pause',
-  'play',
-  'playing',
-  'emptied',
-  'loadedmetadata',
-  'timeupdate',
-  'durationchange',
-] as const;
-
-export interface MediaStateOwner extends EventTarget, Pick<HTMLMediaElement, 'src'> {
-  mediaElement?: HTMLMediaElement | undefined;
-}
-
-export interface PlayableMediaStateOwner
-  extends EventTarget,
-  MediaStateOwner,
-  Pick<HTMLMediaElement, 'play' | 'pause' | 'paused'> {}
-
-export interface AudibleMediaStateOwner
-  extends EventTarget,
-  MediaStateOwner,
-  Pick<HTMLMediaElement, 'muted' | 'volume'> {}
-
-export interface TemporalMediaStateOwner
-  extends EventTarget,
-  MediaStateOwner,
-  Pick<HTMLMediaElement, 'duration' | 'currentTime'> {}
-
-export class MediaPlaybackController extends EventTarget implements MediaStateOwner, PlayableMediaStateOwner, AudibleMediaStateOwner {
-  protected _playbackEngine: PlaybackEngine;
-
-  constructor() {
-    super();
-    this._playbackEngine = createHlsPlaybackEngine();
-  }
-
-  get mediaElement(): HTMLMediaElement | undefined {
-    return this._playbackEngine.mediaElement;
-  }
-
-  set mediaElement(value) {
-    if (this.mediaElement === value) return;
-
-    if (this.mediaElement != null) {
-      Events.forEach((eventType) => {
-        this.mediaElement?.removeEventListener(eventType, this);
-      });
-    }
-
-    this._playbackEngine.mediaElement = value;
-
-    if (this.mediaElement) {
-      Events.forEach((eventType) => {
-        this.mediaElement?.addEventListener(eventType, this);
-      });
-    }
-  }
-
-  get paused(): boolean {
-    return this.mediaElement?.paused ?? false;
-  }
-
-  pause(): void {
-    /** @TODO implement deferred state etc. for cases where media has yet to be set */
-    if (!this.mediaElement) return;
-    return this.mediaElement.pause();
-  }
-
-  play(): Promise<void> {
-    /** @TODO implement deferred state etc. for cases where media has yet to be set */
-    if (!this.mediaElement) throw new Error('No media element is set');
-    return this.mediaElement.play();
-  }
-
-  get muted(): boolean {
-    return this.mediaElement?.muted ?? false;
-  }
-
-  set muted(value: boolean) {
-    if (value === this.muted) return;
-    /** @TODO implement deferred state etc. for cases where media has yet to be set */
-    if (!this.mediaElement) return;
-    this.mediaElement.muted = value;
-  }
-
-  get volume(): number {
-    return this.mediaElement?.volume ?? 0;
-  }
-
-  set volume(value: number) {
-    if (value === this.volume) return;
-    /** @TODO implement deferred state etc. for cases where media has yet to be set */
-    if (!this.mediaElement) return;
-    this.mediaElement.volume = value;
-  }
-
-  get duration(): number {
-    return this.mediaElement?.duration ?? 0;
-  }
-
-  get currentTime(): number {
-    return this.mediaElement?.currentTime ?? 0;
-  }
-
-  set currentTime(value: number) {
-    if (value === this.currentTime) return;
-    /** @TODO implement deferred state etc. for cases where media has yet to be set */
-    if (!this.mediaElement) return;
-    this.mediaElement.currentTime = value;
-  }
-
-  get src(): string {
-    return this._playbackEngine.src ?? '';
-  }
-
-  set src(value: string) {
-    this._playbackEngine.src = value;
-  }
-
-  handleEvent(event: Event): void {
-    if (event.target === this.mediaElement) {
-      const clonedEvent = new (event.constructor as (typeof globalThis)['Event'])(event.type, event);
-      this.dispatchEvent(clonedEvent);
-    }
-  }
-
-  destroy(): void {
-    this._playbackEngine.destroy();
-  }
-}
-
-export const createMediaPlaybackController = (): MediaPlaybackController => new MediaPlaybackController();
diff --git a/packages/__tech-preview__/core/src/store/definitions/current-time-display.ts b/packages/__tech-preview__/core/src/store/definitions/current-time-display.ts
deleted file mode 100644
index 9c478cad..00000000
--- a/packages/__tech-preview__/core/src/store/definitions/current-time-display.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export interface CurrentTimeDisplayState {
-  /** The current time value in seconds */
-  currentTime: number | undefined;
-  /** The total duration in seconds (for future functionality) */
-  duration: number | undefined;
-}
-
-export const currentTimeDisplayStateDefinition = {
-  keys: ['currentTime', 'duration'] as const,
-  stateTransform: (rawState: Record<string, any>): CurrentTimeDisplayState => {
-    const { currentTime, duration } = rawState;
-
-    return {
-      currentTime,
-      duration,
-    };
-  },
-  createRequestMethods: (_dispatch: (action: { type: string; detail?: any }) => void) => ({}),
-};
-
-export type CurrentTimeDisplayStateDefinition = typeof currentTimeDisplayStateDefinition;
-
-export type CurrentTimeDisplayComponentState = ReturnType<typeof currentTimeDisplayStateDefinition.stateTransform>;
-
-export type CurrentTimeDisplayRequestMethods = ReturnType<
-  typeof currentTimeDisplayStateDefinition.createRequestMethods
->;
diff --git a/packages/__tech-preview__/core/src/store/definitions/duration-display.ts b/packages/__tech-preview__/core/src/store/definitions/duration-display.ts
deleted file mode 100644
index a15b04d1..00000000
--- a/packages/__tech-preview__/core/src/store/definitions/duration-display.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-
-export interface DurationDisplayState {
-  /** The raw duration value in seconds */
-  duration: number | undefined;
-}
-
-
-export const durationDisplayStateDefinition = {
-  keys: ['duration'] as const,
-  stateTransform: (rawState: Record<string, any>): DurationDisplayState => {
-    const { duration } = rawState;
-
-    return {
-      duration,
-    };
-  },
-  createRequestMethods: (_dispatch: (action: { type: string; detail?: any }) => void) => ({}),
-};
-
-export type DurationDisplayStateDefinition = typeof durationDisplayStateDefinition;
-
-export type DurationDisplayComponentState = ReturnType<typeof durationDisplayStateDefinition.stateTransform>;
-
-export type DurationDisplayRequestMethods = ReturnType<typeof durationDisplayStateDefinition.createRequestMethods>;
diff --git a/packages/__tech-preview__/core/src/store/definitions/fullscreen-button.ts b/packages/__tech-preview__/core/src/store/definitions/fullscreen-button.ts
deleted file mode 100644
index cdd7a8f7..00000000
--- a/packages/__tech-preview__/core/src/store/definitions/fullscreen-button.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export interface FullscreenButtonState {
-  fullscreen: boolean;
-}
-
-export interface FullscreenButtonMethods {
-  requestEnterFullscreen: () => void;
-  requestExitFullscreen: () => void;
-}
-
-export interface FullscreenButtonStateDefinition {
-  keys: string[];
-  stateTransform: (rawState: any) => FullscreenButtonState;
-  createRequestMethods: (dispatch: (action: { type: string; detail?: any }) => void) => FullscreenButtonMethods;
-}
-
-export const fullscreenButtonStateDefinition: FullscreenButtonStateDefinition = {
-  keys: ['fullscreen'],
-  stateTransform: (rawState: any): FullscreenButtonState => ({
-    fullscreen: rawState.fullscreen ?? false,
-  }),
-  createRequestMethods: (dispatch): FullscreenButtonMethods => ({
-    requestEnterFullscreen: () => dispatch({ type: 'fullscreenrequest', detail: true }),
-    requestExitFullscreen: () => dispatch({ type: 'fullscreenrequest', detail: false }),
-  }),
-};
diff --git a/packages/__tech-preview__/core/src/store/definitions/mute-button.ts b/packages/__tech-preview__/core/src/store/definitions/mute-button.ts
deleted file mode 100644
index 5aa111ff..00000000
--- a/packages/__tech-preview__/core/src/store/definitions/mute-button.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-export interface MuteButtonState {
-  muted: boolean;
-  volumeLevel: string;
-}
-
-export interface MuteButtonMethods {
-  requestMute: () => void;
-  requestUnmute: () => void;
-}
-
-export interface MuteButtonStateDefinition {
-  keys: string[];
-  stateTransform: (rawState: any) => MuteButtonState;
-  createRequestMethods: (dispatch: (action: { type: string }) => void) => MuteButtonMethods;
-}
-
-export const muteButtonStateDefinition: MuteButtonStateDefinition = {
-  keys: ['muted', 'volumeLevel'],
-
-  stateTransform: (rawState: any): MuteButtonState => ({
-    muted: rawState.muted ?? false,
-    volumeLevel: rawState.volumeLevel ?? 'off',
-  }),
-
-  createRequestMethods: (dispatch): MuteButtonMethods => ({
-    requestMute: () => dispatch({ type: 'muterequest' }),
-    requestUnmute: () => dispatch({ type: 'unmuterequest' }),
-  }),
-};
diff --git a/packages/__tech-preview__/core/src/store/definitions/play-button.ts b/packages/__tech-preview__/core/src/store/definitions/play-button.ts
deleted file mode 100644
index 69decf63..00000000
--- a/packages/__tech-preview__/core/src/store/definitions/play-button.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export interface PlayButtonState {
-  paused: boolean;
-}
-
-export interface PlayButtonMethods {
-  requestPlay: () => void;
-  requestPause: () => void;
-}
-
-export interface PlayButtonStateDefinition {
-  keys: string[];
-  stateTransform: (rawState: any) => PlayButtonState;
-  createRequestMethods: (dispatch: (action: { type: string; detail?: unknown }) => void) => PlayButtonMethods;
-}
-
-export const playButtonStateDefinition: PlayButtonStateDefinition = {
-  keys: ['paused'],
-
-  stateTransform: (rawState: any): PlayButtonState => ({
-    paused: rawState.paused ?? true,
-  }),
-
-  createRequestMethods: (dispatch): PlayButtonMethods => ({
-    requestPlay: () => dispatch({ type: 'playrequest' }),
-    requestPause: () => dispatch({ type: 'pauserequest' }),
-  }),
-};
diff --git a/packages/__tech-preview__/core/src/store/definitions/preview-time-display.ts b/packages/__tech-preview__/core/src/store/definitions/preview-time-display.ts
deleted file mode 100644
index b85e889c..00000000
--- a/packages/__tech-preview__/core/src/store/definitions/preview-time-display.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export interface PreviewTimeDisplayState {
-  /** The preview time value in seconds */
-  previewTime: number | undefined;
-}
-
-export interface PreviewTimeDisplayStateDefinition {
-  keys: (keyof PreviewTimeDisplayState)[];
-  stateTransform: (rawState: any) => PreviewTimeDisplayState;
-}
-
-export const previewTimeDisplayStateDefinition: PreviewTimeDisplayStateDefinition = {
-  keys: ['previewTime'],
-  stateTransform: (rawState: any) => ({
-    previewTime: rawState.previewTime ?? 0,
-  }),
-};
diff --git a/packages/__tech-preview__/core/src/store/definitions/time-slider.ts b/packages/__tech-preview__/core/src/store/definitions/time-slider.ts
deleted file mode 100644
index d920cead..00000000
--- a/packages/__tech-preview__/core/src/store/definitions/time-slider.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-export interface TimeSliderState {
-  currentTime: number;
-  duration: number;
-  previewTime: number;
-}
-
-export interface TimeSliderMethods {
-  requestSeek: (time: number) => void;
-  requestPreview: (time: number) => void;
-}
-
-export interface TimeSliderStateDefinition {
-  keys: string[];
-  stateTransform: (rawState: any) => TimeSliderState;
-  createRequestMethods: (dispatch: (action: { type: string; detail?: any }) => void) => TimeSliderMethods;
-}
-
-export const timeSliderStateDefinition: TimeSliderStateDefinition = {
-  keys: ['currentTime', 'duration', 'previewTime'],
-  stateTransform: (rawState: any) => ({
-    currentTime: rawState.currentTime ?? 0,
-    duration: rawState.duration ?? 0,
-    previewTime: rawState.previewTime ?? 0,
-  }),
-  createRequestMethods: dispatch => ({
-    requestSeek: (time: number) => {
-      dispatch({ type: 'seekrequest', detail: time });
-    },
-    requestPreview: (time: number) => {
-      dispatch({ type: 'previewrequest', detail: time });
-    },
-  }),
-};
diff --git a/packages/__tech-preview__/core/src/store/definitions/volume-slider.ts b/packages/__tech-preview__/core/src/store/definitions/volume-slider.ts
deleted file mode 100644
index e5ed0390..00000000
--- a/packages/__tech-preview__/core/src/store/definitions/volume-slider.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-export interface VolumeSliderState {
-  volume: number;
-  muted: boolean;
-  volumeLevel: 'high' | 'medium' | 'low' | 'off';
-}
-
-export interface VolumeSliderMethods {
-  requestVolumeChange: (volume: number) => void;
-}
-
-export interface VolumeSliderStateDefinition {
-  keys: string[];
-  stateTransform: (rawState: any) => VolumeSliderState;
-  createRequestMethods: (dispatch: (action: { type: string; detail?: any }) => void) => VolumeSliderMethods;
-}
-
-export const volumeSliderStateDefinition: VolumeSliderStateDefinition = {
-  keys: ['volume', 'muted', 'volumeLevel'],
-  stateTransform: (rawState: any) => ({
-    volume: rawState.volume ?? 1,
-    muted: rawState.muted ?? false,
-    volumeLevel: rawState.volumeLevel ?? 'high',
-  }),
-  createRequestMethods: dispatch => ({
-    /**
-     * @TODO Unmuting is owned by the "request-map" in media-chrome.
-     * The closest equivalent to that is the "actions" in the current architecture.
-     * Should unmuting live here (even if "here" gets promoted to the state model) or "actions" or state setter?
-     * Currently this is solved in the state setter (as is the corresponding unmute behavior). See mediators/audible for details. (CJP)
-     */
-    requestVolumeChange: (volume: number) => {
-      // if (volume > 0) {
-      //   dispatch({ type: 'unmuterequest' });
-      // }
-      dispatch({ type: 'volumerequest', detail: volume });
-    },
-  }),
-};
diff --git a/packages/__tech-preview__/core/src/store/factory.ts b/packages/__tech-preview__/core/src/store/factory.ts
deleted file mode 100644
index 2d1c7752..00000000
--- a/packages/__tech-preview__/core/src/store/factory.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-import type { StateOwners } from './types';
-
-import { getKey, map, subscribeKeys } from 'nanostores';
-
-export interface EventOrAction<D = undefined> {
-  type: string;
-  detail?: D;
-  target?: EventTarget;
-}
-
-export type FacadeGetter<T, D = T> = (stateOwners: StateOwners, event?: EventOrAction<D>) => T;
-
-export type FacadeSetter<T> = (value: T, stateOwners: StateOwners) => void;
-
-export type StateOwnerUpdateHandler<T> = (
-  handler: (value?: T) => void,
-  stateOwners: StateOwners
-) => (() => void) | void;
-
-export interface ReadonlyFacadeProp<T, D = T> {
-  get: FacadeGetter<T, D>;
-  stateOwnersUpdateHandlers?: StateOwnerUpdateHandler<T>[];
-}
-
-export type FacadeProp<T, S = T, D = T> = ReadonlyFacadeProp<T, D> & {
-  set: FacadeSetter<S>;
-  /** @TODO We probably need to refactor this for more complex cases where we can't simply translate to a setter */
-  actions: {
-    [k: string]: (val: { type: string; detail?: unknown }) => ReturnType<FacadeGetter<T, D>>;
-  };
-};
-
-export interface StateMediator {
-  paused: FacadeProp<HTMLMediaElement['paused']>;
-  muted: FacadeProp<HTMLMediaElement['muted']>;
-  volume: FacadeProp<HTMLMediaElement['volume']>;
-  volumeLevel: ReadonlyFacadeProp<'high' | 'medium' | 'low' | 'off'>;
-  currentTime: FacadeProp<HTMLMediaElement['currentTime']>;
-  duration: ReadonlyFacadeProp<HTMLMediaElement['duration']>;
-  seekable: ReadonlyFacadeProp<[number, number] | undefined>;
-  previewTime: FacadeProp<number>;
-  fullscreen: FacadeProp<boolean>;
-}
-
-export interface MediaStore {
-  dispatch: (action: { type: string; detail?: unknown }) => void;
-  getState: () => any;
-  getKeys: (keys: string[]) => Record<string, any>;
-  subscribeKeys: (keys: string[], callback: (state: any) => void) => void;
-  subscribe: (callback: (state: any) => void) => void;
-}
-
-export function createMediaStore({
-  // media,
-  stateMediator,
-}: {
-  media?: any;
-  container?: any;
-  stateMediator: Partial<StateMediator>;
-}): MediaStore {
-  const stateOwners: StateOwners = {};
-  const store = map<any>({});
-  const stateUpdateHandlerCleanups: Record<string, (() => void)[]> = {};
-  const keys = Object.keys(stateMediator);
-
-  function updateStateOwners(nextStateOwners: any) {
-    // Check if any state owner has changed
-    const hasChanges = Object.entries(nextStateOwners).some(
-      ([key, value]) => stateOwners[key as keyof StateOwners] !== value,
-    );
-
-    if (!hasChanges) {
-      return;
-    }
-
-    // Clean up existing handlers
-    Object.entries(stateUpdateHandlerCleanups).forEach(([stateName, cleanups]) => {
-      cleanups.forEach(cleanup => cleanup?.());
-      stateUpdateHandlerCleanups[stateName] = [];
-    });
-
-    Object.assign(stateOwners, nextStateOwners);
-    store.set(getInitialState(stateMediator, stateOwners));
-
-    // Set up new handlers
-    Object.entries(stateMediator).forEach(([stateName, stateObject]) => {
-      const { get, stateOwnersUpdateHandlers = [] } = stateObject;
-
-      if (!stateUpdateHandlerCleanups[stateName]) {
-        stateUpdateHandlerCleanups[stateName] = [];
-      }
-
-      // Create handler that updates the store
-      const updateHandler = (value?: any) => {
-        const nextValue = value !== undefined ? value : get(stateOwners);
-        store.setKey(stateName, nextValue);
-      };
-
-      // Execute each stateOwnersUpdateHandler
-      stateOwnersUpdateHandlers.forEach((setupHandler) => {
-        const cleanup = setupHandler(updateHandler, stateOwners);
-        if (typeof cleanup === 'function') {
-          stateUpdateHandlerCleanups[stateName]?.push(cleanup);
-        }
-      });
-    });
-  }
-
-  return {
-    dispatch(action: Pick<CustomEvent<any>, 'type' | 'detail'>): void {
-      const { type, detail } = action;
-
-      if (type === 'mediastateownerchangerequest') {
-        updateStateOwners({ media: detail });
-      } else if (type === 'containerstateownerchangerequest') {
-        updateStateOwners({ container: detail });
-      } else {
-        Object.entries(stateMediator).forEach(([stateName, stateObject]) => {
-          const { set, actions } = stateObject as FacadeProp<any, any, any>;
-
-          if (actions?.[type]) {
-            const actionFn = actions[type];
-            const actionValue = actionFn(action);
-            if (set) {
-              (set as FacadeSetter<any>)(actionValue, stateOwners);
-            } else {
-              // If there is no setter, store the action value in the store.
-              // Might need revisiting.
-              store.setKey(stateName, actionValue);
-            }
-          }
-        });
-      }
-    },
-
-    getState(): any {
-      return store.get();
-    },
-
-    getKeys(keys: string[]): Record<string, any> {
-      return keys.reduce(
-        (acc, k) => {
-          acc[k] = getKey(store, k);
-          return acc;
-        },
-        {} as { [k: string]: any },
-      );
-    },
-
-    subscribeKeys(keys: string[], callback: (state: any) => void): void {
-      subscribeKeys(store, keys, callback);
-    },
-
-    // NOTE: In the POC architecture using nano-stores, subscribe is simply subscribeKeys across all keys. (CJP)
-    subscribe(callback: (state: any) => void): void {
-      subscribeKeys(store, keys, callback);
-    },
-  };
-}
-
-function getInitialState(stateMediator: Partial<StateMediator>, stateOwners: any) {
-  const initialState: any = {};
-  for (const [stateName, { get }] of Object.entries(stateMediator)) {
-    if (!get) continue;
-    initialState[stateName] = get(stateOwners);
-  }
-  return initialState;
-}
diff --git a/packages/__tech-preview__/core/src/store/index.ts b/packages/__tech-preview__/core/src/store/index.ts
deleted file mode 100644
index 64f86157..00000000
--- a/packages/__tech-preview__/core/src/store/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export * from './definitions/current-time-display';
-export * from './definitions/duration-display';
-export * from './definitions/fullscreen-button';
-export * from './definitions/mute-button';
-export * from './definitions/play-button';
-export * from './definitions/preview-time-display';
-export * from './definitions/time-slider';
-export * from './definitions/volume-slider';
-
-export * from './factory';
-export { createMediaStore } from './media-store';
-
-export * from './mediators/audible';
-export * from './mediators/playable';
-export * from './mediators/temporal';
diff --git a/packages/__tech-preview__/core/src/store/media-store.ts b/packages/__tech-preview__/core/src/store/media-store.ts
deleted file mode 100644
index 98769a61..00000000
--- a/packages/__tech-preview__/core/src/store/media-store.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { MediaStore } from './factory';
-
-import { createMediaStore as factory } from './factory';
-import { audible } from './mediators/audible';
-import { fullscreenable } from './mediators/fullscreenable';
-import { playable } from './mediators/playable';
-import { preview } from './mediators/preview';
-import { temporal } from './mediators/temporal';
-
-// Example of default media store with default state mediator definitions. (CJP)
-// NOTE: We can also change the API to take an array of stateMediators (or either/both) (CJP)
-const stateMediator = { ...playable, ...audible, ...temporal, ...fullscreenable, ...preview };
-
-type Params = Partial<Parameters<typeof factory>[0]>;
-
-export function createMediaStore(params: Params = {}): MediaStore {
-  return factory({
-    stateMediator: stateMediator as any,
-    ...params,
-  });
-}
diff --git a/packages/__tech-preview__/core/src/store/mediators/audible.ts b/packages/__tech-preview__/core/src/store/mediators/audible.ts
deleted file mode 100644
index ff6fcb47..00000000
--- a/packages/__tech-preview__/core/src/store/mediators/audible.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import type { StateOwners } from '../types';
-
-export const audible = {
-  muted: {
-    get(stateOwners: StateOwners): boolean {
-      const { media } = stateOwners;
-      return media?.muted ?? false;
-    },
-    set(value: boolean, stateOwners: StateOwners): void {
-      const { media } = stateOwners;
-      if (!media) return;
-      media.muted = value;
-      if (!value && !media.volume) {
-        media.volume = 0.25;
-      }
-    },
-    stateOwnersUpdateHandlers: [
-      (handler: (value?: boolean) => void, stateOwners: StateOwners): (() => void) | void => {
-        const { media } = stateOwners;
-        if (!media) return;
-
-        const eventHandler = () => handler();
-        media.addEventListener('volumechange', eventHandler);
-
-        return () => media.removeEventListener('volumechange', eventHandler);
-      },
-    ] as const,
-    actions: {
-      /** @TODO Refactor me to play more nicely with side effects that don't/can't correlate with set() API or aren't simple 1:1 with getter vs. setter (CJP) */
-      muterequest: () => true,
-      unmuterequest: () => false,
-    },
-  },
-  volume: {
-    get(stateOwners: StateOwners): number {
-      const { media } = stateOwners;
-      return media?.volume ?? 1.0;
-    },
-    set(value: number, stateOwners: StateOwners): void {
-      const { media } = stateOwners;
-      if (!media) return;
-      const numericValue = +value;
-      if (!Number.isFinite(numericValue)) return;
-      media.volume = numericValue;
-      if (numericValue > 0) {
-        media.muted = false;
-      }
-    },
-    stateOwnersUpdateHandlers: [
-      (handler: (value?: number) => void, stateOwners: StateOwners): (() => void) | void => {
-        const { media } = stateOwners;
-        if (!media) return;
-
-        const eventHandler = () => handler();
-        media.addEventListener('volumechange', eventHandler);
-
-        return () => media.removeEventListener('volumechange', eventHandler);
-      },
-    ] as const,
-    actions: {
-      /** @TODO Refactor me to play more nicely with side effects that don't/can't correlate with set() API (CJP) */
-      volumerequest: ({ detail }: Pick<CustomEvent<any>, 'detail'> = { detail: 0 }): number => +detail,
-    },
-  },
-  // NOTE: This could be (re)implemented as "derived state" in some manner (e.g. selectors but also other patterns/conventions) if preferred. (CJP)
-  volumeLevel: {
-    get(stateOwners: StateOwners): 'high' | 'medium' | 'low' | 'off' {
-      const { media } = stateOwners;
-      if (typeof media?.volume == 'undefined') return 'high';
-      if (media.muted || media.volume === 0) return 'off';
-      if (media.volume < 0.5) return 'low';
-      if (media.volume < 0.75) return 'medium';
-      return 'high';
-    },
-    stateOwnersUpdateHandlers: [
-      (handler: (value?: 'high' | 'medium' | 'low' | 'off') => void, stateOwners: any): void | (() => void) => {
-        const { media } = stateOwners;
-        if (!media) return;
-
-        const eventHandler = () => handler();
-        media.addEventListener('volumechange', eventHandler);
-
-        return () => media.removeEventListener('volumechange', eventHandler);
-      },
-    ] as const,
-  },
-};
diff --git a/packages/__tech-preview__/core/src/store/mediators/fullscreenable.ts b/packages/__tech-preview__/core/src/store/mediators/fullscreenable.ts
deleted file mode 100644
index c9893057..00000000
--- a/packages/__tech-preview__/core/src/store/mediators/fullscreenable.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-import { containsComposedNode } from '@videojs/utils-preview/dom';
-
-/** @TODO This is implemented for web/browser only! We will need an alternative state mediator model for e.g. React Native. (CJP) */
-export const fullscreenable = {
-  fullscreen: {
-    get(stateOwners: any): boolean {
-      const { container } = stateOwners;
-      if (!container || !globalThis?.document) return false;
-
-      const doc = globalThis.document;
-      const currentFullscreenElement
-        = doc.fullscreenElement
-          || (doc as any).webkitFullscreenElement
-          || (doc as any).mozFullScreenElement
-          || (doc as any).msFullscreenElement;
-
-      if (!currentFullscreenElement) return false;
-
-      // If document.fullscreenElement is the container, we're definitely in fullscreen
-      if (currentFullscreenElement === container) {
-        return true;
-      }
-
-      // Check if container is contained within the fullscreen element
-      if (currentFullscreenElement.contains?.(container)) {
-        return true;
-      }
-
-      // Handle web components with shadow DOM - traverse shadow DOM layers
-      // In this case (most modern browsers), the fullscreenElement may be
-      // a web component that contains our container within shadow DOM layers
-      if (currentFullscreenElement.localName?.includes('-')) {
-        let currentRoot = currentFullscreenElement.shadowRoot;
-
-        // Check if ShadowRoot supports fullscreenElement (Safari < 16.4 workaround)
-        const fullscreenElementKey
-          = 'fullscreenElement' in doc
-            ? 'fullscreenElement'
-            : 'webkitFullscreenElement' in doc
-              ? 'webkitFullscreenElement'
-              : undefined;
-
-        if (fullscreenElementKey && !(fullscreenElementKey in (currentRoot || {}))) {
-          // For older Safari versions, use composed node containment check
-          return containsComposedNode(currentFullscreenElement, container);
-        }
-
-        // Traverse shadow DOM layers looking for our container
-        if (fullscreenElementKey) {
-          while (currentRoot?.[fullscreenElementKey]) {
-            if (currentRoot[fullscreenElementKey] === container) return true;
-            if (currentRoot[fullscreenElementKey]?.contains?.(container)) return true;
-            currentRoot = currentRoot[fullscreenElementKey]?.shadowRoot;
-          }
-        }
-      }
-
-      return false;
-    },
-    set(value: boolean, stateOwners: any): void {
-      const { container, media } = stateOwners;
-      if (!container || !media || !globalThis?.document) return;
-
-      try {
-        if (value) {
-          // Enter fullscreen
-          if (container.requestFullscreen) {
-            container.requestFullscreen();
-          } else if (media._playbackEngine?.element?.webkitEnterFullscreen) {
-            // Safari support (IOS)
-            media._playbackEngine.element.webkitEnterFullscreen();
-          } else if (container.webkitRequestFullscreen) {
-            // Safari support (non IOS)
-            container.webkitRequestFullscreen();
-          } else if (container.mozRequestFullScreen) {
-            // Firefox support
-            container.mozRequestFullScreen();
-          } else if (container.msRequestFullscreen) {
-            // IE/Edge support
-            container.msRequestFullscreen();
-          }
-        } else {
-          // Exit fullscreen
-          const doc = globalThis.document as any;
-          if (doc.exitFullscreen) {
-            doc.exitFullscreen();
-          } else if (doc.webkitExitFullscreen) {
-            // Safari support
-            doc.webkitExitFullscreen();
-          } else if (doc.mozCancelFullScreen) {
-            // Firefox support
-            doc.mozCancelFullScreen();
-          } else if (doc.msExitFullscreen) {
-            // IE/Edge support
-            doc.msExitFullscreen();
-          }
-        }
-      } catch (error) {
-        // Gracefully handle fullscreen API errors (e.g., user interaction required)
-        console.warn('Fullscreen operation failed:', error);
-      }
-    },
-    stateOwnersUpdateHandlers: [
-      (handler: (value?: boolean) => void, _stateOwners: any): void | (() => void) => {
-        if (!globalThis?.document) return;
-
-        const eventHandler = () => handler();
-        const events = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'];
-
-        events.forEach((event) => {
-          globalThis.document.addEventListener(event, eventHandler);
-        });
-
-        return () => {
-          events.forEach((event) => {
-            globalThis.document.removeEventListener(event, eventHandler);
-          });
-        };
-      },
-    ] as const,
-    actions: {
-      /** Toggle fullscreen state or explicitly enter/exit based on detail */
-      fullscreenrequest: ({ detail }: Pick<CustomEvent<any>, 'detail'> = { detail: undefined }): boolean => {
-        // If detail is provided, use it; otherwise toggle current state
-        if (typeof detail === 'boolean') {
-          return detail;
-        }
-
-        // Toggle behavior: check current fullscreen state
-        const fullscreenEl = globalThis?.document?.fullscreenElement;
-        return !fullscreenEl;
-      },
-    },
-  },
-};
diff --git a/packages/__tech-preview__/core/src/store/mediators/index.ts b/packages/__tech-preview__/core/src/store/mediators/index.ts
deleted file mode 100644
index 92c41218..00000000
--- a/packages/__tech-preview__/core/src/store/mediators/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { audible } from './audible';
-export { fullscreenable } from './fullscreenable';
-export { playable } from './playable';
-export { preview } from './preview';
-export { temporal } from './temporal';
diff --git a/packages/__tech-preview__/core/src/store/mediators/playable.ts b/packages/__tech-preview__/core/src/store/mediators/playable.ts
deleted file mode 100644
index b44a626b..00000000
--- a/packages/__tech-preview__/core/src/store/mediators/playable.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-export const playable = {
-  paused: {
-    get(stateOwners: any): boolean {
-      const { media } = stateOwners;
-      return media?.paused ?? true;
-    },
-    set(value: boolean, stateOwners: any): void {
-      const { media } = stateOwners;
-      media?.[value ? 'pause' : 'play']();
-    },
-    stateOwnersUpdateHandlers: [
-      (handler: (value?: boolean) => void, stateOwners: any): void | (() => void) => {
-        const { media } = stateOwners;
-        if (!media) return;
-
-        const eventHandler = () => handler();
-        const events = ['play', 'playing', 'pause', 'emptied'];
-        events.forEach(event => media.addEventListener(event, eventHandler));
-
-        return () => events.forEach(event => media.removeEventListener(event, eventHandler));
-      },
-    ] as const,
-    actions: {
-      /** @TODO Refactor me to play more nicely with side effects that don't/can't correlate with set() API (CJP) */
-      playrequest: () => false,
-      pauserequest: () => true,
-    },
-  },
-};
diff --git a/packages/__tech-preview__/core/src/store/mediators/preview.ts b/packages/__tech-preview__/core/src/store/mediators/preview.ts
deleted file mode 100644
index e0958275..00000000
--- a/packages/__tech-preview__/core/src/store/mediators/preview.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const preview = {
-  previewTime: {
-    actions: {
-      previewrequest: ({ detail }: Pick<CustomEvent<any>, 'detail'> = { detail: 0 }): number => +detail,
-    },
-  },
-};
diff --git a/packages/__tech-preview__/core/src/store/mediators/temporal.ts b/packages/__tech-preview__/core/src/store/mediators/temporal.ts
deleted file mode 100644
index def18357..00000000
--- a/packages/__tech-preview__/core/src/store/mediators/temporal.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { isValidNumber } from '@videojs/utils-preview';
-
-export const temporal = {
-  currentTime: {
-    get(stateOwners: any): number {
-      const { media } = stateOwners;
-      return media?.currentTime ?? 0;
-    },
-    set(value: number, stateOwners: any): void {
-      const { media } = stateOwners;
-      if (!media || !isValidNumber(value)) return;
-      media.currentTime = value;
-    },
-    stateOwnersUpdateHandlers: [
-      (handler: (value?: number) => void, stateOwners: any): void | (() => void) => {
-        const { media } = stateOwners;
-        if (!media) return;
-
-        const eventHandler = () => handler();
-        const events = ['timeupdate', 'loadedmetadata'];
-        events.forEach(event => media.addEventListener(event, eventHandler));
-
-        return () => events.forEach(event => media.removeEventListener(event, eventHandler));
-      },
-    ] as const,
-    actions: {
-      /** @TODO Support more sophisticated seeking patterns like seek-to-live, relative seeking, etc. (CJP) */
-      seekrequest: ({ detail }: Pick<CustomEvent<any>, 'detail'> = { detail: 0 }): number => +detail,
-    },
-  },
-
-  duration: {
-    get(stateOwners: any): number {
-      const { media } = stateOwners;
-
-      // Return 0 if no media or invalid duration
-      if (!media?.duration || Number.isNaN(media.duration) || !Number.isFinite(media.duration)) {
-        return 0;
-      }
-
-      return media.duration;
-    },
-    stateOwnersUpdateHandlers: [
-      (handler: (value?: number) => void, stateOwners: any): void | (() => void) => {
-        const { media } = stateOwners;
-        if (!media) return;
-
-        const eventHandler = () => handler();
-        const events = ['loadedmetadata', 'durationchange', 'emptied'];
-        events.forEach(event => media.addEventListener(event, eventHandler));
-
-        return () => events.forEach(event => media.removeEventListener(event, eventHandler));
-      },
-    ] as const,
-  },
-
-  seekable: {
-    get(stateOwners: any): [number, number] | undefined {
-      const { media } = stateOwners;
-
-      if (!media?.seekable?.length) return undefined;
-
-      const start = media.seekable.start(0);
-      const end = media.seekable.end(media.seekable.length - 1);
-
-      // Account for cases where metadata has an "empty" seekable range
-      if (!start && !end) return undefined;
-
-      return [Number(start.toFixed(3)), Number(end.toFixed(3))];
-    },
-    stateOwnersUpdateHandlers: [
-      (handler: (value?: [number, number] | undefined) => void, stateOwners: any): void | (() => void) => {
-        const { media } = stateOwners;
-        if (!media) return;
-
-        const eventHandler = () => handler();
-        const events = ['loadedmetadata', 'emptied', 'progress', 'seekablechange'];
-        events.forEach(event => media.addEventListener(event, eventHandler));
-
-        return () => events.forEach(event => media.removeEventListener(event, eventHandler));
-      },
-    ] as const,
-  },
-};
diff --git a/packages/__tech-preview__/core/src/store/types.ts b/packages/__tech-preview__/core/src/store/types.ts
deleted file mode 100644
index 9fec8287..00000000
--- a/packages/__tech-preview__/core/src/store/types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface StateOwners {
-  media?: HTMLMediaElement;
-  container?: HTMLElement;
-}
diff --git a/packages/__tech-preview__/core/tsconfig.build.json b/packages/__tech-preview__/core/tsconfig.build.json
deleted file mode 100644
index b90fc83e..00000000
--- a/packages/__tech-preview__/core/tsconfig.build.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "include": ["src"]
-}
diff --git a/packages/__tech-preview__/core/tsconfig.json b/packages/__tech-preview__/core/tsconfig.json
deleted file mode 100644
index 7db81593..00000000
--- a/packages/__tech-preview__/core/tsconfig.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "extends": "../../../tsconfig.base.json",
-  "compilerOptions": {
-    // This will be removed.
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  },
-  "include": ["src"]
-}
diff --git a/packages/__tech-preview__/core/tsdown.config.ts b/packages/__tech-preview__/core/tsdown.config.ts
deleted file mode 100644
index a796899a..00000000
--- a/packages/__tech-preview__/core/tsdown.config.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { defineConfig } from 'tsdown';
-
-export default defineConfig({
-  entry: {
-    index: './src/index.ts',
-    media: './src/media/index.ts',
-    store: './src/store/index.ts',
-  },
-  platform: 'browser',
-  format: 'es',
-  sourcemap: true,
-  clean: true,
-  alias: {
-    '@': new URL('./src', import.meta.url).pathname,
-  },
-  dts: {
-    oxc: true,
-  },
-});
diff --git a/packages/__tech-preview__/examples/html/frosted-eject.html b/packages/__tech-preview__/examples/html/frosted-eject.html
deleted file mode 100644
index b24883a4..00000000
--- a/packages/__tech-preview__/examples/html/frosted-eject.html
+++ /dev/null
@@ -1,134 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>HTML Frosted Ejected</title>
-    <link rel="preconnect" href="https://rsms.me/" />
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-    <style>
-      body {
-        font-family:
-          InterVariable, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-          'Noto Color Emoji';
-        margin: 0;
-      }
-      * {
-        box-sizing: border-box;
-      }
-    </style>
-  </head>
-  <body style="display: flex; flex-direction: column; min-height: 100vh; max-width: 960px; padding: 1rem">
-    <h1>Frosted Skin (ejected)</h1>
-    <a href="/">&larr; Back to index</a>
-    <video-provider style="display: block">
-      <media-container
-        style="
-          display: block;
-          width: 100%;
-          height: 100%;
-          border-radius: 2rem;
-          max-width: 960px;
-          margin: 2rem auto;
-          aspect-ratio: 16/9;
-        "
-      >
-        <video
-          slot="media"
-          src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/high.mp4"
-          playsinline
-          poster="https://image.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/thumbnail.webp"
-        ></video>
-
-        <div class="overlay"></div>
-
-        <div class="control-bar surface">
-          <media-play-button commandfor="play-tooltip" class="button">
-            <media-play-icon class="icon play-icon"></media-play-icon>
-            <media-pause-icon class="icon pause-icon"></media-pause-icon>
-          </media-play-button>
-          <media-tooltip
-            id="play-tooltip"
-            class="surface popup-animation"
-            popover="manual"
-            delay="500"
-            side="top"
-            side-offset="12"
-            collision-padding="12"
-          >
-            <span class="tooltip play-tooltip">Play</span>
-            <span class="tooltip pause-tooltip">Pause</span>
-          </media-tooltip>
-
-          <div class="time-controls">
-            <!-- Use the show-remaining attribute to show count down/remaining time -->
-            <media-current-time-display></media-current-time-display>
-
-            <media-time-slider commandfor="time-slider-tooltip" class="slider">
-              <media-time-slider-track class="slider-track">
-                <media-time-slider-progress class="slider-progress"></media-time-slider-progress>
-                <media-time-slider-pointer class="slider-pointer"></media-time-slider-pointer>
-              </media-time-slider-track>
-              <media-time-slider-thumb class="slider-thumb"></media-time-slider-thumb>
-            </media-time-slider>
-            <media-tooltip
-              id="time-slider-tooltip"
-              class="surface popup-animation"
-              popover="manual"
-              track-cursor-axis="x"
-              side="top"
-              side-offset="18"
-              collision-padding="12"
-            >
-              <media-preview-time-display></media-preview-time-display>
-            </media-tooltip>
-
-            <media-duration-display></media-duration-display>
-          </div>
-
-          <media-mute-button commandfor="volume-slider-popover" command="toggle-popover" class="button">
-            <media-volume-high-icon class="icon volume-high-icon"></media-volume-high-icon>
-            <media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
-            <media-volume-off-icon class="icon volume-off-icon"></media-volume-off-icon>
-          </media-mute-button>
-          <media-popover
-            id="volume-slider-popover"
-            class="surface popup-animation"
-            popover="manual"
-            open-on-hover
-            delay="200"
-            close-delay="100"
-            side="top"
-            side-offset="12"
-            collision-padding="12"
-          >
-            <media-volume-slider class="slider" orientation="vertical">
-              <media-volume-slider-track class="slider-track">
-                <media-volume-slider-indicator class="slider-progress"></media-volume-slider-indicator>
-              </media-volume-slider-track>
-              <media-volume-slider-thumb class="slider-thumb"></media-volume-slider-thumb>
-            </media-volume-slider>
-          </media-popover>
-
-          <media-fullscreen-button commandfor="fullscreen-tooltip" class="button">
-            <media-fullscreen-enter-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-icon>
-            <media-fullscreen-exit-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-icon>
-          </media-fullscreen-button>
-          <media-tooltip
-            id="fullscreen-tooltip"
-            class="surface popup-animation"
-            popover="manual"
-            delay="500"
-            side="top"
-            side-offset="12"
-            collision-padding="12"
-          >
-            <span class="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
-            <span class="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
-          </media-tooltip>
-        </div>
-      </media-container>
-    </video-provider>
-    <script type="module" src="/src/frosted-eject.ts"></script>
-  </body>
-</html>
diff --git a/packages/__tech-preview__/examples/html/frosted.html b/packages/__tech-preview__/examples/html/frosted.html
deleted file mode 100644
index f101da31..00000000
--- a/packages/__tech-preview__/examples/html/frosted.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VJS HTML Demo</title>
-    <link rel="preconnect" href="https://rsms.me/" />
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-    <style>
-      body {
-        font-family:
-          InterVariable, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-          'Noto Color Emoji';
-        margin: 0;
-      }
-      * {
-        box-sizing: border-box;
-      }
-    </style>
-  </head>
-  <body style="display: flex; flex-direction: column; min-height: 100vh; max-width: 960px; padding: 1rem">
-    <h1>Frosted Skin</h1>
-    <a href="/">&larr; Back to index</a>
-    <div id="app"></div>
-    <script type="module" src="/src/frosted.ts"></script>
-  </body>
-</html>
diff --git a/packages/__tech-preview__/examples/html/index.html b/packages/__tech-preview__/examples/html/index.html
deleted file mode 100644
index da048e07..00000000
--- a/packages/__tech-preview__/examples/html/index.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Video.js - HTML</title>
-  </head>
-  <body style="display: flex; flex-direction: column; min-height: 100vh; max-width: 960px; padding: 1rem">
-    <h1>Video.js - HTML</h1>
-    <nav>
-      <ul>
-        <li><a href="/minimal.html">Minimal Skin (imported)</a></li>
-        <li><a href="/minimal-eject.html">Minimal Skin (ejected)</a></li>
-        <li><a href="/frosted.html">Frosted Skin (imported)</a></li>
-        <li><a href="/frosted-eject.html">Frosted Skin (ejected)</a></li>
-      </ul>
-    </nav>
-  </body>
-</html>
diff --git a/packages/__tech-preview__/examples/html/minimal-eject.html b/packages/__tech-preview__/examples/html/minimal-eject.html
deleted file mode 100644
index 5707376b..00000000
--- a/packages/__tech-preview__/examples/html/minimal-eject.html
+++ /dev/null
@@ -1,141 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>HTML Minimal Ejected</title>
-    <link rel="preconnect" href="https://rsms.me/" />
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-    <style>
-      body {
-        font-family:
-          InterVariable, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-          'Noto Color Emoji';
-        margin: 0;
-      }
-      * {
-        box-sizing: border-box;
-      }
-    </style>
-  </head>
-  <body style="display: flex; flex-direction: column; min-height: 100vh; max-width: 960px; padding: 1rem">
-    <h1>Minimal Skin (ejected)</h1>
-    <a href="/">&larr; Back to index</a>
-    <video-provider style="display: block">
-      <media-container
-        style="
-          display: block;
-          width: 100%;
-          height: 100%;
-          border-radius: 0.75rem;
-          max-width: 960px;
-          margin: 2rem auto;
-          aspect-ratio: 16/9;
-        "
-      >
-        <video
-          slot="media"
-          src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/high.mp4"
-          playsinline
-          poster="https://image.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/thumbnail.webp"
-        ></video>
-
-        <div class="overlay"></div>
-
-        <div class="control-bar">
-          <!-- NOTE: We can decide if we further want to provide a further, "themed" media-play-button that comes with baked in default styles and icons. (CJP) -->
-
-          <media-play-button commandfor="play-tooltip" class="button">
-            <media-play-icon class="icon play-icon"></media-play-icon>
-            <media-pause-icon class="icon pause-icon"></media-pause-icon>
-          </media-play-button>
-          <media-tooltip
-            id="play-tooltip"
-            class="popup-animation"
-            popover="manual"
-            delay="500"
-            side="top"
-            side-offset="6"
-            collision-padding="12"
-          >
-            <span class="tooltip play-tooltip">Play</span>
-            <span class="tooltip pause-tooltip">Pause</span>
-          </media-tooltip>
-
-          <div class="time-display-group">
-            <!-- Use the show-remaining attribute to show count down/remaining time -->
-            <media-current-time-display></media-current-time-display>
-
-            <span class="duration-display">
-              /
-              <media-duration-display></media-duration-display>
-            </span>
-          </div>
-
-          <media-time-slider commandfor="time-slider-tooltip" class="slider">
-            <media-time-slider-track class="slider-track">
-              <media-time-slider-progress class="slider-progress"></media-time-slider-progress>
-              <media-time-slider-pointer class="slider-pointer"></media-time-slider-pointer>
-            </media-time-slider-track>
-            <media-time-slider-thumb class="slider-thumb"></media-time-slider-thumb>
-          </media-time-slider>
-          <media-tooltip
-            id="time-slider-tooltip"
-            class="popup-animation"
-            popover="manual"
-            track-cursor-axis="x"
-            side="top"
-            side-offset="12"
-            collision-padding="12"
-          >
-            <media-preview-time-display></media-preview-time-display>
-          </media-tooltip>
-
-          <div class="button-group">
-            <media-mute-button commandfor="volume-slider-popover" command="toggle-popover" class="button">
-              <media-volume-high-icon class="icon volume-high-icon"></media-volume-high-icon>
-              <media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
-              <media-volume-off-icon class="icon volume-off-icon"></media-volume-off-icon>
-            </media-mute-button>
-            <media-popover
-              id="volume-slider-popover"
-              class="popup-animation"
-              popover="manual"
-              open-on-hover
-              delay="200"
-              close-delay="100"
-              side="top"
-              side-offset="2"
-              collision-padding="12"
-            >
-              <media-volume-slider class="slider" orientation="vertical">
-                <media-volume-slider-track class="slider-track">
-                  <media-volume-slider-indicator class="slider-progress"></media-volume-slider-indicator>
-                </media-volume-slider-track>
-                <media-volume-slider-thumb class="slider-thumb"></media-volume-slider-thumb>
-              </media-volume-slider>
-            </media-popover>
-
-            <media-fullscreen-button commandfor="fullscreen-tooltip" class="button">
-              <media-fullscreen-enter-alt-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-alt-icon>
-              <media-fullscreen-exit-alt-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-alt-icon>
-            </media-fullscreen-button>
-            <media-tooltip
-              id="fullscreen-tooltip"
-              class="popup-animation"
-              popover="manual"
-              delay="500"
-              side="top"
-              side-offset="6"
-              collision-padding="12"
-            >
-              <span class="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
-              <span class="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
-            </media-tooltip>
-          </div>
-        </div>
-      </media-container>
-    </video-provider>
-    <script type="module" src="/src/minimal-eject.ts"></script>
-  </body>
-</html>
diff --git a/packages/__tech-preview__/examples/html/minimal.html b/packages/__tech-preview__/examples/html/minimal.html
deleted file mode 100644
index 28d865d4..00000000
--- a/packages/__tech-preview__/examples/html/minimal.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>VJS HTML Demo</title>
-    <link rel="preconnect" href="https://rsms.me/" />
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-    <style>
-      body {
-        font-family:
-          InterVariable, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-          'Noto Color Emoji';
-        margin: 0;
-      }
-      * {
-        box-sizing: border-box;
-      }
-    </style>
-  </head>
-  <body style="display: flex; flex-direction: column; min-height: 100vh; max-width: 960px; padding: 1rem">
-    <h1>Minimal Skin</h1>
-    <a href="/">&larr; Back to index</a>
-    <div id="app"></div>
-    <script type="module" src="/src/minimal.ts"></script>
-  </body>
-</html>
diff --git a/packages/__tech-preview__/examples/html/package.json b/packages/__tech-preview__/examples/html/package.json
deleted file mode 100644
index ddf4951c..00000000
--- a/packages/__tech-preview__/examples/html/package.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "html-demo",
-  "type": "module",
-  "version": "1.0.0",
-  "private": true,
-  "description": "HTML example for Video.js 10",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@videojs/html-preview": "workspace:*"
-  },
-  "devDependencies": {
-    "typescript": "^5.9.3",
-    "vite": "^7.2.4"
-  }
-}
diff --git a/packages/__tech-preview__/examples/html/src/frosted-eject.css b/packages/__tech-preview__/examples/html/src/frosted-eject.css
deleted file mode 100644
index 4ec8468b..00000000
--- a/packages/__tech-preview__/examples/html/src/frosted-eject.css
+++ /dev/null
@@ -1,359 +0,0 @@
-media-container * {
-  box-sizing: border-box;
-}
-
-media-container {
-  position: relative;
-  isolation: isolate;
-  container: root / inline-size;
-  overflow: clip;
-  border-radius: var(--frosted-border-radius, 2rem);
-  background: oklab(0 0 0);
-  font-family: ui-sans-serif, system-ui, sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  -webkit-font-smoothing: auto;
-  -moz-osx-font-smoothing: auto;
-}
-media-container::before,
-media-container::after {
-  content: '';
-  position: absolute;
-  pointer-events: none;
-  border-radius: inherit;
-  z-index: 10;
-}
-media-container::before {
-  inset: 1px;
-  box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.15);
-}
-media-container::after {
-  inset: 0;
-  box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.1);
-}
-
-/* Fullscreen */
-media-container:fullscreen {
-  border-radius: 0;
-}
-
-media-container > ::slotted([slot='media']),
-media-container > video,
-media-container > audio {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-/* Media Container UI Overlay Styling */
-media-container > .overlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: start;
-  pointer-events: none;
-  border-radius: inherit;
-  background-image: linear-gradient(to top, oklab(0 0 0 / 0.5), oklab(0 0 0 / 0.3), rgba(0, 0, 0, 0));
-  backdrop-filter: saturate(1.5) brightness(0.9);
-  transition: opacity 0.15s ease-out;
-  transition-duration: 100ms;
-  transition-delay: 0ms;
-}
-media-container[data-controls='hidden'] > .overlay {
-  transition-delay: 500ms;
-  transition-duration: 300ms;
-  opacity: 0;
-}
-
-/* Common Surface Styles - e.g. tooltips, popovers, controls */
-.surface {
-  background-color: oklab(1 0 0 / 0.1);
-  backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);
-  box-shadow:
-    inset 0 0 0 1px oklab(1 0 0 / 0.05),
-    0 0 0 1px oklab(0 0 0 / 0.15),
-    oklab(0 0 0 / 0.15) 0px 1px 3px 0px,
-    oklab(0 0 0 / 0.15) 0px 1px 2px -1px;
-}
-@media (prefers-reduced-transparency: reduce) {
-  .surface {
-    background-color: oklab(0 0 0 / 0.7);
-    box-shadow:
-      inset 0 0 0 1px oklab(0 0 0),
-      0 0 0 1px oklab(1 0 0 / 0.2);
-  }
-}
-@media (prefers-contrast: more) {
-  .surface {
-    background-color: oklab(0 0 0 / 0.9);
-    box-shadow:
-      inset 0 0 0 1px oklab(0 0 0),
-      0 0 0 1px oklab(1 0 0 / 0.2);
-  }
-}
-
-/* Media Control Bar UI/Styles */
-.control-bar {
-  position: absolute;
-  bottom: 0.75rem;
-  inset-inline: 0.75rem;
-  padding: 0.25rem;
-  display: flex;
-  align-items: center;
-  gap: 0.125rem;
-  border-radius: calc(infinity * 1px);
-  will-change: scale, transform, filter, opacity;
-  transition-property: scale, transform, filter, opacity;
-  transition-delay: 0ms;
-  transition-duration: 100ms;
-  transition-timing-function: ease-out;
-  transform-origin: bottom;
-  color: oklab(1 0 0);
-}
-media-container[data-controls='hidden'] > .control-bar {
-  opacity: 0;
-  scale: 0.9;
-  filter: blur(8px);
-  transition-delay: 500ms;
-  transition-duration: 300ms;
-  pointer-events: none;
-}
-
-/* Time Display Styling */
-.time-controls {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  gap: 0.75rem;
-  padding-inline: 0.375rem;
-}
-media-current-time-display,
-media-duration-display {
-  text-shadow: 0 1px 0 oklab(0 0 0 / 0.25);
-  font-variant-numeric: tabular-nums;
-}
-
-/* Generic Media Button Styling */
-.button {
-  display: grid;
-  flex-shrink: 0;
-  padding: 0.5rem;
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  border-radius: calc(infinity * 1px);
-  color: oklab(1 0 0 / 0.9);
-  user-select: none;
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-  transition-property: background-color, color, outline-offset;
-  transition-duration: 150ms;
-  transition-timing-function: ease-out;
-}
-.button:hover,
-.button:focus-visible,
-.button[aria-expanded='true'] {
-  background-color: oklab(1 0 0 / 0.1);
-  color: oklab(1 0 0);
-  text-decoration: none;
-}
-.button:focus-visible {
-  outline-color: oklch(62.3% 0.214 259.815);
-  outline-offset: 2px;
-}
-.button[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-  filter: grayscale(1);
-}
-
-.button .icon {
-  grid-area: 1 / 1;
-  width: 18px;
-  height: 18px;
-  filter: drop-shadow(0 1px 0 oklab(0 0 0 / 0.25));
-}
-
-/* Media Play Button UI/Styles */
-media-play-button .icon {
-  opacity: 0;
-  transition: opacity 150ms linear;
-}
-
-media-play-button:not([data-paused]) .pause-icon,
-media-play-button[data-paused] .play-icon {
-  opacity: 1;
-}
-
-/* Media Fullscreen Button UI/Styles */
-media-fullscreen-button .icon {
-  display: none;
-}
-media-fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,
-media-fullscreen-button[data-fullscreen] .fullscreen-exit-icon {
-  display: inline;
-}
-
-/* One way to define the "default visible" icon (CJP) */
-media-mute-button .icon {
-  display: none;
-}
-media-mute-button:not([data-volume-level]) .volume-low-icon,
-media-mute-button[data-volume-level='high'] .volume-high-icon,
-media-mute-button[data-volume-level='medium'] .volume-high-icon,
-media-mute-button[data-volume-level='low'] .volume-low-icon,
-media-mute-button[data-volume-level='off'] .volume-off-icon {
-  display: inline;
-}
-
-/* TimeSlider Component Styles */
-.slider {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  border-radius: calc(infinity * 1px);
-  outline: none;
-}
-
-/* Horizontal orientation styles */
-.slider[data-orientation='horizontal'] {
-  min-width: 5rem;
-  width: 100%;
-  height: 1.25rem;
-}
-
-/* Vertical orientation styles */
-.slider[data-orientation='vertical'] {
-  height: 5rem;
-  width: 1.25rem;
-}
-
-.slider-track {
-  position: relative;
-  isolation: isolate;
-  background-color: oklab(1 0 0 / 0.2);
-  border-radius: inherit;
-  overflow: hidden;
-  user-select: none;
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-  transition: outline-offset 150ms ease-out;
-  box-shadow: 0 0 0 1px oklab(0 0 0 / 0.05);
-}
-
-/* Horizontal track styles */
-.slider-track[data-orientation='horizontal'] {
-  width: 100%;
-  height: 0.25rem;
-}
-
-/* Vertical track styles */
-.slider-track[data-orientation='vertical'] {
-  width: 0.25rem;
-  height: 100%;
-}
-
-.slider:focus-visible .slider-track {
-  outline-color: oklch(62.3% 0.214 259.815);
-  outline-offset: 6px;
-}
-
-.slider-thumb {
-  width: 0.625rem;
-  height: 0.625rem;
-  background-color: oklab(1 0 0);
-  border-radius: calc(infinity * 1px);
-  user-select: none;
-  z-index: 10;
-  box-shadow:
-    0 0 0 1px oklab(0 0 0 / 0.1),
-    0 1px 3px 0 oklab(0 0 0 / 0.15),
-    0 1px 2px -1px oklab(0 0 0 / 0.15);
-  opacity: 0;
-  transition-property: opacity, height, width;
-  transition-duration: 150ms;
-  transition-timing-function: ease-out;
-}
-.slider-thumb:active {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-.slider:hover .slider-thumb,
-.slider:focus-within .slider-thumb {
-  opacity: 1;
-}
-.slider-track[data-orientation='horizontal'] .slider-thumb {
-  cursor: ew-resize;
-}
-.slider-track[data-orientation='vertical'] .slider-thumb {
-  cursor: ns-resize;
-}
-
-.slider-pointer {
-  background-color: oklab(1 0 0 / 0.2);
-  border-radius: inherit;
-}
-
-.slider-progress {
-  background-color: oklab(1 0 0);
-  border-radius: inherit;
-}
-
-media-preview-time-display {
-  font-variant-numeric: tabular-nums;
-}
-
-.popup-animation {
-  transition-property: transform, scale, opacity, filter;
-  transition-duration: 200ms;
-  transform: scale(1);
-  transform-origin: bottom;
-  opacity: 1;
-  filter: blur(0px);
-}
-.popup-animation[data-starting-style],
-.popup-animation[data-ending-style] {
-  transform: scale(0);
-  opacity: 0;
-  filter: blur(8px);
-}
-.popup-animation[data-instant] {
-  transition-duration: 0ms;
-}
-
-media-popover {
-  padding: 0.75rem 0.25rem;
-  border-radius: calc(infinity * 1px);
-  margin: 0;
-  border: 0;
-}
-
-/* Tooltip Component Styles */
-media-tooltip {
-  margin: 0;
-  border: none;
-  box-shadow: none;
-  background: transparent;
-  color: oklab(1 0 0);
-  padding: 0.25rem 0.625rem;
-  border-radius: calc(infinity * 1px);
-  font-size: 0.75rem;
-}
-
-.tooltip {
-  display: none;
-  white-space: nowrap;
-}
-
-[data-paused] + media-tooltip .play-tooltip,
-:not([data-paused]) + media-tooltip .pause-tooltip {
-  display: block;
-}
-
-[data-fullscreen] + media-tooltip .fullscreen-exit-tooltip,
-:not([data-fullscreen]) + media-tooltip .fullscreen-enter-tooltip {
-  display: block;
-}
diff --git a/packages/__tech-preview__/examples/html/src/frosted-eject.ts b/packages/__tech-preview__/examples/html/src/frosted-eject.ts
deleted file mode 100644
index 68a4b051..00000000
--- a/packages/__tech-preview__/examples/html/src/frosted-eject.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import './frosted-eject.css';
-import '@videojs/html-preview/icons';
-// be sure to import video-provider first for proper context initialization
-import '@videojs/html-preview/define/video-provider';
-import '@videojs/html-preview/define/media-container';
-import '@videojs/html-preview/define/media-play-button';
-import '@videojs/html-preview/define/media-mute-button';
-import '@videojs/html-preview/define/media-volume-slider';
-import '@videojs/html-preview/define/media-time-slider';
-import '@videojs/html-preview/define/media-fullscreen-button';
-import '@videojs/html-preview/define/media-duration-display';
-import '@videojs/html-preview/define/media-current-time-display';
-import '@videojs/html-preview/define/media-preview-time-display';
-import '@videojs/html-preview/define/media-popover';
-import '@videojs/html-preview/define/media-tooltip';
diff --git a/packages/__tech-preview__/examples/html/src/frosted.ts b/packages/__tech-preview__/examples/html/src/frosted.ts
deleted file mode 100644
index 99913f6f..00000000
--- a/packages/__tech-preview__/examples/html/src/frosted.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import '@videojs/html-preview/skins/frosted';
-
-document.getElementById('app')!.innerHTML = /* html */ `
-  <video-provider>
-    <media-skin-frosted style="border-radius: 2rem; width: 100%; margin: 2rem auto; aspect-ratio: 16/9">
-      <video
-        slot="media"
-        src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/high.mp4"
-        poster="https://image.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/thumbnail.webp"
-        playsinline
-      ></video>
-    </media-skin-frosted>
-  </video-provider>
-`;
diff --git a/packages/__tech-preview__/examples/html/src/minimal-eject.css b/packages/__tech-preview__/examples/html/src/minimal-eject.css
deleted file mode 100644
index b805760b..00000000
--- a/packages/__tech-preview__/examples/html/src/minimal-eject.css
+++ /dev/null
@@ -1,354 +0,0 @@
-media-container * {
-  box-sizing: border-box;
-}
-
-media-container {
-  position: relative;
-  isolation: isolate;
-  container: root / inline-size;
-  overflow: clip;
-  border-radius: var(--minimal-border-radius, 2rem);
-  background: oklab(0 0 0);
-  font-family: ui-sans-serif, system-ui, sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  -webkit-font-smoothing: auto;
-  -moz-osx-font-smoothing: auto;
-}
-media-container::after {
-  content: '';
-  position: absolute;
-  pointer-events: none;
-  border-radius: inherit;
-  z-index: 10;
-  inset: 0;
-  box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.15);
-}
-@media (prefers-color-scheme: dark) {
-  media-container::after {
-    box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.15);
-  }
-}
-
-/* Fullscreen */
-media-container:fullscreen {
-  border-radius: 0;
-}
-
-media-container > ::slotted([slot='media']),
-media-container > video,
-media-container > audio {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-/* Media Container UI Overlay Styling */
-media-container > .overlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: start;
-  pointer-events: none;
-  border-radius: inherit;
-  background-image: linear-gradient(to top, oklab(0 0 0 / 0.7), oklab(0 0 0 / 0.5) 7.5rem, rgba(0, 0, 0, 0));
-  transition-property: opacity;
-  transition-duration: 75ms;
-  transition-delay: 0ms;
-  transition-timing-function: ease-out;
-}
-media-container[data-controls='hidden'] > .overlay {
-  opacity: 0;
-  transition-duration: 500ms;
-  transition-delay: 500ms;
-}
-
-/* Media Control Bar UI/Styles */
-.control-bar {
-  position: absolute;
-  bottom: 0;
-  inset-inline: 0;
-  padding: 2rem 0.375rem 0.375rem 0.375rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  will-change: transform, filter, opacity;
-  transition-property: transform, filter, opacity;
-  transition-delay: 0ms;
-  transition-duration: 75ms;
-  transition-timing-function: ease-out;
-  color: oklab(1 0 0);
-}
-media-container[data-controls='hidden'] > .control-bar {
-  opacity: 0;
-  transform: translateY(100%);
-  filter: blur(8px);
-  transition-delay: 500ms;
-  transition-duration: 500ms;
-  pointer-events: none;
-}
-@container root (width > 640px) {
-  .control-bar {
-    padding: 2.5rem 0.75rem 0.75rem 0.75rem;
-    gap: 0.875rem;
-  }
-}
-
-/* Time Display Styling */
-.time-display-group {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-.duration-display {
-  display: contents;
-  color: oklab(1 0 0 / 0.5);
-}
-media-current-time-display,
-media-duration-display {
-  text-shadow: 0 1px 0 oklab(0 0 0 / 0.2);
-  font-variant-numeric: tabular-nums;
-}
-
-.button-group {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-
-/* Generic Media Button Styling */
-.button {
-  display: grid;
-  flex-shrink: 0;
-  padding: 0.625rem;
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  border-radius: 0.375rem;
-  color: oklab(1 0 0);
-  user-select: none;
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-  transition-property: background-color, color, outline-offset;
-  transition-duration: 150ms;
-  transition-timing-function: ease-out;
-}
-.button:hover,
-.button:focus-visible,
-.button[aria-expanded='true'] {
-  color: oklab(1 0 0 / 0.8);
-  text-decoration: none;
-}
-.button:focus-visible {
-  outline-color: oklab(1 0 0);
-  outline-offset: 2px;
-}
-.button[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-  filter: grayscale(1);
-}
-
-.button .icon {
-  grid-area: 1 / 1;
-  width: 18px;
-  height: 18px;
-  filter: drop-shadow(0 1px 0 oklab(0 0 0 / 0.4));
-}
-
-/* Media Play Button UI/Styles */
-media-play-button .icon {
-  opacity: 0;
-  transition: opacity 150ms linear;
-}
-
-media-play-button:not([data-paused]) .pause-icon,
-media-play-button[data-paused] .play-icon {
-  opacity: 1;
-}
-
-/* Media Fullscreen Button UI/Styles */
-media-fullscreen-button .icon {
-  display: none;
-}
-media-fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,
-media-fullscreen-button[data-fullscreen] .fullscreen-exit-icon {
-  display: inline;
-}
-
-/* One way to define the "default visible" icon (CJP) */
-media-mute-button .icon {
-  display: none;
-}
-media-mute-button:not([data-volume-level]) .volume-low-icon,
-media-mute-button[data-volume-level='high'] .volume-high-icon,
-media-mute-button[data-volume-level='medium'] .volume-high-icon,
-media-mute-button[data-volume-level='low'] .volume-low-icon,
-media-mute-button[data-volume-level='off'] .volume-off-icon {
-  display: inline;
-}
-
-/* TimeSlider Component Styles */
-.slider {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  border-radius: calc(infinity * 1px);
-  outline: none;
-}
-
-/* Horizontal orientation styles */
-.slider[data-orientation='horizontal'] {
-  min-width: 5rem;
-  width: 100%;
-  height: 1.25rem;
-}
-
-/* Vertical orientation styles */
-.slider[data-orientation='vertical'] {
-  height: 4.5rem;
-  width: 1.25rem;
-}
-
-.slider-track {
-  position: relative;
-  isolation: isolate;
-  background-color: oklab(1 0 0 / 0.2);
-  border-radius: inherit;
-  overflow: hidden;
-  user-select: none;
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-  transition: outline-offset 150ms ease-out;
-  box-shadow: 0 0 0 1px oklab(0 0 0 / 0.05);
-}
-
-/* Horizontal track styles */
-.slider-track[data-orientation='horizontal'] {
-  width: 100%;
-  height: 0.1875rem;
-}
-
-/* Vertical track styles */
-.slider-track[data-orientation='vertical'] {
-  width: 0.1875rem;
-  height: 100%;
-}
-
-.slider:focus-visible .slider-track {
-  outline-color: oklab(1 0 0);
-  outline-offset: 6px;
-}
-
-.slider-thumb {
-  width: 0.75rem;
-  height: 0.75rem;
-  background-color: oklab(1 0 0);
-  border-radius: calc(infinity * 1px);
-  user-select: none;
-  z-index: 10;
-  box-shadow:
-    0 0 0 1px oklab(0 0 0 / 0.1),
-    0 1px 3px 0 oklab(0 0 0 / 0.15),
-    0 1px 2px -1px oklab(0 0 0 / 0.15);
-  opacity: 0;
-  scale: 0.7;
-  transform-origin: center;
-  transition-property: opacity, scale;
-  transition-duration: 150ms;
-  transition-timing-function: ease-out;
-}
-.slider:hover .slider-thumb,
-.slider:focus-within .slider-thumb {
-  opacity: 1;
-  scale: 1;
-}
-.slider-track[data-orientation='horizontal'] .slider-thumb {
-  cursor: ew-resize;
-}
-.slider-track[data-orientation='vertical'] .slider-thumb {
-  cursor: ns-resize;
-}
-
-.slider-pointer {
-  display: none;
-}
-
-.slider-progress {
-  background-color: oklab(1 0 0);
-  border-radius: inherit;
-}
-
-media-preview-time-display {
-  font-variant-numeric: tabular-nums;
-}
-
-.popup-animation {
-  transition-property: transform, scale, opacity, filter;
-  transition-duration: 200ms;
-  transform: scale(1);
-  transform-origin: bottom;
-  opacity: 1;
-  filter: blur(0px);
-}
-.popup-animation[data-starting-style],
-.popup-animation[data-ending-style] {
-  transform: scale(0);
-  opacity: 0;
-  filter: blur(8px);
-}
-.popup-animation[data-instant] {
-  transition-duration: 0ms;
-}
-
-media-popover {
-  padding: 0.5rem;
-  margin: 0;
-  border: 0;
-  background: transparent;
-}
-
-/* Tooltip Component Styles */
-media-tooltip {
-  margin: 0;
-  border: none;
-  box-shadow: none;
-  background: transparent;
-  color: oklab(1 0 0);
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  background-color: oklab(1 0 0 / 0.1);
-  backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);
-  box-shadow:
-    0 4px 6px -1px oklab(0 0 0 / 0.1),
-    0 2px 4px -2px oklab(0 0 0 / 0.1);
-}
-@media (prefers-reduced-transparency: reduce) {
-  media-tooltip {
-    background-color: oklab(0 0 0 / 0.7);
-  }
-}
-@media (prefers-contrast: more) {
-  media-tooltip {
-    background-color: oklab(0 0 0 / 0.9);
-  }
-}
-
-.tooltip {
-  display: none;
-  white-space: nowrap;
-}
-
-[data-paused] + media-tooltip .play-tooltip,
-:not([data-paused]) + media-tooltip .pause-tooltip {
-  display: block;
-}
-
-[data-fullscreen] + media-tooltip .fullscreen-exit-tooltip,
-:not([data-fullscreen]) + media-tooltip .fullscreen-enter-tooltip {
-  display: block;
-}
diff --git a/packages/__tech-preview__/examples/html/src/minimal-eject.ts b/packages/__tech-preview__/examples/html/src/minimal-eject.ts
deleted file mode 100644
index 78eaca68..00000000
--- a/packages/__tech-preview__/examples/html/src/minimal-eject.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import './minimal-eject.css';
-import '@videojs/html-preview/icons';
-// be sure to import video-provider first for proper context initialization
-import '@videojs/html-preview/define/video-provider';
-import '@videojs/html-preview/define/media-container';
-import '@videojs/html-preview/define/media-play-button';
-import '@videojs/html-preview/define/media-mute-button';
-import '@videojs/html-preview/define/media-volume-slider';
-import '@videojs/html-preview/define/media-time-slider';
-import '@videojs/html-preview/define/media-fullscreen-button';
-import '@videojs/html-preview/define/media-duration-display';
-import '@videojs/html-preview/define/media-current-time-display';
-import '@videojs/html-preview/define/media-preview-time-display';
-import '@videojs/html-preview/define/media-popover';
-import '@videojs/html-preview/define/media-tooltip';
diff --git a/packages/__tech-preview__/examples/html/src/minimal.ts b/packages/__tech-preview__/examples/html/src/minimal.ts
deleted file mode 100644
index 155cf598..00000000
--- a/packages/__tech-preview__/examples/html/src/minimal.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import '@videojs/html-preview/skins/minimal';
-
-document.getElementById('app')!.innerHTML = /* html */ `
-  <video-provider>
-    <media-skin-minimal style="border-radius: 0.75rem; width: 100%; margin: 2rem auto; aspect-ratio: 16/9">
-      <video
-        slot="media"
-        src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/high.mp4"
-        poster="https://image.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/thumbnail.webp"
-        playsinline
-      ></video>
-    </media-skin-minimal>
-  </video-provider>
-`;
diff --git a/packages/__tech-preview__/examples/html/tsconfig.json b/packages/__tech-preview__/examples/html/tsconfig.json
deleted file mode 100644
index cba98f94..00000000
--- a/packages/__tech-preview__/examples/html/tsconfig.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "baseUrl": "."
-  },
-  "include": ["src"]
-}
diff --git a/packages/__tech-preview__/examples/html/vite.config.ts b/packages/__tech-preview__/examples/html/vite.config.ts
deleted file mode 100644
index 63cd4cad..00000000
--- a/packages/__tech-preview__/examples/html/vite.config.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { resolve } from 'node:path';
-import { defineConfig } from 'vite';
-
-// https://vitejs.dev/config
-export default defineConfig({
-  server: {
-    port: 5174,
-  },
-  optimizeDeps: {
-    exclude: ['@vjs/html'],
-  },
-  build: {
-    rollupOptions: {
-      input: {
-        main: resolve(__dirname, 'index.html'),
-        minimal: resolve(__dirname, 'minimal.html'),
-        'minimal-eject': resolve(__dirname, 'minimal-eject.html'),
-        frosted: resolve(__dirname, 'frosted.html'),
-        'frosted-eject': resolve(__dirname, 'frosted-eject.html'),
-      },
-    },
-  },
-});
diff --git a/packages/__tech-preview__/examples/next/README.md b/packages/__tech-preview__/examples/next/README.md
deleted file mode 100644
index e215bc4c..00000000
--- a/packages/__tech-preview__/examples/next/README.md
+++ /dev/null
@@ -1,36 +0,0 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/packages/__tech-preview__/examples/next/app/favicon.ico b/packages/__tech-preview__/examples/next/app/favicon.ico
deleted file mode 100644
index a8fcc56f..00000000
Binary files a/packages/__tech-preview__/examples/next/app/favicon.ico and /dev/null differ
diff --git a/packages/__tech-preview__/examples/next/app/globals.css b/packages/__tech-preview__/examples/next/app/globals.css
deleted file mode 100644
index 37d72f8a..00000000
--- a/packages/__tech-preview__/examples/next/app/globals.css
+++ /dev/null
@@ -1,26 +0,0 @@
-@import 'tailwindcss';
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
diff --git a/packages/__tech-preview__/examples/next/app/layout.tsx b/packages/__tech-preview__/examples/next/app/layout.tsx
deleted file mode 100644
index 8da647e3..00000000
--- a/packages/__tech-preview__/examples/next/app/layout.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { Metadata } from 'next';
-import { Geist, Geist_Mono } from 'next/font/google';
-import './globals.css';
-
-const geistSans = Geist({
-  variable: '--font-geist-sans',
-  subsets: ['latin'],
-});
-
-const geistMono = Geist_Mono({
-  variable: '--font-geist-mono',
-  subsets: ['latin'],
-});
-
-export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
-    </html>
-  );
-}
diff --git a/packages/__tech-preview__/examples/next/app/page.tsx b/packages/__tech-preview__/examples/next/app/page.tsx
deleted file mode 100644
index 6bbd2732..00000000
--- a/packages/__tech-preview__/examples/next/app/page.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { FrostedSkin, HlsVideo, MinimalSkin, VideoProvider } from '@videojs/react-preview';
-import '@videojs/react-preview/skins/frosted.css';
-import '@videojs/react-preview/skins/minimal.css';
-
-export default function Home() {
-  return (
-    <main className="p-4">
-      <h1 className="text-4xl font-extrabold py-2">Frosted Skin</h1>
-      <VideoProvider>
-        <FrostedSkin>
-          {/* @ts-expect-error -- types are incorrect */}
-          <HlsVideo src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8" playsInline />
-        </FrostedSkin>
-      </VideoProvider>
-      <h1 className="text-4xl font-extrabold py-2">Minimal Skin</h1>
-      <VideoProvider>
-        <MinimalSkin>
-          {/* @ts-expect-error -- types are incorrect */}
-          <HlsVideo src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8" playsInline />
-        </MinimalSkin>
-      </VideoProvider>
-    </main>
-  );
-}
diff --git a/packages/__tech-preview__/examples/next/eslint.config.mjs b/packages/__tech-preview__/examples/next/eslint.config.mjs
deleted file mode 100644
index b22ec515..00000000
--- a/packages/__tech-preview__/examples/next/eslint.config.mjs
+++ /dev/null
@@ -1,18 +0,0 @@
-import nextVitals from 'eslint-config-next/core-web-vitals';
-import nextTs from 'eslint-config-next/typescript';
-import { defineConfig, globalIgnores } from 'eslint/config';
-
-const eslintConfig = defineConfig([
-  ...nextVitals,
-  ...nextTs,
-  // Override default ignores of eslint-config-next.
-  globalIgnores([
-    // Default ignores of eslint-config-next:
-    '.next/**',
-    'out/**',
-    'build/**',
-    'next-env.d.ts',
-  ]),
-]);
-
-export default eslintConfig;
diff --git a/packages/__tech-preview__/examples/next/next.config.ts b/packages/__tech-preview__/examples/next/next.config.ts
deleted file mode 100644
index 5e891cf0..00000000
--- a/packages/__tech-preview__/examples/next/next.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { NextConfig } from 'next';
-
-const nextConfig: NextConfig = {
-  /* config options here */
-};
-
-export default nextConfig;
diff --git a/packages/__tech-preview__/examples/next/package.json b/packages/__tech-preview__/examples/next/package.json
deleted file mode 100644
index 6a4fbf8b..00000000
--- a/packages/__tech-preview__/examples/next/package.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "name": "next-demo",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "eslint"
-  },
-  "dependencies": {
-    "next": "16.0.10",
-    "react": "19.2.3",
-    "react-dom": "19.2.3"
-  },
-  "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.17",
-    "@types/node": "^20.19.25",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "@videojs/react-preview": "workspace:*",
-    "eslint": "^9.39.1",
-    "eslint-config-next": "16.0.8",
-    "tailwindcss": "^4.1.17",
-    "typescript": "^5.9.3"
-  }
-}
diff --git a/packages/__tech-preview__/examples/next/postcss.config.mjs b/packages/__tech-preview__/examples/next/postcss.config.mjs
deleted file mode 100644
index 297374d8..00000000
--- a/packages/__tech-preview__/examples/next/postcss.config.mjs
+++ /dev/null
@@ -1,7 +0,0 @@
-const config = {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  },
-};
-
-export default config;
diff --git a/packages/__tech-preview__/examples/next/public/.gitkeep b/packages/__tech-preview__/examples/next/public/.gitkeep
deleted file mode 100644
index e69de29b..00000000
diff --git a/packages/__tech-preview__/examples/next/tsconfig.json b/packages/__tech-preview__/examples/next/tsconfig.json
deleted file mode 100644
index f94bba48..00000000
--- a/packages/__tech-preview__/examples/next/tsconfig.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
-  "compilerOptions": {
-    "incremental": true,
-    "target": "ES2017",
-    "jsx": "react-jsx",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "paths": {
-      "@/*": ["./*"]
-    },
-    "resolveJsonModule": true,
-    "allowJs": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "isolatedModules": true,
-    "skipLibCheck": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ]
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts",
-    "**/*.mts"
-  ],
-  "exclude": ["node_modules"]
-}
diff --git a/packages/__tech-preview__/examples/react/index.html b/packages/__tech-preview__/examples/react/index.html
deleted file mode 100644
index 913d12f8..00000000
--- a/packages/__tech-preview__/examples/react/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Video.js - React</title>
-    <link rel="preconnect" href="https://rsms.me/" />
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
diff --git a/packages/__tech-preview__/examples/react/package.json b/packages/__tech-preview__/examples/react/package.json
deleted file mode 100644
index 904f1f37..00000000
--- a/packages/__tech-preview__/examples/react/package.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "name": "react-demo",
-  "type": "module",
-  "version": "1.0.0",
-  "private": true,
-  "description": "React example for Video.js 10",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@base-ui-components/react": "^1.0.0-rc.0",
-    "@heroicons/react": "^2.2.0",
-    "@videojs/react-preview": "workspace:*",
-    "@videojs/utils-preview": "workspace:*",
-    "clsx": "^2.1.1",
-    "motion": "^12.23.25",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
-    "shiki": "^3.19.0",
-    "tailwindcss": "^4.1.17",
-    "wouter": "^3.8.1"
-  },
-  "devDependencies": {
-    "@tailwindcss/vite": "^4.1.17",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.2",
-    "typescript": "^5.9.3",
-    "vite": "^7.2.4"
-  }
-}
diff --git a/packages/__tech-preview__/examples/react/src/App.tsx b/packages/__tech-preview__/examples/react/src/App.tsx
deleted file mode 100644
index 424fa54b..00000000
--- a/packages/__tech-preview__/examples/react/src/App.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import { VideoProvider } from '@videojs/react-preview';
-import clsx from 'clsx';
-import { useEffect, useMemo, useRef } from 'react';
-import { Link as LinkPrimitive, Redirect, Route, Switch, useLocation } from 'wouter';
-import { VideoElement } from './components';
-
-import { SkinLayout } from './components/SkinLayout';
-import { useMediaQuery } from './hooks';
-import CustomBaseUISkin from './skins/custom/base-ui/CustomBaseUISkin';
-import customBaseUISkinSource from './skins/custom/base-ui/CustomBaseUISkin?raw';
-import CustomNativeSkin from './skins/custom/native/CustomNativeSkin';
-import customNativeSkinSource from './skins/custom/native/CustomNativeSkin?raw';
-import FrostedSkinEjected from './skins/ejected/frosted/FrostedSkin';
-import frostedSkinEjectedSource from './skins/ejected/frosted/FrostedSkin?raw';
-import MinimalSkinEjected from './skins/ejected/minimal/MinimalSkin';
-import minimalSkinEjectedSource from './skins/ejected/minimal/MinimalSkin?raw';
-import FrostedSkin from './skins/imported/FrostedSkin';
-import frostedSkinSource from './skins/imported/FrostedSkin?raw';
-import MinimalSkin from './skins/imported/MinimalSkin';
-import minimalSkinSource from './skins/imported/MinimalSkin?raw';
-
-import './globals.css';
-
-type NavigationSectionProps = PropsWithChildren<{
-  title: string;
-}>;
-
-function NavigationSection(props: NavigationSectionProps): JSX.Element {
-  return (
-    <div className="space-y-1.5">
-      <div className="text-xs text-zinc-400 px-3.5 dark:text-zinc-500">
-        {props.title}
-      </div>
-      <nav className="space-y-px">{props.children}</nav>
-    </div>
-  );
-}
-
-type LinkProps = PropsWithChildren<{
-  to: string;
-}>;
-
-function Link(props: LinkProps): JSX.Element {
-  return (
-    <LinkPrimitive
-      {...props}
-      className={isActive => clsx('flex px-3.5 py-2 rounded-lg transition-colors text-sm', {
-        'text-zinc-600 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-700': !isActive,
-        'bg-zinc-200/60 text-zinc-900 dark:bg-zinc-200': isActive,
-      })}
-    />
-  );
-}
-
-export default function App(): JSX.Element {
-  const skinProps = useMemo(() => ({
-    className: 'aspect-video shadow-lg shadow-black/15',
-    children: <VideoElement />,
-  }), []);
-
-  const isDesktop = useMediaQuery('(min-width: 768px)');
-  const navigationRef = useRef<HTMLElement>(null);
-
-  useEffect(() => {
-    if (isDesktop) {
-      navigationRef.current?.removeAttribute('popover');
-    } else {
-      navigationRef.current?.setAttribute('popover', 'auto');
-    }
-  }, [isDesktop]);
-
-  const [location] = useLocation();
-  useEffect(() => {
-    try {
-      navigationRef.current?.hidePopover();
-    } catch {}
-  }, [location]);
-
-  return (
-    <div className="min-h-screen text-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 flex">
-      <button type="button" className="p-3 absolute top-7 left-7 md:hidden cursor-pointer z-10" popoverTarget="navigation" popoverTargetAction="show">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="size-5">
-          <path fillRule="evenodd" d="M2 6.75A.75.75 0 0 1 2.75 6h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 6.75Zm0 6.5a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z" clipRule="evenodd" />
-        </svg>
-        <span className="sr-only">Open sidebar</span>
-      </button>
-
-      <header ref={navigationRef} className="p-3 w-72 bg-zinc-50 space-y-8 dark:bg-zinc-800 max-md:h-full popover-from-left max-md:shadow-xl max-md:shadow-black/15" popover="auto" id="navigation">
-        <h1 className="text-xl tracking-tight pt-6 px-3 flex items-center gap-2">
-          <span className="font-semibold text-zinc-600 dark:text-white">Video.js</span>
-          <span className="text-zinc-300 dark:text-zinc-700 font-extralight text-[80%]">/</span>
-          <span className="text-zinc-500 font-normal dark:text-zinc-100">React</span>
-        </h1>
-
-        <div className="space-y-6">
-          <NavigationSection title="Imported skins">
-            <Link to="/imported/frosted">Frosted</Link>
-            <Link to="/imported/minimal">Minimal</Link>
-          </NavigationSection>
-          <NavigationSection title="Ejected skins">
-            <Link to="/ejected/frosted">Frosted</Link>
-            <Link to="/ejected/minimal">Minimal</Link>
-          </NavigationSection>
-          <NavigationSection title="Build your own">
-            <Link to="/custom/native">Native</Link>
-            <Link to="/custom/base-ui">Base UI</Link>
-          </NavigationSection>
-        </div>
-      </header>
-
-      <main
-        className="flex-1 flex justify-center items-center px-6"
-      >
-        <VideoProvider>
-          <Switch>
-            <Route path="/imported/frosted">
-              <SkinLayout code={frostedSkinSource} preview={<FrostedSkin {...skinProps} />} />
-            </Route>
-            <Route path="/imported/minimal">
-              <SkinLayout code={minimalSkinSource} preview={<MinimalSkin {...skinProps} />} />
-            </Route>
-
-            <Route path="/ejected/frosted">
-              <SkinLayout code={frostedSkinEjectedSource} preview={<FrostedSkinEjected {...skinProps} />} />
-            </Route>
-            <Route path="/ejected/minimal">
-              <SkinLayout code={minimalSkinEjectedSource} preview={<MinimalSkinEjected {...skinProps} />} />
-            </Route>
-
-            <Route path="/custom/native">
-              <SkinLayout code={customNativeSkinSource} preview={<CustomNativeSkin {...skinProps} />} />
-            </Route>
-            <Route path="/custom/base-ui">
-              <SkinLayout code={customBaseUISkinSource} preview={<CustomBaseUISkin {...skinProps} />} />
-            </Route>
-
-            <Route>
-              <Redirect to="/imported/frosted" />
-            </Route>
-          </Switch>
-        </VideoProvider>
-      </main>
-    </div>
-  );
-}
diff --git a/packages/__tech-preview__/examples/react/src/components/CodeBlock.tsx b/packages/__tech-preview__/examples/react/src/components/CodeBlock.tsx
deleted file mode 100644
index 74e2e7ce..00000000
--- a/packages/__tech-preview__/examples/react/src/components/CodeBlock.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useEffect, useState } from 'react';
-import { codeToHtml } from 'shiki';
-import { useColorScheme } from '@/hooks';
-
-export interface CodeBlockProps {
-  code: string;
-}
-
-export function CodeBlock(props: CodeBlockProps): JSX.Element {
-  const { code } = props;
-  const [output, setOutput] = useState<string>('');
-  const colorScheme = useColorScheme();
-
-  useEffect(() => {
-    codeToHtml(code, {
-      theme: colorScheme === 'light' ? 'vitesse-light' : 'vitesse-dark',
-      lang: 'javascript',
-    }).then((result) => {
-      setOutput(result);
-    });
-  }, [code, colorScheme]);
-
-  return (
-    <div dangerouslySetInnerHTML={{ __html: output }} className="h-full [&_pre]:rounded-lg [&_pre]:overflow-auto [&_pre]:h-full [&_pre]:w-0 [&_pre]:min-w-full font-mono text-sm *:p-3" />
-  );
-}
diff --git a/packages/__tech-preview__/examples/react/src/components/SkinLayout.tsx b/packages/__tech-preview__/examples/react/src/components/SkinLayout.tsx
deleted file mode 100644
index 65c5f1b8..00000000
--- a/packages/__tech-preview__/examples/react/src/components/SkinLayout.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { ReactNode } from 'react';
-import { CodeBlock } from './CodeBlock';
-import { Tabs } from './Tabs';
-
-export interface SkinLayoutProps {
-  code: string;
-  preview: ReactNode;
-}
-
-export function SkinLayout(props: SkinLayoutProps): JSX.Element {
-  const { code, preview } = props;
-
-  return (
-    <Tabs.Root defaultValue="preview" className="h-full flex flex-col flex-1 max-w-5xl mx-auto py-8 gap-6">
-      <Tabs.List className="justify-center">
-        <Tabs.Tab value="preview">Preview</Tabs.Tab>
-        <Tabs.Tab value="source">Source</Tabs.Tab>
-        <Tabs.Indicator />
-      </Tabs.List>
-
-      <Tabs.Panel value="preview" className="flex-1 flex flex-col justify-center">
-        {preview}
-      </Tabs.Panel>
-      <Tabs.Panel value="source" className="flex-1">
-        <CodeBlock code={code} />
-      </Tabs.Panel>
-    </Tabs.Root>
-  );
-}
diff --git a/packages/__tech-preview__/examples/react/src/components/Tabs/Tab.tsx b/packages/__tech-preview__/examples/react/src/components/Tabs/Tab.tsx
deleted file mode 100644
index 5543bdca..00000000
--- a/packages/__tech-preview__/examples/react/src/components/Tabs/Tab.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { ComponentProps } from 'react';
-import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
-import clsx from 'clsx';
-
-export function Tab(props: ComponentProps<typeof TabsPrimitive.Tab>): JSX.Element {
-  const { className, ...rest } = props;
-  return (
-    <TabsPrimitive.Tab
-      className={clsx(
-        'flex h-8 items-center justify-center border-0 px-2 text-sm font-medium break-keep whitespace-nowrap text-zinc-600 outline-none select-none before:inset-x-0 before:inset-y-1 before:rounded-sm before:-outline-offset-1 before:outline-blue-800 hover:text-zinc-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline-2 data-active:text-zinc-900 ',
-        // Dark mode styles
-        'dark:text-zinc-400 dark:hover:text-zinc-100 dark:data-active:text-zinc-900',
-        className,
-      )}
-      {...rest}
-    />
-  );
-}
diff --git a/packages/__tech-preview__/examples/react/src/components/Tabs/TabIndicator.tsx b/packages/__tech-preview__/examples/react/src/components/Tabs/TabIndicator.tsx
deleted file mode 100644
index e6c4a640..00000000
--- a/packages/__tech-preview__/examples/react/src/components/Tabs/TabIndicator.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { ComponentProps } from 'react';
-import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
-import clsx from 'clsx';
-
-export function TabIndicator(props: ComponentProps<typeof TabsPrimitive.Indicator>): JSX.Element {
-  const { className, ...rest } = props;
-  return (
-    <TabsPrimitive.Indicator
-      className={clsx(
-        'absolute top-1/2 left-0 z-[-1] h-6 w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-1/2 rounded-sm bg-zinc-100 transition-all duration-200 ease-in-out',
-        className,
-      )}
-      {...rest}
-    />
-  );
-}
diff --git a/packages/__tech-preview__/examples/react/src/components/Tabs/TabList.tsx b/packages/__tech-preview__/examples/react/src/components/Tabs/TabList.tsx
deleted file mode 100644
index 53ee06fa..00000000
--- a/packages/__tech-preview__/examples/react/src/components/Tabs/TabList.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { ComponentProps } from 'react';
-import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
-import clsx from 'clsx';
-
-export function TabList(props: ComponentProps<typeof TabsPrimitive.List>): JSX.Element {
-  const { className, ...rest } = props;
-  return (
-    <TabsPrimitive.List
-      className={clsx('flex gap-1 relative z-0', className)}
-      {...rest}
-    />
-  );
-}
diff --git a/packages/__tech-preview__/examples/react/src/components/Tabs/TabPanel.tsx b/packages/__tech-preview__/examples/react/src/components/Tabs/TabPanel.tsx
deleted file mode 100644
index 795969b8..00000000
--- a/packages/__tech-preview__/examples/react/src/components/Tabs/TabPanel.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { ComponentProps } from 'react';
-import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
-import clsx from 'clsx';
-
-export function TabPanel(props: ComponentProps<typeof TabsPrimitive.Panel>): JSX.Element {
-  const { className, ...rest } = props;
-  return (
-    <TabsPrimitive.Panel
-      className={clsx(
-        'outline-blue-800 focus-visible:rounded-md focus-visible:outline-2',
-        className,
-      )}
-      {...rest}
-    />
-  );
-}
diff --git a/packages/__tech-preview__/examples/react/src/components/Tabs/index.tsx b/packages/__tech-preview__/examples/react/src/components/Tabs/index.tsx
deleted file mode 100644
index c8eeb306..00000000
--- a/packages/__tech-preview__/examples/react/src/components/Tabs/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
-
-import { Tab } from './Tab';
-import { TabIndicator } from './TabIndicator';
-import { TabList } from './TabList';
-import { TabPanel } from './TabPanel';
-
-export const Tabs = {
-  ...TabsPrimitive,
-  Tab,
-  List: TabList,
-  Panel: TabPanel,
-  Indicator: TabIndicator,
-} as typeof TabsPrimitive;
diff --git a/packages/__tech-preview__/examples/react/src/components/VideoElement.tsx b/packages/__tech-preview__/examples/react/src/components/VideoElement.tsx
deleted file mode 100644
index b26623a4..00000000
--- a/packages/__tech-preview__/examples/react/src/components/VideoElement.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { HlsVideo } from '@videojs/react-preview';
-
-export function VideoElement(): JSX.Element {
-  return (
-    <HlsVideo
-      // @ts-expect-error -- types are incorrect
-      src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8"
-      poster="https://image.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ/thumbnail.webp"
-      playsInline
-    />
-  );
-}
diff --git a/packages/__tech-preview__/examples/react/src/components/index.ts b/packages/__tech-preview__/examples/react/src/components/index.ts
deleted file mode 100644
index 61d57c01..00000000
--- a/packages/__tech-preview__/examples/react/src/components/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './CodeBlock';
-export * from './SkinLayout';
-export * from './Tabs';
-export * from './VideoElement';
diff --git a/packages/__tech-preview__/examples/react/src/globals.css b/packages/__tech-preview__/examples/react/src/globals.css
deleted file mode 100644
index 9f038740..00000000
--- a/packages/__tech-preview__/examples/react/src/globals.css
+++ /dev/null
@@ -1,45 +0,0 @@
-@import 'tailwindcss';
-
-@theme {
-  --font-sans:
-    InterVariable, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-    'Noto Color Emoji';
-}
-
-/* Make reduced-transparency variant */
-@custom-variant reduced-transparency @media (prefers-reduced-transparency: reduce);
-
-.vjs {
-  font-family: var(--font-sans);
-}
-
-[popover].popover-from-left {
-  translate: -100% 0;
-}
-
-[popover] {
-  transition:
-    opacity 0.25s,
-    translate 0.25s,
-    overlay 0.25s allow-discrete,
-    display 0.25s allow-discrete;
-  opacity: 0;
-
-  &:popover-open {
-    opacity: 1;
-    translate: 0 0;
-  }
-}
-
-@starting-style {
-  [popover] {
-    &:popover-open {
-      opacity: 0;
-    }
-  }
-  [popover].popover-from-left {
-    &:popover-open {
-      translate: -100% 0;
-    }
-  }
-}
diff --git a/packages/__tech-preview__/examples/react/src/hooks/index.ts b/packages/__tech-preview__/examples/react/src/hooks/index.ts
deleted file mode 100644
index 47757a94..00000000
--- a/packages/__tech-preview__/examples/react/src/hooks/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './useColorScheme';
-export * from './useMediaQuery';
diff --git a/packages/__tech-preview__/examples/react/src/hooks/useColorScheme.ts b/packages/__tech-preview__/examples/react/src/hooks/useColorScheme.ts
deleted file mode 100644
index 975047f2..00000000
--- a/packages/__tech-preview__/examples/react/src/hooks/useColorScheme.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useEffect, useState } from 'react';
-
-type ColorScheme = 'light' | 'dark';
-
-export function useColorScheme(): ColorScheme {
-  const [colorScheme, setColorScheme] = useState<ColorScheme>(() => {
-    if (typeof window === 'undefined') {
-      return 'light';
-    }
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-  });
-
-  useEffect(() => {
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-    const handleChange = (event: MediaQueryListEvent) => {
-      setColorScheme(event.matches ? 'dark' : 'light');
-    };
-
-    mediaQuery.addEventListener('change', handleChange);
-
-    return () => {
-      mediaQuery.removeEventListener('change', handleChange);
-    };
-  }, []);
-
-  return colorScheme;
-}
diff --git a/packages/__tech-preview__/examples/react/src/hooks/useIsomorphicLayoutEffect.ts b/packages/__tech-preview__/examples/react/src/hooks/useIsomorphicLayoutEffect.ts
deleted file mode 100644
index 008f79ec..00000000
--- a/packages/__tech-preview__/examples/react/src/hooks/useIsomorphicLayoutEffect.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { useEffect, useLayoutEffect } from 'react';
-
-export const useIsomorphicLayoutEffect: typeof useLayoutEffect | typeof useEffect
-  = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
diff --git a/packages/__tech-preview__/examples/react/src/hooks/useMediaQuery.ts b/packages/__tech-preview__/examples/react/src/hooks/useMediaQuery.ts
deleted file mode 100644
index b9bd7084..00000000
--- a/packages/__tech-preview__/examples/react/src/hooks/useMediaQuery.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useState } from 'react';
-
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
-
-interface UseMediaQueryOptions {
-  defaultValue?: boolean;
-  initializeWithValue?: boolean;
-}
-
-const IS_SERVER = typeof window === 'undefined';
-
-export function useMediaQuery(
-  query: string,
-  {
-    defaultValue = false,
-    initializeWithValue = true,
-  }: UseMediaQueryOptions = {},
-): boolean {
-  const getMatches = (query: string): boolean => {
-    if (IS_SERVER) {
-      return defaultValue;
-    }
-    return window.matchMedia(query).matches;
-  };
-
-  const [matches, setMatches] = useState<boolean>(() => {
-    if (initializeWithValue) {
-      return getMatches(query);
-    }
-    return defaultValue;
-  });
-
-  // Handles the change event of the media query.
-  function handleChange() {
-    setMatches(getMatches(query));
-  }
-
-  useIsomorphicLayoutEffect(() => {
-    const matchMedia = window.matchMedia(query);
-
-    // Triggered at the first client-side load and if query changes
-    handleChange();
-
-    matchMedia.addEventListener('change', handleChange);
-
-    return () => {
-      matchMedia.removeEventListener('change', handleChange);
-    };
-  }, [query]);
-
-  return matches;
-}
diff --git a/packages/__tech-preview__/examples/react/src/main.tsx b/packages/__tech-preview__/examples/react/src/main.tsx
deleted file mode 100644
index 9fa2516d..00000000
--- a/packages/__tech-preview__/examples/react/src/main.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-
-import App from './App';
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-);
diff --git a/packages/__tech-preview__/examples/react/src/skins/custom/base-ui/CustomBaseUISkin.tsx b/packages/__tech-preview__/examples/react/src/skins/custom/base-ui/CustomBaseUISkin.tsx
deleted file mode 100644
index 54ea9add..00000000
--- a/packages/__tech-preview__/examples/react/src/skins/custom/base-ui/CustomBaseUISkin.tsx
+++ /dev/null
@@ -1,366 +0,0 @@
-import type { ButtonProps as ButtonPrimitiveProps } from '@base-ui-components/react/button';
-import type { SliderRootProps } from '@base-ui-components/react/slider';
-import type { ComponentProps, PropsWithChildren } from 'react';
-import { Button as ButtonPrimitive } from '@base-ui-components/react/button';
-import { Popover as PopoverPrimitive } from '@base-ui-components/react/popover';
-import { Slider as SliderPrimitive } from '@base-ui-components/react/slider';
-import { Tooltip as TooltipPrimitive } from '@base-ui-components/react/tooltip';
-
-import {
-  ArrowDownLeftIcon,
-  ArrowUpRightIcon,
-} from '@heroicons/react/16/solid';
-import {
-  PauseIcon,
-  PlayIcon,
-  SpeakerWaveIcon,
-  SpeakerXMarkIcon,
-  XMarkIcon,
-} from '@heroicons/react/20/solid';
-import {
-  MediaContainer,
-  useCurrentTimeDisplayState,
-  useFullscreenButtonState,
-  useMuteButtonState,
-  usePlayButtonState,
-  useTimeSliderRootState,
-  useVolumeSliderRootState,
-} from '@videojs/react-preview';
-import { formatDisplayTime } from '@videojs/utils-preview';
-
-import clsx from 'clsx';
-import { useCallback, useState } from 'react';
-
-type SkinProps = PropsWithChildren<{
-  className?: string;
-}>;
-
-function Surface(props: ComponentProps<'div'>) {
-  const { className, ...rest } = props;
-  return (
-    <div
-      className={clsx(
-        // Background
-        'bg-linear-to-t to-zinc-50/80 from-zinc-100/80 backdrop-blur-md dark:from-zinc-950/80 dark:to-zinc-900/80',
-        // Border & shadow
-        'ring-1 ring-black/5 shadow-xs shadow-black/15 dark:ring-white/15',
-        // Text
-        'text-zinc-900 dark:text-zinc-50',
-        className,
-      )}
-      {...rest}
-    />
-  );
-}
-
-function Popup(props: ComponentProps<typeof Surface>) {
-  const { className, ...rest } = props;
-  return (
-    <Surface
-      className={clsx(
-        'origin-(--transform-origin) transition data-instant:duration-0 translate-y-0',
-        'data-starting-style:scale-90 data-starting-style:translate-y-1 data-starting-style:opacity-0',
-        'data-ending-style:scale-90 data-ending-style:translate-y-1 data-ending-style:opacity-0',
-        className,
-      )}
-      {...rest}
-    />
-  );
-}
-
-function TooltipPopup(props: ComponentProps<typeof TooltipPrimitive.Popup>) {
-  const { className, ...rest } = props;
-  return (
-    <TooltipPrimitive.Popup
-      render={props => <Popup {...props} className="rounded-md px-2 py-1 text-xs" />}
-      {...rest}
-    />
-  );
-}
-
-const Tooltip = {
-  ...TooltipPrimitive,
-  Popup: TooltipPopup,
-};
-
-function PopoverPopup(props: ComponentProps<typeof PopoverPrimitive.Popup>) {
-  const { className, ...rest } = props;
-  return (
-    <PopoverPrimitive.Popup
-      render={props => <Popup {...props} className="rounded-lg py-3 px-1.5" />}
-      {...rest}
-    />
-  );
-}
-
-const Popover = {
-  ...PopoverPrimitive,
-  Popup: PopoverPopup,
-};
-
-type ButtonProps = Omit<ButtonPrimitiveProps, 'className'>;
-
-function Button(props: ButtonProps) {
-  return (
-    <ButtonPrimitive
-      className={clsx(
-        'flex p-1.75 hover:bg-black/5 text-zinc-700 hover:text-zinc-800 transition-colors rounded-md outline-2 outline-transparent',
-        // Focus styles
-        'focus-visible:outline-zinc-700',
-        // Dark styles
-        'dark:text-zinc-100 dark:hover:text-white dark:hover:bg-white/10 dark:focus-visible:outline-zinc-300',
-
-      )}
-      {...props}
-    />
-  );
-}
-
-function PlayButton() {
-  const { paused, requestPause, requestPlay } = usePlayButtonState();
-
-  const onClick = useCallback(() => {
-    if (paused) {
-      requestPlay();
-    } else {
-      requestPause();
-    }
-  }, [paused, requestPlay, requestPause]);
-
-  const label = paused ? 'Play' : 'Pause';
-
-  return (
-    <Tooltip.Root>
-      <Tooltip.Trigger render={(
-        <Button onClick={onClick} data-paused={paused ? '' : undefined}>
-          {paused ? <PlayIcon className="size-5" /> : <PauseIcon className="size-5" />}
-          <span className="sr-only">{label}</span>
-        </Button>
-      )}
-      />
-      <Tooltip.Portal>
-        <Tooltip.Positioner sideOffset={12} align="start">
-          <Tooltip.Popup>
-            {label}
-          </Tooltip.Popup>
-        </Tooltip.Positioner>
-      </Tooltip.Portal>
-    </Tooltip.Root>
-  );
-}
-
-function MuteButton() {
-  const { muted, requestMute, requestUnmute } = useMuteButtonState();
-  const [open, setOpen] = useState(false);
-
-  const onClick = useCallback(() => {
-    if (muted) {
-      requestUnmute();
-    } else {
-      requestMute();
-    }
-  }, [muted, requestMute, requestUnmute]);
-
-  const handleOpenChange = useCallback((isOpen: boolean, eventDetails: PopoverPrimitive.Root.ChangeEventDetails) => {
-    // Don't close when clicking the trigger button - only allow hover to control it
-    if (!isOpen && eventDetails?.reason === 'trigger-press') return;
-    setOpen(isOpen);
-  }, []);
-
-  const label = muted ? 'Unmute' : 'Mute';
-
-  return (
-    <Popover.Root open={open} onOpenChange={handleOpenChange}>
-      <Popover.Trigger
-        openOnHover
-        delay={20}
-        closeDelay={200}
-        render={(
-          <Button onClick={onClick}>
-            {muted ? <SpeakerXMarkIcon className="size-5" /> : <SpeakerWaveIcon className="size-5" />}
-            <span className="sr-only">{label}</span>
-          </Button>
-        )}
-      />
-
-      <Popover.Portal>
-        <Popover.Backdrop />
-        <Popover.Positioner sideOffset={12} side="top">
-          <Popover.Popup className="flex items-center justify-center">
-            <VolumeSlider />
-          </Popover.Popup>
-        </Popover.Positioner>
-      </Popover.Portal>
-    </Popover.Root>
-  );
-}
-
-function FullscreenButton() {
-  const { fullscreen, requestEnterFullscreen, requestExitFullscreen } = useFullscreenButtonState();
-
-  const onClick = useCallback(() => {
-    if (fullscreen) {
-      requestExitFullscreen();
-    } else {
-      requestEnterFullscreen();
-    }
-  }, [fullscreen, requestEnterFullscreen, requestExitFullscreen]);
-
-  const label = fullscreen ? 'Exit fullscreen' : 'Enter fullscreen';
-
-  return (
-    <Tooltip.Root>
-      <Tooltip.Trigger render={(
-        <Button onClick={onClick}>
-          {fullscreen
-            ? <XMarkIcon className="size-5" />
-            : (
-                <div className="grid [&_svg]:[grid-area:1/1] size-5 place-content-center">
-                  <ArrowDownLeftIcon className="size-4 -translate-x-0.5 translate-y-0.5" />
-                  <ArrowUpRightIcon className="size-4 translate-x-0.5 -translate-y-0.5" />
-                </div>
-              )}
-          <span className="sr-only">{label}</span>
-        </Button>
-      )}
-      />
-      <Tooltip.Portal>
-        <Tooltip.Positioner sideOffset={12} align="end">
-          <Tooltip.Popup>
-            {label}
-          </Tooltip.Popup>
-        </Tooltip.Positioner>
-      </Tooltip.Portal>
-    </Tooltip.Root>
-  );
-}
-
-type SliderProps = Pick<SliderRootProps<number>, 'min' | 'max' | 'step' | 'value' | 'onValueChange' | 'orientation'>;
-
-function Slider(props: SliderProps) {
-  return (
-    <SliderPrimitive.Root
-      {...props}
-      thumbAlignment="edge"
-      className="flex-1 group/slider"
-    >
-      <SliderPrimitive.Control className={clsx(
-        'flex items-center',
-        'data-[orientation="horizontal"]:h-5 data-[orientation="horizontal"]:min-w-20',
-        'data-[orientation="vertical"]:w-5 data-[orientation="vertical"]:h-20 data-[orientation="vertical"]:justify-center',
-      )}
-      >
-        <SliderPrimitive.Track className={clsx(
-          'relative select-none rounded-full bg-black/10 dark:bg-white/10',
-          'data-[orientation="horizontal"]:w-full data-[orientation="horizontal"]:h-1',
-          'data-[orientation="vertical"]:w-1 data-[orientation="vertical"]:h-full',
-        )}
-        >
-          <SliderPrimitive.Indicator className="bg-zinc-700 dark:bg-white rounded-[inherit]" />
-          <SliderPrimitive.Thumb className={clsx(
-            'z-10 bg-white size-3 select-none ring ring-black/10 rounded-full shadow-xs shadow-black/15 transition-opacity ease-in-out',
-            // Focus styles (the hidden input inside the thumb gets focus)
-            '-outline-offset-2 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-zinc-500',
-          )}
-          />
-        </SliderPrimitive.Track>
-      </SliderPrimitive.Control>
-    </SliderPrimitive.Root>
-  );
-}
-
-function TimeSlider() {
-  // TODO: Expose something like _fillWidth to facilitate debouncing etc.
-  const { currentTime, duration, requestSeek } = useTimeSliderRootState();
-
-  return (
-    <Slider
-      // FIXME: If seems that currentTime can be undefined initially
-      value={currentTime ?? 0}
-      // FIXME: If seems that duration can be undefined initially
-      // Base UI will throw an error if max is less than min (which is 0)
-      max={!duration ? 1 : duration}
-      step={0.1}
-      onValueChange={requestSeek}
-    />
-  );
-}
-
-function VolumeSlider() {
-  const { volume, muted, requestVolumeChange } = useVolumeSliderRootState();
-  // FIXME: If seems that volume can be undefined initially, despite the types.
-  const value = muted ? 0 : volume ?? 0;
-
-  return (
-    <Slider
-      value={value}
-      max={1}
-      step={0.1}
-      onValueChange={requestVolumeChange}
-      orientation="vertical"
-    />
-  );
-}
-
-interface TimeDisplayProps {
-  type: 'current' | 'duration';
-  className?: string;
-}
-
-function TimeDisplay(props: TimeDisplayProps) {
-  const { type, className } = props;
-  const { duration, currentTime } = useCurrentTimeDisplayState();
-  const value = formatDisplayTime(type === 'current' ? currentTime : duration);
-
-  return <span className={clsx('tabular-nums', className)}>{value}</span>;
-}
-
-export default function CustomBaseUISkin({ children, className }: SkinProps): JSX.Element {
-  return (
-    <MediaContainer className={clsx(
-      'relative isolate @container/root group/root overflow-clip bg-black rounded-xl',
-      // Base typography
-      'font-sans text-[0.8125rem] subpixel-antialiased',
-      // Fancy borders
-      'after:absolute after:inset-0 after:ring-black/10 after:ring-1 dark:after:ring-white/10 after:ring-inset after:z-10 after:pointer-events-none after:rounded-[inherit]',
-      // Prevent rounded corners in fullscreen
-      '[&:fullscreen]:rounded-none',
-      // Ensure the nested video inherits the radius
-      '[&_video]:w-full [&_video]:h-full',
-      className,
-    )}
-    >
-      {/* FIXME: Mismatch between React 18 & 19 types */}
-      {children as any}
-
-      <Surface className={clsx(
-        '@container/controls absolute inset-x-2 bottom-2 justify-end z-20 p-1 rounded-lg flex items-center gap-0.5',
-        // Animation
-        'transition ease-in-out',
-        //  FIXME: Temporary hide/show logic
-        'opacity-0 scale-[0.98] blur-sm delay-500 pointer-events-none origin-bottom',
-        'has-data-paused:opacity-100 has-data-paused:scale-100 has-data-paused:blur-none has-data-paused:delay-0 has-data-paused:pointer-events-auto',
-        'group-hover/root:opacity-100 group-hover/root:scale-100 group-hover/root:blur-none group-hover/root:delay-0 group-hover/root:pointer-events-auto',
-      )}
-      >
-        <Tooltip.Provider>
-          <PlayButton />
-
-          <div className="flex items-center gap-2.5 px-2 flex-1">
-            <div className="flex items-center gap-1">
-              <TimeDisplay type="current" />
-              <span className="opacity-50">/</span>
-              <TimeDisplay type="duration" className="opacity-50" />
-            </div>
-
-            <TimeSlider />
-          </div>
-
-          <MuteButton />
-
-          <FullscreenButton />
-        </Tooltip.Provider>
-      </Surface>
-    </MediaContainer>
-  );
-};
diff --git a/packages/__tech-preview__/examples/react/src/skins/custom/native/CustomNativeSkin.tsx b/packages/__tech-preview__/examples/react/src/skins/custom/native/CustomNativeSkin.tsx
deleted file mode 100644
index 95deea1f..00000000
--- a/packages/__tech-preview__/examples/react/src/skins/custom/native/CustomNativeSkin.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import type { PropsWithChildren } from 'react';
-
-import {
-  CurrentTimeDisplay,
-  DurationDisplay,
-  FullscreenButton,
-  MediaContainer,
-  MuteButton,
-  PlayButton,
-  TimeSlider,
-  VolumeSlider,
-} from '@videojs/react-preview';
-import {
-  FullscreenEnterIcon,
-  FullscreenExitIcon,
-  PauseIcon,
-  PlayIcon,
-  VolumeHighIcon,
-  VolumeLowIcon,
-  VolumeOffIcon,
-} from '@videojs/react-preview/icons';
-import styles from './styles';
-
-type SkinProps = PropsWithChildren<{
-  className?: string;
-}>;
-
-export default function CustomNativeSkin({ children, className = '' }: SkinProps): JSX.Element {
-  return (
-    <MediaContainer className={`${styles.MediaContainer} ${className}`}>
-      {/* FIXME: Mismatch between React 18 & 19 types */}
-      {children as any}
-
-      <div className={styles.Controls}>
-        <div className={styles.ControlsRow}>
-          <TimeSlider.Root className={styles.SliderRoot}>
-            <TimeSlider.Track className={styles.SliderTrack}>
-              <TimeSlider.Progress className={styles.SliderProgress} />
-              <TimeSlider.Pointer className={styles.SliderPointer} />
-            </TimeSlider.Track>
-            <TimeSlider.Thumb className={`${styles.SliderThumb} ${styles.TimeSliderThumb}`} />
-          </TimeSlider.Root>
-        </div>
-
-        <div className={styles.ControlsRow}>
-          <div className="flex items-center gap-3">
-            <PlayButton className={`${styles.Button} ${styles.IconButton} ${styles.PlayButton}`}>
-              <PlayIcon className={styles.PlayIcon}></PlayIcon>
-              <PauseIcon className={styles.PauseIcon}></PauseIcon>
-            </PlayButton>
-
-            <div className="flex items-center gap-1">
-              <CurrentTimeDisplay
-                // Use showRemaining to show count down/remaining time
-                // showRemaining
-                className={styles.TimeDisplay}
-              />
-              <span className="opacity-50">/</span>
-              <DurationDisplay className={`${styles.TimeDisplay} opacity-50`} />
-            </div>
-          </div>
-
-          <div className="flex items-center gap-0.5">
-            <div className={styles.VolumeControls}>
-              <MuteButton className={`${styles.Button} ${styles.IconButton} ${styles.VolumeButton}`}>
-                <VolumeHighIcon className={styles.VolumeHighIcon} />
-                <VolumeLowIcon className={styles.VolumeLowIcon} />
-                <VolumeOffIcon className={styles.VolumeOffIcon} />
-              </MuteButton>
-
-              <div className={styles.VolumeSlider}>
-                <VolumeSlider.Root className={styles.SliderRoot}>
-                  <VolumeSlider.Track className={styles.SliderTrack}>
-                    <VolumeSlider.Progress className={styles.SliderProgress} />
-                  </VolumeSlider.Track>
-                  <VolumeSlider.Thumb className={styles.SliderThumb} />
-                </VolumeSlider.Root>
-              </div>
-            </div>
-
-            <FullscreenButton className={`${styles.Button} ${styles.IconButton} ${styles.FullScreenButton}`}>
-              <FullscreenEnterIcon className={styles.FullScreenEnterIcon} />
-              <FullscreenExitIcon className={styles.FullScreenExitIcon} />
-            </FullscreenButton>
-          </div>
-        </div>
-      </div>
-    </MediaContainer>
-  );
-};
diff --git a/packages/__tech-preview__/examples/react/src/skins/custom/native/styles.ts b/packages/__tech-preview__/examples/react/src/skins/custom/native/styles.ts
deleted file mode 100644
index 4df6740a..00000000
--- a/packages/__tech-preview__/examples/react/src/skins/custom/native/styles.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import type { CustomNativeSkinStyles } from './types';
-
-// NOTE: Removing import to sidestep for compiler complexity (CJP)
-// import { cn } from '../../utils/cn';
-// A (very crude) utility to merge class names
-// Usually I'd use something like `clsx` or `classnames` but this is ok for our simple use case.
-// It just makes the billions of Tailwind classes a little easier to read.
-function cn(...classes: (string | undefined)[]): string {
-  return classes.filter(Boolean).join(' ');
-}
-
-const styles: CustomNativeSkinStyles = {
-  MediaContainer: cn(
-    'relative isolate @container/root group/root overflow-clip bg-black rounded-xl',
-    // Base typography
-    'font-sans text-[0.8125rem] subpixel-antialiased',
-    // Fancy borders
-    'after:absolute after:inset-0 after:ring-black/10 after:ring-1 dark:after:ring-white/10 after:ring-inset after:z-10 after:pointer-events-none after:rounded-[inherit]',
-    // Prevent rounded corners in fullscreen
-    '[&:fullscreen]:rounded-none',
-    // Ensure the nested video inherits the radius
-    '[&_video]:w-full [&_video]:h-full',
-  ),
-  Controls: cn(
-    '@container/controls absolute inset-x-0 bottom-0 top-1/3 flex flex-col justify-end z-20 px-2.5 pb-2.5 text-white text-shadow',
-    'shadow-sm shadow-black/15',
-    // Background
-    'bg-linear-to-t from-stone-950/70 via-stone-950/60 via-35% to-transparent',
-    // Animation
-    'transition ease-in-out',
-    //  FIXME: Temporary hide/show logic
-    'translate-y-full opacity-0 delay-500 pointer-events-none',
-    'has-data-paused:translate-y-0 has-data-paused:opacity-100 has-data-paused:delay-0 has-data-paused:pointer-events-auto',
-    'group-hover/root:translate-y-0 group-hover/root:opacity-100 group-hover/root:delay-0 group-hover/root:pointer-events-auto',
-  ),
-  ControlsRow: cn('flex items-center justify-between'),
-  Button: cn(
-    'group/button cursor-pointer relative shrink-0 transition select-none p-2 rounded-md',
-    // Background/foreground
-    'bg-transparent text-white/90',
-    // Hover and focus states
-    'hover:no-underline hover:bg-stone-100/10 hover:backdrop-blur-md hover:text-white focus-visible:no-underline focus-visible:bg-stone-100/10 focus-visible:text-white',
-    // Focus state
-    '-outline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500',
-    // Disabled state
-    'aria-disabled:grayscale aria-disabled:opacity-50 aria-disabled:cursor-not-allowed',
-    // Loading state
-    'aria-busy:pointer-events-none aria-busy:cursor-not-allowed',
-    // Expanded state
-    'aria-expanded:bg-stone-100/10 aria-expanded:text-white',
-    // Pressed state
-    'active:scale-95',
-  ),
-  IconButton: cn(
-    'grid [&_svg]:[grid-area:1/1]',
-    '[&_svg]:shrink-0 [&_svg]:transition [&_svg]:duration-300 [&_svg]:ease-out [&_svg]:drop-shadow-[0_1px_0_var(--tw-shadow-color)] [&_svg]:shadow-black/20',
-  ),
-  PlayButton: cn(
-    '[&_.pause-icon]:opacity-100 [&[data-paused]_.pause-icon]:opacity-0',
-    '[&_.play-icon]:opacity-0 [&[data-paused]_.play-icon]:opacity-100',
-  ),
-  PlayIcon: cn('play-icon'),
-  PauseIcon: cn('pause-icon'),
-  VolumeControls: cn('flex items-center flex-row-reverse group/volume'),
-  VolumeSlider: cn(
-    'w-0 px-3 overflow-hidden pointer-events-none transition-[opacity,width] opacity-0 ease-out delay-500',
-    'group-hover/volume:w-28 group-hover/volume:pointer-events-auto group-hover/volume:opacity-100 group-hover/volume:delay-0',
-    'group-focus-within/volume:w-28 group-focus-within/volume:pointer-events-auto group-focus-within/volume:opacity-100 group-focus-within/volume:delay-0',
-  ),
-  VolumeButton: cn(
-    '[&_svg]:hidden',
-    '[&[data-volume-level="high"]_.volume-high-icon]:inline',
-    '[&[data-volume-level="medium"]_.volume-low-icon]:inline',
-    '[&[data-volume-level="low"]_.volume-low-icon]:inline',
-    '[&[data-volume-level="off"]_.volume-off-icon]:inline',
-  ),
-  VolumeHighIcon: cn('volume-high-icon'),
-  VolumeLowIcon: cn('volume-low-icon'),
-  VolumeOffIcon: cn('volume-off-icon'),
-  FullScreenButton: cn(
-    '[&_.fullscreen-enter-icon]:opacity-100 [&[data-fullscreen]_.fullscreen-enter-icon]:opacity-0',
-    '[&_.fullscreen-exit-icon]:opacity-0 [&[data-fullscreen]_.fullscreen-exit-icon]:opacity-100',
-    '[&_path]:transition-transform ease-out',
-  ),
-  FullScreenEnterIcon: cn(
-    'fullscreen-enter-icon',
-    'group-hover/button:[&_.arrow-1]:-translate-x-px group-hover/button:[&_.arrow-1]:-translate-y-px',
-    'group-hover/button:[&_.arrow-2]:translate-x-px group-hover/button:[&_.arrow-2]:translate-y-px',
-  ),
-  FullScreenExitIcon: cn(
-    'fullscreen-exit-icon',
-    '[&_.arrow-1]:-translate-x-px [&_.arrow-1]:-translate-y-px',
-    '[&_.arrow-2]:translate-x-px [&_.arrow-2]:translate-y-px',
-    'group-hover/button:[&_.arrow-1]:translate-0',
-    'group-hover/button:[&_.arrow-2]:translate-0',
-  ),
-  TimeSliderThumb: cn(
-    'opacity-0',
-    'group-hover/slider:opacity-100 group-focus-within/slider:opacity-100',
-  ),
-  TimeDisplay: cn('tabular-nums text-shadow-2xs shadow-black/50'),
-  SliderRoot: cn(
-    'flex items-center justify-center flex-1 group/slider relative',
-    '[&[data-orientation="horizontal"]]:h-5 [&[data-orientation="horizontal"]]:min-w-20',
-    '[&[data-orientation="vertical"]]:w-5 [&[data-orientation="vertical"]]:h-20',
-  ),
-  SliderTrack: cn(
-    'relative select-none rounded-full bg-white/25 backdrop-blur-sm backdrop-brightness-90 backdrop-saturate-150 shadow-sm shadow-black/10',
-    '[&[data-orientation="horizontal"]]:w-full [&[data-orientation="horizontal"]]:h-1',
-    '[&[data-orientation="vertical"]]:w-1',
-  ),
-  SliderProgress: cn('bg-amber-500 rounded-[inherit]'),
-  // TODO: Work out what we want to do here.
-  SliderPointer: cn('rounded-[inherit]'),
-  SliderThumb: cn(
-    'bg-white z-10 select-none ring ring-black/10 rounded-full shadow-sm shadow-black/15 transition-[opacity,height,width] ease-in-out',
-    '-outline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500',
-    'size-3 active:size-3.5 group-active/slider:size-3.5 hover:cursor-ew-resize',
-  ),
-};
-
-export default styles;
diff --git a/packages/__tech-preview__/examples/react/src/skins/custom/native/types.ts b/packages/__tech-preview__/examples/react/src/skins/custom/native/types.ts
deleted file mode 100644
index 9df84e6b..00000000
--- a/packages/__tech-preview__/examples/react/src/skins/custom/native/types.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export interface CustomNativeSkinStyles {
-  readonly MediaContainer: string;
-  readonly Controls: string;
-  readonly ControlsRow: string;
-  readonly Button: string;
-  readonly IconButton: string;
-  readonly PlayButton: string;
-  readonly PlayIcon: string;
-  readonly PauseIcon: string;
-  readonly VolumeControls: string;
-  readonly VolumeSlider: string;
-  readonly VolumeButton: string;
-  readonly VolumeHighIcon: string;
-  readonly VolumeLowIcon: string;
-  readonly VolumeOffIcon: string;
-  readonly FullScreenButton: string;
-  readonly FullScreenEnterIcon: string;
-  readonly FullScreenExitIcon: string;
-  readonly TimeSliderThumb: string;
-  readonly TimeDisplay: string;
-  readonly SliderRoot: string;
-  readonly SliderTrack: string;
-  readonly SliderProgress: string;
-  readonly SliderPointer: string;
-  readonly SliderThumb: string;
-}
diff --git a/packages/__tech-preview__/examples/react/src/skins/ejected/frosted/FrostedSkin.tsx b/packages/__tech-preview__/examples/react/src/skins/ejected/frosted/FrostedSkin.tsx
deleted file mode 100644
index f32bb894..00000000
--- a/packages/__tech-preview__/examples/react/src/skins/ejected/frosted/FrostedSkin.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import type { PropsWithChildren } from 'react';
-
-import {
-  CurrentTimeDisplay,
-  DurationDisplay,
-  FullscreenButton,
-  MediaContainer,
-  MuteButton,
-  PlayButton,
-  Popover,
-  PreviewTimeDisplay,
-  TimeSlider,
-  Tooltip,
-  VolumeSlider,
-} from '@videojs/react-preview';
-import {
-  FullscreenEnterIcon,
-  FullscreenExitIcon,
-  PauseIcon,
-  PlayIcon,
-  VolumeHighIcon,
-  VolumeLowIcon,
-  VolumeOffIcon,
-} from '@videojs/react-preview/icons';
-
-import './frosted.css';
-
-type SkinProps = PropsWithChildren<{
-  className?: string;
-}>;
-
-export default function FrostedSkin({ children, className = '' }: SkinProps): JSX.Element {
-  return (
-    <MediaContainer className={`vjs-frosted-skin ${className}`}>
-      {/* FIXME: Mismatch between React 18 & 19 types */}
-      {children as any}
-
-      <div className="overlay" />
-
-      <div className="surface control-bar" data-testid="media-controls">
-        <Tooltip.Root delay={500}>
-          <Tooltip.Trigger>
-            <PlayButton className="button play-button">
-              <PlayIcon className="icon play-icon" />
-              <PauseIcon className="icon pause-icon" />
-            </PlayButton>
-          </Tooltip.Trigger>
-          <Tooltip.Positioner side="top" sideOffset={12} collisionPadding={12}>
-            <Tooltip.Popup className="tooltip-popup surface popup-animation">
-              <span className="tooltip play-tooltip">Play</span>
-              <span className="tooltip pause-tooltip">Pause</span>
-            </Tooltip.Popup>
-          </Tooltip.Positioner>
-        </Tooltip.Root>
-
-        <div className="time-controls">
-          <CurrentTimeDisplay
-            // Use showRemaining to show count down/remaining time
-            // showRemaining
-            className="time-display"
-          />
-
-          <Tooltip.Root trackCursorAxis="x">
-            <Tooltip.Trigger>
-              <TimeSlider.Root className="slider">
-                <TimeSlider.Track className="slider-track">
-                  <TimeSlider.Progress className="slider-progress" />
-                  <TimeSlider.Pointer className="slider-pointer" />
-                </TimeSlider.Track>
-                <TimeSlider.Thumb className="slider-thumb" />
-              </TimeSlider.Root>
-            </Tooltip.Trigger>
-            <Tooltip.Positioner side="top" sideOffset={18} collisionPadding={12}>
-              <Tooltip.Popup className="surface popup-animation tooltip-popup">
-                <PreviewTimeDisplay className="time-display media-preview-time-display" />
-              </Tooltip.Popup>
-            </Tooltip.Positioner>
-          </Tooltip.Root>
-
-          <DurationDisplay className="time-display" />
-        </div>
-
-        <Popover.Root openOnHover delay={200} closeDelay={100}>
-          <Popover.Trigger>
-            <MuteButton className="button mute-button">
-              <VolumeHighIcon className="icon volume-high-icon" />
-              <VolumeLowIcon className="icon volume-low-icon" />
-              <VolumeOffIcon className="icon volume-off-icon" />
-            </MuteButton>
-          </Popover.Trigger>
-          <Popover.Positioner side="top" sideOffset={12}>
-            <Popover.Popup className="surface popup-animation popover-popup">
-              <VolumeSlider.Root className="slider" orientation="vertical">
-                <VolumeSlider.Track className="slider-track">
-                  <VolumeSlider.Progress className="slider-progress" />
-                </VolumeSlider.Track>
-                <VolumeSlider.Thumb className="slider-thumb" />
-              </VolumeSlider.Root>
-            </Popover.Popup>
-          </Popover.Positioner>
-        </Popover.Root>
-
-        <Tooltip.Root delay={500}>
-          <Tooltip.Trigger>
-            <FullscreenButton className="button fullscreen-button">
-              <FullscreenEnterIcon className="icon fullscreen-enter-icon" />
-              <FullscreenExitIcon className="icon fullscreen-exit-icon" />
-            </FullscreenButton>
-          </Tooltip.Trigger>
-          <Tooltip.Positioner side="top" sideOffset={12} collisionPadding={12}>
-            <Tooltip.Popup className="surface popup-animation tooltip-popup">
-              <span className="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
-              <span className="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
-            </Tooltip.Popup>
-          </Tooltip.Positioner>
-        </Tooltip.Root>
-      </div>
-    </MediaContainer>
-  );
-}
diff --git a/packages/__tech-preview__/examples/react/src/skins/ejected/frosted/frosted.css b/packages/__tech-preview__/examples/react/src/skins/ejected/frosted/frosted.css
deleted file mode 100644
index 0a133178..00000000
--- a/packages/__tech-preview__/examples/react/src/skins/ejected/frosted/frosted.css
+++ /dev/null
@@ -1,352 +0,0 @@
-.vjs-frosted-skin * {
-  box-sizing: border-box;
-}
-
-.vjs-frosted-skin {
-  position: relative;
-  isolation: isolate;
-  container: root / inline-size;
-  overflow: clip;
-  border-radius: var(--frosted-border-radius, 2rem);
-  background: oklab(0 0 0);
-  font-family: ui-sans-serif, system-ui, sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  -webkit-font-smoothing: auto;
-  -moz-osx-font-smoothing: auto;
-}
-.vjs-frosted-skin::before,
-.vjs-frosted-skin::after {
-  content: '';
-  position: absolute;
-  pointer-events: none;
-  border-radius: inherit;
-  z-index: 10;
-}
-.vjs-frosted-skin::before {
-  inset: 1px;
-  box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.15);
-}
-.vjs-frosted-skin::after {
-  inset: 0;
-  box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.1);
-}
-
-/* Fullscreen */
-.vjs-frosted-skin:fullscreen {
-  border-radius: 0;
-}
-
-.vjs-frosted-skin > ::slotted([slot='media']) {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-/* Media Container UI Overlay Styling */
-.vjs-frosted-skin > .overlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: start;
-  pointer-events: none;
-  border-radius: inherit;
-  background-image: linear-gradient(to top, oklab(0 0 0 / 0.5), oklab(0 0 0 / 0.3), rgba(0, 0, 0, 0));
-  backdrop-filter: saturate(1.5) brightness(0.9);
-  transition: opacity 0.15s ease-out;
-  transition-duration: 100ms;
-  transition-delay: 0ms;
-}
-.vjs-frosted-skin[data-controls='hidden'] > .overlay {
-  transition-delay: 500ms;
-  transition-duration: 300ms;
-  opacity: 0;
-}
-
-/* Common Surface Styles - e.g. tooltips, popovers, controls */
-.vjs-frosted-skin .surface {
-  background-color: oklab(1 0 0 / 0.1);
-  backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);
-  box-shadow:
-    inset 0 0 0 1px oklab(1 0 0 / 0.05),
-    0 0 0 1px oklab(0 0 0 / 0.15),
-    oklab(0 0 0 / 0.15) 0px 1px 3px 0px,
-    oklab(0 0 0 / 0.15) 0px 1px 2px -1px;
-}
-@media (prefers-reduced-transparency: reduce) {
-  .vjs-frosted-skin .surface {
-    background-color: oklab(0 0 0 / 0.7);
-    box-shadow:
-      inset 0 0 0 1px oklab(0 0 0),
-      0 0 0 1px oklab(1 0 0 / 0.2);
-  }
-}
-@media (prefers-contrast: more) {
-  .vjs-frosted-skin .surface {
-    background-color: oklab(0 0 0 / 0.9);
-    box-shadow:
-      inset 0 0 0 1px oklab(0 0 0),
-      0 0 0 1px oklab(1 0 0 / 0.2);
-  }
-}
-
-/* Media Control Bar UI/Styles */
-.vjs-frosted-skin .control-bar {
-  position: absolute;
-  bottom: 0.75rem;
-  inset-inline: 0.75rem;
-  padding: 0.25rem;
-  display: flex;
-  align-items: center;
-  gap: 0.125rem;
-  color: oklab(1 0 0);
-  border-radius: calc(infinity * 1px);
-  will-change: scale, transform, filter, opacity;
-  transition-property: scale, transform, filter, opacity;
-  transition-timing-function: ease-out;
-  transition-delay: 0ms;
-  transition-duration: 100ms;
-  transform-origin: bottom;
-}
-.vjs-frosted-skin[data-controls='hidden'] .control-bar {
-  pointer-events: none;
-  filter: blur(8px);
-  scale: 0.9;
-  opacity: 0;
-  transition-delay: 500ms;
-  transition-duration: 300ms;
-}
-
-/* Time Display Styling */
-.vjs-frosted-skin .time-controls {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  gap: 0.75rem;
-  padding-inline: 0.375rem;
-}
-.vjs-frosted-skin .time-display {
-  text-shadow: 0 1px 0 oklab(0 0 0 / 0.25);
-  font-variant-numeric: tabular-nums;
-}
-
-/* Generic Media Button Styling */
-.vjs-frosted-skin .button {
-  display: grid;
-  flex-shrink: 0;
-  padding: 0.5rem;
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  border-radius: calc(infinity * 1px);
-  color: oklab(1 0 0 / 0.9);
-  user-select: none;
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-  transition-property: background-color, color, outline-offset;
-  transition-duration: 150ms;
-  transition-timing-function: ease-out;
-}
-.vjs-frosted-skin .button:hover,
-.vjs-frosted-skin .button:focus-visible,
-.vjs-frosted-skin .button[aria-expanded='true'] {
-  background-color: oklab(1 0 0 / 0.1);
-  color: oklab(1 0 0);
-  text-decoration: none;
-}
-.vjs-frosted-skin .button:focus-visible {
-  outline-color: oklch(62.3% 0.214 259.815);
-  outline-offset: 2px;
-}
-.vjs-frosted-skin .button[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-  filter: grayscale(1);
-}
-
-.vjs-frosted-skin .button .icon {
-  grid-area: 1 / 1;
-  width: 18px;
-  height: 18px;
-  filter: drop-shadow(0 1px 0 oklab(0 0 0 / 0.25));
-}
-
-/* Media Play Button UI/Styles */
-.vjs-frosted-skin .play-button .icon {
-  opacity: 0;
-  transition: opacity 150ms linear;
-}
-
-.vjs-frosted-skin .play-button:not([data-paused]) .pause-icon,
-.vjs-frosted-skin .play-button[data-paused] .play-icon {
-  opacity: 1;
-}
-
-/* Media Fullscreen Button UI/Styles */
-.vjs-frosted-skin .fullscreen-button .icon {
-  display: none;
-}
-.vjs-frosted-skin .fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,
-.vjs-frosted-skin .fullscreen-button[data-fullscreen] .fullscreen-exit-icon {
-  display: inline;
-}
-
-/* One way to define the "default visible" icon (CJP) */
-.vjs-frosted-skin .mute-button .icon {
-  display: none;
-}
-.vjs-frosted-skin .mute-button:not([data-volume-level]) .volume-low-icon,
-.vjs-frosted-skin .mute-button[data-volume-level='high'] .volume-high-icon,
-.vjs-frosted-skin .mute-button[data-volume-level='medium'] .volume-high-icon,
-.vjs-frosted-skin .mute-button[data-volume-level='low'] .volume-low-icon,
-.vjs-frosted-skin .mute-button[data-volume-level='off'] .volume-off-icon {
-  display: inline;
-}
-
-/* TimeSlider Component Styles */
-.vjs-frosted-skin .slider {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  border-radius: calc(infinity * 1px);
-  outline: none;
-}
-
-/* Horizontal orientation styles */
-.vjs-frosted-skin .slider[data-orientation='horizontal'] {
-  min-width: 5rem;
-  width: 100%;
-  height: 1.25rem;
-}
-
-/* Vertical orientation styles */
-.vjs-frosted-skin .slider[data-orientation='vertical'] {
-  height: 5rem;
-  width: 1.25rem;
-}
-
-.vjs-frosted-skin .slider-track {
-  position: relative;
-  isolation: isolate;
-  background-color: oklab(1 0 0 / 0.2);
-  border-radius: inherit;
-  overflow: hidden;
-  user-select: none;
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-  transition: outline-offset 150ms ease-out;
-  box-shadow: 0 0 0 1px oklab(0 0 0 / 0.05);
-}
-
-/* Horizontal track styles */
-.vjs-frosted-skin .slider-track[data-orientation='horizontal'] {
-  width: 100%;
-  height: 0.25rem;
-}
-
-/* Vertical track styles */
-.vjs-frosted-skin .slider-track[data-orientation='vertical'] {
-  width: 0.25rem;
-  height: 100%;
-}
-
-.vjs-frosted-skin .slider:focus-visible .slider-track {
-  outline-color: oklch(62.3% 0.214 259.815);
-  outline-offset: 6px;
-}
-
-.vjs-frosted-skin .slider-thumb {
-  width: 0.625rem;
-  height: 0.625rem;
-  background-color: oklab(1 0 0);
-  border-radius: calc(infinity * 1px);
-  user-select: none;
-  z-index: 10;
-  box-shadow:
-    0 0 0 1px oklab(0 0 0 / 0.1),
-    0 1px 3px 0 oklab(0 0 0 / 0.15),
-    0 1px 2px -1px oklab(0 0 0 / 0.15);
-  opacity: 0;
-  transition-property: opacity, height, width;
-  transition-duration: 150ms;
-  transition-timing-function: ease-out;
-}
-.vjs-frosted-skin .slider-thumb:active {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-.vjs-frosted-skin .slider:hover .slider-thumb,
-.vjs-frosted-skin .slider:focus-within .slider-thumb {
-  opacity: 1;
-}
-.vjs-frosted-skin .slider-track[data-orientation='horizontal'] .slider-thumb {
-  cursor: ew-resize;
-}
-.vjs-frosted-skin .slider-track[data-orientation='vertical'] .slider-thumb {
-  cursor: ns-resize;
-}
-
-.vjs-frosted-skin .slider-pointer {
-  background-color: oklab(1 0 0 / 0.2);
-  border-radius: inherit;
-}
-
-.vjs-frosted-skin .slider-progress {
-  background-color: oklab(1 0 0);
-  border-radius: inherit;
-}
-
-.vjs-frosted-skin .media-preview-time-display {
-  font-variant-numeric: tabular-nums;
-}
-
-.vjs-frosted-skin .popup-animation {
-  transition-property: transform, scale, opacity, filter;
-  transition-duration: 200ms;
-  transform: scale(1);
-  transform-origin: bottom;
-  opacity: 1;
-  filter: blur(0px);
-}
-.vjs-frosted-skin .popup-animation[data-starting-style],
-.vjs-frosted-skin .popup-animation[data-ending-style] {
-  transform: scale(0);
-  opacity: 0;
-  filter: blur(8px);
-}
-.vjs-frosted-skin .popup-animation[data-instant] {
-  transition-duration: 0ms;
-}
-
-.vjs-frosted-skin .popover-popup {
-  padding: 0.75rem 0.25rem;
-  border-radius: calc(infinity * 1px);
-  margin: 0;
-  border: 0;
-}
-
-/* Tooltip Component Styles */
-.vjs-frosted-skin .tooltip-popup {
-  color: oklab(1 0 0);
-  padding: 0.25rem 0.625rem;
-  border-radius: calc(infinity * 1px);
-  font-size: 0.75rem;
-}
-
-.vjs-frosted-skin .tooltip {
-  display: none;
-  white-space: nowrap;
-}
-
-.vjs-frosted-skin .tooltip-popup[data-paused] .play-tooltip,
-.vjs-frosted-skin .tooltip-popup:not([data-paused]) .pause-tooltip {
-  display: block;
-}
-
-.vjs-frosted-skin .tooltip-popup[data-fullscreen] .fullscreen-exit-tooltip,
-.vjs-frosted-skin .tooltip-popup:not([data-fullscreen]) .fullscreen-enter-tooltip {
-  display: block;
-}
diff --git a/packages/__tech-preview__/examples/react/src/skins/ejected/minimal/MinimalSkin.tsx b/packages/__tech-preview__/examples/react/src/skins/ejected/minimal/MinimalSkin.tsx
deleted file mode 100644
index 25db946c..00000000
--- a/packages/__tech-preview__/examples/react/src/skins/ejected/minimal/MinimalSkin.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import type { PropsWithChildren } from 'react';
-
-import {
-  CurrentTimeDisplay,
-  DurationDisplay,
-  FullscreenButton,
-  MediaContainer,
-  MuteButton,
-  PlayButton,
-  Popover,
-  PreviewTimeDisplay,
-  TimeSlider,
-  Tooltip,
-  VolumeSlider,
-} from '@videojs/react-preview';
-import {
-  FullscreenEnterAltIcon,
-  FullscreenExitAltIcon,
-  PauseIcon,
-  PlayIcon,
-  VolumeHighIcon,
-  VolumeLowIcon,
-  VolumeOffIcon,
-} from '@videojs/react-preview/icons';
-
-import './minimal.css';
-
-type SkinProps = PropsWithChildren<{
-  className?: string;
-}>;
-
-export default function MinimalSkin({ children, className = '' }: SkinProps): JSX.Element {
-  return (
-    <MediaContainer className={`vjs-minimal-skin ${className}`}>
-      {/* FIXME: Mismatch between React 18 & 19 types */}
-      {children as any}
-
-      <div className="overlay" />
-
-      <div className="control-bar">
-        <Tooltip.Root delay={500} closeDelay={0}>
-          <Tooltip.Trigger>
-            <PlayButton className="button play-button">
-              <PlayIcon className="icon play-icon" />
-              <PauseIcon className="icon pause-icon" />
-            </PlayButton>
-          </Tooltip.Trigger>
-          <Tooltip.Positioner side="top-start" sideOffset={6} collisionPadding={12}>
-            <Tooltip.Popup className="popup-animation tooltip-popup">
-              <span className="tooltip play-tooltip">Play</span>
-              <span className="tooltip pause-tooltip">Pause</span>
-            </Tooltip.Popup>
-          </Tooltip.Positioner>
-        </Tooltip.Root>
-
-        <div className="time-display-group">
-          <CurrentTimeDisplay
-            // Use showRemaining to show count down/remaining time
-            // showRemaining
-            className="time-display"
-          />
-
-          <span className="duration-display">
-            /
-            <DurationDisplay className="time-display" />
-          </span>
-        </div>
-
-        <Tooltip.Root trackCursorAxis="x">
-          <Tooltip.Trigger>
-            <TimeSlider.Root className="slider">
-              <TimeSlider.Track className="slider-track">
-                <TimeSlider.Progress className="slider-progress" />
-                <TimeSlider.Pointer className="slider-pointer" />
-              </TimeSlider.Track>
-              <TimeSlider.Thumb className="slider-thumb" />
-            </TimeSlider.Root>
-          </Tooltip.Trigger>
-          <Tooltip.Positioner side="top" sideOffset={12} collisionPadding={12}>
-            <Tooltip.Popup className="popup-animation tooltip-popup">
-              <PreviewTimeDisplay className="time-display media-preview-time-display" />
-            </Tooltip.Popup>
-          </Tooltip.Positioner>
-        </Tooltip.Root>
-
-        <div className="button-group">
-          <Popover.Root openOnHover delay={200} closeDelay={300}>
-            <Popover.Trigger>
-              <MuteButton className="button mute-button">
-                <VolumeHighIcon className="icon volume-high-icon" />
-                <VolumeLowIcon className="icon volume-low-icon" />
-                <VolumeOffIcon className="icon volume-off-icon" />
-              </MuteButton>
-            </Popover.Trigger>
-            <Popover.Positioner side="top" sideOffset={2}>
-              <Popover.Popup className="popup-animation popover-popup">
-                <VolumeSlider.Root className="slider" orientation="vertical">
-                  <VolumeSlider.Track className="slider-track">
-                    <VolumeSlider.Progress className="slider-progress" />
-                  </VolumeSlider.Track>
-                  <VolumeSlider.Thumb className="slider-thumb" />
-                </VolumeSlider.Root>
-              </Popover.Popup>
-            </Popover.Positioner>
-          </Popover.Root>
-
-          <Tooltip.Root delay={500} closeDelay={0}>
-            <Tooltip.Trigger>
-              <FullscreenButton className="button fullscreen-button">
-                <FullscreenEnterAltIcon className="icon fullscreen-enter-icon" />
-                <FullscreenExitAltIcon className="icon fullscreen-exit-icon" />
-              </FullscreenButton>
-            </Tooltip.Trigger>
-            <Tooltip.Positioner side="top-end" sideOffset={6} collisionPadding={12}>
-              <Tooltip.Popup className="popup-animation tooltip-popup">
-                <span className="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
-                <span className="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
-              </Tooltip.Popup>
-            </Tooltip.Positioner>
-          </Tooltip.Root>
-        </div>
-      </div>
-    </MediaContainer>
-  );
-}
diff --git a/packages/__tech-preview__/examples/react/src/skins/ejected/minimal/minimal.css b/packages/__tech-preview__/examples/react/src/skins/ejected/minimal/minimal.css
deleted file mode 100644
index c8cada81..00000000
--- a/packages/__tech-preview__/examples/react/src/skins/ejected/minimal/minimal.css
+++ /dev/null
@@ -1,347 +0,0 @@
-.vjs-minimal-skin * {
-  box-sizing: border-box;
-}
-
-.vjs-minimal-skin {
-  position: relative;
-  isolation: isolate;
-  container: root / inline-size;
-  overflow: clip;
-  border-radius: var(--minimal-border-radius, 0.75rem);
-  background: oklab(0 0 0);
-  font-family: ui-sans-serif, system-ui, sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  -webkit-font-smoothing: auto;
-  -moz-osx-font-smoothing: auto;
-}
-.vjs-minimal-skin::after {
-  content: '';
-  position: absolute;
-  pointer-events: none;
-  border-radius: inherit;
-  z-index: 10;
-  inset: 0;
-  box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.15);
-}
-@media (prefers-color-scheme: dark) {
-  .vjs-minimal-skin::after {
-    box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.15);
-  }
-}
-
-/* Fullscreen */
-.vjs-minimal-skin:fullscreen {
-  border-radius: 0;
-}
-
-.vjs-minimal-skin > ::slotted([slot='media']) {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-/* Media Container UI Overlay Styling */
-.vjs-minimal-skin > .overlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: start;
-  pointer-events: none;
-  border-radius: inherit;
-  background-image: linear-gradient(to top, oklab(0 0 0 / 0.7), oklab(0 0 0 / 0.5) 7.5rem, rgba(0, 0, 0, 0));
-  transition-property: opacity;
-  transition-duration: 75ms;
-  transition-delay: 0ms;
-  transition-timing-function: ease-out;
-}
-.vjs-minimal-skin[data-controls='hidden'] > .overlay {
-  opacity: 0;
-  transition-duration: 500ms;
-  transition-delay: 500ms;
-}
-
-/* Media Control Bar UI/Styles */
-.vjs-minimal-skin .control-bar {
-  position: absolute;
-  bottom: 0;
-  inset-inline: 0;
-  padding: 2rem 0.375rem 0.375rem 0.375rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  will-change: transform, filter, opacity;
-  transition-property: transform, filter, opacity;
-  transition-delay: 0ms;
-  transition-duration: 75ms;
-  transition-timing-function: ease-out;
-  color: oklab(1 0 0);
-}
-.vjs-minimal-skin[data-controls='hidden'] > .control-bar {
-  opacity: 0;
-  transform: translateY(100%);
-  filter: blur(8px);
-  transition-delay: 500ms;
-  transition-duration: 500ms;
-  pointer-events: none;
-}
-@container root (width > 640px) {
-  .vjs-minimal-skin .control-bar {
-    padding: 2.5rem 0.75rem 0.75rem 0.75rem;
-    gap: 0.875rem;
-  }
-}
-
-/* Time Display Styling */
-.vjs-minimal-skin .time-display-group {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-.vjs-minimal-skin .duration-display {
-  display: contents;
-  color: oklab(1 0 0 / 0.5);
-}
-.vjs-minimal-skin .time-display {
-  text-shadow: 0 1px 0 oklab(0 0 0 / 0.2);
-  font-variant-numeric: tabular-nums;
-}
-
-.vjs-minimal-skin .button-group {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-
-/* Generic Media Button Styling */
-.vjs-minimal-skin .button {
-  display: grid;
-  flex-shrink: 0;
-  padding: 0.625rem;
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  border-radius: 0.375rem;
-  color: oklab(1 0 0);
-  user-select: none;
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-  transition-property: background-color, color, outline-offset;
-  transition-duration: 150ms;
-  transition-timing-function: ease-out;
-}
-.vjs-minimal-skin .button:hover,
-.vjs-minimal-skin .button:focus-visible,
-.vjs-minimal-skin .button[aria-expanded='true'] {
-  color: oklab(1 0 0 / 0.8);
-  text-decoration: none;
-}
-.vjs-minimal-skin .button:focus-visible {
-  outline-color: oklab(1 0 0);
-  outline-offset: 2px;
-}
-.vjs-minimal-skin .button[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-  filter: grayscale(1);
-}
-
-.vjs-minimal-skin .button .icon {
-  grid-area: 1 / 1;
-  width: 18px;
-  height: 18px;
-  filter: drop-shadow(0 1px 0 oklab(0 0 0 / 0.4));
-}
-
-/* Media Play Button UI/Styles */
-.vjs-minimal-skin .play-button .icon {
-  opacity: 0;
-  transition: opacity 150ms linear;
-}
-
-.vjs-minimal-skin .play-button:not([data-paused]) .pause-icon,
-.vjs-minimal-skin .play-button[data-paused] .play-icon {
-  opacity: 1;
-}
-
-/* Media Fullscreen Button UI/Styles */
-.vjs-minimal-skin .fullscreen-button .icon {
-  display: none;
-}
-.vjs-minimal-skin .fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,
-.vjs-minimal-skin .fullscreen-button[data-fullscreen] .fullscreen-exit-icon {
-  display: inline;
-}
-
-/* One way to define the "default visible" icon (CJP) */
-.vjs-minimal-skin .mute-button .icon {
-  display: none;
-}
-.vjs-minimal-skin .mute-button:not([data-volume-level]) .volume-low-icon,
-.vjs-minimal-skin .mute-button[data-volume-level='high'] .volume-high-icon,
-.vjs-minimal-skin .mute-button[data-volume-level='medium'] .volume-high-icon,
-.vjs-minimal-skin .mute-button[data-volume-level='low'] .volume-low-icon,
-.vjs-minimal-skin .mute-button[data-volume-level='off'] .volume-off-icon {
-  display: inline;
-}
-
-/* TimeSlider Component Styles */
-.vjs-minimal-skin .slider {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  border-radius: calc(infinity * 1px);
-  outline: none;
-}
-
-/* Horizontal orientation styles */
-.vjs-minimal-skin .slider[data-orientation='horizontal'] {
-  min-width: 5rem;
-  width: 100%;
-  height: 1.25rem;
-}
-
-/* Vertical orientation styles */
-.vjs-minimal-skin .slider[data-orientation='vertical'] {
-  height: 4.5rem;
-  width: 1.25rem;
-}
-
-.vjs-minimal-skin .slider-track {
-  position: relative;
-  isolation: isolate;
-  background-color: oklab(1 0 0 / 0.2);
-  border-radius: inherit;
-  overflow: hidden;
-  user-select: none;
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-  transition: outline-offset 150ms ease-out;
-  box-shadow: 0 0 0 1px oklab(0 0 0 / 0.05);
-}
-
-/* Horizontal track styles */
-.vjs-minimal-skin .slider-track[data-orientation='horizontal'] {
-  width: 100%;
-  height: 0.1875rem;
-}
-
-/* Vertical track styles */
-.vjs-minimal-skin .slider-track[data-orientation='vertical'] {
-  width: 0.1875rem;
-  height: 100%;
-}
-
-.vjs-minimal-skin .slider:focus-visible .slider-track {
-  outline-color: oklab(1 0 0);
-  outline-offset: 6px;
-}
-
-.vjs-minimal-skin .slider-thumb {
-  width: 0.75rem;
-  height: 0.75rem;
-  background-color: oklab(1 0 0);
-  border-radius: calc(infinity * 1px);
-  user-select: none;
-  z-index: 10;
-  box-shadow:
-    0 0 0 1px oklab(0 0 0 / 0.1),
-    0 1px 3px 0 oklab(0 0 0 / 0.15),
-    0 1px 2px -1px oklab(0 0 0 / 0.15);
-  opacity: 0;
-  scale: 0.7;
-  transform-origin: center;
-  transition-property: opacity, scale;
-  transition-duration: 150ms;
-  transition-timing-function: ease-out;
-}
-.vjs-minimal-skin .slider:hover .slider-thumb,
-.vjs-minimal-skin .slider:focus-within .slider-thumb {
-  opacity: 1;
-  scale: 1;
-}
-.vjs-minimal-skin .slider-track[data-orientation='horizontal'] .slider-thumb {
-  cursor: ew-resize;
-}
-.vjs-minimal-skin .slider-track[data-orientation='vertical'] .slider-thumb {
-  cursor: ns-resize;
-}
-
-.vjs-minimal-skin .slider-pointer {
-  display: none;
-}
-
-.vjs-minimal-skin .slider-progress {
-  background-color: oklab(1 0 0);
-  border-radius: inherit;
-}
-
-.vjs-minimal-skin .media-preview-time-display {
-  font-variant-numeric: tabular-nums;
-}
-
-.vjs-minimal-skin .popup-animation {
-  transition-property: transform, scale, opacity, filter;
-  transition-duration: 200ms;
-  transform: scale(1);
-  transform-origin: bottom;
-  opacity: 1;
-  filter: blur(0px);
-}
-.vjs-minimal-skin .popup-animation[data-starting-style],
-.vjs-minimal-skin .popup-animation[data-ending-style] {
-  transform: scale(0);
-  opacity: 0;
-  filter: blur(8px);
-}
-.vjs-minimal-skin .popup-animation[data-instant] {
-  transition-duration: 0ms;
-}
-
-.vjs-minimal-skin .popover-popup {
-  padding: 0.5rem;
-  margin: 0;
-  border: 0;
-  background: transparent;
-}
-
-/* Tooltip Component Styles */
-.vjs-minimal-skin .tooltip-popup {
-  color: oklab(1 0 0);
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  background-color: oklab(1 0 0 / 0.1);
-  backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);
-  box-shadow:
-    0 4px 6px -1px oklab(0 0 0 / 0.1),
-    0 2px 4px -2px oklab(0 0 0 / 0.1);
-}
-@media (prefers-reduced-transparency: reduce) {
-  .vjs-minimal-skin .tooltip-popup {
-    background-color: oklab(0 0 0 / 0.7);
-  }
-}
-@media (prefers-contrast: more) {
-  .vjs-minimal-skin .tooltip-popup {
-    background-color: oklab(0 0 0 / 0.9);
-  }
-}
-
-.vjs-minimal-skin .tooltip {
-  display: none;
-  white-space: nowrap;
-}
-
-.vjs-minimal-skin .tooltip-popup[data-paused] .play-tooltip,
-.vjs-minimal-skin .tooltip-popup:not([data-paused]) .pause-tooltip {
-  display: block;
-}
-
-.vjs-minimal-skin .tooltip-popup[data-fullscreen] .fullscreen-exit-tooltip,
-.vjs-minimal-skin .tooltip-popup:not([data-fullscreen]) .fullscreen-enter-tooltip {
-  display: block;
-}
diff --git a/packages/__tech-preview__/examples/react/src/skins/imported/FrostedSkin.tsx b/packages/__tech-preview__/examples/react/src/skins/imported/FrostedSkin.tsx
deleted file mode 100644
index 2ecc422e..00000000
--- a/packages/__tech-preview__/examples/react/src/skins/imported/FrostedSkin.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import '@videojs/react-preview/skins/frosted.css';
-
-export { FrostedSkin as default } from '@videojs/react-preview';
diff --git a/packages/__tech-preview__/examples/react/src/skins/imported/MinimalSkin.tsx b/packages/__tech-preview__/examples/react/src/skins/imported/MinimalSkin.tsx
deleted file mode 100644
index 73706afa..00000000
--- a/packages/__tech-preview__/examples/react/src/skins/imported/MinimalSkin.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import '@videojs/react-preview/skins/minimal.css';
-
-export { MinimalSkin as default } from '@videojs/react-preview';
diff --git a/packages/__tech-preview__/examples/react/tsconfig.json b/packages/__tech-preview__/examples/react/tsconfig.json
deleted file mode 100644
index 7c13dda8..00000000
--- a/packages/__tech-preview__/examples/react/tsconfig.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "react",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  },
-  "include": ["src", "vite-env.d.ts"]
-}
diff --git a/packages/__tech-preview__/examples/react/vercel.json b/packages/__tech-preview__/examples/react/vercel.json
deleted file mode 100644
index 0f32683a..00000000
--- a/packages/__tech-preview__/examples/react/vercel.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
-}
diff --git a/packages/__tech-preview__/examples/react/vite-env.d.ts b/packages/__tech-preview__/examples/react/vite-env.d.ts
deleted file mode 100644
index 11f02fe2..00000000
--- a/packages/__tech-preview__/examples/react/vite-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
diff --git a/packages/__tech-preview__/examples/react/vite.config.ts b/packages/__tech-preview__/examples/react/vite.config.ts
deleted file mode 100644
index 5baceff2..00000000
--- a/packages/__tech-preview__/examples/react/vite.config.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import path from 'node:path';
-
-import tailwindcss from '@tailwindcss/vite';
-import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
-
-// https://vitejs.dev/config
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
-    },
-    dedupe: ['react', 'react-dom'],
-  },
-  server: {
-    port: 5173,
-  },
-  optimizeDeps: {
-    exclude: ['@vjs/react'],
-  },
-});
diff --git a/packages/__tech-preview__/html/CHANGELOG.md b/packages/__tech-preview__/html/CHANGELOG.md
deleted file mode 100644
index e823ee1f..00000000
--- a/packages/__tech-preview__/html/CHANGELOG.md
+++ /dev/null
@@ -1,232 +0,0 @@
-# Changelog
-
-## [0.1.0-preview.10](https://github.com/videojs/v10/compare/@videojs/html@0.1.0-preview.9...@videojs/html@0.1.0-preview.10) (2025-12-06)
-
-
-### Features
-
-* add console banner ([#186](https://github.com/videojs/v10/issues/186)) ([072b0de](https://github.com/videojs/v10/commit/072b0dece76289d7d4215907ce70b36debbb78bc))
-* add tooltip core ([#212](https://github.com/videojs/v10/issues/212)) ([cbf41ce](https://github.com/videojs/v10/commit/cbf41ce4c750cd5c3bb6cbf247bad91ccd578cd0))
-
-
-### Bug Fixes
-
-* add popover core, use in html and improve factory ([#204](https://github.com/videojs/v10/issues/204)) ([f3b1b19](https://github.com/videojs/v10/commit/f3b1b199173f3750bc05ad9063fcccbd4163b12b))
-* use popover core in react popover ([#208](https://github.com/videojs/v10/issues/208)) ([99fef78](https://github.com/videojs/v10/commit/99fef78f63e8dd121513b9cd20696a7d35603837))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/core bumped to 0.1.0-preview.10
-    * @videojs/icons bumped to 0.1.0-preview.10
-    * @videojs/utils bumped to 0.1.0-preview.10
-
-## [0.1.0-preview.9](https://github.com/videojs/v10/compare/@videojs/html@0.1.0-preview.8...@videojs/html@0.1.0-preview.9) (2025-11-18)
-
-
-### Bug Fixes
-
-* clean up core, less seams in wrappers ([#197](https://github.com/videojs/v10/issues/197)) ([601a5a3](https://github.com/videojs/v10/commit/601a5a37939605ca38f81a825fd02934e7928c39))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/core bumped to 0.1.0-preview.9
-    * @videojs/icons bumped to 0.1.0-preview.9
-    * @videojs/utils bumped to 0.1.0-preview.9
-
-## [0.1.0-preview.8](https://github.com/videojs/v10/compare/@videojs/html@0.1.0-preview.7...@videojs/html@0.1.0-preview.8) (2025-11-12)
-
-
-### Miscellaneous Chores
-
-* **@videojs/html:** Synchronize videojs versions
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/core bumped to 0.1.0-preview.8
-    * @videojs/icons bumped to 0.1.0-preview.8
-    * @videojs/utils bumped to 0.1.0-preview.8
-
-## [0.1.0-preview.7](https://github.com/videojs/v10/compare/@videojs/html@0.1.0-preview.6...@videojs/html@0.1.0-preview.7) (2025-11-11)
-
-
-### Features
-
-* **react:** use popover and anchor position API ([#178](https://github.com/videojs/v10/issues/178)) ([f513c74](https://github.com/videojs/v10/commit/f513c74a6cebc09ac76512bb86af10a33350f900))
-* use anchor API for html elements ([#174](https://github.com/videojs/v10/issues/174)) ([4a2d580](https://github.com/videojs/v10/commit/4a2d580bb3db35d17d89827326617d0bd2c54499))
-
-
-### Bug Fixes
-
-* **skins:** remove vjs- prefixed CSS custom properties ([#179](https://github.com/videojs/v10/issues/179)) ([a62623b](https://github.com/videojs/v10/commit/a62623ba41d294edead981a1b468f7f486c91625))
-* **skins:** slightly more idiomatic Tailwind, added custom properties ([#175](https://github.com/videojs/v10/issues/175)) ([694afb7](https://github.com/videojs/v10/commit/694afb7de992edbd667bc3d895df8bf198ccabb3))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/core bumped to 0.1.0-preview.7
-    * @videojs/icons bumped to 0.1.0-preview.7
-    * @videojs/utils bumped to 0.1.0-preview.7
-
-## [0.1.0-preview.6](https://github.com/videojs/v10/compare/@videojs/html@0.1.0-preview.5...@videojs/html@0.1.0-preview.6) (2025-11-06)
-
-
-### Bug Fixes
-
-* **react, html:** rename MediaProvider (and related) to VideoProvider ([#159](https://github.com/videojs/v10/issues/159)) ([f285573](https://github.com/videojs/v10/commit/f28557359c7dda0282f9d532fa4b2fce19766e40))
-* **site:** update discord link ([#170](https://github.com/videojs/v10/issues/170)) ([bb10294](https://github.com/videojs/v10/commit/bb10294419439fb02df650f3e7f7c5496ecc3a73))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/core bumped to 0.1.0-preview.6
-    * @videojs/icons bumped to 0.1.0-preview.6
-    * @videojs/utils bumped to 0.1.0-preview.6
-
-## [0.1.0-preview.5](https://github.com/videojs/v10/compare/@videojs/html@0.1.0-preview.4...@videojs/html@0.1.0-preview.5) (2025-11-03)
-
-
-### Features
-
-* update html tooltip API / use command attr ([#151](https://github.com/videojs/v10/issues/151)) ([1e7c8ae](https://github.com/videojs/v10/commit/1e7c8ae82e317bada5b7bc2346d5b73b5f9bf5b7))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/core bumped to 0.1.0-preview.5
-    * @videojs/icons bumped to 0.1.0-preview.5
-    * @videojs/utils bumped to 0.1.0-preview.5
-
-## [0.1.0-preview.4](https://github.com/videojs/v10/compare/@videojs/html@0.1.0-preview.3...@videojs/html@0.1.0-preview.4) (2025-10-30)
-
-
-### Features
-
-* **html:** add element registrations ([eaaa03c](https://github.com/videojs/v10/commit/eaaa03c284f9fc3c9069bedb74d95c8a951c1b56))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/core bumped to 0.1.0-preview.4
-    * @videojs/icons bumped to 0.1.0-preview.4
-    * @videojs/utils bumped to 0.1.0-preview.4
-
-## [0.1.0-preview.3](https://github.com/videojs/v10/compare/@videojs/html@0.1.0-preview.2...@videojs/html@0.1.0-preview.3) (2025-10-29)
-
-
-### Features
-
-* idiomatic html markup, use popover API, add safe polygon utility ([#143](https://github.com/videojs/v10/issues/143)) ([419911f](https://github.com/videojs/v10/commit/419911f2f2b9f505700f5becb623bfe12e3878aa))
-* **skins:** add html port of minimal skin ([#140](https://github.com/videojs/v10/issues/140)) ([47ac22e](https://github.com/videojs/v10/commit/47ac22e9b8a513c9640ed1eff20838d8cdb749ce))
-* **ui:** skin design improvements, add html frosted skin (WIP) ([#133](https://github.com/videojs/v10/issues/133)) ([75a90e7](https://github.com/videojs/v10/commit/75a90e71041c2d0bf434823e59dd04f86f89b0bb))
-
-
-### Bug Fixes
-
-* add aria-hidden to focus guards ([77182f1](https://github.com/videojs/v10/commit/77182f1ab349d3b31470d7301e3dc2fb94c1d6ac))
-* add aspect-ratio to demos ([#136](https://github.com/videojs/v10/issues/136)) ([e0a46de](https://github.com/videojs/v10/commit/e0a46de0ab56199afd37b24ebfce93ee85e2b699))
-* add viewport meta element ([#135](https://github.com/videojs/v10/issues/135)) ([3bd50eb](https://github.com/videojs/v10/commit/3bd50ebac887229199fa6997eb0aaec361075b1a))
-* **packages:** update version badges ([#138](https://github.com/videojs/v10/issues/138)) ([22d9cb6](https://github.com/videojs/v10/commit/22d9cb64f2e5b9601a2039bb166dbe3fee6a1b3e))
-* remove `show-remaining` in HTML example ([#137](https://github.com/videojs/v10/issues/137)) ([7dde67a](https://github.com/videojs/v10/commit/7dde67ac927d6aca0f6a9b219ff3f3dc38594805))
-* visually hidden focus guards ([#142](https://github.com/videojs/v10/issues/142)) ([956dad7](https://github.com/videojs/v10/commit/956dad7ff5731d7630526ec97e33c652f260bc13))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/core bumped to 0.1.0-preview.3
-    * @videojs/icons bumped to 0.1.0-preview.3
-    * @videojs/utils bumped to 0.1.0-preview.3
-
-## [0.1.0-preview.2](https://github.com/videojs/v10/compare/@videojs/html@0.1.0-preview.1...@videojs/html@0.1.0-preview.2) (2025-10-25)
-
-
-### Miscellaneous Chores
-
-* **@videojs/html:** Synchronize videojs versions
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/core bumped to 0.1.0-preview.2
-    * @videojs/icons bumped to 0.1.0-preview.2
-    * @videojs/utils bumped to 0.1.0-preview.2
-
-## [0.1.0-preview.1](https://github.com/videojs/v10/compare/@videojs/html@0.1.0-preview.0...@videojs/html@0.1.0-preview.1) (2025-10-25)
-
-
-### Features
-
-* add compound html timerange component ([#14](https://github.com/videojs/v10/issues/14)) ([017ecdb](https://github.com/videojs/v10/commit/017ecdbff991d140ea42e4a855269a54e0a19adc))
-* add core range, time and volume range ([#23](https://github.com/videojs/v10/issues/23)) ([687b765](https://github.com/videojs/v10/commit/687b7655b0b6356c28663ca85c8f6d25a1023c18))
-* add data style attributes to popover ([#62](https://github.com/videojs/v10/issues/62)) ([6d7325c](https://github.com/videojs/v10/commit/6d7325cedb182c37b955e729d32204e4afbba948))
-* add display click to play / pause ([#117](https://github.com/videojs/v10/issues/117)) ([4f06ef6](https://github.com/videojs/v10/commit/4f06ef6c7684fd7064ca76685003a1c38ebd09cd))
-* add focus state to sliders and volume slider ([#60](https://github.com/videojs/v10/issues/60)) ([f514051](https://github.com/videojs/v10/commit/f514051263f95d892315eed9d44b3d83829e5d4b))
-* add html preview time display ([#58](https://github.com/videojs/v10/issues/58)) ([871701a](https://github.com/videojs/v10/commit/871701a453e49192ef986d286aaf957c0f533a93))
-* add HTML tooltip component ([#40](https://github.com/videojs/v10/issues/40)) ([d2a0b27](https://github.com/videojs/v10/commit/d2a0b27272f1967e5f7cde2df12920af92e3c300))
-* add HTML vertical orientation to time and volume ([#32](https://github.com/videojs/v10/issues/32)) ([7b79854](https://github.com/videojs/v10/commit/7b798543042e53e3c0a718b54b6c69038bbc1fcd))
-* add keyboard control to sliders ([#115](https://github.com/videojs/v10/issues/115)) ([0a49026](https://github.com/videojs/v10/commit/0a4902623d58f51055b1cc65498a0e716533ec29))
-* add media-popover, cleanup html demo ([#34](https://github.com/videojs/v10/issues/34)) ([17b632f](https://github.com/videojs/v10/commit/17b632f5f9c7ad6c4d84115e7ef42ee02e4ac2ba))
-* add showRemaining functionality to current time display ([ab07a8a](https://github.com/videojs/v10/commit/ab07a8a9a26f68066e292718f3cd17a2640c5477))
-* add tooltip transition status ([05988a8](https://github.com/videojs/v10/commit/05988a82ba10fe10eaa277d65bdf99cb022ff0e0))
-* add volume range compound component ([#19](https://github.com/videojs/v10/issues/19)) ([aefe890](https://github.com/videojs/v10/commit/aefe890fee93981542282087b2f2c7474f1b47e6))
-* **core,html,react:** implement VolumeRange component with integrated state management ([2282f47](https://github.com/videojs/v10/commit/2282f4799b1c3fc3c55473bdfc2def86384d5d19))
-* **html:** add fullscreen button component and icons ([63a3402](https://github.com/videojs/v10/commit/63a340213f483a809f736022a5eb8ef5683888e1))
-* **html:** implement duration display component ([e35dd44](https://github.com/videojs/v10/commit/e35dd44be86effee6e93882e88bb841e60c73fd9))
-* **html:** integrate fullscreen button into control bar and improve container lifecycle ([465342e](https://github.com/videojs/v10/commit/465342e4314e854332f5bdfee5eb6b4c113f1d87))
-* **icons:** implement shared SVG icon system across packages ([e0be58e](https://github.com/videojs/v10/commit/e0be58e094e65ea72af99b2c1e1d87c507c251bd))
-* implement current time display components ([5bd0a15](https://github.com/videojs/v10/commit/5bd0a154dbba01d2a5d11eb1f548fe4baa581675))
-* initialize Video.js 10 monorepo with core architecture ([4b0d84e](https://github.com/videojs/v10/commit/4b0d84e9c8adfa7401084389da5deb751420b629))
-* **media-store,html,react:** implement TimeRange component with hook-style architecture ([c29fd2c](https://github.com/videojs/v10/commit/c29fd2c2c1edd61c09a6683041c709a990d8a6f0))
-* migrate entire monorepo from tsc to tsup for production builds ([7403cc7](https://github.com/videojs/v10/commit/7403cc728119322888e527468a07a7634f43b32a))
-* **monorepo:** migrate prototype code to organized package structure ([4b472ec](https://github.com/videojs/v10/commit/4b472ec49cd91f0af61cb5aaa039d428982d3b91))
-* rename range to slider ([#46](https://github.com/videojs/v10/issues/46)) ([9c6eaef](https://github.com/videojs/v10/commit/9c6eaef2aa61771ae1407d0a594b3f790e0ff665))
-* **skins:** integrate duration display into default skins ([2ed2191](https://github.com/videojs/v10/commit/2ed219158ddf6f720ce1be8e328bec4603a7e847))
-* **ui:** port over default skin ([ff4ea36](https://github.com/videojs/v10/commit/ff4ea3693e63ab3b5a728988ca44f3bab669e8ff))
-* **ui:** port over default skin ([9950945](https://github.com/videojs/v10/commit/995094500823e1063e7ae291c9a2ea9a4aa74847))
-
-
-### Bug Fixes
-
-* Clean up more typescript errors. ([87105db](https://github.com/videojs/v10/commit/87105db6be31038fc92862c240898984d02932eb))
-* design tweaks to toasted skin, lint rule tweaks ([#44](https://github.com/videojs/v10/issues/44)) ([3a0767c](https://github.com/videojs/v10/commit/3a0767c3407b2d6d8af3d3a8afd57b1e76efda85))
-* enable eslint & run eslint:fix ([#43](https://github.com/videojs/v10/issues/43)) ([5cb93a1](https://github.com/videojs/v10/commit/5cb93a14a7f47d66d5c71f9b82867621beda236c))
-* minimal volume slider bug & fix dev infinite bug ([#73](https://github.com/videojs/v10/issues/73)) ([591dab6](https://github.com/videojs/v10/commit/591dab66caf8829017688007320f92b7445c4baa))
-* refactor private fields to public with underscore convention ([3cffb4d](https://github.com/videojs/v10/commit/3cffb4d59a94ed2ac41acc7eff775ededef948e1))
-* rename attributes to kebab-case ([5195c09](https://github.com/videojs/v10/commit/5195c09af610625f10cb218d14a2a87fc1695701))
-* resolve @open-wc/context-protocol module resolution issues ([e5f23ed](https://github.com/videojs/v10/commit/e5f23ed2bbde6bd50f8b87d19733b25b98f78470))
-* resolve TypeScript build errors across packages ([374db7a](https://github.com/videojs/v10/commit/374db7afc07d6211bfd3f8079bbcd9613f3b69f3))
-* **root:** add videojs keyword to package.json ([4a9f8b2](https://github.com/videojs/v10/commit/4a9f8b2ad6fb27b463dcfe8d1a5fd883c9fa21d1))
-* seek jump back to current time ([#22](https://github.com/videojs/v10/issues/22)) ([a3f9630](https://github.com/videojs/v10/commit/a3f9630bd1eb34a16f339ffd30071b8adc864ca0))
-* skin syntax usage cleanup ([#48](https://github.com/videojs/v10/issues/48)) ([d4f3f4b](https://github.com/videojs/v10/commit/d4f3f4b75b2c94c47b18242f131ac7050eb54cfc))
-* **time-display:** clean up time utilities and simplify components ([597e79d](https://github.com/videojs/v10/commit/597e79d7fc12737353c8c9eb3f6e77ef0a04e9ed))
-* **typescript:** resolve declaration file generation for rollup packages ([#1](https://github.com/videojs/v10/issues/1)) ([69670e8](https://github.com/videojs/v10/commit/69670e8d7134db34aee665d8871cd17901625915))
-* **workspace:** convert pnpm workspace protocol to npm workspace syntax ([fc5a0e4](https://github.com/videojs/v10/commit/fc5a0e46fd15f30245cb743a8006fc097c5b890e))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/core bumped to 0.1.0-preview.1
-    * @videojs/icons bumped to 0.1.0-preview.1
-    * @videojs/utils bumped to 0.1.0-preview.1
diff --git a/packages/__tech-preview__/html/README.md b/packages/__tech-preview__/html/README.md
deleted file mode 100644
index e0fdf5fe..00000000
--- a/packages/__tech-preview__/html/README.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# @videojs/html
-
-[![package-badge]][package]
-
-> **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use.
-
-## Overview
-
-`@videojs/html` is a comprehensive library for building media players with vanilla JavaScript and Web Components. It provides a complete set of UI components, state management, and utilities for creating feature-rich, accessible video and audio players.
-
-## Community
-
-If you need help with anything related to Video.js 10, or if you'd like to casually chat with other
-members:
-
-- [Join Discord Server][discord]
-- [See GitHub Discussions][gh-discussions]
-
-## License
-
-[Apache-2.0](./LICENSE)
-
-[package]: https://www.npmjs.com/package/@videojs/html
-[package-badge]: https://img.shields.io/npm/v/@videojs/html/next?label=@videojs/html@next
-[discord]: https://discord.gg/JBqHh485uF
-[gh-discussions]: https://github.com/videojs/v10/discussions
diff --git a/packages/__tech-preview__/html/package.json b/packages/__tech-preview__/html/package.json
deleted file mode 100644
index d113498a..00000000
--- a/packages/__tech-preview__/html/package.json
+++ /dev/null
@@ -1,67 +0,0 @@
-{
-  "name": "@videojs/html-preview",
-  "type": "module",
-  "version": "0.1.0-preview.10",
-  "description": "HTML library for building media players",
-  "license": "Apache-2.0",
-  "keywords": [
-    "media",
-    "player",
-    "html",
-    "ui",
-    "components",
-    "videojs"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./store": {
-      "types": "./dist/store.d.ts",
-      "default": "./dist/store.js"
-    },
-    "./icons": {
-      "types": "./dist/icons.d.ts",
-      "default": "./dist/icons.js"
-    },
-    "./skins/frosted": {
-      "types": "./dist/skins/frosted.d.ts",
-      "default": "./dist/skins/frosted.js"
-    },
-    "./skins/minimal": {
-      "types": "./dist/skins/minimal.d.ts",
-      "default": "./dist/skins/minimal.js"
-    },
-    "./define/*": {
-      "types": "./dist/define/*.d.ts",
-      "default": "./dist/define/*.js"
-    }
-  },
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsdown",
-    "build:watch": "tsdown --watch --silent",
-    "dev": "pnpm run build:watch",
-    "test": "echo \"No tests yet\"",
-    "clean": "rm -rf dist"
-  },
-  "dependencies": {
-    "@open-wc/context-protocol": "^0.0.9",
-    "@videojs/core-preview": "workspace:*",
-    "@videojs/icons-preview": "workspace:*",
-    "@videojs/utils-preview": "workspace:*"
-  },
-  "devDependencies": {
-    "tsdown": "^0.15.9",
-    "typescript": "^5.9.3"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
diff --git a/packages/__tech-preview__/html/src/define/index.ts b/packages/__tech-preview__/html/src/define/index.ts
deleted file mode 100644
index 239d0bed..00000000
--- a/packages/__tech-preview__/html/src/define/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// be sure to import video-provider first for proper context initialization
-import './video-provider';
-import './media-container';
-import './media-play-button';
-import './media-mute-button';
-import './media-volume-slider';
-import './media-time-slider';
-import './media-fullscreen-button';
-import './media-duration-display';
-import './media-current-time-display';
-import './media-preview-time-display';
-import './media-popover';
-import './media-tooltip';
diff --git a/packages/__tech-preview__/html/src/define/media-container.ts b/packages/__tech-preview__/html/src/define/media-container.ts
deleted file mode 100644
index 71965cf7..00000000
--- a/packages/__tech-preview__/html/src/define/media-container.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { MediaContainerElement } from '@/media/media-container';
-import { defineCustomElement } from '@/utils/custom-element';
-
-defineCustomElement('media-container', MediaContainerElement);
diff --git a/packages/__tech-preview__/html/src/define/media-current-time-display.ts b/packages/__tech-preview__/html/src/define/media-current-time-display.ts
deleted file mode 100644
index 77661119..00000000
--- a/packages/__tech-preview__/html/src/define/media-current-time-display.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { CurrentTimeDisplayElement } from '@/elements/current-time-display';
-import { defineCustomElement } from '@/utils/custom-element';
-
-defineCustomElement('media-current-time-display', CurrentTimeDisplayElement);
diff --git a/packages/__tech-preview__/html/src/define/media-duration-display.ts b/packages/__tech-preview__/html/src/define/media-duration-display.ts
deleted file mode 100644
index 1779d0ac..00000000
--- a/packages/__tech-preview__/html/src/define/media-duration-display.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { DurationDisplayElement } from '@/elements/duration-display';
-import { defineCustomElement } from '@/utils/custom-element';
-
-defineCustomElement('media-duration-display', DurationDisplayElement);
diff --git a/packages/__tech-preview__/html/src/define/media-fullscreen-button.ts b/packages/__tech-preview__/html/src/define/media-fullscreen-button.ts
deleted file mode 100644
index 3f344805..00000000
--- a/packages/__tech-preview__/html/src/define/media-fullscreen-button.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { FullscreenButtonElement } from '@/elements/fullscreen-button';
-import { defineCustomElement } from '@/utils/custom-element';
-
-defineCustomElement('media-fullscreen-button', FullscreenButtonElement);
diff --git a/packages/__tech-preview__/html/src/define/media-mute-button.ts b/packages/__tech-preview__/html/src/define/media-mute-button.ts
deleted file mode 100644
index f9025341..00000000
--- a/packages/__tech-preview__/html/src/define/media-mute-button.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { MuteButtonElement } from '@/elements/mute-button';
-import { defineCustomElement } from '@/utils/custom-element';
-
-defineCustomElement('media-mute-button', MuteButtonElement);
diff --git a/packages/__tech-preview__/html/src/define/media-play-button.ts b/packages/__tech-preview__/html/src/define/media-play-button.ts
deleted file mode 100644
index 534922f5..00000000
--- a/packages/__tech-preview__/html/src/define/media-play-button.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { PlayButtonElement } from '@/elements/play-button';
-import { defineCustomElement } from '@/utils/custom-element';
-
-defineCustomElement('media-play-button', PlayButtonElement);
diff --git a/packages/__tech-preview__/html/src/define/media-popover.ts b/packages/__tech-preview__/html/src/define/media-popover.ts
deleted file mode 100644
index e5392ec9..00000000
--- a/packages/__tech-preview__/html/src/define/media-popover.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { PopoverElement } from '@/elements/popover';
-import { defineCustomElement } from '@/utils/custom-element';
-
-defineCustomElement('media-popover', PopoverElement);
diff --git a/packages/__tech-preview__/html/src/define/media-preview-time-display.ts b/packages/__tech-preview__/html/src/define/media-preview-time-display.ts
deleted file mode 100644
index 912f7b30..00000000
--- a/packages/__tech-preview__/html/src/define/media-preview-time-display.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { PreviewTimeDisplayElement } from '@/elements/preview-time-display';
-import { defineCustomElement } from '@/utils/custom-element';
-
-defineCustomElement('media-preview-time-display', PreviewTimeDisplayElement);
diff --git a/packages/__tech-preview__/html/src/define/media-time-slider.ts b/packages/__tech-preview__/html/src/define/media-time-slider.ts
deleted file mode 100644
index df0dd761..00000000
--- a/packages/__tech-preview__/html/src/define/media-time-slider.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { TimeSliderPointerElement, TimeSliderProgressElement, TimeSliderRootElement, TimeSliderThumbElement, TimeSliderTrackElement } from '@/elements/time-slider';
-import { defineCustomElement } from '@/utils/custom-element';
-
-defineCustomElement('media-time-slider', TimeSliderRootElement);
-defineCustomElement('media-time-slider-track', TimeSliderTrackElement);
-defineCustomElement('media-time-slider-progress', TimeSliderProgressElement);
-defineCustomElement('media-time-slider-pointer', TimeSliderPointerElement);
-defineCustomElement('media-time-slider-thumb', TimeSliderThumbElement);
diff --git a/packages/__tech-preview__/html/src/define/media-tooltip.ts b/packages/__tech-preview__/html/src/define/media-tooltip.ts
deleted file mode 100644
index 253c3b8a..00000000
--- a/packages/__tech-preview__/html/src/define/media-tooltip.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { TooltipElement } from '@/elements/tooltip';
-import { defineCustomElement } from '@/utils/custom-element';
-
-defineCustomElement('media-tooltip', TooltipElement);
diff --git a/packages/__tech-preview__/html/src/define/media-volume-slider.ts b/packages/__tech-preview__/html/src/define/media-volume-slider.ts
deleted file mode 100644
index 6a9bf90c..00000000
--- a/packages/__tech-preview__/html/src/define/media-volume-slider.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { VolumeSliderIndicatorElement, VolumeSliderRootElement, VolumeSliderThumbElement, VolumeSliderTrackElement } from '@/elements/volume-slider';
-import { defineCustomElement } from '@/utils/custom-element';
-
-defineCustomElement('media-volume-slider', VolumeSliderRootElement);
-defineCustomElement('media-volume-slider-track', VolumeSliderTrackElement);
-defineCustomElement('media-volume-slider-indicator', VolumeSliderIndicatorElement);
-defineCustomElement('media-volume-slider-thumb', VolumeSliderThumbElement);
diff --git a/packages/__tech-preview__/html/src/define/video-provider.ts b/packages/__tech-preview__/html/src/define/video-provider.ts
deleted file mode 100644
index dece3a47..00000000
--- a/packages/__tech-preview__/html/src/define/video-provider.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { VideoProviderElement } from '@/media/video-provider';
-import { defineCustomElement } from '@/utils/custom-element';
-
-defineCustomElement('video-provider', VideoProviderElement);
diff --git a/packages/__tech-preview__/html/src/elements/button.ts b/packages/__tech-preview__/html/src/elements/button.ts
deleted file mode 100644
index fa55d4e2..00000000
--- a/packages/__tech-preview__/html/src/elements/button.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { namedNodeMapToObject } from '@videojs/utils-preview/dom';
-
-export function getTemplateHTML(
-  this: typeof ButtonElement,
-  _attrs: Record<string, string>,
-  _props: Record<string, any> = {},
-): string {
-  return /* html */ `
-    <style>
-      /*
-        NOTE: Even though primitives should aim to be "unstyled" in their core definitions, we should
-        still add pointer-events, as this defines functionality. (CJP)
-      */
-      :host {
-        pointer-events: auto;
-      }
-    </style>
-    <slot>
-    </slot>
-  `;
-}
-
-export class ButtonElement extends HTMLElement {
-  static shadowRootOptions = {
-    mode: 'open' as ShadowRootMode,
-  };
-
-  static getTemplateHTML: typeof getTemplateHTML = getTemplateHTML;
-
-  static observedAttributes: string[] = ['commandfor'];
-
-  constructor() {
-    super();
-
-    if (!this.shadowRoot) {
-      // Set up the Shadow DOM if not using Declarative Shadow DOM.
-      this.attachShadow((this.constructor as typeof ButtonElement).shadowRootOptions);
-
-      const attrs = namedNodeMapToObject(this.attributes);
-      const html = (this.constructor as typeof ButtonElement).getTemplateHTML(attrs);
-      // From MDN: setHTMLUnsafe should be used instead of ShadowRoot.innerHTML
-      // when a string of HTML may contain declarative shadow roots.
-      const shadowRoot = this.shadowRoot as unknown as ShadowRoot;
-      shadowRoot.setHTMLUnsafe ? shadowRoot.setHTMLUnsafe(html) : (shadowRoot.innerHTML = html);
-    }
-
-    this.addEventListener('click', this);
-    this.addEventListener('keydown', this);
-  }
-
-  attributeChangedCallback(name: string, _oldValue: string, newValue: string): void {
-    if (name === 'commandfor') {
-      this.style.setProperty('anchor-name', `--${newValue}`);
-    }
-  }
-
-  handleEvent(event: Event): void {
-    const { type } = event;
-    if (type === 'keydown') {
-      this.#handleKeyDown(event as KeyboardEvent);
-    }
-  }
-
-  #handleKeyDown = (event: KeyboardEvent): void => {
-    const { metaKey, altKey, key } = event;
-    if (metaKey || altKey || !['Enter', ' '].includes(key)) {
-      this.removeEventListener('keyup', this.#handleKeyUp);
-      return;
-    }
-    this.addEventListener('keyup', this.#handleKeyUp, { once: true });
-  };
-
-  #handleKeyUp = (_event: KeyboardEvent): void => {
-    this.handleEvent({ type: 'click' } as Event);
-  };
-}
diff --git a/packages/__tech-preview__/html/src/elements/current-time-display.ts b/packages/__tech-preview__/html/src/elements/current-time-display.ts
deleted file mode 100644
index 2e9aed89..00000000
--- a/packages/__tech-preview__/html/src/elements/current-time-display.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import type { CurrentTimeDisplayState } from '@videojs/core-preview/store';
-import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
-
-import { currentTimeDisplayStateDefinition } from '@videojs/core-preview/store';
-import { formatDisplayTime } from '@videojs/utils-preview';
-import { toConnectedHTMLComponent } from '../utils/component-factory';
-
-export const getCurrentTimeDisplayState: StateHook<CurrentTimeDisplay, CurrentTimeDisplayState> = (_element, mediaStore) => {
-  return {
-    ...currentTimeDisplayStateDefinition.stateTransform(mediaStore.getState()),
-    // Current time display is read-only, so no request methods needed
-  };
-};
-
-export const getCurrentTimeDisplayProps: PropsHook<CurrentTimeDisplay, CurrentTimeDisplayState> = (_element, _state) => {
-  return {};
-};
-
-export class CurrentTimeDisplay extends HTMLElement {
-  static shadowRootOptions = {
-    mode: 'open' as ShadowRootMode,
-  };
-
-  static observedAttributes: string[] = ['show-remaining'];
-
-  constructor() {
-    super();
-
-    if (!this.shadowRoot) {
-      this.attachShadow((this.constructor as typeof CurrentTimeDisplay).shadowRootOptions);
-    }
-  }
-
-  get showRemaining(): boolean {
-    return this.hasAttribute('show-remaining');
-  }
-
-  _update(_props: any, state: CurrentTimeDisplayState): void {
-    /** @TODO Should this live here or elsewhere? (CJP) */
-    const timeLabel
-      = this.showRemaining && state.duration != null && state.currentTime != null
-        ? formatDisplayTime(-(state.duration - state.currentTime))
-        : formatDisplayTime(state.currentTime);
-
-    if (this.shadowRoot) {
-      this.shadowRoot.textContent = timeLabel;
-    }
-  }
-}
-
-export const CurrentTimeDisplayElement: ConnectedComponentConstructor<CurrentTimeDisplay, CurrentTimeDisplayState> = toConnectedHTMLComponent(
-  CurrentTimeDisplay,
-  getCurrentTimeDisplayState,
-  getCurrentTimeDisplayProps,
-  'CurrentTimeDisplay',
-);
diff --git a/packages/__tech-preview__/html/src/elements/duration-display.ts b/packages/__tech-preview__/html/src/elements/duration-display.ts
deleted file mode 100644
index bbd8668d..00000000
--- a/packages/__tech-preview__/html/src/elements/duration-display.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import type { DurationDisplayState } from '@videojs/core-preview/store';
-import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
-
-import { durationDisplayStateDefinition } from '@videojs/core-preview/store';
-
-import { formatDisplayTime } from '@videojs/utils-preview';
-import { namedNodeMapToObject } from '@videojs/utils-preview/dom';
-import { toConnectedHTMLComponent } from '../utils/component-factory';
-
-export function getTemplateHTML(
-  this: typeof DurationDisplay,
-  _attrs: Record<string, string>,
-  _props: Record<string, any> = {},
-) {
-  return /* html */ `
-    <span></span>
-  `;
-}
-
-export class DurationDisplay extends HTMLElement {
-  static shadowRootOptions = {
-    mode: 'open' as ShadowRootMode,
-  };
-
-  static getTemplateHTML: typeof getTemplateHTML = getTemplateHTML;
-
-  constructor() {
-    super();
-
-    if (!this.shadowRoot) {
-      this.attachShadow((this.constructor as typeof DurationDisplay).shadowRootOptions);
-
-      const attrs = namedNodeMapToObject(this.attributes);
-      const html = (this.constructor as typeof DurationDisplay).getTemplateHTML(attrs);
-      const shadowRoot = this.shadowRoot as unknown as ShadowRoot;
-      shadowRoot.setHTMLUnsafe ? shadowRoot.setHTMLUnsafe(html) : (shadowRoot.innerHTML = html);
-    }
-  }
-
-  _update(_props: any, state: DurationDisplayState): void {
-    // Update the span content with formatted duration
-    const spanElement = this.shadowRoot?.querySelector('span') as HTMLElement;
-    if (spanElement) {
-      spanElement.textContent = formatDisplayTime(state.duration);
-    }
-  }
-}
-
-export const getDurationDisplayState: StateHook<DurationDisplay, DurationDisplayState> = (_element, mediaStore) => {
-  return {
-    ...durationDisplayStateDefinition.stateTransform(mediaStore.getState()),
-    // Duration display is read-only, so no request methods needed
-  };
-};
-
-export const getDurationDisplayProps: PropsHook<DurationDisplay, DurationDisplayState> = (_element, _state) => {
-  return {};
-};
-
-export const DurationDisplayElement: ConnectedComponentConstructor<DurationDisplay, DurationDisplayState> = toConnectedHTMLComponent(
-  DurationDisplay,
-  getDurationDisplayState,
-  getDurationDisplayProps,
-  'DurationDisplay',
-);
diff --git a/packages/__tech-preview__/html/src/elements/fullscreen-button.ts b/packages/__tech-preview__/html/src/elements/fullscreen-button.ts
deleted file mode 100644
index e7c8a772..00000000
--- a/packages/__tech-preview__/html/src/elements/fullscreen-button.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import type { FullscreenButtonState } from '@videojs/core-preview/store';
-import type { Prettify } from '../types';
-import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
-
-import { fullscreenButtonStateDefinition } from '@videojs/core-preview/store';
-
-import { memoize } from '@videojs/utils-preview';
-import { toConnectedHTMLComponent } from '../utils/component-factory';
-import { ButtonElement } from './button';
-
-type FullscreenButtonStateWithMethods = Prettify<FullscreenButtonState & ReturnType<typeof fullscreenButtonStateDefinition.createRequestMethods>>;
-
-const fullscreenButtonCreateRequestMethods = memoize(fullscreenButtonStateDefinition.createRequestMethods);
-
-/**
- * FullscreenButton state hook - equivalent to React's useFullscreenButtonState
- * Handles media store state subscription and transformation
- */
-export const getFullscreenButtonState: StateHook<FullscreenButton, FullscreenButtonStateWithMethods> = (_element, mediaStore) => {
-  return {
-    ...fullscreenButtonStateDefinition.stateTransform(mediaStore.getState()),
-    ...fullscreenButtonCreateRequestMethods(mediaStore.dispatch),
-  };
-};
-
-export const getFullscreenButtonProps: PropsHook<FullscreenButton, FullscreenButtonStateWithMethods> = (_element, state) => {
-  const baseProps: Record<string, any> = {
-    /** data attributes/props */
-    'data-fullscreen': state.fullscreen,
-    /** @TODO Need another state provider in core for i18n (CJP) */
-    /** aria attributes/props */
-    role: 'button',
-    tabindex: '0',
-    'aria-label': state.fullscreen ? 'exit fullscreen' : 'enter fullscreen',
-    /** tooltip */
-    'data-tooltip': state.fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen',
-    /** @TODO Figure out how we want to handle attr overrides (e.g. aria-label) (CJP) */
-    /** external props spread last to allow for overriding */
-    // ...props,
-  };
-  return baseProps;
-};
-
-export class FullscreenButton extends ButtonElement {
-  _state: FullscreenButtonStateWithMethods | undefined;
-
-  handleEvent(event: Event): void {
-    super.handleEvent(event);
-
-    const { type } = event;
-    const state = this._state;
-    if (state && type === 'click') {
-      if (state.fullscreen) {
-        state.requestExitFullscreen();
-      } else {
-        state.requestEnterFullscreen();
-      }
-    }
-  }
-}
-
-export const FullscreenButtonElement: ConnectedComponentConstructor<FullscreenButton, FullscreenButtonStateWithMethods> = toConnectedHTMLComponent(
-  FullscreenButton,
-  getFullscreenButtonState,
-  getFullscreenButtonProps,
-  'FullscreenButton',
-);
diff --git a/packages/__tech-preview__/html/src/elements/mute-button.ts b/packages/__tech-preview__/html/src/elements/mute-button.ts
deleted file mode 100644
index 29e62dc0..00000000
--- a/packages/__tech-preview__/html/src/elements/mute-button.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import type { MuteButtonState } from '@videojs/core-preview/store';
-import type { Prettify } from '../types';
-import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
-
-import { muteButtonStateDefinition } from '@videojs/core-preview/store';
-
-import { memoize } from '@videojs/utils-preview';
-import { toConnectedHTMLComponent } from '../utils/component-factory';
-import { ButtonElement } from './button';
-
-type MuteButtonStateWithMethods = Prettify<MuteButtonState & ReturnType<typeof muteButtonStateDefinition.createRequestMethods>>;
-
-const muteButtonCreateRequestMethods = memoize(muteButtonStateDefinition.createRequestMethods);
-
-export const getMuteButtonState: StateHook<MuteButton, MuteButtonStateWithMethods> = (_element, mediaStore) => {
-  return {
-    ...muteButtonStateDefinition.stateTransform(mediaStore.getState()),
-    ...muteButtonCreateRequestMethods(mediaStore.dispatch),
-  };
-};
-
-export const getMuteButtonProps: PropsHook<MuteButton, MuteButtonStateWithMethods> = (_element, state) => {
-  const baseProps: Record<string, any> = {
-    /** data attributes/props */
-    'data-muted': state.muted,
-    'data-volume-level': state.volumeLevel,
-    /** @TODO Need another state provider in core for i18n (CJP) */
-    /** aria attributes/props */
-    role: 'button',
-    tabindex: '0',
-    'aria-label': state.muted ? 'unmute' : 'mute',
-    /** tooltip */
-    'data-tooltip': state.muted ? 'Unmute' : 'Mute',
-    /** @TODO Figure out how we want to handle attr overrides (e.g. aria-label) (CJP) */
-    /** external props spread last to allow for overriding */
-    // ...props,
-  };
-  return baseProps;
-};
-
-export class MuteButton extends ButtonElement {
-  _state: MuteButtonStateWithMethods | undefined;
-
-  handleEvent(event: Event): void {
-    super.handleEvent(event);
-
-    const { type } = event;
-    const state = this._state;
-
-    if (state) {
-      if (type === 'click') {
-        if (state.volumeLevel === 'off') {
-          state.requestUnmute();
-        } else {
-          state.requestMute();
-        }
-      }
-    }
-  }
-}
-
-export const MuteButtonElement: ConnectedComponentConstructor<MuteButton, MuteButtonStateWithMethods> = toConnectedHTMLComponent(
-  MuteButton,
-  getMuteButtonState,
-  getMuteButtonProps,
-  'MuteButton',
-);
diff --git a/packages/__tech-preview__/html/src/elements/play-button.ts b/packages/__tech-preview__/html/src/elements/play-button.ts
deleted file mode 100644
index c26499bc..00000000
--- a/packages/__tech-preview__/html/src/elements/play-button.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import type { PlayButtonState } from '@videojs/core-preview/store';
-import type { Prettify } from '../types';
-import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
-
-import { playButtonStateDefinition } from '@videojs/core-preview/store';
-import { memoize } from '@videojs/utils-preview';
-import { toConnectedHTMLComponent } from '../utils/component-factory';
-import { ButtonElement } from './button';
-
-type PlayButtonStateWithMethods = Prettify<PlayButtonState & ReturnType<typeof playButtonStateDefinition.createRequestMethods>>;
-
-const playButtonCreateRequestMethods = memoize(playButtonStateDefinition.createRequestMethods);
-
-/**
- * PlayButton state hook - equivalent to React's usePlayButtonState
- * Handles media store state subscription and transformation
- */
-export const getPlayButtonState: StateHook<PlayButton, PlayButtonStateWithMethods> = (_element, mediaStore) => {
-  return {
-    ...playButtonStateDefinition.stateTransform(mediaStore.getState()),
-    ...playButtonCreateRequestMethods(mediaStore.dispatch),
-  };
-};
-
-export const getPlayButtonProps: PropsHook<PlayButton, PlayButtonStateWithMethods> = (_element, state) => {
-  const baseProps: Record<string, any> = {
-    /** data attributes/props */
-    'data-paused': state.paused,
-    /** @TODO Need another state provider in core for i18n (CJP) */
-    /** aria attributes/props */
-    role: 'button',
-    tabindex: '0',
-    'aria-label': state.paused ? 'play' : 'pause',
-    /** tooltip */
-    'data-tooltip': state.paused ? 'Play' : 'Pause',
-    /** @TODO Figure out how we want to handle attr overrides (e.g. aria-label) (CJP) */
-    /** external props spread last to allow for overriding */
-    // ...props,
-  };
-
-  return baseProps;
-};
-
-export class PlayButton extends ButtonElement {
-  _state: PlayButtonStateWithMethods | undefined;
-
-  handleEvent(event: Event): void {
-    super.handleEvent(event);
-
-    const { type } = event;
-    const state = this._state;
-    if (state && type === 'click') {
-      if (state.paused) {
-        state.requestPlay();
-      } else {
-        state.requestPause();
-      }
-    }
-  }
-}
-
-export const PlayButtonElement: ConnectedComponentConstructor<PlayButton, PlayButtonStateWithMethods> = toConnectedHTMLComponent(
-  PlayButton,
-  getPlayButtonState,
-  getPlayButtonProps,
-  'PlayButton',
-);
diff --git a/packages/__tech-preview__/html/src/elements/popover.ts b/packages/__tech-preview__/html/src/elements/popover.ts
deleted file mode 100644
index f3c23a81..00000000
--- a/packages/__tech-preview__/html/src/elements/popover.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import type { PopoverState as CorePopoverState } from '@videojs/core-preview';
-import type { Prettify } from '../types';
-import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
-import { Popover as CorePopover } from '@videojs/core-preview';
-import { getDocumentOrShadowRoot } from '@videojs/utils-preview/dom';
-import { getCoreState, getPropsFromAttrs, toConnectedHTMLComponent } from '../utils/component-factory';
-
-type Placement = CorePopoverState['placement'];
-
-export type PopoverState = Prettify<ReturnType<CorePopover['getState']>>;
-
-export const getPopoverState: StateHook<Popover, PopoverState> = (element, _mediaStore) => {
-  const coreState = getCoreState(CorePopover, getPropsFromAttrs(element));
-  return {
-    ...coreState,
-  };
-};
-
-export const getPopoverProps: PropsHook<Popover, PopoverState> = (element, state) => {
-  if (state._popoverElement !== element) {
-    state._setPopoverElement(element);
-  }
-
-  const triggerElement = getDocumentOrShadowRoot(element)?.querySelector(
-    `[commandfor="${element.id}"]`,
-  ) as HTMLElement | null;
-
-  if (state._triggerElement !== triggerElement) {
-    state._setTriggerElement(triggerElement);
-  }
-
-  const mediaContainer = element.closest(element.collisionBoundary
-    ? `#${element.collisionBoundary}`
-    : 'media-container') as HTMLElement | null;
-
-  if (state._collisionBoundaryElement !== mediaContainer) {
-    state._setCollisionBoundaryElement(mediaContainer);
-  }
-
-  return {
-    'data-side': state.placement,
-    'data-starting-style': state._transitionStatus === 'initial',
-    'data-open': state._transitionStatus === 'initial' || state._transitionStatus === 'open',
-    'data-ending-style': state._transitionStatus === 'close' || state._transitionStatus === 'unmounted',
-    'data-closed': state._transitionStatus === 'close' || state._transitionStatus === 'unmounted',
-    style: {
-      ...state._popoverStyle,
-    },
-  };
-};
-
-export class Popover extends HTMLElement {
-  static get observedAttributes(): string[] {
-    return [
-      'id',
-      'open-on-hover',
-      'delay',
-      'close-delay',
-      'side',
-      'side-offset',
-      'collision-padding',
-      'collision-boundary',
-    ];
-  }
-
-  get openOnHover(): boolean {
-    return this.hasAttribute('open-on-hover');
-  }
-
-  get delay(): number {
-    return Number.parseInt(this.getAttribute('delay') ?? '0', 10);
-  }
-
-  get closeDelay(): number {
-    return Number.parseInt(this.getAttribute('close-delay') ?? '0', 10);
-  }
-
-  get side(): Placement {
-    return this.getAttribute('side') as Placement;
-  }
-
-  get sideOffset(): number {
-    return Number.parseInt(this.getAttribute('side-offset') ?? '0', 10);
-  }
-
-  get collisionPadding(): number {
-    return Number.parseInt(this.getAttribute('collision-padding') ?? '0', 10);
-  }
-
-  get collisionBoundary(): string | null {
-    return this.getAttribute('collision-boundary');
-  }
-}
-
-export const PopoverElement: ConnectedComponentConstructor<Popover, PopoverState> = toConnectedHTMLComponent(
-  Popover,
-  getPopoverState,
-  getPopoverProps,
-  'Popover',
-);
diff --git a/packages/__tech-preview__/html/src/elements/preview-time-display.ts b/packages/__tech-preview__/html/src/elements/preview-time-display.ts
deleted file mode 100644
index 979eb5e6..00000000
--- a/packages/__tech-preview__/html/src/elements/preview-time-display.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { PreviewTimeDisplayState } from '@videojs/core-preview/store';
-import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
-
-import { previewTimeDisplayStateDefinition } from '@videojs/core-preview/store';
-
-import { formatDisplayTime } from '@videojs/utils-preview';
-import { toConnectedHTMLComponent } from '../utils/component-factory';
-
-export const getPreviewTimeDisplayState: StateHook<PreviewTimeDisplay, PreviewTimeDisplayState> = (_element, mediaStore) => {
-  return {
-    ...previewTimeDisplayStateDefinition.stateTransform(mediaStore.getState()),
-    // Preview time display is read-only, so no request methods needed
-  };
-};
-
-export const getPreviewTimeDisplayProps: PropsHook<PreviewTimeDisplay, PreviewTimeDisplayState> = (_element, _state) => {
-  return {};
-};
-
-export class PreviewTimeDisplay extends HTMLElement {
-  static shadowRootOptions = {
-    mode: 'open' as ShadowRootMode,
-  };
-
-  static observedAttributes: string[] = ['show-remaining'];
-
-  constructor() {
-    super();
-
-    if (!this.shadowRoot) {
-      this.attachShadow((this.constructor as typeof PreviewTimeDisplay).shadowRootOptions);
-    }
-  }
-
-  get showRemaining(): boolean {
-    return this.hasAttribute('show-remaining');
-  }
-
-  _update(_props: any, state: PreviewTimeDisplayState): void {
-    /** @TODO Should this live here or elsewhere? (CJP) */
-    const timeLabel = formatDisplayTime(state.previewTime);
-
-    if (this.shadowRoot) {
-      this.shadowRoot.textContent = timeLabel;
-    }
-  }
-}
-
-export const PreviewTimeDisplayElement: ConnectedComponentConstructor<PreviewTimeDisplay, PreviewTimeDisplayState> = toConnectedHTMLComponent(
-  PreviewTimeDisplay,
-  getPreviewTimeDisplayState,
-  getPreviewTimeDisplayProps,
-  'PreviewTimeDisplay',
-);
diff --git a/packages/__tech-preview__/html/src/elements/time-slider.ts b/packages/__tech-preview__/html/src/elements/time-slider.ts
deleted file mode 100644
index 874c59b5..00000000
--- a/packages/__tech-preview__/html/src/elements/time-slider.ts
+++ /dev/null
@@ -1,242 +0,0 @@
-import type { Prettify } from '../types';
-import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
-
-import { TimeSlider as CoreTimeSlider } from '@videojs/core-preview';
-import { timeSliderStateDefinition } from '@videojs/core-preview/store';
-import { memoize } from '@videojs/utils-preview';
-
-import { getCoreState, getPropsFromAttrs, toConnectedHTMLComponent } from '../utils/component-factory';
-
-// ============================================================================
-// ROOT COMPONENT
-// ============================================================================
-
-type TimeSliderState = Prettify<ReturnType<CoreTimeSlider['getState']>>;
-type TimeSliderStateWithMethods = Prettify<TimeSliderState & ReturnType<typeof timeSliderStateDefinition.createRequestMethods>>;
-
-const timeSliderCreateRequestMethods = memoize(timeSliderStateDefinition.createRequestMethods);
-
-export const getTimeSliderRootState: StateHook<TimeSliderRoot, TimeSliderStateWithMethods> = (element, mediaStore) => {
-  const mediaState = timeSliderStateDefinition.stateTransform(mediaStore.getState());
-  const mediaMethods = timeSliderCreateRequestMethods(mediaStore.dispatch);
-  const coreState = getCoreState(CoreTimeSlider, {
-    ...getPropsFromAttrs(element),
-    ...mediaState,
-    ...mediaMethods,
-  });
-  return {
-    ...coreState,
-  };
-};
-
-/**
- * TimeSlider Root props hook - equivalent to React's useTimeSliderRootProps
- * Handles element attributes and properties based on state
- */
-export const getTimeSliderRootProps: PropsHook<TimeSliderRoot, TimeSliderStateWithMethods> = (element, state) => {
-  if (state._rootElement !== element) {
-    state._setRootElement(element);
-  }
-
-  return {
-    role: 'slider',
-    tabindex: element.getAttribute('tabindex') ?? '0',
-    'data-current-time': state.currentTime.toString(),
-    'data-duration': state.duration.toString(),
-    'data-orientation': element.orientation || 'horizontal',
-    'aria-label': 'Seek',
-    'aria-valuemin': '0',
-    'aria-valuemax': Math.round(state.duration).toString(),
-    'aria-valuenow': Math.round(state.currentTime).toString(),
-    'aria-valuetext': `${state._currentTimeText} of ${state._durationText}`,
-    'aria-orientation': element.orientation || 'horizontal',
-    style: {
-      ...(element.hasAttribute('commandfor') ? { anchorName: `--${element.getAttribute('commandfor')}` } : {}),
-      '--slider-fill': `${state._fillWidth.toFixed(3)}%`,
-      '--slider-pointer': `${(state._pointerWidth * 100).toFixed(3)}%`,
-    },
-  };
-};
-
-export class TimeSliderRoot extends HTMLElement {
-  static readonly observedAttributes: readonly string[] = ['commandfor', 'orientation'];
-
-  _state: TimeSliderState | undefined;
-
-  get orientation(): 'horizontal' | 'vertical' {
-    return (this.getAttribute('orientation') as 'horizontal' | 'vertical') || 'horizontal';
-  }
-}
-
-export const TimeSliderRootElement: ConnectedComponentConstructor<TimeSliderRoot, TimeSliderStateWithMethods> = toConnectedHTMLComponent(
-  TimeSliderRoot,
-  getTimeSliderRootState,
-  getTimeSliderRootProps,
-  'TimeSliderRoot',
-);
-
-// ============================================================================
-// TRACK COMPONENT
-// ============================================================================
-
-export const getTimeSliderTrackProps: PropsHook<TimeSliderTrack, undefined> = (element, _state) => {
-  const rootElement = element.closest('media-time-slider') as TimeSliderRoot;
-
-  if (rootElement._state?._trackElement !== element) {
-    rootElement._state?._setTrackElement?.(element);
-  }
-
-  const orientation = rootElement?.orientation || 'horizontal';
-
-  return {
-    'data-orientation': orientation,
-    style: {
-      width: orientation === 'horizontal' ? '100%' : undefined,
-      height: orientation !== 'horizontal' ? '100%' : undefined,
-    },
-  };
-};
-
-export class TimeSliderTrack extends HTMLElement {}
-
-export const TimeSliderTrackElement: ConnectedComponentConstructor<TimeSliderTrack, undefined> = toConnectedHTMLComponent(
-  TimeSliderTrack,
-  undefined,
-  getTimeSliderTrackProps,
-  'TimeSliderTrack',
-);
-
-// ============================================================================
-// PROGRESS COMPONENT
-// ============================================================================
-
-export const getTimeSliderProgressProps: PropsHook<TimeSliderProgress, undefined> = (element, _state) => {
-  const rootElement = element.closest('media-time-slider') as TimeSliderRoot;
-  const orientation = rootElement?.orientation || 'horizontal';
-  const style = orientation === 'horizontal'
-    ? {
-        position: 'absolute',
-        width: 'var(--slider-fill, 0%)',
-        height: '100%',
-        top: '0',
-        bottom: undefined,
-      }
-    : {
-        position: 'absolute',
-        height: 'var(--slider-fill, 0%)',
-        width: '100%',
-        bottom: '0',
-        top: undefined,
-      };
-
-  return {
-    'data-orientation': orientation,
-    style,
-  };
-};
-
-export class TimeSliderProgress extends HTMLElement {}
-
-export const TimeSliderProgressElement: ConnectedComponentConstructor<TimeSliderProgress, undefined> = toConnectedHTMLComponent(
-  TimeSliderProgress,
-  undefined,
-  getTimeSliderProgressProps,
-  'TimeSliderProgress',
-);
-
-// ============================================================================
-// POINTER COMPONENT
-// ============================================================================
-
-export const getTimeSliderPointerProps: PropsHook<TimeSliderPointer, undefined> = (element, _state) => {
-  const rootElement = element.closest('media-time-slider') as TimeSliderRoot;
-  const orientation = rootElement?.orientation || 'horizontal';
-  const style = orientation === 'horizontal'
-    ? {
-        position: 'absolute',
-        width: 'var(--slider-pointer, 0%)',
-        height: '100%',
-        top: '0',
-        bottom: undefined,
-      }
-    : {
-        position: 'absolute',
-        height: 'var(--slider-pointer, 0%)',
-        width: '100%',
-        bottom: '0',
-        top: undefined,
-      };
-
-  return {
-    'data-orientation': orientation,
-    style,
-  };
-};
-
-export class TimeSliderPointer extends HTMLElement {}
-
-export const TimeSliderPointerElement: ConnectedComponentConstructor<TimeSliderPointer, undefined> = toConnectedHTMLComponent(
-  TimeSliderPointer,
-  undefined,
-  getTimeSliderPointerProps,
-  'TimeSliderPointer',
-);
-
-// ============================================================================
-// THUMB COMPONENT
-// ============================================================================
-
-export const getTimeSliderThumbProps: PropsHook<TimeSliderThumb, undefined> = (element, _state) => {
-  const rootElement = element.closest('media-time-slider') as TimeSliderRoot;
-  const orientation = rootElement?.orientation || 'horizontal';
-  const style = orientation === 'horizontal'
-    ? {
-        position: 'absolute',
-        left: 'var(--slider-fill, 0%)',
-        top: '50%',
-        bottom: undefined,
-        translate: '-50% -50%',
-      }
-    : {
-        position: 'absolute',
-        bottom: 'var(--slider-fill, 0%)',
-        left: '50%',
-        top: undefined,
-        translate: '-50% 50%',
-      };
-
-  return {
-    'data-orientation': orientation,
-    style,
-  };
-};
-
-export class TimeSliderThumb extends HTMLElement {}
-
-export const TimeSliderThumbElement: ConnectedComponentConstructor<TimeSliderThumb, undefined> = toConnectedHTMLComponent(
-  TimeSliderThumb,
-  undefined,
-  getTimeSliderThumbProps,
-  'TimeSliderThumb',
-);
-
-// ============================================================================
-// EXPORTS
-// ============================================================================
-
-export const TimeSliderElement = Object.assign(
-  {},
-  {
-    Root: TimeSliderRootElement,
-    Track: TimeSliderTrackElement,
-    Progress: TimeSliderProgressElement,
-    Pointer: TimeSliderPointerElement,
-    Thumb: TimeSliderThumbElement,
-  },
-) as {
-  Root: typeof TimeSliderRootElement;
-  Track: typeof TimeSliderTrackElement;
-  Progress: typeof TimeSliderProgressElement;
-  Pointer: typeof TimeSliderPointerElement;
-  Thumb: typeof TimeSliderThumbElement;
-};
diff --git a/packages/__tech-preview__/html/src/elements/tooltip.ts b/packages/__tech-preview__/html/src/elements/tooltip.ts
deleted file mode 100644
index 607966ee..00000000
--- a/packages/__tech-preview__/html/src/elements/tooltip.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { Prettify } from '../types';
-import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
-import { Tooltip as CoreTooltip } from '@videojs/core-preview';
-import { getCoreState, getPropsFromAttrs, toConnectedHTMLComponent } from '../utils/component-factory';
-import { getPopoverProps, Popover } from './popover';
-
-export type TooltipState = Prettify<ReturnType<CoreTooltip['getState']>>;
-
-export const getTooltipState: StateHook<Tooltip, TooltipState> = (element, _mediaStore) => {
-  const coreState = getCoreState(CoreTooltip, getPropsFromAttrs(element));
-  return {
-    ...coreState,
-  };
-};
-
-export const getTooltipProps: PropsHook<Tooltip, TooltipState> = getPopoverProps;
-
-export class Tooltip extends Popover {
-  static get observedAttributes(): string[] {
-    return [
-      ...super.observedAttributes,
-      'track-cursor-axis',
-    ];
-  }
-
-  get trackCursorAxis(): 'x' | null {
-    const value = this.getAttribute('track-cursor-axis');
-    return value === 'x' ? value : null;
-  }
-}
-
-export const TooltipElement: ConnectedComponentConstructor<Tooltip, TooltipState> = toConnectedHTMLComponent(
-  Tooltip,
-  getTooltipState,
-  getTooltipProps,
-  'Tooltip',
-);
diff --git a/packages/__tech-preview__/html/src/elements/volume-slider.ts b/packages/__tech-preview__/html/src/elements/volume-slider.ts
deleted file mode 100644
index fd8bcbfa..00000000
--- a/packages/__tech-preview__/html/src/elements/volume-slider.ts
+++ /dev/null
@@ -1,203 +0,0 @@
-import type { Prettify } from '../types';
-import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
-
-import { VolumeSlider as CoreVolumeSlider } from '@videojs/core-preview';
-import { volumeSliderStateDefinition } from '@videojs/core-preview/store';
-import { memoize } from '@videojs/utils-preview';
-
-import { getCoreState, getPropsFromAttrs, toConnectedHTMLComponent } from '../utils/component-factory';
-
-// ============================================================================
-// ROOT COMPONENT
-// ============================================================================
-
-type VolumeSliderState = Prettify<ReturnType<CoreVolumeSlider['getState']>>;
-type VolumeSliderStateWithMethods = Prettify<VolumeSliderState & ReturnType<typeof volumeSliderStateDefinition.createRequestMethods>>;
-
-const volumeSliderCreateRequestMethods = memoize(volumeSliderStateDefinition.createRequestMethods);
-
-export const getVolumeSliderRootState: StateHook<VolumeSliderRoot, VolumeSliderStateWithMethods> = (element, mediaStore) => {
-  const mediaState = volumeSliderStateDefinition.stateTransform(mediaStore.getState());
-  const mediaMethods = volumeSliderCreateRequestMethods(mediaStore.dispatch);
-  const coreState = getCoreState(CoreVolumeSlider, {
-    ...getPropsFromAttrs(element),
-    ...mediaState,
-    ...mediaMethods,
-  });
-  return {
-    ...coreState,
-  };
-};
-
-/**
- * VolumeSlider Root props hook - equivalent to React's useVolumeSliderRootProps
- * Handles element attributes and properties based on state
- */
-export const getVolumeSliderRootProps: PropsHook<VolumeSliderRoot, VolumeSliderStateWithMethods> = (element, state) => {
-  if (state._rootElement !== element) {
-    state._setRootElement(element);
-  }
-
-  const volumeText = `${Math.round(state.muted ? 0 : state.volume * 100)}%`;
-
-  return {
-    role: 'slider',
-    tabindex: element.getAttribute('tabindex') ?? '0',
-    'data-muted': state.muted.toString(),
-    'data-volume-level': state.volumeLevel,
-    'data-orientation': element.orientation || 'horizontal',
-    'aria-label': 'Volume',
-    'aria-valuemin': '0',
-    'aria-valuemax': '100',
-    'aria-valuenow': Math.round(state.muted ? 0 : state.volume * 100).toString(),
-    'aria-valuetext': volumeText,
-    'aria-orientation': element.orientation || 'horizontal',
-    style: {
-      ...(element.hasAttribute('commandfor') ? { anchorName: `--${element.getAttribute('commandfor')}` } : {}),
-      '--slider-fill': `${state._fillWidth.toFixed(3)}%`,
-    },
-  };
-};
-
-export class VolumeSliderRoot extends HTMLElement {
-  static readonly observedAttributes: readonly string[] = ['commandfor', 'orientation'];
-
-  _state: VolumeSliderState | undefined;
-
-  get orientation(): 'horizontal' | 'vertical' {
-    return (this.getAttribute('orientation') as 'horizontal' | 'vertical') || 'horizontal';
-  }
-}
-
-export const VolumeSliderRootElement: ConnectedComponentConstructor<VolumeSliderRoot, VolumeSliderStateWithMethods> = toConnectedHTMLComponent(
-  VolumeSliderRoot,
-  getVolumeSliderRootState,
-  getVolumeSliderRootProps,
-  'VolumeSliderRoot',
-);
-
-// ============================================================================
-// TRACK COMPONENT
-// ============================================================================
-
-export const getVolumeSliderTrackProps: PropsHook<VolumeSliderTrack, undefined> = (element, _state) => {
-  const rootElement = element.closest('media-volume-slider') as VolumeSliderRoot;
-
-  if (rootElement._state?._trackElement !== element) {
-    rootElement._state?._setTrackElement?.(element);
-  }
-
-  const orientation = rootElement?.orientation || 'horizontal';
-
-  return {
-    'data-orientation': orientation,
-    style: {
-      width: orientation === 'horizontal' ? '100%' : undefined,
-      height: orientation !== 'horizontal' ? '100%' : undefined,
-    },
-  };
-};
-
-export class VolumeSliderTrack extends HTMLElement {}
-
-export const VolumeSliderTrackElement: ConnectedComponentConstructor<VolumeSliderTrack, undefined> = toConnectedHTMLComponent(
-  VolumeSliderTrack,
-  undefined,
-  getVolumeSliderTrackProps,
-  'VolumeSliderTrack',
-);
-
-// ============================================================================
-// INDICATOR COMPONENT
-// ============================================================================
-
-export const getVolumeSliderIndicatorProps: PropsHook<VolumeSliderIndicator, undefined> = (element, _state) => {
-  const rootElement = element.closest('media-volume-slider') as VolumeSliderRoot;
-  const orientation = rootElement?.orientation || 'horizontal';
-  const style = orientation === 'horizontal'
-    ? {
-        position: 'absolute',
-        width: 'var(--slider-fill, 0%)',
-        height: '100%',
-        top: '0',
-        bottom: undefined,
-      }
-    : {
-        position: 'absolute',
-        height: 'var(--slider-fill, 0%)',
-        width: '100%',
-        bottom: '0',
-        top: undefined,
-      };
-
-  return {
-    'data-orientation': orientation,
-    style,
-  };
-};
-
-export class VolumeSliderIndicator extends HTMLElement {}
-
-export const VolumeSliderIndicatorElement: ConnectedComponentConstructor<VolumeSliderIndicator, undefined> = toConnectedHTMLComponent(
-  VolumeSliderIndicator,
-  undefined,
-  getVolumeSliderIndicatorProps,
-  'VolumeSliderIndicator',
-);
-
-// ============================================================================
-// THUMB COMPONENT
-// ============================================================================
-
-export const getVolumeSliderThumbProps: PropsHook<VolumeSliderThumb, undefined> = (element, _state) => {
-  const rootElement = element.closest('media-volume-slider') as VolumeSliderRoot;
-  const orientation = rootElement?.orientation || 'horizontal';
-  const style = orientation === 'horizontal'
-    ? {
-        position: 'absolute',
-        left: 'var(--slider-fill, 0%)',
-        top: '50%',
-        bottom: undefined,
-        translate: '-50% -50%',
-      }
-    : {
-        position: 'absolute',
-        bottom: 'var(--slider-fill, 0%)',
-        left: '50%',
-        top: undefined,
-        translate: '-50% 50%',
-      };
-
-  return {
-    'data-orientation': orientation,
-    style,
-  };
-};
-
-export class VolumeSliderThumb extends HTMLElement {}
-
-export const VolumeSliderThumbElement: ConnectedComponentConstructor<VolumeSliderThumb, undefined> = toConnectedHTMLComponent(
-  VolumeSliderThumb,
-  undefined,
-  getVolumeSliderThumbProps,
-  'VolumeSliderThumb',
-);
-
-// ============================================================================
-// EXPORTS
-// ============================================================================
-
-export const VolumeSliderElement = Object.assign(
-  {},
-  {
-    Root: VolumeSliderRootElement,
-    Track: VolumeSliderTrackElement,
-    Indicator: VolumeSliderIndicatorElement,
-    Thumb: VolumeSliderThumbElement,
-  },
-) as {
-  Root: typeof VolumeSliderRootElement;
-  Track: typeof VolumeSliderTrackElement;
-  Indicator: typeof VolumeSliderIndicatorElement;
-  Thumb: typeof VolumeSliderThumbElement;
-};
diff --git a/packages/__tech-preview__/html/src/icons/index.ts b/packages/__tech-preview__/html/src/icons/index.ts
deleted file mode 100644
index 389c891c..00000000
--- a/packages/__tech-preview__/html/src/icons/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import './media-fullscreen-enter-alt-icon';
-import './media-fullscreen-enter-icon';
-import './media-fullscreen-exit-alt-icon';
-import './media-fullscreen-exit-icon';
-import './media-pause-icon';
-import './media-play-icon';
-import './media-volume-high-icon';
-import './media-volume-low-icon';
-import './media-volume-off-icon';
diff --git a/packages/__tech-preview__/html/src/icons/media-chrome-icon.ts b/packages/__tech-preview__/html/src/icons/media-chrome-icon.ts
deleted file mode 100644
index f9a5c284..00000000
--- a/packages/__tech-preview__/html/src/icons/media-chrome-icon.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export function getTemplateHTML() {
-  return /* html */ `
-    <style>
-      :host {
-        display: inline-block;
-      }
-      svg {
-        fill: currentColor;
-      }
-    </style>
-  `;
-}
-
-export class MediaChromeIcon extends HTMLElement {
-  static shadowRootOptions = { mode: 'open' as ShadowRootMode };
-  static getTemplateHTML: () => string = getTemplateHTML;
-
-  constructor() {
-    super();
-
-    if (!this.shadowRoot) {
-      this.attachShadow((this.constructor as typeof MediaChromeIcon).shadowRootOptions);
-      this.shadowRoot!.innerHTML = (this.constructor as typeof MediaChromeIcon).getTemplateHTML();
-    }
-  }
-}
diff --git a/packages/__tech-preview__/html/src/icons/media-fullscreen-enter-alt-icon.ts b/packages/__tech-preview__/html/src/icons/media-fullscreen-enter-alt-icon.ts
deleted file mode 100644
index 30942a2e..00000000
--- a/packages/__tech-preview__/html/src/icons/media-fullscreen-enter-alt-icon.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { SVG_ICONS } from '@videojs/icons-preview';
-
-import { defineCustomElement } from '@/utils/custom-element';
-import { MediaChromeIcon } from './media-chrome-icon';
-
-export function getTemplateHTML() {
-  return /* html */ `
-    ${MediaChromeIcon.getTemplateHTML()}
-    <style>
-      :host {
-        display: var(--media-fullscreen-enter-icon-display, inline-flex);
-      }
-    </style>
-    ${SVG_ICONS.fullscreenEnterAlt}
-  `;
-}
-
-export class MediaFullscreenEnterAltIconElement extends MediaChromeIcon {
-  static getTemplateHTML: () => string = getTemplateHTML;
-}
-
-defineCustomElement('media-fullscreen-enter-alt-icon', MediaFullscreenEnterAltIconElement);
diff --git a/packages/__tech-preview__/html/src/icons/media-fullscreen-enter-icon.ts b/packages/__tech-preview__/html/src/icons/media-fullscreen-enter-icon.ts
deleted file mode 100644
index 55e3672d..00000000
--- a/packages/__tech-preview__/html/src/icons/media-fullscreen-enter-icon.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { SVG_ICONS } from '@videojs/icons-preview';
-
-import { defineCustomElement } from '@/utils/custom-element';
-import { MediaChromeIcon } from './media-chrome-icon';
-
-export function getTemplateHTML() {
-  return /* html */ `
-    ${MediaChromeIcon.getTemplateHTML()}
-    <style>
-      :host {
-        display: var(--media-fullscreen-enter-icon-display, inline-flex);
-      }
-    </style>
-    ${SVG_ICONS.fullscreenEnter}
-  `;
-}
-
-export class MediaFullscreenEnterIconElement extends MediaChromeIcon {
-  static getTemplateHTML: () => string = getTemplateHTML;
-}
-
-defineCustomElement('media-fullscreen-enter-icon', MediaFullscreenEnterIconElement);
diff --git a/packages/__tech-preview__/html/src/icons/media-fullscreen-exit-alt-icon.ts b/packages/__tech-preview__/html/src/icons/media-fullscreen-exit-alt-icon.ts
deleted file mode 100644
index 5ee266ad..00000000
--- a/packages/__tech-preview__/html/src/icons/media-fullscreen-exit-alt-icon.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { SVG_ICONS } from '@videojs/icons-preview';
-
-import { defineCustomElement } from '@/utils/custom-element';
-import { MediaChromeIcon } from './media-chrome-icon';
-
-export function getTemplateHTML() {
-  return /* html */ `
-    ${MediaChromeIcon.getTemplateHTML()}
-    <style>
-      :host {
-        display: var(--media-fullscreen-exit-icon-display, inline-flex);
-      }
-    </style>
-    ${SVG_ICONS.fullscreenExitAlt}
-  `;
-}
-
-export class MediaFullscreenExitAltIconElement extends MediaChromeIcon {
-  static getTemplateHTML: () => string = getTemplateHTML;
-}
-
-defineCustomElement('media-fullscreen-exit-alt-icon', MediaFullscreenExitAltIconElement);
diff --git a/packages/__tech-preview__/html/src/icons/media-fullscreen-exit-icon.ts b/packages/__tech-preview__/html/src/icons/media-fullscreen-exit-icon.ts
deleted file mode 100644
index 42983dd4..00000000
--- a/packages/__tech-preview__/html/src/icons/media-fullscreen-exit-icon.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { SVG_ICONS } from '@videojs/icons-preview';
-
-import { defineCustomElement } from '@/utils/custom-element';
-import { MediaChromeIcon } from './media-chrome-icon';
-
-export function getTemplateHTML() {
-  return /* html */ `
-    ${MediaChromeIcon.getTemplateHTML()}
-    <style>
-      :host {
-        display: var(--media-fullscreen-exit-icon-display, inline-flex);
-      }
-    </style>
-    ${SVG_ICONS.fullscreenExit}
-  `;
-}
-
-export class MediaFullscreenExitIconElement extends MediaChromeIcon {
-  static getTemplateHTML: () => string = getTemplateHTML;
-}
-
-defineCustomElement('media-fullscreen-exit-icon', MediaFullscreenExitIconElement);
diff --git a/packages/__tech-preview__/html/src/icons/media-pause-icon.ts b/packages/__tech-preview__/html/src/icons/media-pause-icon.ts
deleted file mode 100644
index a7c99ef5..00000000
--- a/packages/__tech-preview__/html/src/icons/media-pause-icon.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { SVG_ICONS } from '@videojs/icons-preview';
-
-import { defineCustomElement } from '@/utils/custom-element';
-import { MediaChromeIcon } from './media-chrome-icon';
-
-export function getTemplateHTML() {
-  return /* html */ `
-    ${MediaChromeIcon.getTemplateHTML()}
-    ${SVG_ICONS.pause}
-  `;
-}
-
-export class MediaPauseIconElement extends MediaChromeIcon {
-  static getTemplateHTML: () => string = getTemplateHTML;
-}
-
-defineCustomElement('media-pause-icon', MediaPauseIconElement);
diff --git a/packages/__tech-preview__/html/src/icons/media-play-icon.ts b/packages/__tech-preview__/html/src/icons/media-play-icon.ts
deleted file mode 100644
index 2f6a7e68..00000000
--- a/packages/__tech-preview__/html/src/icons/media-play-icon.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { SVG_ICONS } from '@videojs/icons-preview';
-
-import { defineCustomElement } from '@/utils/custom-element';
-import { MediaChromeIcon } from './media-chrome-icon';
-
-export function getTemplateHTML() {
-  return /* html */ `
-    ${MediaChromeIcon.getTemplateHTML()}
-    <style>
-      :host {
-        display: var(--media-play-icon-display, inline-flex);
-      }
-    </style>
-    ${SVG_ICONS.play}
-  `;
-}
-
-export class MediaPlayIconElement extends MediaChromeIcon {
-  static getTemplateHTML: () => string = getTemplateHTML;
-}
-
-defineCustomElement('media-play-icon', MediaPlayIconElement);
diff --git a/packages/__tech-preview__/html/src/icons/media-volume-high-icon.ts b/packages/__tech-preview__/html/src/icons/media-volume-high-icon.ts
deleted file mode 100644
index 562c47d5..00000000
--- a/packages/__tech-preview__/html/src/icons/media-volume-high-icon.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { SVG_ICONS } from '@videojs/icons-preview';
-
-import { defineCustomElement } from '@/utils/custom-element';
-import { MediaChromeIcon } from './media-chrome-icon';
-
-export function getTemplateHTML() {
-  return /* html */ `
-    ${MediaChromeIcon.getTemplateHTML()}
-    <style>
-      :host {
-        display: var(--media-play-icon-display, inline-flex);
-      }
-    </style>
-    ${SVG_ICONS.volumeHigh}
-  `;
-}
-
-export class MediaVolumeHighIconElement extends MediaChromeIcon {
-  static getTemplateHTML: () => string = getTemplateHTML;
-}
-
-defineCustomElement('media-volume-high-icon', MediaVolumeHighIconElement);
diff --git a/packages/__tech-preview__/html/src/icons/media-volume-low-icon.ts b/packages/__tech-preview__/html/src/icons/media-volume-low-icon.ts
deleted file mode 100644
index 0c1bd598..00000000
--- a/packages/__tech-preview__/html/src/icons/media-volume-low-icon.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { SVG_ICONS } from '@videojs/icons-preview';
-
-import { defineCustomElement } from '@/utils/custom-element';
-import { MediaChromeIcon } from './media-chrome-icon';
-
-export function getTemplateHTML() {
-  return /* html */ `
-    ${MediaChromeIcon.getTemplateHTML()}
-    <style>
-      :host {
-        display: var(--media-play-icon-display, inline-flex);
-      }
-    </style>
-    ${SVG_ICONS.volumeLow}
-  `;
-}
-
-export class MediaVolumeLowIconElement extends MediaChromeIcon {
-  static getTemplateHTML: () => string = getTemplateHTML;
-}
-
-defineCustomElement('media-volume-low-icon', MediaVolumeLowIconElement);
diff --git a/packages/__tech-preview__/html/src/icons/media-volume-off-icon.ts b/packages/__tech-preview__/html/src/icons/media-volume-off-icon.ts
deleted file mode 100644
index 05d74b10..00000000
--- a/packages/__tech-preview__/html/src/icons/media-volume-off-icon.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { SVG_ICONS } from '@videojs/icons-preview';
-
-import { defineCustomElement } from '@/utils/custom-element';
-import { MediaChromeIcon } from './media-chrome-icon';
-
-export function getTemplateHTML() {
-  return /* html */ `
-    ${MediaChromeIcon.getTemplateHTML()}
-    <style>
-      :host {
-        display: var(--media-play-icon-display, inline-flex);
-      }
-    </style>
-    ${SVG_ICONS.volumeOff}
-  `;
-}
-
-export class MediaVolumeOffIconElement extends MediaChromeIcon {
-  static getTemplateHTML: () => string = getTemplateHTML;
-}
-
-defineCustomElement('media-volume-off-icon', MediaVolumeOffIconElement);
diff --git a/packages/__tech-preview__/html/src/index.ts b/packages/__tech-preview__/html/src/index.ts
deleted file mode 100644
index 672d5b17..00000000
--- a/packages/__tech-preview__/html/src/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export { CurrentTimeDisplayElement } from './elements/current-time-display';
-export { DurationDisplayElement } from './elements/duration-display';
-export { FullscreenButtonElement } from './elements/fullscreen-button';
-export { MuteButtonElement } from './elements/mute-button';
-export { PlayButtonElement } from './elements/play-button';
-export { PopoverElement } from './elements/popover';
-export { PreviewTimeDisplayElement } from './elements/preview-time-display';
-export { TimeSliderElement } from './elements/time-slider';
-export { TooltipElement } from './elements/tooltip';
-export { VolumeSliderElement } from './elements/volume-slider';
-export { MediaContainerElement } from './media/media-container';
-export { MediaSkinElement } from './media/media-skin';
-export { VideoProviderElement } from './media/video-provider';
diff --git a/packages/__tech-preview__/html/src/media/media-container.ts b/packages/__tech-preview__/html/src/media/media-container.ts
deleted file mode 100644
index df3780af..00000000
--- a/packages/__tech-preview__/html/src/media/media-container.ts
+++ /dev/null
@@ -1,234 +0,0 @@
-import type { Constructor, CustomElement } from '@open-wc/context-protocol';
-
-import { ConsumerMixin } from '@open-wc/context-protocol';
-
-export function getTemplateHTML() {
-  return /* html */ `
-    <slot name="media"></slot>
-    <slot></slot>
-  `;
-}
-
-export const Attributes = {
-  // Inputs
-  AUTOHIDE: 'autohide',
-  AUTOHIDE_OVER_CONTROLS: 'autohideovercontrols',
-  // Output
-  CONTROLS_VISIBILITY: 'data-controls',
-} as const;
-
-const DEFAULT_AUTOHIDE = 2000; // 2 seconds
-
-const CustomElementConsumer: Constructor<CustomElement & HTMLElement> = ConsumerMixin(HTMLElement);
-
-export class MediaContainerElement extends CustomElementConsumer {
-  static shadowRootOptions = { mode: 'open' as ShadowRootMode };
-  static getTemplateHTML: () => string = getTemplateHTML;
-
-  static get observedAttributes(): string[] {
-    return [Attributes.AUTOHIDE];
-  }
-
-  _mediaStore: any;
-  _mediaSlot: HTMLSlotElement;
-  _paused: boolean = true;
-  contexts = {
-    mediaStore: (mediaStore: any): void => {
-      this._mediaStore = mediaStore;
-      this._handleMediaSlotChange();
-      this._registerContainerStateOwner();
-      this._subscribeToPlayState();
-    },
-  };
-
-  _pointerDownTimeStamp = 0;
-  _inactiveTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
-  _autohide: number = DEFAULT_AUTOHIDE;
-  _isUserActive: boolean = true;
-
-  constructor() {
-    super();
-
-    if (!this.shadowRoot) {
-      this.attachShadow((this.constructor as typeof MediaContainerElement).shadowRootOptions);
-      this.shadowRoot!.innerHTML = (this.constructor as typeof MediaContainerElement).getTemplateHTML();
-    }
-
-    this._mediaSlot = this.shadowRoot!.querySelector('slot[name=media]') as HTMLSlotElement;
-    this._mediaSlot.addEventListener('slotchange', this._handleMediaSlotChange);
-
-    // Add click handler for play/pause functionality
-    this.addEventListener('click', this._handleClick);
-
-    // Add handlers for user activity detection
-    this.addEventListener('pointerdown', this._handlePointerDown);
-    this.addEventListener('pointermove', this._handlePointerMove);
-    this.addEventListener('pointerup', this._handlePointerUp);
-    this.addEventListener('mouseleave', this._setUserInactive);
-    this.addEventListener('keyup', this._scheduleUserInactive);
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback?.();
-    this._registerContainerStateOwner();
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback?.();
-    this._unregisterContainerStateOwner();
-  }
-
-  attributeChangedCallback(
-    attrName: string,
-    _oldValue: string,
-    newValue: string,
-  ): void {
-    if (attrName.toLowerCase() === Attributes.AUTOHIDE) {
-      this.autohide = newValue;
-    }
-  }
-
-  _registerContainerStateOwner = (): void => {
-    if (!this._mediaStore) return;
-    this._mediaStore.dispatch({ type: 'containerstateownerchangerequest', detail: this });
-  };
-
-  _unregisterContainerStateOwner = (): void => {
-    if (!this._mediaStore) return;
-    this._mediaStore.dispatch({ type: 'containerstateownerchangerequest', detail: null });
-  };
-
-  _getMediaElement = (): HTMLMediaElement | null => {
-    const media = this._mediaSlot.assignedElements({ flatten: true })[0];
-    if (media && (media instanceof HTMLMediaElement)) {
-      return media;
-    }
-    return null;
-  };
-
-  _handleMediaSlotChange = (): void => {
-    const media = this._getMediaElement();
-    this._mediaStore.dispatch({ type: 'mediastateownerchangerequest', detail: media });
-  };
-
-  _handleClick = (event: PointerEvent): void => {
-    if (!this._mediaStore) return;
-    // Ignore clicks from touch/pen devices
-    if (navigator.maxTouchPoints > 0 || event.pointerType !== 'mouse') return;
-    // Ignore clicks not on media elements
-    if (!['video', 'audio'].includes((event.target as HTMLElement).localName || '')) return;
-
-    if (this._paused) {
-      this._mediaStore.dispatch({ type: 'playrequest' });
-    } else {
-      this._mediaStore.dispatch({ type: 'pauserequest' });
-    }
-  };
-
-  _handlePointerDown = (event: PointerEvent): void => {
-    this._pointerDownTimeStamp = event.timeStamp;
-  };
-
-  _subscribeToPlayState = (): void => {
-    if (!this._mediaStore) return;
-
-    // Subscribe to paused state changes
-    this._mediaStore.subscribe((state: any) => {
-      this._paused = state.paused ?? true;
-      this._updateControlsVisibility();
-    });
-  };
-
-  _handlePointerMove = (event: PointerEvent): void => {
-    if (event.pointerType !== 'mouse') {
-      // On mobile we toggle the controls on a tap which is handled in pointerup,
-      // but Android fires pointermove events even when the user is just tapping.
-      // Prevent calling setActive() on tap because it will mess with the toggle logic.
-      const MAX_TAP_DURATION = 250;
-      // If the move duration exceeds 250ms then it's a drag and we should show the controls.
-      if (event.timeStamp - this._pointerDownTimeStamp < MAX_TAP_DURATION) return;
-    }
-
-    this._setUserActive();
-
-    // Stay visible if hovered over control bar
-    clearTimeout(this._inactiveTimeout);
-
-    const media = this._getMediaElement();
-
-    // If hovering over something other than controls, we're free to make inactive
-    const autohideOverControls = this.hasAttribute(Attributes.AUTOHIDE_OVER_CONTROLS);
-    if ([this, media].includes(event.target as HTMLMediaElement) || autohideOverControls) {
-      this._scheduleUserInactive();
-    }
-  };
-
-  _handlePointerUp = (event: PointerEvent): void => {
-    if (navigator.maxTouchPoints > 0 || event.pointerType !== 'mouse') {
-      const media = this._getMediaElement();
-
-      // Toggle behavior: if user is active, make inactive; otherwise make active
-      if (
-        [this, media].includes(event.target as HTMLMediaElement)
-        && this._isUserActive
-      ) {
-        this._setUserInactive();
-      } else {
-        this._scheduleUserInactive();
-      }
-    } else if (
-      event
-        .composedPath()
-        .some(element =>
-          element instanceof HTMLElement && ['media-play-button', 'media-fullscreen-button'].includes(
-            element?.localName,
-          ),
-        )
-    ) {
-      this._scheduleUserInactive();
-    }
-  };
-
-  _updateControlsVisibility = (): void => {
-    // Match React logic: visible if user active OR paused
-    const shouldBeVisible = this._isUserActive || this._paused;
-    const targetValue = shouldBeVisible ? 'visible' : 'hidden';
-
-    if (this.getAttribute(Attributes.CONTROLS_VISIBILITY) !== targetValue) {
-      this.setAttribute(Attributes.CONTROLS_VISIBILITY, targetValue);
-    }
-  };
-
-  _setUserActive = (): void => {
-    this._isUserActive = true;
-    this._updateControlsVisibility();
-  };
-
-  _setUserInactive = (): void => {
-    if (typeof this._autohide !== 'number' || this._autohide < 0) return;
-    this._isUserActive = false;
-    this._updateControlsVisibility();
-  };
-
-  _scheduleUserInactive = (): void => {
-    this._setUserActive();
-    clearTimeout(this._inactiveTimeout);
-    const autohide = Number.parseInt(this.autohide);
-
-    // Setting autohide to -1 turns off autohide
-    if (autohide < 0) return;
-
-    this._inactiveTimeout = setTimeout(() => {
-      this._setUserInactive();
-    }, autohide);
-  };
-
-  set autohide(ms: string) {
-    const parsed = Number(ms);
-    this._autohide = Number.isNaN(parsed) ? 0 : parsed;
-  }
-
-  get autohide(): string {
-    return (this._autohide === undefined ? DEFAULT_AUTOHIDE : this._autohide).toString();
-  }
-}
diff --git a/packages/__tech-preview__/html/src/media/media-skin.ts b/packages/__tech-preview__/html/src/media/media-skin.ts
deleted file mode 100644
index f1b1b317..00000000
--- a/packages/__tech-preview__/html/src/media/media-skin.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export function getTemplateHTML() {
-  return /* html */ `
-    <style>
-      :host {
-        display: block;
-      }
-
-      media-container {
-        display: block;
-        width: 100%;
-        height: 100%;
-      }
-    </style>
-    <slot></slot>
-  `;
-}
-
-export class MediaSkinElement extends HTMLElement {
-  static shadowRootOptions = { mode: 'open' as ShadowRootMode };
-  static getTemplateHTML: () => string = getTemplateHTML;
-
-  constructor() {
-    super();
-
-    if (!this.shadowRoot) {
-      this.attachShadow((this.constructor as typeof MediaSkinElement).shadowRootOptions);
-      this.shadowRoot!.innerHTML = (this.constructor as typeof MediaSkinElement).getTemplateHTML();
-    }
-  }
-}
diff --git a/packages/__tech-preview__/html/src/media/video-provider.ts b/packages/__tech-preview__/html/src/media/video-provider.ts
deleted file mode 100644
index 6a898b3e..00000000
--- a/packages/__tech-preview__/html/src/media/video-provider.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { Constructor, CustomElement } from '@open-wc/context-protocol';
-import type { MediaStore } from '@videojs/core-preview/store';
-
-import { ProviderMixin } from '@open-wc/context-protocol';
-import { createMediaStore } from '@videojs/core-preview/store';
-
-import { printConsoleBanner } from '@videojs/utils-preview';
-import { version } from '../../package.json';
-
-printConsoleBanner(version);
-
-const ProviderHTMLElement: Constructor<CustomElement & HTMLElement> = ProviderMixin(HTMLElement);
-
-export class VideoProviderElement extends ProviderHTMLElement {
-  contexts = {
-    mediaStore: (): MediaStore => {
-      return createMediaStore();
-    },
-  };
-}
diff --git a/packages/__tech-preview__/html/src/skins/frosted/index.ts b/packages/__tech-preview__/html/src/skins/frosted/index.ts
deleted file mode 100644
index 0ccf2160..00000000
--- a/packages/__tech-preview__/html/src/skins/frosted/index.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import { MediaSkinElement } from '@/media/media-skin';
-import { defineCustomElement } from '@/utils/custom-element';
-import styles from './styles.css';
-// be sure to import video-provider first for proper context initialization
-import '@/define/video-provider';
-import '@/define/media-container';
-import '@/define/media-play-button';
-import '@/define/media-mute-button';
-import '@/define/media-volume-slider';
-import '@/define/media-time-slider';
-import '@/define/media-fullscreen-button';
-import '@/define/media-duration-display';
-import '@/define/media-current-time-display';
-import '@/define/media-preview-time-display';
-import '@/define/media-popover';
-import '@/define/media-tooltip';
-import '@/icons';
-
-export function getTemplateHTML() {
-  return /* html */`
-    ${MediaSkinElement.getTemplateHTML()}
-    <style>${styles}</style>
-
-    <media-container>
-      <slot name="media" slot="media"></slot>
-
-      <div class="overlay"></div>
-
-      <div class="control-bar surface">
-        <!-- NOTE: We can decide if we further want to provide a further, "themed" media-play-button that comes with baked in default styles and icons. (CJP) -->
-
-        <media-play-button commandfor="play-tooltip" class="button">
-          <media-play-icon class="icon play-icon"></media-play-icon>
-          <media-pause-icon class="icon pause-icon"></media-pause-icon>
-        </media-play-button>
-        <media-tooltip
-          id="play-tooltip"
-          class="surface popup-animation"
-          popover="manual"
-          delay="500"
-          side="top"
-          side-offset="12"
-          collision-padding="12"
-        >
-          <span class="tooltip play-tooltip">Play</span>
-          <span class="tooltip pause-tooltip">Pause</span>
-        </media-tooltip>
-
-        <div class="time-controls">
-          <!-- Use the show-remaining attribute to show count down/remaining time -->
-          <media-current-time-display></media-current-time-display>
-
-          <media-time-slider commandfor="time-slider-tooltip" class="slider">
-            <media-time-slider-track class="slider-track">
-              <media-time-slider-progress class="slider-progress"></media-time-slider-progress>
-              <media-time-slider-pointer class="slider-pointer"></media-time-slider-pointer>
-            </media-time-slider-track>
-            <media-time-slider-thumb class="slider-thumb"></media-time-slider-thumb>
-          </media-time-slider>
-          <media-tooltip
-            id="time-slider-tooltip"
-            class="surface popup-animation"
-            popover="manual"
-            track-cursor-axis="x"
-            side="top"
-            side-offset="18"
-            collision-padding="12"
-          >
-            <media-preview-time-display></media-preview-time-display>
-          </media-tooltip>
-
-          <media-duration-display></media-duration-display>
-        </div>
-
-        <media-mute-button commandfor="volume-slider-popover" command="toggle-popover" class="button">
-          <media-volume-high-icon class="icon volume-high-icon"></media-volume-high-icon>
-          <media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
-          <media-volume-off-icon class="icon volume-off-icon"></media-volume-off-icon>
-        </media-mute-button>
-        <media-popover
-          id="volume-slider-popover"
-          class="surface popup-animation"
-          popover="manual"
-          open-on-hover
-          delay="200"
-          close-delay="100"
-          side="top"
-          side-offset="12"
-          collision-padding="12"
-        >
-          <media-volume-slider class="slider" orientation="vertical">
-            <media-volume-slider-track class="slider-track">
-              <media-volume-slider-indicator class="slider-progress"></media-volume-slider-indicator>
-            </media-volume-slider-track>
-            <media-volume-slider-thumb class="slider-thumb"></media-volume-slider-thumb>
-          </media-volume-slider>
-        </media-popover>
-
-        <media-fullscreen-button commandfor="fullscreen-tooltip" class="button">
-          <media-fullscreen-enter-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-icon>
-          <media-fullscreen-exit-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-icon>
-        </media-fullscreen-button>
-        <media-tooltip
-          id="fullscreen-tooltip"
-          class="surface popup-animation"
-          popover="manual"
-          delay="500"
-          side="top"
-          side-offset="12"
-          collision-padding="12"
-        >
-          <span class="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
-          <span class="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
-        </media-tooltip>
-      </div>
-    </media-container>
-  `;
-}
-
-export class MediaSkinFrostedElement extends MediaSkinElement {
-  static getTemplateHTML: () => string = getTemplateHTML;
-}
-
-defineCustomElement('media-skin-frosted', MediaSkinFrostedElement);
diff --git a/packages/__tech-preview__/html/src/skins/frosted/styles.css b/packages/__tech-preview__/html/src/skins/frosted/styles.css
deleted file mode 100644
index 1429a77e..00000000
--- a/packages/__tech-preview__/html/src/skins/frosted/styles.css
+++ /dev/null
@@ -1,354 +0,0 @@
-media-container * {
-  box-sizing: border-box;
-}
-
-media-container {
-  position: relative;
-  isolation: isolate;
-  container: root / inline-size;
-  overflow: clip;
-  border-radius: var(--frosted-border-radius, 2rem);
-  background: oklab(0 0 0);
-  font-family: ui-sans-serif, system-ui, sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  -webkit-font-smoothing: auto;
-  -moz-osx-font-smoothing: auto;
-}
-media-container::before,
-media-container::after {
-  content: '';
-  position: absolute;
-  pointer-events: none;
-  border-radius: inherit;
-  z-index: 10;
-}
-media-container::before {
-  inset: 1px;
-  box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.15);
-}
-media-container::after {
-  inset: 0;
-  box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.1);
-}
-
-/* Fullscreen */
-media-container:fullscreen {
-  border-radius: 0;
-}
-
-media-container > ::slotted([slot='media']) {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-/* Media Container UI Overlay Styling */
-media-container > .overlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: start;
-  pointer-events: none;
-  border-radius: inherit;
-  background-image: linear-gradient(to top, oklab(0 0 0 / 0.5), oklab(0 0 0 / 0.3), rgba(0, 0, 0, 0));
-  backdrop-filter: saturate(1.5) brightness(0.9);
-  transition-property: opacity;
-  transition-duration: 100ms;
-  transition-delay: 0ms;
-  transition-timing-function: ease-out;
-}
-media-container[data-controls='hidden'] > .overlay {
-  transition-delay: 500ms;
-  transition-duration: 300ms;
-  opacity: 0;
-}
-
-/* Common Surface Styles - e.g. tooltips, popovers, controls */
-.surface {
-  background-color: oklab(1 0 0 / 0.1);
-  backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);
-  box-shadow:
-    inset 0 0 0 1px oklab(1 0 0 / 0.05),
-    0 0 0 1px oklab(0 0 0 / 0.15),
-    oklab(0 0 0 / 0.15) 0px 1px 3px 0px,
-    oklab(0 0 0 / 0.15) 0px 1px 2px -1px;
-}
-@media (prefers-reduced-transparency: reduce) {
-  .surface {
-    background-color: oklab(0 0 0 / 0.7);
-    box-shadow:
-      inset 0 0 0 1px oklab(0 0 0),
-      0 0 0 1px oklab(1 0 0 / 0.2);
-  }
-}
-@media (prefers-contrast: more) {
-  .surface {
-    background-color: oklab(0 0 0 / 0.9);
-    box-shadow:
-      inset 0 0 0 1px oklab(0 0 0),
-      0 0 0 1px oklab(1 0 0 / 0.2);
-  }
-}
-
-/* Media Control Bar UI/Styles */
-.control-bar {
-  position: absolute;
-  bottom: 0.75rem;
-  inset-inline: 0.75rem;
-  padding: 0.25rem;
-  display: flex;
-  align-items: center;
-  gap: 0.125rem;
-  border-radius: calc(infinity * 1px);
-  will-change: scale, transform, filter, opacity;
-  transition-property: scale, transform, filter, opacity;
-  transition-delay: 0ms;
-  transition-duration: 100ms;
-  transition-timing-function: ease-out;
-  transform-origin: bottom;
-  color: oklab(1 0 0);
-}
-media-container[data-controls='hidden'] > .control-bar {
-  opacity: 0;
-  scale: 0.9;
-  filter: blur(8px);
-  transition-delay: 500ms;
-  transition-duration: 300ms;
-  pointer-events: none;
-}
-
-/* Time Display Styling */
-.time-controls {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  gap: 0.75rem;
-  padding-inline: 0.375rem;
-}
-media-current-time-display,
-media-duration-display {
-  text-shadow: 0 1px 0 oklab(0 0 0 / 0.25);
-  font-variant-numeric: tabular-nums;
-}
-
-/* Generic Media Button Styling */
-.button {
-  display: grid;
-  flex-shrink: 0;
-  padding: 0.5rem;
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  border-radius: calc(infinity * 1px);
-  color: oklab(1 0 0 / 0.9);
-  user-select: none;
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-  transition-property: background-color, color, outline-offset;
-  transition-duration: 150ms;
-  transition-timing-function: ease-out;
-}
-.button:hover,
-.button:focus-visible,
-.button[aria-expanded='true'] {
-  background-color: oklab(1 0 0 / 0.1);
-  color: oklab(1 0 0);
-  text-decoration: none;
-}
-.button:focus-visible {
-  outline-color: oklch(62.3% 0.214 259.815);
-  outline-offset: 2px;
-}
-.button[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-  filter: grayscale(1);
-}
-
-.button .icon {
-  grid-area: 1 / 1;
-  width: 18px;
-  height: 18px;
-  filter: drop-shadow(0 1px 0 oklab(0 0 0 / 0.25));
-}
-
-/* Media Play Button UI/Styles */
-media-play-button .icon {
-  opacity: 0;
-  transition: opacity 150ms linear;
-}
-
-media-play-button:not([data-paused]) .pause-icon,
-media-play-button[data-paused] .play-icon {
-  opacity: 1;
-}
-
-/* Media Fullscreen Button UI/Styles */
-media-fullscreen-button .icon {
-  display: none;
-}
-media-fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,
-media-fullscreen-button[data-fullscreen] .fullscreen-exit-icon {
-  display: inline;
-}
-
-/* One way to define the "default visible" icon (CJP) */
-media-mute-button .icon {
-  display: none;
-}
-media-mute-button:not([data-volume-level]) .volume-low-icon,
-media-mute-button[data-volume-level='high'] .volume-high-icon,
-media-mute-button[data-volume-level='low'] .volume-low-icon,
-media-mute-button[data-volume-level='medium'] .volume-low-icon,
-media-mute-button[data-volume-level='off'] .volume-off-icon {
-  display: inline;
-}
-
-/* TimeSlider Component Styles */
-.slider {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  border-radius: calc(infinity * 1px);
-  outline: none;
-}
-
-/* Horizontal orientation styles */
-.slider[data-orientation='horizontal'] {
-  min-width: 5rem;
-  width: 100%;
-  height: 1.25rem;
-}
-
-/* Vertical orientation styles */
-.slider[data-orientation='vertical'] {
-  height: 5rem;
-  width: 1.25rem;
-}
-
-.slider-track {
-  position: relative;
-  isolation: isolate;
-  background-color: oklab(1 0 0 / 0.2);
-  border-radius: inherit;
-  overflow: hidden;
-  user-select: none;
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-  transition: outline-offset 150ms ease-out;
-  box-shadow: 0 0 0 1px oklab(0 0 0 / 0.05);
-}
-
-/* Horizontal track styles */
-.slider-track[data-orientation='horizontal'] {
-  width: 100%;
-  height: 0.25rem;
-}
-
-/* Vertical track styles */
-.slider-track[data-orientation='vertical'] {
-  width: 0.25rem;
-  height: 100%;
-}
-
-.slider:focus-visible .slider-track {
-  outline-color: oklch(62.3% 0.214 259.815);
-  outline-offset: 6px;
-}
-
-.slider-thumb {
-  width: 0.625rem;
-  height: 0.625rem;
-  background-color: oklab(1 0 0);
-  border-radius: calc(infinity * 1px);
-  user-select: none;
-  z-index: 10;
-  box-shadow:
-    0 0 0 1px oklab(0 0 0 / 0.1),
-    0 1px 3px 0 oklab(0 0 0 / 0.15),
-    0 1px 2px -1px oklab(0 0 0 / 0.15);
-  opacity: 0;
-  transition-property: opacity, height, width;
-  transition-duration: 150ms;
-  transition-timing-function: ease-out;
-}
-.slider-thumb:active {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-.slider:hover .slider-thumb,
-.slider:focus-within .slider-thumb {
-  opacity: 1;
-}
-.slider-track[data-orientation='horizontal'] .slider-thumb {
-  cursor: ew-resize;
-}
-.slider-track[data-orientation='vertical'] .slider-thumb {
-  cursor: ns-resize;
-}
-
-.slider-pointer {
-  background-color: oklab(1 0 0 / 0.2);
-  border-radius: inherit;
-}
-
-.slider-progress {
-  background-color: oklab(1 0 0);
-  border-radius: inherit;
-}
-
-media-preview-time-display {
-  font-variant-numeric: tabular-nums;
-}
-
-.popup-animation {
-  transition-property: transform, scale, opacity, filter;
-  transition-duration: 200ms;
-  transform: scale(1);
-  transform-origin: bottom;
-  opacity: 1;
-  filter: blur(0px);
-}
-.popup-animation[data-starting-style],
-.popup-animation[data-ending-style] {
-  transform: scale(0);
-  opacity: 0;
-  filter: blur(8px);
-}
-.popup-animation[data-instant] {
-  transition-duration: 0ms;
-}
-
-media-popover {
-  padding: 0.75rem 0.25rem;
-  border-radius: calc(infinity * 1px);
-  margin: 0;
-  border: 0;
-}
-
-/* Tooltip Component Styles */
-media-tooltip {
-  color: oklab(1 0 0);
-  padding: 0.25rem 0.625rem;
-  border-radius: calc(infinity * 1px);
-  font-size: 0.75rem;
-}
-
-.tooltip {
-  display: none;
-  white-space: nowrap;
-}
-
-[data-paused] + media-tooltip .play-tooltip,
-:not([data-paused]) + media-tooltip .pause-tooltip {
-  display: block;
-}
-
-[data-fullscreen] + media-tooltip .fullscreen-exit-tooltip,
-:not([data-fullscreen]) + media-tooltip .fullscreen-enter-tooltip {
-  display: block;
-}
diff --git a/packages/__tech-preview__/html/src/skins/minimal/index.ts b/packages/__tech-preview__/html/src/skins/minimal/index.ts
deleted file mode 100644
index 9ec14ce1..00000000
--- a/packages/__tech-preview__/html/src/skins/minimal/index.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import { MediaSkinElement } from '@/media/media-skin';
-import { defineCustomElement } from '@/utils/custom-element';
-import styles from './styles.css';
-// be sure to import video-provider first for proper context initialization
-import '@/define/video-provider';
-import '@/define/media-container';
-import '@/define/media-play-button';
-import '@/define/media-mute-button';
-import '@/define/media-volume-slider';
-import '@/define/media-time-slider';
-import '@/define/media-fullscreen-button';
-import '@/define/media-duration-display';
-import '@/define/media-current-time-display';
-import '@/define/media-preview-time-display';
-import '@/define/media-popover';
-
-import '@/define/media-tooltip';
-import '@/icons';
-
-export function getTemplateHTML() {
-  return /* html */`
-    ${MediaSkinElement.getTemplateHTML()}
-    <style>${styles}</style>
-
-    <media-container>
-      <slot name="media" slot="media"></slot>
-
-      <div class="overlay"></div>
-
-      <div class="control-bar">
-        <!-- NOTE: We can decide if we further want to provide a further, "themed" media-play-button that comes with baked in default styles and icons. (CJP) -->
-
-        <media-play-button commandfor="play-tooltip" class="button">
-          <media-play-icon class="icon play-icon"></media-play-icon>
-          <media-pause-icon class="icon pause-icon"></media-pause-icon>
-        </media-play-button>
-        <media-tooltip
-          id="play-tooltip"
-          class="popup-animation"
-          popover="manual"
-          delay="500"
-          side="top"
-          side-offset="6"
-          collision-padding="12"
-        >
-          <span class="tooltip play-tooltip">Play</span>
-          <span class="tooltip pause-tooltip">Pause</span>
-        </media-tooltip>
-
-        <div class="time-display-group">
-          <!-- Use the show-remaining attribute to show count down/remaining time -->
-          <media-current-time-display></media-current-time-display>
-
-          <span class="duration-display">
-            /
-            <media-duration-display></media-duration-display>
-          </span>
-        </div>
-
-        <media-time-slider commandfor="time-slider-tooltip" class="slider">
-          <media-time-slider-track class="slider-track">
-            <media-time-slider-progress class="slider-progress"></media-time-slider-progress>
-            <media-time-slider-pointer class="slider-pointer"></media-time-slider-pointer>
-          </media-time-slider-track>
-          <media-time-slider-thumb class="slider-thumb"></media-time-slider-thumb>
-        </media-time-slider>
-        <media-tooltip
-          id="time-slider-tooltip"
-          class="popup-animation"
-          popover="manual"
-          track-cursor-axis="x"
-          side="top"
-          side-offset="12"
-          collision-padding="12"
-        >
-          <media-preview-time-display></media-preview-time-display>
-        </media-tooltip>
-
-        <div class="button-group">
-          <media-mute-button commandfor="volume-slider-popover" command="toggle-popover" class="button">
-            <media-volume-high-icon class="icon volume-high-icon"></media-volume-high-icon>
-            <media-volume-low-icon class="icon volume-low-icon"></media-volume-low-icon>
-            <media-volume-off-icon class="icon volume-off-icon"></media-volume-off-icon>
-          </media-mute-button>
-          <media-popover
-            id="volume-slider-popover"
-            class="popup-animation"
-            popover="manual"
-            open-on-hover
-            delay="200"
-            close-delay="100"
-            side="top"
-            side-offset="2"
-            collision-padding="12"
-          >
-            <media-volume-slider class="slider" orientation="vertical">
-              <media-volume-slider-track class="slider-track">
-                <media-volume-slider-indicator class="slider-progress"></media-volume-slider-indicator>
-              </media-volume-slider-track>
-              <media-volume-slider-thumb class="slider-thumb"></media-volume-slider-thumb>
-            </media-volume-slider>
-          </media-popover>
-
-          <media-fullscreen-button commandfor="fullscreen-tooltip" class="button">
-            <media-fullscreen-enter-alt-icon class="icon fullscreen-enter-icon"></media-fullscreen-enter-alt-icon>
-            <media-fullscreen-exit-alt-icon class="icon fullscreen-exit-icon"></media-fullscreen-exit-icon>
-          </media-fullscreen-button>
-          <media-tooltip
-            id="fullscreen-tooltip"
-            class="popup-animation"
-            popover="manual"
-            delay="500"
-            side="top"
-            side-offset="6"
-            collision-padding="12"
-          >
-            <span class="tooltip fullscreen-enter-tooltip">Enter Fullscreen</span>
-            <span class="tooltip fullscreen-exit-tooltip">Exit Fullscreen</span>
-          </media-tooltip>
-        </div>
-      </div>
-    </media-container>
-  `;
-}
-
-export class MediaSkinMinimalElement extends MediaSkinElement {
-  static getTemplateHTML: () => string = getTemplateHTML;
-}
-
-defineCustomElement('media-skin-minimal', MediaSkinMinimalElement);
diff --git a/packages/__tech-preview__/html/src/skins/minimal/styles.css b/packages/__tech-preview__/html/src/skins/minimal/styles.css
deleted file mode 100644
index 94472e49..00000000
--- a/packages/__tech-preview__/html/src/skins/minimal/styles.css
+++ /dev/null
@@ -1,348 +0,0 @@
-media-container * {
-  box-sizing: border-box;
-}
-
-media-container {
-  position: relative;
-  isolation: isolate;
-  container: root / inline-size;
-  overflow: clip;
-  border-radius: var(--minimal-border-radius, 0.75rem);
-  background: oklab(0 0 0);
-  font-family: ui-sans-serif, system-ui, sans-serif;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  -webkit-font-smoothing: auto;
-  -moz-osx-font-smoothing: auto;
-}
-media-container::after {
-  content: '';
-  position: absolute;
-  pointer-events: none;
-  border-radius: inherit;
-  z-index: 10;
-  inset: 0;
-  box-shadow: inset 0 0 0 1px oklab(0 0 0 / 0.15);
-}
-@media (prefers-color-scheme: dark) {
-  media-container::after {
-    box-shadow: inset 0 0 0 1px oklab(1 0 0 / 0.15);
-  }
-}
-
-/* Fullscreen */
-media-container:fullscreen {
-  border-radius: 0;
-}
-
-media-container > ::slotted([slot='media']) {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-/* Media Container UI Overlay Styling */
-media-container > .overlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: start;
-  pointer-events: none;
-  border-radius: inherit;
-  background-image: linear-gradient(to top, oklab(0 0 0 / 0.7), oklab(0 0 0 / 0.5) 7.5rem, rgba(0, 0, 0, 0));
-  transition-property: opacity;
-  transition-duration: 75ms;
-  transition-timing-function: ease-out;
-  transition-delay: 0ms;
-}
-media-container[data-controls='hidden'] > .overlay {
-  opacity: 0;
-  transition-duration: 500ms;
-  transition-delay: 500ms;
-}
-
-/* Media Control Bar UI/Styles */
-.control-bar {
-  position: absolute;
-  bottom: 0;
-  inset-inline: 0;
-  padding: 2rem 0.375rem 0.375rem 0.375rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  will-change: transform, filter, opacity;
-  transition-property: transform, filter, opacity;
-  transition-delay: 0ms;
-  transition-duration: 75ms;
-  transition-timing-function: ease-out;
-  color: oklab(1 0 0);
-}
-media-container[data-controls='hidden'] > .control-bar {
-  opacity: 0;
-  transform: translateY(100%);
-  filter: blur(8px);
-  transition-delay: 500ms;
-  transition-duration: 500ms;
-  pointer-events: none;
-}
-@container root (width > 640px) {
-  .control-bar {
-    padding: 2.5rem 0.75rem 0.75rem 0.75rem;
-    gap: 0.875rem;
-  }
-}
-
-/* Time Display Styling */
-.time-display-group {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-.duration-display {
-  display: contents;
-  color: oklab(1 0 0 / 0.5);
-}
-media-current-time-display,
-media-duration-display {
-  text-shadow: 0 1px 0 oklab(0 0 0 / 0.2);
-  font-variant-numeric: tabular-nums;
-}
-
-.button-group {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-
-/* Generic Media Button Styling */
-.button {
-  display: grid;
-  flex-shrink: 0;
-  padding: 0.625rem;
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  border-radius: 0.375rem;
-  color: oklab(1 0 0);
-  user-select: none;
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-  transition-property: background-color, color, outline-offset;
-  transition-duration: 150ms;
-  transition-timing-function: ease-out;
-}
-.button:hover,
-.button:focus-visible,
-.button[aria-expanded='true'] {
-  color: oklab(1 0 0 / 0.8);
-  text-decoration: none;
-}
-.button:focus-visible {
-  outline-color: oklab(1 0 0);
-  outline-offset: 2px;
-}
-.button[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-  filter: grayscale(1);
-}
-
-.button .icon {
-  grid-area: 1 / 1;
-  width: 18px;
-  height: 18px;
-  filter: drop-shadow(0 1px 0 oklab(0 0 0 / 0.4));
-}
-
-/* Media Play Button UI/Styles */
-media-play-button .icon {
-  opacity: 0;
-  transition: opacity 150ms linear;
-}
-
-media-play-button:not([data-paused]) .pause-icon,
-media-play-button[data-paused] .play-icon {
-  opacity: 1;
-}
-
-/* Media Fullscreen Button UI/Styles */
-media-fullscreen-button .icon {
-  display: none;
-}
-media-fullscreen-button:not([data-fullscreen]) .fullscreen-enter-icon,
-media-fullscreen-button[data-fullscreen] .fullscreen-exit-icon {
-  display: inline;
-}
-
-/* One way to define the "default visible" icon (CJP) */
-media-mute-button .icon {
-  display: none;
-}
-media-mute-button:not([data-volume-level]) .volume-low-icon,
-media-mute-button[data-volume-level='high'] .volume-high-icon,
-media-mute-button[data-volume-level='low'] .volume-low-icon,
-media-mute-button[data-volume-level='medium'] .volume-low-icon,
-media-mute-button[data-volume-level='off'] .volume-off-icon {
-  display: inline;
-}
-
-/* TimeSlider Component Styles */
-.slider {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  border-radius: calc(infinity * 1px);
-  outline: none;
-}
-
-/* Horizontal orientation styles */
-.slider[data-orientation='horizontal'] {
-  min-width: 5rem;
-  width: 100%;
-  height: 1.25rem;
-}
-
-/* Vertical orientation styles */
-.slider[data-orientation='vertical'] {
-  height: 4.5rem;
-  width: 1.25rem;
-}
-
-.slider-track {
-  position: relative;
-  isolation: isolate;
-  background-color: oklab(1 0 0 / 0.2);
-  border-radius: inherit;
-  overflow: hidden;
-  user-select: none;
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-  transition: outline-offset 150ms ease-out;
-  box-shadow: 0 0 0 1px oklab(0 0 0 / 0.05);
-}
-
-/* Horizontal track styles */
-.slider-track[data-orientation='horizontal'] {
-  width: 100%;
-  height: 0.1875rem;
-}
-
-/* Vertical track styles */
-.slider-track[data-orientation='vertical'] {
-  width: 0.1875rem;
-  height: 100%;
-}
-
-.slider:focus-visible .slider-track {
-  outline-color: oklab(1 0 0);
-  outline-offset: 6px;
-}
-
-.slider-thumb {
-  width: 0.75rem;
-  height: 0.75rem;
-  background-color: oklab(1 0 0);
-  border-radius: calc(infinity * 1px);
-  user-select: none;
-  z-index: 10;
-  box-shadow:
-    0 0 0 1px oklab(0 0 0 / 0.1),
-    0 1px 3px 0 oklab(0 0 0 / 0.15),
-    0 1px 2px -1px oklab(0 0 0 / 0.15);
-  opacity: 0;
-  scale: 0.7;
-  transform-origin: center;
-  transition-property: opacity, scale;
-  transition-duration: 150ms;
-  transition-timing-function: ease-out;
-}
-.slider:hover .slider-thumb,
-.slider:focus-within .slider-thumb {
-  opacity: 1;
-  scale: 1;
-}
-.slider-track[data-orientation='horizontal'] .slider-thumb {
-  cursor: ew-resize;
-}
-.slider-track[data-orientation='vertical'] .slider-thumb {
-  cursor: ns-resize;
-}
-
-.slider-pointer {
-  display: none;
-}
-
-.slider-progress {
-  background-color: oklab(1 0 0);
-  border-radius: inherit;
-}
-
-media-preview-time-display {
-  font-variant-numeric: tabular-nums;
-}
-
-.popup-animation {
-  transition-property: transform, scale, opacity, filter;
-  transition-duration: 200ms;
-  transform: scale(1);
-  transform-origin: bottom;
-  opacity: 1;
-  filter: blur(0px);
-}
-.popup-animation[data-starting-style],
-.popup-animation[data-ending-style] {
-  transform: scale(0);
-  opacity: 0;
-  filter: blur(8px);
-}
-.popup-animation[data-instant] {
-  transition-duration: 0ms;
-}
-
-media-popover {
-  padding: 0.5rem;
-  margin: 0;
-  border: 0;
-  background: transparent;
-}
-
-/* Tooltip Component Styles */
-media-tooltip {
-  color: oklab(1 0 0);
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  background-color: oklab(1 0 0 / 0.1);
-  backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);
-  box-shadow:
-    0 4px 6px -1px oklab(0 0 0 / 0.1),
-    0 2px 4px -2px oklab(0 0 0 / 0.1);
-}
-@media (prefers-reduced-transparency: reduce) {
-  media-tooltip {
-    background-color: oklab(0 0 0 / 0.7);
-  }
-}
-@media (prefers-contrast: more) {
-  media-tooltip {
-    background-color: oklab(0 0 0 / 0.9);
-  }
-}
-
-.tooltip {
-  display: none;
-  white-space: nowrap;
-}
-
-[data-paused] + media-tooltip .play-tooltip,
-:not([data-paused]) + media-tooltip .pause-tooltip {
-  display: block;
-}
-
-[data-fullscreen] + media-tooltip .fullscreen-exit-tooltip,
-:not([data-fullscreen]) + media-tooltip .fullscreen-enter-tooltip {
-  display: block;
-}
diff --git a/packages/__tech-preview__/html/src/store/index.ts b/packages/__tech-preview__/html/src/store/index.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/packages/__tech-preview__/html/src/types.d.ts b/packages/__tech-preview__/html/src/types.d.ts
deleted file mode 100644
index b3340833..00000000
--- a/packages/__tech-preview__/html/src/types.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-declare module '*.css' {
-  const content: string;
-  export default content;
-}
-
-export type Prettify<T> = {
-  [K in keyof T]: T[K];
-} & {};
diff --git a/packages/__tech-preview__/html/src/utils/component-factory.ts b/packages/__tech-preview__/html/src/utils/component-factory.ts
deleted file mode 100644
index 025b147e..00000000
--- a/packages/__tech-preview__/html/src/utils/component-factory.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-import type { MediaStore } from '@videojs/core-preview/store';
-import { ConsumerMixin } from '@open-wc/context-protocol';
-import { shallowEqual, toCamelCase } from '@videojs/utils-preview';
-import { setAttributes } from '@videojs/utils-preview/dom';
-
-/**
- * Generic types for HTML component hooks pattern
- * Mirrors the React hooks architecture for consistency
- */
-export type StateHook<E extends HTMLElement, T = any> = (element: E, mediaStore: MediaStore) => T;
-
-export type PropsHook<E extends HTMLElement, T = any, P = any> = (element: E, state: T) => P;
-
-export interface ConnectedComponentConstructor<E extends HTMLElement, State> {
-  new (state: State): E;
-}
-
-let currentCoreInstances: any[] = [];
-// There might be multiple getCoreState calls in a single state hook
-// which should create a different core instance.
-let currentCoreIndex: number = 0;
-
-/**
- * Generic factory function to create connected HTML components using hooks pattern.
- * Provides equivalent functionality to React's toConnectedComponent but for custom elements.
- *
- * @param BaseClass - Base custom element class to extend
- * @param stateHook - Hook that defines state keys and transformation logic
- * @param propsHook - Hook that handles element attributes and properties based on state
- * @param displayName - Display name for debugging
- * @returns Connected custom element class with media store integration
- */
-export function toConnectedHTMLComponent<E extends HTMLElement, State = any>(
-  BaseClass: CustomElementConstructor,
-  stateHook: StateHook<E, State> | undefined,
-  propsHook: PropsHook<E, State>,
-  displayName?: string,
-): ConnectedComponentConstructor<E, State> {
-  const ConnectedComponent = class extends ConsumerMixin(BaseClass) {
-    static get observedAttributes(): string[] {
-      return [
-        // @ts-expect-error ts(2339)
-        ...(super.observedAttributes ?? []),
-      ];
-    }
-
-    _state: State | undefined;
-    #mediaStore: MediaStore | undefined;
-    #coreInstances: { core: any; listening: boolean }[] = [];
-
-    contexts = {
-      mediaStore: (mediaStore: any) => {
-        this.#mediaStore = mediaStore;
-
-        // Subscribe to media store state changes
-        mediaStore.subscribe(() => {
-          this.#render();
-
-          for (const instance of this.#coreInstances) {
-            if (!instance.listening) {
-              instance.listening = true;
-              instance.core.subscribe(this.#render);
-            }
-          }
-        });
-      },
-    };
-
-    #render = (): void => {
-      if (!this.#mediaStore) return;
-
-      currentCoreIndex = 0;
-      currentCoreInstances = this.#coreInstances;
-
-      // Split into two phases: state transformation, then props update
-      const state = stateHook?.(this as unknown as E, this.#mediaStore);
-      const props = propsHook(this as unknown as E, state ?? {} as State);
-      this._update(props, state, this.#mediaStore);
-    };
-
-    _update(props: any, state: State | undefined, _mediaStore: MediaStore): void {
-      this._state = state;
-      // @ts-expect-error any
-      super._update?.(props, state, _mediaStore);
-      setAttributes(this, props);
-    }
-
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
-      super.attributeChangedCallback?.(name, oldValue, newValue);
-      this.#render();
-    }
-
-    connectedCallback(): void {
-      super.connectedCallback?.();
-    }
-
-    disconnectedCallback(): void {
-      super.disconnectedCallback?.();
-    }
-
-    handleEvent(event: CustomEvent): void {
-      // @ts-expect-error any
-      super.handleEvent?.(event);
-    }
-  };
-
-  // Set display name for debugging and dev tools
-  if (displayName) {
-    Object.defineProperty(ConnectedComponent, 'name', { value: displayName });
-  }
-
-  return ConnectedComponent as unknown as ConnectedComponentConstructor<E, State>;
-}
-
-export function getCoreState<T extends {
-  subscribe: (callback: (state: any) => void) => () => void;
-  getState: () => any;
-  setState: (state: any) => void;
-}>(CoreClass: new () => T, state: any): any {
-  let core = currentCoreInstances[currentCoreIndex]?.core as T;
-  if (!core) {
-    core = new CoreClass();
-    currentCoreInstances[currentCoreIndex] = { core, listening: false };
-  }
-
-  currentCoreIndex++;
-
-  const coreState = core.getState();
-  const oldState: Record<string, any> = {};
-  for (const key in state) {
-    oldState[key] = coreState[key];
-  }
-  // Only set the state if it has changed
-  if (!shallowEqual(oldState, state)) {
-    core.setState(state);
-  }
-
-  return core.getState();
-}
-
-export function getPropsFromAttrs(element: HTMLElement): Record<string, any> {
-  const props: Record<string, any> = {};
-  for (const attr of element.attributes) {
-    const camelName = toCamelCase(attr.name);
-    props[camelName] = element[camelName as keyof typeof element];
-  }
-  return props;
-}
diff --git a/packages/__tech-preview__/html/src/utils/custom-element.ts b/packages/__tech-preview__/html/src/utils/custom-element.ts
deleted file mode 100644
index 283ecb2a..00000000
--- a/packages/__tech-preview__/html/src/utils/custom-element.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export function defineCustomElement(tagName: string, ctor: CustomElementConstructor): void {
-  if (typeof window === 'undefined') return;
-
-  if (window.customElements.get(tagName)) return;
-
-  window.customElements.define(tagName, ctor);
-}
diff --git a/packages/__tech-preview__/html/tsconfig.build.json b/packages/__tech-preview__/html/tsconfig.build.json
deleted file mode 100644
index b90fc83e..00000000
--- a/packages/__tech-preview__/html/tsconfig.build.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "include": ["src"]
-}
diff --git a/packages/__tech-preview__/html/tsconfig.json b/packages/__tech-preview__/html/tsconfig.json
deleted file mode 100644
index 0c2d28cc..00000000
--- a/packages/__tech-preview__/html/tsconfig.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "extends": "../../../tsconfig.base.json",
-  "compilerOptions": {
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  },
-  "include": ["src"]
-}
diff --git a/packages/__tech-preview__/html/tsdown.config.ts b/packages/__tech-preview__/html/tsdown.config.ts
deleted file mode 100644
index 6af0ef8a..00000000
--- a/packages/__tech-preview__/html/tsdown.config.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { readdirSync } from 'node:fs';
-import { fileURLToPath } from 'node:url';
-import { defineConfig } from 'tsdown';
-
-const defineDir = fileURLToPath(new URL('./src/define', import.meta.url));
-const defineFiles = readdirSync(defineDir).filter(file => file.endsWith('.ts'));
-
-export default defineConfig({
-  entry: {
-    index: 'src/index.ts',
-    store: 'src/store/index.ts',
-    icons: 'src/icons/index.ts',
-    'skins/frosted': 'src/skins/frosted/index.ts',
-    'skins/minimal': 'src/skins/minimal/index.ts',
-    ...defineFiles.reduce((entries, file) => {
-      const name = file.replace(/\.ts$/, '');
-      entries[`define/${name}`] = `src/define/${file}`;
-      return entries;
-    }, {} as Record<string, string>),
-  },
-  platform: 'browser',
-  format: 'es',
-  sourcemap: true,
-  clean: true,
-  alias: {
-    '@': fileURLToPath(new URL('./src', import.meta.url)),
-  },
-  dts: {
-    oxc: true,
-  },
-  loader: {
-    '.svg': 'text',
-    '.css': 'text',
-  },
-});
diff --git a/packages/__tech-preview__/icons/CHANGELOG.md b/packages/__tech-preview__/icons/CHANGELOG.md
deleted file mode 100644
index 81d5f550..00000000
--- a/packages/__tech-preview__/icons/CHANGELOG.md
+++ /dev/null
@@ -1,71 +0,0 @@
-# Changelog
-
-## [0.1.0-preview.10](https://github.com/videojs/v10/compare/@videojs/icons@0.1.0-preview.9...@videojs/icons@0.1.0-preview.10) (2025-12-06)
-
-
-### Miscellaneous Chores
-
-* **@videojs/icons:** Synchronize videojs versions
-
-## [0.1.0-preview.9](https://github.com/videojs/v10/compare/@videojs/icons@0.1.0-preview.8...@videojs/icons@0.1.0-preview.9) (2025-11-18)
-
-
-### Miscellaneous Chores
-
-* **@videojs/icons:** Synchronize videojs versions
-
-## [0.1.0-preview.8](https://github.com/videojs/v10/compare/@videojs/icons@0.1.0-preview.7...@videojs/icons@0.1.0-preview.8) (2025-11-12)
-
-
-### Miscellaneous Chores
-
-* **@videojs/icons:** Synchronize videojs versions
-
-## [0.1.0-preview.7](https://github.com/videojs/v10/compare/@videojs/icons@0.1.0-preview.6...@videojs/icons@0.1.0-preview.7) (2025-11-11)
-
-
-### Miscellaneous Chores
-
-* **@videojs/icons:** Synchronize videojs versions
-
-## [0.1.0-preview.6](https://github.com/videojs/v10/compare/@videojs/icons@0.1.0-preview.5...@videojs/icons@0.1.0-preview.6) (2025-11-06)
-
-
-### Bug Fixes
-
-* **site:** update discord link ([#170](https://github.com/videojs/v10/issues/170)) ([bb10294](https://github.com/videojs/v10/commit/bb10294419439fb02df650f3e7f7c5496ecc3a73))
-
-## [0.1.0-preview.5](https://github.com/videojs/v10/compare/@videojs/icons@0.1.0-preview.4...@videojs/icons@0.1.0-preview.5) (2025-11-03)
-
-
-### Miscellaneous Chores
-
-* **@videojs/icons:** Synchronize videojs versions
-
-## [0.1.0-preview.4](https://github.com/videojs/v10/compare/@videojs/icons@0.1.0-preview.3...@videojs/icons@0.1.0-preview.4) (2025-10-30)
-
-
-### Miscellaneous Chores
-
-* **@videojs/icons:** Synchronize videojs versions
-
-## [0.1.0-preview.3](https://github.com/videojs/v10/compare/@videojs/icons@0.1.0-preview.2...@videojs/icons@0.1.0-preview.3) (2025-10-29)
-
-
-### Bug Fixes
-
-* **packages:** update version badges ([#138](https://github.com/videojs/v10/issues/138)) ([22d9cb6](https://github.com/videojs/v10/commit/22d9cb64f2e5b9601a2039bb166dbe3fee6a1b3e))
-
-## [0.1.0-preview.2](https://github.com/videojs/v10/compare/@videojs/icons@0.1.0-preview.1...@videojs/icons@0.1.0-preview.2) (2025-10-25)
-
-
-### Miscellaneous Chores
-
-* **@videojs/icons:** Synchronize videojs versions
-
-## [0.1.0-preview.1](https://github.com/videojs/v10/compare/@videojs/icons@0.1.0-preview.0...@videojs/icons@0.1.0-preview.1) (2025-10-25)
-
-
-### Bug Fixes
-
-* **root:** add videojs keyword to package.json ([4a9f8b2](https://github.com/videojs/v10/commit/4a9f8b2ad6fb27b463dcfe8d1a5fd883c9fa21d1))
diff --git a/packages/__tech-preview__/icons/README.md b/packages/__tech-preview__/icons/README.md
deleted file mode 100644
index 9c9dcf7e..00000000
--- a/packages/__tech-preview__/icons/README.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# @videojs/icons
-
-[![package-badge]][package]
-
-> **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use.
-
-## Overview
-
-`@videojs/icons` is a curated collection of SVG icons designed specifically for media player
-interfaces. This package serves as the single source of truth for all Video.js icons, providing raw
-SVG assets that platform-specific packages transform into their respective component formats.
-
-## Community
-
-If you need help with anything related to Video.js 10, or if you'd like to casually chat with other
-members:
-
-- [Join Discord Server][discord]
-- [See GitHub Discussions][gh-discussions]
-
-## License
-
-[Apache-2.0](./LICENSE)
-
-[package]: https://www.npmjs.com/package/@videojs/icons
-[package-badge]: https://img.shields.io/npm/v/@videojs/icons/next?label=@videojs/icons@next
-[discord]: https://discord.gg/JBqHh485uF
-[gh-discussions]: https://github.com/videojs/v10/discussions
diff --git a/packages/__tech-preview__/icons/assets/fullscreen-enter-alt.svg b/packages/__tech-preview__/icons/assets/fullscreen-enter-alt.svg
deleted file mode 100644
index 63623fa5..00000000
--- a/packages/__tech-preview__/icons/assets/fullscreen-enter-alt.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
-  <path
-    d="M15.25 2h.017q.03 0 .06.004za.75.75 0 0 1 .599.298l-.069-.078a.75.75 0 0 1 .22.53v4.5a.75.75 0 1 1-1.5 0V4.56l-3.22 3.22a.75.75 0 0 1-1.06-1.06l3.218-3.22H10.75a.75.75 0 0 1-.743-.648L10 2.75a.75.75 0 0 1 .75-.75z"
-    class="arrow-1"
-  />
-  <path
-    d="M2.75 10a.75.75 0 0 1 .75.75v2.688l3.22-3.218a.75.75 0 0 1 1.06 1.06L4.56 14.5h2.69a.75.75 0 0 1 .743.648L8 15.25a.75.75 0 0 1-.75.75H2.722l-.046-.004.074.004a.75.75 0 0 1-.599-.298l.069.078a.75.75 0 0 1-.22-.53v-4.5a.75.75 0 0 1 .75-.75"
-    class="arrow-2"
-  />
-</svg>
diff --git a/packages/__tech-preview__/icons/assets/fullscreen-enter.svg b/packages/__tech-preview__/icons/assets/fullscreen-enter.svg
deleted file mode 100644
index fb646cd4..00000000
--- a/packages/__tech-preview__/icons/assets/fullscreen-enter.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
-  <path
-    d="M9.57,3.617c-.156-.375-.519-.617-.924-.617H4c-.552,0-1,.449-1,1v4.646c0,.406,.242,.769,.618,.924,.124,.051,.255,.076,.383,.076,.261,0,.515-.102,.706-.293l4.647-4.647c.286-.287,.371-.715,.216-1.089Z"
-    class="arrow-1"
-  />
-  <path
-    d="M14.382,8.429c-.377-.156-.804-.068-1.089,.217l-4.647,4.647c-.286,.287-.371,.715-.216,1.089,.156,.375,.519,.617,.924,.617h4.646c.552,0,1-.449,1-1v-4.646c0-.406-.242-.769-.618-.924Z"
-    class="arrow-2"
-  />
-</svg>
diff --git a/packages/__tech-preview__/icons/assets/fullscreen-exit-alt.svg b/packages/__tech-preview__/icons/assets/fullscreen-exit-alt.svg
deleted file mode 100644
index 6c085818..00000000
--- a/packages/__tech-preview__/icons/assets/fullscreen-exit-alt.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
-  <path
-    d="M10.75 2a.75.75 0 0 1 .75.75v2.688l3.22-3.218a.75.75 0 0 1 1.06 1.06L12.56 6.5h2.69a.75.75 0 0 1 .743.648L16 7.25a.75.75 0 0 1-.75.75h-4.528l-.046-.004.074.004a.75.75 0 0 1-.599-.298l.069.078a.75.75 0 0 1-.22-.53v-4.5a.75.75 0 0 1 .75-.75"
-    class="arrow-1"
-  />
-  <path
-    d="M7.25 10h.017q.03 0 .06.004za.75.75 0 0 1 .599.298l-.069-.078a.75.75 0 0 1 .22.53v4.5a.75.75 0 1 1-1.5 0v-2.69l-3.22 3.22a.75.75 0 0 1-1.06-1.06l3.218-3.22H2.75a.75.75 0 0 1-.743-.648L2 10.75a.75.75 0 0 1 .75-.75z"
-    class="arrow-2"
-  />
-</svg>
diff --git a/packages/__tech-preview__/icons/assets/fullscreen-exit.svg b/packages/__tech-preview__/icons/assets/fullscreen-exit.svg
deleted file mode 100644
index 586fc235..00000000
--- a/packages/__tech-preview__/icons/assets/fullscreen-exit.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18" fill="currentColor">
-  <path
-    d="M7.883,1.93c-.375-.157-.803-.07-1.09,.217L2.146,6.793c-.287,.287-.372,.715-.217,1.09s.518,.617,.924,.617H7.5c.551,0,1-.449,1-1V2.854c0-.406-.242-.769-.617-.924Z"
-    class="arrow-1"
-  />
-  <path
-    d="M15.146,9.5h-4.646c-.551,0-1,.449-1,1v4.646c0,.406,.242,.769,.617,.924,.125,.052,.255,.077,.384,.077,.26,0,.514-.102,.706-.293l4.646-4.646c.287-.287,.372-.715,.217-1.09s-.518-.617-.924-.617Z"
-    class="arrow-2"
-  />
-</svg>
diff --git a/packages/__tech-preview__/icons/assets/pause.svg b/packages/__tech-preview__/icons/assets/pause.svg
deleted file mode 100644
index 94b7dc64..00000000
--- a/packages/__tech-preview__/icons/assets/pause.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
-  <rect x="2" y="2" width="5" height="14" rx="1.75" ry="1.75" />
-  <rect x="11" y="2" width="5" height="14" rx="1.75" ry="1.75" />
-</svg>
diff --git a/packages/__tech-preview__/icons/assets/play.svg b/packages/__tech-preview__/icons/assets/play.svg
deleted file mode 100644
index 9646cc51..00000000
--- a/packages/__tech-preview__/icons/assets/play.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
-  <path
-    d="M15.1,7.478L5.608,2.222c-.553-.306-1.206-.297-1.749,.023-.538,.317-.859,.877-.859,1.499V14.256c0,.622,.321,1.182,.859,1.499,.279,.164,.586,.247,.895,.247,.293,0,.586-.075,.854-.223l9.491-5.256c.556-.307,.901-.891,.901-1.522s-.345-1.215-.9-1.522Z"
-  />
-</svg>
diff --git a/packages/__tech-preview__/icons/assets/spinner.svg b/packages/__tech-preview__/icons/assets/spinner.svg
deleted file mode 100644
index 8ef97004..00000000
--- a/packages/__tech-preview__/icons/assets/spinner.svg
+++ /dev/null
@@ -1,35 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
-  <rect width="2" height="5" x="8" y=".5" rx="1" opacity="0.5">
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-  <rect width="2" height="5" x="12.243" y="2.257" rx="1" transform="rotate(45 13.243 4.757)" opacity="0.45">
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0.125s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-  <rect width="5" height="2" x="12.5" y="8" rx="1" opacity="0.4">
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0.25s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-  <rect width="5" height="2" x="10.743" y="12.243" rx="1" transform="rotate(45 13.243 13.243)" opacity="0.35">
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0.375s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-  <rect width="2" height="5" x="8" y="12.5" rx="1" opacity="0.3">
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0.5s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-  <rect width="2" height="5" x="3.757" y="10.743" rx="1" transform="rotate(45 4.757 13.243)" opacity="0.25">
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0.625s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-  <rect width="5" height="2" x=".5" y="8" rx="1" opacity="0.15">
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0.75s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-  <rect
-    width="5"
-    height="2"
-    x="2.257"
-    y="3.757"
-    fill-rule="nonzero"
-    rx="1"
-    transform="rotate(45 4.757 4.757)"
-    opacity="0.1"
-  >
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0.875s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-</svg>
diff --git a/packages/__tech-preview__/icons/assets/volume-high.svg b/packages/__tech-preview__/icons/assets/volume-high.svg
deleted file mode 100755
index bae36d94..00000000
--- a/packages/__tech-preview__/icons/assets/volume-high.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
-  <path
-    d="M15.5999996,3.3 C15.1999996,2.9 14.5999996,2.9 14.1999996,3.3 C13.7999996,3.7 13.7999996,4.3 14.1999996,4.7 C15.3999996,5.9 15.9999996,7.4 15.9999996,9 C15.9999996,10.6 15.3999996,12.1 14.1999996,13.3 C13.7999996,13.7 13.7999996,14.3 14.1999996,14.7 C14.3999996,14.9 14.6999996,15 14.8999996,15 C15.1999996,15 15.3999996,14.9 15.5999996,14.7 C17.0999996,13.2 17.9999996,11.2 17.9999996,9 C17.9999996,6.8 17.0999996,4.8 15.5999996,3.3 L15.5999996,3.3 Z"
-  />
-  <path
-    d="M11.2819745,5.28197449 C10.9060085,5.65794047 10.9060085,6.22188944 11.2819745,6.59785542 C12.0171538,7.33303477 12.2772954,8.05605449 12.2772954,9 C12.2772954,9.93588462 11.851678,10.9172014 11.2819745,11.4869049 C10.9060085,11.8628709 10.9060085,12.4268199 11.2819745,12.8027859 C11.4271642,12.9479755 11.9176724,13.0649528 12.2998149,12.9592565 C12.4124479,12.9281035 12.5156669,12.8776063 12.5978555,12.8027859 C13.773371,11.732654 14.1311161,10.1597914 14.1312524,9 C14.1312524,8.8299555 14.1286311,8.66015647 14.119665,8.4897429 C14.0674781,7.49784946 13.8010171,6.48513613 12.5978554,5.28197449 C12.2218894,4.9060085 11.6579405,4.9060085 11.2819745,5.28197449 Z M3.78571429,6.00820648 L0.714285714,6.00820648 C0.285714286,6.00820648 0,6.30901277 0,6.76022222 L0,11.2723167 C0,11.7235261 0.285714286,12.0243324 0.714285714,12.0243324 L3.78571429,12.0243324 L7.85714286,15.8819922 C8.35714286,16.1827985 9,15.8819922 9,15.2803796 L9,2.75215925 C9,2.15054666 8.35714286,1.77453879 7.85714286,2.15054666 L3.78571429,6.00820648 Z"
-  />
-</svg>
diff --git a/packages/__tech-preview__/icons/assets/volume-low.svg b/packages/__tech-preview__/icons/assets/volume-low.svg
deleted file mode 100644
index 07fcbb44..00000000
--- a/packages/__tech-preview__/icons/assets/volume-low.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
-  <path
-    d="M11.2819745 5.28197449C10.9060085 5.65794047 10.9060085 6.22188944 11.2819745 6.59785542 12.0171538 7.33303477 12.2772954 8.05605449 12.2772954 9 12.2772954 9.93588462 11.851678 10.9172014 11.2819745 11.4869049 10.9060085 11.8628709 10.9060085 12.4268199 11.2819745 12.8027859 11.4271642 12.9479755 11.9176724 13.0649528 12.2998149 12.9592565 12.4124479 12.9281035 12.5156669 12.8776063 12.5978555 12.8027859 13.773371 11.732654 14.1311161 10.1597914 14.1312524 9 14.1312524 8.8299555 14.1286311 8.66015647 14.119665 8.4897429 14.0674781 7.49784946 13.8010171 6.48513613 12.5978554 5.28197449 12.2218894 4.9060085 11.6579405 4.9060085 11.2819745 5.28197449ZM3.78571429 6.00820648.714285714 6.00820648C.285714286 6.00820648 0 6.30901277 0 6.76022222L0 11.2723167C0 11.7235261.285714286 12.0243324.714285714 12.0243324L3.78571429 12.0243324 7.85714286 15.8819922C8.35714286 16.1827985 9 15.8819922 9 15.2803796L9 2.75215925C9 2.15054666 8.35714286 1.77453879 7.85714286 2.15054666L3.78571429 6.00820648Z"
-  />
-</svg>
diff --git a/packages/__tech-preview__/icons/assets/volume-off.svg b/packages/__tech-preview__/icons/assets/volume-off.svg
deleted file mode 100644
index e776b6a9..00000000
--- a/packages/__tech-preview__/icons/assets/volume-off.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
-  <path
-    d="M12.732233,5.81801948 L14.5,7.586 L16.267767,5.81801948 C16.6582912,5.42749519 17.2914562,5.42749519 17.6819805,5.81801948 C18.0725048,6.20854378 18.0725048,6.84170876 17.6819805,7.23223305 L15.914,9 L17.6819805,10.767767 C18.0725048,11.1582912 18.0725048,11.7914562 17.6819805,12.1819805 C17.2914562,12.5725048 16.6582912,12.5725048 16.267767,12.1819805 L14.5,10.414 L12.732233,12.1819805 C12.3417088,12.5725048 11.7085438,12.5725048 11.3180195,12.1819805 C10.9274952,11.7914562 10.9274952,11.1582912 11.3180195,10.767767 L13.085,9 L11.3180195,7.23223305 C10.9274952,6.84170876 10.9274952,6.20854378 11.3180195,5.81801948 C11.7085438,5.42749519 12.3417088,5.42749519 12.732233,5.81801948 Z M3.78571429,6.00820648 L0.714285714,6.00820648 C0.285714286,6.00820648 0,6.30901277 0,6.76022222 L0,11.2723167 C0,11.7235261 0.285714286,12.0243324 0.714285714,12.0243324 L3.78571429,12.0243324 L7.85714286,15.8819922 C8.35714286,16.1827985 9,15.8819922 9,15.2803796 L9,2.75215925 C9,2.15054666 8.35714286,1.77453879 7.85714286,2.15054666 L3.78571429,6.00820648 Z"
-  />
-</svg>
diff --git a/packages/__tech-preview__/icons/package.json b/packages/__tech-preview__/icons/package.json
deleted file mode 100644
index 7b0376e3..00000000
--- a/packages/__tech-preview__/icons/package.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
-  "name": "@videojs/icons-preview",
-  "type": "module",
-  "version": "0.1.0-preview.10",
-  "description": "SVG icon library for Video.js",
-  "license": "Apache-2.0",
-  "keywords": [
-    "icons",
-    "svg",
-    "media",
-    "player",
-    "ui",
-    "videojs"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    }
-  },
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsdown",
-    "build:watch": "tsdown --watch --silent",
-    "dev": "pnpm run build:watch",
-    "test": "echo \"No tests yet\"",
-    "clean": "rm -rf dist"
-  },
-  "devDependencies": {
-    "tsdown": "^0.15.9",
-    "typescript": "^5.9.3"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
diff --git a/packages/__tech-preview__/icons/src/index.ts b/packages/__tech-preview__/icons/src/index.ts
deleted file mode 100644
index 27221111..00000000
--- a/packages/__tech-preview__/icons/src/index.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import fullscreenEnterAlt from '../assets/fullscreen-enter-alt.svg';
-// Import SVG files as strings
-import fullscreenEnter from '../assets/fullscreen-enter.svg';
-import fullscreenExitAlt from '../assets/fullscreen-exit-alt.svg';
-import fullscreenExit from '../assets/fullscreen-exit.svg';
-import pause from '../assets/pause.svg';
-import play from '../assets/play.svg';
-import volumeHigh from '../assets/volume-high.svg';
-import volumeLow from '../assets/volume-low.svg';
-import volumeOff from '../assets/volume-off.svg';
-
-export const SVG_ICONS: Record<string, string> = {
-  play,
-  pause,
-  volumeHigh,
-  volumeLow,
-  volumeOff,
-  fullscreenEnter,
-  fullscreenExit,
-  fullscreenEnterAlt,
-  fullscreenExitAlt,
-};
-
-// TODO: Check if we need below? It seems to be unused now.
-
-// Legacy interface for backward compatibility
-export interface IconDefinition {
-  name: string;
-  viewBox: string;
-  paths: string[];
-}
-
-export const ICON_DEFINITIONS: Record<string, IconDefinition> = {
-  play: {
-    name: 'play',
-    viewBox: '0 0 24 24',
-    paths: ['M8 5v14l11-7z'],
-  },
-  pause: {
-    name: 'pause',
-    viewBox: '0 0 24 24',
-    paths: ['M6 19h4V5H6v14zm8-14v14h4V5h-4z'],
-  },
-  stop: {
-    name: 'stop',
-    viewBox: '0 0 24 24',
-    paths: ['M6 6h12v12H6z'],
-  },
-  volumeUp: {
-    name: 'volume-up',
-    viewBox: '0 0 24 24',
-    paths: [
-      'M3 9v6h4l5 5V4L7 9H3z',
-      'M16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z',
-      'M14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z',
-    ],
-  },
-  volumeOff: {
-    name: 'volume-off',
-    viewBox: '0 0 24 24',
-    paths: [
-      'M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63z',
-      'M19 12c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71z',
-      'M4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3z',
-      'M12 4L9.91 6.09 12 8.18V4z',
-    ],
-  },
-  fullscreenEnter: {
-    name: 'fullscreen-enter',
-    viewBox: '0 0 26 24',
-    paths: ['M16 3v2.5h3.5V9H22V3h-6ZM4 9h2.5V5.5H10V3H4v6Zm15.5 9.5H16V21h6v-6h-2.5v3.5ZM6.5 15H4v6h6v-2.5H6.5V15Z'],
-  },
-  fullscreenExit: {
-    name: 'fullscreen-exit',
-    viewBox: '0 0 26 24',
-    paths: [
-      'M18.5 6.5V3H16v6h6V6.5h-3.5ZM16 21h2.5v-3.5H22V15h-6v6ZM4 17.5h3.5V21H10v-6H4v2.5Zm3.5-11H4V9h6V3H7.5v3.5Z',
-    ],
-  },
-};
-
-export function getIcon(name: string): IconDefinition | undefined {
-  return ICON_DEFINITIONS[name];
-}
-
-export function getAllIcons(): IconDefinition[] {
-  return Object.values(ICON_DEFINITIONS);
-}
-
-export function createSVGString(icon: IconDefinition): string {
-  const pathElements = icon.paths.map(path => `<path d="${path}"/>`).join('');
-  return `<svg viewBox="${icon.viewBox}" xmlns="http://www.w3.org/2000/svg">${pathElements}</svg>`;
-}
diff --git a/packages/__tech-preview__/icons/src/svg.d.ts b/packages/__tech-preview__/icons/src/svg.d.ts
deleted file mode 100644
index cdb2b1a9..00000000
--- a/packages/__tech-preview__/icons/src/svg.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module '*.svg' {
-  const content: string;
-  export default content;
-}
diff --git a/packages/__tech-preview__/icons/tsconfig.build.json b/packages/__tech-preview__/icons/tsconfig.build.json
deleted file mode 100644
index b90fc83e..00000000
--- a/packages/__tech-preview__/icons/tsconfig.build.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "include": ["src"]
-}
diff --git a/packages/__tech-preview__/icons/tsconfig.json b/packages/__tech-preview__/icons/tsconfig.json
deleted file mode 100644
index c4d7be0c..00000000
--- a/packages/__tech-preview__/icons/tsconfig.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "extends": "../../../tsconfig.base.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  },
-  "include": ["src"]
-}
diff --git a/packages/__tech-preview__/icons/tsdown.config.ts b/packages/__tech-preview__/icons/tsdown.config.ts
deleted file mode 100644
index e0277064..00000000
--- a/packages/__tech-preview__/icons/tsdown.config.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { defineConfig } from 'tsdown';
-
-export default defineConfig({
-  entry: 'src/index.ts',
-  platform: 'neutral',
-  format: 'es',
-  sourcemap: true,
-  clean: true,
-  alias: {
-    '@': new URL('./src', import.meta.url).pathname,
-  },
-  dts: {
-    oxc: true,
-  },
-  loader: {
-    '.svg': 'text',
-  },
-});
diff --git a/packages/__tech-preview__/react-native/.gitkeep b/packages/__tech-preview__/react-native/.gitkeep
deleted file mode 100644
index e69de29b..00000000
diff --git a/packages/__tech-preview__/react/CHANGELOG.md b/packages/__tech-preview__/react/CHANGELOG.md
deleted file mode 100644
index ab243f15..00000000
--- a/packages/__tech-preview__/react/CHANGELOG.md
+++ /dev/null
@@ -1,253 +0,0 @@
-# Changelog
-
-## [0.1.0-preview.10](https://github.com/videojs/v10/compare/@videojs/react@0.1.0-preview.9...@videojs/react@0.1.0-preview.10) (2025-12-06)
-
-
-### Features
-
-* add console banner ([#186](https://github.com/videojs/v10/issues/186)) ([072b0de](https://github.com/videojs/v10/commit/072b0dece76289d7d4215907ce70b36debbb78bc))
-* add tooltip core ([#212](https://github.com/videojs/v10/issues/212)) ([cbf41ce](https://github.com/videojs/v10/commit/cbf41ce4c750cd5c3bb6cbf247bad91ccd578cd0))
-
-
-### Bug Fixes
-
-* use popover core in react popover ([#208](https://github.com/videojs/v10/issues/208)) ([99fef78](https://github.com/videojs/v10/commit/99fef78f63e8dd121513b9cd20696a7d35603837))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/core bumped to 0.1.0-preview.10
-    * @videojs/icons bumped to 0.1.0-preview.10
-    * @videojs/utils bumped to 0.1.0-preview.10
-
-## [0.1.0-preview.9](https://github.com/videojs/v10/compare/@videojs/react@0.1.0-preview.8...@videojs/react@0.1.0-preview.9) (2025-11-18)
-
-
-### Bug Fixes
-
-* anchor name in popover and tooltip ([#194](https://github.com/videojs/v10/issues/194)) ([d965858](https://github.com/videojs/v10/commit/d9658582f12f9745548bcb9461a3e365adc16339))
-* clean up core, less seams in wrappers ([#197](https://github.com/videojs/v10/issues/197)) ([601a5a3](https://github.com/videojs/v10/commit/601a5a37939605ca38f81a825fd02934e7928c39))
-* fix CLS due to popover attribute not SSR ([#202](https://github.com/videojs/v10/issues/202)) ([0952673](https://github.com/videojs/v10/commit/09526731f7e4ee3bd58c45179d37f90dfc96d7a8))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/core bumped to 0.1.0-preview.9
-    * @videojs/icons bumped to 0.1.0-preview.9
-    * @videojs/utils bumped to 0.1.0-preview.9
-
-## [0.1.0-preview.8](https://github.com/videojs/v10/compare/@videojs/react@0.1.0-preview.7...@videojs/react@0.1.0-preview.8) (2025-11-12)
-
-
-### Bug Fixes
-
-* hydration mismatch in Tooltip and Popover ([#190](https://github.com/videojs/v10/issues/190)) ([8b868e9](https://github.com/videojs/v10/commit/8b868e95a3ffd92421ddb2846708d3a2ca8125e3))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/core bumped to 0.1.0-preview.8
-    * @videojs/icons bumped to 0.1.0-preview.8
-    * @videojs/utils bumped to 0.1.0-preview.8
-
-## [0.1.0-preview.7](https://github.com/videojs/v10/compare/@videojs/react@0.1.0-preview.6...@videojs/react@0.1.0-preview.7) (2025-11-11)
-
-
-### Features
-
-* **react:** use popover and anchor position API ([#178](https://github.com/videojs/v10/issues/178)) ([f513c74](https://github.com/videojs/v10/commit/f513c74a6cebc09ac76512bb86af10a33350f900))
-
-
-### Bug Fixes
-
-* **skins:** remove vjs- prefixed CSS custom properties ([#179](https://github.com/videojs/v10/issues/179)) ([a62623b](https://github.com/videojs/v10/commit/a62623ba41d294edead981a1b468f7f486c91625))
-* **skins:** slightly more idiomatic Tailwind, added custom properties ([#175](https://github.com/videojs/v10/issues/175)) ([694afb7](https://github.com/videojs/v10/commit/694afb7de992edbd667bc3d895df8bf198ccabb3))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/core bumped to 0.1.0-preview.7
-    * @videojs/icons bumped to 0.1.0-preview.7
-    * @videojs/utils bumped to 0.1.0-preview.7
-
-## [0.1.0-preview.6](https://github.com/videojs/v10/compare/@videojs/react@0.1.0-preview.5...@videojs/react@0.1.0-preview.6) (2025-11-06)
-
-
-### Features
-
-* **react:** use SimpleVideo as default Video and rename HLS version to HlsVideo ([#171](https://github.com/videojs/v10/issues/171)) ([1878a27](https://github.com/videojs/v10/commit/1878a271ba300919d1eff19dd2db79340e8714fa))
-
-
-### Bug Fixes
-
-* **react, html:** rename MediaProvider (and related) to VideoProvider ([#159](https://github.com/videojs/v10/issues/159)) ([f285573](https://github.com/videojs/v10/commit/f28557359c7dda0282f9d532fa4b2fce19766e40))
-* **react:** update use client usage in react package modules for next.js use ([#157](https://github.com/videojs/v10/issues/157)) ([16cfde1](https://github.com/videojs/v10/commit/16cfde138d5a8c9fb919c49f49240ebacb1d0639))
-* **site:** update discord link ([#170](https://github.com/videojs/v10/issues/170)) ([bb10294](https://github.com/videojs/v10/commit/bb10294419439fb02df650f3e7f7c5496ecc3a73))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/core bumped to 0.1.0-preview.6
-    * @videojs/icons bumped to 0.1.0-preview.6
-    * @videojs/utils bumped to 0.1.0-preview.6
-
-## [0.1.0-preview.5](https://github.com/videojs/v10/compare/@videojs/react@0.1.0-preview.4...@videojs/react@0.1.0-preview.5) (2025-11-03)
-
-
-### Miscellaneous Chores
-
-* **@videojs/react:** Synchronize videojs versions
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/core bumped to 0.1.0-preview.5
-    * @videojs/icons bumped to 0.1.0-preview.5
-    * @videojs/utils bumped to 0.1.0-preview.5
-
-## [0.1.0-preview.4](https://github.com/videojs/v10/compare/@videojs/react@0.1.0-preview.3...@videojs/react@0.1.0-preview.4) (2025-10-30)
-
-
-### Features
-
-* **html:** add element registrations ([eaaa03c](https://github.com/videojs/v10/commit/eaaa03c284f9fc3c9069bedb74d95c8a951c1b56))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/core bumped to 0.1.0-preview.4
-    * @videojs/icons bumped to 0.1.0-preview.4
-    * @videojs/utils bumped to 0.1.0-preview.4
-
-## [0.1.0-preview.3](https://github.com/videojs/v10/compare/@videojs/react@0.1.0-preview.2...@videojs/react@0.1.0-preview.3) (2025-10-29)
-
-
-### Features
-
-* **skins:** add html port of minimal skin ([#140](https://github.com/videojs/v10/issues/140)) ([47ac22e](https://github.com/videojs/v10/commit/47ac22e9b8a513c9640ed1eff20838d8cdb749ce))
-* **ui:** skin design improvements, add html frosted skin (WIP) ([#133](https://github.com/videojs/v10/issues/133)) ([75a90e7](https://github.com/videojs/v10/commit/75a90e71041c2d0bf434823e59dd04f86f89b0bb))
-
-
-### Bug Fixes
-
-* add aspect-ratio to demos ([#136](https://github.com/videojs/v10/issues/136)) ([e0a46de](https://github.com/videojs/v10/commit/e0a46de0ab56199afd37b24ebfce93ee85e2b699))
-* **packages:** update version badges ([#138](https://github.com/videojs/v10/issues/138)) ([22d9cb6](https://github.com/videojs/v10/commit/22d9cb64f2e5b9601a2039bb166dbe3fee6a1b3e))
-* **react:** prevent dev build race condition ([#139](https://github.com/videojs/v10/issues/139)) ([67d1007](https://github.com/videojs/v10/commit/67d1007d0c78564537f38f1683a45af320869465))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/core bumped to 0.1.0-preview.3
-    * @videojs/icons bumped to 0.1.0-preview.3
-    * @videojs/utils bumped to 0.1.0-preview.3
-
-## [0.1.0-preview.2](https://github.com/videojs/v10/compare/@videojs/react@0.1.0-preview.1...@videojs/react@0.1.0-preview.2) (2025-10-25)
-
-
-### Miscellaneous Chores
-
-* **@videojs/react:** Synchronize videojs versions
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/core bumped to 0.1.0-preview.2
-    * @videojs/icons bumped to 0.1.0-preview.2
-    * @videojs/utils bumped to 0.1.0-preview.2
-
-## [0.1.0-preview.1](https://github.com/videojs/v10/compare/@videojs/react@0.1.0-preview.0...@videojs/react@0.1.0-preview.1) (2025-10-25)
-
-
-### Features
-
-* add a solution for React preview time display ([#50](https://github.com/videojs/v10/issues/50)) ([f78b09f](https://github.com/videojs/v10/commit/f78b09fd16b7a9ee5a404c9260e3e764fb77ddde))
-* add compound html timerange component ([#14](https://github.com/videojs/v10/issues/14)) ([017ecdb](https://github.com/videojs/v10/commit/017ecdbff991d140ea42e4a855269a54e0a19adc))
-* add core range, time and volume range ([#23](https://github.com/videojs/v10/issues/23)) ([687b765](https://github.com/videojs/v10/commit/687b7655b0b6356c28663ca85c8f6d25a1023c18))
-* add data style attributes to popover ([#62](https://github.com/videojs/v10/issues/62)) ([6d7325c](https://github.com/videojs/v10/commit/6d7325cedb182c37b955e729d32204e4afbba948))
-* add display click to play / pause ([#117](https://github.com/videojs/v10/issues/117)) ([4f06ef6](https://github.com/videojs/v10/commit/4f06ef6c7684fd7064ca76685003a1c38ebd09cd))
-* add focus state to sliders and volume slider ([#60](https://github.com/videojs/v10/issues/60)) ([f514051](https://github.com/videojs/v10/commit/f514051263f95d892315eed9d44b3d83829e5d4b))
-* add HTML tooltip component ([#40](https://github.com/videojs/v10/issues/40)) ([d2a0b27](https://github.com/videojs/v10/commit/d2a0b27272f1967e5f7cde2df12920af92e3c300))
-* add keyboard control to sliders ([#115](https://github.com/videojs/v10/issues/115)) ([0a49026](https://github.com/videojs/v10/commit/0a4902623d58f51055b1cc65498a0e716533ec29))
-* add popover React component ([#33](https://github.com/videojs/v10/issues/33)) ([f775a3d](https://github.com/videojs/v10/commit/f775a3daf7573efb7fdbb15e96cf100daba4a487))
-* add range orientation to react components ([#30](https://github.com/videojs/v10/issues/30)) ([5e3cb8a](https://github.com/videojs/v10/commit/5e3cb8ad8134ecaf20b6e021e301a38b8ed06de2))
-* add React tooltip component ([#35](https://github.com/videojs/v10/issues/35)) ([c4a3f1b](https://github.com/videojs/v10/commit/c4a3f1b2f61d67f3346acd4aa2bf13630a6283eb))
-* add showRemaining functionality to current time display ([ab07a8a](https://github.com/videojs/v10/commit/ab07a8a9a26f68066e292718f3cd17a2640c5477))
-* add transition status to React tooltip ([#42](https://github.com/videojs/v10/issues/42)) ([39e862a](https://github.com/videojs/v10/commit/39e862a48704d31c9c1ca932a789438e3c54ec31))
-* add volume range compound component ([#19](https://github.com/videojs/v10/issues/19)) ([aefe890](https://github.com/videojs/v10/commit/aefe890fee93981542282087b2f2c7474f1b47e6))
-* **core,html,react:** implement VolumeRange component with integrated state management ([2282f47](https://github.com/videojs/v10/commit/2282f4799b1c3fc3c55473bdfc2def86384d5d19))
-* implement current time display components ([5bd0a15](https://github.com/videojs/v10/commit/5bd0a154dbba01d2a5d11eb1f548fe4baa581675))
-* initialize Video.js 10 monorepo with core architecture ([4b0d84e](https://github.com/videojs/v10/commit/4b0d84e9c8adfa7401084389da5deb751420b629))
-* make time range compound component ([#10](https://github.com/videojs/v10/issues/10)) ([71a8daf](https://github.com/videojs/v10/commit/71a8dafd741c50fb489707678e23807fabe4cb4e))
-* **media-store,html,react:** implement TimeRange component with hook-style architecture ([c29fd2c](https://github.com/videojs/v10/commit/c29fd2c2c1edd61c09a6683041c709a990d8a6f0))
-* migrate entire monorepo from tsc to tsup for production builds ([7403cc7](https://github.com/videojs/v10/commit/7403cc728119322888e527468a07a7634f43b32a))
-* migrate examples from prototype and add CSS modules support ([19c85fc](https://github.com/videojs/v10/commit/19c85fc2f8eb50c04dc6fa40322a2bd03358ad2e))
-* **monorepo:** migrate prototype code to organized package structure ([4b472ec](https://github.com/videojs/v10/commit/4b472ec49cd91f0af61cb5aaa039d428982d3b91))
-* **react-icons:** implement SVGR-powered auto-generation with full styling support ([6fcb18f](https://github.com/videojs/v10/commit/6fcb18f1d2b108990025f8ea67b3a31e17879d49))
-* **react-media-store:** add shallowEqual utility for optimized state comparisons ([8e75d62](https://github.com/videojs/v10/commit/8e75d62f629b9320aeef48801856e1afb6c341ef))
-* **react:** add fullscreen button component ([7d819df](https://github.com/videojs/v10/commit/7d819dfcd97a545ee46e1a62a20e553896b6e92e))
-* **react:** add MediaContainer component for fullscreen functionality ([23e3876](https://github.com/videojs/v10/commit/23e38766308a21a7e5b17196344159f06581813c))
-* **react:** add Tailwind v4 compiled CSS for skins with vjs prefix ([#114](https://github.com/videojs/v10/issues/114)) ([92b82e9](https://github.com/videojs/v10/commit/92b82e94f9cc856164f3b1c1a4e356fb2b07a73f))
-* **react:** adding simple video ([#125](https://github.com/videojs/v10/issues/125)) ([f6b5f80](https://github.com/videojs/v10/commit/f6b5f804bf92e3e4573a8e93f7051636dcc36143))
-* **react:** enable automatic CSS injection for MediaSkinDefault component ([bc8adaa](https://github.com/videojs/v10/commit/bc8adaa508802e9db95953e32963fe0e88107acf))
-* **react:** implement duration display component ([c5b659f](https://github.com/videojs/v10/commit/c5b659f4493787cadead2196c41e7f697c9737c7))
-* rename range to slider ([#46](https://github.com/videojs/v10/issues/46)) ([9c6eaef](https://github.com/videojs/v10/commit/9c6eaef2aa61771ae1407d0a594b3f790e0ff665))
-* **skins:** integrate duration display into default skins ([2ed2191](https://github.com/videojs/v10/commit/2ed219158ddf6f720ce1be8e328bec4603a7e847))
-* **ui:** add toasted skin ([bdd2f36](https://github.com/videojs/v10/commit/bdd2f36e13cf53fb2cec61730dece42a1ce8ce84))
-* **ui:** micro icons, toasted design tweaks ([#52](https://github.com/videojs/v10/issues/52)) ([bd3f0f7](https://github.com/videojs/v10/commit/bd3f0f7510480125653506d8e2e560234f6c06f2))
-* **ui:** minor style tweaks ([d3221ec](https://github.com/videojs/v10/commit/d3221ec21181090f7c5694f1951636c13b4c330b))
-* **ui:** more skin style tweaks ([#53](https://github.com/videojs/v10/issues/53)) ([7c9a0a5](https://github.com/videojs/v10/commit/7c9a0a5e3e838c430c073b0b36dff3a81ad9aa46))
-* **ui:** port over default skin ([ff4ea36](https://github.com/videojs/v10/commit/ff4ea3693e63ab3b5a728988ca44f3bab669e8ff))
-* **ui:** port over default skin ([9950945](https://github.com/videojs/v10/commit/995094500823e1063e7ae291c9a2ea9a4aa74847))
-* **ui:** skin and icon tweaks ([#59](https://github.com/videojs/v10/issues/59)) ([cdebece](https://github.com/videojs/v10/commit/cdebece1ebe8e5160b90e49ac2cbf05a7e0b6dca))
-* **ui:** skin design tweaks ([#126](https://github.com/videojs/v10/issues/126)) ([a93484e](https://github.com/videojs/v10/commit/a93484e86b1d9209e3c49bfc6b2f5b11db55d7af))
-* **ui:** styling fixes for toasted skin ([#38](https://github.com/videojs/v10/issues/38)) ([4ffaa58](https://github.com/videojs/v10/commit/4ffaa586340688ac9f5fb6d2ae3c02a62e9c4ab7))
-
-
-### Bug Fixes
-
-* design tweaks to toasted skin, lint rule tweaks ([#44](https://github.com/videojs/v10/issues/44)) ([3a0767c](https://github.com/videojs/v10/commit/3a0767c3407b2d6d8af3d3a8afd57b1e76efda85))
-* enable eslint & run eslint:fix ([#43](https://github.com/videojs/v10/issues/43)) ([5cb93a1](https://github.com/videojs/v10/commit/5cb93a14a7f47d66d5c71f9b82867621beda236c))
-* **icons:** add currentColor fill to fullscreen icons for proper theming ([d0d4876](https://github.com/videojs/v10/commit/d0d487601eb2da669be9a83cc8201d94998ec334))
-* minimal volume slider bug & fix dev infinite bug ([#73](https://github.com/videojs/v10/issues/73)) ([591dab6](https://github.com/videojs/v10/commit/591dab66caf8829017688007320f92b7445c4baa))
-* React version mismatch, add forward refs ([0a42bfe](https://github.com/videojs/v10/commit/0a42bfe86d1432c30a9f632a4235e4317c5b87e9))
-* **react:** implement proper HTML boolean data attributes for components ([26998a1](https://github.com/videojs/v10/commit/26998a121710d57c56eaf8dfe9f423a4fe91a401))
-* resolve package dependency and TypeScript export issues ([7154b1e](https://github.com/videojs/v10/commit/7154b1e44674a61735ab0f393a8bed3fcc689f8d))
-* resolve TypeScript build errors across packages ([374db7a](https://github.com/videojs/v10/commit/374db7afc07d6211bfd3f8079bbcd9613f3b69f3))
-* **root:** add videojs keyword to package.json ([4a9f8b2](https://github.com/videojs/v10/commit/4a9f8b2ad6fb27b463dcfe8d1a5fd883c9fa21d1))
-* seek jump back to current time ([#22](https://github.com/videojs/v10/issues/22)) ([a3f9630](https://github.com/videojs/v10/commit/a3f9630bd1eb34a16f339ffd30071b8adc864ca0))
-* skin exports/imports ([0afa9b7](https://github.com/videojs/v10/commit/0afa9b7187088b42408e6c64eff9026484473183))
-* skin syntax usage cleanup ([#48](https://github.com/videojs/v10/issues/48)) ([d4f3f4b](https://github.com/videojs/v10/commit/d4f3f4b75b2c94c47b18242f131ac7050eb54cfc))
-* **time-display:** clean up time utilities and simplify components ([597e79d](https://github.com/videojs/v10/commit/597e79d7fc12737353c8c9eb3f6e77ef0a04e9ed))
-* tooltip and popover portal ([49d0b03](https://github.com/videojs/v10/commit/49d0b03d899c61b6c980a198ed531baeafe4dde7))
-* tooltip syntax error & remove restMs ([fee1670](https://github.com/videojs/v10/commit/fee16708cb13670e30c8628425d621e2cfe0c7c6))
-* **typescript:** resolve declaration file generation for rollup packages ([#1](https://github.com/videojs/v10/issues/1)) ([69670e8](https://github.com/videojs/v10/commit/69670e8d7134db34aee665d8871cd17901625915))
-* **ui:** revert style testing change ([1ef66c9](https://github.com/videojs/v10/commit/1ef66c94611ad46f0f0b2f2fea0e0f0aa3e268f0))
-* **ui:** tone down text shadow on toasted skin ([#54](https://github.com/videojs/v10/issues/54)) ([924b257](https://github.com/videojs/v10/commit/924b2578a41ad90df2c674e48016ff0aaa58287e))
-* **workspace:** convert pnpm workspace protocol to npm workspace syntax ([fc5a0e4](https://github.com/videojs/v10/commit/fc5a0e46fd15f30245cb743a8006fc097c5b890e))
-
-
-### Dependencies
-
-* The following workspace dependencies were updated
-  * dependencies
-    * @videojs/core bumped to 0.1.0-preview.1
-    * @videojs/icons bumped to 0.1.0-preview.1
-    * @videojs/utils bumped to 0.1.0-preview.1
diff --git a/packages/__tech-preview__/react/README.md b/packages/__tech-preview__/react/README.md
deleted file mode 100644
index 297c45f1..00000000
--- a/packages/__tech-preview__/react/README.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# @videojs/react
-
-[![package-badge]][package]
-
-> **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use.
-
-## Overview
-
-`@videojs/react` is a comprehensive library for building media players in React applications. It
-provides a complete set of components, hooks, and utilities for creating feature-rich, accessible
-video and audio players with React.
-
-## Community
-
-If you need help with anything related to Video.js 10, or if you'd like to casually chat with other
-members:
-
-- [Join Discord Server][discord]
-- [See GitHub Discussions][gh-discussions]
-
-## License
-
-[Apache-2.0](./LICENSE)
-
-[package]: https://www.npmjs.com/package/@videojs/react
-[package-badge]: https://img.shields.io/npm/v/@videojs/react/next?label=@videojs/react@next
-[discord]: https://discord.gg/JBqHh485uF
-[gh-discussions]: https://github.com/videojs/v10/discussions
diff --git a/packages/__tech-preview__/react/build/build-styles.ts b/packages/__tech-preview__/react/build/build-styles.ts
deleted file mode 100644
index 4da8a521..00000000
--- a/packages/__tech-preview__/react/build/build-styles.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Build Styles Script
- *
- * This unified script handles the complete CSS build process for skins:
- *
- * 1. COMPILATION: Runs Tailwind CLI to compile CSS files
- *    - preflight.css (browser resets)
- *    - frosted.css (frosted skin)
- *    - minimal.css (minimal skin)
- *
- * 2. SCOPING: Scopes preflight selectors to `.vjs` class to prevent global resets
- *    - Transforms `* { margin: 0 }` → `.vjs * { margin: 0 }`
- *    - Special cases like `html`, `body`, `:root` → `.vjs`
- *
- * 3. CONCATENATION: Prepends scoped preflight to each skin CSS file
- *    - frosted.css = scoped-preflight + frosted styles
- *    - minimal.css = scoped-preflight + minimal styles
- *    - Deletes standalone preflight.css (no longer needed)
- *
- * Why scope preflight?
- * - Tailwind's preflight resets affect ALL elements globally
- * - Scoping to `.vjs` ensures resets only apply inside video player containers
- *
- * Why concatenate?
- * - Users only need to import one CSS file per skin
- * - Simpler API: import '@videojs/react-preview/skins/frosted.css'
- */
-
-import { execSync } from 'node:child_process';
-import { existsSync, mkdirSync, readFileSync, unlinkSync, writeFileSync } from 'node:fs';
-import { dirname, join } from 'node:path';
-import process from 'node:process';
-import { fileURLToPath } from 'node:url';
-import postcss from 'postcss';
-import prefixSelector from 'postcss-prefix-selector';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-const rootDir = join(__dirname, '..');
-
-const preflightFile = 'dist/skins/preflight.css';
-const frostedFile = 'dist/skins/frosted.css';
-const minimalFile = 'dist/skins/minimal.css';
-
-export default async function buildStyles() {
-  console.log('🎨 Building skin styles...');
-
-  try {
-    // ============================================================================
-    // STEP 1: Compile CSS files with Tailwind CLI
-    // ============================================================================
-    console.log('  → Compiling CSS with Tailwind...');
-
-    // Create output directory
-    const execOpts = { cwd: rootDir, stdio: 'inherit', encoding: 'utf8' };
-    const skinsDir = join(rootDir, 'dist', 'skins');
-
-    mkdirSync(skinsDir, { recursive: true });
-
-    // Compile preflight (browser resets)
-    execSync(
-      'pnpm exec tailwindcss -i src/skins/preflight.css -o dist/skins/preflight.css --minify',
-      execOpts,
-    );
-
-    // Compile frosted skin
-    execSync(
-      'pnpm exec tailwindcss -i src/skins/frosted/frosted-skin.css -o dist/skins/frosted.css --minify',
-      execOpts,
-    );
-
-    // Compile minimal skin
-    execSync(
-      'pnpm exec tailwindcss -i src/skins/minimal/minimal-skin.css -o dist/skins/minimal.css --minify',
-      execOpts,
-    );
-
-    // Verify all CSS files were created
-    const preflightPath = join(rootDir, preflightFile);
-    const frostedPath = join(rootDir, frostedFile);
-    const minimalPath = join(rootDir, minimalFile);
-
-    if (!existsSync(preflightPath)) {
-      throw new Error(`Tailwind failed to create ${preflightFile}`);
-    }
-    if (!existsSync(frostedPath)) {
-      throw new Error(`Tailwind failed to create ${frostedFile}`);
-    }
-    if (!existsSync(minimalPath)) {
-      throw new Error(`Tailwind failed to create ${minimalFile}`);
-    }
-
-    // ============================================================================
-    // STEP 2: Scope preflight CSS to .vjs
-    // ============================================================================
-    console.log('  → Scoping preflight selectors to .vjs...');
-
-    const preflightCss = readFileSync(preflightPath, 'utf-8');
-
-    // Use PostCSS with postcss-prefix-selector plugin to transform all selectors
-    const result = await postcss([
-      prefixSelector({
-        prefix: '.vjs',
-        transform(prefix, selector, prefixedSelector) {
-          // Special case transformations:
-          // - `html`, `body`, `:root` should become just `.vjs` (not `.vjs html`)
-          if (selector === 'body' || selector === 'html' || selector === ':root') {
-            return prefix;
-          } else if (selector === ':host') {
-            // Keep :host as-is (for web components)
-            return selector;
-          } else {
-            // All other selectors: prepend .vjs
-            return prefixedSelector;
-          }
-        },
-      }),
-    ]).process(preflightCss, { from: preflightFile, to: preflightFile });
-
-    // Clean up any duplicate .vjs classes that may have been generated
-    const scopedPreflight = result.css.replace(/(\.vjs\s+)+/g, '.vjs ');
-
-    // ============================================================================
-    // STEP 3: Concatenate scoped preflight into each skin
-    // ============================================================================
-    console.log('  → Concatenating preflight into frosted.css...');
-
-    const frostedCss = readFileSync(frostedPath, 'utf-8');
-    const frostedWithPreflight = `${scopedPreflight}\n${frostedCss}`;
-    writeFileSync(frostedPath, frostedWithPreflight, 'utf-8');
-
-    console.log('  → Concatenating preflight into minimal.css...');
-
-    const minimalCss = readFileSync(minimalPath, 'utf-8');
-    const minimalWithPreflight = `${scopedPreflight}\n${minimalCss}`;
-    writeFileSync(minimalPath, minimalWithPreflight, 'utf-8');
-
-    // ============================================================================
-    // STEP 4: Clean up - delete standalone preflight.css
-    // ============================================================================
-    console.log('  → Removing standalone preflight.css...');
-    unlinkSync(preflightPath);
-
-    console.log('✅ Skin styles built successfully');
-  } catch (error) {
-    console.error('❌ Failed to build styles:', error.message);
-    process.exit(1);
-  }
-}
diff --git a/packages/__tech-preview__/react/package.json b/packages/__tech-preview__/react/package.json
deleted file mode 100644
index 7d808d2d..00000000
--- a/packages/__tech-preview__/react/package.json
+++ /dev/null
@@ -1,80 +0,0 @@
-{
-  "name": "@videojs/react-preview",
-  "type": "module",
-  "version": "0.1.0-preview.10",
-  "description": "React library for building media players",
-  "license": "Apache-2.0",
-  "keywords": [
-    "media",
-    "player",
-    "react",
-    "components",
-    "hooks",
-    "videojs"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./store": {
-      "types": "./dist/store.d.ts",
-      "default": "./dist/store.js"
-    },
-    "./icons": {
-      "types": "./dist/icons.d.ts",
-      "default": "./dist/icons.js"
-    },
-    "./skins/frosted": {
-      "types": "./dist/skins/frosted.d.ts",
-      "default": "./dist/skins/frosted.js"
-    },
-    "./skins/minimal": {
-      "types": "./dist/skins/minimal.d.ts",
-      "default": "./dist/skins/minimal.js"
-    },
-    "./skins/frosted.css": "./dist/skins/frosted.css",
-    "./skins/minimal.css": "./dist/skins/minimal.css"
-  },
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsdown",
-    "build:watch": "tsdown --watch ./src --ignore-watch ./src/icons/generated-icons --silent",
-    "dev": "pnpm run build:watch",
-    "format:icons": "echo noop. Need to replace based on eslint vs. prettier decisions!",
-    "generate:icons": "svgr --config-file svgr.config.js --no-prettier --out-dir src/icons/generated-icons ../icons/assets",
-    "test": "echo \"No tests yet\"",
-    "clean": "rm -rf dist src/icons/generated-icons"
-  },
-  "peerDependencies": {
-    "react": ">=16.8.0"
-  },
-  "dependencies": {
-    "@videojs/core-preview": "workspace:*",
-    "@videojs/icons-preview": "workspace:*",
-    "@videojs/utils-preview": "workspace:*"
-  },
-  "devDependencies": {
-    "@svgr/babel-plugin-add-jsx-attribute": "^8.0.0",
-    "@svgr/cli": "^8.1.0",
-    "@svgr/core": "^8.1.0",
-    "@svgr/plugin-jsx": "^8.1.0",
-    "@tailwindcss/cli": "^4.1.17",
-    "@types/postcss-prefix-selector": "^1.16.3",
-    "@types/react": "^18.0.0",
-    "postcss": "^8.4.49",
-    "postcss-prefix-selector": "^1.16.1",
-    "react": "^18.0.0",
-    "tailwindcss": "^4.1.17",
-    "tsdown": "^0.15.9",
-    "typescript": "^5.9.3"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
diff --git a/packages/__tech-preview__/react/src/components/CurrentTimeDisplay.tsx b/packages/__tech-preview__/react/src/components/CurrentTimeDisplay.tsx
deleted file mode 100644
index f8aeb029..00000000
--- a/packages/__tech-preview__/react/src/components/CurrentTimeDisplay.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import type { ConnectedComponent } from '../utils/component-factory';
-
-import { currentTimeDisplayStateDefinition } from '@videojs/core-preview/store';
-import { formatDisplayTime, shallowEqual } from '@videojs/utils-preview';
-
-import { useMediaSelector } from '@/store';
-import { toConnectedComponent } from '../utils/component-factory';
-
-export function useCurrentTimeDisplayState(_props?: any): {
-  currentTime: number;
-  duration: number;
-} {
-  /** @TODO Fix type issues with hooks (CJP) */
-  const mediaState = useMediaSelector(currentTimeDisplayStateDefinition.stateTransform, shallowEqual);
-
-  // Current time display is read-only, no request methods needed
-  return {
-    currentTime: mediaState.currentTime ?? 0,
-    duration: mediaState.duration ?? 0,
-  };
-}
-
-export type CurrentTimeDisplayState = ReturnType<typeof useCurrentTimeDisplayState>;
-
-export interface CurrentTimeDisplayProps extends React.ComponentProps<'span'> {
-  showRemaining?: boolean;
-}
-
-export function useCurrentTimeDisplayProps(
-  props: PropsWithChildren,
-  _state: ReturnType<typeof useCurrentTimeDisplayState>,
-): PropsWithChildren<Record<string, unknown>> {
-  const baseProps: Record<string, any> = {
-    /** external props spread last to allow for overriding */
-    ...props,
-  };
-
-  return baseProps;
-}
-
-export function renderCurrentTimeDisplay(props: CurrentTimeDisplayProps, state: CurrentTimeDisplayState): JSX.Element {
-  const { showRemaining, ...restProps } = props;
-
-  /** @TODO Should this live here or elsewhere? (CJP) */
-  const timeLabel
-    = showRemaining && state.duration != null && state.currentTime != null
-      ? formatDisplayTime(-(state.duration - state.currentTime))
-      : formatDisplayTime(state.currentTime);
-
-  return <span {...restProps}>{timeLabel}</span>;
-}
-
-export const CurrentTimeDisplay: ConnectedComponent<CurrentTimeDisplayProps, typeof renderCurrentTimeDisplay>
-  = toConnectedComponent(
-    useCurrentTimeDisplayState,
-    useCurrentTimeDisplayProps,
-    renderCurrentTimeDisplay,
-    'CurrentTimeDisplay',
-  );
-
-export default CurrentTimeDisplay;
diff --git a/packages/__tech-preview__/react/src/components/DurationDisplay.tsx b/packages/__tech-preview__/react/src/components/DurationDisplay.tsx
deleted file mode 100644
index d1fc90ab..00000000
--- a/packages/__tech-preview__/react/src/components/DurationDisplay.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import type { ConnectedComponent } from '../utils/component-factory';
-
-import { durationDisplayStateDefinition } from '@videojs/core-preview/store';
-import { formatDisplayTime, shallowEqual } from '@videojs/utils-preview';
-
-import { useMediaSelector } from '@/store';
-import { toConnectedComponent } from '../utils/component-factory';
-
-export function useDurationDisplayState(_props: any): {
-  duration: number;
-} {
-  /** @TODO Fix type issues with hooks (CJP) */
-  const mediaState = useMediaSelector(durationDisplayStateDefinition.stateTransform, shallowEqual);
-
-  // Duration display is read-only, no request methods needed
-  return {
-    duration: mediaState.duration ?? 0,
-  };
-}
-
-export type useDurationDisplayState = typeof useDurationDisplayState;
-export type DurationDisplayState = ReturnType<useDurationDisplayState>;
-
-export function useDurationDisplayProps(props: PropsWithChildren): PropsWithChildren<Record<string, unknown>> {
-  const baseProps: Record<string, any> = {
-    /** external props spread last to allow for overriding */
-    ...props,
-  };
-
-  return baseProps;
-}
-
-export type useDurationDisplayProps = typeof useDurationDisplayProps;
-type DurationDisplayProps = ReturnType<useDurationDisplayProps>;
-
-export function renderDurationDisplay(props: DurationDisplayProps, state: DurationDisplayState): JSX.Element {
-  return <span {...props}>{formatDisplayTime(state.duration)}</span>;
-}
-
-export type renderDurationDisplay = typeof renderDurationDisplay;
-
-export const DurationDisplay: ConnectedComponent<DurationDisplayProps, typeof renderDurationDisplay>
-  = toConnectedComponent(useDurationDisplayState, useDurationDisplayProps, renderDurationDisplay, 'DurationDisplay');
-
-export default DurationDisplay;
diff --git a/packages/__tech-preview__/react/src/components/FullscreenButton.tsx b/packages/__tech-preview__/react/src/components/FullscreenButton.tsx
deleted file mode 100644
index c58f7d1e..00000000
--- a/packages/__tech-preview__/react/src/components/FullscreenButton.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import type { ConnectedComponent } from '../utils/component-factory';
-
-import { fullscreenButtonStateDefinition } from '@videojs/core-preview/store';
-
-import { shallowEqual } from '@videojs/utils-preview';
-import { useMemo } from 'react';
-
-import { useMediaSelector, useMediaStore } from '@/store';
-import { toConnectedComponent } from '../utils/component-factory';
-
-export function useFullscreenButtonState(_props?: any): {
-  fullscreen: boolean;
-  requestEnterFullscreen: () => void;
-  requestExitFullscreen: () => void;
-} {
-  const mediaStore = useMediaStore();
-  const mediaState = useMediaSelector(fullscreenButtonStateDefinition.stateTransform, shallowEqual);
-  const methods = useMemo(
-    () => fullscreenButtonStateDefinition.createRequestMethods(mediaStore.dispatch),
-    [mediaStore],
-  );
-
-  return {
-    fullscreen: mediaState.fullscreen,
-    requestEnterFullscreen: methods.requestEnterFullscreen,
-    requestExitFullscreen: methods.requestExitFullscreen,
-  } as const;
-}
-
-export type FullscreenButtonState = ReturnType<typeof useFullscreenButtonState>;
-
-export function getFullscreenButtonProps(
-  props: PropsWithChildren,
-  state: FullscreenButtonState,
-): PropsWithChildren<Record<string, unknown>> {
-  const baseProps: Record<string, any> = {
-    /** @TODO Need another state provider in core for i18n (CJP) */
-    /** aria attributes/props */
-    role: 'button',
-    'aria-label': state.fullscreen ? 'exit fullscreen' : 'enter fullscreen',
-    /** tooltip */
-    'data-tooltip': state.fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen',
-    'data-button': 'fullscreen',
-    /** external props spread last to allow for overriding */
-    ...props,
-  };
-
-  // Handle boolean data attribute: present with empty string when true, absent when false
-  if (state.fullscreen) {
-    baseProps['data-fullscreen'] = '';
-  }
-
-  return baseProps;
-}
-
-export type FullscreenButtonProps = ReturnType<typeof getFullscreenButtonProps>;
-
-export function renderFullscreenButton(props: FullscreenButtonProps, state: FullscreenButtonState): JSX.Element {
-  return (
-    <button
-      type="button"
-      {...props}
-      onClick={() => {
-        if (props.disabled) return;
-        if (state.fullscreen) {
-          state.requestExitFullscreen();
-        } else {
-          state.requestEnterFullscreen();
-        }
-      }}
-    >
-      {props.children}
-    </button>
-  );
-}
-
-export const FullscreenButton: ConnectedComponent<FullscreenButtonProps, typeof renderFullscreenButton>
-  = toConnectedComponent(useFullscreenButtonState, getFullscreenButtonProps, renderFullscreenButton, 'FullscreenButton');
-
-export default FullscreenButton;
diff --git a/packages/__tech-preview__/react/src/components/HlsVideo.tsx b/packages/__tech-preview__/react/src/components/HlsVideo.tsx
deleted file mode 100644
index 00d8a264..00000000
--- a/packages/__tech-preview__/react/src/components/HlsVideo.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import type {
-  CSSProperties,
-  DetailedHTMLProps,
-  ElementType,
-  PropsWithChildren,
-  Ref,
-  VideoHTMLAttributes,
-} from 'react';
-
-import { createMediaPlaybackController } from '@videojs/core-preview/media';
-
-import { forwardRef, useImperativeHandle, useRef } from 'react';
-import { useMediaRef } from '@/store';
-
-export interface MuxVideoProps {
-  'playback-id'?: string;
-}
-
-type MediaStateOwner = NonNullable<Parameters<ReturnType<typeof useMediaRef>>[0]>;
-
-/** @TODO Improve type inference and narrowing/widening for different use cases (CJP) */
-type ComponentType = ElementType<
-  Omit<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'ref'> & {
-    ref: Ref<MediaStateOwner>;
-  }
->;
-
-// These are the first steps/WIP POC of decoupling the Media State Owner from the DOM.
-// Note that everything will still work if you use:
-// 1. an audio/video element directly
-// 2. a custom element a la media-elements
-type CreateMediaStateOwner = typeof createMediaPlaybackController;
-
-function useMediaStateOwner(ref: Ref<any>, createMediaPlaybackController: CreateMediaStateOwner) {
-  const mediaStateOwnerRef = useRef(createMediaPlaybackController(/* props? */));
-  useImperativeHandle(ref, () => mediaStateOwnerRef.current, []);
-  /** @TODO Parameterize this (CJP) */
-  type ComponentProps = DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
-  return {
-    updateMediaElement(mediaEl: HTMLMediaElement | null, props: ComponentProps) {
-      // NOTE: The details here will almost definitely change for a less "bare bones"/"POC" implementation of Media State Owner impl. (CJP)
-      mediaStateOwnerRef.current.mediaElement = mediaEl ?? undefined;
-      mediaStateOwnerRef.current.src = props.src as string;
-      if (props.muted) {
-        mediaStateOwnerRef.current.muted = props.muted;
-      }
-    },
-  };
-}
-
-const DefaultVideoComponent: ElementType<
-  Omit<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'ref'> & { ref: Ref<any> }
-> = forwardRef<any, any>(({ children, ...props }, ref) => {
-  const { updateMediaElement } = useMediaStateOwner(ref, createMediaPlaybackController);
-  return (
-    <video
-      {...props}
-      ref={(mediaEl) => {
-        /** @TODO In later iterations/non-POC, we should be able to have a function that can be used directly for the `ref` prop (CJP) */
-        updateMediaElement(mediaEl, props);
-      }}
-    >
-      {children}
-    </video>
-  );
-});
-
-/**
- * @description This is a "thin wrapper" around the media component whose primary responsibility is to wire up the element
- * to the <VideoProvider/>'s MediaStore for the media state.
- * @param props - Identical to both a <video/>'s props and the <Player/> props, with one addition that may be familiar to
- * MUI users: a `component` prop that allows you to use something other than the <video/> element under the hood.
- * @returns A media react component (e.g. <video/>), wired up as the media element.
- */
-function ConnectedVideo({
-  component,
-  children,
-  ...props
-}: PropsWithChildren<{
-  component: ComponentType;
-  className?: string | undefined;
-  style?: CSSProperties | undefined;
-}>) {
-  const Component = component;
-  const mediaRefCallback = useMediaRef();
-  // NOTE: While this may feel like magic to folks, in the "default" use case, you can think of it as:
-  // return (<video ref={mediaRefCallback} {...restProps} >{children}</video>);
-  return (
-    <Component {...props} ref={mediaRefCallback}>
-      {children}
-    </Component>
-  );
-}
-
-export type VideoProps = PropsWithChildren<{
-  component?: ComponentType;
-  className?: string | undefined;
-  style?: CSSProperties | undefined;
-}>;
-
-// HlsVideo component with default component
-export function HlsVideo({ component = DefaultVideoComponent, children, ...props }: VideoProps): JSX.Element {
-  return (
-    <ConnectedVideo {...props} component={component}>
-      {children}
-    </ConnectedVideo>
-  );
-}
-
-export default HlsVideo;
diff --git a/packages/__tech-preview__/react/src/components/MediaContainer.tsx b/packages/__tech-preview__/react/src/components/MediaContainer.tsx
deleted file mode 100644
index c508a03e..00000000
--- a/packages/__tech-preview__/react/src/components/MediaContainer.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import type { FC, HTMLProps, PointerEventHandler, PropsWithChildren, RefCallback } from 'react';
-
-import { playButtonStateDefinition } from '@videojs/core-preview/store';
-import { shallowEqual } from '@videojs/utils-preview';
-import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
-import { useMediaSelector, useMediaStore } from '@/store';
-import { useComposedRefs } from '../utils/use-composed-refs';
-
-export interface MediaContainerProps extends PropsWithChildren<HTMLProps<HTMLDivElement>> {
-  /**
-   * Time in milliseconds before the controls autohide. -1 to disable autohide.
-   * @default 2000
-   */
-  autohide?: number;
-  /**
-   * Whether to autohide the controls when hovering over them.
-   * @default false
-   */
-  autohideOverControls?: boolean;
-}
-
-/**
- * Hook to associate a React element as the fullscreen container for the media store.
- * This is equivalent to Media Chrome's useMediaFullscreenRef but for VJS-10.
- *
- * The ref callback will register the element as the container state owner
- * in the media store, enabling fullscreen functionality.
- *
- * @example
- * import { useMediaContainerRef } from '@videojs/react-preview';
- *
- * const PlayerContainer = ({ children }) => {
- *   const containerRef = useMediaContainerRef();
- *   return <div ref={containerRef}>{children}</div>;
- * };
- */
-export function useMediaContainerRef(): RefCallback<HTMLElement | null> {
-  const mediaStore = useMediaStore();
-
-  return useCallback(
-    (containerElement: HTMLElement | null) => {
-      if (!mediaStore) return;
-
-      // Register or unregister the container element as the container state owner
-      mediaStore.dispatch({
-        type: 'containerstateownerchangerequest',
-        detail: containerElement,
-      });
-    },
-    [mediaStore],
-  );
-}
-
-/**
- * MediaContainer component that automatically registers itself as the fullscreen container.
- * This provides a simple wrapper component for fullscreen functionality.
- *
- * @example
- * import { MediaContainer } from '@videojs/react-preview';
- *
- * const MyPlayer = () => (
- *   <MediaContainer>
- *     <video src="video.mp4" />
- *     <div>Controls here</div>
- *   </MediaContainer>
- * );
- */
-export const MediaContainer: FC<MediaContainerProps> = forwardRef(
-  ({ children, autohide = 2000, autohideOverControls = false, ...props }, ref) => {
-    const containerRef = useMediaContainerRef();
-    const internalRef = useRef<HTMLDivElement | null>(null);
-    const composedRef = useComposedRefs(ref, containerRef, internalRef);
-
-    const mediaStore = useMediaStore();
-    const mediaState = useMediaSelector(playButtonStateDefinition.stateTransform, shallowEqual);
-    const methods = useMemo(() => playButtonStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);
-
-    const [isUserActive, setIsUserActive] = useState(true);
-    const [pointerDownTimeStamp, setPointerDownTimeStamp] = useState(0);
-    const inactiveTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-
-    const getMediaElement = useCallback((): HTMLMediaElement | null => {
-      const media = internalRef.current?.querySelector('video, audio');
-      if (media && (media instanceof HTMLMediaElement)) {
-        return media;
-      }
-      return null;
-    }, []);
-
-    const handleClick: PointerEventHandler<HTMLDivElement> = useCallback((event) => {
-      // Ignore clicks from touch/pen devices
-      if (navigator.maxTouchPoints > 0 || event.nativeEvent.pointerType !== 'mouse') return;
-      // Ignore clicks not on media elements
-      if (!['video', 'audio'].includes((event.target as HTMLElement).localName || '')) return;
-
-      if (mediaState.paused) {
-        methods.requestPlay();
-      } else {
-        methods.requestPause();
-      }
-    }, [mediaState.paused, methods]);
-
-    const setUserInactive = useCallback(() => {
-      if (autohide < 0 || !internalRef.current) return;
-      setIsUserActive(false);
-    }, [autohide]);
-
-    const scheduleUserInactive = useCallback(() => {
-      setIsUserActive(true);
-      clearTimeout(inactiveTimeoutRef.current);
-
-      // Setting autohide to -1 turns off autohide
-      if (autohide < 0) return;
-
-      inactiveTimeoutRef.current = setTimeout(() => {
-        setUserInactive();
-      }, autohide);
-    }, [autohide, setUserInactive]);
-
-    const handlePointerMove: PointerEventHandler<HTMLDivElement> = useCallback((event) => {
-      if (event.nativeEvent.pointerType !== 'mouse') {
-        // On mobile we toggle the controls on a tap which is handled in pointerup,
-        // but Android fires pointermove events even when the user is just tapping.
-        // Prevent calling setActive() on tap because it will mess with the toggle logic.
-        const MAX_TAP_DURATION = 250;
-        // If the move duration exceeds 250ms then it's a drag and we should show the controls.
-        if (event.timeStamp - pointerDownTimeStamp < MAX_TAP_DURATION) return;
-      }
-
-      setIsUserActive(true);
-
-      // Stay visible if hovered over control bar
-      clearTimeout(inactiveTimeoutRef.current);
-
-      const media = getMediaElement();
-
-      // If hovering over something other than controls, we're free to make inactive
-      if ([internalRef.current, media].includes(event.target as HTMLMediaElement) || autohideOverControls) {
-        scheduleUserInactive();
-      }
-    }, [autohideOverControls, getMediaElement, pointerDownTimeStamp, scheduleUserInactive]);
-
-    const handlePointerUp: PointerEventHandler<HTMLDivElement> = useCallback((event) => {
-      if (navigator.maxTouchPoints > 0 || event.nativeEvent.pointerType !== 'mouse') {
-        const media = getMediaElement();
-        if (
-          [internalRef.current, media].includes(event.target as HTMLMediaElement)
-          && isUserActive
-        ) {
-          setIsUserActive(false);
-        } else {
-          scheduleUserInactive();
-        }
-      } else if (
-        event.nativeEvent
-          .composedPath()
-          .some((element) => {
-            if (!(element instanceof HTMLElement)) return false;
-            const type = element.getAttribute('data-button');
-            if (!type) return false;
-            return ['play', 'fullscreen'].includes(type);
-          },
-          )
-      ) {
-        scheduleUserInactive();
-      }
-    }, [getMediaElement, isUserActive, scheduleUserInactive]);
-
-    return (
-      <div
-        ref={composedRef}
-        onClick={handleClick}
-        onPointerMove={handlePointerMove}
-        onPointerDown={event => setPointerDownTimeStamp(event.timeStamp)}
-        onPointerUp={handlePointerUp}
-        onMouseLeave={() => setUserInactive()}
-        onKeyUp={() => scheduleUserInactive()}
-        data-media-container
-        data-controls={isUserActive || mediaState.paused ? 'visible' : 'hidden'}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  },
-);
diff --git a/packages/__tech-preview__/react/src/components/MuteButton.tsx b/packages/__tech-preview__/react/src/components/MuteButton.tsx
deleted file mode 100644
index d0679185..00000000
--- a/packages/__tech-preview__/react/src/components/MuteButton.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import type { ConnectedComponent } from '../utils/component-factory';
-
-import { muteButtonStateDefinition } from '@videojs/core-preview/store';
-
-import { shallowEqual } from '@videojs/utils-preview';
-import { useMemo } from 'react';
-
-import { useMediaSelector, useMediaStore } from '@/store';
-import { toConnectedComponent } from '../utils/component-factory';
-
-export function useMuteButtonState(_props?: any): {
-  volumeLevel: string;
-  muted: boolean;
-  requestMute: () => void;
-  requestUnmute: () => void;
-} {
-  const mediaStore = useMediaStore();
-  const mediaState = useMediaSelector(muteButtonStateDefinition.stateTransform, shallowEqual);
-  const methods = useMemo(() => muteButtonStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);
-
-  return {
-    volumeLevel: mediaState.volumeLevel,
-    muted: mediaState.muted,
-    requestMute: methods.requestMute,
-    requestUnmute: methods.requestUnmute,
-  } as const;
-}
-
-export type MuteButtonState = ReturnType<typeof useMuteButtonState>;
-
-export function getMuteButtonProps(
-  props: PropsWithChildren,
-  state: MuteButtonState,
-): PropsWithChildren<Record<string, unknown>> {
-  const baseProps: Record<string, any> = {
-    /** data attributes/props - non-boolean */
-    'data-volume-level': state.volumeLevel,
-    /** @TODO Need another state provider in core for i18n (CJP) */
-    /** aria attributes/props */
-    role: 'button',
-    'aria-label': state.muted ? 'unmute' : 'mute',
-    /** tooltip */
-    'data-tooltip': state.muted ? 'Unmute' : 'Mute',
-    'data-button': 'mute',
-    /** external props spread last to allow for overriding */
-    ...props,
-  };
-
-  // Handle boolean data attribute: present with empty string when true, absent when false
-  if (state.muted) {
-    baseProps['data-muted'] = '';
-  }
-
-  return baseProps;
-}
-
-export type MuteButtonProps = ReturnType<typeof getMuteButtonProps>;
-
-export function renderMuteButton(props: MuteButtonProps, state: MuteButtonState): JSX.Element {
-  return (
-    <button
-      type="button"
-      {...props}
-      onClick={() => {
-        if (props.disabled) return;
-        if (state.volumeLevel === 'off') {
-          state.requestUnmute();
-        } else {
-          state.requestMute();
-        }
-      }}
-    >
-      {props.children}
-    </button>
-  );
-}
-
-export const MuteButton: ConnectedComponent<MuteButtonProps, typeof renderMuteButton> = toConnectedComponent(
-  useMuteButtonState,
-  getMuteButtonProps,
-  renderMuteButton,
-  'MuteButton',
-);
-
-export default MuteButton;
diff --git a/packages/__tech-preview__/react/src/components/PlayButton.tsx b/packages/__tech-preview__/react/src/components/PlayButton.tsx
deleted file mode 100644
index de9e10a9..00000000
--- a/packages/__tech-preview__/react/src/components/PlayButton.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import type { ConnectedComponent } from '../utils/component-factory';
-
-import { playButtonStateDefinition } from '@videojs/core-preview/store';
-
-import { shallowEqual } from '@videojs/utils-preview';
-import { useMemo } from 'react';
-
-import { useMediaSelector, useMediaStore } from '@/store';
-import { toConnectedComponent } from '../utils/component-factory';
-
-export function usePlayButtonState(_props?: any): {
-  paused: boolean;
-  requestPlay: () => void;
-  requestPause: () => void;
-} {
-  const mediaStore = useMediaStore();
-  const mediaState = useMediaSelector(playButtonStateDefinition.stateTransform, shallowEqual);
-  const methods = useMemo(() => playButtonStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);
-
-  return {
-    paused: mediaState.paused,
-    requestPlay: methods.requestPlay,
-    requestPause: methods.requestPause,
-  };
-}
-
-export type PlayButtonState = ReturnType<typeof usePlayButtonState>;
-
-export function getPlayButtonProps(
-  props: Record<string, unknown>,
-  state: PlayButtonState,
-): PropsWithChildren<Record<string, unknown>> {
-  const baseProps: Record<string, any> = {
-    /** @TODO Need another state provider in core for i18n (CJP) */
-    /** aria attributes/props */
-    role: 'button',
-    'aria-label': state.paused ? 'play' : 'pause',
-    /** tooltip */
-    'data-tooltip': state.paused ? 'Play' : 'Pause',
-    'data-button': 'play',
-    /** external props spread last to allow for overriding */
-    ...props,
-  };
-
-  // Handle boolean data attribute: present with empty string when true, absent when false
-  if (state.paused) {
-    baseProps['data-paused'] = '';
-  }
-
-  return baseProps;
-}
-
-export type PlayButtonProps = ReturnType<typeof getPlayButtonProps>;
-
-export function renderPlayButton(props: PlayButtonProps, state: PlayButtonState): JSX.Element {
-  return (
-    <button
-      type="button"
-      {...props}
-      onClick={() => {
-        if (props.disabled) return;
-        if (state.paused) {
-          state.requestPlay();
-        } else {
-          state.requestPause();
-        }
-      }}
-    >
-      {props.children}
-    </button>
-  );
-}
-
-export const PlayButton: ConnectedComponent<PlayButtonProps, typeof renderPlayButton> = toConnectedComponent(
-  usePlayButtonState,
-  getPlayButtonProps,
-  renderPlayButton,
-  'PlayButton',
-);
-
-export default PlayButton;
diff --git a/packages/__tech-preview__/react/src/components/Popover.tsx b/packages/__tech-preview__/react/src/components/Popover.tsx
deleted file mode 100644
index 9047874d..00000000
--- a/packages/__tech-preview__/react/src/components/Popover.tsx
+++ /dev/null
@@ -1,283 +0,0 @@
-import type { PopoverState as CorePopoverState } from '@videojs/core-preview';
-import type { ReactNode } from 'react';
-import type { Prettify } from '../types';
-import type { ConnectedComponent } from '../utils/component-factory';
-
-import { Popover as CorePopover } from '@videojs/core-preview';
-import { Children, cloneElement, useCallback, useEffect, useId, useState } from 'react';
-import { toConnectedComponent, toContextComponent, useCore } from '../utils/component-factory';
-import { useMutationObserver } from '../utils/use-mutation-observer';
-
-type Placement = CorePopoverState['placement'];
-
-export type PopoverState = Prettify<
-  CorePopoverState & {
-    popupId: string | undefined;
-    updatePositioning: (placement: Placement, sideOffset: number, collisionPadding: number) => void;
-  }
->;
-
-// ============================================================================
-// ROOT COMPONENT
-// ============================================================================
-
-export interface PopoverRootProps {
-  openOnHover?: boolean;
-  delay?: number;
-  closeDelay?: number;
-  children: ReactNode;
-}
-
-export function usePopoverRootState(props: PopoverRootProps): PopoverState {
-  const { openOnHover = false, delay = 0, closeDelay = 0 } = props;
-  const [placement, setPlacement] = useState<Placement>('top');
-  const [sideOffset, setSideOffset] = useState(5);
-  const [collisionPadding, setCollisionPadding] = useState(0);
-  const uniqueId = useId();
-  const popupId = uniqueId.replace(/^:([^:]+):$/, '«$1»');
-
-  const coreState = useCore<CorePopover>(CorePopover, {
-    openOnHover,
-    delay,
-    closeDelay,
-    placement,
-    sideOffset,
-    collisionPadding,
-  });
-
-  const updatePositioning = useCallback(
-    (newPlacement: Placement, newSideOffset: number, newCollisionPadding: number) => {
-      setPlacement(newPlacement);
-      setSideOffset(newSideOffset);
-      setCollisionPadding(newCollisionPadding);
-    },
-    [],
-  );
-
-  return {
-    ...coreState,
-    popupId,
-    updatePositioning,
-  };
-}
-
-export function usePopoverRootProps(props: PopoverRootProps, _state: PopoverState): { children: ReactNode } {
-  return {
-    children: props.children,
-  };
-}
-
-export function renderPopoverRoot(props: { children: ReactNode }): JSX.Element {
-  return <>{props.children}</>;
-}
-
-const PopoverRoot: ConnectedComponent<PopoverRootProps, typeof renderPopoverRoot> = toConnectedComponent(
-  usePopoverRootState,
-  usePopoverRootProps,
-  renderPopoverRoot,
-  'Popover.Root',
-);
-
-// ============================================================================
-// TRIGGER COMPONENT
-// ============================================================================
-
-export interface PopoverTriggerProps {
-  children: ReactNode;
-}
-
-export function usePopoverTriggerProps(
-  props: PopoverTriggerProps,
-  context: PopoverState,
-): { child: JSX.Element; triggerProps: Record<string, any> } {
-  const { children } = props;
-  const { _setTriggerElement, _open, popupId } = context;
-
-  const child = Children.only(children) as JSX.Element;
-  const existingStyle = (child.props as { style?: React.CSSProperties })?.style || {};
-
-  return {
-    child,
-    triggerProps: {
-      ref: _setTriggerElement,
-      'data-popup-open': _open ? '' : undefined,
-      commandfor: popupId ?? undefined,
-      style: {
-        ...existingStyle,
-        ...(popupId ? { anchorName: `--${popupId}` as any } : {}),
-      },
-    },
-  };
-}
-
-export function renderPopoverTrigger(props: { child: JSX.Element; triggerProps: Record<string, any> }): JSX.Element {
-  return cloneElement(props.child, props.triggerProps);
-}
-
-const PopoverTrigger: ConnectedComponent<PopoverTriggerProps, typeof renderPopoverTrigger> = toContextComponent(
-  usePopoverTriggerProps,
-  renderPopoverTrigger,
-  'Popover.Trigger',
-);
-
-// ============================================================================
-// POSITIONER COMPONENT
-// ============================================================================
-
-export interface PopoverPositionerProps {
-  side?: Placement;
-  sideOffset?: number;
-  collisionPadding?: number;
-  collisionBoundary?: Element;
-  children: ReactNode;
-}
-
-export function usePopoverPositionerProps(
-  props: PopoverPositionerProps,
-  context: PopoverState,
-): { children: ReactNode } {
-  const { side = 'top', sideOffset = 5, collisionPadding = 0, collisionBoundary, children } = props;
-  const { updatePositioning, _setCollisionBoundaryElement } = context;
-
-  useEffect(() => {
-    updatePositioning(side, sideOffset, collisionPadding);
-  }, [side, sideOffset, collisionPadding, updatePositioning]);
-
-  useEffect(() => {
-    if (collisionBoundary) {
-      _setCollisionBoundaryElement(collisionBoundary as HTMLElement);
-    }
-  }, [collisionBoundary, _setCollisionBoundaryElement]);
-
-  return { children };
-}
-
-export function renderPopoverPositioner(props: { children: ReactNode }): JSX.Element {
-  return <>{props.children}</>;
-}
-
-const PopoverPositioner: ConnectedComponent<PopoverPositionerProps, typeof renderPopoverPositioner>
-  = toContextComponent(usePopoverPositionerProps, renderPopoverPositioner, 'Popover.Positioner');
-
-// ============================================================================
-// POPUP COMPONENT
-// ============================================================================
-
-export interface PopoverPopupProps {
-  id?: string;
-  className?: string;
-  style?: React.CSSProperties;
-  children: ReactNode;
-}
-
-export interface PopoverPopupRenderProps extends React.ComponentProps<'div'> {
-  children: ReactNode;
-  'data-side': Placement;
-  'data-starting-style': string | undefined;
-  'data-open': string | undefined;
-  'data-ending-style': string | undefined;
-  'data-closed': string | undefined;
-}
-
-export function usePopoverPopupProps(props: PopoverPopupProps, context: PopoverState): PopoverPopupRenderProps {
-  const { className, style, children, id } = props;
-  const {
-    _setPopoverElement,
-    _transitionStatus,
-    placement,
-    popupId,
-    _popoverStyle,
-    _triggerElement,
-    _popoverElement,
-    _setCollisionBoundaryElement,
-    _collisionBoundaryElement,
-  } = context;
-
-  // Set bounding box element for collision detection
-  useEffect(() => {
-    if (!_popoverElement) return;
-
-    // Only set bounding box if it's not already set (to allow collisionBoundary from Positioner to take precedence)
-    if (!_collisionBoundaryElement) {
-      const mediaContainer = _popoverElement.closest('[data-media-container]') as HTMLElement | null;
-      _setCollisionBoundaryElement(mediaContainer);
-    }
-  }, [_popoverElement, _collisionBoundaryElement, _setCollisionBoundaryElement]);
-
-  // Track data attributes from trigger element, updating when element or attributes change
-  const [dataAttrs, setDataAttrs] = useState<Record<string, string> | undefined>(() =>
-    getDataAttributes(_triggerElement),
-  );
-
-  // Update data attributes when trigger element changes
-  useEffect(() => {
-    setDataAttrs(getDataAttributes(_triggerElement));
-  }, [_triggerElement]);
-
-  // Update data attributes when attributes mutate
-  useMutationObserver(
-    _triggerElement,
-    () => {
-      setDataAttrs(getDataAttributes(_triggerElement));
-    },
-    { attributes: true },
-  );
-
-  return {
-    ref: _setPopoverElement,
-    id: id ?? popupId ?? undefined,
-    className,
-    popover: 'manual' as const,
-    style: {
-      ..._popoverStyle,
-      ...style,
-    } as React.CSSProperties,
-    ...dataAttrs,
-    'data-side': placement,
-    'data-starting-style': _transitionStatus === 'initial' ? '' : undefined,
-    'data-open': _transitionStatus === 'initial' || _transitionStatus === 'open' ? '' : undefined,
-    'data-ending-style': _transitionStatus === 'close' || _transitionStatus === 'unmounted' ? '' : undefined,
-    'data-closed': _transitionStatus === 'close' || _transitionStatus === 'unmounted' ? '' : undefined,
-    children,
-  };
-}
-
-function getDataAttributes(element?: HTMLElement | null): Record<string, string> | undefined {
-  if (!element) return undefined;
-  return Object.fromEntries(
-    Array.from(element.attributes)
-      .filter(attr => attr.name.startsWith('data-'))
-      .map(attr => [attr.name, attr.value]),
-  );
-}
-
-export function renderPopoverPopup(props: PopoverPopupRenderProps): JSX.Element {
-  return <div {...props} />;
-}
-
-const PopoverPopup: ConnectedComponent<PopoverPopupProps, typeof renderPopoverPopup> = toContextComponent(
-  usePopoverPopupProps,
-  renderPopoverPopup,
-  'Popover.Popup',
-);
-
-// ============================================================================
-// EXPORTS
-// ============================================================================
-
-export const Popover = Object.assign(
-  {},
-  {
-    Root: PopoverRoot,
-    Trigger: PopoverTrigger,
-    Positioner: PopoverPositioner,
-    Popup: PopoverPopup,
-  },
-) as {
-  Root: typeof PopoverRoot;
-  Trigger: typeof PopoverTrigger;
-  Positioner: typeof PopoverPositioner;
-  Popup: typeof PopoverPopup;
-};
-
-export default Popover;
diff --git a/packages/__tech-preview__/react/src/components/PreviewTimeDisplay.tsx b/packages/__tech-preview__/react/src/components/PreviewTimeDisplay.tsx
deleted file mode 100644
index 59dc6f01..00000000
--- a/packages/__tech-preview__/react/src/components/PreviewTimeDisplay.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import type { ConnectedComponent } from '../utils/component-factory';
-
-import { previewTimeDisplayStateDefinition } from '@videojs/core-preview/store';
-import { formatDisplayTime, shallowEqual } from '@videojs/utils-preview';
-
-import { useMediaSelector } from '@/store';
-import { toConnectedComponent } from '../utils/component-factory';
-
-export function usePreviewTimeDisplayState(_props: any): {
-  previewTime: number;
-} {
-  /** @TODO Fix type issues with hooks (CJP) */
-  const mediaState = useMediaSelector(previewTimeDisplayStateDefinition.stateTransform, shallowEqual);
-
-  // Preview time display is read-only, no request methods needed
-  return {
-    previewTime: mediaState.previewTime ?? 0,
-  };
-}
-
-export type PreviewTimeDisplayState = ReturnType<typeof usePreviewTimeDisplayState>;
-
-export interface PreviewTimeDisplayProps extends React.ComponentProps<'span'> {
-  showRemaining?: boolean;
-}
-
-export function getPreviewTimeDisplayProps(
-  props: PropsWithChildren,
-  _state: ReturnType<typeof usePreviewTimeDisplayState>,
-): PropsWithChildren<Record<string, unknown>> {
-  const baseProps: Record<string, any> = {
-    /** external props spread last to allow for overriding */
-    ...props,
-  };
-
-  return baseProps;
-}
-
-export function renderPreviewTimeDisplay(props: PreviewTimeDisplayProps, state: PreviewTimeDisplayState): JSX.Element {
-  const { showRemaining, ...restProps } = props;
-
-  /** @TODO Should this live here or elsewhere? (CJP) */
-  const timeLabel = formatDisplayTime(state.previewTime);
-
-  return <span {...restProps}>{timeLabel}</span>;
-}
-
-export const PreviewTimeDisplay: ConnectedComponent<PreviewTimeDisplayProps, typeof renderPreviewTimeDisplay>
-  = toConnectedComponent(
-    usePreviewTimeDisplayState,
-    getPreviewTimeDisplayProps,
-    renderPreviewTimeDisplay,
-    'PreviewTimeDisplay',
-  );
-
-export default PreviewTimeDisplay;
diff --git a/packages/__tech-preview__/react/src/components/TimeSlider.tsx b/packages/__tech-preview__/react/src/components/TimeSlider.tsx
deleted file mode 100644
index de55c24b..00000000
--- a/packages/__tech-preview__/react/src/components/TimeSlider.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-import type { Prettify } from '../types';
-import type { ConnectedComponent } from '../utils/component-factory';
-
-import { TimeSlider as CoreTimeSlider } from '@videojs/core-preview';
-import { timeSliderStateDefinition } from '@videojs/core-preview/store';
-import { shallowEqual } from '@videojs/utils-preview';
-import { useMemo } from 'react';
-import { useMediaSelector, useMediaStore } from '@/store';
-import { toConnectedComponent, toContextComponent, useCore } from '../utils/component-factory';
-import { useComposedRefs } from '../utils/use-composed-refs';
-
-export type TimeSliderState = Prettify<ReturnType<typeof useCore<CoreTimeSlider>>> & {
-  orientation: 'horizontal' | 'vertical';
-};
-
-export interface TimeSliderProps extends React.ComponentPropsWithRef<'div'> {
-  orientation?: 'horizontal' | 'vertical';
-}
-
-interface TimeSliderRenderProps extends React.ComponentProps<'div'> {
-  'data-orientation'?: 'horizontal' | 'vertical';
-  'data-current-time'?: number;
-  'data-duration'?: number;
-}
-
-// ============================================================================
-// ROOT COMPONENT
-// ============================================================================
-
-export function useTimeSliderRootState(props?: TimeSliderProps): TimeSliderState {
-  const { orientation = 'horizontal' } = props ?? {};
-  const mediaStore = useMediaStore();
-  const mediaState = useMediaSelector(timeSliderStateDefinition.stateTransform, shallowEqual);
-  const mediaMethods = useMemo(() => timeSliderStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);
-  const coreState = useCore(CoreTimeSlider, { ...mediaState, ...mediaMethods });
-  return {
-    ...coreState,
-    orientation,
-  };
-}
-
-export function useTimeSliderRootProps(props: TimeSliderProps, state: TimeSliderState): TimeSliderRenderProps {
-  const { children, className, id, style, orientation = 'horizontal', ref } = props;
-  const composedRef = useComposedRefs(ref, state._setRootElement);
-
-  return {
-    ref: composedRef,
-    id,
-    role: 'slider',
-    tabIndex: 0,
-    'aria-label': 'Seek',
-    'aria-valuemin': 0,
-    'aria-valuemax': Math.round(state.duration),
-    'aria-valuenow': Math.round(state.currentTime),
-    'aria-valuetext': `${state._currentTimeText} of ${state._durationText}`,
-    'aria-orientation': orientation,
-    'data-orientation': orientation,
-    'data-current-time': state.currentTime,
-    'data-duration': state.duration,
-    className,
-    style: {
-      ...style,
-      '--slider-fill': `${state._fillWidth.toFixed(3)}%`,
-      '--slider-pointer': `${(state._pointerWidth * 100).toFixed(3)}%`,
-    } as React.CSSProperties,
-    children,
-  };
-}
-
-export function renderTimeSliderRoot(props: TimeSliderRenderProps): JSX.Element {
-  return <div {...props} />;
-}
-
-const TimeSliderRoot: ConnectedComponent<TimeSliderProps, typeof renderTimeSliderRoot> = toConnectedComponent(
-  useTimeSliderRootState,
-  useTimeSliderRootProps,
-  renderTimeSliderRoot,
-  'TimeSlider.Root',
-);
-
-// ============================================================================
-// TRACK COMPONENT
-// ============================================================================
-
-export function useTimeSliderTrackProps(props: React.ComponentProps<'div'>, context: TimeSliderState): TimeSliderRenderProps {
-  return {
-    ref: context._setTrackElement,
-    'data-orientation': context.orientation,
-    ...props,
-    style: {
-      ...props.style,
-      [context.orientation === 'horizontal' ? 'width' : 'height']: '100%',
-    },
-  };
-}
-
-export function renderTimeSliderTrack(props: TimeSliderRenderProps): JSX.Element {
-  return <div {...props} />;
-}
-
-const TimeSliderTrack: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeSliderTrack> = toContextComponent(
-  useTimeSliderTrackProps,
-  renderTimeSliderTrack,
-  'TimeSlider.Track',
-);
-
-// ============================================================================
-// THUMB COMPONENT
-// ============================================================================
-
-export function getTimeSliderThumbProps(props: React.ComponentProps<'div'>, context: TimeSliderState): TimeSliderRenderProps {
-  return {
-    'data-orientation': context.orientation,
-    ...props,
-    style: {
-      ...props.style,
-      [context.orientation === 'horizontal' ? 'insetInlineStart' : 'insetBlockEnd']: 'var(--slider-fill)',
-      [context.orientation === 'horizontal' ? 'top' : 'left']: '50%',
-      translate: context.orientation === 'horizontal' ? '-50% -50%' : '-50% 50%',
-      position: 'absolute' as const,
-    },
-  };
-}
-
-export function renderTimeSliderThumb(props: TimeSliderRenderProps): JSX.Element {
-  return <div {...props} />;
-}
-
-const TimeSliderThumb: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeSliderThumb> = toContextComponent(
-  getTimeSliderThumbProps,
-  renderTimeSliderThumb,
-  'TimeSlider.Thumb',
-);
-
-// ============================================================================
-// POINTER COMPONENT
-// ============================================================================
-
-export function getTimeSliderPointerProps(props: React.ComponentProps<'div'>, context: TimeSliderState): TimeSliderRenderProps {
-  return {
-    'data-orientation': context.orientation,
-    ...props,
-    style: {
-      ...props.style,
-      [context.orientation === 'horizontal' ? 'width' : 'height']: 'var(--slider-pointer, 0%)',
-      [context.orientation === 'horizontal' ? 'height' : 'width']: '100%',
-      position: 'absolute' as const,
-    },
-  };
-}
-
-export function renderTimeSliderPointer(props: TimeSliderRenderProps): JSX.Element {
-  return <div {...props} />;
-}
-
-const TimeSliderPointer: ConnectedComponent<
-  React.ComponentProps<'div'>,
-  typeof renderTimeSliderPointer
-> = toContextComponent(getTimeSliderPointerProps, renderTimeSliderPointer, 'TimeSlider.Pointer');
-
-// ============================================================================
-// PROGRESS COMPONENT
-// ============================================================================
-
-export function getTimeSliderProgressProps(props: React.ComponentProps<'div'>, context: TimeSliderState): TimeSliderRenderProps {
-  return {
-    'data-orientation': context.orientation,
-    ...props,
-    style: {
-      ...props.style,
-      [context.orientation === 'horizontal' ? 'width' : 'height']: 'var(--slider-fill, 0%)',
-      [context.orientation === 'horizontal' ? 'height' : 'width']: '100%',
-      [context.orientation === 'horizontal' ? 'top' : 'bottom']: '0',
-      position: 'absolute' as const,
-    },
-  };
-}
-
-export function renderTimeSliderProgress(props: TimeSliderRenderProps): JSX.Element {
-  return <div {...props} />;
-}
-
-const TimeSliderProgress: ConnectedComponent<
-  React.ComponentProps<'div'>,
-  typeof renderTimeSliderProgress
-> = toContextComponent(getTimeSliderProgressProps, renderTimeSliderProgress, 'TimeSlider.Progress');
-
-// ============================================================================
-// EXPORTS
-// ============================================================================
-
-export const TimeSlider = Object.assign(
-  {},
-  {
-    Root: TimeSliderRoot,
-    Track: TimeSliderTrack,
-    Thumb: TimeSliderThumb,
-    Pointer: TimeSliderPointer,
-    Progress: TimeSliderProgress,
-  },
-) as {
-  Root: typeof TimeSliderRoot;
-  Track: typeof TimeSliderTrack;
-  Thumb: typeof TimeSliderThumb;
-  Pointer: typeof TimeSliderPointer;
-  Progress: typeof TimeSliderProgress;
-};
-
-export default TimeSlider;
diff --git a/packages/__tech-preview__/react/src/components/Tooltip.tsx b/packages/__tech-preview__/react/src/components/Tooltip.tsx
deleted file mode 100644
index 0ddcfcbe..00000000
--- a/packages/__tech-preview__/react/src/components/Tooltip.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import type { TooltipState as CoreTooltipState } from '@videojs/core-preview';
-import type { ReactNode } from 'react';
-import type { Prettify } from '../types';
-import type { ConnectedComponent } from '../utils/component-factory';
-import type { PopoverPopupProps, PopoverPopupRenderProps, PopoverPositionerProps, PopoverRootProps } from './Popover';
-
-import { Tooltip as CoreTooltip } from '@videojs/core-preview';
-import { cloneElement, useCallback, useId, useState } from 'react';
-import { toConnectedComponent, toContextComponent, useCore } from '../utils/component-factory';
-import { usePopoverPopupProps, usePopoverPositionerProps, usePopoverTriggerProps } from './Popover';
-
-type Placement = CoreTooltipState['placement'];
-
-export type TooltipState = Prettify<
-  CoreTooltipState & {
-    popupId: string | undefined;
-    updatePositioning: (placement: Placement, sideOffset: number, collisionPadding: number) => void;
-  }
->;
-
-// ============================================================================
-// ROOT COMPONENT
-// ============================================================================
-
-interface TooltipRootProps extends PopoverRootProps {
-  trackCursorAxis?: 'x';
-}
-
-export function useTooltipRootState(props: TooltipRootProps): TooltipState {
-  const { delay = 0, closeDelay = 0, trackCursorAxis } = props;
-  const [placement, setPlacement] = useState<Placement>('top');
-  const [sideOffset, setSideOffset] = useState(0);
-  const [collisionPadding, setCollisionPadding] = useState(0);
-  const uniqueId = useId();
-  const popupId = uniqueId.replace(/^:([^:]+):$/, '«$1»');
-
-  const coreState = useCore<CoreTooltip>(CoreTooltip, {
-    delay,
-    closeDelay,
-    placement,
-    sideOffset,
-    collisionPadding,
-    trackCursorAxis,
-  });
-
-  const updatePositioning = useCallback(
-    (newPlacement: Placement, newSideOffset: number, newCollisionPadding: number) => {
-      setPlacement(newPlacement);
-      setSideOffset(newSideOffset);
-      setCollisionPadding(newCollisionPadding);
-    },
-    [],
-  );
-
-  return {
-    ...coreState,
-    popupId,
-    updatePositioning,
-  };
-}
-
-export function useTooltipRootProps(props: TooltipRootProps, _state: TooltipState): { children: ReactNode } {
-  return {
-    children: props.children,
-  };
-}
-
-export function renderTooltipRoot(props: { children: ReactNode }): JSX.Element {
-  return <>{props.children}</>;
-}
-
-const TooltipRoot: ConnectedComponent<TooltipRootProps, typeof renderTooltipRoot> = toConnectedComponent(
-  useTooltipRootState,
-  useTooltipRootProps,
-  renderTooltipRoot,
-  'Tooltip.Root',
-);
-
-// ============================================================================
-// TRIGGER COMPONENT
-// ============================================================================
-
-interface TooltipTriggerProps {
-  children: ReactNode;
-}
-
-export function useTooltipTriggerProps(
-  props: TooltipTriggerProps,
-  context: TooltipState,
-): { child: JSX.Element; triggerProps: Record<string, any> } {
-  return usePopoverTriggerProps(props, context);
-}
-
-export function renderTooltipTrigger(props: { child: JSX.Element; triggerProps: Record<string, any> }): JSX.Element {
-  return cloneElement(props.child, props.triggerProps);
-}
-
-const TooltipTrigger: ConnectedComponent<TooltipTriggerProps, typeof renderTooltipTrigger> = toContextComponent(
-  useTooltipTriggerProps,
-  renderTooltipTrigger,
-  'Tooltip.Trigger',
-);
-
-// ============================================================================
-// POSITIONER COMPONENT
-// ============================================================================
-
-interface TooltipPositionerProps extends PopoverPositionerProps {}
-
-export function useTooltipPositionerProps(
-  props: TooltipPositionerProps,
-  context: TooltipState,
-): { children: ReactNode } {
-  return usePopoverPositionerProps(props, context);
-}
-
-export function renderTooltipPositioner(props: { children: ReactNode }): JSX.Element {
-  return <>{props.children}</>;
-}
-
-const TooltipPositioner: ConnectedComponent<TooltipPositionerProps, typeof renderTooltipPositioner>
-  = toContextComponent(useTooltipPositionerProps, renderTooltipPositioner, 'Tooltip.Positioner');
-
-// ============================================================================
-// POPUP COMPONENT
-// ============================================================================
-
-interface TooltipPopupProps extends PopoverPopupProps {}
-
-interface TooltipPopupRenderProps extends PopoverPopupRenderProps {}
-
-export function useTooltipPopupProps(props: TooltipPopupProps, context: TooltipState): TooltipPopupRenderProps {
-  return usePopoverPopupProps(props, context);
-}
-
-export function renderTooltipPopup(props: TooltipPopupRenderProps): JSX.Element {
-  return <div {...props} />;
-}
-
-const TooltipPopup: ConnectedComponent<TooltipPopupProps, typeof renderTooltipPopup> = toContextComponent(
-  useTooltipPopupProps,
-  renderTooltipPopup,
-  'Tooltip.Popup',
-);
-
-// ============================================================================
-// EXPORTS
-// ============================================================================
-
-export const Tooltip = Object.assign(
-  {},
-  {
-    Root: TooltipRoot,
-    Trigger: TooltipTrigger,
-    Positioner: TooltipPositioner,
-    Popup: TooltipPopup,
-  },
-) as {
-  Root: typeof TooltipRoot;
-  Trigger: typeof TooltipTrigger;
-  Positioner: typeof TooltipPositioner;
-  Popup: typeof TooltipPopup;
-};
-
-export default Tooltip;
diff --git a/packages/__tech-preview__/react/src/components/Video.tsx b/packages/__tech-preview__/react/src/components/Video.tsx
deleted file mode 100644
index dd3f3019..00000000
--- a/packages/__tech-preview__/react/src/components/Video.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import type {
-  CSSProperties,
-  DetailedHTMLProps,
-  PropsWithChildren,
-  VideoHTMLAttributes,
-} from 'react';
-
-import React, { forwardRef } from 'react';
-import { useMediaRef } from '@/store';
-
-export type VideoProps = PropsWithChildren<
-  DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement> & {
-    className?: string | undefined;
-    style?: CSSProperties | undefined;
-  }
->;
-
-/**
- * Video - A basic video component that works with native HTML5 video formats (MP4, WebM, etc.)
- * without using a playback engine. Use this for simple MP4 files. For HLS/DASH streaming, use the
- * regular Video component instead.
- *
- * This component connects to VideoProvider for play/pause state but sets the src directly on the
- * video element without going through HLS.js or other playback engines.
- *
- * @example
- * ```tsx
- * <VideoProvider>
- *   <MediaSkin>
- *     <Video src="video.mp4" />
- *   </MediaSkin>
- * </VideoProvider>
- * ```
- */
-export const Video: React.ForwardRefExoticComponent<
-  VideoProps & React.RefAttributes<HTMLVideoElement>
-> = forwardRef<HTMLVideoElement, VideoProps>(
-  ({ children, ...props }, _ref) => {
-    const mediaRefCallback = useMediaRef();
-
-    return (
-      <video {...props} ref={mediaRefCallback}>
-        {children}
-      </video>
-    );
-  },
-);
-
-Video.displayName = 'Video';
-
-export default Video;
diff --git a/packages/__tech-preview__/react/src/components/VolumeSlider.tsx b/packages/__tech-preview__/react/src/components/VolumeSlider.tsx
deleted file mode 100644
index 5a1e9765..00000000
--- a/packages/__tech-preview__/react/src/components/VolumeSlider.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import type { Prettify } from '../types';
-import type { ConnectedComponent } from '../utils/component-factory';
-
-import { VolumeSlider as CoreVolumeSlider } from '@videojs/core-preview';
-import { volumeSliderStateDefinition } from '@videojs/core-preview/store';
-import { shallowEqual } from '@videojs/utils-preview';
-import { useMemo } from 'react';
-import { useMediaSelector, useMediaStore } from '@/store';
-import { toConnectedComponent, toContextComponent, useCore } from '../utils/component-factory';
-import { useComposedRefs } from '../utils/use-composed-refs';
-
-export type VolumeSliderState = Prettify<ReturnType<typeof useCore<CoreVolumeSlider>>> & {
-  orientation: 'horizontal' | 'vertical';
-};
-
-export interface VolumeSliderProps extends React.ComponentPropsWithRef<'div'> {
-  orientation?: 'horizontal' | 'vertical';
-}
-
-interface VolumeSliderRenderProps extends React.ComponentProps<'div'> {
-  'data-orientation'?: 'horizontal' | 'vertical';
-  'data-muted'?: boolean;
-  'data-volume-level'?: string;
-  'data-volume'?: number;
-}
-
-// ============================================================================
-// ROOT COMPONENT
-// ============================================================================
-
-export function useVolumeSliderRootState(props?: VolumeSliderProps): VolumeSliderState {
-  const { orientation = 'horizontal' } = props ?? {};
-  const mediaStore = useMediaStore();
-  const mediaState = useMediaSelector(volumeSliderStateDefinition.stateTransform, shallowEqual);
-  const mediaMethods = useMemo(() => volumeSliderStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);
-  const coreState = useCore(CoreVolumeSlider, { ...mediaState, ...mediaMethods });
-  return {
-    ...coreState,
-    orientation,
-  };
-}
-
-export function useVolumeSliderRootProps(props: VolumeSliderProps, state: VolumeSliderState): VolumeSliderRenderProps {
-  const { children, className, id, style, orientation = 'horizontal', ref } = props;
-  const composedRef = useComposedRefs(ref, state._setRootElement);
-
-  return {
-    ref: composedRef,
-    id,
-    role: 'slider',
-    tabIndex: 0,
-    'aria-label': 'Volume',
-    'aria-valuemin': 0,
-    'aria-valuemax': 100,
-    'aria-valuenow': Math.round(state.volume * 100),
-    'aria-valuetext': state._volumeText,
-    'aria-orientation': orientation,
-    'data-orientation': orientation,
-    'data-muted': state.muted,
-    'data-volume-level': state.volumeLevel,
-    'data-volume': state.volume,
-    className,
-    style: {
-      ...style,
-      '--slider-fill': `${state._fillWidth.toFixed(3)}%`,
-      '--slider-pointer': `${(state._pointerWidth * 100).toFixed(3)}%`,
-    } as React.CSSProperties,
-    children,
-  };
-}
-
-export function renderVolumeSliderRoot(props: VolumeSliderRenderProps): JSX.Element {
-  return <div {...props} />;
-}
-
-const VolumeSliderRoot: ConnectedComponent<VolumeSliderProps, typeof renderVolumeSliderRoot> = toConnectedComponent(
-  useVolumeSliderRootState,
-  useVolumeSliderRootProps,
-  renderVolumeSliderRoot,
-  'VolumeSlider.Root',
-);
-
-// ============================================================================
-// TRACK COMPONENT
-// ============================================================================
-
-export function useVolumeSliderTrackProps(props: React.ComponentProps<'div'>, context: VolumeSliderState): VolumeSliderRenderProps {
-  return {
-    ref: context._setTrackElement,
-    'data-orientation': context.orientation,
-    ...props,
-    style: {
-      ...props.style,
-      [context.orientation === 'horizontal' ? 'width' : 'height']: '100%',
-    },
-  };
-}
-
-export function renderVolumeSliderTrack(props: VolumeSliderRenderProps): JSX.Element {
-  return <div {...props} />;
-}
-
-const VolumeSliderTrack: ConnectedComponent<
-  React.ComponentProps<'div'>,
-  typeof renderVolumeSliderTrack
-> = toContextComponent(useVolumeSliderTrackProps, renderVolumeSliderTrack, 'VolumeSlider.Track');
-
-// ============================================================================
-// THUMB COMPONENT
-// ============================================================================
-
-export function getVolumeSliderThumbProps(props: React.ComponentProps<'div'>, context: VolumeSliderState): VolumeSliderRenderProps {
-  return {
-    'data-orientation': context.orientation,
-    ...props,
-    style: {
-      ...props.style,
-      [context.orientation === 'horizontal' ? 'insetInlineStart' : 'insetBlockEnd']: 'var(--slider-fill)',
-      [context.orientation === 'horizontal' ? 'top' : 'left']: '50%',
-      translate: context.orientation === 'horizontal' ? '-50% -50%' : '-50% 50%',
-      position: 'absolute' as const,
-    },
-  };
-}
-
-export function renderVolumeSliderThumb(props: VolumeSliderRenderProps): JSX.Element {
-  return <div {...props} />;
-}
-
-const VolumeSliderThumb: ConnectedComponent<
-  React.ComponentProps<'div'>,
-  typeof renderVolumeSliderThumb
-> = toContextComponent(getVolumeSliderThumbProps, renderVolumeSliderThumb, 'VolumeSlider.Thumb');
-
-// ============================================================================
-// PROGRESS COMPONENT
-// ============================================================================
-
-export function getVolumeSliderProgressProps(props: React.ComponentProps<'div'>, context: VolumeSliderState): VolumeSliderRenderProps {
-  return {
-    'data-orientation': context.orientation,
-    ...props,
-    style: {
-      ...props.style,
-      [context.orientation === 'horizontal' ? 'width' : 'height']: 'var(--slider-fill, 0%)',
-      [context.orientation === 'horizontal' ? 'height' : 'width']: '100%',
-      [context.orientation === 'horizontal' ? 'top' : 'bottom']: '0',
-      position: 'absolute' as const,
-    },
-  };
-}
-
-export function renderVolumeSliderProgress(props: VolumeSliderRenderProps): JSX.Element {
-  return <div {...props} />;
-}
-
-const VolumeSliderProgress: ConnectedComponent<
-  React.ComponentProps<'div'>,
-  typeof renderVolumeSliderProgress
-> = toContextComponent(getVolumeSliderProgressProps, renderVolumeSliderProgress, 'VolumeSlider.Progress');
-
-// ============================================================================
-// EXPORTS
-// ============================================================================
-
-export const VolumeSlider = Object.assign(
-  {},
-  {
-    Root: VolumeSliderRoot,
-    Track: VolumeSliderTrack,
-    Thumb: VolumeSliderThumb,
-    Progress: VolumeSliderProgress,
-  },
-) as {
-  Root: typeof VolumeSliderRoot;
-  Track: typeof VolumeSliderTrack;
-  Thumb: typeof VolumeSliderThumb;
-  Progress: typeof VolumeSliderProgress;
-};
-
-export default VolumeSlider;
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/FullscreenEnter.tsx b/packages/__tech-preview__/react/src/icons/generated-icons/FullscreenEnter.tsx
deleted file mode 100644
index 8696d46f..00000000
--- a/packages/__tech-preview__/react/src/icons/generated-icons/FullscreenEnter.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * @fileoverview Auto-generated React component from SVG
- *
- * This file is automatically generated by SVGR from SVG files located in:
- * packages/icons/assets/
- *
- * DO NOT EDIT THIS FILE DIRECTLY.
- *
- * To modify this icon:
- * 1. Edit the corresponding SVG file in packages/icons/assets/
- * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
- *
- * @generated
- */
-import type { IconProps } from '../types';
-const SvgFullscreenEnter = ({
-  color = 'currentColor',
-  ...props
-}: IconProps): JSX.Element => <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} viewBox="0 0 18 18" fill={color} aria-hidden="true" {...props}><path d="M9.57,3.617c-.156-.375-.519-.617-.924-.617H4c-.552,0-1,.449-1,1v4.646c0,.406,.242,.769,.618,.924,.124,.051,.255,.076,.383,.076,.261,0,.515-.102,.706-.293l4.647-4.647c.286-.287,.371-.715,.216-1.089Z" className="arrow-1" /><path d="M14.382,8.429c-.377-.156-.804-.068-1.089,.217l-4.647,4.647c-.286,.287-.371,.715-.216,1.089,.156,.375,.519,.617,.924,.617h4.646c.552,0,1-.449,1-1v-4.646c0-.406-.242-.769-.618-.924Z" className="arrow-2" /></svg>;
-export default SvgFullscreenEnter;
\ No newline at end of file
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/FullscreenEnterAlt.tsx b/packages/__tech-preview__/react/src/icons/generated-icons/FullscreenEnterAlt.tsx
deleted file mode 100644
index 467633e2..00000000
--- a/packages/__tech-preview__/react/src/icons/generated-icons/FullscreenEnterAlt.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * @fileoverview Auto-generated React component from SVG
- *
- * This file is automatically generated by SVGR from SVG files located in:
- * packages/icons/assets/
- *
- * DO NOT EDIT THIS FILE DIRECTLY.
- *
- * To modify this icon:
- * 1. Edit the corresponding SVG file in packages/icons/assets/
- * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
- *
- * @generated
- */
-import type { IconProps } from '../types';
-const SvgFullscreenEnterAlt = ({
-  color = 'currentColor',
-  ...props
-}: IconProps): JSX.Element => <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} viewBox="0 0 18 18" fill={color} aria-hidden="true" {...props}><path d="M15.25 2h.017q.03 0 .06.004za.75.75 0 0 1 .599.298l-.069-.078a.75.75 0 0 1 .22.53v4.5a.75.75 0 1 1-1.5 0V4.56l-3.22 3.22a.75.75 0 0 1-1.06-1.06l3.218-3.22H10.75a.75.75 0 0 1-.743-.648L10 2.75a.75.75 0 0 1 .75-.75z" className="arrow-1" /><path d="M2.75 10a.75.75 0 0 1 .75.75v2.688l3.22-3.218a.75.75 0 0 1 1.06 1.06L4.56 14.5h2.69a.75.75 0 0 1 .743.648L8 15.25a.75.75 0 0 1-.75.75H2.722l-.046-.004.074.004a.75.75 0 0 1-.599-.298l.069.078a.75.75 0 0 1-.22-.53v-4.5a.75.75 0 0 1 .75-.75" className="arrow-2" /></svg>;
-export default SvgFullscreenEnterAlt;
\ No newline at end of file
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/FullscreenExit.tsx b/packages/__tech-preview__/react/src/icons/generated-icons/FullscreenExit.tsx
deleted file mode 100644
index 89429670..00000000
--- a/packages/__tech-preview__/react/src/icons/generated-icons/FullscreenExit.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * @fileoverview Auto-generated React component from SVG
- *
- * This file is automatically generated by SVGR from SVG files located in:
- * packages/icons/assets/
- *
- * DO NOT EDIT THIS FILE DIRECTLY.
- *
- * To modify this icon:
- * 1. Edit the corresponding SVG file in packages/icons/assets/
- * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
- *
- * @generated
- */
-import type { IconProps } from '../types';
-const SvgFullscreenExit = ({
-  color = 'currentColor',
-  ...props
-}: IconProps): JSX.Element => <svg xmlns="http://www.w3.org/2000/svg" height={18} width={18} viewBox="0 0 18 18" fill={color} aria-hidden="true" {...props}><path d="M7.883,1.93c-.375-.157-.803-.07-1.09,.217L2.146,6.793c-.287,.287-.372,.715-.217,1.09s.518,.617,.924,.617H7.5c.551,0,1-.449,1-1V2.854c0-.406-.242-.769-.617-.924Z" className="arrow-1" /><path d="M15.146,9.5h-4.646c-.551,0-1,.449-1,1v4.646c0,.406,.242,.769,.617,.924,.125,.052,.255,.077,.384,.077,.26,0,.514-.102,.706-.293l4.646-4.646c.287-.287,.372-.715,.217-1.09s-.518-.617-.924-.617Z" className="arrow-2" /></svg>;
-export default SvgFullscreenExit;
\ No newline at end of file
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/FullscreenExitAlt.tsx b/packages/__tech-preview__/react/src/icons/generated-icons/FullscreenExitAlt.tsx
deleted file mode 100644
index 6df82e0f..00000000
--- a/packages/__tech-preview__/react/src/icons/generated-icons/FullscreenExitAlt.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * @fileoverview Auto-generated React component from SVG
- *
- * This file is automatically generated by SVGR from SVG files located in:
- * packages/icons/assets/
- *
- * DO NOT EDIT THIS FILE DIRECTLY.
- *
- * To modify this icon:
- * 1. Edit the corresponding SVG file in packages/icons/assets/
- * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
- *
- * @generated
- */
-import type { IconProps } from '../types';
-const SvgFullscreenExitAlt = ({
-  color = 'currentColor',
-  ...props
-}: IconProps): JSX.Element => <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} viewBox="0 0 18 18" fill={color} aria-hidden="true" {...props}><path d="M10.75 2a.75.75 0 0 1 .75.75v2.688l3.22-3.218a.75.75 0 0 1 1.06 1.06L12.56 6.5h2.69a.75.75 0 0 1 .743.648L16 7.25a.75.75 0 0 1-.75.75h-4.528l-.046-.004.074.004a.75.75 0 0 1-.599-.298l.069.078a.75.75 0 0 1-.22-.53v-4.5a.75.75 0 0 1 .75-.75" className="arrow-1" /><path d="M7.25 10h.017q.03 0 .06.004za.75.75 0 0 1 .599.298l-.069-.078a.75.75 0 0 1 .22.53v4.5a.75.75 0 1 1-1.5 0v-2.69l-3.22 3.22a.75.75 0 0 1-1.06-1.06l3.218-3.22H2.75a.75.75 0 0 1-.743-.648L2 10.75a.75.75 0 0 1 .75-.75z" className="arrow-2" /></svg>;
-export default SvgFullscreenExitAlt;
\ No newline at end of file
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/Pause.tsx b/packages/__tech-preview__/react/src/icons/generated-icons/Pause.tsx
deleted file mode 100644
index 5386aae8..00000000
--- a/packages/__tech-preview__/react/src/icons/generated-icons/Pause.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * @fileoverview Auto-generated React component from SVG
- *
- * This file is automatically generated by SVGR from SVG files located in:
- * packages/icons/assets/
- *
- * DO NOT EDIT THIS FILE DIRECTLY.
- *
- * To modify this icon:
- * 1. Edit the corresponding SVG file in packages/icons/assets/
- * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
- *
- * @generated
- */
-import type { IconProps } from '../types';
-const SvgPause = ({
-  color = 'currentColor',
-  ...props
-}: IconProps): JSX.Element => <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} viewBox="0 0 18 18" fill={color} aria-hidden="true" {...props}><rect x={2} y={2} width={5} height={14} rx={1.75} ry={1.75} /><rect x={11} y={2} width={5} height={14} rx={1.75} ry={1.75} /></svg>;
-export default SvgPause;
\ No newline at end of file
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/Play.tsx b/packages/__tech-preview__/react/src/icons/generated-icons/Play.tsx
deleted file mode 100644
index d7208ddc..00000000
--- a/packages/__tech-preview__/react/src/icons/generated-icons/Play.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * @fileoverview Auto-generated React component from SVG
- *
- * This file is automatically generated by SVGR from SVG files located in:
- * packages/icons/assets/
- *
- * DO NOT EDIT THIS FILE DIRECTLY.
- *
- * To modify this icon:
- * 1. Edit the corresponding SVG file in packages/icons/assets/
- * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
- *
- * @generated
- */
-import type { IconProps } from '../types';
-const SvgPlay = ({
-  color = 'currentColor',
-  ...props
-}: IconProps): JSX.Element => <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} viewBox="0 0 18 18" fill={color} aria-hidden="true" {...props}><path d="M15.1,7.478L5.608,2.222c-.553-.306-1.206-.297-1.749,.023-.538,.317-.859,.877-.859,1.499V14.256c0,.622,.321,1.182,.859,1.499,.279,.164,.586,.247,.895,.247,.293,0,.586-.075,.854-.223l9.491-5.256c.556-.307,.901-.891,.901-1.522s-.345-1.215-.9-1.522Z" /></svg>;
-export default SvgPlay;
\ No newline at end of file
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/Spinner.tsx b/packages/__tech-preview__/react/src/icons/generated-icons/Spinner.tsx
deleted file mode 100644
index 08c0f034..00000000
--- a/packages/__tech-preview__/react/src/icons/generated-icons/Spinner.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * @fileoverview Auto-generated React component from SVG
- *
- * This file is automatically generated by SVGR from SVG files located in:
- * packages/icons/assets/
- *
- * DO NOT EDIT THIS FILE DIRECTLY.
- *
- * To modify this icon:
- * 1. Edit the corresponding SVG file in packages/icons/assets/
- * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
- *
- * @generated
- */
-import type { IconProps } from '../types';
-const SvgSpinner = ({
-  color = 'currentColor',
-  ...props
-}: IconProps): JSX.Element => <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} viewBox="0 0 18 18" fill={color} aria-hidden="true" {...props}><rect width={2} height={5} x={8} y={0.5} rx={1} opacity={0.5}><animate attributeName="opacity" values="1;0" dur="1s" begin="0s" repeatCount="indefinite" calcMode="linear" /></rect><rect width={2} height={5} x={12.243} y={2.257} rx={1} transform="rotate(45 13.243 4.757)" opacity={0.45}><animate attributeName="opacity" values="1;0" dur="1s" begin="0.125s" repeatCount="indefinite" calcMode="linear" /></rect><rect width={5} height={2} x={12.5} y={8} rx={1} opacity={0.4}><animate attributeName="opacity" values="1;0" dur="1s" begin="0.25s" repeatCount="indefinite" calcMode="linear" /></rect><rect width={5} height={2} x={10.743} y={12.243} rx={1} transform="rotate(45 13.243 13.243)" opacity={0.35}><animate attributeName="opacity" values="1;0" dur="1s" begin="0.375s" repeatCount="indefinite" calcMode="linear" /></rect><rect width={2} height={5} x={8} y={12.5} rx={1} opacity={0.3}><animate attributeName="opacity" values="1;0" dur="1s" begin="0.5s" repeatCount="indefinite" calcMode="linear" /></rect><rect width={2} height={5} x={3.757} y={10.743} rx={1} transform="rotate(45 4.757 13.243)" opacity={0.25}><animate attributeName="opacity" values="1;0" dur="1s" begin="0.625s" repeatCount="indefinite" calcMode="linear" /></rect><rect width={5} height={2} x={0.5} y={8} rx={1} opacity={0.15}><animate attributeName="opacity" values="1;0" dur="1s" begin="0.75s" repeatCount="indefinite" calcMode="linear" /></rect><rect width={5} height={2} x={2.257} y={3.757} fillRule="nonzero" rx={1} transform="rotate(45 4.757 4.757)" opacity={0.1}><animate attributeName="opacity" values="1;0" dur="1s" begin="0.875s" repeatCount="indefinite" calcMode="linear" /></rect></svg>;
-export default SvgSpinner;
\ No newline at end of file
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/VolumeHigh.tsx b/packages/__tech-preview__/react/src/icons/generated-icons/VolumeHigh.tsx
deleted file mode 100644
index 0e192b75..00000000
--- a/packages/__tech-preview__/react/src/icons/generated-icons/VolumeHigh.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * @fileoverview Auto-generated React component from SVG
- *
- * This file is automatically generated by SVGR from SVG files located in:
- * packages/icons/assets/
- *
- * DO NOT EDIT THIS FILE DIRECTLY.
- *
- * To modify this icon:
- * 1. Edit the corresponding SVG file in packages/icons/assets/
- * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
- *
- * @generated
- */
-import type { IconProps } from '../types';
-const SvgVolumeHigh = ({
-  color = 'currentColor',
-  ...props
-}: IconProps): JSX.Element => <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} viewBox="0 0 18 18" fill={color} aria-hidden="true" {...props}><path d="M15.5999996,3.3 C15.1999996,2.9 14.5999996,2.9 14.1999996,3.3 C13.7999996,3.7 13.7999996,4.3 14.1999996,4.7 C15.3999996,5.9 15.9999996,7.4 15.9999996,9 C15.9999996,10.6 15.3999996,12.1 14.1999996,13.3 C13.7999996,13.7 13.7999996,14.3 14.1999996,14.7 C14.3999996,14.9 14.6999996,15 14.8999996,15 C15.1999996,15 15.3999996,14.9 15.5999996,14.7 C17.0999996,13.2 17.9999996,11.2 17.9999996,9 C17.9999996,6.8 17.0999996,4.8 15.5999996,3.3 L15.5999996,3.3 Z" /><path d="M11.2819745,5.28197449 C10.9060085,5.65794047 10.9060085,6.22188944 11.2819745,6.59785542 C12.0171538,7.33303477 12.2772954,8.05605449 12.2772954,9 C12.2772954,9.93588462 11.851678,10.9172014 11.2819745,11.4869049 C10.9060085,11.8628709 10.9060085,12.4268199 11.2819745,12.8027859 C11.4271642,12.9479755 11.9176724,13.0649528 12.2998149,12.9592565 C12.4124479,12.9281035 12.5156669,12.8776063 12.5978555,12.8027859 C13.773371,11.732654 14.1311161,10.1597914 14.1312524,9 C14.1312524,8.8299555 14.1286311,8.66015647 14.119665,8.4897429 C14.0674781,7.49784946 13.8010171,6.48513613 12.5978554,5.28197449 C12.2218894,4.9060085 11.6579405,4.9060085 11.2819745,5.28197449 Z M3.78571429,6.00820648 L0.714285714,6.00820648 C0.285714286,6.00820648 0,6.30901277 0,6.76022222 L0,11.2723167 C0,11.7235261 0.285714286,12.0243324 0.714285714,12.0243324 L3.78571429,12.0243324 L7.85714286,15.8819922 C8.35714286,16.1827985 9,15.8819922 9,15.2803796 L9,2.75215925 C9,2.15054666 8.35714286,1.77453879 7.85714286,2.15054666 L3.78571429,6.00820648 Z" /></svg>;
-export default SvgVolumeHigh;
\ No newline at end of file
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/VolumeLow.tsx b/packages/__tech-preview__/react/src/icons/generated-icons/VolumeLow.tsx
deleted file mode 100644
index ea3e997d..00000000
--- a/packages/__tech-preview__/react/src/icons/generated-icons/VolumeLow.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * @fileoverview Auto-generated React component from SVG
- *
- * This file is automatically generated by SVGR from SVG files located in:
- * packages/icons/assets/
- *
- * DO NOT EDIT THIS FILE DIRECTLY.
- *
- * To modify this icon:
- * 1. Edit the corresponding SVG file in packages/icons/assets/
- * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
- *
- * @generated
- */
-import type { IconProps } from '../types';
-const SvgVolumeLow = ({
-  color = 'currentColor',
-  ...props
-}: IconProps): JSX.Element => <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} viewBox="0 0 18 18" fill={color} aria-hidden="true" {...props}><path d="M11.2819745 5.28197449C10.9060085 5.65794047 10.9060085 6.22188944 11.2819745 6.59785542 12.0171538 7.33303477 12.2772954 8.05605449 12.2772954 9 12.2772954 9.93588462 11.851678 10.9172014 11.2819745 11.4869049 10.9060085 11.8628709 10.9060085 12.4268199 11.2819745 12.8027859 11.4271642 12.9479755 11.9176724 13.0649528 12.2998149 12.9592565 12.4124479 12.9281035 12.5156669 12.8776063 12.5978555 12.8027859 13.773371 11.732654 14.1311161 10.1597914 14.1312524 9 14.1312524 8.8299555 14.1286311 8.66015647 14.119665 8.4897429 14.0674781 7.49784946 13.8010171 6.48513613 12.5978554 5.28197449 12.2218894 4.9060085 11.6579405 4.9060085 11.2819745 5.28197449ZM3.78571429 6.00820648.714285714 6.00820648C.285714286 6.00820648 0 6.30901277 0 6.76022222L0 11.2723167C0 11.7235261.285714286 12.0243324.714285714 12.0243324L3.78571429 12.0243324 7.85714286 15.8819922C8.35714286 16.1827985 9 15.8819922 9 15.2803796L9 2.75215925C9 2.15054666 8.35714286 1.77453879 7.85714286 2.15054666L3.78571429 6.00820648Z" /></svg>;
-export default SvgVolumeLow;
\ No newline at end of file
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/VolumeOff.tsx b/packages/__tech-preview__/react/src/icons/generated-icons/VolumeOff.tsx
deleted file mode 100644
index 52fd6711..00000000
--- a/packages/__tech-preview__/react/src/icons/generated-icons/VolumeOff.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * @fileoverview Auto-generated React component from SVG
- *
- * This file is automatically generated by SVGR from SVG files located in:
- * packages/icons/assets/
- *
- * DO NOT EDIT THIS FILE DIRECTLY.
- *
- * To modify this icon:
- * 1. Edit the corresponding SVG file in packages/icons/assets/
- * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
- *
- * @generated
- */
-import type { IconProps } from '../types';
-const SvgVolumeOff = ({
-  color = 'currentColor',
-  ...props
-}: IconProps): JSX.Element => <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} viewBox="0 0 18 18" fill={color} aria-hidden="true" {...props}><path d="M12.732233,5.81801948 L14.5,7.586 L16.267767,5.81801948 C16.6582912,5.42749519 17.2914562,5.42749519 17.6819805,5.81801948 C18.0725048,6.20854378 18.0725048,6.84170876 17.6819805,7.23223305 L15.914,9 L17.6819805,10.767767 C18.0725048,11.1582912 18.0725048,11.7914562 17.6819805,12.1819805 C17.2914562,12.5725048 16.6582912,12.5725048 16.267767,12.1819805 L14.5,10.414 L12.732233,12.1819805 C12.3417088,12.5725048 11.7085438,12.5725048 11.3180195,12.1819805 C10.9274952,11.7914562 10.9274952,11.1582912 11.3180195,10.767767 L13.085,9 L11.3180195,7.23223305 C10.9274952,6.84170876 10.9274952,6.20854378 11.3180195,5.81801948 C11.7085438,5.42749519 12.3417088,5.42749519 12.732233,5.81801948 Z M3.78571429,6.00820648 L0.714285714,6.00820648 C0.285714286,6.00820648 0,6.30901277 0,6.76022222 L0,11.2723167 C0,11.7235261 0.285714286,12.0243324 0.714285714,12.0243324 L3.78571429,12.0243324 L7.85714286,15.8819922 C8.35714286,16.1827985 9,15.8819922 9,15.2803796 L9,2.75215925 C9,2.15054666 8.35714286,1.77453879 7.85714286,2.15054666 L3.78571429,6.00820648 Z" /></svg>;
-export default SvgVolumeOff;
\ No newline at end of file
diff --git a/packages/__tech-preview__/react/src/icons/generated-icons/index.ts b/packages/__tech-preview__/react/src/icons/generated-icons/index.ts
deleted file mode 100644
index 677234d4..00000000
--- a/packages/__tech-preview__/react/src/icons/generated-icons/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * @fileoverview Auto-generated index file for React icon components
- *
- * This file is automatically generated by SVGR from SVG files located in:
- * packages/icons/assets/
- *
- * DO NOT EDIT THIS FILE DIRECTLY.
- *
- * To modify icons or add new ones:
- * 1. Add/edit SVG files in packages/core/icons/assets/
- * 2. Run `pnpm -F react generate:icons` in this package to regenerate components
- *
- * @generated
- */
-export { default as FullscreenEnterAltIcon } from "./FullscreenEnterAlt";
-export { default as FullscreenEnterIcon } from "./FullscreenEnter";
-export { default as FullscreenExitAltIcon } from "./FullscreenExitAlt";
-export { default as FullscreenExitIcon } from "./FullscreenExit";
-export { default as PauseIcon } from "./Pause";
-export { default as PlayIcon } from "./Play";
-export { default as SpinnerIcon } from "./Spinner";
-export { default as VolumeHighIcon } from "./VolumeHigh";
-export { default as VolumeLowIcon } from "./VolumeLow";
-export { default as VolumeOffIcon } from "./VolumeOff";
diff --git a/packages/__tech-preview__/react/src/icons/index.ts b/packages/__tech-preview__/react/src/icons/index.ts
deleted file mode 100644
index 671b2284..00000000
--- a/packages/__tech-preview__/react/src/icons/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './generated-icons';
-export type { IconProps } from './types';
diff --git a/packages/__tech-preview__/react/src/icons/types.d.ts b/packages/__tech-preview__/react/src/icons/types.d.ts
deleted file mode 100644
index abd7a3e9..00000000
--- a/packages/__tech-preview__/react/src/icons/types.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { SVGAttributes } from 'react';
-
-export interface IconProps extends SVGAttributes<SVGElement> {
-  children?: never;
-  color?: string;
-}
diff --git a/packages/__tech-preview__/react/src/index.ts b/packages/__tech-preview__/react/src/index.ts
deleted file mode 100644
index cfa69134..00000000
--- a/packages/__tech-preview__/react/src/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client';
-
-export { CurrentTimeDisplay, useCurrentTimeDisplayState } from './components/CurrentTimeDisplay';
-export { DurationDisplay } from './components/DurationDisplay';
-export { FullscreenButton, useFullscreenButtonState } from './components/FullscreenButton';
-export { HlsVideo } from './components/HlsVideo';
-export { MediaContainer, useMediaContainerRef } from './components/MediaContainer';
-export { MuteButton, useMuteButtonState } from './components/MuteButton';
-export { PlayButton, usePlayButtonState } from './components/PlayButton';
-export { Popover } from './components/Popover';
-export { PreviewTimeDisplay } from './components/PreviewTimeDisplay';
-export { TimeSlider, useTimeSliderRootState } from './components/TimeSlider';
-export { Tooltip } from './components/Tooltip';
-export { Video } from './components/Video';
-export { useVolumeSliderRootState, VolumeSlider } from './components/VolumeSlider';
-export * from './skins';
-export * from '@/store';
diff --git a/packages/__tech-preview__/react/src/media/index.ts b/packages/__tech-preview__/react/src/media/index.ts
deleted file mode 100644
index c8cbae7a..00000000
--- a/packages/__tech-preview__/react/src/media/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { AudioElement, createMediaElementAdapter, VideoElement } from './media-elements';
-export type { MediaElementLike, MediaElementProps, MediaElementRef } from './media-elements';
diff --git a/packages/__tech-preview__/react/src/media/media-elements.tsx b/packages/__tech-preview__/react/src/media/media-elements.tsx
deleted file mode 100644
index 7e96252a..00000000
--- a/packages/__tech-preview__/react/src/media/media-elements.tsx
+++ /dev/null
@@ -1,395 +0,0 @@
-import type { CSSProperties, ForwardRefExoticComponent } from 'react';
-
-import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
-
-interface MediaElementLike {
-  currentTime: number;
-  duration: number;
-  paused: boolean;
-  ended: boolean;
-  volume: number;
-  muted: boolean;
-  playbackRate: number;
-  readyState: number;
-  networkState: number;
-  play: () => Promise<void>;
-  pause: () => void;
-  load: () => void;
-}
-
-function createMediaElementAdapter(element: HTMLMediaElement): MediaElementLike {
-  return {
-    get currentTime() {
-      return element.currentTime;
-    },
-    set currentTime(value: number) {
-      element.currentTime = value;
-    },
-    get duration() {
-      return element.duration;
-    },
-    get paused() {
-      return element.paused;
-    },
-    get ended() {
-      return element.ended;
-    },
-    get volume() {
-      return element.volume;
-    },
-    set volume(value: number) {
-      element.volume = value;
-    },
-    get muted() {
-      return element.muted;
-    },
-    set muted(value: boolean) {
-      element.muted = value;
-    },
-    get playbackRate() {
-      return element.playbackRate;
-    },
-    set playbackRate(value: number) {
-      element.playbackRate = value;
-    },
-    get readyState() {
-      return element.readyState;
-    },
-    get networkState() {
-      return element.networkState;
-    },
-    play: () => element.play(),
-    pause: () => element.pause(),
-    load: () => element.load(),
-  };
-}
-
-class NativePlaybackEngine {
-  attach(_element: HTMLMediaElement) {
-    // Placeholder implementation
-  }
-
-  detach() {
-    // Placeholder implementation
-  }
-
-  load(_source: { src: string; type: string }) {
-    // Placeholder implementation
-  }
-}
-
-export interface MediaElementProps {
-  src?: string;
-  controls?: boolean;
-  autoplay?: boolean;
-  preload?: 'none' | 'metadata' | 'auto';
-  muted?: boolean;
-  loop?: boolean;
-  playsInline?: boolean;
-  crossOrigin?: 'anonymous' | 'use-credentials';
-  onPlay?: () => void;
-  onPause?: () => void;
-  onTimeUpdate?: (currentTime: number) => void;
-  onLoadedMetadata?: (duration: number) => void;
-  onVolumeChange?: (volume: number, muted: boolean) => void;
-  onEnded?: () => void;
-  className?: string;
-  style?: CSSProperties;
-}
-
-export interface MediaElementRef extends MediaElementLike {
-  element: HTMLVideoElement | HTMLAudioElement | null;
-}
-
-export const VideoElement: ForwardRefExoticComponent<MediaElementProps> = forwardRef<
-  MediaElementRef,
-  MediaElementProps
->(
-  (
-    {
-      src,
-      controls = false,
-      autoplay = false,
-      preload = 'metadata',
-      muted = false,
-      loop = false,
-      playsInline = true,
-      crossOrigin,
-      onPlay,
-      onPause,
-      onTimeUpdate,
-      onLoadedMetadata,
-      onVolumeChange,
-      onEnded,
-      className,
-      style,
-    },
-    ref,
-  ) => {
-    const videoRef = useRef<HTMLVideoElement>(null);
-    const engineRef = useRef(new NativePlaybackEngine());
-    const adapterRef = useRef<MediaElementLike | null>(null);
-
-    useEffect(() => {
-      const video = videoRef.current;
-      const engine = engineRef.current;
-
-      if (!video) return;
-
-      engine.attach(video);
-      adapterRef.current = createMediaElementAdapter(video);
-
-      const handlePlay = () => onPlay?.();
-      const handlePause = () => onPause?.();
-      const handleTimeUpdate = () => onTimeUpdate?.(video.currentTime);
-      const handleLoadedMetadata = () => onLoadedMetadata?.(video.duration);
-      const handleVolumeChange = () => onVolumeChange?.(video.volume, video.muted);
-      const handleEnded = () => onEnded?.();
-
-      video.addEventListener('play', handlePlay);
-      video.addEventListener('pause', handlePause);
-      video.addEventListener('timeupdate', handleTimeUpdate);
-      video.addEventListener('loadedmetadata', handleLoadedMetadata);
-      video.addEventListener('volumechange', handleVolumeChange);
-      video.addEventListener('ended', handleEnded);
-
-      return () => {
-        video.removeEventListener('play', handlePlay);
-        video.removeEventListener('pause', handlePause);
-        video.removeEventListener('timeupdate', handleTimeUpdate);
-        video.removeEventListener('loadedmetadata', handleLoadedMetadata);
-        video.removeEventListener('volumechange', handleVolumeChange);
-        video.removeEventListener('ended', handleEnded);
-        engine.detach();
-      };
-    }, [onPlay, onPause, onTimeUpdate, onLoadedMetadata, onVolumeChange, onEnded]);
-
-    useEffect(() => {
-      if (src && engineRef.current) {
-        engineRef.current.load({ src, type: 'video/mp4' });
-      }
-    }, [src]);
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        element: videoRef.current,
-        get currentTime() {
-          return adapterRef.current?.currentTime ?? 0;
-        },
-        set currentTime(value: number) {
-          if (adapterRef.current) {
-            adapterRef.current.currentTime = value;
-          }
-        },
-        get duration() {
-          return adapterRef.current?.duration ?? 0;
-        },
-        get paused() {
-          return adapterRef.current?.paused ?? true;
-        },
-        get ended() {
-          return adapterRef.current?.ended ?? false;
-        },
-        get volume() {
-          return adapterRef.current?.volume ?? 1;
-        },
-        set volume(value: number) {
-          if (adapterRef.current) {
-            adapterRef.current.volume = value;
-          }
-        },
-        get muted() {
-          return adapterRef.current?.muted ?? false;
-        },
-        set muted(value: boolean) {
-          if (adapterRef.current) {
-            adapterRef.current.muted = value;
-          }
-        },
-        get playbackRate() {
-          return adapterRef.current?.playbackRate ?? 1;
-        },
-        set playbackRate(value: number) {
-          if (adapterRef.current) {
-            adapterRef.current.playbackRate = value;
-          }
-        },
-        get readyState() {
-          return adapterRef.current?.readyState ?? 0;
-        },
-        get networkState() {
-          return adapterRef.current?.networkState ?? 0;
-        },
-        play: () => adapterRef.current?.play() ?? Promise.resolve(),
-        pause: () => adapterRef.current?.pause(),
-        load: () => adapterRef.current?.load(),
-      }),
-      [],
-    );
-
-    return (
-      <video
-        ref={videoRef}
-        controls={controls}
-        autoPlay={autoplay}
-        preload={preload}
-        muted={muted}
-        loop={loop}
-        playsInline={playsInline}
-        crossOrigin={crossOrigin}
-        className={className}
-        style={style}
-      />
-    );
-  },
-);
-
-VideoElement.displayName = 'VideoElement';
-
-export const AudioElement: ForwardRefExoticComponent<MediaElementProps> = forwardRef<
-  MediaElementRef,
-  MediaElementProps
->(
-  (
-    {
-      src,
-      controls = false,
-      autoplay = false,
-      preload = 'metadata',
-      muted = false,
-      loop = false,
-      crossOrigin,
-      onPlay,
-      onPause,
-      onTimeUpdate,
-      onLoadedMetadata,
-      onVolumeChange,
-      onEnded,
-      className,
-      style,
-    },
-    ref,
-  ) => {
-    const audioRef = useRef<HTMLAudioElement>(null);
-    const engineRef = useRef(new NativePlaybackEngine());
-    const adapterRef = useRef<MediaElementLike | null>(null);
-
-    useEffect(() => {
-      const audio = audioRef.current;
-      const engine = engineRef.current;
-
-      if (!audio) return;
-
-      engine.attach(audio);
-      adapterRef.current = createMediaElementAdapter(audio);
-
-      const handlePlay = () => onPlay?.();
-      const handlePause = () => onPause?.();
-      const handleTimeUpdate = () => onTimeUpdate?.(audio.currentTime);
-      const handleLoadedMetadata = () => onLoadedMetadata?.(audio.duration);
-      const handleVolumeChange = () => onVolumeChange?.(audio.volume, audio.muted);
-      const handleEnded = () => onEnded?.();
-
-      audio.addEventListener('play', handlePlay);
-      audio.addEventListener('pause', handlePause);
-      audio.addEventListener('timeupdate', handleTimeUpdate);
-      audio.addEventListener('loadedmetadata', handleLoadedMetadata);
-      audio.addEventListener('volumechange', handleVolumeChange);
-      audio.addEventListener('ended', handleEnded);
-
-      return () => {
-        audio.removeEventListener('play', handlePlay);
-        audio.removeEventListener('pause', handlePause);
-        audio.removeEventListener('timeupdate', handleTimeUpdate);
-        audio.removeEventListener('loadedmetadata', handleLoadedMetadata);
-        audio.removeEventListener('volumechange', handleVolumeChange);
-        audio.removeEventListener('ended', handleEnded);
-        engine.detach();
-      };
-    }, [onPlay, onPause, onTimeUpdate, onLoadedMetadata, onVolumeChange, onEnded]);
-
-    useEffect(() => {
-      if (src && engineRef.current) {
-        engineRef.current.load({ src, type: 'audio/mp3' });
-      }
-    }, [src]);
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        element: audioRef.current,
-        get currentTime() {
-          return adapterRef.current?.currentTime ?? 0;
-        },
-        set currentTime(value: number) {
-          if (adapterRef.current) {
-            adapterRef.current.currentTime = value;
-          }
-        },
-        get duration() {
-          return adapterRef.current?.duration ?? 0;
-        },
-        get paused() {
-          return adapterRef.current?.paused ?? true;
-        },
-        get ended() {
-          return adapterRef.current?.ended ?? false;
-        },
-        get volume() {
-          return adapterRef.current?.volume ?? 1;
-        },
-        set volume(value: number) {
-          if (adapterRef.current) {
-            adapterRef.current.volume = value;
-          }
-        },
-        get muted() {
-          return adapterRef.current?.muted ?? false;
-        },
-        set muted(value: boolean) {
-          if (adapterRef.current) {
-            adapterRef.current.muted = value;
-          }
-        },
-        get playbackRate() {
-          return adapterRef.current?.playbackRate ?? 1;
-        },
-        set playbackRate(value: number) {
-          if (adapterRef.current) {
-            adapterRef.current.playbackRate = value;
-          }
-        },
-        get readyState() {
-          return adapterRef.current?.readyState ?? 0;
-        },
-        get networkState() {
-          return adapterRef.current?.networkState ?? 0;
-        },
-        play: () => adapterRef.current?.play() ?? Promise.resolve(),
-        pause: () => adapterRef.current?.pause(),
-        load: () => adapterRef.current?.load(),
-      }),
-      [],
-    );
-
-    return (
-      <audio
-        ref={audioRef}
-        controls={controls}
-        autoPlay={autoplay}
-        preload={preload}
-        muted={muted}
-        loop={loop}
-        crossOrigin={crossOrigin}
-        className={className}
-        style={style}
-      />
-    );
-  },
-);
-
-AudioElement.displayName = 'AudioElement';
-
-export type { MediaElementLike };
-export { createMediaElementAdapter };
diff --git a/packages/__tech-preview__/react/src/skins/frosted/FrostedSkin.tsx b/packages/__tech-preview__/react/src/skins/frosted/FrostedSkin.tsx
deleted file mode 100644
index db651a27..00000000
--- a/packages/__tech-preview__/react/src/skins/frosted/FrostedSkin.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import type { PropsWithChildren } from 'react';
-
-import { CurrentTimeDisplay } from '@/components/CurrentTimeDisplay';
-import { DurationDisplay } from '@/components/DurationDisplay';
-import { FullscreenButton } from '@/components/FullscreenButton';
-import { MediaContainer } from '@/components/MediaContainer';
-import MuteButton from '@/components/MuteButton';
-import PlayButton from '@/components/PlayButton';
-import { Popover } from '@/components/Popover';
-import { PreviewTimeDisplay } from '@/components/PreviewTimeDisplay';
-import { TimeSlider } from '@/components/TimeSlider';
-import { Tooltip } from '@/components/Tooltip';
-import { VolumeSlider } from '@/components/VolumeSlider';
-import {
-  FullscreenEnterIcon,
-  FullscreenExitIcon,
-  PauseIcon,
-  PlayIcon,
-  VolumeHighIcon,
-  VolumeLowIcon,
-  VolumeOffIcon,
-} from '@/icons';
-import styles from './styles';
-
-type SkinProps = PropsWithChildren<{
-  className?: string;
-}>;
-
-export default function FrostedSkin({ children, className = '' }: SkinProps): JSX.Element {
-  return (
-    <MediaContainer className={`${styles.MediaContainer} ${className}`}>
-      {children}
-
-      <div className={styles.Overlay} />
-
-      <div className={`${styles.Surface} ${styles.Controls}`}>
-        <Tooltip.Root delay={500}>
-          <Tooltip.Trigger>
-            <PlayButton className={`${styles.Button} ${styles.IconButton}`}>
-              <PlayIcon className={`${styles.Icon} ${styles.PlayIcon}`} />
-              <PauseIcon className={`${styles.Icon} ${styles.PauseIcon}`} />
-            </PlayButton>
-          </Tooltip.Trigger>
-          <Tooltip.Positioner side="top" sideOffset={12} collisionPadding={12}>
-            <Tooltip.Popup className={`${styles.TooltipPopup} ${styles.Surface} ${styles.PopupAnimation} ${styles.PlayTooltipPopup}`}>
-              <span className={styles.PlayTooltip}>Play</span>
-              <span className={styles.PauseTooltip}>Pause</span>
-            </Tooltip.Popup>
-          </Tooltip.Positioner>
-        </Tooltip.Root>
-
-        <div className={styles.TimeControls}>
-          <CurrentTimeDisplay
-            // Use showRemaining to show count down/remaining time
-            // showRemaining
-            className={styles.TimeDisplay}
-          />
-
-          <Tooltip.Root trackCursorAxis="x">
-            <Tooltip.Trigger>
-              <TimeSlider.Root className={styles.SliderRoot}>
-                <TimeSlider.Track className={styles.SliderTrack}>
-                  <TimeSlider.Progress className={styles.SliderProgress} />
-                  <TimeSlider.Pointer className={styles.SliderPointer} />
-                </TimeSlider.Track>
-                <TimeSlider.Thumb className={styles.SliderThumb} />
-              </TimeSlider.Root>
-            </Tooltip.Trigger>
-            <Tooltip.Positioner side="top" sideOffset={18} collisionPadding={12}>
-              <Tooltip.Popup className={`${styles.Surface} ${styles.PopupAnimation} ${styles.TooltipPopup}`}>
-                <PreviewTimeDisplay className={styles.TimeDisplay} />
-              </Tooltip.Popup>
-            </Tooltip.Positioner>
-          </Tooltip.Root>
-
-          <DurationDisplay className={styles.TimeDisplay} />
-        </div>
-
-        <Popover.Root openOnHover delay={200} closeDelay={100}>
-          <Popover.Trigger>
-            <MuteButton className={`${styles.Button} ${styles.IconButton}`}>
-              <VolumeHighIcon className={`${styles.Icon} ${styles.VolumeHighIcon}`} />
-              <VolumeLowIcon className={`${styles.Icon} ${styles.VolumeLowIcon}`} />
-              <VolumeOffIcon className={`${styles.Icon} ${styles.VolumeOffIcon}`} />
-            </MuteButton>
-          </Popover.Trigger>
-          <Popover.Positioner side="top" sideOffset={12}>
-            <Popover.Popup className={`${styles.Surface} ${styles.PopupAnimation} ${styles.PopoverPopup}`}>
-              <VolumeSlider.Root className={styles.SliderRoot} orientation="vertical">
-                <VolumeSlider.Track className={styles.SliderTrack}>
-                  <VolumeSlider.Progress className={styles.SliderProgress} />
-                </VolumeSlider.Track>
-                <VolumeSlider.Thumb className={styles.SliderThumb} />
-              </VolumeSlider.Root>
-            </Popover.Popup>
-          </Popover.Positioner>
-        </Popover.Root>
-
-        <Tooltip.Root delay={500}>
-          <Tooltip.Trigger>
-            <FullscreenButton className={`${styles.Button} ${styles.IconButton}`}>
-              <FullscreenEnterIcon className={`${styles.Icon} ${styles.FullscreenEnterIcon} `} />
-              <FullscreenExitIcon className={`${styles.Icon} ${styles.FullscreenExitIcon}`} />
-            </FullscreenButton>
-          </Tooltip.Trigger>
-          <Tooltip.Positioner side="top" sideOffset={12} collisionPadding={12}>
-            <Tooltip.Popup className={`${styles.Surface} ${styles.PopupAnimation} ${styles.TooltipPopup} ${styles.FullscreenTooltipPopup}`}>
-              <span className={styles.FullscreenEnterTooltip}>Enter Fullscreen</span>
-              <span className={styles.FullscreenExitTooltip}>Exit Fullscreen</span>
-            </Tooltip.Popup>
-          </Tooltip.Positioner>
-        </Tooltip.Root>
-      </div>
-    </MediaContainer>
-  );
-}
-
-// function ArrowSvg(props: React.ComponentProps<'svg'>) {
-//   return (
-//     <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
-//       <path
-//         d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-//         className={styles.ArrowFill}
-//       />
-//       <path
-//         d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-//         className={styles.ArrowOuterStroke}
-//       />
-//       <path
-//         d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-//         className={styles.ArrowInnerStroke}
-//       />
-//     </svg>
-//   );
-// }
diff --git a/packages/__tech-preview__/react/src/skins/frosted/frosted-skin.css b/packages/__tech-preview__/react/src/skins/frosted/frosted-skin.css
deleted file mode 100644
index f889ae15..00000000
--- a/packages/__tech-preview__/react/src/skins/frosted/frosted-skin.css
+++ /dev/null
@@ -1,5 +0,0 @@
-@layer theme, base, components, utilities;
-@import 'tailwindcss/theme.css' layer(theme) prefix(vjs);
-@import 'tailwindcss/utilities.css' layer(utilities) prefix(vjs);
-/* Custom variants used by the frosted skin */
-@custom-variant reduced-transparency @media (prefers-reduced-transparency: reduce);
diff --git a/packages/__tech-preview__/react/src/skins/frosted/index.ts b/packages/__tech-preview__/react/src/skins/frosted/index.ts
deleted file mode 100644
index 33445ea7..00000000
--- a/packages/__tech-preview__/react/src/skins/frosted/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-'use client';
-
-export { default as FrostedSkin } from './FrostedSkin';
diff --git a/packages/__tech-preview__/react/src/skins/frosted/styles.ts b/packages/__tech-preview__/react/src/skins/frosted/styles.ts
deleted file mode 100644
index 89f196e3..00000000
--- a/packages/__tech-preview__/react/src/skins/frosted/styles.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import type { FrostedSkinStyles } from './types';
-
-// NOTE: Removing import to sidestep for compiler complexity (CJP)
-// import { cn } from '../../utils/cn';
-// A (very crude) utility to merge class names
-// Usually I'd use something like `clsx` or `classnames` but this is ok for our simple use case.
-// It just makes the billions of Tailwind classes a little easier to read.
-function cn(...classes: (string | undefined)[]): string {
-  return classes.filter(Boolean).join(' ');
-}
-
-const styles: FrostedSkinStyles = {
-  MediaContainer: cn(
-    'vjs', // Scope preflight
-    'vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black vjs:rounded-(--frosted-border-radius,2rem)',
-    // Base typography
-    'vjs:font-sans vjs:text-[0.8125rem] vjs:subpixel-antialiased',
-    // Fancy borders
-    'vjs:after:absolute vjs:after:inset-0 vjs:after:ring-black/10 vjs:after:ring-1 vjs:dark:after:ring-white/10 vjs:after:ring-inset vjs:after:z-10 vjs:after:pointer-events-none vjs:after:rounded-[inherit]',
-    'vjs:before:absolute vjs:before:inset-px vjs:before:rounded-[inherit] vjs:before:ring-white/15 vjs:before:ring-1 vjs:before:ring-inset vjs:before:z-10 vjs:before:pointer-events-none vjs:dark:before:ring-0',
-    // Prevent rounded corners in fullscreen
-    'vjs:[&:fullscreen]:rounded-none',
-    // Ensure the nested video inherits the radius
-    'vjs:[&_video]:w-full vjs:[&_video]:h-full',
-  ),
-  Overlay: cn(
-    'vjs:rounded-[inherit] vjs:absolute vjs:inset-0 vjs:pointer-events-none vjs:bg-linear-to-t vjs:from-black/50 vjs:via-black/20 vjs:to-transparent vjs:transition-opacity vjs:backdrop-saturate-150 vjs:backdrop-brightness-90',
-    // No delay and faster duration when showing
-    'vjs:delay-0 vjs:duration-100',
-    // Hidden state
-    'vjs:group-data-[controls=hidden]/root:delay-500 vjs:group-data-[controls=hidden]/root:duration-300 vjs:group-data-[controls=hidden]/root:opacity-0',
-  ),
-  Surface: cn(
-    'vjs:bg-white/10 vjs:backdrop-blur-3xl vjs:backdrop-saturate-150 vjs:backdrop-brightness-90',
-    // Ring and shadow
-    'vjs:ring vjs:ring-white/5 vjs:ring-inset vjs:shadow-sm vjs:shadow-black/15',
-    // Border to enhance contrast on lighter videos
-    'vjs:after:absolute vjs:after:inset-0 vjs:after:ring vjs:after:rounded-[inherit] vjs:after:ring-black/15 vjs:after:pointer-events-none vjs:after:z-10',
-    // Reduced transparency for users with preference
-    // XXX: This requires a Tailwind custom variant (see 1 below)
-    'vjs:reduced-transparency:bg-black/70 vjs:reduced-transparency:ring-black vjs:reduced-transparency:after:ring-white/20',
-    // High contrast mode
-    'vjs:contrast-more:bg-black/90 vjs:contrast-more:ring-black vjs:contrast-more:after:ring-white/20',
-  ),
-  Controls: cn(
-    'vjs:@container/controls vjs:absolute vjs:inset-x-3 vjs:bottom-3 vjs:rounded-full vjs:flex vjs:items-center vjs:p-1 vjs:gap-0.5 vjs:text-white',
-    // Animation
-    'vjs:transition vjs:will-change-[transform,scale,filter,opacity] vjs:origin-bottom vjs:ease-out',
-    // No delay and faster duration when showing
-    'vjs:delay-0 vjs:duration-100',
-    // Hidden state
-    'vjs:group-data-[controls=hidden]/root:scale-90 vjs:group-data-[controls=hidden]/root:opacity-0 vjs:group-data-[controls=hidden]/root:blur-sm vjs:group-data-[controls=hidden]/root:delay-500 vjs:group-data-[controls=hidden]/root:duration-300 vjs:group-data-[controls=hidden]/root:pointer-events-none',
-  ),
-  Icon: cn('icon vjs:[&_path]:transition-transform vjs:[&_path]:ease-out'),
-  Button: cn(
-    'vjs:group/button vjs:cursor-pointer vjs:relative vjs:shrink-0 vjs:transition-[color,background,outline-offset] vjs:select-none vjs:p-2 vjs:rounded-full',
-    // Background/foreground
-    'vjs:bg-transparent vjs:text-white/90',
-    // Hover and focus states
-    'vjs:hover:no-underline vjs:hover:bg-white/10 vjs:hover:text-white vjs:focus-visible:no-underline vjs:focus-visible:bg-white/10 vjs:focus-visible:text-white',
-    // Focus state
-    'vjs:-outline-offset-2 vjs:focus-visible:outline-2 vjs:focus-visible:outline-offset-2 vjs:focus-visible:outline-blue-500',
-    // Disabled state
-    'vjs:disabled:grayscale vjs:disabled:opacity-50 vjs:disabled:cursor-not-allowed',
-    // Loading state
-    'vjs:aria-busy:pointer-events-none vjs:aria-busy:cursor-not-allowed',
-    // Expanded state
-    'vjs:aria-expanded:bg-white/10 vjs:aria-expanded:text-white',
-  ),
-  IconButton: cn(
-    'vjs:grid vjs:[&_.icon]:[grid-area:1/1]',
-    'vjs:[&_.icon]:shrink-0 vjs:[&_.icon]:transition-opacity vjs:[&_.icon]:duration-150 vjs:[&_.icon]:ease-linear vjs:[&_.icon]:drop-shadow-[0_1px_0_var(--tw-shadow-color)] vjs:[&_.icon]:shadow-black/25',
-  ),
-  PlayIcon: cn('vjs:opacity-0 vjs:group-data-paused/button:opacity-100'),
-  PauseIcon: cn('vjs:group-data-paused/button:opacity-0'),
-  PlayTooltipPopup: cn(
-    'vjs:[&_.pause-tooltip]:inline vjs:[&_.play-tooltip]:hidden',
-    'vjs:data-paused:[&_.pause-tooltip]:hidden vjs:data-paused:[&_.play-tooltip]:inline',
-  ),
-  PlayTooltip: cn('play-tooltip'),
-  PauseTooltip: cn('pause-tooltip'),
-  VolumeHighIcon: cn('vjs:hidden vjs:group-data-[volume-level=high]/button:inline vjs:group-data-[volume-level=medium]/button:inline'),
-  VolumeLowIcon: cn('vjs:hidden vjs:group-data-[volume-level=low]/button:inline'),
-  VolumeOffIcon: cn('vjs:hidden vjs:group-data-[volume-level=off]/button:inline'),
-  FullscreenEnterIcon: cn(
-    'vjs:group-data-fullscreen/button:hidden',
-    'vjs:group-hover/button:[&_.arrow-1]:-translate-x-px vjs:group-hover/button:[&_.arrow-1]:-translate-y-px',
-    'vjs:group-hover/button:[&_.arrow-2]:translate-x-px vjs:group-hover/button:[&_.arrow-2]:translate-y-px',
-  ),
-  FullscreenExitIcon: cn(
-    'vjs:hidden vjs:group-data-fullscreen/button:inline',
-    'vjs:[&_.arrow-1]:-translate-x-px vjs:[&_.arrow-1]:-translate-y-px',
-    'vjs:[&_.arrow-2]:translate-x-px vjs:[&_.arrow-2]:translate-y-px',
-    'vjs:group-hover/button:[&_.arrow-1]:translate-0',
-    'vjs:group-hover/button:[&_.arrow-2]:translate-0',
-  ),
-  FullscreenTooltipPopup: cn(
-    'vjs:[&_.fullscreen-enter-tooltip]:inline vjs:data-fullscreen:[&_.fullscreen-enter-tooltip]:hidden',
-    'vjs:[&_.fullscreen-exit-tooltip]:hidden vjs:data-fullscreen:[&_.fullscreen-exit-tooltip]:inline',
-  ),
-  FullscreenEnterTooltip: cn('fullscreen-enter-tooltip'),
-  FullscreenExitTooltip: cn('fullscreen-exit-tooltip'),
-  TimeControls: cn('vjs:flex-1 vjs:flex vjs:items-center vjs:gap-3 vjs:px-1.5'),
-  TimeDisplay: cn('vjs:tabular-nums vjs:text-shadow-2xs/25'),
-  SliderRoot: cn(
-    'vjs:group/slider vjs:outline-0 vjs:flex vjs:items-center vjs:justify-center vjs:flex-1 vjs:relative vjs:rounded-full',
-    'vjs:data-[orientation=horizontal]:h-5 vjs:data-[orientation=horizontal]:min-w-20',
-    'vjs:data-[orientation=vertical]:w-5 vjs:data-[orientation=vertical]:h-20',
-  ),
-  SliderTrack: cn(
-    'vjs:relative vjs:select-none vjs:transition-[outline-offset] vjs:rounded-[inherit] vjs:bg-white/20 vjs:ring-1 vjs:ring-black/5',
-    'vjs:data-[orientation=horizontal]:w-full vjs:data-[orientation=horizontal]:h-1',
-    'vjs:data-[orientation=vertical]:w-1',
-    'vjs:-outline-offset-2 vjs:group-focus-visible/slider:outline-2 vjs:group-focus-visible/slider:outline-offset-6 vjs:group-focus-visible/slider:outline-blue-500',
-  ),
-  SliderProgress: cn('vjs:bg-white vjs:rounded-[inherit]'),
-  // TODO: Work out what we want to do here.
-  SliderPointer: cn('vjs:bg-white/20 vjs:rounded-[inherit]'),
-  SliderThumb: cn(
-    'vjs:bg-white vjs:z-10 vjs:select-none vjs:ring vjs:ring-black/10 vjs:rounded-full vjs:shadow-sm vjs:shadow-black/15 vjs:opacity-0 vjs:transition-[opacity,height,width] vjs:ease-out',
-    'vjs:group-hover/slider:opacity-100 vjs:group-focus-within/slider:opacity-100',
-    'vjs:size-2.5 vjs:active:size-3 vjs:group-active/slider:size-3',
-    'vjs:data-[orientation=horizontal]:hover:cursor-ew-resize',
-    'vjs:data-[orientation=vertical]:hover:cursor-ns-resize',
-  ),
-  PopupAnimation: cn(
-    // Animation
-    // XXX: We can't use transforms since floating UI uses them for positioning.
-    'vjs:transition-[transform,scale,opacity,filter] vjs:origin-bottom vjs:duration-200 vjs:data-instant:duration-0',
-    'vjs:data-starting-style:scale-0 vjs:data-starting-style:opacity-0 vjs:data-starting-style:blur-sm',
-    'vjs:data-ending-style:scale-0 vjs:data-ending-style:opacity-0 vjs:data-ending-style:blur-sm',
-  ),
-  PopoverPopup: cn('vjs:px-1 vjs:py-3 vjs:rounded-full vjs:m-0 vjs:border-0'),
-  TooltipPopup: cn('vjs:whitespace-nowrap vjs:rounded-full vjs:text-white vjs:text-xs vjs:@7xl/root:text-sm vjs:px-2.5 vjs:py-1'),
-};
-
-/*
-[1] @custom-variant reduced-transparency @media (prefers-reduced-transparency: reduce);
-*/
-
-export default styles;
diff --git a/packages/__tech-preview__/react/src/skins/frosted/types.ts b/packages/__tech-preview__/react/src/skins/frosted/types.ts
deleted file mode 100644
index 734f3c54..00000000
--- a/packages/__tech-preview__/react/src/skins/frosted/types.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-export interface FrostedSkinStyles {
-  readonly MediaContainer: string;
-  readonly Surface: string;
-  readonly Overlay: string;
-  readonly Controls: string;
-  readonly Icon: string;
-  readonly Button: string;
-  readonly IconButton: string;
-  readonly PlayIcon: string;
-  readonly PauseIcon: string;
-  readonly PlayTooltipPopup: string;
-  readonly PlayTooltip: string;
-  readonly PauseTooltip: string;
-  readonly VolumeHighIcon: string;
-  readonly VolumeLowIcon: string;
-  readonly VolumeOffIcon: string;
-  readonly FullscreenEnterIcon: string;
-  readonly FullscreenExitIcon: string;
-  readonly FullscreenTooltipPopup: string;
-  readonly FullscreenEnterTooltip: string;
-  readonly FullscreenExitTooltip: string;
-  readonly SliderRoot: string;
-  readonly SliderTrack: string;
-  readonly SliderProgress: string;
-  readonly SliderPointer: string;
-  readonly SliderThumb: string;
-  readonly TimeControls: string;
-  readonly TimeDisplay: string;
-  readonly PopupAnimation: string;
-  readonly PopoverPopup: string;
-  readonly TooltipPopup: string;
-}
diff --git a/packages/__tech-preview__/react/src/skins/index.ts b/packages/__tech-preview__/react/src/skins/index.ts
deleted file mode 100644
index 88c5e35f..00000000
--- a/packages/__tech-preview__/react/src/skins/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './frosted';
-export * from './minimal';
diff --git a/packages/__tech-preview__/react/src/skins/minimal/MinimalSkin.tsx b/packages/__tech-preview__/react/src/skins/minimal/MinimalSkin.tsx
deleted file mode 100644
index f65cbc58..00000000
--- a/packages/__tech-preview__/react/src/skins/minimal/MinimalSkin.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import type { PropsWithChildren } from 'react';
-
-import { CurrentTimeDisplay } from '@/components/CurrentTimeDisplay';
-import { DurationDisplay } from '@/components/DurationDisplay';
-import { FullscreenButton } from '@/components/FullscreenButton';
-import { MediaContainer } from '@/components/MediaContainer';
-import MuteButton from '@/components/MuteButton';
-import PlayButton from '@/components/PlayButton';
-import Popover from '@/components/Popover';
-import PreviewTimeDisplay from '@/components/PreviewTimeDisplay';
-import { TimeSlider } from '@/components/TimeSlider';
-import Tooltip from '@/components/Tooltip';
-import VolumeSlider from '@/components/VolumeSlider';
-import {
-  FullscreenEnterAltIcon,
-  FullscreenExitAltIcon,
-  PauseIcon,
-  PlayIcon,
-  VolumeHighIcon,
-  VolumeLowIcon,
-  VolumeOffIcon,
-} from '@/icons';
-import styles from './styles';
-
-type SkinProps = PropsWithChildren<{
-  className?: string;
-}>;
-
-export default function MinimalSkin({ children, className = '' }: SkinProps): JSX.Element {
-  return (
-    <MediaContainer className={`${styles.MediaContainer} ${className}`}>
-      {children}
-
-      <div className={styles.Overlay} />
-
-      <div className={styles.Controls}>
-        <Tooltip.Root delay={500} closeDelay={0}>
-          <Tooltip.Trigger>
-            <PlayButton className={`${styles.Button} ${styles.IconButton}`}>
-              <PlayIcon className={`${styles.Icon} ${styles.PlayIcon}`} />
-              <PauseIcon className={`${styles.Icon} ${styles.PauseIcon}`} />
-            </PlayButton>
-          </Tooltip.Trigger>
-          <Tooltip.Positioner side="top-start" sideOffset={6} collisionPadding={12}>
-            <Tooltip.Popup className={`${styles.PopupAnimation} ${styles.TooltipPopup} ${styles.PlayTooltipPopup}`}>
-              <span className={styles.PlayTooltip}>Play</span>
-              <span className={styles.PauseTooltip}>Pause</span>
-            </Tooltip.Popup>
-          </Tooltip.Positioner>
-        </Tooltip.Root>
-
-        <div className={styles.TimeDisplayGroup}>
-          <CurrentTimeDisplay
-            // Use showRemaining to show count down/remaining time
-            // showRemaining
-            className={styles.TimeDisplay}
-          />
-
-          <span className={styles.DurationDisplay}>
-            /
-            <DurationDisplay className={`${styles.TimeDisplay}`} />
-          </span>
-        </div>
-
-        <Tooltip.Root trackCursorAxis="x">
-          <Tooltip.Trigger>
-            <TimeSlider.Root className={styles.SliderRoot}>
-              <TimeSlider.Track className={styles.SliderTrack}>
-                <TimeSlider.Progress className={styles.SliderProgress} />
-                <TimeSlider.Pointer className={styles.SliderPointer} />
-              </TimeSlider.Track>
-              <TimeSlider.Thumb className={styles.SliderThumb} />
-            </TimeSlider.Root>
-          </Tooltip.Trigger>
-          <Tooltip.Positioner side="top" sideOffset={12} collisionPadding={12}>
-            <Tooltip.Popup className={`${styles.PopupAnimation} ${styles.TooltipPopup}`}>
-              <PreviewTimeDisplay className={styles.TimeDisplay} />
-            </Tooltip.Popup>
-          </Tooltip.Positioner>
-        </Tooltip.Root>
-
-        <div className={styles.ButtonGroup}>
-          <Popover.Root openOnHover delay={200} closeDelay={300}>
-            <Popover.Trigger>
-              <MuteButton className={`${styles.Button} ${styles.IconButton}`}>
-                <VolumeHighIcon className={`${styles.Icon} ${styles.VolumeHighIcon}`} />
-                <VolumeLowIcon className={`${styles.Icon} ${styles.VolumeLowIcon}`} />
-                <VolumeOffIcon className={`${styles.Icon} ${styles.VolumeOffIcon}`} />
-              </MuteButton>
-            </Popover.Trigger>
-            <Popover.Positioner side="top" sideOffset={2}>
-              <Popover.Popup className={`${styles.PopupAnimation} ${styles.PopoverPopup}`}>
-                <VolumeSlider.Root className={styles.SliderRoot} orientation="vertical">
-                  <VolumeSlider.Track className={styles.SliderTrack}>
-                    <VolumeSlider.Progress className={styles.SliderProgress} />
-                  </VolumeSlider.Track>
-                  <VolumeSlider.Thumb className={styles.SliderThumb} />
-                </VolumeSlider.Root>
-              </Popover.Popup>
-            </Popover.Positioner>
-          </Popover.Root>
-
-          <Tooltip.Root delay={500} closeDelay={0}>
-            <Tooltip.Trigger>
-              <FullscreenButton className={`${styles.Button} ${styles.IconButton}`}>
-                <FullscreenEnterAltIcon className={`${styles.Icon} ${styles.FullscreenEnterIcon}`} />
-                <FullscreenExitAltIcon className={`${styles.Icon} ${styles.FullscreenExitIcon}`} />
-              </FullscreenButton>
-            </Tooltip.Trigger>
-            <Tooltip.Positioner side="top-end" sideOffset={6} collisionPadding={12}>
-              <Tooltip.Popup className={`${styles.PopupAnimation} ${styles.TooltipPopup} ${styles.FullscreenTooltipPopup}`}>
-                <span className={styles.FullscreenEnterTooltip}>Enter Fullscreen</span>
-                <span className={styles.FullscreenExitTooltip}>Exit Fullscreen</span>
-              </Tooltip.Popup>
-            </Tooltip.Positioner>
-          </Tooltip.Root>
-        </div>
-      </div>
-    </MediaContainer>
-  );
-}
diff --git a/packages/__tech-preview__/react/src/skins/minimal/index.ts b/packages/__tech-preview__/react/src/skins/minimal/index.ts
deleted file mode 100644
index dccc15ea..00000000
--- a/packages/__tech-preview__/react/src/skins/minimal/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-'use client';
-
-export { default as MinimalSkin } from './MinimalSkin';
diff --git a/packages/__tech-preview__/react/src/skins/minimal/minimal-skin.css b/packages/__tech-preview__/react/src/skins/minimal/minimal-skin.css
deleted file mode 100644
index 9e59a062..00000000
--- a/packages/__tech-preview__/react/src/skins/minimal/minimal-skin.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@layer theme, base, components, utilities;
-@import 'tailwindcss/theme.css' layer(theme) prefix(vjs);
-@import 'tailwindcss/utilities.css' layer(utilities) prefix(vjs);
diff --git a/packages/__tech-preview__/react/src/skins/minimal/styles.ts b/packages/__tech-preview__/react/src/skins/minimal/styles.ts
deleted file mode 100644
index 491b9f6c..00000000
--- a/packages/__tech-preview__/react/src/skins/minimal/styles.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import type { MinimalSkinStyles } from './types';
-
-// NOTE: Removing import to sidestep for compiler complexity (CJP)
-// import { cn } from '../../utils/cn';
-// A (very crude) utility to merge class names
-// Usually I'd use something like `clsx` or `classnames` but this is ok for our simple use case.
-// It just makes the billions of Tailwind classes a little easier to read.
-function cn(...classes: (string | undefined)[]): string {
-  return classes.filter(Boolean).join(' ');
-}
-
-const styles: MinimalSkinStyles = {
-  MediaContainer: cn(
-    'vjs', // Scope preflight
-    'vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black vjs:rounded-(--minimal-border-radius,0.75rem)',
-    // Base typography
-    'vjs:font-sans vjs:text-[0.8125rem] vjs:subpixel-antialiased',
-    // Fancy borders
-    'vjs:after:absolute vjs:after:inset-0 vjs:after:ring-black/15 vjs:after:ring-1 vjs:dark:after:ring-white/15 vjs:after:ring-inset vjs:after:z-10 vjs:after:pointer-events-none vjs:after:rounded-[inherit]',
-    // Prevent rounded corners in fullscreen
-    'vjs:[&:fullscreen]:rounded-none',
-    // Ensure the nested video inherits the radius
-    'vjs:[&_video]:w-full vjs:[&_video]:h-full',
-  ),
-  Overlay: cn(
-    'vjs:absolute vjs:inset-0 vjs:rounded-[inherit] vjs:pointer-events-none',
-    'vjs:bg-linear-to-t vjs:from-black/70 vjs:via-black/50 vjs:via-[7.5rem] vjs:to-transparent',
-    // High contrast mode
-    'vjs:contrast-more:from-black/75',
-    // Animation
-    'vjs:transition vjs:will-change-[opacity] vjs:ease-out',
-    // No delay and faster duration when showing
-    'vjs:delay-0 vjs:duration-75',
-    // Hidden state
-    'vjs:group-data-[controls=hidden]/root:delay-500 vjs:group-data-[controls=hidden]/root:duration-500 vjs:group-data-[controls=hidden]/root:opacity-0',
-  ),
-  Controls: cn(
-    'vjs:@container/controls vjs:absolute vjs:inset-x-0 vjs:bottom-0 vjs:flex vjs:items-center vjs:gap-2 vjs:z-20 vjs:px-1.5 vjs:pb-1.5 vjs:pt-8 vjs:text-white',
-    // Animation
-    'vjs:transition vjs:will-change-[transform,filter,opacity] vjs:ease-out',
-    // No delay and faster duration when showing
-    'vjs:delay-0 vjs:duration-75',
-    // Hidden state
-    'vjs:group-data-[controls=hidden]/root:translate-y-full vjs:group-data-[controls=hidden]/root:opacity-0 vjs:group-data-[controls=hidden]/root:blur-sm vjs:group-data-[controls=hidden]/root:delay-500 vjs:group-data-[controls=hidden]/root:duration-500 vjs:group-data-[controls=hidden]/root:pointer-events-none',
-    // Looser spacing on larger screens
-    'vjs:@sm/root:gap-3.5 vjs:@sm/root:px-3 vjs:@sm/root:pb-3 vjs:@sm/root:pt-10',
-  ),
-  Icon: cn('icon vjs:[&_path]:transition-transform vjs:[&_path]:ease-out'),
-  TimeDisplayGroup: cn('flex items-center gap-1'),
-  Button: cn(
-    'vjs:group/button vjs:cursor-pointer vjs:relative vjs:shrink-0 vjs:transition-[color,background,outline-offset] vjs:select-none vjs:p-2.5 vjs:rounded-md',
-    // Background/foreground
-    'vjs:bg-transparent vjs:text-white',
-    // Hover and focus states
-    'vjs:hover:text-white/80 vjs:focus-visible:text-white/80',
-    // Focus state
-    'vjs:-outline-offset-2 vjs:focus-visible:outline-2 vjs:focus-visible:outline-offset-2 vjs:focus-visible:outline-white',
-    // Disabled state
-    'vjs:disabled:grayscale vjs:disabled:opacity-50 vjs:disabled:cursor-not-allowed',
-    // Loading state
-    'vjs:aria-busy:pointer-events-none vjs:aria-busy:cursor-not-allowed',
-    // Expanded state
-    'vjs:aria-expanded:text-white/80',
-  ),
-  ButtonGroup: cn('vjs:flex vjs:items-center vjs:gap-1.5'),
-  IconButton: cn(
-    'vjs:grid vjs:[&_.icon]:[grid-area:1/1]',
-    'vjs:[&_.icon]:shrink-0 vjs:[&_.icon]:transition-opacity vjs:[&_.icon]:duration-150 vjs:[&_.icon]:ease-linear vjs:[&_.icon]:drop-shadow-[0_1px_0_var(--tw-shadow-color)] vjs:[&_.icon]:shadow-black/40',
-  ),
-  PlayIcon: cn('vjs:opacity-0 vjs:group-data-paused/button:opacity-100'),
-  PauseIcon: cn('vjs:group-data-paused/button:opacity-0'),
-  PlayTooltipPopup: cn(
-    'vjs:[&_.pause-tooltip]:inline vjs:data-paused:[&_.pause-tooltip]:hidden',
-    'vjs:[&_.play-tooltip]:hidden vjs:data-paused:[&_.play-tooltip]:inline',
-  ),
-  PlayTooltip: cn('play-tooltip'),
-  PauseTooltip: cn('pause-tooltip'),
-  VolumeHighIcon: cn('vjs:hidden vjs:group-data-[volume-level=high]/button:inline vjs:group-data-[volume-level=medium]/button:inline'),
-  VolumeLowIcon: cn('vjs:hidden vjs:group-data-[volume-level=low]/button:inline'),
-  VolumeOffIcon: cn('vjs:hidden vjs:group-data-[volume-level=off]/button:inline'),
-  FullscreenEnterIcon: cn(
-    'vjs:group-data-fullscreen/button:hidden',
-    'vjs:group-hover/button:[&_.arrow-1]:translate-x-px vjs:group-hover/button:[&_.arrow-1]:-translate-y-px',
-    'vjs:group-hover/button:[&_.arrow-2]:-translate-x-px vjs:group-hover/button:[&_.arrow-2]:translate-y-px',
-  ),
-  FullscreenExitIcon: cn(
-    'vjs:hidden vjs:group-data-fullscreen/button:inline',
-    'vjs:[&_.arrow-1]:translate-x-px vjs:[&_.arrow-1]:-translate-y-px',
-    'vjs:[&_.arrow-2]:-translate-x-px vjs:[&_.arrow-2]:translate-y-px',
-    'vjs:group-hover/button:[&_.arrow-1]:translate-0',
-    'vjs:group-hover/button:[&_.arrow-2]:translate-0',
-  ),
-  FullscreenTooltipPopup: cn(
-    'vjs:[&_.fullscreen-enter-tooltip]:inline vjs:data-fullscreen:[&_.fullscreen-enter-tooltip]:hidden',
-    'vjs:[&_.fullscreen-exit-tooltip]:hidden vjs:data-fullscreen:[&_.fullscreen-exit-tooltip]:inline',
-  ),
-  FullscreenEnterTooltip: cn('fullscreen-enter-tooltip'),
-  FullscreenExitTooltip: cn('fullscreen-exit-tooltip'),
-  TimeSliderRoot: cn('vjs:mx-2'),
-  TimeDisplay: cn('vjs:tabular-nums vjs:text-shadow-2xs/20'),
-  DurationDisplay: cn('vjs:text-white/50 vjs:contents'),
-  SliderRoot: cn(
-    'vjs:group/slider vjs:outline-0 vjs:flex vjs:items-center vjs:justify-center vjs:flex-1 vjs:group/slider vjs:relative vjs:rounded-full',
-    'vjs:data-[orientation=horizontal]:h-5 vjs:data-[orientation=horizontal]:min-w-20',
-    'vjs:data-[orientation=vertical]:w-5 vjs:data-[orientation=vertical]:h-18',
-  ),
-  SliderTrack: cn(
-    'vjs:relative vjs:select-none vjs:rounded-[inherit] vjs:bg-white/10',
-    'vjs:data-[orientation=horizontal]:w-full vjs:data-[orientation=horizontal]:h-0.75',
-    'vjs:data-[orientation=vertical]:w-0.75',
-    'vjs:-outline-offset-2 vjs:group-focus-visible/slider:outline-2 vjs:group-focus-visible/slider:outline-offset-6 vjs:group-focus-visible/slider:outline-white',
-  ),
-  SliderProgress: cn('vjs:bg-white vjs:rounded-[inherit]'),
-  SliderPointer: cn('vjs:hidden'),
-  SliderThumb: cn(
-    'vjs:bg-white vjs:z-10 vjs:size-3 vjs:select-none vjs:ring vjs:ring-black/10 vjs:rounded-full vjs:shadow-sm vjs:shadow-black/15 vjs:transition-[opacity,scale] vjs:ease-out vjs:opacity-0 vjs:scale-70 vjs:origin-center',
-    'vjs:group-hover/slider:opacity-100 vjs:group-hover/slider:scale-100',
-    'vjs:data-[orientation=horizontal]:hover:cursor-ew-resize',
-    'vjs:data-[orientation=vertical]:hover:cursor-ns-resize',
-  ),
-  PopupAnimation: cn(
-    // Animation
-    // XXX: We can't use transforms since floating UI uses them for positioning.
-    'vjs:transition-[transform,scale,opacity,filter] vjs:origin-bottom vjs:duration-200 vjs:data-instant:duration-0',
-    'vjs:data-starting-style:scale-0 vjs:data-starting-style:opacity-0 vjs:data-starting-style:blur-sm',
-    'vjs:data-ending-style:scale-0 vjs:data-ending-style:opacity-0 vjs:data-ending-style:blur-sm',
-  ),
-  PopoverPopup: cn('vjs:p-2 vjs:bg-transparent vjs:m-0 vjs:border-0'),
-  TooltipPopup: cn(
-    'vjs:whitespace-nowrap vjs:flex vjs:flex-col vjs:rounded vjs:text-white vjs:text-xs vjs:@7xl/root:text-sm vjs:px-2 vjs:py-1 vjs:bg-white/20 vjs:backdrop-blur-3xl vjs:backdrop-saturate-150 vjs:backdrop-brightness-90 vjs:shadow-md vjs:shadow-black/5',
-  ),
-};
-
-export default styles;
diff --git a/packages/__tech-preview__/react/src/skins/minimal/types.ts b/packages/__tech-preview__/react/src/skins/minimal/types.ts
deleted file mode 100644
index 6d1f8301..00000000
--- a/packages/__tech-preview__/react/src/skins/minimal/types.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export interface MinimalSkinStyles {
-  readonly MediaContainer: string;
-  readonly Overlay: string;
-  readonly Controls: string;
-  readonly Icon: string;
-  readonly Button: string;
-  readonly ButtonGroup: string;
-  readonly IconButton: string;
-  readonly PlayIcon: string;
-  readonly PauseIcon: string;
-  readonly PlayTooltipPopup: string;
-  readonly PlayTooltip: string;
-  readonly PauseTooltip: string;
-  readonly VolumeHighIcon: string;
-  readonly VolumeLowIcon: string;
-  readonly VolumeOffIcon: string;
-  readonly FullscreenEnterIcon: string;
-  readonly FullscreenExitIcon: string;
-  readonly FullscreenTooltipPopup: string;
-  readonly FullscreenEnterTooltip: string;
-  readonly FullscreenExitTooltip: string;
-  readonly TimeSliderRoot: string;
-  readonly TimeDisplayGroup: string;
-  readonly TimeDisplay: string;
-  readonly DurationDisplay: string;
-  readonly SliderRoot: string;
-  readonly SliderTrack: string;
-  readonly SliderProgress: string;
-  readonly SliderPointer: string;
-  readonly SliderThumb: string;
-  readonly PopupAnimation: string;
-  readonly PopoverPopup: string;
-  readonly TooltipPopup: string;
-}
diff --git a/packages/__tech-preview__/react/src/skins/preflight.css b/packages/__tech-preview__/react/src/skins/preflight.css
deleted file mode 100644
index 62515aec..00000000
--- a/packages/__tech-preview__/react/src/skins/preflight.css
+++ /dev/null
@@ -1 +0,0 @@
-@import 'tailwindcss/preflight.css' layer(base) prefix(vjs);
diff --git a/packages/__tech-preview__/react/src/store/context.ts b/packages/__tech-preview__/react/src/store/context.ts
deleted file mode 100644
index e606e25c..00000000
--- a/packages/__tech-preview__/react/src/store/context.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { Context } from 'react';
-import { createContext } from 'react';
-
-/**
- * @description The {@link https://react.dev/learn/passing-data-deeply-with-context#context-an-alternative-to-passing-props|React Context}
- * used "under the hood" for media ui state updates, state change requests, and the hooks and providers that integrate with this context.
- * It is unlikely that you will/should be using `MediaContext` directly.
- *
- * @see {@link VideoProvider}
- * @see {@link useMediaDispatch}
- * @see {@link useMediaSelector}
- */
-export const MediaContext: Context<any | null> = createContext<any | null>(null);
diff --git a/packages/__tech-preview__/react/src/store/hooks.ts b/packages/__tech-preview__/react/src/store/hooks.ts
deleted file mode 100644
index 098c7396..00000000
--- a/packages/__tech-preview__/react/src/store/hooks.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/** @TODO !!! Revisit for SSR (CJP) */
-import type { MediaStore } from '@videojs/core-preview/store';
-
-import { useContext } from 'react';
-
-import { MediaContext } from './context';
-import { useSyncExternalStoreWithSelector } from './use-sync-external-store';
-
-const identity = (x?: any) => x;
-
-export function useMediaStore(): MediaStore {
-  return useContext(MediaContext);
-}
-
-export function useMediaDispatch(): (value: any) => unknown {
-  const store = useContext(MediaContext);
-  const dispatch = store?.dispatch ?? identity;
-  return (value: any) => {
-    return dispatch(value);
-  };
-}
-
-export function useMediaRef() {
-  const dispatch = useMediaDispatch();
-
-  return (element: any): void => {
-    // NOTE: This should get invoked with `null` when using as a `ref` callback whenever
-    // the corresponding react media element instance (e.g. a `<video>`) is being removed.
-    /*
-    { type: 'mediastateownerchangerequest', detail: media }
-    */
-    dispatch({ type: 'mediastateownerchangerequest', detail: element });
-  };
-}
-
-export const refEquality = (a: any, b: any): boolean => a === b;
-
-export function useMediaSelector<S = any>(
-  selector: (state: any) => S,
-  equalityFn: (a: S, b: S) => boolean = refEquality,
-): S {
-  const store = useContext(MediaContext);
-  const selectedState = useSyncExternalStoreWithSelector(
-    store?.subscribe ?? identity,
-    store?.getState ?? identity,
-    store?.getState ?? identity,
-    selector,
-    equalityFn,
-  ) as S;
-
-  return selectedState;
-}
diff --git a/packages/__tech-preview__/react/src/store/index.ts b/packages/__tech-preview__/react/src/store/index.ts
deleted file mode 100644
index 0a2088f8..00000000
--- a/packages/__tech-preview__/react/src/store/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-'use client';
-
-export { MediaContext } from './context';
-export {
-  useMediaDispatch,
-  useMediaRef,
-  useMediaSelector,
-  useMediaStore,
-} from './hooks';
-export {
-  VideoProvider,
-} from './video-provider';
-
-export type MediaStore = any;
-export type MediaState = any;
-export type MediaStateOwner = any;
diff --git a/packages/__tech-preview__/react/src/store/use-sync-external-store.ts b/packages/__tech-preview__/react/src/store/use-sync-external-store.ts
deleted file mode 100644
index 5b096bbc..00000000
--- a/packages/__tech-preview__/react/src/store/use-sync-external-store.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { useDebugValue, useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
-
-// NOTE: This is a port of https://github.com/facebook/react/blob/main/packages/use-sync-external-store/src/useSyncExternalStoreWithSelector.js
-// and React's internal/shared version of `Object.is` with refactors for TypeScript and bundling. Doing this to avoid adding an additional dependency
-// beyond core React when using the `MediaStore` React hooks and related (CJP)
-
-/**
- * inlined Object.is polyfill to avoid requiring consumers ship their own
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
- */
-function isPolyfill(x: any, y: any) {
-  return (
-    (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y)
-  );
-}
-
-type SnapshotRef<Selection>
-  = | {
-    hasValue: true;
-    value: Selection;
-  }
-  | {
-    hasValue: false;
-    value: null;
-  }
-  | null;
-
-const is: (x: any, y: any) => boolean = typeof Object.is === 'function' ? Object.is : isPolyfill;
-
-// Same as useSyncExternalStore, but supports selector and isEqual arguments.
-export function useSyncExternalStoreWithSelector<Snapshot, Selection>(
-  subscribe: (onStoreChange: () => void) => () => void,
-  getSnapshot: () => Snapshot,
-  getServerSnapshot: undefined | null | (() => Snapshot),
-  selector: (snapshot: Snapshot) => Selection,
-  isEqual?: (a: Selection, b: Selection) => boolean,
-): Selection {
-  // Use this to track the rendered snapshot.
-  const instRef = useRef<SnapshotRef<Selection>>(null);
-  let inst: SnapshotRef<Selection>;
-  if (instRef.current === null) {
-    inst = {
-      hasValue: false,
-      value: null,
-    };
-    instRef.current = inst as SnapshotRef<Selection>;
-  } else {
-    inst = instRef.current;
-  }
-
-  const [getSelection, getServerSelection] = useMemo(() => {
-    // Track the memoized state using closure variables that are local to this
-    // memoized instance of a getSnapshot function. Intentionally not using a
-    // useRef hook, because that state would be shared across all concurrent
-    // copies of the hook/component.
-    let hasMemo = false;
-    let memoizedSnapshot: Snapshot;
-    let memoizedSelection: Selection;
-    const memoizedSelector = (nextSnapshot: Snapshot) => {
-      if (!hasMemo) {
-        // The first time the hook is called, there is no memoized result.
-        hasMemo = true;
-        memoizedSnapshot = nextSnapshot;
-        const nextSelection = selector(nextSnapshot);
-        if (isEqual !== undefined) {
-          // Even if the selector has changed, the currently rendered selection
-          // may be equal to the new selection. We should attempt to reuse the
-          // current value if possible, to preserve downstream memoizations.
-          if (inst.hasValue) {
-            const currentSelection = inst.value;
-            if (isEqual(currentSelection, nextSelection)) {
-              memoizedSelection = currentSelection;
-              return currentSelection;
-            }
-          }
-        }
-        memoizedSelection = nextSelection;
-        return nextSelection;
-      }
-
-      // We may be able to reuse the previous invocation's result.
-      const prevSnapshot: Snapshot = memoizedSnapshot;
-      const prevSelection: Selection = memoizedSelection;
-
-      if (is(prevSnapshot, nextSnapshot)) {
-        // The snapshot is the same as last time. Reuse the previous selection.
-        return prevSelection;
-      }
-
-      // The snapshot has changed, so we need to compute a new selection.
-      const nextSelection = selector(nextSnapshot);
-
-      // If a custom isEqual function is provided, use that to check if the data
-      // has changed. If it hasn't, return the previous selection. That signals
-      // to React that the selections are conceptually equal, and we can bail
-      // out of rendering.
-      if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {
-        return prevSelection;
-      }
-
-      memoizedSnapshot = nextSnapshot;
-      memoizedSelection = nextSelection;
-      return nextSelection;
-    };
-    // Assigning this to a constant so that Flow knows it can't change.
-    const maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot;
-    const getSnapshotWithSelector = () => memoizedSelector(getSnapshot());
-    const getServerSnapshotWithSelector
-      = maybeGetServerSnapshot === null ? undefined : () => memoizedSelector(maybeGetServerSnapshot());
-    return [getSnapshotWithSelector, getServerSnapshotWithSelector];
-  }, [getSnapshot, getServerSnapshot, selector, isEqual]);
-
-  const value = useSyncExternalStore(subscribe, getSelection, getServerSelection);
-
-  useEffect(() => {
-    inst.hasValue = true;
-    inst.value = value;
-  }, [value]);
-
-  useDebugValue(value);
-  return value;
-}
diff --git a/packages/__tech-preview__/react/src/store/video-provider.tsx b/packages/__tech-preview__/react/src/store/video-provider.tsx
deleted file mode 100644
index 6d29aa8b..00000000
--- a/packages/__tech-preview__/react/src/store/video-provider.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/** @TODO !!! Revisit for SSR (CJP) */
-import type { ReactNode } from 'react';
-
-import { createMediaStore } from '@videojs/core-preview/store';
-
-import { printConsoleBanner } from '@videojs/utils-preview';
-import { useMemo } from 'react';
-
-import { version } from '../../package.json';
-import { MediaContext } from './context';
-
-printConsoleBanner(version);
-
-export function VideoProvider({ children }: { children: ReactNode }): JSX.Element {
-  const value = useMemo(() => createMediaStore(), []);
-
-  // useEffect(() => {
-  //   value?.dispatch({
-  //     type: 'documentelementchangerequest',
-  //     detail: globalThis.document,
-  //   });
-  //   return () => {
-  //     value?.dispatch({
-  //       type: 'documentelementchangerequest',
-  //       detail: undefined,
-  //     });
-  //   };
-  // }, []);
-
-  return <MediaContext.Provider value={value}>{children}</MediaContext.Provider>;
-}
diff --git a/packages/__tech-preview__/react/src/types.d.ts b/packages/__tech-preview__/react/src/types.d.ts
deleted file mode 100644
index 4fdac591..00000000
--- a/packages/__tech-preview__/react/src/types.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-declare module '*.module.css' {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-
-declare global {
-  namespace React {
-    interface HTMLAttributes<T> {
-      popover?: 'auto' | 'manual' | string;
-      commandfor?: string;
-    }
-  }
-}
-
-export type Prettify<T> = {
-  [K in keyof T]: T[K];
-} & {};
diff --git a/packages/__tech-preview__/react/src/utils/cn.ts b/packages/__tech-preview__/react/src/utils/cn.ts
deleted file mode 100644
index a5a5ee84..00000000
--- a/packages/__tech-preview__/react/src/utils/cn.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// A (very crude) utility to merge class names
-// Usually I'd use something like `clsx` or `classnames` but this is ok for our simple use case.
-// It just makes the billions of Tailwind classes a little easier to read.
-export function cn(...classes: (string | undefined)[]): string {
-  return classes.filter(Boolean).join(' ');
-}
diff --git a/packages/__tech-preview__/react/src/utils/component-factory.tsx b/packages/__tech-preview__/react/src/utils/component-factory.tsx
deleted file mode 100644
index fdce4ebc..00000000
--- a/packages/__tech-preview__/react/src/utils/component-factory.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import type { ReactElement } from 'react';
-
-import { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useSyncExternalStore } from 'react';
-
-export type StateHookFn<TProps = any, TState = any> = (props: TProps) => TState;
-
-export type PropsHookFn<TProps = any, TState = any, TResultProps = any> = (
-  props: TProps,
-  state: TState
-) => TResultProps;
-
-export type RenderFn<TProps = any, TState = any> = (props: TProps, state: TState) => ReactElement;
-
-const Context = createContext<any>(null);
-
-/**
- * Generic factory function to create connected components following the hooks pattern
- * inspired by Adobe React Spectrum and Base UI architectures.
- *
- * @param useStateHook - Hook that provides component state
- * @param usePropsHook - Hook that enhances props with state-derived values
- * @param defaultRender - Default render function for the component
- * @param displayName - Display name for React DevTools
- * @returns Connected component with customizable render prop
- */
-export function toConnectedComponent<
-  TProps extends Record<string, any>,
-  TState,
-  TResultProps extends Record<string, any>,
-  TRenderFn extends RenderFn<TResultProps, TState>,
->(
-  useStateHook: StateHookFn<TProps, TState>,
-  usePropsHook: PropsHookFn<TProps, TState, TResultProps>,
-  defaultRender: TRenderFn,
-  displayName: string,
-): ConnectedComponent<TProps, TRenderFn> {
-  const ConnectedComponent = forwardRef<HTMLElement, TProps & { render?: TRenderFn }>(
-    ({ render = defaultRender, ...props }, ref) => {
-      const propsWithRef = ref ? { ...props, ref } : props;
-      const connectedState = useStateHook(propsWithRef as unknown as TProps);
-      const connectedProps = usePropsHook(propsWithRef as unknown as TProps, connectedState);
-      return <Context.Provider value={connectedState}>{render(connectedProps, connectedState)}</Context.Provider>;
-    },
-  );
-
-  ConnectedComponent.displayName = displayName;
-
-  return ConnectedComponent;
-}
-
-/**
- * Type helper to infer the component type from the factory
- */
-export type ConnectedComponent<TProps extends Record<string, any>, TRenderFn extends RenderFn<any, any>> = React.ForwardRefExoticComponent<
-  React.PropsWithoutRef<TProps & { render?: TRenderFn }> & React.RefAttributes<HTMLElement>
->;
-
-/**
- * Factory function to create context-based components that don't use toConnectedComponent
- * These components rely on context provided by a parent component.
- *
- * @param usePropsHook - Hook that enhances props with context-derived values
- * @param defaultRender - Default render function for the component
- * @param displayName - Display name for React DevTools
- * @returns Context-based component with customizable render prop
- */
-export function toContextComponent<
-  TProps extends Record<string, any>,
-  TResultProps extends Record<string, any>,
-  TRenderFn extends (props: TResultProps, context: any) => ReactElement,
->(
-  usePropsHook: (props: TProps, context: ReturnType<StateHookFn<TProps>>) => TResultProps,
-  defaultRender: TRenderFn,
-  displayName: string,
-): ContextComponent<TProps, TRenderFn> {
-  const ContextComponent = forwardRef<HTMLElement, TProps & { render?: TRenderFn }>(
-    ({ render = defaultRender, ...props }, ref) => {
-      const context = useContext(Context);
-      const propsWithRef = ref ? { ...props, ref } : props;
-      const contextProps = usePropsHook(propsWithRef as unknown as TProps, context);
-      return render(contextProps, context);
-    },
-  );
-
-  ContextComponent.displayName = displayName;
-
-  return ContextComponent;
-}
-
-/**
- * Type helper to infer the context component type from the factory
- */
-export type ContextComponent<
-  TProps extends Record<string, any>,
-  TRenderFn extends (props: any, context: any) => ReactElement,
-> = React.ForwardRefExoticComponent<
-  React.PropsWithoutRef<TProps & { render?: TRenderFn }> & React.RefAttributes<any>
->;
-
-/**
- * Hook that manages a CoreClass instance and triggers re-renders when state changes.
- * Uses useSyncExternalStore for optimal performance with external state subscriptions.
- */
-export function useCore<
-  T extends {
-    subscribe: (callback: (state: any) => void) => () => void;
-    getState: () => any;
-    setState: (state: any) => void;
-  },
->(CoreClass: new () => T, state: any): ReturnType<T['getState']> {
-  const coreRef = useRef<T | null>(null);
-  const snapshotRef = useRef<any>(null);
-
-  // Initialize the core instance
-  if (!coreRef.current) {
-    coreRef.current = new CoreClass();
-    snapshotRef.current = coreRef.current.getState();
-  }
-
-  useEffect(() => {
-    coreRef.current?.setState(state);
-  }, [...Object.values(state)]);
-
-  // Use useSyncExternalStore to subscribe to state changes
-  useSyncExternalStore(
-    useCallback((onStoreChange) => {
-      if (!coreRef.current) return () => {};
-      return coreRef.current.subscribe((newState) => {
-        snapshotRef.current = newState;
-        onStoreChange();
-      });
-    }, []),
-    useCallback(() => {
-      return snapshotRef.current;
-    }, []),
-    () => null, // server snapshot
-  );
-
-  return coreRef.current.getState();
-}
diff --git a/packages/__tech-preview__/react/src/utils/use-composed-refs.ts b/packages/__tech-preview__/react/src/utils/use-composed-refs.ts
deleted file mode 100644
index 7e1228b7..00000000
--- a/packages/__tech-preview__/react/src/utils/use-composed-refs.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from 'react';
-
-type PossibleRef<T> = React.Ref<T> | undefined;
-
-/**
- * Set a given ref to a given value
- * This utility takes care of different types of refs: callback refs and RefObject(s)
- */
-function setRef<T>(ref: PossibleRef<T>, value: T): (() => void) | void | undefined {
-  if (typeof ref === 'function') {
-    return ref(value);
-  } else if (ref !== null && ref !== undefined) {
-    (ref as React.MutableRefObject<T>).current = value;
-  }
-}
-
-/**
- * A utility to compose multiple refs together
- * Accepts callback refs and RefObject(s)
- */
-function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
-  return (node) => {
-    let hasCleanup = false;
-    const cleanups = refs.map((ref) => {
-      const cleanup = setRef(ref, node);
-      if (!hasCleanup && typeof cleanup == 'function') {
-        hasCleanup = true;
-      }
-      return cleanup;
-    });
-
-    // React <19 will log an error to the console if a callback ref returns a
-    // value. We don't use ref cleanups internally so this will only happen if a
-    // user's ref callback returns a value, which we only expect if they are
-    // using the cleanup functionality added in React 19.
-    if (hasCleanup) {
-      return () => {
-        for (let i = 0; i < cleanups.length; i++) {
-          const cleanup = cleanups[i];
-          if (typeof cleanup == 'function') {
-            cleanup();
-          } else {
-            setRef(refs[i], null);
-          }
-        }
-      };
-    }
-  };
-}
-
-/**
- * A custom hook that composes multiple refs
- * Accepts callback refs and RefObject(s)
- */
-function useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
-  return React.useCallback(composeRefs(...refs), [...refs]);
-}
-
-export { composeRefs, useComposedRefs };
diff --git a/packages/__tech-preview__/react/src/utils/use-mutation-observer.ts b/packages/__tech-preview__/react/src/utils/use-mutation-observer.ts
deleted file mode 100644
index 214ca991..00000000
--- a/packages/__tech-preview__/react/src/utils/use-mutation-observer.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import type { RefObject } from 'react';
-import { useEffect, useRef } from 'react';
-
-/**
- * Custom React hook for observing DOM mutations using MutationObserver
- *
- * @param target - Element to observe (ref or element)
- * @param callback - Function called when mutations occur
- * @param options - MutationObserver options
- */
-export function useMutationObserver<T extends Element = Element>(
-  target: RefObject<T> | T | null | undefined,
-  callback: MutationCallback,
-  options: MutationObserverInit = {
-    attributes: true,
-    childList: true,
-    subtree: true,
-  },
-): void {
-  const callbackRef = useRef(callback);
-
-  useEffect(() => {
-    callbackRef.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    const element = target && 'current' in target ? target.current : target;
-
-    if (!element || !(element instanceof Element)) {
-      return;
-    }
-
-    const observer = new MutationObserver((mutations, obs) => {
-      callbackRef.current(mutations, obs);
-    });
-
-    observer.observe(element, options);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [target, options]);
-}
diff --git a/packages/__tech-preview__/react/svgr.config.js b/packages/__tech-preview__/react/svgr.config.js
deleted file mode 100644
index 6ccbe482..00000000
--- a/packages/__tech-preview__/react/svgr.config.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import path from 'node:path';
-
-/** @type {import('@svgr/core').Config & { indexTemplate: (filePaths: { path: string }[]) => string }} */
-export default {
-  plugins: ['@svgr/plugin-jsx'],
-  typescript: true,
-  jsxRuntime: 'automatic',
-  icon: false, // Don't set height/width attributes.
-  expandProps: 'end',
-  svgProps: {
-    'aria-hidden': 'true',
-  },
-  replaceAttrValues: {
-    '#000': '{color}',
-    '#fff': '{color}',
-    black: '{color}',
-    white: '{color}',
-    currentColor: '{color}',
-  },
-  template: (variables, { tpl }) => {
-    return tpl`
-/**
- * @fileoverview Auto-generated React component from SVG
- *
- * This file is automatically generated by SVGR from SVG files located in:
- * packages/icons/assets/
- *
- * DO NOT EDIT THIS FILE DIRECTLY.
- *
- * To modify this icon:
- * 1. Edit the corresponding SVG file in packages/icons/assets/
- * 2. Run \`pnpm -F react generate:icons\` in this package to regenerate components
- *
- * @generated
- */
-import type { IconProps } from '../types';
-
-${variables.interfaces};
-
-const ${variables.componentName} = ({ color = 'currentColor', ...props }: IconProps): JSX.Element => (
-  ${variables.jsx}
-);
-
-${variables.exports};
-`;
-  },
-  indexTemplate: (filePaths) => {
-    const exportEntries = filePaths.map(({ path: filePath }) => {
-      const basename = path.basename(filePath, path.extname(filePath));
-      const componentName = /^\d/.test(basename) ? `Svg${basename}` : basename;
-      const iconName = `${componentName}Icon`;
-      return `export { default as ${iconName} } from './${basename}';`;
-    });
-
-    const header = `/**
- * @fileoverview Auto-generated index file for React icon components
- *
- * This file is automatically generated by SVGR from SVG files located in:
- * packages/icons/assets/
- *
- * DO NOT EDIT THIS FILE DIRECTLY.
- *
- * To modify icons or add new ones:
- * 1. Add/edit SVG files in packages/core/icons/assets/
- * 2. Run \`pnpm -F react generate:icons\` in this package to regenerate components
- *
- * @generated
- */
-`;
-
-    return `${header + exportEntries.join('\n')}\n`;
-  },
-};
diff --git a/packages/__tech-preview__/react/tsconfig.build.json b/packages/__tech-preview__/react/tsconfig.build.json
deleted file mode 100644
index b90fc83e..00000000
--- a/packages/__tech-preview__/react/tsconfig.build.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "include": ["src"]
-}
diff --git a/packages/__tech-preview__/react/tsconfig.json b/packages/__tech-preview__/react/tsconfig.json
deleted file mode 100644
index 7e899578..00000000
--- a/packages/__tech-preview__/react/tsconfig.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "extends": "../../../tsconfig.base.json",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "react",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  },
-  "include": ["src"]
-}
diff --git a/packages/__tech-preview__/react/tsdown.config.ts b/packages/__tech-preview__/react/tsdown.config.ts
deleted file mode 100644
index 8f5abba8..00000000
--- a/packages/__tech-preview__/react/tsdown.config.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { existsSync, readdirSync } from 'node:fs';
-import { fileURLToPath } from 'node:url';
-import { defineConfig } from 'tsdown';
-import buildStyles from './build/build-styles.ts';
-
-const GENERATED_ICONS_DIR = fileURLToPath(new URL('./src/icons/generated-icons', import.meta.url));
-
-function hasGeneratedIcons(): boolean {
-  if (!existsSync(GENERATED_ICONS_DIR)) return false;
-  const files = readdirSync(GENERATED_ICONS_DIR);
-  return files.some((f) => f.endsWith('.tsx'));
-}
-
-export default defineConfig({
-  entry: {
-    index: './src/index.ts',
-    store: './src/store/index.ts',
-    icons: './src/icons/index.ts',
-    'skins/frosted': './src/skins/frosted/index.ts',
-    'skins/minimal': './src/skins/minimal/index.ts',
-  },
-  platform: 'browser',
-  format: 'es',
-  sourcemap: true,
-  clean: true,
-  alias: {
-    '@': fileURLToPath(new URL('./src', import.meta.url)),
-  },
-  dts: {
-    oxc: true,
-  },
-  hooks: {
-    'build:prepare': async () => {
-      // Generated icons are committed to git due to @svgr/cli having a bug where it
-      // unconditionally requires 'prettier' at module load time (before parsing CLI args),
-      // which fails in pnpm's strict dependency isolation. Skip generation if icons exist.
-      // To regenerate: pnpm -F @videojs/react-preview generate:icons
-      if (hasGeneratedIcons()) return;
-      throw new Error(
-        'Generated icons not found. Run: pnpm -F @videojs/react-preview generate:icons',
-      );
-    },
-    'build:done': async () => {
-      await buildStyles();
-    },
-  },
-  loader: {
-    '.svg': 'text',
-  },
-});
\ No newline at end of file
diff --git a/packages/__tech-preview__/utils/CHANGELOG.md b/packages/__tech-preview__/utils/CHANGELOG.md
deleted file mode 100644
index 2bca5e0f..00000000
--- a/packages/__tech-preview__/utils/CHANGELOG.md
+++ /dev/null
@@ -1,84 +0,0 @@
-# Changelog
-
-## [0.1.0-preview.10](https://github.com/videojs/v10/compare/@videojs/utils@0.1.0-preview.9...@videojs/utils@0.1.0-preview.10) (2025-12-06)
-
-
-### Features
-
-* add console banner ([#186](https://github.com/videojs/v10/issues/186)) ([072b0de](https://github.com/videojs/v10/commit/072b0dece76289d7d4215907ce70b36debbb78bc))
-* add tooltip core ([#212](https://github.com/videojs/v10/issues/212)) ([cbf41ce](https://github.com/videojs/v10/commit/cbf41ce4c750cd5c3bb6cbf247bad91ccd578cd0))
-
-
-### Bug Fixes
-
-* add popover core, use in html and improve factory ([#204](https://github.com/videojs/v10/issues/204)) ([f3b1b19](https://github.com/videojs/v10/commit/f3b1b199173f3750bc05ad9063fcccbd4163b12b))
-* toKebabCase import issue ([c4f1012](https://github.com/videojs/v10/commit/c4f1012f4619bf41cc4e4deae08f882da1b56fc3))
-
-## [0.1.0-preview.9](https://github.com/videojs/v10/compare/@videojs/utils@0.1.0-preview.8...@videojs/utils@0.1.0-preview.9) (2025-11-18)
-
-
-### Miscellaneous Chores
-
-* **@videojs/utils:** Synchronize videojs versions
-
-## [0.1.0-preview.8](https://github.com/videojs/v10/compare/@videojs/utils@0.1.0-preview.7...@videojs/utils@0.1.0-preview.8) (2025-11-12)
-
-
-### Miscellaneous Chores
-
-* **@videojs/utils:** Synchronize videojs versions
-
-## [0.1.0-preview.7](https://github.com/videojs/v10/compare/@videojs/utils@0.1.0-preview.6...@videojs/utils@0.1.0-preview.7) (2025-11-11)
-
-
-### Features
-
-* use anchor API for html elements ([#174](https://github.com/videojs/v10/issues/174)) ([4a2d580](https://github.com/videojs/v10/commit/4a2d580bb3db35d17d89827326617d0bd2c54499))
-
-## [0.1.0-preview.6](https://github.com/videojs/v10/compare/@videojs/utils@0.1.0-preview.5...@videojs/utils@0.1.0-preview.6) (2025-11-06)
-
-
-### Bug Fixes
-
-* **site:** update discord link ([#170](https://github.com/videojs/v10/issues/170)) ([bb10294](https://github.com/videojs/v10/commit/bb10294419439fb02df650f3e7f7c5496ecc3a73))
-
-## [0.1.0-preview.5](https://github.com/videojs/v10/compare/@videojs/utils@0.1.0-preview.4...@videojs/utils@0.1.0-preview.5) (2025-11-03)
-
-
-### Miscellaneous Chores
-
-* **@videojs/utils:** Synchronize videojs versions
-
-## [0.1.0-preview.4](https://github.com/videojs/v10/compare/@videojs/utils@0.1.0-preview.3...@videojs/utils@0.1.0-preview.4) (2025-10-30)
-
-
-### Miscellaneous Chores
-
-* **@videojs/utils:** Synchronize videojs versions
-
-## [0.1.0-preview.3](https://github.com/videojs/v10/compare/@videojs/utils@0.1.0-preview.2...@videojs/utils@0.1.0-preview.3) (2025-10-29)
-
-
-### Features
-
-* idiomatic html markup, use popover API, add safe polygon utility ([#143](https://github.com/videojs/v10/issues/143)) ([419911f](https://github.com/videojs/v10/commit/419911f2f2b9f505700f5becb623bfe12e3878aa))
-
-
-### Bug Fixes
-
-* **packages:** update version badges ([#138](https://github.com/videojs/v10/issues/138)) ([22d9cb6](https://github.com/videojs/v10/commit/22d9cb64f2e5b9601a2039bb166dbe3fee6a1b3e))
-* **utils:** remove unnecessary keyboard utils ([#146](https://github.com/videojs/v10/issues/146)) ([b737758](https://github.com/videojs/v10/commit/b737758453c7a932c646137d92bb5303e251ca4b))
-
-## [0.1.0-preview.2](https://github.com/videojs/v10/compare/@videojs/utils@0.1.0-preview.1...@videojs/utils@0.1.0-preview.2) (2025-10-25)
-
-
-### Miscellaneous Chores
-
-* **@videojs/utils:** Synchronize videojs versions
-
-## [0.1.0-preview.1](https://github.com/videojs/v10/compare/@videojs/utils@0.1.0-preview.0...@videojs/utils@0.1.0-preview.1) (2025-10-25)
-
-
-### Bug Fixes
-
-* **root:** add videojs keyword to package.json ([4a9f8b2](https://github.com/videojs/v10/commit/4a9f8b2ad6fb27b463dcfe8d1a5fd883c9fa21d1))
diff --git a/packages/__tech-preview__/utils/README.md b/packages/__tech-preview__/utils/README.md
deleted file mode 100644
index 15552df8..00000000
--- a/packages/__tech-preview__/utils/README.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# @videojs/utils
-
-[![package-badge]][package]
-
-> **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use.
-
-## Community
-
-If you need help with anything related to Video.js 10, or if you'd like to casually chat with other
-members:
-
-- [Join Discord Server][discord]
-- [See GitHub Discussions][gh-discussions]
-
-## License
-
-[Apache-2.0](./LICENSE)
-
-[package]: https://www.npmjs.com/package/@videojs/utils
-[package-badge]: https://img.shields.io/npm/v/@videojs/react/utils?label=@videojs/react@utils
-[discord]: https://discord.gg/JBqHh485uF
-[gh-discussions]: https://github.com/videojs/v10/discussions
diff --git a/packages/__tech-preview__/utils/package.json b/packages/__tech-preview__/utils/package.json
deleted file mode 100644
index fdb934b4..00000000
--- a/packages/__tech-preview__/utils/package.json
+++ /dev/null
@@ -1,47 +0,0 @@
-{
-  "name": "@videojs/utils-preview",
-  "type": "module",
-  "version": "0.1.0-preview.10",
-  "description": "Utility functions and helpers for Video.js",
-  "license": "Apache-2.0",
-  "keywords": [
-    "media",
-    "playback",
-    "engine",
-    "hls",
-    "dash",
-    "streaming",
-    "utils",
-    "videojs"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./dom": {
-      "types": "./dist/dom.d.ts",
-      "default": "./dist/dom.js"
-    }
-  },
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsdown",
-    "build:watch": "tsdown --watch --silent",
-    "dev": "pnpm run build:watch",
-    "test": "echo \"No tests yet\"",
-    "clean": "rm -rf dist"
-  },
-  "devDependencies": {
-    "tsdown": "^0.15.9",
-    "typescript": "^5.9.3"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
diff --git a/packages/__tech-preview__/utils/src/dom/attributes.ts b/packages/__tech-preview__/utils/src/dom/attributes.ts
deleted file mode 100644
index 5603009a..00000000
--- a/packages/__tech-preview__/utils/src/dom/attributes.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Converts a `NamedNodeMap` to a plain object.
- */
-export function namedNodeMapToObject(namedNodeMap: NamedNodeMap): Record<string, string> {
-  const obj: Record<string, string> = {};
-
-  for (const attr of namedNodeMap) {
-    obj[attr.name] = attr.value;
-  }
-
-  return obj;
-}
-
-/**
- * Sets multiple attributes on an element and handles boolean attributes appropriately.
- *
- * @param element - The element to set attributes on.
- * @param attributes - The attributes to set.
- */
-export function setAttributes(element: HTMLElement, attributes: Record<string, any>): void {
-  for (const [key, value] of Object.entries(attributes)) {
-    if (key === 'style' && typeof value === 'object') {
-      for (const [styleKey, styleValue] of Object.entries(value)) {
-        if (typeof styleValue === 'string') {
-          element.style.setProperty(toKebabCase(styleKey), styleValue);
-        } else if (styleValue == null) {
-          element.style.removeProperty(toKebabCase(styleKey));
-        }
-      }
-    } else {
-      if (typeof value === 'boolean') {
-        element.toggleAttribute(key, value);
-      } else if (value === undefined) {
-        element.removeAttribute(key);
-      } else {
-        element.setAttribute(key, value);
-      }
-    }
-  }
-}
-
-function toKebabCase(str: string): string {
-  return str
-    .replace(/([A-Z])/g, '-$1')
-    .toLowerCase();
-}
diff --git a/packages/__tech-preview__/utils/src/dom/element.ts b/packages/__tech-preview__/utils/src/dom/element.ts
deleted file mode 100644
index 01eb1c68..00000000
--- a/packages/__tech-preview__/utils/src/dom/element.ts
+++ /dev/null
@@ -1,197 +0,0 @@
-/**
- * Get the active element, accounting for Shadow DOM subtrees.
- *
- * @param root - The root node to search for the active element.
- */
-export function activeElement(root: Document = document): Element | null {
-  let element = root.activeElement;
-
-  while (element?.shadowRoot?.activeElement != null) {
-    element = element.shadowRoot.activeElement;
-  }
-
-  return element;
-}
-
-/**
- * Gets the document or shadow root of a node, not the node itself which can lead to bugs.
- * https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode#return_value
- * @param node - The node to get the root node from.
- */
-export function getDocumentOrShadowRoot(node: Node): Document | ShadowRoot | null {
-  const rootNode = node?.getRootNode?.();
-  if (rootNode instanceof ShadowRoot || rootNode instanceof Document) {
-    return rootNode;
-  }
-  return null;
-}
-
-export function getDocument(node?: Element | null): Document {
-  return node?.ownerDocument ?? document;
-}
-
-export function isElement(value: unknown): value is Element {
-  if (!hasWindow()) {
-    return false;
-  }
-
-  return value instanceof Element || value instanceof getWindow(value).Element;
-}
-
-export function contains(parent?: Element | null, child?: Element | null): boolean {
-  if (!parent || !child) {
-    return false;
-  }
-
-  const rootNode = child.getRootNode?.();
-
-  // First, attempt with faster native method
-  if (parent.contains(child)) {
-    return true;
-  }
-
-  // then fallback to custom implementation with Shadow DOM support
-  if (rootNode && isShadowRoot(rootNode)) {
-    let next = child;
-    while (next) {
-      if (parent === next) {
-        return true;
-      }
-      // @ts-expect-error - next.host is not defined in the type
-      next = next.parentNode || next.host;
-    }
-  }
-
-  // Give up, the result is false
-  return false;
-}
-
-export function getTarget(event: Event): EventTarget | null {
-  if ('composedPath' in event) {
-    return event.composedPath()[0] ?? null;
-  }
-
-  // TS thinks `event` is of type never as it assumes all browsers support
-  // `composedPath()`, but browsers without shadow DOM don't.
-  return (event as Event).target;
-}
-
-export function isShadowRoot(value: unknown): value is ShadowRoot {
-  if (!hasWindow() || typeof ShadowRoot === 'undefined') {
-    return false;
-  }
-
-  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
-}
-
-function hasWindow() {
-  return typeof window !== 'undefined';
-}
-
-export function getWindow(node: any): typeof window {
-  return node?.ownerDocument?.defaultView || window;
-}
-
-export interface FloatingNodeType {
-  id: string;
-  parentId: string | null;
-  context: FloatingContext;
-}
-
-interface FloatingContext {
-  open: boolean;
-}
-
-export function getNodeChildren(
-  nodes: Array<FloatingNodeType>,
-  id: string | undefined,
-  onlyOpenChildren = true,
-): Array<FloatingNodeType> {
-  const directChildren = nodes.filter(node => node.parentId === id && (!onlyOpenChildren || node.context?.open));
-  return directChildren.flatMap(child => [child, ...getNodeChildren(nodes, child.id, onlyOpenChildren)]);
-}
-
-export function getUntransformedBoundingRect(element: HTMLElement): DOMRect {
-  let el = element;
-  let left = 0;
-  let top = 0;
-
-  do {
-    left += el.offsetLeft;
-    top += el.offsetTop;
-    el = el.offsetParent as HTMLElement;
-  } while (el);
-
-  return {
-    x: left,
-    y: top,
-    left,
-    top,
-    bottom: top + element.offsetHeight,
-    right: left + element.offsetWidth,
-    width: element.offsetWidth,
-    height: element.offsetHeight,
-  } as DOMRect;
-}
-
-export function addTranslateToBoundingRect(rect: DOMRect, element: HTMLElement): DOMRect {
-  // Get translate from transform
-  const style = getWindow(element).getComputedStyle(element);
-  const translate = style.translate;
-  if (translate && translate !== 'none') {
-    const values = translate.split(' ');
-
-    // Parse translateX (can be px, %, etc)
-    const translateX = parseTranslateValue(values[0] ?? '0', element.offsetWidth);
-    const translateY = parseTranslateValue(values[1] ?? '0', element.offsetHeight);
-
-    return {
-      ...rect,
-      left: rect.left + translateX,
-      top: rect.top + translateY,
-    };
-  }
-
-  return rect;
-}
-
-function parseTranslateValue(value: string, referenceSize: number): number {
-  if (value.endsWith('%')) {
-    return (Number.parseFloat(value) / 100) * referenceSize;
-  }
-  if (value.endsWith('px')) {
-    return Number.parseFloat(value);
-  }
-  // Handle other units like em, rem, etc if needed
-  return Number.parseFloat(value) || 0;
-}
-
-export function getInBoundsAdjustments(
-  popupRect: DOMRect,
-  containerRect: DOMRect,
-  collisionPadding: number,
-): { x: number; y: number } {
-  const bounds = {
-    top: containerRect.top + collisionPadding,
-    right: containerRect.right - collisionPadding,
-    bottom: containerRect.bottom - collisionPadding,
-    left: containerRect.left + collisionPadding,
-  };
-
-  let x = 0;
-  let y = 0;
-
-  if (popupRect.left < bounds.left) {
-    x = bounds.left - popupRect.left;
-  } else if (popupRect.right > bounds.right) {
-    x = bounds.right - popupRect.right;
-  }
-
-  if (popupRect.top < bounds.top) {
-    y = bounds.top - popupRect.top;
-  } else if (popupRect.bottom > bounds.bottom) {
-    y = bounds.bottom - popupRect.bottom;
-  }
-
-  return { x, y };
-}
diff --git a/packages/__tech-preview__/utils/src/dom/event.ts b/packages/__tech-preview__/utils/src/dom/event.ts
deleted file mode 100644
index cfc53420..00000000
--- a/packages/__tech-preview__/utils/src/dom/event.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export function isOutsideEvent(event: FocusEvent, container?: Element): boolean {
-  const containerElement = container || (event.currentTarget as Element);
-  const relatedTarget = event.relatedTarget as HTMLElement | null;
-  return !relatedTarget || !containerElement.contains(relatedTarget);
-}
diff --git a/packages/__tech-preview__/utils/src/dom/index.ts b/packages/__tech-preview__/utils/src/dom/index.ts
deleted file mode 100644
index 5f1a1442..00000000
--- a/packages/__tech-preview__/utils/src/dom/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './attributes';
-export * from './element';
-export * from './event';
-export * from './safe-polygon';
-export * from './shadow-dom';
diff --git a/packages/__tech-preview__/utils/src/dom/safe-polygon.ts b/packages/__tech-preview__/utils/src/dom/safe-polygon.ts
deleted file mode 100644
index 9d80ff3f..00000000
--- a/packages/__tech-preview__/utils/src/dom/safe-polygon.ts
+++ /dev/null
@@ -1,445 +0,0 @@
-import type { FloatingNodeType } from './element';
-import { contains, getNodeChildren, getTarget, isElement } from './element';
-
-type Point = [number, number];
-type Polygon = Point[];
-
-interface Rect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-interface HandleClose {
-  (context: HandleCloseContext): (event: MouseEvent) => void;
-  __options?: SafePolygonOptions;
-}
-
-interface HandleCloseContext {
-  x: number;
-  y: number;
-  placement: string;
-  elements: Elements;
-  onClose: () => void;
-  nodeId?: string;
-  tree?: {
-    nodesRef: {
-      current: Array<FloatingNodeType>;
-    };
-  };
-}
-
-interface Elements {
-  domReference: HTMLElement;
-  floating: HTMLElement;
-}
-
-type Side = 'top' | 'right' | 'bottom' | 'left';
-
-function clearTimeoutIfSet(timeoutRef: { current: number }) {
-  if (timeoutRef.current !== -1) {
-    clearTimeout(timeoutRef.current);
-    timeoutRef.current = -1;
-  }
-}
-
-function isPointInPolygon(point: Point, polygon: Polygon) {
-  const [x, y] = point;
-  let isInside = false;
-  const length = polygon.length;
-  for (let i = 0, j = length - 1; i < length; j = i++) {
-    const [xi, yi] = polygon[i] || [0, 0];
-    const [xj, yj] = polygon[j] || [0, 0];
-    const intersect
-      = (yi >= y) !== (yj >= y) && x <= ((xj - xi) * (y - yi)) / (yj - yi) + xi;
-    if (intersect) {
-      isInside = !isInside;
-    }
-  }
-  return isInside;
-}
-
-function isInside(point: Point, rect: Rect) {
-  return (
-    point[0] >= rect.x
-    && point[0] <= rect.x + rect.width
-    && point[1] >= rect.y
-    && point[1] <= rect.y + rect.height
-  );
-}
-
-export interface SafePolygonOptions {
-  buffer?: number;
-  blockPointerEvents?: boolean;
-  requireIntent?: boolean;
-}
-
-/**
- * Generates a safe polygon area that the user can traverse without closing the
- * floating element once leaving the reference element.
- * @see https://floating-ui.com/docs/useHover#safepolygon
- */
-export function safePolygon(options: SafePolygonOptions = {}): HandleClose {
-  const {
-    buffer = 0.5,
-    blockPointerEvents = false,
-    requireIntent = true,
-  } = options;
-
-  const timeoutRef = { current: -1 };
-
-  let hasLanded = false;
-  let lastX: number | null = null;
-  let lastY: number | null = null;
-  let lastCursorTime
-    = typeof performance !== 'undefined' ? performance.now() : 0;
-
-  function getCursorSpeed(x: number, y: number): number | null {
-    const currentTime = performance.now();
-    const elapsedTime = currentTime - lastCursorTime;
-
-    if (lastX === null || lastY === null || elapsedTime === 0) {
-      lastX = x;
-      lastY = y;
-      lastCursorTime = currentTime;
-      return null;
-    }
-
-    const deltaX = x - lastX;
-    const deltaY = y - lastY;
-    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-    const speed = distance / elapsedTime; // px / ms
-
-    lastX = x;
-    lastY = y;
-    lastCursorTime = currentTime;
-
-    return speed;
-  }
-
-  const fn: HandleClose = ({
-    x,
-    y,
-    placement,
-    elements,
-    onClose,
-    nodeId,
-    tree,
-  }) => {
-    return function onMouseMove(event: MouseEvent) {
-      function close() {
-        clearTimeoutIfSet(timeoutRef);
-        onClose();
-      }
-
-      clearTimeoutIfSet(timeoutRef);
-
-      if (
-        !elements.domReference
-        || !elements.floating
-        || placement == null
-        || x == null
-        || y == null
-      ) {
-        return;
-      }
-
-      const { clientX, clientY } = event;
-      const clientPoint: Point = [clientX, clientY];
-      const target = getTarget(event) as Element | null;
-      const isLeave = event.type === 'mouseleave';
-      const isOverFloatingEl = contains(elements.floating, target);
-      const isOverReferenceEl = contains(elements.domReference, target);
-      const refRect = elements.domReference.getBoundingClientRect();
-      const rect = elements.floating.getBoundingClientRect();
-      const side = placement.split('-')[0] as Side;
-      const cursorLeaveFromRight = x > rect.right - rect.width / 2;
-      const cursorLeaveFromBottom = y > rect.bottom - rect.height / 2;
-      const isOverReferenceRect = isInside(clientPoint, refRect);
-      const isFloatingWider = rect.width > refRect.width;
-      const isFloatingTaller = rect.height > refRect.height;
-      const left = (isFloatingWider ? refRect : rect).left;
-      const right = (isFloatingWider ? refRect : rect).right;
-      const top = (isFloatingTaller ? refRect : rect).top;
-      const bottom = (isFloatingTaller ? refRect : rect).bottom;
-
-      if (isOverFloatingEl) {
-        hasLanded = true;
-
-        if (!isLeave) {
-          return;
-        }
-      }
-
-      if (isOverReferenceEl) {
-        hasLanded = false;
-      }
-
-      if (isOverReferenceEl && !isLeave) {
-        hasLanded = true;
-        return;
-      }
-
-      // Prevent overlapping floating element from being stuck in an open-close
-      // loop: https://github.com/floating-ui/floating-ui/issues/1910
-      if (
-        isLeave
-        && isElement(event.relatedTarget)
-        && contains(elements.floating, event.relatedTarget)
-      ) {
-        return;
-      }
-
-      // If any nested child is open, abort.
-      if (tree && getNodeChildren(tree.nodesRef.current, nodeId).length) {
-        return;
-      }
-
-      // If the pointer is leaving from the opposite side, the "buffer" logic
-      // creates a point where the floating element remains open, but should be
-      // ignored.
-      // A constant of 1 handles floating point rounding errors.
-      if (
-        (side === 'top' && y >= refRect.bottom - 1)
-        || (side === 'bottom' && y <= refRect.top + 1)
-        || (side === 'left' && x >= refRect.right - 1)
-        || (side === 'right' && x <= refRect.left + 1)
-      ) {
-        return close();
-      }
-
-      // Ignore when the cursor is within the rectangular trough between the
-      // two elements. Since the triangle is created from the cursor point,
-      // which can start beyond the ref element's edge, traversing back and
-      // forth from the ref to the floating element can cause it to close. This
-      // ensures it always remains open in that case.
-      let rectPoly: Point[] = [];
-
-      switch (side) {
-        case 'top':
-          rectPoly = [
-            [left, refRect.top + 1],
-            [left, rect.bottom - 1],
-            [right, rect.bottom - 1],
-            [right, refRect.top + 1],
-          ];
-          break;
-        case 'bottom':
-          rectPoly = [
-            [left, rect.top + 1],
-            [left, refRect.bottom - 1],
-            [right, refRect.bottom - 1],
-            [right, rect.top + 1],
-          ];
-          break;
-        case 'left':
-          rectPoly = [
-            [rect.right - 1, bottom],
-            [rect.right - 1, top],
-            [refRect.left + 1, top],
-            [refRect.left + 1, bottom],
-          ];
-          break;
-        case 'right':
-          rectPoly = [
-            [refRect.right - 1, bottom],
-            [refRect.right - 1, top],
-            [rect.left + 1, top],
-            [rect.left + 1, bottom],
-          ];
-          break;
-        default:
-          rectPoly = [];
-          break;
-      }
-
-      function getPolygon([x, y]: Point): Array<Point> {
-        switch (side) {
-          case 'top': {
-            const cursorPointOne: Point = [
-              isFloatingWider
-                ? x + buffer / 2
-                : cursorLeaveFromRight
-                  ? x + buffer * 4
-                  : x - buffer * 4,
-              y + buffer + 1,
-            ];
-            const cursorPointTwo: Point = [
-              isFloatingWider
-                ? x - buffer / 2
-                : cursorLeaveFromRight
-                  ? x + buffer * 4
-                  : x - buffer * 4,
-              y + buffer + 1,
-            ];
-            const commonPoints: [Point, Point] = [
-              [
-                rect.left,
-                cursorLeaveFromRight
-                  ? rect.bottom - buffer
-                  : isFloatingWider
-                    ? rect.bottom - buffer
-                    : rect.top,
-              ],
-              [
-                rect.right,
-                cursorLeaveFromRight
-                  ? isFloatingWider
-                    ? rect.bottom - buffer
-                    : rect.top
-                  : rect.bottom - buffer,
-              ],
-            ];
-
-            return [cursorPointOne, cursorPointTwo, ...commonPoints];
-          }
-          case 'bottom': {
-            const cursorPointOne: Point = [
-              isFloatingWider
-                ? x + buffer / 2
-                : cursorLeaveFromRight
-                  ? x + buffer * 4
-                  : x - buffer * 4,
-              y - buffer,
-            ];
-            const cursorPointTwo: Point = [
-              isFloatingWider
-                ? x - buffer / 2
-                : cursorLeaveFromRight
-                  ? x + buffer * 4
-                  : x - buffer * 4,
-              y - buffer,
-            ];
-            const commonPoints: [Point, Point] = [
-              [
-                rect.left,
-                cursorLeaveFromRight
-                  ? rect.top + buffer
-                  : isFloatingWider
-                    ? rect.top + buffer
-                    : rect.bottom,
-              ],
-              [
-                rect.right,
-                cursorLeaveFromRight
-                  ? isFloatingWider
-                    ? rect.top + buffer
-                    : rect.bottom
-                  : rect.top + buffer,
-              ],
-            ];
-
-            return [cursorPointOne, cursorPointTwo, ...commonPoints];
-          }
-          case 'left': {
-            const cursorPointOne: Point = [
-              x + buffer + 1,
-              isFloatingTaller
-                ? y + buffer / 2
-                : cursorLeaveFromBottom
-                  ? y + buffer * 4
-                  : y - buffer * 4,
-            ];
-            const cursorPointTwo: Point = [
-              x + buffer + 1,
-              isFloatingTaller
-                ? y - buffer / 2
-                : cursorLeaveFromBottom
-                  ? y + buffer * 4
-                  : y - buffer * 4,
-            ];
-            const commonPoints: [Point, Point] = [
-              [
-                cursorLeaveFromBottom
-                  ? rect.right - buffer
-                  : isFloatingTaller
-                    ? rect.right - buffer
-                    : rect.left,
-                rect.top,
-              ],
-              [
-                cursorLeaveFromBottom
-                  ? isFloatingTaller
-                    ? rect.right - buffer
-                    : rect.left
-                  : rect.right - buffer,
-                rect.bottom,
-              ],
-            ];
-
-            return [...commonPoints, cursorPointOne, cursorPointTwo];
-          }
-          case 'right': {
-            const cursorPointOne: Point = [
-              x - buffer,
-              isFloatingTaller
-                ? y + buffer / 2
-                : cursorLeaveFromBottom
-                  ? y + buffer * 4
-                  : y - buffer * 4,
-            ];
-            const cursorPointTwo: Point = [
-              x - buffer,
-              isFloatingTaller
-                ? y - buffer / 2
-                : cursorLeaveFromBottom
-                  ? y + buffer * 4
-                  : y - buffer * 4,
-            ];
-            const commonPoints: [Point, Point] = [
-              [
-                cursorLeaveFromBottom
-                  ? rect.left + buffer
-                  : isFloatingTaller
-                    ? rect.left + buffer
-                    : rect.right,
-                rect.top,
-              ],
-              [
-                cursorLeaveFromBottom
-                  ? isFloatingTaller
-                    ? rect.left + buffer
-                    : rect.right
-                  : rect.left + buffer,
-                rect.bottom,
-              ],
-            ];
-
-            return [cursorPointOne, cursorPointTwo, ...commonPoints];
-          }
-          default:
-            return [[x, y]];
-        }
-      }
-
-      if (isPointInPolygon([clientX, clientY], rectPoly)) {
-        return;
-      }
-
-      if (hasLanded && !isOverReferenceRect) {
-        return close();
-      }
-
-      if (!isLeave && requireIntent) {
-        const cursorSpeed = getCursorSpeed(event.clientX, event.clientY);
-        const cursorSpeedThreshold = 0.1;
-        if (cursorSpeed !== null && cursorSpeed < cursorSpeedThreshold) {
-          return close();
-        }
-      }
-
-      if (!isPointInPolygon([clientX, clientY], getPolygon([x, y]))) {
-        close();
-      } else if (!hasLanded && requireIntent) {
-        timeoutRef.current = window.setTimeout(close, 40);
-      }
-    };
-  };
-
-  fn.__options = {
-    blockPointerEvents,
-  };
-
-  return fn;
-}
diff --git a/packages/__tech-preview__/utils/src/dom/shadow-dom.ts b/packages/__tech-preview__/utils/src/dom/shadow-dom.ts
deleted file mode 100644
index 3d4e38ce..00000000
--- a/packages/__tech-preview__/utils/src/dom/shadow-dom.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Utility function to check if a root node contains a child node across shadow DOM boundaries.
- */
-export function containsComposedNode(rootNode: Node, childNode: Node): boolean {
-  if (!rootNode || !childNode) return false;
-  if (rootNode?.contains(childNode)) return true;
-  const childRootNode = childNode.getRootNode();
-  if (childRootNode && 'host' in childRootNode && childRootNode.host) {
-    return containsComposedNode(rootNode, childRootNode.host as Node);
-  }
-  return false;
-}
diff --git a/packages/__tech-preview__/utils/src/dom/tsconfig.json b/packages/__tech-preview__/utils/src/dom/tsconfig.json
deleted file mode 100644
index fdae4c67..00000000
--- a/packages/__tech-preview__/utils/src/dom/tsconfig.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "composite": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"]
-  },
-  "include": ["./**/*.ts"]
-}
diff --git a/packages/__tech-preview__/utils/src/index.ts b/packages/__tech-preview__/utils/src/index.ts
deleted file mode 100644
index c80d0f4b..00000000
--- a/packages/__tech-preview__/utils/src/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export * from './shared/console';
-export * from './shared/crypto';
-export * from './shared/math';
-export * from './shared/memoize';
-export * from './shared/state';
-export * from './shared/string';
-export * from './shared/time';
-export * from './shared/unit';
diff --git a/packages/__tech-preview__/utils/src/shared/console.ts b/packages/__tech-preview__/utils/src/shared/console.ts
deleted file mode 100644
index ce188769..00000000
--- a/packages/__tech-preview__/utils/src/shared/console.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export function printConsoleBanner(version: string): void {
-  console.info(
-    `%c Video.js %c v${version}`,
-    `border-radius: 9999px;
-    background: #393836;
-    font: bold 1.5em/1.5em monospace;
-    color: #ebe4c1;
-    text-shadow: 1px 1px 0 #fcb116,
-      2px 2px 0 #f26222,
-      3px 3px 0 #ea3837,
-      4px 4px 0 #a83b71`,
-    `font: 1em monospace;`,
-  );
-
-  const prereleaseType = version.includes('preview') ? 'preview' : version.includes('alpha') ? 'alpha' : null;
-  if (prereleaseType) {
-    console.warn(
-      `%c This is a ${prereleaseType} release. Please use with caution.`,
-      `color: #f26222;`,
-    );
-  }
-
-  console.info(
-    '%cReport a Bug, Issue or Feature Request - https://github.com/videojs/v10/issues/new/choose',
-    'color: #aaa; font-size: .9em;',
-  );
-  console.info(
-    '%cReach out on Discord - https://discord.gg/JBqHh485uF',
-    'color: #aaa; font-size: .9em;',
-  );
-}
diff --git a/packages/__tech-preview__/utils/src/shared/crypto.ts b/packages/__tech-preview__/utils/src/shared/crypto.ts
deleted file mode 100644
index da2ffc11..00000000
--- a/packages/__tech-preview__/utils/src/shared/crypto.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-let id = 0;
-
-/**
- * Generates a unique ID for an element.
- */
-export function uniqueId(): string {
-  id++;
-  return `:h${id}:`;
-}
diff --git a/packages/__tech-preview__/utils/src/shared/math.ts b/packages/__tech-preview__/utils/src/shared/math.ts
deleted file mode 100644
index cd81719c..00000000
--- a/packages/__tech-preview__/utils/src/shared/math.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export interface Point {
-  x: number;
-  y: number;
-}
-
-/**
- * Get progress ratio of a point on a line segment.
- * @param x - The x coordinate of the point.
- * @param y - The y coordinate of the point.
- * @param p1 - The first point of the line segment.
- * @param p2 - The second point of the line segment.
- */
-export function getPointProgressOnLine(x: number, y: number, p1: Point, p2: Point): number {
-  const dx = p2.x - p1.x;
-  const dy = p2.y - p1.y;
-  const lengthSquared = dx * dx + dy * dy;
-
-  if (lengthSquared === 0) return 0; // Avoid division by zero if p1 === p2
-
-  const projection = ((x - p1.x) * dx + (y - p1.y) * dy) / lengthSquared;
-
-  return Math.max(0, Math.min(1, projection)); // Clamp between 0 and 1
-}
-
-export function distance(p1: Point, p2: Point): number {
-  return Math.sqrt((p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2);
-}
diff --git a/packages/__tech-preview__/utils/src/shared/memoize.ts b/packages/__tech-preview__/utils/src/shared/memoize.ts
deleted file mode 100644
index 135447f5..00000000
--- a/packages/__tech-preview__/utils/src/shared/memoize.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-// Adapted from https://github.com/caiogondim/fast-memoize.js - MIT License
-type MemoizedFunction<T extends (...args: any[]) => any> = (
-  ...args: Parameters<T>
-) => ReturnType<T>;
-
-interface MemoizedId {
-  $m: number;
-}
-
-interface MemoizedWithId {
-  $m?: number;
-}
-
-function isNode(x: unknown): boolean {
-  if (typeof globalThis === 'undefined') return false;
-  const NodeConstructor = (globalThis as { Node?: new () => unknown }).Node;
-  return NodeConstructor !== undefined && x instanceof NodeConstructor;
-}
-
-export function memoize<T extends (...args: any[]) => any>(
-  func: T,
-): MemoizedFunction<T> {
-  const cache: Record<string, ReturnType<T>> = {};
-  return function (this: unknown, ...args: Parameters<T>): ReturnType<T> {
-    const argsWithFuncIds = args.map((x) => {
-      if (isPlainObject(x) || Array.isArray(x)) {
-        const obj: Record<string, unknown> = {};
-        for (const key in x) {
-          obj[key] = memoizedIdFunc((x as Record<string, unknown>)[key]);
-        }
-        return obj;
-      }
-      return memoizedIdFunc(x);
-    });
-
-    const cacheKey = JSON.stringify(argsWithFuncIds);
-    const cachedValue = cache[cacheKey];
-    if (cachedValue !== undefined) {
-      return cachedValue;
-    }
-    const computedValue = func.apply(this, args);
-    cache[cacheKey] = computedValue;
-    return computedValue;
-  };
-}
-
-let id = 0;
-function memoizedIdFunc(x: unknown): unknown {
-  if (typeof x === 'function' || isNode(x)) {
-    const funcOrNode = x as MemoizedWithId;
-    if (!funcOrNode.$m) funcOrNode.$m = ++id;
-    return { $m: funcOrNode.$m } as MemoizedId;
-  }
-  return x;
-}
-
-/**
- * Check if this is a plain object.
- * @param {object} obj - The object to inspect.
- * @return {boolean}
- */
-function isPlainObject(obj: unknown): obj is Record<string, unknown> {
-  if (typeof obj !== 'object' || obj === null) return false;
-
-  let proto = obj;
-  while (Object.getPrototypeOf(proto) !== null) {
-    proto = Object.getPrototypeOf(proto);
-  }
-
-  return Object.getPrototypeOf(obj) === proto;
-}
diff --git a/packages/__tech-preview__/utils/src/shared/state.ts b/packages/__tech-preview__/utils/src/shared/state.ts
deleted file mode 100644
index 8ce3c436..00000000
--- a/packages/__tech-preview__/utils/src/shared/state.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Slightly modified version of React's shallowEqual, with optimizations for Arrays
- * so we may treat them specifically as unequal if they are not a) both arrays
- * or b) don't contain the same (shallowly compared) elements.
- */
-export function shallowEqual(objA: object, objB: object): boolean {
-  // Using Object.is as a first pass, as it covers a lot of the "simple" cases that are
-  // more complex than strict equality and is a built-in. For discussion, see, e.g.:
-  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#description
-  if (Object.is(objA, objB)) {
-    return true;
-  }
-
-  // Since we've done an Object.is() check immediately above, we can safely assume non-objects (or null-valued objects)
-  // are not equal, so can early bail for those as well.
-  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-    return false;
-  }
-
-  if (Array.isArray(objA)) {
-    // Early "cheap" array compares
-    if (!Array.isArray(objB) || objA.length !== objB.length) return false;
-    // Shallow compare for arrays
-    return objA.every((vVal, i) => objB[i] === vVal);
-  }
-
-  const keysA = Object.keys(objA);
-  const keysB = Object.keys(objB);
-
-  if (keysA.length !== keysB.length) {
-    return false;
-  }
-
-  // Test for A's keys different from B.
-  for (let i = 0; i < keysA.length; i++) {
-    // NOTE: Since we've already guaranteed the keys list lengths are the same, we can safely cast to string here (CJP)
-    if (
-      !globalThis.hasOwnProperty.call(objB, keysA[i] as string)
-      || !Object.is(objA[keysA[i] as string], objB[keysA[i] as string])
-    ) {
-      return false;
-    }
-  }
-
-  return true;
-}
diff --git a/packages/__tech-preview__/utils/src/shared/string.ts b/packages/__tech-preview__/utils/src/shared/string.ts
deleted file mode 100644
index de759e36..00000000
--- a/packages/__tech-preview__/utils/src/shared/string.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Converts a string to camel case.
- *
- * @param str - The string to convert.
- * @returns The camel case string.
- */
-export function toCamelCase(str: string): string {
-  return str
-    .toLowerCase()
-    .replace(/[-_]([a-z])/g, (_$0, $1) => $1.toUpperCase());
-}
-
-/**
- * Converts a string to kebab case.
- *
- * @param str - The string to convert.
- * @returns The kebab case string.
- */
-export function toKebabCase(str: string): string {
-  return str
-    .replace(/([A-Z])/g, '-$1')
-    .toLowerCase();
-}
diff --git a/packages/__tech-preview__/utils/src/shared/time.ts b/packages/__tech-preview__/utils/src/shared/time.ts
deleted file mode 100644
index 251476ed..00000000
--- a/packages/__tech-preview__/utils/src/shared/time.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-/**
- * Checks if a value is a valid number (not NaN, null, undefined, or Infinity)
- */
-function isValidNumber(value: unknown): value is number {
-  return typeof value === 'number' && Number.isFinite(value);
-}
-
-const UnitLabels = [
-  {
-    singular: 'hour',
-    plural: 'hours',
-  },
-  {
-    singular: 'minute',
-    plural: 'minutes',
-  },
-  {
-    singular: 'second',
-    plural: 'seconds',
-  },
-] as const;
-
-function toTimeUnitPhrase(timeUnitValue: number, unitIndex: number): string {
-  const unitLabel = timeUnitValue === 1 ? UnitLabels[unitIndex]?.singular : UnitLabels[unitIndex]?.plural;
-
-  return `${timeUnitValue} ${unitLabel}`;
-}
-
-/**
- * Converts numeric seconds into a human-readable phrase for accessibility.
- *
- * @param seconds - A (positive or negative) time, represented as seconds
- * @returns The time, represented as a phrase of hours, minutes, and seconds
- *
- * @example
- * formatAsTimePhrase(3661) // "1 hour, 1 minute, 1 second"
- * formatAsTimePhrase(90) // "1 minute, 30 seconds"
- * formatAsTimePhrase(-30) // "30 seconds remaining"
- */
-export function formatAsTimePhrase(seconds: number): string {
-  if (!isValidNumber(seconds)) return '';
-
-  const positiveSeconds = Math.abs(seconds);
-  const negative = positiveSeconds !== seconds;
-  const secondsDateTime = new Date(0, 0, 0, 0, 0, positiveSeconds, 0);
-  const timeParts = [secondsDateTime.getHours(), secondsDateTime.getMinutes(), secondsDateTime.getSeconds()];
-
-  const timeString = timeParts
-    // Convert non-0 values to a string of the value plus its unit
-    .map((timeUnitValue, index) => timeUnitValue && toTimeUnitPhrase(timeUnitValue, index))
-    // Ignore/exclude any 0 values
-    .filter(x => x)
-    // join into a single comma-separated string phrase
-    .join(', ');
-
-  // If the time was negative, assume it represents some remaining amount of time/"count down".
-  const negativeSuffix = negative ? ' remaining' : '';
-
-  return `${timeString}${negativeSuffix}`;
-}
-
-/**
- * Converts a time, in numeric seconds, to a formatted string representation
- * of the form [HH:[MM:]]SS, where hours and minutes are optional, either
- * based on the value of `seconds` or (optionally) based on the value of `guide`.
- *
- * @param seconds - The total time you'd like formatted, in seconds
- * @param guide - A number in seconds that represents how many units you'd want
- *   to show. This ensures consistent formatting between e.g. 35s and 4834s.
- * @returns A string representation of the time, with expected units
- *
- * @example
- * formatTime(90) // "1:30"
- * formatTime(3661) // "1:01:01"
- * formatTime(35, 3600) // "0:35" (guided by 1-hour duration)
- * formatTime(NaN) // "0:00"
- * formatTime(Infinity) // "0:00"
- */
-export function formatTime(seconds: number, guide?: number): string {
-  // Handle negative values
-  let negative = false;
-
-  if (seconds < 0) {
-    negative = true;
-    seconds = 0 - seconds;
-  }
-
-  seconds = seconds < 0 ? 0 : seconds;
-
-  let s: number | string = Math.floor(seconds % 60);
-  let m: number | string = Math.floor((seconds / 60) % 60);
-  let h: number | string = Math.floor(seconds / 3600);
-
-  const gm = guide ? Math.floor((guide / 60) % 60) : 0;
-  const gh = guide ? Math.floor(guide / 3600) : 0;
-
-  // Handle invalid times
-  if (Number.isNaN(seconds) || seconds === Infinity) {
-    // '-' is false for all relational operators (e.g. <, >=) so this setting
-    // will add the minimum number of fields specified by the guide
-    h = m = s = '0';
-  }
-
-  // Check if we need to show hours
-  const showHours = (h as number) > 0 || gh > 0;
-  const hoursString = showHours ? `${h}:` : '';
-
-  // If hours are showing, we may need to add a leading zero.
-  // Always show at least one digit of minutes.
-  const minutesString = `${(showHours || gm >= 10) && (m as number) < 10 ? `0${m}` : m}:`;
-
-  // Check if leading zero is needed for seconds
-  const secondsString = (s as number) < 10 ? `0${s}` : s;
-
-  return (negative ? '-' : '') + hoursString + minutesString + secondsString;
-}
-
-/**
- * Formats a time value with fallback handling for invalid values.
- *
- * @param time - The time value to format in seconds (duration, currentTime, etc.)
- * @param guide - Optional guide time for consistent formatting
- * @param fallback - Fallback text when time is invalid (default: "--:--")
- * @returns Formatted time string or fallback
- */
-export function formatDisplayTime(time: unknown, guide?: number, fallback: string = '--:--'): string {
-  if (!isValidNumber(time)) {
-    return fallback;
-  }
-  return formatTime(time, guide);
-}
diff --git a/packages/__tech-preview__/utils/src/shared/unit.ts b/packages/__tech-preview__/utils/src/shared/unit.ts
deleted file mode 100644
index fa561415..00000000
--- a/packages/__tech-preview__/utils/src/shared/unit.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function isValidNumber(value: any): value is number {
-  return typeof value === 'number' && !Number.isNaN(value) && Number.isFinite(value);
-}
diff --git a/packages/__tech-preview__/utils/tsconfig.build.json b/packages/__tech-preview__/utils/tsconfig.build.json
deleted file mode 100644
index b90fc83e..00000000
--- a/packages/__tech-preview__/utils/tsconfig.build.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "include": ["src"]
-}
diff --git a/packages/__tech-preview__/utils/tsconfig.json b/packages/__tech-preview__/utils/tsconfig.json
deleted file mode 100644
index c7a4846e..00000000
--- a/packages/__tech-preview__/utils/tsconfig.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "extends": "../../../tsconfig.base.json",
-  "compilerOptions": {
-    "composite": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  },
-  "references": [{ "path": "./src/dom" }],
-  "include": ["src"]
-}
diff --git a/packages/__tech-preview__/utils/tsdown.config.ts b/packages/__tech-preview__/utils/tsdown.config.ts
deleted file mode 100644
index 6ac667da..00000000
--- a/packages/__tech-preview__/utils/tsdown.config.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { defineConfig } from 'tsdown';
-
-export default defineConfig({
-  entry: {
-    index: './src/index.ts',
-    dom: './src/dom/index.ts',
-  },
-  platform: 'neutral',
-  format: 'es',
-  sourcemap: true,
-  clean: true,
-  alias: {
-    '@': new URL('./src', import.meta.url).pathname,
-  },
-  dts: {
-    oxc: true,
-  },
-});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fcf17b21..0ea7e971 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -66,117 +66,6 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
-  packages/__tech-preview__/core:
-    dependencies:
-      '@videojs/utils-preview':
-        specifier: workspace:*
-        version: link:../utils
-      hls.js:
-        specifier: ^1.6.7
-        version: 1.6.15
-      nanostores:
-        specifier: ^1.0.1
-        version: 1.1.0
-    devDependencies:
-      tsdown:
-        specifier: ^0.15.9
-        version: 0.15.12(typescript@5.9.3)(unrun@0.2.27)
-      typescript:
-        specifier: ^5.9.3
-        version: 5.9.3
-
-  packages/__tech-preview__/html:
-    dependencies:
-      '@open-wc/context-protocol':
-        specifier: ^0.0.9
-        version: 0.0.9
-      '@videojs/core-preview':
-        specifier: workspace:*
-        version: link:../core
-      '@videojs/icons-preview':
-        specifier: workspace:*
-        version: link:../icons
-      '@videojs/utils-preview':
-        specifier: workspace:*
-        version: link:../utils
-    devDependencies:
-      tsdown:
-        specifier: ^0.15.9
-        version: 0.15.12(typescript@5.9.3)(unrun@0.2.27)
-      typescript:
-        specifier: ^5.9.3
-        version: 5.9.3
-
-  packages/__tech-preview__/icons:
-    devDependencies:
-      tsdown:
-        specifier: ^0.15.9
-        version: 0.15.12(typescript@5.9.3)(unrun@0.2.27)
-      typescript:
-        specifier: ^5.9.3
-        version: 5.9.3
-
-  packages/__tech-preview__/react:
-    dependencies:
-      '@videojs/core-preview':
-        specifier: workspace:*
-        version: link:../core
-      '@videojs/icons-preview':
-        specifier: workspace:*
-        version: link:../icons
-      '@videojs/utils-preview':
-        specifier: workspace:*
-        version: link:../utils
-    devDependencies:
-      '@svgr/babel-plugin-add-jsx-attribute':
-        specifier: ^8.0.0
-        version: 8.0.0(@babel/core@7.29.0)
-      '@svgr/cli':
-        specifier: ^8.1.0
-        version: 8.1.0(typescript@5.9.3)
-      '@svgr/core':
-        specifier: ^8.1.0
-        version: 8.1.0(typescript@5.9.3)
-      '@svgr/plugin-jsx':
-        specifier: ^8.1.0
-        version: 8.1.0(@svgr/core@8.1.0(typescript@5.9.3))
-      '@tailwindcss/cli':
-        specifier: ^4.1.17
-        version: 4.1.18
-      '@types/postcss-prefix-selector':
-        specifier: ^1.16.3
-        version: 1.16.3
-      '@types/react':
-        specifier: ^18.0.0
-        version: 18.3.27
-      postcss:
-        specifier: ^8.4.49
-        version: 8.5.6
-      postcss-prefix-selector:
-        specifier: ^1.16.1
-        version: 1.16.1(postcss@8.5.6)
-      react:
-        specifier: ^18.0.0
-        version: 18.3.1
-      tailwindcss:
-        specifier: ^4.1.17
-        version: 4.1.18
-      tsdown:
-        specifier: ^0.15.9
-        version: 0.15.12(typescript@5.9.3)(unrun@0.2.27)
-      typescript:
-        specifier: ^5.9.3
-        version: 5.9.3
-
-  packages/__tech-preview__/utils:
-    devDependencies:
-      tsdown:
-        specifier: ^0.15.9
-        version: 0.15.12(typescript@5.9.3)(unrun@0.2.27)
-      typescript:
-        specifier: ^5.9.3
-        version: 5.9.3
-
   packages/core:
     dependencies:
       '@videojs/store':
@@ -2071,9 +1960,6 @@ packages:
   '@octokit/types@16.0.0':
     resolution: {integrity: sha512-sKq+9r1Mm4efXW1FCk7hFSeJo4QKreL/tTbR0rz/qx/r1Oa2VV83LTA/H/MuCOX7uCIJmQVRKBcbmWoySjAnSg==}
 
-  '@open-wc/context-protocol@0.0.9':
-    resolution: {integrity: sha512-3mMJ16BbRqFaZNR7ongBJEEvAjZFBpo5qUtc2dk/rlk3k09AVRp2Dcldu5VTB0r/tsWdfExbRLlCw/8f3cD/kQ==}
-
   '@opentelemetry/api-logs@0.203.0':
     resolution: {integrity: sha512-9B9RU0H7Ya1Dx/Rkyc4stuBZSGVQF27WigitInx2QQoj6KUpEFYPKoWjdFTunJYxmXmh17HeBvbMa1EhGyPmqQ==}
     engines: {node: '>=8.0.0'}
@@ -2320,9 +2206,6 @@ packages:
   '@oxc-project/types@0.112.0':
     resolution: {integrity: sha512-m6RebKHIRsax2iCwVpYW2ErQwa4ywHJrE4sCK3/8JK8ZZAWOKXaRJFl/uP51gaVyyXlaS4+chU1nSCdzYf6QqQ==}
 
-  '@oxc-project/types@0.95.0':
-    resolution: {integrity: sha512-vACy7vhpMPhjEJhULNxrdR0D943TkA/MigMpJCHmBHvMXxRStRi/dPtTlfQ3uDwWSzRpT8z+7ImjZVf8JWBocQ==}
-
   '@pagefind/default-ui@1.4.0':
     resolution: {integrity: sha512-wie82VWn3cnGEdIjh4YwNESyS1G6vRHwL6cNjy9CFgNnWW/PGRjsLq300xjVH5sfPFK3iK36UxvIBymtQIEiSQ==}
 
@@ -2435,73 +2318,36 @@ packages:
   '@quansync/fs@1.0.0':
     resolution: {integrity: sha512-4TJ3DFtlf1L5LDMaM6CanJ/0lckGNtJcMjQ1NAV6zDmA0tEHKZtxNKin8EgPaVX1YzljbxckyT2tJrpQKAtngQ==}
 
-  '@rolldown/binding-android-arm64@1.0.0-beta.45':
-    resolution: {integrity: sha512-bfgKYhFiXJALeA/riil908+2vlyWGdwa7Ju5S+JgWZYdR4jtiPOGdM6WLfso1dojCh+4ZWeiTwPeV9IKQEX+4g==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [android]
-
   '@rolldown/binding-android-arm64@1.0.0-rc.3':
     resolution: {integrity: sha512-0T1k9FinuBZ/t7rZ8jN6OpUKPnUjNdYHoj/cESWrQ3ZraAJ4OMm6z7QjSfCxqj8mOp9kTKc1zHK3kGz5vMu+nQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@rolldown/binding-darwin-arm64@1.0.0-beta.45':
-    resolution: {integrity: sha512-xjCv4CRVsSnnIxTuyH1RDJl5OEQ1c9JYOwfDAHddjJDxCw46ZX9q80+xq7Eok7KC4bRSZudMJllkvOKv0T9SeA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [darwin]
-
   '@rolldown/binding-darwin-arm64@1.0.0-rc.3':
     resolution: {integrity: sha512-JWWLzvcmc/3pe7qdJqPpuPk91SoE/N+f3PcWx/6ZwuyDVyungAEJPvKm/eEldiDdwTmaEzWfIR+HORxYWrCi1A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-x64@1.0.0-beta.45':
-    resolution: {integrity: sha512-ddcO9TD3D/CLUa/l8GO8LHzBOaZqWg5ClMy3jICoxwCuoz47h9dtqPsIeTiB6yR501LQTeDsjA4lIFd7u3Ljfw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [darwin]
-
   '@rolldown/binding-darwin-x64@1.0.0-rc.3':
     resolution: {integrity: sha512-MTakBxfx3tde5WSmbHxuqlDsIW0EzQym+PJYGF4P6lG2NmKzi128OGynoFUqoD5ryCySEY85dug4v+LWGBElIw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@rolldown/binding-freebsd-x64@1.0.0-beta.45':
-    resolution: {integrity: sha512-MBTWdrzW9w+UMYDUvnEuh0pQvLENkl2Sis15fHTfHVW7ClbGuez+RWopZudIDEGkpZXdeI4CkRXk+vdIIebrmg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [freebsd]
-
   '@rolldown/binding-freebsd-x64@1.0.0-rc.3':
     resolution: {integrity: sha512-jje3oopyOLs7IwfvXoS6Lxnmie5JJO7vW29fdGFu5YGY1EDbVDhD+P9vDihqS5X6fFiqL3ZQZCMBg6jyHkSVww==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.45':
-    resolution: {integrity: sha512-4YgoCFiki1HR6oSg+GxxfzfnVCesQxLF1LEnw9uXS/MpBmuog0EOO2rYfy69rWP4tFZL9IWp6KEfGZLrZ7aUog==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
   '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.3':
     resolution: {integrity: sha512-A0n8P3hdLAaqzSFrQoA42p23ZKBYQOw+8EH5r15Sa9X1kD9/JXe0YT2gph2QTWvdr0CVK2BOXiK6ENfy6DXOag==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.45':
-    resolution: {integrity: sha512-LE1gjAwQRrbCOorJJ7LFr10s5vqYf5a00V5Ea9wXcT2+56n5YosJkcp8eQ12FxRBv2YX8dsdQJb+ZTtYJwb6XQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
   '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.3':
     resolution: {integrity: sha512-kWXkoxxarYISBJ4bLNf5vFkEbb4JvccOwxWDxuK9yee8lg5XA7OpvlTptfRuwEvYcOZf+7VS69Uenpmpyo5Bjw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2509,13 +2355,6 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.45':
-    resolution: {integrity: sha512-tdy8ThO/fPp40B81v0YK3QC+KODOmzJzSUOO37DinQxzlTJ026gqUSOM8tzlVixRbQJltgVDCTYF8HNPRErQTA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
   '@rolldown/binding-linux-arm64-musl@1.0.0-rc.3':
     resolution: {integrity: sha512-Z03/wrqau9Bicfgb3Dbs6SYTHliELk2PM2LpG2nFd+cGupTMF5kanLEcj2vuuJLLhptNyS61rtk7SOZ+lPsTUA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2523,13 +2362,6 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.45':
-    resolution: {integrity: sha512-lS082ROBWdmOyVY/0YB3JmsiClaWoxvC+dA8/rbhyB9VLkvVEaihLEOr4CYmrMse151C4+S6hCw6oa1iewox7g==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
   '@rolldown/binding-linux-x64-gnu@1.0.0-rc.3':
     resolution: {integrity: sha512-iSXXZsQp08CSilff/DCTFZHSVEpEwdicV3W8idHyrByrcsRDVh9sGC3sev6d8BygSGj3vt8GvUKBPCoyMA4tgQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2537,13 +2369,6 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-beta.45':
-    resolution: {integrity: sha512-Hi73aYY0cBkr1/SvNQqH8Cd+rSV6S9RB5izCv0ySBcRnd/Wfn5plguUoGYwBnhHgFbh6cPw9m2dUVBR6BG1gxA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
   '@rolldown/binding-linux-x64-musl@1.0.0-rc.3':
     resolution: {integrity: sha512-qaj+MFudtdCv9xZo9znFvkgoajLdc+vwf0Kz5N44g+LU5XMe+IsACgn3UG7uTRlCCvhMAGXm1XlpEA5bZBrOcw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2551,52 +2376,23 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-beta.45':
-    resolution: {integrity: sha512-fljEqbO7RHHogNDxYtTzr+GNjlfOx21RUyGmF+NrkebZ8emYYiIqzPxsaMZuRx0rgZmVmliOzEp86/CQFDKhJQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [openharmony]
-
   '@rolldown/binding-openharmony-arm64@1.0.0-rc.3':
     resolution: {integrity: sha512-U662UnMETyjT65gFmG9ma+XziENrs7BBnENi/27swZPYagubfHRirXHG2oMl+pEax2WvO7Kb9gHZmMakpYqBHQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-beta.45':
-    resolution: {integrity: sha512-ZJDB7lkuZE9XUnWQSYrBObZxczut+8FZ5pdanm8nNS1DAo8zsrPuvGwn+U3fwU98WaiFsNrA4XHngesCGr8tEQ==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-
   '@rolldown/binding-wasm32-wasi@1.0.0-rc.3':
     resolution: {integrity: sha512-gekrQ3Q2HiC1T5njGyuUJoGpK/l6B/TNXKed3fZXNf9YRTJn3L5MOZsFBn4bN2+UX+8+7hgdlTcEsexX988G4g==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.45':
-    resolution: {integrity: sha512-zyzAjItHPUmxg6Z8SyRhLdXlJn3/D9KL5b9mObUrBHhWS/GwRH4665xCiFqeuktAhhWutqfc+rOV2LjK4VYQGQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [win32]
-
   '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.3':
     resolution: {integrity: sha512-85y5JifyMgs8m5K2XzR/VDsapKbiFiohl7s5lEj7nmNGO0pkTXE7q6TQScei96BNAsoK7JC3pA7ukA8WRHVJpg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.45':
-    resolution: {integrity: sha512-wODcGzlfxqS6D7BR0srkJk3drPwXYLu7jPHN27ce2c4PUnVVmJnp9mJzUQGT4LpmHmmVdMZ+P6hKvyTGBzc1CA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ia32]
-    os: [win32]
-
-  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.45':
-    resolution: {integrity: sha512-wiU40G1nQo9rtfvF9jLbl79lUgjfaD/LTyUEw2Wg/gdF5OhjzpKMVugZQngO+RNdwYaNj+Fs+kWBWfp4VXPMHA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [win32]
-
   '@rolldown/binding-win32-x64-msvc@1.0.0-rc.3':
     resolution: {integrity: sha512-a4VUQZH7LxGbUJ3qJ/TzQG8HxdHvf+jOnqf7B7oFx1TEBm+j2KNL2zr5SQ7wHkNAcaPevF6gf9tQnVBnC4mD+A==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2606,9 +2402,6 @@ packages:
   '@rolldown/pluginutils@1.0.0-beta.27':
     resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}
 
-  '@rolldown/pluginutils@1.0.0-beta.45':
-    resolution: {integrity: sha512-Le9ulGCrD8ggInzWw/k2J8QcbPz7eGIOWqfJ2L+1R0Opm7n6J37s2hiDWlh6LJN0Lk9L5sUzMvRHKW7UxBZsQA==}
-
   '@rolldown/pluginutils@1.0.0-rc.3':
     resolution: {integrity: sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q==}
 
@@ -2940,11 +2733,6 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@svgr/cli@8.1.0':
-    resolution: {integrity: sha512-SnlaLspB610XFXvs3PmhzViHErsXp0yIy4ERyZlHDlO1ro2iYtHMWYk2mztdLD/lBjiA4ZXe4RePON3qU/Tc4A==}
-    engines: {node: '>=14'}
-    hasBin: true
-
   '@svgr/core@8.1.0':
     resolution: {integrity: sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==}
     engines: {node: '>=14'}
@@ -2959,12 +2747,6 @@ packages:
     peerDependencies:
       '@svgr/core': '*'
 
-  '@svgr/plugin-prettier@8.1.0':
-    resolution: {integrity: sha512-o4/uFI8G64tAjBZ4E7gJfH+VP7Qi3T0+M4WnIsP91iFnGPqs5WvPDkpZALXPiyWEtzfYs1Rmwy1Zdfu8qoZuKw==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@svgr/core': '*'
-
   '@svgr/plugin-svgo@8.1.0':
     resolution: {integrity: sha512-Ywtl837OGO9pTLIN/onoWLmDQ4zFUycI1g76vuKGEz6evR/ZTJlJuz3G/fIkb6OVBJ2g0o6CGJzaEjfmEo3AHA==}
     engines: {node: '>=14'}
@@ -2974,83 +2756,39 @@ packages:
   '@swc/helpers@0.5.17':
     resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==}
 
-  '@tailwindcss/cli@4.1.18':
-    resolution: {integrity: sha512-sMZ+lZbDyxwjD2E0L7oRUjJ01Ffjtme5OtjvvnC+cV4CEDcbqzbp25TCpxHj6kWLU9+DlqJOiNgSOgctC2aZmg==}
-    hasBin: true
-
-  '@tailwindcss/node@4.1.18':
-    resolution: {integrity: sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==}
-
   '@tailwindcss/node@4.2.1':
     resolution: {integrity: sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg==}
 
-  '@tailwindcss/oxide-android-arm64@4.1.18':
-    resolution: {integrity: sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [android]
-
   '@tailwindcss/oxide-android-arm64@4.2.1':
     resolution: {integrity: sha512-eZ7G1Zm5EC8OOKaesIKuw77jw++QJ2lL9N+dDpdQiAB/c/B2wDh0QPFHbkBVrXnwNugvrbJFk1gK2SsVjwWReg==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [android]
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.18':
-    resolution: {integrity: sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-
   '@tailwindcss/oxide-darwin-arm64@4.2.1':
     resolution: {integrity: sha512-q/LHkOstoJ7pI1J0q6djesLzRvQSIfEto148ppAd+BVQK0JYjQIFSK3JgYZJa+Yzi0DDa52ZsQx2rqytBnf8Hw==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [darwin]
 
-  '@tailwindcss/oxide-darwin-x64@4.1.18':
-    resolution: {integrity: sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-
   '@tailwindcss/oxide-darwin-x64@4.2.1':
     resolution: {integrity: sha512-/f/ozlaXGY6QLbpvd/kFTro2l18f7dHKpB+ieXz+Cijl4Mt9AI2rTrpq7V+t04nK+j9XBQHnSMdeQRhbGyt6fw==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [darwin]
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.18':
-    resolution: {integrity: sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [freebsd]
-
   '@tailwindcss/oxide-freebsd-x64@4.2.1':
     resolution: {integrity: sha512-5e/AkgYJT/cpbkys/OU2Ei2jdETCLlifwm7ogMC7/hksI2fC3iiq6OcXwjibcIjPung0kRtR3TxEITkqgn0TcA==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [freebsd]
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
-    resolution: {integrity: sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==}
-    engines: {node: '>= 10'}
-    cpu: [arm]
-    os: [linux]
-
   '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1':
     resolution: {integrity: sha512-Uny1EcVTTmerCKt/1ZuKTkb0x8ZaiuYucg2/kImO5A5Y/kBz41/+j0gxUZl+hTF3xkWpDmHX+TaWhOtba2Fyuw==}
     engines: {node: '>= 20'}
     cpu: [arm]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
-    resolution: {integrity: sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
   '@tailwindcss/oxide-linux-arm64-gnu@4.2.1':
     resolution: {integrity: sha512-CTrwomI+c7n6aSSQlsPL0roRiNMDQ/YzMD9EjcR+H4f0I1SQ8QqIuPnsVp7QgMkC1Qi8rtkekLkOFjo7OlEFRQ==}
     engines: {node: '>= 20'}
@@ -3058,13 +2796,6 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
-    resolution: {integrity: sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
   '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
     resolution: {integrity: sha512-WZA0CHRL/SP1TRbA5mp9htsppSEkWuQ4KsSUumYQnyl8ZdT39ntwqmz4IUHGN6p4XdSlYfJwM4rRzZLShHsGAQ==}
     engines: {node: '>= 20'}
@@ -3072,13 +2803,6 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
-    resolution: {integrity: sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
   '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
     resolution: {integrity: sha512-qMFzxI2YlBOLW5PhblzuSWlWfwLHaneBE0xHzLrBgNtqN6mWfs+qYbhryGSXQjFYB1Dzf5w+LN5qbUTPhW7Y5g==}
     engines: {node: '>= 20'}
@@ -3086,13 +2810,6 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.18':
-    resolution: {integrity: sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
   '@tailwindcss/oxide-linux-x64-musl@4.2.1':
     resolution: {integrity: sha512-5r1X2FKnCMUPlXTWRYpHdPYUY6a1Ar/t7P24OuiEdEOmms5lyqjDRvVY1yy9Rmioh+AunQ0rWiOTPE8F9A3v5g==}
     engines: {node: '>= 20'}
@@ -3100,18 +2817,6 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@tailwindcss/oxide-wasm32-wasi@4.1.18':
-    resolution: {integrity: sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-    bundledDependencies:
-      - '@napi-rs/wasm-runtime'
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-      - '@tybys/wasm-util'
-      - '@emnapi/wasi-threads'
-      - tslib
-
   '@tailwindcss/oxide-wasm32-wasi@4.2.1':
     resolution: {integrity: sha512-MGFB5cVPvshR85MTJkEvqDUnuNoysrsRxd6vnk1Lf2tbiqNlXpHYZqkqOQalydienEWOHHFyyuTSYRsLfxFJ2Q==}
     engines: {node: '>=14.0.0'}
@@ -3124,34 +2829,18 @@ packages:
       - '@emnapi/wasi-threads'
       - tslib
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
-    resolution: {integrity: sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
-
   '@tailwindcss/oxide-win32-arm64-msvc@4.2.1':
     resolution: {integrity: sha512-YlUEHRHBGnCMh4Nj4GnqQyBtsshUPdiNroZj8VPkvTZSoHsilRCwXcVKnG9kyi0ZFAS/3u+qKHBdDc81SADTRA==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [win32]
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
-    resolution: {integrity: sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
-
   '@tailwindcss/oxide-win32-x64-msvc@4.2.1':
     resolution: {integrity: sha512-rbO34G5sMWWyrN/idLeVxAZgAKWrn5LiR3/I90Q9MkA67s6T1oB0xtTe+0heoBvHSpbU9Mk7i6uwJnpo4u21XQ==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [win32]
 
-  '@tailwindcss/oxide@4.1.18':
-    resolution: {integrity: sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==}
-    engines: {node: '>= 10'}
-
   '@tailwindcss/oxide@4.2.1':
     resolution: {integrity: sha512-yv9jeEFWnjKCI6/T3Oq50yQEOqmpmpfzG1hcZsAOaXFQPfzWprWrlHSdGPEF3WQTi8zu8ohC9Mh9J470nT5pUw==}
     engines: {node: '>= 20'}
@@ -3287,23 +2976,14 @@ packages:
   '@types/pg@8.15.6':
     resolution: {integrity: sha512-NoaMtzhxOrubeL/7UZuNTrejB4MPAJ0RpxZqXQf2qXuVlTPuG6Y8p4u9dKRaue4yjmC7ZhzVO2/Yyyn25znrPQ==}
 
-  '@types/postcss-prefix-selector@1.16.3':
-    resolution: {integrity: sha512-YZLPWRkJIrYjwaqojVDXzaRCAEYslRAm8Shznwwn+ZFA4iKQR4LZlS3d+ZMVteFz4iyQnngZZG7k/GIzV1f3mQ==}
-
   '@types/prompts@2.4.9':
     resolution: {integrity: sha512-qTxFi6Buiu8+50/+3DGIWLHM6QuWsEKugJnnP6iv2Mc4ncxE4A/OJkjuVOA+5X0X1S/nq5VJRa8Lu+nwcvbrKA==}
 
-  '@types/prop-types@15.7.15':
-    resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
-
   '@types/react-dom@19.2.3':
     resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
     peerDependencies:
       '@types/react': ^19.2.0
 
-  '@types/react@18.3.27':
-    resolution: {integrity: sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==}
-
   '@types/react@19.2.7':
     resolution: {integrity: sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==}
 
@@ -3623,10 +3303,6 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
-  ast-kit@2.2.0:
-    resolution: {integrity: sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw==}
-    engines: {node: '>=20.19.0'}
-
   ast-kit@3.0.0-beta.1:
     resolution: {integrity: sha512-trmleAnZ2PxN/loHWVhhx1qeOHSRXq4TDsBBxq3GqeJitfk3+jTQ+v/C1km/KYq9M7wKqCewMh+/NAvVH7m+bw==}
     engines: {node: '>=20.19.0'}
@@ -3714,9 +3390,6 @@ packages:
   bindings@1.5.0:
     resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
 
-  birpc@2.9.0:
-    resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==}
-
   birpc@4.0.0:
     resolution: {integrity: sha512-LShSxJP0KTmd101b6DRyGBj57LZxSDYWKitQNW/mi8GRMvZb078Uf9+pveax1DrVL89vm7mWe+TovdI/UDOuPw==}
 
@@ -3927,10 +3600,6 @@ packages:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
 
-  commander@9.5.0:
-    resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
-    engines: {node: ^12.20.0 || >=14}
-
   common-ancestor-path@1.0.1:
     resolution: {integrity: sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==}
 
@@ -4083,10 +3752,6 @@ packages:
     resolution: {integrity: sha512-wAV9QHOsNbwnWdNW2FYvE1P56wtgSbM+3SZcdGiWQILwVjACCXDCI3Ai8QlCjMDB8YK5zySiXZYBiwGmNY3lnw==}
     engines: {node: '>=12'}
 
-  dashify@2.0.0:
-    resolution: {integrity: sha512-hpA5C/YrPjucXypHPPc0oJ1l9Hf6wWbiOL7Ik42cxnsUOhWiCB/fylKbKqqJalW9FgkNQCw16YO8uW9Hs0Iy1A==}
-    engines: {node: '>=4'}
-
   data-uri-to-buffer@4.0.1:
     resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
     engines: {node: '>= 12'}
@@ -4314,10 +3979,6 @@ packages:
   end-of-stream@1.4.5:
     resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
 
-  enhanced-resolve@5.18.4:
-    resolution: {integrity: sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==}
-    engines: {node: '>=10.13.0'}
-
   enhanced-resolve@5.19.0:
     resolution: {integrity: sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==}
     engines: {node: '>=10.13.0'}
@@ -4601,9 +4262,6 @@ packages:
     resolution: {integrity: sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg==}
     engines: {node: '>=14.14'}
 
-  fs.realpath@1.0.0:
-    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
-
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -4675,11 +4333,6 @@ packages:
     deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
-  glob@8.1.0:
-    resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
-    engines: {node: '>=12'}
-    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
-
   global-directory@4.0.1:
     resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
     engines: {node: '>=18'}
@@ -4761,9 +4414,6 @@ packages:
   hls.js@1.6.15:
     resolution: {integrity: sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA==}
 
-  hookable@5.5.3:
-    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
-
   hookable@6.0.1:
     resolution: {integrity: sha512-uKGyY8BuzN/a5gvzvA+3FVWo0+wUjgtfSdnmjtrOVwQCZPHpHDH2WRO3VZSOeluYrHoDCiXFffZXs8Dj1ULWtw==}
 
@@ -4858,10 +4508,6 @@ packages:
     resolution: {integrity: sha512-Yg7+ztRkqslMAS2iFaU+Oa4KTSidr63OsFGlOrJoW981kIYO3CGCS3wA95P1mUi/IVSJkn0D479KTJpVpvFNuw==}
     engines: {node: '>=18'}
 
-  inflight@1.0.6:
-    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
-    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
-
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
@@ -5146,73 +4792,36 @@ packages:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
     engines: {node: '>=6'}
 
-  lightningcss-android-arm64@1.30.2:
-    resolution: {integrity: sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [android]
-
   lightningcss-android-arm64@1.31.1:
     resolution: {integrity: sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [android]
 
-  lightningcss-darwin-arm64@1.30.2:
-    resolution: {integrity: sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [darwin]
-
   lightningcss-darwin-arm64@1.31.1:
     resolution: {integrity: sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [darwin]
 
-  lightningcss-darwin-x64@1.30.2:
-    resolution: {integrity: sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [darwin]
-
   lightningcss-darwin-x64@1.31.1:
     resolution: {integrity: sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [darwin]
 
-  lightningcss-freebsd-x64@1.30.2:
-    resolution: {integrity: sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [freebsd]
-
   lightningcss-freebsd-x64@1.31.1:
     resolution: {integrity: sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [freebsd]
 
-  lightningcss-linux-arm-gnueabihf@1.30.2:
-    resolution: {integrity: sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm]
-    os: [linux]
-
   lightningcss-linux-arm-gnueabihf@1.31.1:
     resolution: {integrity: sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm]
     os: [linux]
 
-  lightningcss-linux-arm64-gnu@1.30.2:
-    resolution: {integrity: sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
   lightningcss-linux-arm64-gnu@1.31.1:
     resolution: {integrity: sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==}
     engines: {node: '>= 12.0.0'}
@@ -5220,13 +4829,6 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  lightningcss-linux-arm64-musl@1.30.2:
-    resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
   lightningcss-linux-arm64-musl@1.31.1:
     resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==}
     engines: {node: '>= 12.0.0'}
@@ -5234,13 +4836,6 @@ packages:
     os: [linux]
     libc: [musl]
 
-  lightningcss-linux-x64-gnu@1.30.2:
-    resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
   lightningcss-linux-x64-gnu@1.31.1:
     resolution: {integrity: sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==}
     engines: {node: '>= 12.0.0'}
@@ -5248,13 +4843,6 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  lightningcss-linux-x64-musl@1.30.2:
-    resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
   lightningcss-linux-x64-musl@1.31.1:
     resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==}
     engines: {node: '>= 12.0.0'}
@@ -5262,34 +4850,18 @@ packages:
     os: [linux]
     libc: [musl]
 
-  lightningcss-win32-arm64-msvc@1.30.2:
-    resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [win32]
-
   lightningcss-win32-arm64-msvc@1.31.1:
     resolution: {integrity: sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [win32]
 
-  lightningcss-win32-x64-msvc@1.30.2:
-    resolution: {integrity: sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [win32]
-
   lightningcss-win32-x64-msvc@1.31.1:
     resolution: {integrity: sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [win32]
 
-  lightningcss@1.30.2:
-    resolution: {integrity: sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==}
-    engines: {node: '>= 12.0.0'}
-
   lightningcss@1.31.1:
     resolution: {integrity: sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==}
     engines: {node: '>= 12.0.0'}
@@ -5701,10 +5273,6 @@ packages:
   module-details-from-path@1.0.4:
     resolution: {integrity: sha512-EGWKgxALGMgzvxYF1UyGTy0HXX/2vHLkw6+NvDKW2jypWbHpjQuj4UMcqQWXHERJhVGKikolT06G3bcKe4fi7w==}
 
-  mri@1.2.0:
-    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
-    engines: {node: '>=4'}
-
   mrmime@2.0.1:
     resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
     engines: {node: '>=10'}
@@ -6021,11 +5589,6 @@ packages:
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
-  postcss-prefix-selector@1.16.1:
-    resolution: {integrity: sha512-Umxu+FvKMwlY6TyDzGFoSUnzW+NOfMBLyC1tAkIjgX+Z/qGspJeRjVC903D7mx7TuBpJlwti2ibXtWuA7fKMeQ==}
-    peerDependencies:
-      postcss: '>4 <9'
-
   postcss-values-parser@6.0.2:
     resolution: {integrity: sha512-YLJpK0N1brcNJrs9WatuJFtHaV9q5aAOj+S4DI5S7jgHlRfm0PIbDCAFRYMQD5SHq7Fy6xsDhyutgS0QOAs0qw==}
     engines: {node: '>=10'}
@@ -6116,11 +5679,6 @@ packages:
       prettier-plugin-svelte:
         optional: true
 
-  prettier@2.8.8:
-    resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
-    engines: {node: '>=10.13.0'}
-    hasBin: true
-
   prettier@3.8.1:
     resolution: {integrity: sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==}
     engines: {node: '>=14'}
@@ -6393,25 +5951,6 @@ packages:
   rfdc@1.4.1:
     resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
 
-  rolldown-plugin-dts@0.17.8:
-    resolution: {integrity: sha512-76EEBlhF00yeY6M7VpMkWKI4r9WjuoMiOGey7j4D6zf3m0BR+ZrrY9hvSXdueJ3ljxSLq4DJBKFpX/X9+L7EKw==}
-    engines: {node: '>=20.19.0'}
-    peerDependencies:
-      '@ts-macro/tsc': ^0.3.6
-      '@typescript/native-preview': '>=7.0.0-dev.20250601.1'
-      rolldown: ^1.0.0-beta.44
-      typescript: ^5.0.0
-      vue-tsc: ~3.1.0
-    peerDependenciesMeta:
-      '@ts-macro/tsc':
-        optional: true
-      '@typescript/native-preview':
-        optional: true
-      typescript:
-        optional: true
-      vue-tsc:
-        optional: true
-
   rolldown-plugin-dts@0.22.1:
     resolution: {integrity: sha512-5E0AiM5RSQhU6cjtkDFWH6laW4IrMu0j1Mo8x04Xo1ALHmaRMs9/7zej7P3RrryVHW/DdZAp85MA7Be55p0iUw==}
     engines: {node: '>=20.19.0'}
@@ -6431,11 +5970,6 @@ packages:
       vue-tsc:
         optional: true
 
-  rolldown@1.0.0-beta.45:
-    resolution: {integrity: sha512-iMmuD72XXLf26Tqrv1cryNYLX6NNPLhZ3AmNkSf8+xda0H+yijjGJ+wVT9UdBUHOpKzq9RjKtQKRCWoEKQQBZQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    hasBin: true
-
   rolldown@1.0.0-rc.3:
     resolution: {integrity: sha512-Po/YZECDOqVXjIXrtC5h++a5NLvKAQNrd9ggrIG3sbDfGO5BqTUsrI6l8zdniKRp3r5Tp/2JTrXqx4GIguFCMw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6699,9 +6233,6 @@ packages:
   tailwind-merge@3.5.0:
     resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
 
-  tailwindcss@4.1.18:
-    resolution: {integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==}
-
   tailwindcss@4.2.1:
     resolution: {integrity: sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==}
 
@@ -6852,31 +6383,6 @@ packages:
       typescript:
         optional: true
 
-  tsdown@0.15.12:
-    resolution: {integrity: sha512-c8VLlQm8/lFrOAg5VMVeN4NAbejZyVQkzd+ErjuaQgJFI/9MhR9ivr0H/CM7UlOF1+ELlF6YaI7sU/4itgGQ8w==}
-    engines: {node: '>=20.19.0'}
-    hasBin: true
-    peerDependencies:
-      '@arethetypeswrong/core': ^0.18.1
-      publint: ^0.3.0
-      typescript: ^5.0.0
-      unplugin-lightningcss: ^0.4.0
-      unplugin-unused: ^0.5.0
-      unrun: ^0.2.1
-    peerDependenciesMeta:
-      '@arethetypeswrong/core':
-        optional: true
-      publint:
-        optional: true
-      typescript:
-        optional: true
-      unplugin-lightningcss:
-        optional: true
-      unplugin-unused:
-        optional: true
-      unrun:
-        optional: true
-
   tsdown@0.20.3:
     resolution: {integrity: sha512-qWOUXSbe4jN8JZEgrkc/uhJpC8VN2QpNu3eZkBWwNuTEjc/Ik1kcc54ycfcQ5QPRHeu9OQXaLfCI3o7pEJgB2w==}
     engines: {node: '>=20.19.0'}
@@ -6985,9 +6491,6 @@ packages:
   unconfig-core@7.4.2:
     resolution: {integrity: sha512-VgPCvLWugINbXvMQDf8Jh0mlbvNjNC6eSUziHsBCMpxR05OPrNrvDnyatdMjRgcHaaNsCqz+wjNXxNw1kRLHUg==}
 
-  unconfig@7.4.2:
-    resolution: {integrity: sha512-nrMlWRQ1xdTjSnSUqvYqJzbTBFugoqHobQj58B2bc8qxHKBBHMNNsWQFP3Cd3/JZK907voM2geYPWqD4VK3MPQ==}
-
   uncrypto@0.1.3:
     resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==}
 
@@ -9283,8 +8786,6 @@ snapshots:
     dependencies:
       '@octokit/openapi-types': 27.0.0
 
-  '@open-wc/context-protocol@0.0.9': {}
-
   '@opentelemetry/api-logs@0.203.0':
     dependencies:
       '@opentelemetry/api': 1.9.0
@@ -9577,8 +9078,6 @@ snapshots:
 
   '@oxc-project/types@0.112.0': {}
 
-  '@oxc-project/types@0.95.0': {}
-
   '@pagefind/default-ui@1.4.0': {}
 
   '@parcel/watcher-android-arm64@2.5.1':
@@ -9662,95 +9161,49 @@ snapshots:
     dependencies:
       quansync: 1.0.0
 
-  '@rolldown/binding-android-arm64@1.0.0-beta.45':
-    optional: true
-
   '@rolldown/binding-android-arm64@1.0.0-rc.3':
     optional: true
 
-  '@rolldown/binding-darwin-arm64@1.0.0-beta.45':
-    optional: true
-
   '@rolldown/binding-darwin-arm64@1.0.0-rc.3':
     optional: true
 
-  '@rolldown/binding-darwin-x64@1.0.0-beta.45':
-    optional: true
-
   '@rolldown/binding-darwin-x64@1.0.0-rc.3':
     optional: true
 
-  '@rolldown/binding-freebsd-x64@1.0.0-beta.45':
-    optional: true
-
   '@rolldown/binding-freebsd-x64@1.0.0-rc.3':
     optional: true
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.45':
-    optional: true
-
   '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.3':
     optional: true
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.45':
-    optional: true
-
   '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.3':
     optional: true
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.45':
-    optional: true
-
   '@rolldown/binding-linux-arm64-musl@1.0.0-rc.3':
     optional: true
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.45':
-    optional: true
-
   '@rolldown/binding-linux-x64-gnu@1.0.0-rc.3':
     optional: true
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-beta.45':
-    optional: true
-
   '@rolldown/binding-linux-x64-musl@1.0.0-rc.3':
     optional: true
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-beta.45':
-    optional: true
-
   '@rolldown/binding-openharmony-arm64@1.0.0-rc.3':
     optional: true
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-beta.45':
-    dependencies:
-      '@napi-rs/wasm-runtime': 1.1.1
-    optional: true
-
   '@rolldown/binding-wasm32-wasi@1.0.0-rc.3':
     dependencies:
       '@napi-rs/wasm-runtime': 1.1.1
     optional: true
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.45':
-    optional: true
-
   '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.3':
     optional: true
 
-  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.45':
-    optional: true
-
-  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.45':
-    optional: true
-
   '@rolldown/binding-win32-x64-msvc@1.0.0-rc.3':
     optional: true
 
   '@rolldown/pluginutils@1.0.0-beta.27': {}
 
-  '@rolldown/pluginutils@1.0.0-beta.45': {}
-
   '@rolldown/pluginutils@1.0.0-rc.3': {}
 
   '@rollup/pluginutils@5.3.0(rollup@4.53.3)':
@@ -10041,10 +9494,6 @@ snapshots:
     dependencies:
       '@babel/core': 7.28.5
 
-  '@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-
   '@svgr/babel-plugin-remove-jsx-attribute@8.0.0(@babel/core@7.28.5)':
     dependencies:
       '@babel/core': 7.28.5
@@ -10085,22 +9534,6 @@ snapshots:
       '@svgr/babel-plugin-transform-react-native-svg': 8.1.0(@babel/core@7.28.5)
       '@svgr/babel-plugin-transform-svg-component': 8.0.0(@babel/core@7.28.5)
 
-  '@svgr/cli@8.1.0(typescript@5.9.3)':
-    dependencies:
-      '@svgr/core': 8.1.0(typescript@5.9.3)
-      '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.9.3))
-      '@svgr/plugin-prettier': 8.1.0(@svgr/core@8.1.0(typescript@5.9.3))
-      '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0(typescript@5.9.3))(typescript@5.9.3)
-      camelcase: 6.3.0
-      chalk: 4.1.2
-      commander: 9.5.0
-      dashify: 2.0.0
-      glob: 8.1.0
-      snake-case: 3.0.4
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
   '@svgr/core@8.1.0(typescript@5.9.3)':
     dependencies:
       '@babel/core': 7.28.5
@@ -10127,12 +9560,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@svgr/plugin-prettier@8.1.0(@svgr/core@8.1.0(typescript@5.9.3))':
-    dependencies:
-      '@svgr/core': 8.1.0(typescript@5.9.3)
-      deepmerge: 4.3.1
-      prettier: 2.8.8
-
   '@svgr/plugin-svgo@8.1.0(@svgr/core@8.1.0(typescript@5.9.3))(typescript@5.9.3)':
     dependencies:
       '@svgr/core': 8.1.0(typescript@5.9.3)
@@ -10146,26 +9573,6 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@tailwindcss/cli@4.1.18':
-    dependencies:
-      '@parcel/watcher': 2.5.1
-      '@tailwindcss/node': 4.1.18
-      '@tailwindcss/oxide': 4.1.18
-      enhanced-resolve: 5.18.4
-      mri: 1.2.0
-      picocolors: 1.1.1
-      tailwindcss: 4.1.18
-
-  '@tailwindcss/node@4.1.18':
-    dependencies:
-      '@jridgewell/remapping': 2.3.5
-      enhanced-resolve: 5.18.4
-      jiti: 2.6.1
-      lightningcss: 1.30.2
-      magic-string: 0.30.21
-      source-map-js: 1.2.1
-      tailwindcss: 4.1.18
-
   '@tailwindcss/node@4.2.1':
     dependencies:
       '@jridgewell/remapping': 2.3.5
@@ -10176,93 +9583,42 @@ snapshots:
       source-map-js: 1.2.1
       tailwindcss: 4.2.1
 
-  '@tailwindcss/oxide-android-arm64@4.1.18':
-    optional: true
-
   '@tailwindcss/oxide-android-arm64@4.2.1':
     optional: true
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.18':
-    optional: true
-
   '@tailwindcss/oxide-darwin-arm64@4.2.1':
     optional: true
 
-  '@tailwindcss/oxide-darwin-x64@4.1.18':
-    optional: true
-
   '@tailwindcss/oxide-darwin-x64@4.2.1':
     optional: true
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.18':
-    optional: true
-
   '@tailwindcss/oxide-freebsd-x64@4.2.1':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
-    optional: true
-
   '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
-    optional: true
-
   '@tailwindcss/oxide-linux-arm64-gnu@4.2.1':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
-    optional: true
-
   '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
-    optional: true
-
   '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.18':
-    optional: true
-
   '@tailwindcss/oxide-linux-x64-musl@4.2.1':
     optional: true
 
-  '@tailwindcss/oxide-wasm32-wasi@4.1.18':
-    optional: true
-
   '@tailwindcss/oxide-wasm32-wasi@4.2.1':
     optional: true
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
-    optional: true
-
   '@tailwindcss/oxide-win32-arm64-msvc@4.2.1':
     optional: true
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
-    optional: true
-
   '@tailwindcss/oxide-win32-x64-msvc@4.2.1':
     optional: true
 
-  '@tailwindcss/oxide@4.1.18':
-    optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.1.18
-      '@tailwindcss/oxide-darwin-arm64': 4.1.18
-      '@tailwindcss/oxide-darwin-x64': 4.1.18
-      '@tailwindcss/oxide-freebsd-x64': 4.1.18
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.18
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.18
-      '@tailwindcss/oxide-linux-arm64-musl': 4.1.18
-      '@tailwindcss/oxide-linux-x64-gnu': 4.1.18
-      '@tailwindcss/oxide-linux-x64-musl': 4.1.18
-      '@tailwindcss/oxide-wasm32-wasi': 4.1.18
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.18
-      '@tailwindcss/oxide-win32-x64-msvc': 4.1.18
-
   '@tailwindcss/oxide@4.2.1':
     optionalDependencies:
       '@tailwindcss/oxide-android-arm64': 4.2.1
@@ -10447,26 +9803,15 @@ snapshots:
       pg-protocol: 1.10.3
       pg-types: 2.2.0
 
-  '@types/postcss-prefix-selector@1.16.3':
-    dependencies:
-      postcss: 8.5.6
-
   '@types/prompts@2.4.9':
     dependencies:
       '@types/node': 22.19.3
       kleur: 3.0.3
 
-  '@types/prop-types@15.7.15': {}
-
   '@types/react-dom@19.2.3(@types/react@19.2.7)':
     dependencies:
       '@types/react': 19.2.7
 
-  '@types/react@18.3.27':
-    dependencies:
-      '@types/prop-types': 15.7.15
-      csstype: 3.2.3
-
   '@types/react@19.2.7':
     dependencies:
       csstype: 3.2.3
@@ -10682,7 +10027,7 @@ snapshots:
       sirv: 3.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.3)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.3)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@2.6.1)(jsdom@27.3.0(postcss@8.5.6))(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)
 
   '@vitest/utils@3.2.4':
     dependencies:
@@ -10915,11 +10260,6 @@ snapshots:
 
   assertion-error@2.0.1: {}
 
-  ast-kit@2.2.0:
-    dependencies:
-      '@babel/parser': 7.28.5
-      pathe: 2.0.3
-
   ast-kit@3.0.0-beta.1:
     dependencies:
       '@babel/parser': 8.0.0-rc.1
@@ -11085,8 +10425,6 @@ snapshots:
     dependencies:
       file-uri-to-path: 1.0.0
 
-  birpc@2.9.0: {}
-
   birpc@4.0.0: {}
 
   boolbase@1.0.0: {}
@@ -11280,8 +10618,6 @@ snapshots:
 
   commander@7.2.0: {}
 
-  commander@9.5.0: {}
-
   common-ancestor-path@1.0.1: {}
 
   common-path-prefix@3.0.0: {}
@@ -11433,8 +10769,6 @@ snapshots:
 
   dargs@8.1.0: {}
 
-  dashify@2.0.0: {}
-
   data-uri-to-buffer@4.0.1: {}
 
   data-urls@5.0.0:
@@ -11636,11 +10970,6 @@ snapshots:
     dependencies:
       once: 1.4.0
 
-  enhanced-resolve@5.18.4:
-    dependencies:
-      graceful-fs: 4.2.11
-      tapable: 2.3.0
-
   enhanced-resolve@5.19.0:
     dependencies:
       graceful-fs: 4.2.11
@@ -12002,8 +11331,6 @@ snapshots:
       jsonfile: 6.2.0
       universalify: 2.0.1
 
-  fs.realpath@1.0.0: {}
-
   fsevents@2.3.3:
     optional: true
 
@@ -12077,14 +11404,6 @@ snapshots:
       package-json-from-dist: 1.0.1
       path-scurry: 1.11.1
 
-  glob@8.1.0:
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 5.1.6
-      once: 1.4.0
-
   global-directory@4.0.1:
     dependencies:
       ini: 4.1.1
@@ -12262,8 +11581,6 @@ snapshots:
 
   hls.js@1.6.15: {}
 
-  hookable@5.5.3: {}
-
   hookable@6.0.1: {}
 
   hosted-git-info@7.0.2:
@@ -12352,11 +11669,6 @@ snapshots:
 
   index-to-position@1.2.0: {}
 
-  inflight@1.0.6:
-    dependencies:
-      once: 1.4.0
-      wrappy: 1.0.2
-
   inherits@2.0.4: {}
 
   ini@4.1.1: {}
@@ -12667,88 +11979,39 @@ snapshots:
 
   leven@3.1.0: {}
 
-  lightningcss-android-arm64@1.30.2:
-    optional: true
-
   lightningcss-android-arm64@1.31.1:
     optional: true
 
-  lightningcss-darwin-arm64@1.30.2:
-    optional: true
-
   lightningcss-darwin-arm64@1.31.1:
     optional: true
 
-  lightningcss-darwin-x64@1.30.2:
-    optional: true
-
   lightningcss-darwin-x64@1.31.1:
     optional: true
 
-  lightningcss-freebsd-x64@1.30.2:
-    optional: true
-
   lightningcss-freebsd-x64@1.31.1:
     optional: true
 
-  lightningcss-linux-arm-gnueabihf@1.30.2:
-    optional: true
-
   lightningcss-linux-arm-gnueabihf@1.31.1:
     optional: true
 
-  lightningcss-linux-arm64-gnu@1.30.2:
-    optional: true
-
   lightningcss-linux-arm64-gnu@1.31.1:
     optional: true
 
-  lightningcss-linux-arm64-musl@1.30.2:
-    optional: true
-
   lightningcss-linux-arm64-musl@1.31.1:
     optional: true
 
-  lightningcss-linux-x64-gnu@1.30.2:
-    optional: true
-
   lightningcss-linux-x64-gnu@1.31.1:
     optional: true
 
-  lightningcss-linux-x64-musl@1.30.2:
-    optional: true
-
   lightningcss-linux-x64-musl@1.31.1:
     optional: true
 
-  lightningcss-win32-arm64-msvc@1.30.2:
-    optional: true
-
   lightningcss-win32-arm64-msvc@1.31.1:
     optional: true
 
-  lightningcss-win32-x64-msvc@1.30.2:
-    optional: true
-
   lightningcss-win32-x64-msvc@1.31.1:
     optional: true
 
-  lightningcss@1.30.2:
-    dependencies:
-      detect-libc: 2.1.2
-    optionalDependencies:
-      lightningcss-android-arm64: 1.30.2
-      lightningcss-darwin-arm64: 1.30.2
-      lightningcss-darwin-x64: 1.30.2
-      lightningcss-freebsd-x64: 1.30.2
-      lightningcss-linux-arm-gnueabihf: 1.30.2
-      lightningcss-linux-arm64-gnu: 1.30.2
-      lightningcss-linux-arm64-musl: 1.30.2
-      lightningcss-linux-x64-gnu: 1.30.2
-      lightningcss-linux-x64-musl: 1.30.2
-      lightningcss-win32-arm64-msvc: 1.30.2
-      lightningcss-win32-x64-msvc: 1.30.2
-
   lightningcss@1.31.1:
     dependencies:
       detect-libc: 2.1.2
@@ -13440,8 +12703,6 @@ snapshots:
 
   module-details-from-path@1.0.4: {}
 
-  mri@1.2.0: {}
-
   mrmime@2.0.1: {}
 
   ms@2.1.3: {}
@@ -13722,10 +12983,6 @@ snapshots:
       mlly: 1.8.0
       pathe: 2.0.3
 
-  postcss-prefix-selector@1.16.1(postcss@8.5.6):
-    dependencies:
-      postcss: 8.5.6
-
   postcss-values-parser@6.0.2(postcss@8.5.6):
     dependencies:
       color-name: 1.1.4
@@ -13781,8 +13038,6 @@ snapshots:
     optionalDependencies:
       prettier-plugin-astro: 0.14.1
 
-  prettier@2.8.8: {}
-
   prettier@3.8.1: {}
 
   pretty-format@27.5.1:
@@ -14120,23 +13375,6 @@ snapshots:
 
   rfdc@1.4.1: {}
 
-  rolldown-plugin-dts@0.17.8(rolldown@1.0.0-beta.45)(typescript@5.9.3):
-    dependencies:
-      '@babel/generator': 7.28.5
-      '@babel/parser': 7.28.5
-      '@babel/types': 7.28.5
-      ast-kit: 2.2.0
-      birpc: 2.9.0
-      dts-resolver: 2.1.3
-      get-tsconfig: 4.13.6
-      magic-string: 0.30.21
-      obug: 2.1.1
-      rolldown: 1.0.0-beta.45
-    optionalDependencies:
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - oxc-resolver
-
   rolldown-plugin-dts@0.22.1(rolldown@1.0.0-rc.3)(typescript@5.9.3):
     dependencies:
       '@babel/generator': 8.0.0-rc.1
@@ -14154,26 +13392,6 @@ snapshots:
     transitivePeerDependencies:
       - oxc-resolver
 
-  rolldown@1.0.0-beta.45:
-    dependencies:
-      '@oxc-project/types': 0.95.0
-      '@rolldown/pluginutils': 1.0.0-beta.45
-    optionalDependencies:
-      '@rolldown/binding-android-arm64': 1.0.0-beta.45
-      '@rolldown/binding-darwin-arm64': 1.0.0-beta.45
-      '@rolldown/binding-darwin-x64': 1.0.0-beta.45
-      '@rolldown/binding-freebsd-x64': 1.0.0-beta.45
-      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-beta.45
-      '@rolldown/binding-linux-arm64-gnu': 1.0.0-beta.45
-      '@rolldown/binding-linux-arm64-musl': 1.0.0-beta.45
-      '@rolldown/binding-linux-x64-gnu': 1.0.0-beta.45
-      '@rolldown/binding-linux-x64-musl': 1.0.0-beta.45
-      '@rolldown/binding-openharmony-arm64': 1.0.0-beta.45
-      '@rolldown/binding-wasm32-wasi': 1.0.0-beta.45
-      '@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.45
-      '@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.45
-      '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.45
-
   rolldown@1.0.0-rc.3:
     dependencies:
       '@oxc-project/types': 0.112.0
@@ -14504,8 +13722,6 @@ snapshots:
 
   tailwind-merge@3.5.0: {}
 
-  tailwindcss@4.1.18: {}
-
   tailwindcss@4.2.1: {}
 
   tapable@2.3.0: {}
@@ -14634,32 +13850,6 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
-  tsdown@0.15.12(typescript@5.9.3)(unrun@0.2.27):
-    dependencies:
-      ansis: 4.2.0
-      cac: 6.7.14
-      chokidar: 4.0.3
-      debug: 4.4.3
-      diff: 8.0.3
-      empathic: 2.0.0
-      hookable: 5.5.3
-      rolldown: 1.0.0-beta.45
-      rolldown-plugin-dts: 0.17.8(rolldown@1.0.0-beta.45)(typescript@5.9.3)
-      semver: 7.7.4
-      tinyexec: 1.0.2
-      tinyglobby: 0.2.15
-      tree-kill: 1.2.2
-      unconfig: 7.4.2
-    optionalDependencies:
-      typescript: 5.9.3
-      unrun: 0.2.27
-    transitivePeerDependencies:
-      - '@ts-macro/tsc'
-      - '@typescript/native-preview'
-      - oxc-resolver
-      - supports-color
-      - vue-tsc
-
   tsdown@0.20.3(typescript@5.9.3):
     dependencies:
       ansis: 4.2.0
@@ -14755,14 +13945,6 @@ snapshots:
       '@quansync/fs': 1.0.0
       quansync: 1.0.0
 
-  unconfig@7.4.2:
-    dependencies:
-      '@quansync/fs': 1.0.0
-      defu: 6.1.4
-      jiti: 2.6.1
-      quansync: 1.0.0
-      unconfig-core: 7.4.2
-
   uncrypto@0.1.3: {}
 
   undici-types@5.26.5: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 8768b733..62e855a1 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -4,5 +4,4 @@ trustPolicy: no-downgrade
 
 packages:
   - 'packages/*'
-  - 'packages/__tech-preview__/*'
   - site