Use @videojs npm scope (#121)

CLAUDE.md

@@ -71,7 +71,7 @@ pnpm dev
 
 ```bash
 # Build specific package
-pnpm --filter @vjs-10/core build
+pnpm --filter @videojs/core build
 
 # Run website independently
 cd website
@@ -93,7 +93,7 @@ The monorepo uses TypeScript project references for efficient compilation:
 Key TypeScript features:
 
 - Strict mode enabled with additional checks (`noUncheckedIndexedAccess`, `exactOptionalPropertyTypes`)
-- Path mappings for all `@vjs-10/*` packages point to source directories
+- Path mappings for all `@videojs/*` packages point to source directories
 - Composite builds for incremental compilation
 
 ## Package Development

docs/ARCHITECTURE.md

@@ -1121,7 +1121,7 @@ export function useMuteButtonState(_props: any) {
 
 **Key Characteristics**:
 
-- Uses core `muteButtonStateDefinition` from `@vjs-10/core/store`
+- Uses core `muteButtonStateDefinition` from `@videojs/core/store`
 - No platform-specific assumptions
 - Could theoretically work with React Native or other platforms
 

examples/html-demo/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vjs-10/html": "workspace:*"
+    "@videojs/html": "workspace:*"
   },
   "devDependencies": {
     "typescript": "^5.9.2",

examples/html-demo/src/main.ts

@@ -1,4 +1,4 @@
-import { defineVjsPlayer } from '@vjs-10/html';
+import { defineVjsPlayer } from '@videojs/html';
 
 defineVjsPlayer();
 

examples/react-demo/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vjs-10/react": "workspace:*",
+    "@videojs/react": "workspace:*",
     "clsx": "^2.1.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

examples/react-demo/src/App.tsx

@@ -1,18 +1,18 @@
 import type { ChangeEventHandler } from 'react';
 
-import { FrostedSkin, MediaProvider, MinimalSkin, Video } from '@vjs-10/react';
-import { FullscreenEnterAltIcon, FullscreenExitAltIcon } from '@vjs-10/react/icons';
+import { FrostedSkin, MediaProvider, MinimalSkin, Video } from '@videojs/react';
+import { FullscreenEnterAltIcon, FullscreenExitAltIcon } from '@videojs/react/icons';
 import clsx from 'clsx';
 
 // import FrostedSkin from './skins/frosted/FrostedSkin';
 // import MinimalSkin from './skins/toasted/MinimalSkin';
 
 // NOTE: Commented out imports are for testing locally/externally defined skins.
-// import { MediaProvider, Video } from '@vjs-10/react';
+// import { MediaProvider, Video } from '@videojs/react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { useFullscreen } from './hooks/useFullscreen';
-import '@vjs-10/react/skins/frosted.css';
-import '@vjs-10/react/skins/minimal.css';
+import '@videojs/react/skins/frosted.css';
+import '@videojs/react/skins/minimal.css';
 import './globals.css';
 
 const skins = [

examples/react-demo/src/main.tsx

@@ -2,9 +2,9 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import App from './App';
-import '@vjs-10/react/skins/frosted.css';
+import '@videojs/react/skins/frosted.css';
 
-import '@vjs-10/react/skins/minimal.css';
+import '@videojs/react/skins/minimal.css';
 
 import './globals.css';
 

examples/react-demo/src/skins/frosted/FrostedSkin.tsx

@@ -11,7 +11,7 @@ import {
   TimeSlider,
   Tooltip,
   VolumeSlider,
-} from '@vjs-10/react';
+} from '@videojs/react';
 
 import {
   FullscreenEnterIcon,
@@ -21,7 +21,7 @@ import {
   VolumeHighIcon,
   VolumeLowIcon,
   VolumeOffIcon,
-} from '@vjs-10/react/icons';
+} from '@videojs/react/icons';
 
 import styles from './styles';
 

examples/react-demo/src/skins/minimal/MinimalSkin.tsx

@@ -8,7 +8,7 @@ import {
   MuteButton,
   PlayButton,
   TimeSlider,
-} from '@vjs-10/react';
+} from '@videojs/react';
 
 import {
   FullscreenEnterIcon,
@@ -18,7 +18,7 @@ import {
   VolumeHighIcon,
   VolumeLowIcon,
   VolumeOffIcon,
-} from '@vjs-10/react/icons';
+} from '@videojs/react/icons';
 
 import styles from './styles';
 

packages/core/README.md

@@ -1,12 +1,12 @@
-# @vjs-10/core
+# @videojs/core
 
-[![npm](https://img.shields.io/badge/npm-%40vjs--10%2Fcore-blue)](https://www.npmjs.com/package/@vjs-10/core)
+[![npm](https://img.shields.io/badge/npm-%40vjs--10%2Fcore-blue)](https://www.npmjs.com/package/@videojs/core)
 
 > **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use.
 
 ## Overview
 
-`@vjs-10/core` provides runtime-agnostic core components and utilities shared across Video.js
+`@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.
 

packages/core/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@vjs-10/core",
+  "name": "@videojs/core",
   "type": "module",
   "version": "0.1.0",
   "description": "Core components and utilities for Video.js",
@@ -40,7 +40,7 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@vjs-10/utils": "workspace:*",
+    "@videojs/utils": "workspace:*",
     "hls.js": "^1.6.7",
     "nanostores": "^1.0.1"
   },

packages/core/src/components/slider.ts

@@ -1,4 +1,4 @@
-import { shallowEqual } from '@vjs-10/utils';
+import { shallowEqual } from '@videojs/utils';
 
 import { map } from 'nanostores';
 

packages/core/src/store/mediators/fullscreenable.ts

@@ -1,4 +1,4 @@
-import { containsComposedNode } from '@vjs-10/utils/dom';
+import { containsComposedNode } from '@videojs/utils/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 = {

packages/core/src/store/mediators/temporal.ts

@@ -1,4 +1,4 @@
-import { isValidNumber } from '@vjs-10/utils';
+import { isValidNumber } from '@videojs/utils';
 
 export const temporal = {
   currentTime: {

packages/html/README.md

@@ -1,12 +1,12 @@
-# @vjs-10/html
+# @videojs/html
 
-[![npm](https://img.shields.io/badge/npm-%40vjs--10%2Fcore-blue)](https://www.npmjs.com/package/@vjs-10/html)
+[![npm](https://img.shields.io/badge/npm-%40vjs--10%2Fcore-blue)](https://www.npmjs.com/package/@videojs/html)
 
 > **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use.
 
 ## Overview
 
-`@vjs-10/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.
+`@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.
 
 ## License
 

packages/html/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@vjs-10/html",
+  "name": "@videojs/html",
   "type": "module",
   "version": "0.1.0",
   "description": "HTML library for building media players",
@@ -45,9 +45,9 @@
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
     "@open-wc/context-protocol": "^0.0.9",
-    "@vjs-10/core": "workspace:*",
-    "@vjs-10/icons": "workspace:*",
-    "@vjs-10/utils": "workspace:*"
+    "@videojs/core": "workspace:*",
+    "@videojs/icons": "workspace:*",
+    "@videojs/utils": "workspace:*"
   },
   "devDependencies": {
     "tsdown": "^0.15.9",

packages/html/src/components/media-chrome-button.ts

@@ -1,4 +1,4 @@
-import { namedNodeMapToObject } from '@vjs-10/utils/dom';
+import { namedNodeMapToObject } from '@videojs/utils/dom';
 
 export function getTemplateHTML(
   this: typeof MediaChromeButton,

packages/html/src/components/media-current-time-display.ts

@@ -1,9 +1,9 @@
-import type { CurrentTimeDisplayState } from '@vjs-10/core/store';
+import type { CurrentTimeDisplayState } from '@videojs/core/store';
 import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
 
-import { currentTimeDisplayStateDefinition } from '@vjs-10/core/store';
+import { currentTimeDisplayStateDefinition } from '@videojs/core/store';
 
-import { formatDisplayTime } from '@vjs-10/utils';
+import { formatDisplayTime } from '@videojs/utils';
 import { toConnectedHTMLComponent } from '../utils/component-factory';
 
 export class CurrentTimeDisplayBase extends HTMLElement {

packages/html/src/components/media-duration-display.ts

@@ -1,10 +1,10 @@
-import type { DurationDisplayState } from '@vjs-10/core/store';
+import type { DurationDisplayState } from '@videojs/core/store';
 import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
 
-import { durationDisplayStateDefinition } from '@vjs-10/core/store';
+import { durationDisplayStateDefinition } from '@videojs/core/store';
 
-import { formatDisplayTime } from '@vjs-10/utils';
-import { namedNodeMapToObject } from '@vjs-10/utils/dom';
+import { formatDisplayTime } from '@videojs/utils';
+import { namedNodeMapToObject } from '@videojs/utils/dom';
 import { toConnectedHTMLComponent } from '../utils/component-factory';
 
 export function getTemplateHTML(

packages/html/src/components/media-fullscreen-button.ts

@@ -1,9 +1,9 @@
-import type { FullscreenButtonState } from '@vjs-10/core/store';
+import type { FullscreenButtonState } from '@videojs/core/store';
 import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
 
-import { fullscreenButtonStateDefinition } from '@vjs-10/core/store';
+import { fullscreenButtonStateDefinition } from '@videojs/core/store';
 
-import { setAttributes } from '@vjs-10/utils/dom';
+import { setAttributes } from '@videojs/utils/dom';
 import { toConnectedHTMLComponent } from '../utils/component-factory';
 import { MediaChromeButton } from './media-chrome-button';
 

packages/html/src/components/media-mute-button.ts

@@ -1,9 +1,9 @@
-import type { MuteButtonState } from '@vjs-10/core/store';
+import type { MuteButtonState } from '@videojs/core/store';
 import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
 
-import { muteButtonStateDefinition } from '@vjs-10/core/store';
+import { muteButtonStateDefinition } from '@videojs/core/store';
 
-import { setAttributes } from '@vjs-10/utils/dom';
+import { setAttributes } from '@videojs/utils/dom';
 import { toConnectedHTMLComponent } from '../utils/component-factory';
 import { MediaChromeButton } from './media-chrome-button';
 

packages/html/src/components/media-play-button.ts

@@ -1,9 +1,9 @@
-import type { PlayButtonState } from '@vjs-10/core/store';
+import type { PlayButtonState } from '@videojs/core/store';
 import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
 
-import { playButtonStateDefinition } from '@vjs-10/core/store';
+import { playButtonStateDefinition } from '@videojs/core/store';
 
-import { setAttributes } from '@vjs-10/utils/dom';
+import { setAttributes } from '@videojs/utils/dom';
 import { toConnectedHTMLComponent } from '../utils/component-factory';
 import { MediaChromeButton } from './media-chrome-button';
 

packages/html/src/components/media-popover.ts

@@ -1,8 +1,8 @@
 import type { Placement } from '@floating-ui/dom';
 import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
-import { uniqueId } from '@vjs-10/utils';
+import { uniqueId } from '@videojs/utils';
 
-import { getDocument, getNextTabbable, getPreviousTabbable, isOutsideEvent } from '@vjs-10/utils/dom';
+import { getDocument, getNextTabbable, getPreviousTabbable, isOutsideEvent } from '@videojs/utils/dom';
 
 export class MediaPopoverRoot extends HTMLElement {
   #open = false;

packages/html/src/components/media-preview-time-display.ts

@@ -1,9 +1,9 @@
-import type { PreviewTimeDisplayState } from '@vjs-10/core/store';
+import type { PreviewTimeDisplayState } from '@videojs/core/store';
 import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
 
-import { previewTimeDisplayStateDefinition } from '@vjs-10/core/store';
+import { previewTimeDisplayStateDefinition } from '@videojs/core/store';
 
-import { formatDisplayTime } from '@vjs-10/utils';
+import { formatDisplayTime } from '@videojs/utils';
 import { toConnectedHTMLComponent } from '../utils/component-factory';
 
 export class PreviewTimeDisplayBase extends HTMLElement {

packages/html/src/components/media-time-slider.ts

@@ -1,9 +1,9 @@
 import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
 
-import { TimeSlider as CoreTimeSlider } from '@vjs-10/core';
-import { timeSliderStateDefinition } from '@vjs-10/core/store';
+import { TimeSlider as CoreTimeSlider } from '@videojs/core';
+import { timeSliderStateDefinition } from '@videojs/core/store';
 
-import { setAttributes } from '@vjs-10/utils/dom';
+import { setAttributes } from '@videojs/utils/dom';
 import { toConnectedHTMLComponent } from '../utils/component-factory';
 
 interface TimeSliderRootState {

packages/html/src/components/media-tooltip.ts

@@ -2,7 +2,7 @@ import type { Placement } from '@floating-ui/dom';
 import type { MediaContainer } from '@/media/media-container';
 
 import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
-import { uniqueId } from '@vjs-10/utils';
+import { uniqueId } from '@videojs/utils';
 
 export class MediaTooltipRoot extends HTMLElement {
   #open = false;

packages/html/src/components/media-volume-slider.ts

@@ -1,9 +1,9 @@
 import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
 
-import { VolumeSlider as CoreVolumeSlider } from '@vjs-10/core';
-import { volumeSliderStateDefinition } from '@vjs-10/core/store';
+import { VolumeSlider as CoreVolumeSlider } from '@videojs/core';
+import { volumeSliderStateDefinition } from '@videojs/core/store';
 
-import { setAttributes } from '@vjs-10/utils/dom';
+import { setAttributes } from '@videojs/utils/dom';
 import { toConnectedHTMLComponent } from '../utils/component-factory';
 
 /**

packages/html/src/icons/media-fullscreen-enter-icon.ts

@@ -1,4 +1,4 @@
-import { SVG_ICONS } from '@vjs-10/icons';
+import { SVG_ICONS } from '@videojs/icons';
 
 import { MediaChromeIcon } from './media-chrome-icon';
 

packages/html/src/icons/media-fullscreen-exit-icon.ts

@@ -1,4 +1,4 @@
-import { SVG_ICONS } from '@vjs-10/icons';
+import { SVG_ICONS } from '@videojs/icons';
 
 import { MediaChromeIcon } from './media-chrome-icon';
 

packages/html/src/icons/media-pause-icon.ts

@@ -1,4 +1,4 @@
-import { SVG_ICONS } from '@vjs-10/icons';
+import { SVG_ICONS } from '@videojs/icons';
 
 import { MediaChromeIcon } from './media-chrome-icon';
 

packages/html/src/icons/media-play-icon.ts

@@ -1,4 +1,4 @@
-import { SVG_ICONS } from '@vjs-10/icons';
+import { SVG_ICONS } from '@videojs/icons';
 
 import { MediaChromeIcon } from './media-chrome-icon';
 

packages/html/src/icons/media-volume-high-icon.ts

@@ -1,4 +1,4 @@
-import { SVG_ICONS } from '@vjs-10/icons';
+import { SVG_ICONS } from '@videojs/icons';
 
 import { MediaChromeIcon } from './media-chrome-icon';
 

packages/html/src/icons/media-volume-low-icon.ts

@@ -1,4 +1,4 @@
-import { SVG_ICONS } from '@vjs-10/icons';
+import { SVG_ICONS } from '@videojs/icons';
 
 import { MediaChromeIcon } from './media-chrome-icon';
 

packages/html/src/icons/media-volume-off-icon.ts

@@ -1,4 +1,4 @@
-import { SVG_ICONS } from '@vjs-10/icons';
+import { SVG_ICONS } from '@videojs/icons';
 
 import { MediaChromeIcon } from './media-chrome-icon';
 

packages/html/src/media/media-provider.ts

@@ -1,8 +1,8 @@
 import type { Constructor, CustomElement } from '@open-wc/context-protocol';
-import type { MediaStore } from '@vjs-10/core/store';
+import type { MediaStore } from '@videojs/core/store';
 
 import { ProviderMixin } from '@open-wc/context-protocol';
-import { createMediaStore } from '@vjs-10/core/store';
+import { createMediaStore } from '@videojs/core/store';
 
 const ProviderHTMLElement: Constructor<CustomElement> = ProviderMixin(HTMLElement);
 

packages/icons/README.md

@@ -1,12 +1,12 @@
-# @vjs-10/icons
+# @videojs/icons
 
-[![npm](https://img.shields.io/badge/npm-%40vjs--10%2Fcore-blue)](https://www.npmjs.com/package/@vjs-10/icons)
+[![npm](https://img.shields.io/badge/npm-%40vjs--10%2Fcore-blue)](https://www.npmjs.com/package/@videojs/icons)
 
 > **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use.
 
 ## Overview
 
-`@vjs-10/icons` is a curated collection of SVG icons designed specifically for media player
+`@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.
 

packages/icons/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@vjs-10/icons",
+  "name": "@videojs/icons",
   "type": "module",
   "version": "0.1.0",
   "description": "SVG icon library for Video.js",

packages/react/README.md

@@ -1,12 +1,12 @@
-# @vjs-10/react
+# @videojs/react
 
-[![npm](https://img.shields.io/badge/npm-%40vjs--10%2Fcore-blue)](https://www.npmjs.com/package/@vjs-10/react)
+[![npm](https://img.shields.io/badge/npm-%40vjs--10%2Fcore-blue)](https://www.npmjs.com/package/@videojs/react)
 
 > **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use.
 
 ## Overview
 
-`@vjs-10/react` is a comprehensive library for building media players in React applications. It
+`@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.
 

packages/react/build/build-styles.ts

@@ -26,7 +26,7 @@
  *
  * Why concatenate?
  * - Users only need to import one CSS file per skin
- * - Simpler API: import '@vjs-10/react/skins/frosted.css'
+ * - Simpler API: import '@videojs/react/skins/frosted.css'
  */
 
 import { execSync } from 'node:child_process';

packages/react/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@vjs-10/react",
+  "name": "@videojs/react",
   "type": "module",
   "version": "0.1.0",
   "description": "React library for building media players",
@@ -55,9 +55,9 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.16",
-    "@vjs-10/core": "workspace:*",
-    "@vjs-10/icons": "workspace:*",
-    "@vjs-10/utils": "workspace:*"
+    "@videojs/core": "workspace:*",
+    "@videojs/icons": "workspace:*",
+    "@videojs/utils": "workspace:*"
   },
   "devDependencies": {
     "@svgr/babel-plugin-add-jsx-attribute": "^8.0.0",

packages/react/src/components/CurrentTimeDisplay.tsx

@@ -1,8 +1,8 @@
 import type { PropsWithChildren } from 'react';
 import type { ConnectedComponent } from '../utils/component-factory';
 
-import { currentTimeDisplayStateDefinition } from '@vjs-10/core/store';
-import { formatDisplayTime, shallowEqual } from '@vjs-10/utils';
+import { currentTimeDisplayStateDefinition } from '@videojs/core/store';
+import { formatDisplayTime, shallowEqual } from '@videojs/utils';
 
 import { useMediaSelector } from '@/store';
 import { toConnectedComponent } from '../utils/component-factory';

packages/react/src/components/DurationDisplay.tsx

@@ -1,8 +1,8 @@
 import type { PropsWithChildren } from 'react';
 import type { ConnectedComponent } from '../utils/component-factory';
 
-import { durationDisplayStateDefinition } from '@vjs-10/core/store';
-import { formatDisplayTime, shallowEqual } from '@vjs-10/utils';
+import { durationDisplayStateDefinition } from '@videojs/core/store';
+import { formatDisplayTime, shallowEqual } from '@videojs/utils';
 
 import { useMediaSelector } from '@/store';
 import { toConnectedComponent } from '../utils/component-factory';

packages/react/src/components/FullscreenButton.tsx

@@ -1,9 +1,9 @@
 import type { PropsWithChildren } from 'react';
 import type { ConnectedComponent } from '../utils/component-factory';
 
-import { fullscreenButtonStateDefinition } from '@vjs-10/core/store';
+import { fullscreenButtonStateDefinition } from '@videojs/core/store';
 
-import { shallowEqual } from '@vjs-10/utils';
+import { shallowEqual } from '@videojs/utils';
 import { useMemo } from 'react';
 
 import { useMediaSelector, useMediaStore } from '@/store';

packages/react/src/components/MediaContainer.tsx

@@ -1,8 +1,8 @@
 import type { FC, HTMLProps, PropsWithChildren, RefCallback } from 'react';
 
-import { playButtonStateDefinition } from '@vjs-10/core/store';
+import { playButtonStateDefinition } from '@videojs/core/store';
 
-import { shallowEqual } from '@vjs-10/utils';
+import { shallowEqual } from '@videojs/utils';
 import { forwardRef, useCallback, useMemo } from 'react';
 import { useMediaSelector, useMediaStore } from '@/store';
 import { useComposedRefs } from '../utils/use-composed-refs';
@@ -15,7 +15,7 @@ import { useComposedRefs } from '../utils/use-composed-refs';
  * in the media store, enabling fullscreen functionality.
  *
  * @example
- * import { useMediaContainerRef } from '@vjs-10/react';
+ * import { useMediaContainerRef } from '@videojs/react';
  *
  * const PlayerContainer = ({ children }) => {
  *   const containerRef = useMediaContainerRef();
@@ -45,7 +45,7 @@ export function useMediaContainerRef(): RefCallback<HTMLElement | null> {
  * This provides a simple wrapper component for fullscreen functionality.
  *
  * @example
- * import { MediaContainer } from '@vjs-10/react';
+ * import { MediaContainer } from '@videojs/react';
  *
  * const MyPlayer = () => (
  *   <MediaContainer>

packages/react/src/components/MuteButton.tsx

@@ -1,9 +1,9 @@
 import type { PropsWithChildren } from 'react';
 import type { ConnectedComponent } from '../utils/component-factory';
 
-import { muteButtonStateDefinition } from '@vjs-10/core/store';
+import { muteButtonStateDefinition } from '@videojs/core/store';
 
-import { shallowEqual } from '@vjs-10/utils';
+import { shallowEqual } from '@videojs/utils';
 import { useMemo } from 'react';
 
 import { useMediaSelector, useMediaStore } from '@/store';

packages/react/src/components/PlayButton.tsx

@@ -1,9 +1,9 @@
 import type { PropsWithChildren } from 'react';
 import type { ConnectedComponent } from '../utils/component-factory';
 
-import { playButtonStateDefinition } from '@vjs-10/core/store';
+import { playButtonStateDefinition } from '@videojs/core/store';
 
-import { shallowEqual } from '@vjs-10/utils';
+import { shallowEqual } from '@videojs/utils';
 import { useMemo } from 'react';
 
 import { useMediaSelector, useMediaStore } from '@/store';

packages/react/src/components/PreviewTimeDisplay.tsx

@@ -1,8 +1,8 @@
 import type { PropsWithChildren } from 'react';
 import type { ConnectedComponent } from '../utils/component-factory';
 
-import { previewTimeDisplayStateDefinition } from '@vjs-10/core/store';
-import { formatDisplayTime, shallowEqual } from '@vjs-10/utils';
+import { previewTimeDisplayStateDefinition } from '@videojs/core/store';
+import { formatDisplayTime, shallowEqual } from '@videojs/utils';
 
 import { useMediaSelector } from '@/store';
 import { toConnectedComponent } from '../utils/component-factory';

packages/react/src/components/TimeSlider.tsx

@@ -1,9 +1,9 @@
 import type { ConnectedComponent } from '../utils/component-factory';
 
-import { TimeSlider as CoreTimeSlider } from '@vjs-10/core';
+import { TimeSlider as CoreTimeSlider } from '@videojs/core';
 
-import { timeSliderStateDefinition } from '@vjs-10/core/store';
-import { shallowEqual } from '@vjs-10/utils';
+import { timeSliderStateDefinition } from '@videojs/core/store';
+import { shallowEqual } from '@videojs/utils';
 import { useCallback, useMemo } from 'react';
 
 import { useMediaSelector, useMediaStore } from '@/store';

packages/react/src/components/Video.tsx

@@ -10,7 +10,7 @@ import type {
   VideoHTMLAttributes,
 } from 'react';
 
-import { createMediaPlaybackController } from '@vjs-10/core/media';
+import { createMediaPlaybackController } from '@videojs/core/media';
 
 import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useMediaRef } from '@/store';

packages/react/src/components/VolumeSlider.tsx

@@ -1,9 +1,9 @@
 import type { ConnectedComponent } from '../utils/component-factory';
 
-import { VolumeSlider as CoreVolumeSlider } from '@vjs-10/core';
+import { VolumeSlider as CoreVolumeSlider } from '@videojs/core';
 
-import { volumeSliderStateDefinition } from '@vjs-10/core/store';
-import { shallowEqual } from '@vjs-10/utils';
+import { volumeSliderStateDefinition } from '@videojs/core/store';
+import { shallowEqual } from '@videojs/utils';
 import { useCallback, useMemo } from 'react';
 
 import { useMediaSelector, useMediaStore } from '@/store';

packages/react/src/store/hooks.ts

@@ -1,5 +1,5 @@
 /** @TODO !!! Revisit for SSR (CJP) */
-import type { MediaStore } from '@vjs-10/core/store';
+import type { MediaStore } from '@videojs/core/store';
 
 import { useContext } from 'react';
 

packages/react/src/store/media-provider.tsx

@@ -3,7 +3,7 @@
 /** @TODO !!! Revisit for SSR (CJP) */
 import type { ReactNode } from 'react';
 
-import { createMediaStore } from '@vjs-10/core/store';
+import { createMediaStore } from '@videojs/core/store';
 
 import { useMemo } from 'react';
 import { MediaContext } from './context';

packages/utils/README.md

@@ -1,6 +1,6 @@
-# @vjs-10/utils
+# @videojs/utils
 
-[![npm](https://img.shields.io/badge/npm-%40vjs--10%2Fcore-blue)](https://www.npmjs.com/package/@vjs-10/utils)
+[![npm](https://img.shields.io/badge/npm-%40vjs--10%2Fcore-blue)](https://www.npmjs.com/package/@videojs/utils)
 
 > **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use.
 

packages/utils/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@vjs-10/utils",
+  "name": "@videojs/utils",
   "type": "module",
   "version": "0.1.0",
   "description": "Utility functions and helpers.",

pnpm-lock.yaml

@@ -74,7 +74,7 @@ importers:
 
   examples/html-demo:
     dependencies:
-      '@vjs-10/html':
+      '@videojs/html':
         specifier: workspace:*
         version: link:../../packages/html
     devDependencies:
@@ -87,7 +87,7 @@ importers:
 
   examples/react-demo:
     dependencies:
-      '@vjs-10/react':
+      '@videojs/react':
         specifier: workspace:*
         version: link:../../packages/react
       clsx:
@@ -127,7 +127,7 @@ importers:
 
   packages/core:
     dependencies:
-      '@vjs-10/utils':
+      '@videojs/utils':
         specifier: workspace:*
         version: link:../utils
       hls.js:
@@ -152,13 +152,13 @@ importers:
       '@open-wc/context-protocol':
         specifier: ^0.0.9
         version: 0.0.9
-      '@vjs-10/core':
+      '@videojs/core':
         specifier: workspace:*
         version: link:../core
-      '@vjs-10/icons':
+      '@videojs/icons':
         specifier: workspace:*
         version: link:../icons
-      '@vjs-10/utils':
+      '@videojs/utils':
         specifier: workspace:*
         version: link:../utils
     devDependencies:
@@ -183,13 +183,13 @@ importers:
       '@floating-ui/react':
         specifier: ^0.27.16
         version: 0.27.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@vjs-10/core':
+      '@videojs/core':
         specifier: workspace:*
         version: link:../core
-      '@vjs-10/icons':
+      '@videojs/icons':
         specifier: workspace:*
         version: link:../icons
-      '@vjs-10/utils':
+      '@videojs/utils':
         specifier: workspace:*
         version: link:../utils
     devDependencies:
@@ -266,7 +266,7 @@ importers:
       '@tailwindcss/vite':
         specifier: ^4.1.14
         version: 4.1.14(vite@7.1.6(@types/node@22.18.6)(jiti@2.6.1)(lightningcss@1.30.1)(yaml@2.8.1))
-      '@vjs-10/react':
+      '@videojs/react':
         specifier: workspace:*
         version: link:../packages/react
       astro:

website/package.json

@@ -21,7 +21,7 @@
     "@base-ui-components/react": "1.0.0-beta.4",
     "@nanostores/react": "^1.0.0",
     "@tailwindcss/vite": "^4.1.14",
-    "@vjs-10/react": "workspace:*",
+    "@videojs/react": "workspace:*",
     "astro": "^5.14.4",
     "clsx": "^2.1.1",
     "github-slugger": "^2.0.0",

website/src/components/HomePageDemo/Base.tsx

@@ -21,8 +21,8 @@ function generateReactCode(skin: Skin, media: Media): string {
   const skinImport = skin === 'frosted' ? 'frosted' : 'minimal';
   const videoExtension = media === 'hls-video' ? 'm3u8' : 'mp4';
 
-  return `import { VideoProvider, ${mediaComponent} } from '@vjs-10/react';
-import { ${skinComponent} } from '@vjs-10/react/skins/${skinImport}';
+  return `import { VideoProvider, ${mediaComponent} } from '@videojs/react';
+import { ${skinComponent} } from '@videojs/react/skins/${skinImport}';
 
 export const VideoPlayer = () => {
   return (

website/src/components/home/HeroVideo.tsx

@@ -1,9 +1,9 @@
 import { useStore } from '@nanostores/react';
-import { FrostedSkin, MediaProvider, MinimalSkin, Video } from '@vjs-10/react';
+import { FrostedSkin, MediaProvider, MinimalSkin, Video } from '@videojs/react';
 import { skin } from '@/stores/homePageDemos';
 import { PLAYBACK_ID } from './config';
-import '@vjs-10/react/skins/frosted.css';
-import '@vjs-10/react/skins/minimal.css';
+import '@videojs/react/skins/frosted.css';
+import '@videojs/react/skins/minimal.css';
 
 export default function HeroVideo({ className, poster }: { className?: string; poster: string }) {
   // Subscribe to skin store for future skin switching functionality