diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..bd5535a6
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+pnpm-lock.yaml
diff --git a/.prettierrc.cjs b/.prettierrc.cjs
new file mode 100644
index 00000000..4fe65186
--- /dev/null
+++ b/.prettierrc.cjs
@@ -0,0 +1,40 @@
+module.exports = {
+  printWidth: 120,
+  singleQuote: true,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  quoteProps: 'as-needed',
+  jsxSingleQuote: false,
+  trailingComma: 'es5',
+  bracketSpacing: true,
+  bracketSameLine: false,
+  arrowParens: 'always',
+  plugins: ['@ianvs/prettier-plugin-sort-imports'],
+  importOrder: [
+    '.css$',
+    '.styles$',
+    '',
+    '<TYPES>',
+    '',
+    '^__',
+    '',
+    '^node:',
+    '<BUILTIN_MODULES>',
+    '',
+    '^react',
+    '^prop-types$',
+    '',
+    '<THIRD_PARTY_MODULES>',
+    '',
+    '.+__deprecated__',
+    '',
+    '^@mux',
+    '',
+    '^@',
+    '',
+    '^[$]',
+    '^[../]',
+    '^(?!.*[.](svg|png|webp|mp4)$)[./].*$',
+  ],
+};
diff --git a/CLAUDE.md b/CLAUDE.md
index 58884dc3..96038318 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -7,12 +7,14 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 This is a Video.js 10 monorepo organized by platform/runtime with a clear dependency hierarchy:
 
 ### Package Structure
+
 - **Core packages** (`packages/core/*`) - Runtime-agnostic packages that form the foundation
-- **HTML packages** (`packages/html/*`) - DOM/Browser-specific implementations 
+- **HTML packages** (`packages/html/*`) - DOM/Browser-specific implementations
 - **React packages** (`packages/react/*`) - React-specific implementations
 - **React Native packages** (`packages/react-native/*`) - React Native implementations
 
 ### Dependency Hierarchy
+
 - Core packages have no dependencies on other vjs-10 packages
 - HTML packages depend only on core packages
 - React packages depend only on core packages (with React peer deps)
@@ -21,6 +23,7 @@ This is a Video.js 10 monorepo organized by platform/runtime with a clear depend
 This prevents circular dependencies and ensures maximum reusability.
 
 ### Key Core Packages
+
 - `@vjs-10/media-store` - State management for media players
 - `@vjs-10/playback-engine` - Abstraction layer for media engines (HLS.js, Dash.js, etc.)
 - `@vjs-10/media` - HTMLMediaElement contracts and utilities
@@ -29,6 +32,7 @@ This prevents circular dependencies and ensures maximum reusability.
 ## Common Development Commands
 
 ### Monorepo Commands (run from root)
+
 ```bash
 # Install all dependencies
 npm install
@@ -50,6 +54,7 @@ npm run clean
 ```
 
 ### Working with Specific Packages
+
 ```bash
 # Build specific package
 npm run build --workspace=@vjs-10/media-store
@@ -62,11 +67,13 @@ npm run build
 ## TypeScript Configuration
 
 The monorepo uses TypeScript project references for efficient compilation:
+
 - `tsconfig.base.json` - Shared compiler options with strict settings
 - `tsconfig.json` - Root config with path mappings and project references
 - Each package has its own `tsconfig.json` extending the base
 
 Key TypeScript features:
+
 - Strict mode enabled with additional checks (`noUncheckedIndexedAccess`, `exactOptionalPropertyTypes`)
 - Path mappings for all `@vjs-10/*` packages point to source directories
 - Composite builds for incremental compilation
@@ -74,7 +81,9 @@ Key TypeScript features:
 ## Package Development
 
 ### Individual Package Scripts
+
 Most packages follow this pattern:
+
 ```bash
 npm run build    # Compile TypeScript (tsc)
 npm run test     # Currently placeholder "No tests yet"
@@ -82,6 +91,7 @@ npm run clean    # Remove dist directory
 ```
 
 ### Package Types
+
 - **Core packages** - Pure TypeScript, no external dependencies
 - **HTML packages** - May include DOM-specific code, depend on core packages
 - **React packages** - Include React peer dependencies, depend on core packages
@@ -90,8 +100,9 @@ npm run clean    # Remove dist directory
 ## Workspace Management
 
 This uses npm workspaces with the following workspace patterns:
+
 - `packages/core/*`
-- `packages/html/*` 
+- `packages/html/*`
 - `packages/react/*`
 - `packages/react-native/*`
 
@@ -102,6 +113,7 @@ Internal dependencies use `workspace:*` protocol for linking between packages.
 This project uses [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#specification) for commit messages.
 
 ### Commit Message Format
+
 ```
 <type>[optional scope]: <description>
 
@@ -111,6 +123,7 @@ This project uses [Conventional Commits](https://www.conventionalcommits.org/en/
 ```
 
 ### Common Types
+
 - `feat:` - New feature
 - `fix:` - Bug fix
 - `docs:` - Documentation changes
@@ -120,15 +133,19 @@ This project uses [Conventional Commits](https://www.conventionalcommits.org/en/
 - `chore:` - Maintenance tasks, dependency updates
 
 ### Scope Examples
+
 Use package names or areas of the codebase:
+
 - `feat(media-store): add pause state management`
 - `fix(react-icons): resolve SVG rendering issue`
 - `docs(readme): update installation instructions`
 - `chore(deps): update typescript to 5.4.0`
 
 ### Breaking Changes
+
 For breaking changes, add `!` after the type/scope:
+
 ```
 feat!: remove deprecated playback API
 feat(media-store)!: change state interface structure
-```
\ No newline at end of file
+```
diff --git a/examples/html-demo/index.html b/examples/html-demo/index.html
index 6099e3db..d602e3b6 100644
--- a/examples/html-demo/index.html
+++ b/examples/html-demo/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/examples/html-demo/package.json b/examples/html-demo/package.json
index 4150fcae..75f78a5a 100644
--- a/examples/html-demo/package.json
+++ b/examples/html-demo/package.json
@@ -16,4 +16,4 @@
     "typescript": "^5.9.2",
     "vite": "^7.1.6"
   }
-}
\ No newline at end of file
+}
diff --git a/examples/html-demo/vite.config.mts b/examples/html-demo/vite.config.mts
index c2f634a8..289e7f7a 100644
--- a/examples/html-demo/vite.config.mts
+++ b/examples/html-demo/vite.config.mts
@@ -1,6 +1,7 @@
-import { defineConfig } from 'vite';
 import { fileURLToPath } from 'url';
 
+import { defineConfig } from 'vite';
+
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
 export default defineConfig({
diff --git a/examples/react-demo/index.html b/examples/react-demo/index.html
index 68783abd..7a6a9840 100644
--- a/examples/react-demo/index.html
+++ b/examples/react-demo/index.html
@@ -1,13 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <title>VJS React Demo</title>
-    <link rel="preconnect" href="https://rsms.me/">
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+    <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>
\ No newline at end of file
+</html>
diff --git a/examples/react-demo/package.json b/examples/react-demo/package.json
index 57625108..08278368 100644
--- a/examples/react-demo/package.json
+++ b/examples/react-demo/package.json
@@ -22,4 +22,4 @@
     "typescript": "^5.9.2",
     "vite": "^7.1.6"
   }
-}
\ No newline at end of file
+}
diff --git a/examples/react-demo/src/globals.css b/examples/react-demo/src/globals.css
index 07a0f526..555d3400 100644
--- a/examples/react-demo/src/globals.css
+++ b/examples/react-demo/src/globals.css
@@ -4,11 +4,13 @@
 @source "../../../packages/react";
 
 @theme {
-  --font-sans: InterVariable, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-sans:
+    InterVariable, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
 }
 
 :root {
-  font-feature-settings: "cv01", "ss01", "ss03";
+  font-feature-settings: 'cv01', 'ss01', 'ss03';
 }
 
 /* Make hocus (hover + focus-visible) variants */
@@ -16,4 +18,4 @@
 @custom-variant group-hocus (&:is(:hover, :focus-visible) &);
 @custom-variant peer-hocus (&:is(:hover, :focus-visible) ~ &);
 /* Make reduced-transparency variant */
-@custom-variant reduced-transparency @media (prefers-reduced-transparency: reduce);
\ No newline at end of file
+@custom-variant reduced-transparency @media (prefers-reduced-transparency: reduce);
diff --git a/examples/react-demo/src/main.tsx b/examples/react-demo/src/main.tsx
index 12e20951..250236dd 100644
--- a/examples/react-demo/src/main.tsx
+++ b/examples/react-demo/src/main.tsx
@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
-import { MediaProvider, Video, MediaSkinDefault } from '@vjs-10/react';
+
+import { MediaProvider, MediaSkinDefault, Video } from '@vjs-10/react';
 
 import './globals.css';
 
@@ -15,10 +16,7 @@ function DemoPlayer() {
               src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
             /> */}
             {/* @ts-ignore -- types are incorrect */}
-            <Video
-              muted
-              src="https://stream.mux.com/a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M.m3u8"
-            />
+            <Video muted src="https://stream.mux.com/a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M.m3u8" />
           </MediaSkinDefault>
         </div>
       </MediaProvider>
@@ -27,15 +25,12 @@ function DemoPlayer() {
         <div className="w-full max-w-4xl mx-auto">
           <MediaSkinDefault>
             {/* @ts-ignore -- types are incorrect */}
-            <Video
-              muted
-              src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8"
-            />
+            <Video muted src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8" />
           </MediaSkinDefault>
         </div>
       </MediaProvider>
     </div>
   );
-};
+}
 
 ReactDOM.createRoot(document.getElementById('root')!).render(<DemoPlayer />);
diff --git a/examples/react-demo/vite.config.ts b/examples/react-demo/vite.config.ts
index 6a7a59f8..8284bd35 100644
--- a/examples/react-demo/vite.config.ts
+++ b/examples/react-demo/vite.config.ts
@@ -1,5 +1,5 @@
-
 import type { UserConfig } from 'vite';
+
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 
diff --git a/package-lock.json b/package-lock.json
index d475036b..50975f4e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,8 +16,10 @@
         "examples/*"
       ],
       "devDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
         "@types/node": "^20.0.0",
         "@types/react": "^18.0.0",
+        "prettier": "^3.6.2",
         "react": "^18.0.0",
         "tsup": "^8.0.0",
         "turbo": "^2.5.5",
@@ -819,6 +821,52 @@
         "node": ">=18"
       }
     },
+    "node_modules/@ianvs/prettier-plugin-sort-imports": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@ianvs/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-4.7.0.tgz",
+      "integrity": "sha512-soa2bPUJAFruLL4z/CnMfSEKGznm5ebz29fIa9PxYtu8HHyLKNE1NXAs6dylfw1jn/ilEIfO2oLLN6uAafb7DA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/generator": "^7.26.2",
+        "@babel/parser": "^7.26.2",
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.26.0",
+        "semver": "^7.5.2"
+      },
+      "peerDependencies": {
+        "@prettier/plugin-oxc": "^0.0.4",
+        "@vue/compiler-sfc": "2.7.x || 3.x",
+        "content-tag": "^4.0.0",
+        "prettier": "2 || 3 || ^4.0.0-0",
+        "prettier-plugin-ember-template-tag": "^2.1.0"
+      },
+      "peerDependenciesMeta": {
+        "@prettier/plugin-oxc": {
+          "optional": true
+        },
+        "@vue/compiler-sfc": {
+          "optional": true
+        },
+        "content-tag": {
+          "optional": true
+        },
+        "prettier-plugin-ember-template-tag": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@ianvs/prettier-plugin-sort-imports/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -2025,6 +2073,21 @@
         "@svgr/core": "*"
       }
     },
+    "node_modules/@svgr/plugin-prettier/node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/@svgr/plugin-svgo": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-8.1.0.tgz",
@@ -5568,16 +5631,15 @@
       "license": "MIT"
     },
     "node_modules/prettier": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
       "dev": true,
-      "license": "MIT",
       "bin": {
-        "prettier": "bin-prettier.js"
+        "prettier": "bin/prettier.cjs"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=14"
       },
       "funding": {
         "url": "https://github.com/prettier/prettier?sponsor=1"
@@ -6978,9 +7040,9 @@
         "@rollup/plugin-node-resolve": "^15.0.0",
         "@rollup/plugin-typescript": "^11.0.0",
         "@svgr/babel-plugin-add-jsx-attribute": "^8.0.0",
-        "@svgr/cli": "^8.0.0",
-        "@svgr/plugin-jsx": "^8.0.0",
-        "@svgr/plugin-prettier": "^8.0.0",
+        "@svgr/cli": "^8.1.0",
+        "@svgr/plugin-jsx": "^8.1.0",
+        "@svgr/plugin-prettier": "^8.1.0",
         "@types/react": "^18.0.0",
         "react": "^18.0.0",
         "rollup": "^4.0.0",
diff --git a/package.json b/package.json
index b6ae4e13..5d60ed8b 100644
--- a/package.json
+++ b/package.json
@@ -11,19 +11,23 @@
     "examples/*"
   ],
   "scripts": {
-    "build": "turbo run build",
     "build:libs": "turbo run build --filter=!./examples/*",
-    "test": "turbo run test",
-    "lint": "turbo run lint",
-    "typecheck": "turbo run typecheck",
+    "build": "turbo run build",
     "clean": "turbo run clean",
-    "dev": "turbo run dev --parallel",
     "dev:html": "turbo run dev --filter=html-demo...",
-    "dev:react": "turbo run dev --filter=react-demo..."
+    "dev:react": "turbo run dev --filter=react-demo...",
+    "dev": "turbo run dev --parallel",
+    "format:check": "prettier . --check --log-level warn --cache",
+    "format": "prettier . --write --log-level warn --cache",
+    "lint": "turbo run lint",
+    "test": "turbo run test",
+    "typecheck": "turbo run typecheck"
   },
   "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
     "@types/node": "^20.0.0",
     "@types/react": "^18.0.0",
+    "prettier": "^3.6.2",
     "react": "^18.0.0",
     "tsup": "^8.0.0",
     "turbo": "^2.5.5",
diff --git a/packages/core/icons/rollup.config.js b/packages/core/icons/rollup.config.js
index ad6f6980..63284534 100644
--- a/packages/core/icons/rollup.config.js
+++ b/packages/core/icons/rollup.config.js
@@ -13,7 +13,7 @@ module.exports = [
       sourcemap: true,
     },
     watch: {
-      clearScreen: false
+      clearScreen: false,
     },
     external: (id) => {
       // Don't externalize relative imports (starts with . or /)
@@ -25,10 +25,10 @@ module.exports = [
     },
     plugins: [
       string({
-        include: '**/*.svg'
+        include: '**/*.svg',
       }),
       resolve({
-        extensions: ['.js', '.jsx', '.ts', '.tsx']
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
       }),
       commonjs(),
       typescript({
@@ -47,7 +47,7 @@ module.exports = [
       sourcemap: true,
     },
     watch: {
-      clearScreen: false
+      clearScreen: false,
     },
     external: (id) => {
       // Don't externalize relative imports (starts with . or /)
@@ -59,10 +59,10 @@ module.exports = [
     },
     plugins: [
       string({
-        include: '**/*.svg'
+        include: '**/*.svg',
       }),
       resolve({
-        extensions: ['.js', '.jsx', '.ts', '.tsx']
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
       }),
       commonjs(),
       typescript({
diff --git a/packages/core/icons/src/index.ts b/packages/core/icons/src/index.ts
index 3ede7757..e44c8488 100644
--- a/packages/core/icons/src/index.ts
+++ b/packages/core/icons/src/index.ts
@@ -1,11 +1,11 @@
 // Import SVG files as strings
-import playSvg from '../assets/play.svg';
+import fullscreenEnterSvg from '../assets/fullscreen-enter.svg';
+import fullscreenExitSvg from '../assets/fullscreen-exit.svg';
 import pauseSvg from '../assets/pause.svg';
+import playSvg from '../assets/play.svg';
 import volumeHighSvg from '../assets/volume-high.svg';
 import volumeLowSvg from '../assets/volume-low.svg';
 import volumeOffSvg from '../assets/volume-off.svg';
-import fullscreenEnterSvg from '../assets/fullscreen-enter.svg';
-import fullscreenExitSvg from '../assets/fullscreen-exit.svg';
 
 // Export SVG strings directly
 export const SVG_ICONS = {
@@ -29,17 +29,17 @@ export const ICON_DEFINITIONS: Record<string, IconDefinition> = {
   play: {
     name: 'play',
     viewBox: '0 0 24 24',
-    paths: ['M8 5v14l11-7z']
+    paths: ['M8 5v14l11-7z'],
   },
   pause: {
     name: 'pause',
     viewBox: '0 0 24 24',
-    paths: ['M6 19h4V5H6v14zm8-14v14h4V5h-4z']
+    paths: ['M6 19h4V5H6v14zm8-14v14h4V5h-4z'],
   },
   stop: {
     name: 'stop',
     viewBox: '0 0 24 24',
-    paths: ['M6 6h12v12H6z']
+    paths: ['M6 6h12v12H6z'],
   },
   volumeUp: {
     name: 'volume-up',
@@ -47,8 +47,8 @@ export const ICON_DEFINITIONS: Record<string, IconDefinition> = {
     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'
-    ]
+      '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',
@@ -57,19 +57,21 @@ export const ICON_DEFINITIONS: Record<string, IconDefinition> = {
       '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'
-    ]
+      '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']
+    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']
-  }
+    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 {
@@ -81,6 +83,6 @@ export function getAllIcons(): IconDefinition[] {
 }
 
 export function createSVGString(icon: IconDefinition): string {
-  const pathElements = icon.paths.map(path => `<path d="${path}"/>`).join('');
+  const pathElements = icon.paths.map((path) => `<path d="${path}"/>`).join('');
   return `<svg viewBox="${icon.viewBox}" xmlns="http://www.w3.org/2000/svg">${pathElements}</svg>`;
-}
\ No newline at end of file
+}
diff --git a/packages/core/icons/src/svg.d.ts b/packages/core/icons/src/svg.d.ts
index fc52f076..cdb2b1a9 100644
--- a/packages/core/icons/src/svg.d.ts
+++ b/packages/core/icons/src/svg.d.ts
@@ -1,4 +1,4 @@
 declare module '*.svg' {
   const content: string;
   export default content;
-}
\ No newline at end of file
+}
diff --git a/packages/core/icons/tsconfig.build.json b/packages/core/icons/tsconfig.build.json
index 698a5b71..6c809265 100644
--- a/packages/core/icons/tsconfig.build.json
+++ b/packages/core/icons/tsconfig.build.json
@@ -10,4 +10,4 @@
     "incremental": false
   },
   "exclude": ["dist", "node_modules"]
-}
\ No newline at end of file
+}
diff --git a/packages/core/icons/tsconfig.json b/packages/core/icons/tsconfig.json
index c419f915..9d54d911 100644
--- a/packages/core/icons/tsconfig.json
+++ b/packages/core/icons/tsconfig.json
@@ -6,4 +6,4 @@
   },
   "include": ["src/**/*"],
   "exclude": ["dist", "node_modules"]
-}
\ No newline at end of file
+}
diff --git a/packages/core/media-store/package.json b/packages/core/media-store/package.json
index 7f42ad13..c7c27f6a 100644
--- a/packages/core/media-store/package.json
+++ b/packages/core/media-store/package.json
@@ -42,4 +42,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/core/media-store/rollup.config.js b/packages/core/media-store/rollup.config.js
index e95bc7c6..d4d9cbf8 100644
--- a/packages/core/media-store/rollup.config.js
+++ b/packages/core/media-store/rollup.config.js
@@ -12,7 +12,7 @@ module.exports = [
       sourcemap: true,
     },
     watch: {
-      clearScreen: false
+      clearScreen: false,
     },
     external: (id) => {
       // Don't externalize relative imports (starts with . or /)
@@ -24,7 +24,7 @@ module.exports = [
     },
     plugins: [
       resolve({
-        extensions: ['.js', '.jsx', '.ts', '.tsx']
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
       }),
       commonjs(),
       typescript({
@@ -43,7 +43,7 @@ module.exports = [
       sourcemap: true,
     },
     watch: {
-      clearScreen: false
+      clearScreen: false,
     },
     external: (id) => {
       // Don't externalize relative imports (starts with . or /)
@@ -55,7 +55,7 @@ module.exports = [
     },
     plugins: [
       resolve({
-        extensions: ['.js', '.jsx', '.ts', '.tsx']
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
       }),
       commonjs(),
       typescript({
diff --git a/packages/core/media-store/src/component-state-definitions/current-time-display.ts b/packages/core/media-store/src/component-state-definitions/current-time-display.ts
index f3cb2082..5ad3deec 100644
--- a/packages/core/media-store/src/component-state-definitions/current-time-display.ts
+++ b/packages/core/media-store/src/component-state-definitions/current-time-display.ts
@@ -1,6 +1,6 @@
 /**
  * @fileoverview Current time display component state definition
- * 
+ *
  * This module provides the component state definition for current time display
  * components across HTML, React, and React Native platforms. The current time
  * display is a read-only component that shows the current playback time of media.
@@ -12,7 +12,7 @@
 export interface CurrentTimeDisplayState {
   /** The current time value in seconds */
   currentTime: number | undefined;
-  
+
   /** The total duration in seconds (for future functionality) */
   duration: number | undefined;
 }
@@ -34,7 +34,7 @@ export const currentTimeDisplayStateDefinition = {
    */
   stateTransform: (rawState: Record<string, any>): CurrentTimeDisplayState => {
     const { currentTime, duration } = rawState;
-    
+
     return {
       currentTime,
       duration,
@@ -62,4 +62,6 @@ export type CurrentTimeDisplayComponentState = ReturnType<typeof currentTimeDisp
 /**
  * Type helper to extract the request methods type (empty for read-only component)
  */
-export type CurrentTimeDisplayRequestMethods = ReturnType<typeof currentTimeDisplayStateDefinition.createRequestMethods>;
\ No newline at end of file
+export type CurrentTimeDisplayRequestMethods = ReturnType<
+  typeof currentTimeDisplayStateDefinition.createRequestMethods
+>;
diff --git a/packages/core/media-store/src/component-state-definitions/duration-display.ts b/packages/core/media-store/src/component-state-definitions/duration-display.ts
index 2d3b2fd2..9fd99815 100644
--- a/packages/core/media-store/src/component-state-definitions/duration-display.ts
+++ b/packages/core/media-store/src/component-state-definitions/duration-display.ts
@@ -1,6 +1,6 @@
 /**
  * @fileoverview Duration display component state definition
- * 
+ *
  * This module provides the component state definition for duration display
  * components across HTML, React, and React Native platforms. The duration
  * display is a read-only component that shows the total duration of media.
@@ -31,7 +31,7 @@ export const durationDisplayStateDefinition = {
    */
   stateTransform: (rawState: Record<string, any>): DurationDisplayState => {
     const { duration } = rawState;
-    
+
     return {
       duration,
     };
@@ -58,4 +58,4 @@ export type DurationDisplayComponentState = ReturnType<typeof durationDisplaySta
 /**
  * Type helper to extract the request methods type (empty for read-only component)
  */
-export type DurationDisplayRequestMethods = ReturnType<typeof durationDisplayStateDefinition.createRequestMethods>;
\ No newline at end of file
+export type DurationDisplayRequestMethods = ReturnType<typeof durationDisplayStateDefinition.createRequestMethods>;
diff --git a/packages/core/media-store/src/component-state-definitions/fullscreen-button.ts b/packages/core/media-store/src/component-state-definitions/fullscreen-button.ts
index 1929a917..af16bb97 100644
--- a/packages/core/media-store/src/component-state-definitions/fullscreen-button.ts
+++ b/packages/core/media-store/src/component-state-definitions/fullscreen-button.ts
@@ -10,27 +10,22 @@ export interface FullscreenButtonMethods {
 export interface FullscreenButtonStateDefinition {
   keys: string[];
   stateTransform: (rawState: any) => FullscreenButtonState;
-  createRequestMethods: (
-    dispatch: (action: { type: string; detail?: any }) => void,
-  ) => FullscreenButtonMethods;
+  createRequestMethods: (dispatch: (action: { type: string; detail?: any }) => void) => FullscreenButtonMethods;
 }
 
 /**
  * FullscreenButton state definition
  * Defines the core state logic that can be shared between implementations
  */
-export const fullscreenButtonStateDefinition: FullscreenButtonStateDefinition =
-  {
-    keys: ['fullscreen'],
+export const fullscreenButtonStateDefinition: FullscreenButtonStateDefinition = {
+  keys: ['fullscreen'],
 
-    stateTransform: (rawState: any): FullscreenButtonState => ({
-      fullscreen: rawState.fullscreen ?? false,
-    }),
+  stateTransform: (rawState: any): FullscreenButtonState => ({
+    fullscreen: rawState.fullscreen ?? false,
+  }),
 
-    createRequestMethods: (dispatch): FullscreenButtonMethods => ({
-      requestEnterFullscreen: () =>
-        dispatch({ type: 'fullscreenrequest', detail: true }),
-      requestExitFullscreen: () =>
-        dispatch({ type: 'fullscreenrequest', detail: false }),
-    }),
-  };
+  createRequestMethods: (dispatch): FullscreenButtonMethods => ({
+    requestEnterFullscreen: () => dispatch({ type: 'fullscreenrequest', detail: true }),
+    requestExitFullscreen: () => dispatch({ type: 'fullscreenrequest', detail: false }),
+  }),
+};
diff --git a/packages/core/media-store/src/component-state-definitions/mute-button.ts b/packages/core/media-store/src/component-state-definitions/mute-button.ts
index 6f30854b..7741bf18 100644
--- a/packages/core/media-store/src/component-state-definitions/mute-button.ts
+++ b/packages/core/media-store/src/component-state-definitions/mute-button.ts
@@ -11,9 +11,7 @@ export interface MuteButtonMethods {
 export interface MuteButtonStateDefinition {
   keys: string[];
   stateTransform: (rawState: any) => MuteButtonState;
-  createRequestMethods: (
-    dispatch: (action: { type: string }) => void,
-  ) => MuteButtonMethods;
+  createRequestMethods: (dispatch: (action: { type: string }) => void) => MuteButtonMethods;
 }
 
 /**
@@ -32,4 +30,4 @@ export const muteButtonStateDefinition: MuteButtonStateDefinition = {
     requestMute: () => dispatch({ type: 'muterequest' }),
     requestUnmute: () => dispatch({ type: 'unmuterequest' }),
   }),
-};
\ No newline at end of file
+};
diff --git a/packages/core/media-store/src/component-state-definitions/play-button.ts b/packages/core/media-store/src/component-state-definitions/play-button.ts
index fee1262f..5906e945 100644
--- a/packages/core/media-store/src/component-state-definitions/play-button.ts
+++ b/packages/core/media-store/src/component-state-definitions/play-button.ts
@@ -10,9 +10,7 @@ export interface PlayButtonMethods {
 export interface PlayButtonStateDefinition {
   keys: string[];
   stateTransform: (rawState: any) => PlayButtonState;
-  createRequestMethods: (
-    dispatch: (action: { type: string }) => void,
-  ) => PlayButtonMethods;
+  createRequestMethods: (dispatch: (action: { type: string }) => void) => PlayButtonMethods;
 }
 
 /**
@@ -30,4 +28,4 @@ export const playButtonStateDefinition: PlayButtonStateDefinition = {
     requestPlay: () => dispatch({ type: 'playrequest' }),
     requestPause: () => dispatch({ type: 'pauserequest' }),
   }),
-};
\ No newline at end of file
+};
diff --git a/packages/core/media-store/src/component-state-definitions/time-range.ts b/packages/core/media-store/src/component-state-definitions/time-range.ts
index c2b96143..94195c5e 100644
--- a/packages/core/media-store/src/component-state-definitions/time-range.ts
+++ b/packages/core/media-store/src/component-state-definitions/time-range.ts
@@ -10,9 +10,7 @@ export interface TimeRangeMethods {
 export interface TimeRangeStateDefinition {
   keys: string[];
   stateTransform: (rawState: any) => TimeRangeState;
-  createRequestMethods: (
-    dispatch: (action: { type: string; detail?: any }) => void,
-  ) => TimeRangeMethods;
+  createRequestMethods: (dispatch: (action: { type: string; detail?: any }) => void) => TimeRangeMethods;
 }
 
 /**
@@ -30,4 +28,4 @@ export const timeRangeStateDefinition: TimeRangeStateDefinition = {
       dispatch({ type: 'seekrequest', detail: time });
     },
   }),
-};
\ No newline at end of file
+};
diff --git a/packages/core/media-store/src/component-state-definitions/volume-range.ts b/packages/core/media-store/src/component-state-definitions/volume-range.ts
index 7561816c..2783d2ca 100644
--- a/packages/core/media-store/src/component-state-definitions/volume-range.ts
+++ b/packages/core/media-store/src/component-state-definitions/volume-range.ts
@@ -11,9 +11,7 @@ export interface VolumeRangeMethods {
 export interface VolumeRangeStateDefinition {
   keys: string[];
   stateTransform: (rawState: any) => VolumeRangeState;
-  createRequestMethods: (
-    dispatch: (action: { type: string; detail?: any }) => void,
-  ) => VolumeRangeMethods;
+  createRequestMethods: (dispatch: (action: { type: string; detail?: any }) => void) => VolumeRangeMethods;
 }
 
 /**
diff --git a/packages/core/media-store/src/factory.ts b/packages/core/media-store/src/factory.ts
index c4691cc2..b9ece22b 100644
--- a/packages/core/media-store/src/factory.ts
+++ b/packages/core/media-store/src/factory.ts
@@ -11,16 +11,13 @@ export type EventOrAction<D = undefined> = {
   target?: EventTarget;
 };
 
-export type FacadeGetter<T, D = T> = (
-  stateOwners: StateOwners,
-  event?: EventOrAction<D>,
-) => T;
+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,
+  stateOwners: StateOwners
 ) => (() => void) | void;
 
 export type ReadonlyFacadeProp<T, D = T> = {
@@ -32,9 +29,7 @@ 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: Pick<CustomEvent<any>, 'type' | 'detail'>,
-    ) => ReturnType<FacadeGetter<T, D>>;
+    [k: string]: (val: Pick<CustomEvent<any>, 'type' | 'detail'>) => ReturnType<FacadeGetter<T, D>>;
   };
 };
 
@@ -67,14 +62,14 @@ export function createMediaStore({
     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?.());
+      cleanups.forEach((cleanup) => cleanup?.());
       stateUpdateHandlerCleanups[stateName] = [];
     });
 
@@ -84,7 +79,7 @@ export function createMediaStore({
     // Set up new handlers
     Object.entries(stateMediator).forEach(([stateName, stateObject]) => {
       const { get, stateOwnersUpdateHandlers = [] } = stateObject;
-      
+
       if (!stateUpdateHandlerCleanups[stateName]) {
         stateUpdateHandlerCleanups[stateName] = [];
       }
@@ -96,7 +91,7 @@ export function createMediaStore({
       };
 
       // Execute each stateOwnersUpdateHandler
-      stateOwnersUpdateHandlers.forEach(setupHandler => {
+      stateOwnersUpdateHandlers.forEach((setupHandler) => {
         const cleanup = setupHandler(updateHandler, stateOwners);
         if (typeof cleanup === 'function') {
           stateUpdateHandlerCleanups[stateName]?.push(cleanup);
@@ -115,10 +110,7 @@ export function createMediaStore({
         updateStateOwners({ container: detail });
       } else {
         for (const stateObject of Object.values(stateMediator).filter(
-          (
-            stateMediatorEntry,
-          ): stateMediatorEntry is FacadeProp<any, any, any> =>
-            'set' in stateMediatorEntry,
+          (stateMediatorEntry): stateMediatorEntry is FacadeProp<any, any, any> => 'set' in stateMediatorEntry
         )) {
           const { set, actions } = stateObject;
           if (actions[type]) {
@@ -135,10 +127,13 @@ export function createMediaStore({
     },
 
     getKeys(keys: string[]) {
-      return keys.reduce((acc, k) => {
-        acc[k] = getKey(store, k);
-        return acc;
-      }, {} as { [k: 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) {
@@ -152,10 +147,7 @@ export function createMediaStore({
   };
 }
 
-function getInitialState(
-  stateMediator: Partial<StateMediator> & Pick<StateMediator, 'paused'>,
-  stateOwners: any,
-) {
+function getInitialState(stateMediator: Partial<StateMediator> & Pick<StateMediator, 'paused'>, stateOwners: any) {
   let initialState: any = {};
   for (const [stateName, { get }] of Object.entries(stateMediator)) {
     initialState[stateName] = get(stateOwners);
diff --git a/packages/core/media-store/src/index.ts b/packages/core/media-store/src/index.ts
index ec91a5e3..32c61ecf 100644
--- a/packages/core/media-store/src/index.ts
+++ b/packages/core/media-store/src/index.ts
@@ -10,4 +10,4 @@ export * from './component-state-definitions/time-range';
 export * from './component-state-definitions/fullscreen-button';
 export * from './component-state-definitions/duration-display';
 export * from './component-state-definitions/current-time-display';
-export * from './utils/time';
\ No newline at end of file
+export * from './utils/time';
diff --git a/packages/core/media-store/src/media-store.ts b/packages/core/media-store/src/media-store.ts
index b9d6d4ce..eacdace8 100644
--- a/packages/core/media-store/src/media-store.ts
+++ b/packages/core/media-store/src/media-store.ts
@@ -1,11 +1,11 @@
-import { playable } from './state-mediators/playable';
-import { audible } from './state-mediators/audible';
-import { temporal } from './state-mediators/temporal';
-import { fullscreenable } from './state-mediators/fullscreenable';
 import { createMediaStore as factory } from './factory';
+import { audible } from './state-mediators/audible';
+import { fullscreenable } from './state-mediators/fullscreenable';
+import { playable } from './state-mediators/playable';
+import { temporal } from './state-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 };
 type Params = Partial<Parameters<typeof factory>[0]>;
-export const createMediaStore = (params: Params = {}) =>
-  factory({ stateMediator, ...params });
\ No newline at end of file
+export const createMediaStore = (params: Params = {}) => factory({ stateMediator, ...params });
diff --git a/packages/core/media-store/src/state-mediators/audible.ts b/packages/core/media-store/src/state-mediators/audible.ts
index 13b2620b..7d4f7946 100644
--- a/packages/core/media-store/src/state-mediators/audible.ts
+++ b/packages/core/media-store/src/state-mediators/audible.ts
@@ -16,12 +16,12 @@ export const audible = {
       (handler: (value?: boolean) => void, stateOwners: any) => {
         const { media } = stateOwners;
         if (!media) return;
-        
+
         const eventHandler = () => handler();
         media.addEventListener('volumechange', eventHandler);
-        
+
         return () => media.removeEventListener('volumechange', eventHandler);
-      }
+      },
     ],
     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) */
@@ -48,18 +48,16 @@ export const audible = {
       (handler: (value?: number) => void, stateOwners: any) => {
         const { media } = stateOwners;
         if (!media) return;
-        
+
         const eventHandler = () => handler();
         media.addEventListener('volumechange', eventHandler);
-        
+
         return () => media.removeEventListener('volumechange', eventHandler);
-      }
+      },
     ],
     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 },
-      ) => +detail,
+      volumerequest: ({ detail }: Pick<CustomEvent<any>, 'detail'> = { detail: 0 }) => +detail,
     },
   },
   // NOTE: This could be (re)implemented as "derived state" in some manner (e.g. selectors but also other patterns/conventions) if preferred. (CJP)
@@ -76,12 +74,12 @@ export const audible = {
       (handler: (value?: 'high' | 'medium' | 'low' | 'off') => void, stateOwners: any) => {
         const { media } = stateOwners;
         if (!media) return;
-        
+
         const eventHandler = () => handler();
         media.addEventListener('volumechange', eventHandler);
-        
+
         return () => media.removeEventListener('volumechange', eventHandler);
-      }
+      },
     ],
   },
 };
diff --git a/packages/core/media-store/src/state-mediators/fullscreenable.ts b/packages/core/media-store/src/state-mediators/fullscreenable.ts
index aae32945..82acee30 100644
--- a/packages/core/media-store/src/state-mediators/fullscreenable.ts
+++ b/packages/core/media-store/src/state-mediators/fullscreenable.ts
@@ -46,13 +46,10 @@ export const fullscreenable = {
           'fullscreenElement' in doc
             ? 'fullscreenElement'
             : 'webkitFullscreenElement' in doc
-            ? 'webkitFullscreenElement'
-            : undefined;
+              ? 'webkitFullscreenElement'
+              : undefined;
 
-        if (
-          fullscreenElementKey &&
-          !(fullscreenElementKey in (currentRoot || {}))
-        ) {
+        if (fullscreenElementKey && !(fullscreenElementKey in (currentRoot || {}))) {
           // For older Safari versions, use composed node containment check
           return containsComposedNode(currentFullscreenElement, container);
         }
@@ -60,8 +57,7 @@ export const fullscreenable = {
         // Traverse shadow DOM layers looking for our container
         while (fullscreenElementKey && currentRoot?.[fullscreenElementKey]) {
           if (currentRoot[fullscreenElementKey] === container) return true;
-          if (currentRoot[fullscreenElementKey]?.contains?.(container))
-            return true;
+          if (currentRoot[fullscreenElementKey]?.contains?.(container)) return true;
           currentRoot = currentRoot[fullscreenElementKey]?.shadowRoot;
         }
       }
@@ -113,12 +109,7 @@ export const fullscreenable = {
         if (!globalThis?.document) return;
 
         const eventHandler = () => handler();
-        const events = [
-          'fullscreenchange',
-          'webkitfullscreenchange',
-          'mozfullscreenchange',
-          'MSFullscreenChange',
-        ];
+        const events = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'];
 
         events.forEach((event) => {
           globalThis.document.addEventListener(event, eventHandler);
@@ -133,9 +124,7 @@ export const fullscreenable = {
     ],
     actions: {
       /** Toggle fullscreen state or explicitly enter/exit based on detail */
-      fullscreenrequest: (
-        { detail }: Pick<CustomEvent<any>, 'detail'> = { detail: undefined },
-      ) => {
+      fullscreenrequest: ({ detail }: Pick<CustomEvent<any>, 'detail'> = { detail: undefined }) => {
         // If detail is provided, use it; otherwise toggle current state
         if (typeof detail === 'boolean') {
           return detail;
diff --git a/packages/core/media-store/src/state-mediators/index.ts b/packages/core/media-store/src/state-mediators/index.ts
index 685dfce5..b19a68cd 100644
--- a/packages/core/media-store/src/state-mediators/index.ts
+++ b/packages/core/media-store/src/state-mediators/index.ts
@@ -1,4 +1,4 @@
 export { audible } from './audible';
 export { playable } from './playable';
 export { temporal } from './temporal';
-export { fullscreenable } from './fullscreenable';
\ No newline at end of file
+export { fullscreenable } from './fullscreenable';
diff --git a/packages/core/media-store/src/state-mediators/playable.ts b/packages/core/media-store/src/state-mediators/playable.ts
index 3aeed06e..089be41c 100644
--- a/packages/core/media-store/src/state-mediators/playable.ts
+++ b/packages/core/media-store/src/state-mediators/playable.ts
@@ -12,13 +12,13 @@ export const playable = {
       (handler: (value?: boolean) => void, stateOwners: any) => {
         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));
-      }
+        events.forEach((event) => media.addEventListener(event, eventHandler));
+
+        return () => events.forEach((event) => media.removeEventListener(event, eventHandler));
+      },
     ],
     actions: {
       /** @TODO Refactor me to play more nicely with side effects that don't/can't correlate with set() API (CJP) */
diff --git a/packages/core/media-store/src/state-mediators/temporal.ts b/packages/core/media-store/src/state-mediators/temporal.ts
index aea80b26..0e051256 100644
--- a/packages/core/media-store/src/state-mediators/temporal.ts
+++ b/packages/core/media-store/src/state-mediators/temporal.ts
@@ -1,7 +1,5 @@
 const isValidNumber = (value: any): value is number => {
-  return (
-    typeof value === 'number' && !Number.isNaN(value) && Number.isFinite(value)
-  );
+  return typeof value === 'number' && !Number.isNaN(value) && Number.isFinite(value);
 };
 
 export const temporal = {
@@ -19,19 +17,17 @@ export const temporal = {
       (handler: (value?: number) => void, stateOwners: any) => {
         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));
-      }
+        events.forEach((event) => media.addEventListener(event, eventHandler));
+
+        return () => events.forEach((event) => media.removeEventListener(event, eventHandler));
+      },
     ],
     actions: {
       /** @TODO Support more sophisticated seeking patterns like seek-to-live, relative seeking, etc. (CJP) */
-      seekrequest: (
-        { detail }: Pick<CustomEvent<any>, 'detail'> = { detail: 0 },
-      ) => +detail,
+      seekrequest: ({ detail }: Pick<CustomEvent<any>, 'detail'> = { detail: 0 }) => +detail,
     },
   },
 
@@ -40,11 +36,7 @@ export const temporal = {
       const { media } = stateOwners;
 
       // Return 0 if no media or invalid duration
-      if (
-        !media?.duration ||
-        Number.isNaN(media.duration) ||
-        !Number.isFinite(media.duration)
-      ) {
+      if (!media?.duration || Number.isNaN(media.duration) || !Number.isFinite(media.duration)) {
         return 0;
       }
 
@@ -54,13 +46,13 @@ export const temporal = {
       (handler: (value?: number) => void, stateOwners: any) => {
         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));
-      }
+        events.forEach((event) => media.addEventListener(event, eventHandler));
+
+        return () => events.forEach((event) => media.removeEventListener(event, eventHandler));
+      },
     ],
   },
 
@@ -82,13 +74,13 @@ export const temporal = {
       (handler: (value?: [number, number] | undefined) => void, stateOwners: any) => {
         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));
-      }
+        events.forEach((event) => media.addEventListener(event, eventHandler));
+
+        return () => events.forEach((event) => media.removeEventListener(event, eventHandler));
+      },
     ],
   },
 };
diff --git a/packages/core/media-store/src/utils/time.ts b/packages/core/media-store/src/utils/time.ts
index 07f92f28..e59c0e7d 100644
--- a/packages/core/media-store/src/utils/time.ts
+++ b/packages/core/media-store/src/utils/time.ts
@@ -29,10 +29,7 @@ const UnitLabels = [
 ] as const;
 
 const toTimeUnitPhrase = (timeUnitValue: number, unitIndex: number): string => {
-  const unitLabel =
-    timeUnitValue === 1
-      ? UnitLabels[unitIndex]?.singular
-      : UnitLabels[unitIndex]?.plural;
+  const unitLabel = timeUnitValue === 1 ? UnitLabels[unitIndex]?.singular : UnitLabels[unitIndex]?.plural;
 
   return `${timeUnitValue} ${unitLabel}`;
 };
@@ -53,18 +50,11 @@ export function formatAsTimePhrase(seconds: number): string {
   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 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),
-    )
+    .map((timeUnitValue, index) => timeUnitValue && toTimeUnitPhrase(timeUnitValue, index))
     // Ignore/exclude any 0 values
     .filter((x) => x)
     // join into a single comma-separated string phrase
@@ -124,8 +114,7 @@ export function formatTime(seconds: number, guide?: number): string {
 
   // 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) + ':';
+  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;
@@ -140,11 +129,7 @@ export function formatTime(seconds: number, guide?: number): string {
  * @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 {
+export function formatDisplayTime(time: unknown, guide?: number, fallback: string = '--:--'): string {
   if (!isValidNumber(time)) {
     return fallback;
   }
diff --git a/packages/core/media-store/tsconfig.build.json b/packages/core/media-store/tsconfig.build.json
index 698a5b71..6c809265 100644
--- a/packages/core/media-store/tsconfig.build.json
+++ b/packages/core/media-store/tsconfig.build.json
@@ -10,4 +10,4 @@
     "incremental": false
   },
   "exclude": ["dist", "node_modules"]
-}
\ No newline at end of file
+}
diff --git a/packages/core/media-store/tsconfig.json b/packages/core/media-store/tsconfig.json
index c419f915..9d54d911 100644
--- a/packages/core/media-store/tsconfig.json
+++ b/packages/core/media-store/tsconfig.json
@@ -6,4 +6,4 @@
   },
   "include": ["src/**/*"],
   "exclude": ["dist", "node_modules"]
-}
\ No newline at end of file
+}
diff --git a/packages/core/media/package.json b/packages/core/media/package.json
index 5317dc96..e24c2b0e 100644
--- a/packages/core/media/package.json
+++ b/packages/core/media/package.json
@@ -37,4 +37,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/core/media/src/index.ts b/packages/core/media/src/index.ts
index 5975fca5..57d37acf 100644
--- a/packages/core/media/src/index.ts
+++ b/packages/core/media/src/index.ts
@@ -1,10 +1,2 @@
-export type {
-  IBaseMediaStateOwner,
-  IPlayableMediaStateOwner,
-  IAudibleMediaStateOwner,
-} from './playable';
-export {
-  Events,
-  PlayableMediaStateOwner,
-  createMediaStateOwner,
-} from './playable';
\ No newline at end of file
+export type { IBaseMediaStateOwner, IPlayableMediaStateOwner, IAudibleMediaStateOwner } from './playable';
+export { Events, PlayableMediaStateOwner, createMediaStateOwner } from './playable';
diff --git a/packages/core/media/src/playable.ts b/packages/core/media/src/playable.ts
index 9e32f5a9..9d2a5fd1 100644
--- a/packages/core/media/src/playable.ts
+++ b/packages/core/media/src/playable.ts
@@ -1,5 +1,7 @@
 import type { IBasePlaybackEngine } from '@vjs-10/playback-engine';
+
 import { createPlaybackEngine } from '@vjs-10/playback-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',
@@ -12,9 +14,8 @@ export const Events = [
   'durationchange',
 ] as const;
 
-export interface IBaseMediaStateOwner<
-  T extends Pick<HTMLMediaElement, 'src'> = Pick<HTMLMediaElement, 'src'>,
-> extends EventTarget,
+export interface IBaseMediaStateOwner<T extends Pick<HTMLMediaElement, 'src'> = Pick<HTMLMediaElement, 'src'>>
+  extends EventTarget,
     Pick<HTMLMediaElement, 'src'> {
   mediaElement?: T | undefined;
 }
@@ -34,10 +35,7 @@ export interface ITemporalMediaStateOwner
     IBaseMediaStateOwner,
     Pick<HTMLMediaElement, 'duration' | 'currentTime'> {}
 
-export class PlayableMediaStateOwner
-  extends EventTarget
-  implements IPlayableMediaStateOwner, IAudibleMediaStateOwner
-{
+export class PlayableMediaStateOwner extends EventTarget implements IPlayableMediaStateOwner, IAudibleMediaStateOwner {
   protected _playbackEngine: IBasePlaybackEngine;
   constructor() {
     super();
@@ -126,11 +124,7 @@ export class PlayableMediaStateOwner
 
   handleEvent(event: Event): void {
     if (event.target === this.mediaElement) {
-      const clonedEvent =
-        new (event.constructor as (typeof globalThis)['Event'])(
-          event.type,
-          event,
-        );
+      const clonedEvent = new (event.constructor as (typeof globalThis)['Event'])(event.type, event);
       this.dispatchEvent(clonedEvent);
     }
   }
diff --git a/packages/core/media/tsconfig.json b/packages/core/media/tsconfig.json
index c419f915..9d54d911 100644
--- a/packages/core/media/tsconfig.json
+++ b/packages/core/media/tsconfig.json
@@ -6,4 +6,4 @@
   },
   "include": ["src/**/*"],
   "exclude": ["dist", "node_modules"]
-}
\ No newline at end of file
+}
diff --git a/packages/core/media/tsup.config.ts b/packages/core/media/tsup.config.ts
index 108499a4..a4bebd83 100644
--- a/packages/core/media/tsup.config.ts
+++ b/packages/core/media/tsup.config.ts
@@ -18,4 +18,4 @@ export default defineConfig({
       incremental: false,
     },
   },
-});
\ No newline at end of file
+});
diff --git a/packages/core/playback-engine/package.json b/packages/core/playback-engine/package.json
index f9fcba8d..29d78943 100644
--- a/packages/core/playback-engine/package.json
+++ b/packages/core/playback-engine/package.json
@@ -38,4 +38,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/core/playback-engine/src/HlsJSPlaybackEngine.ts b/packages/core/playback-engine/src/HlsJSPlaybackEngine.ts
index b61c8a86..d94ed0c0 100644
--- a/packages/core/playback-engine/src/HlsJSPlaybackEngine.ts
+++ b/packages/core/playback-engine/src/HlsJSPlaybackEngine.ts
@@ -73,4 +73,4 @@ export class HlsJSPlaybackEngine extends EventTarget {
   }
 }
 
-export const createPlaybackEngine = () => new HlsJSPlaybackEngine();
\ No newline at end of file
+export const createPlaybackEngine = () => new HlsJSPlaybackEngine();
diff --git a/packages/core/playback-engine/src/index.ts b/packages/core/playback-engine/src/index.ts
index bbd1b502..724972c6 100644
--- a/packages/core/playback-engine/src/index.ts
+++ b/packages/core/playback-engine/src/index.ts
@@ -1,2 +1,2 @@
 export type { IBasePlaybackEngine } from './HlsJSPlaybackEngine';
-export { HlsJSPlaybackEngine, createPlaybackEngine } from './HlsJSPlaybackEngine';
\ No newline at end of file
+export { HlsJSPlaybackEngine, createPlaybackEngine } from './HlsJSPlaybackEngine';
diff --git a/packages/core/playback-engine/tsconfig.json b/packages/core/playback-engine/tsconfig.json
index c419f915..9d54d911 100644
--- a/packages/core/playback-engine/tsconfig.json
+++ b/packages/core/playback-engine/tsconfig.json
@@ -6,4 +6,4 @@
   },
   "include": ["src/**/*"],
   "exclude": ["dist", "node_modules"]
-}
\ No newline at end of file
+}
diff --git a/packages/core/playback-engine/tsup.config.ts b/packages/core/playback-engine/tsup.config.ts
index 108499a4..a4bebd83 100644
--- a/packages/core/playback-engine/tsup.config.ts
+++ b/packages/core/playback-engine/tsup.config.ts
@@ -18,4 +18,4 @@ export default defineConfig({
       incremental: false,
     },
   },
-});
\ No newline at end of file
+});
diff --git a/packages/html/html-icons/rollup.config.js b/packages/html/html-icons/rollup.config.js
index e95bc7c6..d4d9cbf8 100644
--- a/packages/html/html-icons/rollup.config.js
+++ b/packages/html/html-icons/rollup.config.js
@@ -12,7 +12,7 @@ module.exports = [
       sourcemap: true,
     },
     watch: {
-      clearScreen: false
+      clearScreen: false,
     },
     external: (id) => {
       // Don't externalize relative imports (starts with . or /)
@@ -24,7 +24,7 @@ module.exports = [
     },
     plugins: [
       resolve({
-        extensions: ['.js', '.jsx', '.ts', '.tsx']
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
       }),
       commonjs(),
       typescript({
@@ -43,7 +43,7 @@ module.exports = [
       sourcemap: true,
     },
     watch: {
-      clearScreen: false
+      clearScreen: false,
     },
     external: (id) => {
       // Don't externalize relative imports (starts with . or /)
@@ -55,7 +55,7 @@ module.exports = [
     },
     plugins: [
       resolve({
-        extensions: ['.js', '.jsx', '.ts', '.tsx']
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
       }),
       commonjs(),
       typescript({
diff --git a/packages/html/html-icons/src/index.ts b/packages/html/html-icons/src/index.ts
index 1abb24cc..c0fc9771 100644
--- a/packages/html/html-icons/src/index.ts
+++ b/packages/html/html-icons/src/index.ts
@@ -4,4 +4,4 @@ export * as MediaVolumeHighIcon from './media-volume-high-icon.js';
 export * as MediaVolumeLowIcon from './media-volume-low-icon.js';
 export * as MediaVolumeOffIcon from './media-volume-off-icon.js';
 export * as MediaFullscreenEnterIcon from './media-fullscreen-enter-icon.js';
-export * as MediaFullscreenExitIcon from './media-fullscreen-exit-icon.js';
\ No newline at end of file
+export * as MediaFullscreenExitIcon from './media-fullscreen-exit-icon.js';
diff --git a/packages/html/html-icons/src/media-chrome-icon.ts b/packages/html/html-icons/src/media-chrome-icon.ts
index b6a72490..a141c18c 100644
--- a/packages/html/html-icons/src/media-chrome-icon.ts
+++ b/packages/html/html-icons/src/media-chrome-icon.ts
@@ -23,4 +23,4 @@ export class MediaChromeIcon extends HTMLElement {
       this.shadowRoot!.innerHTML = (this.constructor as typeof MediaChromeIcon).getTemplateHTML();
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/html/html-icons/src/media-fullscreen-enter-icon.ts b/packages/html/html-icons/src/media-fullscreen-enter-icon.ts
index b9ac632a..da147c15 100644
--- a/packages/html/html-icons/src/media-fullscreen-enter-icon.ts
+++ b/packages/html/html-icons/src/media-fullscreen-enter-icon.ts
@@ -1,6 +1,7 @@
-import { MediaChromeIcon } from './media-chrome-icon.js';
 import { SVG_ICONS } from '@vjs-10/icons';
 
+import { MediaChromeIcon } from './media-chrome-icon.js';
+
 export function getTemplateHTML() {
   return /* html */ `
     ${MediaChromeIcon.getTemplateHTML()}
@@ -17,4 +18,4 @@ export class MediaFullscreenEnterIcon extends MediaChromeIcon {
   static getTemplateHTML = getTemplateHTML;
 }
 
-customElements.define('media-fullscreen-enter-icon', MediaFullscreenEnterIcon);
\ No newline at end of file
+customElements.define('media-fullscreen-enter-icon', MediaFullscreenEnterIcon);
diff --git a/packages/html/html-icons/src/media-fullscreen-exit-icon.ts b/packages/html/html-icons/src/media-fullscreen-exit-icon.ts
index 1042298b..1f4a737e 100644
--- a/packages/html/html-icons/src/media-fullscreen-exit-icon.ts
+++ b/packages/html/html-icons/src/media-fullscreen-exit-icon.ts
@@ -1,6 +1,7 @@
-import { MediaChromeIcon } from './media-chrome-icon.js';
 import { SVG_ICONS } from '@vjs-10/icons';
 
+import { MediaChromeIcon } from './media-chrome-icon.js';
+
 export function getTemplateHTML() {
   return /* html */ `
     ${MediaChromeIcon.getTemplateHTML()}
@@ -17,4 +18,4 @@ export class MediaFullscreenExitIcon extends MediaChromeIcon {
   static getTemplateHTML = getTemplateHTML;
 }
 
-customElements.define('media-fullscreen-exit-icon', MediaFullscreenExitIcon);
\ No newline at end of file
+customElements.define('media-fullscreen-exit-icon', MediaFullscreenExitIcon);
diff --git a/packages/html/html-icons/src/media-pause-icon.ts b/packages/html/html-icons/src/media-pause-icon.ts
index 75921e6a..0d6776a8 100644
--- a/packages/html/html-icons/src/media-pause-icon.ts
+++ b/packages/html/html-icons/src/media-pause-icon.ts
@@ -1,6 +1,7 @@
-import { MediaChromeIcon } from './media-chrome-icon.js';
 import { SVG_ICONS } from '@vjs-10/icons';
 
+import { MediaChromeIcon } from './media-chrome-icon.js';
+
 export function getTemplateHTML() {
   return /* html */ `
     ${MediaChromeIcon.getTemplateHTML()}
@@ -12,4 +13,4 @@ export class MediaPauseIcon extends MediaChromeIcon {
   static getTemplateHTML = getTemplateHTML;
 }
 
-customElements.define('media-pause-icon', MediaPauseIcon);
\ No newline at end of file
+customElements.define('media-pause-icon', MediaPauseIcon);
diff --git a/packages/html/html-icons/src/media-play-icon.ts b/packages/html/html-icons/src/media-play-icon.ts
index 2e9edfbc..4dae0b8b 100644
--- a/packages/html/html-icons/src/media-play-icon.ts
+++ b/packages/html/html-icons/src/media-play-icon.ts
@@ -1,6 +1,7 @@
-import { MediaChromeIcon } from './media-chrome-icon.js';
 import { SVG_ICONS } from '@vjs-10/icons';
 
+import { MediaChromeIcon } from './media-chrome-icon.js';
+
 export function getTemplateHTML() {
   return /* html */ `
     ${MediaChromeIcon.getTemplateHTML()}
@@ -17,4 +18,4 @@ export class MediaPlayIcon extends MediaChromeIcon {
   static getTemplateHTML = getTemplateHTML;
 }
 
-customElements.define('media-play-icon', MediaPlayIcon);
\ No newline at end of file
+customElements.define('media-play-icon', MediaPlayIcon);
diff --git a/packages/html/html-icons/src/media-volume-high-icon.ts b/packages/html/html-icons/src/media-volume-high-icon.ts
index b22b2b59..032c6158 100644
--- a/packages/html/html-icons/src/media-volume-high-icon.ts
+++ b/packages/html/html-icons/src/media-volume-high-icon.ts
@@ -1,7 +1,7 @@
-import { MediaChromeIcon } from './media-chrome-icon.js';
-
 import { SVG_ICONS } from '@vjs-10/icons';
 
+import { MediaChromeIcon } from './media-chrome-icon.js';
+
 export function getTemplateHTML() {
   return /* html */ `
     ${MediaChromeIcon.getTemplateHTML()}
diff --git a/packages/html/html-icons/src/media-volume-low-icon.ts b/packages/html/html-icons/src/media-volume-low-icon.ts
index e03464b0..1814aa1a 100644
--- a/packages/html/html-icons/src/media-volume-low-icon.ts
+++ b/packages/html/html-icons/src/media-volume-low-icon.ts
@@ -1,7 +1,7 @@
-import { MediaChromeIcon } from './media-chrome-icon.js';
-
 import { SVG_ICONS } from '@vjs-10/icons';
 
+import { MediaChromeIcon } from './media-chrome-icon.js';
+
 export function getTemplateHTML() {
   return /* html */ `
     ${MediaChromeIcon.getTemplateHTML()}
diff --git a/packages/html/html-icons/src/media-volume-off-icon.ts b/packages/html/html-icons/src/media-volume-off-icon.ts
index cae4c860..f6a05d1f 100644
--- a/packages/html/html-icons/src/media-volume-off-icon.ts
+++ b/packages/html/html-icons/src/media-volume-off-icon.ts
@@ -1,7 +1,7 @@
-import { MediaChromeIcon } from './media-chrome-icon.js';
-
 import { SVG_ICONS } from '@vjs-10/icons';
 
+import { MediaChromeIcon } from './media-chrome-icon.js';
+
 export function getTemplateHTML() {
   return /* html */ `
     ${MediaChromeIcon.getTemplateHTML()}
diff --git a/packages/html/html-icons/tsconfig.build.json b/packages/html/html-icons/tsconfig.build.json
index 698a5b71..6c809265 100644
--- a/packages/html/html-icons/tsconfig.build.json
+++ b/packages/html/html-icons/tsconfig.build.json
@@ -10,4 +10,4 @@
     "incremental": false
   },
   "exclude": ["dist", "node_modules"]
-}
\ No newline at end of file
+}
diff --git a/packages/html/html-icons/tsconfig.json b/packages/html/html-icons/tsconfig.json
index c419f915..9d54d911 100644
--- a/packages/html/html-icons/tsconfig.json
+++ b/packages/html/html-icons/tsconfig.json
@@ -6,4 +6,4 @@
   },
   "include": ["src/**/*"],
   "exclude": ["dist", "node_modules"]
-}
\ No newline at end of file
+}
diff --git a/packages/html/html-media-elements/package.json b/packages/html/html-media-elements/package.json
index 019bacae..8f69f7d0 100644
--- a/packages/html/html-media-elements/package.json
+++ b/packages/html/html-media-elements/package.json
@@ -39,4 +39,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/html/html-media-elements/src/index.ts b/packages/html/html-media-elements/src/index.ts
index dcab91ae..00de2483 100644
--- a/packages/html/html-media-elements/src/index.ts
+++ b/packages/html/html-media-elements/src/index.ts
@@ -1 +1 @@
-export * from './media-provider';
\ No newline at end of file
+export * from './media-provider';
diff --git a/packages/html/html-media-elements/tsconfig.json b/packages/html/html-media-elements/tsconfig.json
index c419f915..9d54d911 100644
--- a/packages/html/html-media-elements/tsconfig.json
+++ b/packages/html/html-media-elements/tsconfig.json
@@ -6,4 +6,4 @@
   },
   "include": ["src/**/*"],
   "exclude": ["dist", "node_modules"]
-}
\ No newline at end of file
+}
diff --git a/packages/html/html-media-elements/tsup.config.ts b/packages/html/html-media-elements/tsup.config.ts
index 108499a4..a4bebd83 100644
--- a/packages/html/html-media-elements/tsup.config.ts
+++ b/packages/html/html-media-elements/tsup.config.ts
@@ -18,4 +18,4 @@ export default defineConfig({
       incremental: false,
     },
   },
-});
\ No newline at end of file
+});
diff --git a/packages/html/html-media-store/package.json b/packages/html/html-media-store/package.json
index ee5630eb..97753e95 100644
--- a/packages/html/html-media-store/package.json
+++ b/packages/html/html-media-store/package.json
@@ -38,4 +38,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/html/html-media-store/src/index.ts b/packages/html/html-media-store/src/index.ts
index 9a95962d..4b5cd061 100644
--- a/packages/html/html-media-store/src/index.ts
+++ b/packages/html/html-media-store/src/index.ts
@@ -1 +1 @@
-// Store integration utilities for HTML/Web Components
\ No newline at end of file
+// Store integration utilities for HTML/Web Components
diff --git a/packages/html/html-media-store/tsconfig.json b/packages/html/html-media-store/tsconfig.json
index c419f915..9d54d911 100644
--- a/packages/html/html-media-store/tsconfig.json
+++ b/packages/html/html-media-store/tsconfig.json
@@ -6,4 +6,4 @@
   },
   "include": ["src/**/*"],
   "exclude": ["dist", "node_modules"]
-}
\ No newline at end of file
+}
diff --git a/packages/html/html-media-store/tsup.config.ts b/packages/html/html-media-store/tsup.config.ts
index 108499a4..a4bebd83 100644
--- a/packages/html/html-media-store/tsup.config.ts
+++ b/packages/html/html-media-store/tsup.config.ts
@@ -18,4 +18,4 @@ export default defineConfig({
       incremental: false,
     },
   },
-});
\ No newline at end of file
+});
diff --git a/packages/html/html/rollup.config.js b/packages/html/html/rollup.config.js
index e95bc7c6..d4d9cbf8 100644
--- a/packages/html/html/rollup.config.js
+++ b/packages/html/html/rollup.config.js
@@ -12,7 +12,7 @@ module.exports = [
       sourcemap: true,
     },
     watch: {
-      clearScreen: false
+      clearScreen: false,
     },
     external: (id) => {
       // Don't externalize relative imports (starts with . or /)
@@ -24,7 +24,7 @@ module.exports = [
     },
     plugins: [
       resolve({
-        extensions: ['.js', '.jsx', '.ts', '.tsx']
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
       }),
       commonjs(),
       typescript({
@@ -43,7 +43,7 @@ module.exports = [
       sourcemap: true,
     },
     watch: {
-      clearScreen: false
+      clearScreen: false,
     },
     external: (id) => {
       // Don't externalize relative imports (starts with . or /)
@@ -55,7 +55,7 @@ module.exports = [
     },
     plugins: [
       resolve({
-        extensions: ['.js', '.jsx', '.ts', '.tsx']
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
       }),
       commonjs(),
       typescript({
diff --git a/packages/html/html/src/components/media-chrome-button.ts b/packages/html/html/src/components/media-chrome-button.ts
index 3895b002..a83fac23 100644
--- a/packages/html/html/src/components/media-chrome-button.ts
+++ b/packages/html/html/src/components/media-chrome-button.ts
@@ -3,7 +3,7 @@ import { namedNodeMapToObject } from '../utils/element-utils.js';
 export function getTemplateHTML(
   this: typeof MediaChromeButton,
   _attrs: Record<string, string>,
-  _props: Record<string, any> = {},
+  _props: Record<string, any> = {}
 ) {
   return /* html */ `
     <style>
@@ -31,20 +31,14 @@ export class MediaChromeButton extends HTMLElement {
 
     if (!this.shadowRoot) {
       // Set up the Shadow DOM if not using Declarative Shadow DOM.
-      this.attachShadow(
-        (this.constructor as typeof MediaChromeButton).shadowRootOptions,
-      );
+      this.attachShadow((this.constructor as typeof MediaChromeButton).shadowRootOptions);
 
       const attrs = namedNodeMapToObject(this.attributes);
-      const html = (
-        this.constructor as typeof MediaChromeButton
-      ).getTemplateHTML(attrs);
+      const html = (this.constructor as typeof MediaChromeButton).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);
+      shadowRoot.setHTMLUnsafe ? shadowRoot.setHTMLUnsafe(html) : (shadowRoot.innerHTML = html);
     }
 
     this.addEventListener('click', this);
diff --git a/packages/html/html/src/components/media-current-time-display.ts b/packages/html/html/src/components/media-current-time-display.ts
index d3ef7703..6927a24f 100644
--- a/packages/html/html/src/components/media-current-time-display.ts
+++ b/packages/html/html/src/components/media-current-time-display.ts
@@ -1,12 +1,6 @@
-import {
-  toConnectedHTMLComponent,
-  StateHook,
-  PropsHook,
-} from '../utils/component-factory';
-import {
-  currentTimeDisplayStateDefinition,
-  formatDisplayTime,
-} from '@vjs-10/media-store';
+import { currentTimeDisplayStateDefinition, formatDisplayTime } from '@vjs-10/media-store';
+
+import { PropsHook, StateHook, toConnectedHTMLComponent } from '../utils/component-factory';
 
 export class CurrentTimeDisplayBase extends HTMLElement {
   static shadowRootOptions = {
@@ -25,9 +19,7 @@ export class CurrentTimeDisplayBase extends HTMLElement {
     super();
 
     if (!this.shadowRoot) {
-      this.attachShadow(
-        (this.constructor as typeof CurrentTimeDisplayBase).shadowRootOptions,
-      );
+      this.attachShadow((this.constructor as typeof CurrentTimeDisplayBase).shadowRootOptions);
     }
   }
 
@@ -43,11 +35,7 @@ export class CurrentTimeDisplayBase extends HTMLElement {
     return this.hasAttribute('show-remaining');
   }
 
-  attributeChangedCallback(
-    name: string,
-    _oldValue: string | null,
-    _newValue: string | null,
-  ) {
+  attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null) {
     if (name === 'show-remaining' && this._state) {
       // Re-render with current state when show-remaining attribute changes
       this._update({}, this._state);
@@ -104,16 +92,13 @@ export const CurrentTimeDisplay = toConnectedHTMLComponent(
   CurrentTimeDisplayBase,
   useCurrentTimeDisplayState,
   useCurrentTimeDisplayProps,
-  'CurrentTimeDisplay',
+  'CurrentTimeDisplay'
 );
 
 // Register the custom element
 if (!globalThis.customElements.get('media-current-time-display')) {
   // @ts-ignore - Custom element constructor compatibility
-  globalThis.customElements.define(
-    'media-current-time-display',
-    CurrentTimeDisplay,
-  );
+  globalThis.customElements.define('media-current-time-display', CurrentTimeDisplay);
 }
 
 export default CurrentTimeDisplay;
diff --git a/packages/html/html/src/components/media-duration-display.ts b/packages/html/html/src/components/media-duration-display.ts
index 20401efc..4ba1f3b4 100644
--- a/packages/html/html/src/components/media-duration-display.ts
+++ b/packages/html/html/src/components/media-duration-display.ts
@@ -1,15 +1,12 @@
-import {
-  toConnectedHTMLComponent,
-  StateHook,
-  PropsHook,
-} from '../utils/component-factory';
 import { durationDisplayStateDefinition, formatDisplayTime } from '@vjs-10/media-store';
+
+import { PropsHook, StateHook, toConnectedHTMLComponent } from '../utils/component-factory';
 import { namedNodeMapToObject } from '../utils/element-utils.js';
 
 export function getTemplateHTML(
   this: typeof DurationDisplayBase,
   _attrs: Record<string, string>,
-  _props: Record<string, any> = {},
+  _props: Record<string, any> = {}
 ) {
   return /* html */ `
     <span></span>
@@ -32,18 +29,12 @@ export class DurationDisplayBase extends HTMLElement {
     super();
 
     if (!this.shadowRoot) {
-      this.attachShadow(
-        (this.constructor as typeof DurationDisplayBase).shadowRootOptions,
-      );
+      this.attachShadow((this.constructor as typeof DurationDisplayBase).shadowRootOptions);
 
       const attrs = namedNodeMapToObject(this.attributes);
-      const html = (
-        this.constructor as typeof DurationDisplayBase
-      ).getTemplateHTML(attrs);
+      const html = (this.constructor as typeof DurationDisplayBase).getTemplateHTML(attrs);
       const shadowRoot = this.shadowRoot as unknown as ShadowRoot;
-      shadowRoot.setHTMLUnsafe
-        ? shadowRoot.setHTMLUnsafe(html)
-        : (shadowRoot.innerHTML = html);
+      shadowRoot.setHTMLUnsafe ? shadowRoot.setHTMLUnsafe(html) : (shadowRoot.innerHTML = html);
     }
   }
 
@@ -53,7 +44,7 @@ export class DurationDisplayBase extends HTMLElement {
 
   _update(_props: any, state: any) {
     this._state = state;
-    
+
     // Update the span content with formatted duration
     const spanElement = this.shadowRoot?.querySelector('span') as HTMLElement;
     if (spanElement) {
@@ -95,7 +86,7 @@ export const DurationDisplay = toConnectedHTMLComponent(
   DurationDisplayBase,
   useDurationDisplayState,
   useDurationDisplayProps,
-  'DurationDisplay',
+  'DurationDisplay'
 );
 
 // Register the custom element
@@ -104,4 +95,4 @@ if (!globalThis.customElements.get('media-duration-display')) {
   globalThis.customElements.define('media-duration-display', DurationDisplay);
 }
 
-export default DurationDisplay;
\ No newline at end of file
+export default DurationDisplay;
diff --git a/packages/html/html/src/components/media-fullscreen-button.ts b/packages/html/html/src/components/media-fullscreen-button.ts
index bfcea94c..0d6bf5e9 100644
--- a/packages/html/html/src/components/media-fullscreen-button.ts
+++ b/packages/html/html/src/components/media-fullscreen-button.ts
@@ -1,11 +1,8 @@
-import {
-  toConnectedHTMLComponent,
-  StateHook,
-  PropsHook,
-} from '../utils/component-factory';
-import { MediaChromeButton } from './media-chrome-button';
 import { fullscreenButtonStateDefinition } from '@vjs-10/media-store';
 
+import { PropsHook, StateHook, toConnectedHTMLComponent } from '../utils/component-factory';
+import { MediaChromeButton } from './media-chrome-button';
+
 export class FullscreenButtonBase extends MediaChromeButton {
   _state:
     | {
@@ -50,9 +47,7 @@ export const useFullscreenButtonState: StateHook<{ fullscreen: boolean }> = {
   keys: fullscreenButtonStateDefinition.keys,
   transform: (rawState, mediaStore) => ({
     ...fullscreenButtonStateDefinition.stateTransform(rawState),
-    ...fullscreenButtonStateDefinition.createRequestMethods(
-      mediaStore.dispatch,
-    ),
+    ...fullscreenButtonStateDefinition.createRequestMethods(mediaStore.dispatch),
   }),
 };
 
@@ -60,10 +55,7 @@ export const useFullscreenButtonState: StateHook<{ fullscreen: boolean }> = {
  * FullscreenButton props hook - equivalent to React's useFullscreenButtonProps
  * Handles element attributes and properties based on state
  */
-export const useFullscreenButtonProps: PropsHook<{ fullscreen: boolean }> = (
-  state,
-  _element,
-) => {
+export const useFullscreenButtonProps: PropsHook<{ fullscreen: boolean }> = (state, _element) => {
   const baseProps: Record<string, any> = {
     /** data attributes/props */
     ['data-fullscreen']: state.fullscreen,
@@ -89,7 +81,7 @@ export const FullscreenButton = toConnectedHTMLComponent(
   FullscreenButtonBase,
   useFullscreenButtonState,
   useFullscreenButtonProps,
-  'FullscreenButton',
+  'FullscreenButton'
 );
 
 // NOTE: In this architecture it will be important to decouple component class definitions from their registration in the CustomElementsRegistry. (CJP)
diff --git a/packages/html/html/src/components/media-mute-button.ts b/packages/html/html/src/components/media-mute-button.ts
index 1a010262..23ea73b9 100644
--- a/packages/html/html/src/components/media-mute-button.ts
+++ b/packages/html/html/src/components/media-mute-button.ts
@@ -1,11 +1,8 @@
-import {
-  toConnectedHTMLComponent,
-  StateHook,
-  PropsHook,
-} from '../utils/component-factory';
-import { MediaChromeButton } from './media-chrome-button';
 import { muteButtonStateDefinition } from '@vjs-10/media-store';
 
+import { PropsHook, StateHook, toConnectedHTMLComponent } from '../utils/component-factory';
+import { MediaChromeButton } from './media-chrome-button';
+
 export class MuteButtonBase extends MediaChromeButton {
   _state:
     | {
@@ -99,7 +96,7 @@ export const MuteButton = toConnectedHTMLComponent(
   MuteButtonBase,
   useMuteButtonState,
   useMuteButtonProps,
-  'MuteButton',
+  'MuteButton'
 );
 
 // NOTE: In this architecture it will be important to decouple component class definitions from their registration in the CustomElementsRegistry. (CJP)
diff --git a/packages/html/html/src/components/media-play-button.ts b/packages/html/html/src/components/media-play-button.ts
index 9b85791d..fc340f37 100644
--- a/packages/html/html/src/components/media-play-button.ts
+++ b/packages/html/html/src/components/media-play-button.ts
@@ -1,15 +1,10 @@
-import {
-  toConnectedHTMLComponent,
-  StateHook,
-  PropsHook,
-} from '../utils/component-factory';
-import { MediaChromeButton } from './media-chrome-button';
 import { playButtonStateDefinition } from '@vjs-10/media-store';
 
+import { PropsHook, StateHook, toConnectedHTMLComponent } from '../utils/component-factory';
+import { MediaChromeButton } from './media-chrome-button';
+
 export class PlayButtonBase extends MediaChromeButton {
-  _state:
-    | { paused: boolean; requestPlay: () => void; requestPause: () => void }
-    | undefined;
+  _state: { paused: boolean; requestPlay: () => void; requestPause: () => void } | undefined;
 
   constructor() {
     super();
@@ -58,10 +53,7 @@ export const usePlayButtonState: StateHook<{ paused: boolean }> = {
  * PlayButton props hook - equivalent to React's usePlayButtonProps
  * Handles element attributes and properties based on state
  */
-export const usePlayButtonProps: PropsHook<{ paused: boolean }> = (
-  state,
-  _element,
-) => {
+export const usePlayButtonProps: PropsHook<{ paused: boolean }> = (state, _element) => {
   const baseProps: Record<string, any> = {
     /** data attributes/props */
     ['data-paused']: state.paused,
@@ -87,7 +79,7 @@ export const PlayButton = toConnectedHTMLComponent(
   PlayButtonBase,
   usePlayButtonState,
   usePlayButtonProps,
-  'PlayButton',
+  'PlayButton'
 );
 
 // NOTE: In this architecture it will be important to decouple component class definitions from their registration in the CustomElementsRegistry. (CJP)
diff --git a/packages/html/html/src/components/media-time-range.ts b/packages/html/html/src/components/media-time-range.ts
index 509089d7..688c2563 100644
--- a/packages/html/html/src/components/media-time-range.ts
+++ b/packages/html/html/src/components/media-time-range.ts
@@ -1,10 +1,7 @@
-import {
-  toConnectedHTMLComponent,
-  StateHook,
-  PropsHook,
-} from '../utils/component-factory';
 import { timeRangeStateDefinition } from '@vjs-10/media-store';
 
+import { PropsHook, StateHook, toConnectedHTMLComponent } from '../utils/component-factory';
+
 // Utility functions for pointer position and seek time calculations
 const calculatePointerRatio = (clientX: number, rect: DOMRect): number => {
   const x = clientX - rect.left;
@@ -15,10 +12,7 @@ const calculateSeekTimeFromRatio = (ratio: number, duration: number): number =>
   return (ratio / 100) * duration;
 };
 
-const calculateSeekTimeFromPointerEvent = (
-  event: PointerEvent,
-  duration: number
-): number => {
+const calculateSeekTimeFromPointerEvent = (event: PointerEvent, duration: number): number => {
   const rect = (event.target as HTMLElement).getBoundingClientRect();
   const ratio = calculatePointerRatio(event.clientX, rect);
   return calculateSeekTimeFromRatio(ratio, duration);
@@ -42,7 +36,7 @@ export class TimeRangeRootBase extends HTMLElement {
 
   constructor() {
     super();
-    
+
     // Add pointer event listeners
     this.addEventListener('pointerdown', this);
     this.addEventListener('pointermove', this);
@@ -80,7 +74,7 @@ export class TimeRangeRootBase extends HTMLElement {
     this._dragging = true;
     const seekTime = calculateSeekTimeFromPointerEvent(event, this._state!.duration);
     this._state!.requestSeek(seekTime);
-    
+
     // Capture pointer events
     this.setPointerCapture(event.pointerId);
   }
@@ -100,7 +94,7 @@ export class TimeRangeRootBase extends HTMLElement {
 
   private _handlePointerUp(event: PointerEvent) {
     this.releasePointerCapture(event.pointerId);
-    
+
     if (this._dragging && this._trackElement && this._pointerPosition !== null) {
       const seekTime = calculateSeekTimeFromRatio(this._pointerPosition, this._state!.duration);
       this._state!.requestSeek(seekTime);
@@ -126,23 +120,23 @@ export class TimeRangeRootBase extends HTMLElement {
 
   _update(props: any, state: any) {
     this._state = state;
-    
+
     // Find track element
     this._trackElement = this.querySelector('media-time-range-track') as HTMLElement;
-    
+
     // Calculate slider fill percentage
-    const sliderFill = this._dragging && this._pointerPosition !== null
-      ? this._pointerPosition
-      : state.duration > 0
-        ? (state.currentTime / state.duration) * 100
-        : 0;
+    const sliderFill =
+      this._dragging && this._pointerPosition !== null
+        ? this._pointerPosition
+        : state.duration > 0
+          ? (state.currentTime / state.duration) * 100
+          : 0;
 
     // Update CSS custom properties
     this.style.setProperty('--slider-fill', `${Math.round(sliderFill)}%`);
-    this.style.setProperty('--slider-pointer', 
-      this._hovering && this._pointerPosition !== null
-        ? `${Math.round(this._pointerPosition)}%`
-        : '0%'
+    this.style.setProperty(
+      '--slider-pointer',
+      this._hovering && this._pointerPosition !== null ? `${Math.round(this._pointerPosition)}%` : '0%'
     );
 
     // Update ARIA attributes
@@ -152,7 +146,7 @@ export class TimeRangeRootBase extends HTMLElement {
     this.setAttribute('aria-valuemax', '100');
     this.setAttribute('aria-valuenow', sliderFill.toString());
     this.setAttribute('aria-valuetext', props['aria-valuetext'] || '');
-    
+
     // Update data attributes
     this.setAttribute('data-current-time', state.currentTime.toString());
     this.setAttribute('data-duration', state.duration.toString());
@@ -300,7 +294,7 @@ export const TimeRangeRoot = toConnectedHTMLComponent(
   TimeRangeRootBase,
   useTimeRangeRootState,
   useTimeRangeRootProps,
-  'TimeRangeRoot',
+  'TimeRangeRoot'
 );
 
 /**
@@ -310,7 +304,7 @@ export const TimeRangeTrack = toConnectedHTMLComponent(
   TimeRangeTrackBase,
   { keys: [], transform: () => ({}) },
   useTimeRangeTrackProps,
-  'TimeRangeTrack',
+  'TimeRangeTrack'
 );
 
 /**
@@ -320,7 +314,7 @@ export const TimeRangeProgress = toConnectedHTMLComponent(
   TimeRangeProgressBase,
   { keys: [], transform: () => ({}) },
   useTimeRangeProgressProps,
-  'TimeRangeProgress',
+  'TimeRangeProgress'
 );
 
 /**
@@ -330,7 +324,7 @@ export const TimeRangePointer = toConnectedHTMLComponent(
   TimeRangePointerBase,
   { keys: [], transform: () => ({}) },
   useTimeRangePointerProps,
-  'TimeRangePointer',
+  'TimeRangePointer'
 );
 
 /**
@@ -340,7 +334,7 @@ export const TimeRangeThumb = toConnectedHTMLComponent(
   TimeRangeThumbBase,
   { keys: [], transform: () => ({}) },
   useTimeRangeThumbProps,
-  'TimeRangeThumb',
+  'TimeRangeThumb'
 );
 
 /**
diff --git a/packages/html/html/src/components/media-volume-range.ts b/packages/html/html/src/components/media-volume-range.ts
index 7bebfa75..0c0aafae 100644
--- a/packages/html/html/src/components/media-volume-range.ts
+++ b/packages/html/html/src/components/media-volume-range.ts
@@ -1,10 +1,7 @@
-import {
-  toConnectedHTMLComponent,
-  StateHook,
-  PropsHook,
-} from '../utils/component-factory';
 import { volumeRangeStateDefinition } from '@vjs-10/media-store';
 
+import { PropsHook, StateHook, toConnectedHTMLComponent } from '../utils/component-factory';
+
 export class VolumeRangeBase extends HTMLElement {
   _state:
     | {
@@ -119,7 +116,7 @@ export const VolumeRange = toConnectedHTMLComponent(
   VolumeRangeBase,
   useVolumeRangeState,
   useVolumeRangeProps,
-  'VolumeRange',
+  'VolumeRange'
 );
 
 // NOTE: In this architecture it will be important to decouple component class definitions from their registration in the CustomElementsRegistry. (CJP)
diff --git a/packages/html/html/src/media-container.ts b/packages/html/html/src/media-container.ts
index 90aed0b4..f38a192e 100644
--- a/packages/html/html/src/media-container.ts
+++ b/packages/html/html/src/media-container.ts
@@ -1,7 +1,7 @@
 import { ConsumerMixin } from '@open-wc/context-protocol';
 
 export function getTemplateHTML() {
-  return /* html */`
+  return /* html */ `
     <slot name="media"></slot>
     <slot></slot>
   `;
diff --git a/packages/html/html/src/utils/component-factory.ts b/packages/html/html/src/utils/component-factory.ts
index 5e9230bc..9ff70cec 100644
--- a/packages/html/html/src/utils/component-factory.ts
+++ b/packages/html/html/src/utils/component-factory.ts
@@ -26,7 +26,7 @@ export const toConnectedHTMLComponent = <TState = any>(
   BaseClass: CustomElementConstructor,
   stateHook: StateHook<TState>,
   propsHook: PropsHook<TState>,
-  displayName?: string,
+  displayName?: string
 ) => {
   const ConnectedComponent = class extends ConsumerMixin(BaseClass) {
     static get observedAttributes(): string[] {
diff --git a/packages/html/html/tsconfig.build.json b/packages/html/html/tsconfig.build.json
index 698a5b71..6c809265 100644
--- a/packages/html/html/tsconfig.build.json
+++ b/packages/html/html/tsconfig.build.json
@@ -10,4 +10,4 @@
     "incremental": false
   },
   "exclude": ["dist", "node_modules"]
-}
\ No newline at end of file
+}
diff --git a/packages/html/html/tsconfig.json b/packages/html/html/tsconfig.json
index c419f915..9d54d911 100644
--- a/packages/html/html/tsconfig.json
+++ b/packages/html/html/tsconfig.json
@@ -6,4 +6,4 @@
   },
   "include": ["src/**/*"],
   "exclude": ["dist", "node_modules"]
-}
\ No newline at end of file
+}
diff --git a/packages/react-native/react-native-icons/package.json b/packages/react-native/react-native-icons/package.json
index 8ac8a7da..86a17449 100644
--- a/packages/react-native/react-native-icons/package.json
+++ b/packages/react-native/react-native-icons/package.json
@@ -40,4 +40,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/react-native/react-native-icons/src/index.tsx b/packages/react-native/react-native-icons/src/index.tsx
index 7b2706df..4a2039e2 100644
--- a/packages/react-native/react-native-icons/src/index.tsx
+++ b/packages/react-native/react-native-icons/src/index.tsx
@@ -15,30 +15,23 @@ export const Icon: React.FC<IconProps> = () => {
 };
 
 // Placeholder icon components
-export const PlayIcon: React.FC<Omit<IconProps, 'name'>> = () => (
-  React.createElement('div', { children: 'Play Icon - Coming Soon' })
-);
+export const PlayIcon: React.FC<Omit<IconProps, 'name'>> = () =>
+  React.createElement('div', { children: 'Play Icon - Coming Soon' });
 
-export const PauseIcon: React.FC<Omit<IconProps, 'name'>> = () => (
-  React.createElement('div', { children: 'Pause Icon - Coming Soon' })
-);
+export const PauseIcon: React.FC<Omit<IconProps, 'name'>> = () =>
+  React.createElement('div', { children: 'Pause Icon - Coming Soon' });
 
-export const StopIcon: React.FC<Omit<IconProps, 'name'>> = () => (
-  React.createElement('div', { children: 'Stop Icon - Coming Soon' })
-);
+export const StopIcon: React.FC<Omit<IconProps, 'name'>> = () =>
+  React.createElement('div', { children: 'Stop Icon - Coming Soon' });
 
-export const VolumeUpIcon: React.FC<Omit<IconProps, 'name'>> = () => (
-  React.createElement('div', { children: 'Volume Up Icon - Coming Soon' })
-);
+export const VolumeUpIcon: React.FC<Omit<IconProps, 'name'>> = () =>
+  React.createElement('div', { children: 'Volume Up Icon - Coming Soon' });
 
-export const VolumeOffIcon: React.FC<Omit<IconProps, 'name'>> = () => (
-  React.createElement('div', { children: 'Volume Off Icon - Coming Soon' })
-);
+export const VolumeOffIcon: React.FC<Omit<IconProps, 'name'>> = () =>
+  React.createElement('div', { children: 'Volume Off Icon - Coming Soon' });
 
-export const FullscreenIcon: React.FC<Omit<IconProps, 'name'>> = () => (
-  React.createElement('div', { children: 'Fullscreen Icon - Coming Soon' })
-);
+export const FullscreenIcon: React.FC<Omit<IconProps, 'name'>> = () =>
+  React.createElement('div', { children: 'Fullscreen Icon - Coming Soon' });
 
-export const ExitFullscreenIcon: React.FC<Omit<IconProps, 'name'>> = () => (
-  React.createElement('div', { children: 'Exit Fullscreen Icon - Coming Soon' })
-);
\ No newline at end of file
+export const ExitFullscreenIcon: React.FC<Omit<IconProps, 'name'>> = () =>
+  React.createElement('div', { children: 'Exit Fullscreen Icon - Coming Soon' });
diff --git a/packages/react-native/react-native-icons/tsconfig.json b/packages/react-native/react-native-icons/tsconfig.json
index 53e48dba..7307fb5c 100644
--- a/packages/react-native/react-native-icons/tsconfig.json
+++ b/packages/react-native/react-native-icons/tsconfig.json
@@ -10,4 +10,4 @@
   },
   "include": ["src/**/*"],
   "exclude": ["dist", "node_modules"]
-}
\ No newline at end of file
+}
diff --git a/packages/react-native/react-native-icons/tsup.config.ts b/packages/react-native/react-native-icons/tsup.config.ts
index 637a35b3..2fcbf8ab 100644
--- a/packages/react-native/react-native-icons/tsup.config.ts
+++ b/packages/react-native/react-native-icons/tsup.config.ts
@@ -18,4 +18,4 @@ export default defineConfig({
       incremental: false,
     },
   },
-});
\ No newline at end of file
+});
diff --git a/packages/react-native/react-native-media-elements/package.json b/packages/react-native/react-native-media-elements/package.json
index 5cb949f7..c3b86824 100644
--- a/packages/react-native/react-native-media-elements/package.json
+++ b/packages/react-native/react-native-media-elements/package.json
@@ -40,4 +40,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/react-native/react-native-media-elements/src/index.tsx b/packages/react-native/react-native-media-elements/src/index.tsx
index 7554b893..51875cca 100644
--- a/packages/react-native/react-native-media-elements/src/index.tsx
+++ b/packages/react-native/react-native-media-elements/src/index.tsx
@@ -29,7 +29,7 @@ export interface MediaElementRef {
   playbackRate: number;
   readyState: number;
   networkState: number;
-  
+
   play(): Promise<void>;
   pause(): void;
   load(): void;
@@ -37,10 +37,8 @@ export interface MediaElementRef {
 }
 
 // Placeholder component - will be implemented later
-export const VideoElement = React.forwardRef<MediaElementRef, MediaElementProps>(
-  (_, __) => {
-    return React.createElement('div', { children: 'React Native VideoElement - Coming Soon' });
-  }
-);
+export const VideoElement = React.forwardRef<MediaElementRef, MediaElementProps>((_, __) => {
+  return React.createElement('div', { children: 'React Native VideoElement - Coming Soon' });
+});
 
-VideoElement.displayName = 'VideoElement';
\ No newline at end of file
+VideoElement.displayName = 'VideoElement';
diff --git a/packages/react-native/react-native-media-elements/tsconfig.json b/packages/react-native/react-native-media-elements/tsconfig.json
index 53e48dba..7307fb5c 100644
--- a/packages/react-native/react-native-media-elements/tsconfig.json
+++ b/packages/react-native/react-native-media-elements/tsconfig.json
@@ -10,4 +10,4 @@
   },
   "include": ["src/**/*"],
   "exclude": ["dist", "node_modules"]
-}
\ No newline at end of file
+}
diff --git a/packages/react-native/react-native-media-elements/tsup.config.ts b/packages/react-native/react-native-media-elements/tsup.config.ts
index 637a35b3..2fcbf8ab 100644
--- a/packages/react-native/react-native-media-elements/tsup.config.ts
+++ b/packages/react-native/react-native-media-elements/tsup.config.ts
@@ -18,4 +18,4 @@ export default defineConfig({
       incremental: false,
     },
   },
-});
\ No newline at end of file
+});
diff --git a/packages/react-native/react-native/package.json b/packages/react-native/react-native/package.json
index b7e1993a..fc076805 100644
--- a/packages/react-native/react-native/package.json
+++ b/packages/react-native/react-native/package.json
@@ -43,4 +43,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/react-native/react-native/src/index.tsx b/packages/react-native/react-native/src/index.tsx
index 740a4b09..f42d6eb7 100644
--- a/packages/react-native/react-native/src/index.tsx
+++ b/packages/react-native/react-native/src/index.tsx
@@ -31,5 +31,5 @@ export const Player: React.FC<PlayerProps> = () => {
 // Re-export placeholder packages (will be available at runtime)
 // @ts-ignore - Package imports for placeholder stubs
 export * from '@vjs-10/react-native-icons';
-// @ts-ignore - Package imports for placeholder stubs  
-export * from '@vjs-10/react-native-media-elements';
\ No newline at end of file
+// @ts-ignore - Package imports for placeholder stubs
+export * from '@vjs-10/react-native-media-elements';
diff --git a/packages/react-native/react-native/tsconfig.json b/packages/react-native/react-native/tsconfig.json
index 53e48dba..7307fb5c 100644
--- a/packages/react-native/react-native/tsconfig.json
+++ b/packages/react-native/react-native/tsconfig.json
@@ -10,4 +10,4 @@
   },
   "include": ["src/**/*"],
   "exclude": ["dist", "node_modules"]
-}
\ No newline at end of file
+}
diff --git a/packages/react-native/react-native/tsup.config.ts b/packages/react-native/react-native/tsup.config.ts
index 637a35b3..2fcbf8ab 100644
--- a/packages/react-native/react-native/tsup.config.ts
+++ b/packages/react-native/react-native/tsup.config.ts
@@ -18,4 +18,4 @@ export default defineConfig({
       incremental: false,
     },
   },
-});
\ No newline at end of file
+});
diff --git a/packages/react/react-icons/README.md b/packages/react/react-icons/README.md
index 1caf0325..9a9689ab 100644
--- a/packages/react/react-icons/README.md
+++ b/packages/react/react-icons/README.md
@@ -38,7 +38,7 @@ packages/core/icons/assets/
 ## Usage
 
 ```tsx
-import { PlayIcon, PauseIcon, VolumeHighIcon } from '@vjs-10/react-icons';
+import { PauseIcon, PlayIcon, VolumeHighIcon } from '@vjs-10/react-icons';
 
 function MediaControls() {
   return (
diff --git a/packages/react/react-icons/package.json b/packages/react/react-icons/package.json
index 82885eee..7b92d52c 100644
--- a/packages/react/react-icons/package.json
+++ b/packages/react/react-icons/package.json
@@ -52,4 +52,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/react/react-icons/rollup.config.js b/packages/react/react-icons/rollup.config.js
index e95bc7c6..d4d9cbf8 100644
--- a/packages/react/react-icons/rollup.config.js
+++ b/packages/react/react-icons/rollup.config.js
@@ -12,7 +12,7 @@ module.exports = [
       sourcemap: true,
     },
     watch: {
-      clearScreen: false
+      clearScreen: false,
     },
     external: (id) => {
       // Don't externalize relative imports (starts with . or /)
@@ -24,7 +24,7 @@ module.exports = [
     },
     plugins: [
       resolve({
-        extensions: ['.js', '.jsx', '.ts', '.tsx']
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
       }),
       commonjs(),
       typescript({
@@ -43,7 +43,7 @@ module.exports = [
       sourcemap: true,
     },
     watch: {
-      clearScreen: false
+      clearScreen: false,
     },
     external: (id) => {
       // Don't externalize relative imports (starts with . or /)
@@ -55,7 +55,7 @@ module.exports = [
     },
     plugins: [
       resolve({
-        extensions: ['.js', '.jsx', '.ts', '.tsx']
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
       }),
       commonjs(),
       typescript({
diff --git a/packages/react/react-icons/src/index.ts b/packages/react/react-icons/src/index.ts
index 2dc642d7..671b2284 100644
--- a/packages/react/react-icons/src/index.ts
+++ b/packages/react/react-icons/src/index.ts
@@ -1,2 +1,2 @@
 export * from './generated-icons';
-export type { IconProps } from './types';
\ No newline at end of file
+export type { IconProps } from './types';
diff --git a/packages/react/react-icons/src/types.d.ts b/packages/react/react-icons/src/types.d.ts
index 1626a516..abd7a3e9 100644
--- a/packages/react/react-icons/src/types.d.ts
+++ b/packages/react/react-icons/src/types.d.ts
@@ -1,6 +1,6 @@
-import type { SVGAttributes } from "react";
+import type { SVGAttributes } from 'react';
 
 export interface IconProps extends SVGAttributes<SVGElement> {
   children?: never;
   color?: string;
-}
\ No newline at end of file
+}
diff --git a/packages/react/react-icons/svgr.config.js b/packages/react/react-icons/svgr.config.js
index f4cda36f..e1b4bd87 100644
--- a/packages/react/react-icons/svgr.config.js
+++ b/packages/react/react-icons/svgr.config.js
@@ -1,4 +1,4 @@
-const path = require('path')
+const path = require('path');
 
 module.exports = {
   plugins: ['@svgr/plugin-jsx', '@svgr/plugin-prettier'],
@@ -7,14 +7,14 @@ module.exports = {
   icon: false, // Don't set height/width attributes.
   expandProps: 'end',
   svgProps: {
-    'aria-hidden': 'true'
+    'aria-hidden': 'true',
   },
   replaceAttrValues: {
     '#000': '{color}',
     '#fff': '{color}',
-    'black': '{color}',
-    'white': '{color}',
-    'currentColor': '{color}'
+    black: '{color}',
+    white: '{color}',
+    currentColor: '{color}',
   },
   template: (variables, { tpl }) => {
     return tpl`
@@ -42,15 +42,15 @@ const ${variables.componentName} = ({ color = 'currentColor', ...props }: IconPr
 );
 
 ${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 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
@@ -66,8 +66,8 @@ ${variables.exports};
  *
  * @generated
  */
-`
+`;
 
-    return header + exportEntries.join('\n') + '\n'
-  }
-}
\ No newline at end of file
+    return header + exportEntries.join('\n') + '\n';
+  },
+};
diff --git a/packages/react/react-icons/tsconfig.build.json b/packages/react/react-icons/tsconfig.build.json
index 698a5b71..6c809265 100644
--- a/packages/react/react-icons/tsconfig.build.json
+++ b/packages/react/react-icons/tsconfig.build.json
@@ -10,4 +10,4 @@
     "incremental": false
   },
   "exclude": ["dist", "node_modules"]
-}
\ No newline at end of file
+}
diff --git a/packages/react/react-icons/tsconfig.json b/packages/react/react-icons/tsconfig.json
index 5f20f019..b2717a5c 100644
--- a/packages/react/react-icons/tsconfig.json
+++ b/packages/react/react-icons/tsconfig.json
@@ -7,4 +7,4 @@
   },
   "include": ["src/**/*"],
   "exclude": ["dist", "node_modules"]
-}
\ No newline at end of file
+}
diff --git a/packages/react/react-media-elements/package.json b/packages/react/react-media-elements/package.json
index 8f9dd24e..88f6c957 100644
--- a/packages/react/react-media-elements/package.json
+++ b/packages/react/react-media-elements/package.json
@@ -43,4 +43,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/react/react-media-elements/src/index.ts b/packages/react/react-media-elements/src/index.ts
index e79fc160..efa48bed 100644
--- a/packages/react/react-media-elements/src/index.ts
+++ b/packages/react/react-media-elements/src/index.ts
@@ -1,4 +1,4 @@
 // Video component has been moved to @vjs-10/react as MediaElementVideo
 // Export the media element components from the main module
 export { VideoElement, AudioElement, createMediaElementAdapter } from './media-elements';
-export type { MediaElementProps, MediaElementRef, MediaElementLike } from './media-elements';
\ No newline at end of file
+export type { MediaElementProps, MediaElementRef, MediaElementLike } from './media-elements';
diff --git a/packages/react/react-media-elements/src/media-elements.tsx b/packages/react/react-media-elements/src/media-elements.tsx
index 82a8e12e..61064e6b 100644
--- a/packages/react/react-media-elements/src/media-elements.tsx
+++ b/packages/react/react-media-elements/src/media-elements.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 
 // @ts-ignore - Placeholder interfaces for future implementation
 interface MediaElementLike {
@@ -19,19 +19,45 @@ interface MediaElementLike {
 // @ts-ignore - Placeholder function for future implementation
 const 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; },
+    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(),
@@ -43,11 +69,11 @@ class NativePlaybackEngine {
   attach(_element: HTMLMediaElement) {
     // Placeholder implementation
   }
-  
+
   detach() {
     // Placeholder implementation
   }
-  
+
   load(_source: { src: string; type: string }) {
     // Placeholder implementation
   }
@@ -77,24 +103,27 @@ export interface MediaElementRef extends MediaElementLike {
 }
 
 export const VideoElement = 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) => {
+  (
+    {
+      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);
@@ -102,7 +131,7 @@ export const VideoElement = forwardRef<MediaElementRef, MediaElementProps>(
     useEffect(() => {
       const video = videoRef.current;
       const engine = engineRef.current;
-      
+
       if (!video) return;
 
       engine.attach(video);
@@ -139,59 +168,63 @@ export const VideoElement = forwardRef<MediaElementRef, MediaElementProps>(
       }
     }, [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(),
-    }), []);
+    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
@@ -213,23 +246,26 @@ export const VideoElement = forwardRef<MediaElementRef, MediaElementProps>(
 VideoElement.displayName = 'VideoElement';
 
 export const AudioElement = forwardRef<MediaElementRef, MediaElementProps>(
-  ({
-    src,
-    controls = false,
-    autoplay = false,
-    preload = 'metadata',
-    muted = false,
-    loop = false,
-    crossOrigin,
-    onPlay,
-    onPause,
-    onTimeUpdate,
-    onLoadedMetadata,
-    onVolumeChange,
-    onEnded,
-    className,
-    style,
-  }, ref) => {
+  (
+    {
+      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);
@@ -237,7 +273,7 @@ export const AudioElement = forwardRef<MediaElementRef, MediaElementProps>(
     useEffect(() => {
       const audio = audioRef.current;
       const engine = engineRef.current;
-      
+
       if (!audio) return;
 
       engine.attach(audio);
@@ -274,59 +310,63 @@ export const AudioElement = forwardRef<MediaElementRef, MediaElementProps>(
       }
     }, [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(),
-    }), []);
+    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
@@ -347,4 +387,4 @@ export const AudioElement = forwardRef<MediaElementRef, MediaElementProps>(
 AudioElement.displayName = 'AudioElement';
 
 export type { MediaElementLike };
-export { createMediaElementAdapter };
\ No newline at end of file
+export { createMediaElementAdapter };
diff --git a/packages/react/react-media-elements/tsconfig.json b/packages/react/react-media-elements/tsconfig.json
index 5f20f019..b2717a5c 100644
--- a/packages/react/react-media-elements/tsconfig.json
+++ b/packages/react/react-media-elements/tsconfig.json
@@ -7,4 +7,4 @@
   },
   "include": ["src/**/*"],
   "exclude": ["dist", "node_modules"]
-}
\ No newline at end of file
+}
diff --git a/packages/react/react-media-elements/tsup.config.ts b/packages/react/react-media-elements/tsup.config.ts
index 108499a4..a4bebd83 100644
--- a/packages/react/react-media-elements/tsup.config.ts
+++ b/packages/react/react-media-elements/tsup.config.ts
@@ -18,4 +18,4 @@ export default defineConfig({
       incremental: false,
     },
   },
-});
\ No newline at end of file
+});
diff --git a/packages/react/react-media-store/package.json b/packages/react/react-media-store/package.json
index e2a26dbc..be014882 100644
--- a/packages/react/react-media-store/package.json
+++ b/packages/react/react-media-store/package.json
@@ -43,4 +43,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/react/react-media-store/src/MediaProvider.tsx b/packages/react/react-media-store/src/MediaProvider.tsx
index f829214f..cf5b9d80 100644
--- a/packages/react/react-media-store/src/MediaProvider.tsx
+++ b/packages/react/react-media-store/src/MediaProvider.tsx
@@ -2,8 +2,11 @@
 
 /** @TODO !!! Revisit for SSR (CJP) */
 import type { Context, ReactNode } from 'react';
+
 import React, { createContext, useContext, useMemo } from 'react';
+
 import { createMediaStore } from '@vjs-10/media-store';
+
 import { useSyncExternalStoreWithSelector } from './useSyncExternalStoreWithSelector.js';
 
 const identity = (x?: any) => x;
@@ -17,9 +20,7 @@ const identity = (x?: any) => x;
  * @see {@link useMediaDispatch}
  * @see {@link useMediaSelector}
  */
-export const MediaContext: Context<any | null> = createContext<any | null>(
-  null,
-);
+export const MediaContext: Context<any | null> = createContext<any | null>(null);
 
 export const MediaProvider = ({ children }: { children: ReactNode }) => {
   const value = useMemo(() => createMediaStore(), []);
@@ -35,9 +36,7 @@ export const MediaProvider = ({ children }: { children: ReactNode }) => {
   //     });
   //   };
   // }, []);
-  return (
-    <MediaContext.Provider value={value}>{children}</MediaContext.Provider>
-  );
+  return <MediaContext.Provider value={value}>{children}</MediaContext.Provider>;
 };
 
 export const useMediaStore = () => {
@@ -84,12 +83,7 @@ export const shallowEqual = (objA: any, objB: any): boolean => {
 
   // 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
-  ) {
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
     return false;
   }
 
@@ -121,17 +115,14 @@ export const shallowEqual = (objA: any, objB: any): boolean => {
   return true;
 };
 
-export const useMediaSelector = <S = any,>(
-  selector: (state: any) => S,
-  equalityFn = refEquality,
-) => {
+export const useMediaSelector = <S = any,>(selector: (state: any) => S, equalityFn = refEquality) => {
   const store = useContext(MediaContext);
   const selectedState = useSyncExternalStoreWithSelector(
     store?.subscribe ?? identity,
     store?.getState ?? identity,
     store?.getState ?? identity,
     selector,
-    equalityFn,
+    equalityFn
   ) as S;
 
   return selectedState;
diff --git a/packages/react/react-media-store/src/index.ts b/packages/react/react-media-store/src/index.ts
index 66551146..ec8223b8 100644
--- a/packages/react/react-media-store/src/index.ts
+++ b/packages/react/react-media-store/src/index.ts
@@ -1 +1 @@
-export * from './MediaProvider';
\ No newline at end of file
+export * from './MediaProvider';
diff --git a/packages/react/react-media-store/src/useSyncExternalStoreWithSelector.ts b/packages/react/react-media-store/src/useSyncExternalStoreWithSelector.ts
index 809dea9b..6c593753 100644
--- a/packages/react/react-media-store/src/useSyncExternalStoreWithSelector.ts
+++ b/packages/react/react-media-store/src/useSyncExternalStoreWithSelector.ts
@@ -6,13 +6,7 @@
  *
  */
 
-import {
-  useRef,
-  useEffect,
-  useMemo,
-  useDebugValue,
-  useSyncExternalStore,
-} from 'react';
+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
@@ -39,8 +33,7 @@ type SnapshotRef<Selection> =
     }
   | null;
 
-const is: (x: any, y: any) => boolean =
-  typeof Object.is === 'function' ? Object.is : isPolyfill;
+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>(
@@ -48,7 +41,7 @@ export function useSyncExternalStoreWithSelector<Snapshot, Selection>(
   getSnapshot: () => Snapshot,
   getServerSnapshot: undefined | null | (() => Snapshot),
   selector: (snapshot: Snapshot) => Selection,
-  isEqual?: (a: Selection, b: Selection) => boolean,
+  isEqual?: (a: Selection, b: Selection) => boolean
 ) {
   // Use this to track the rendered snapshot.
   const instRef = useRef<SnapshotRef<Selection>>(null);
@@ -118,21 +111,14 @@ export function useSyncExternalStoreWithSelector<Snapshot, Selection>(
       return nextSelection;
     };
     // Assigning this to a constant so that Flow knows it can't change.
-    const maybeGetServerSnapshot =
-      getServerSnapshot === undefined ? null : getServerSnapshot;
+    const maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot;
     const getSnapshotWithSelector = () => memoizedSelector(getSnapshot());
     const getServerSnapshotWithSelector =
-      maybeGetServerSnapshot === null
-        ? undefined
-        : () => memoizedSelector(maybeGetServerSnapshot());
+      maybeGetServerSnapshot === null ? undefined : () => memoizedSelector(maybeGetServerSnapshot());
     return [getSnapshotWithSelector, getServerSnapshotWithSelector];
   }, [getSnapshot, getServerSnapshot, selector, isEqual]);
 
-  const value = useSyncExternalStore(
-    subscribe,
-    getSelection,
-    getServerSelection,
-  );
+  const value = useSyncExternalStore(subscribe, getSelection, getServerSelection);
 
   useEffect(() => {
     inst.hasValue = true;
diff --git a/packages/react/react-media-store/tsconfig.json b/packages/react/react-media-store/tsconfig.json
index 5f20f019..b2717a5c 100644
--- a/packages/react/react-media-store/tsconfig.json
+++ b/packages/react/react-media-store/tsconfig.json
@@ -7,4 +7,4 @@
   },
   "include": ["src/**/*"],
   "exclude": ["dist", "node_modules"]
-}
\ No newline at end of file
+}
diff --git a/packages/react/react-media-store/tsup.config.ts b/packages/react/react-media-store/tsup.config.ts
index 637a35b3..2fcbf8ab 100644
--- a/packages/react/react-media-store/tsup.config.ts
+++ b/packages/react/react-media-store/tsup.config.ts
@@ -18,4 +18,4 @@ export default defineConfig({
       incremental: false,
     },
   },
-});
\ No newline at end of file
+});
diff --git a/packages/react/react/rollup.config.js b/packages/react/react/rollup.config.js
index 8587e273..54153881 100644
--- a/packages/react/react/rollup.config.js
+++ b/packages/react/react/rollup.config.js
@@ -13,24 +13,24 @@ module.exports = [
       sourcemap: true,
     },
     watch: {
-      clearScreen: false
+      clearScreen: false,
     },
     external: [
       'react',
       '@vjs-10/react-icons',
-      '@vjs-10/react-media-elements', 
+      '@vjs-10/react-media-elements',
       '@vjs-10/react-media-store',
-      '@vjs-10/media'
+      '@vjs-10/media',
     ],
     plugins: [
       resolve({
-        extensions: ['.js', '.jsx', '.ts', '.tsx']
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
       }),
       commonjs(),
       postcss({
         modules: true,
         extract: false, // Don't extract CSS to separate file
-        inject: true,   // Inject CSS into JS bundle
+        inject: true, // Inject CSS into JS bundle
         minimize: false,
         sourceMap: true,
       }),
@@ -50,24 +50,24 @@ module.exports = [
       sourcemap: true,
     },
     watch: {
-      clearScreen: false
+      clearScreen: false,
     },
     external: [
       'react',
       '@vjs-10/react-icons',
       '@vjs-10/react-media-elements',
-      '@vjs-10/react-media-store', 
-      '@vjs-10/media'
+      '@vjs-10/react-media-store',
+      '@vjs-10/media',
     ],
     plugins: [
       resolve({
-        extensions: ['.js', '.jsx', '.ts', '.tsx']
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
       }),
       commonjs(),
       postcss({
         modules: true,
         extract: false, // Don't extract CSS for CJS build
-        inject: true,   // Inject CSS into JS bundle
+        inject: true, // Inject CSS into JS bundle
         minimize: false,
         sourceMap: true,
       }),
diff --git a/packages/react/react/src/components/CurrentTimeDisplay.tsx b/packages/react/react/src/components/CurrentTimeDisplay.tsx
index b7a54502..1a53b603 100644
--- a/packages/react/react/src/components/CurrentTimeDisplay.tsx
+++ b/packages/react/react/src/components/CurrentTimeDisplay.tsx
@@ -1,17 +1,13 @@
-import { shallowEqual, useMediaSelector } from '@vjs-10/react-media-store';
 import * as React from 'react';
+
+import { currentTimeDisplayStateDefinition, formatDisplayTime } from '@vjs-10/media-store';
+import { shallowEqual, useMediaSelector } from '@vjs-10/react-media-store';
+
 import { toConnectedComponent } from '../utils/component-factory';
-import {
-  currentTimeDisplayStateDefinition,
-  formatDisplayTime,
-} from '@vjs-10/media-store';
 
 export const useCurrentTimeDisplayState = (_props: any) => {
   /** @TODO Fix type issues with hooks (CJP) */
-  const mediaState = useMediaSelector(
-    currentTimeDisplayStateDefinition.stateTransform,
-    shallowEqual,
-  );
+  const mediaState = useMediaSelector(currentTimeDisplayStateDefinition.stateTransform, shallowEqual);
 
   // Current time display is read-only, no request methods needed
   return {
@@ -25,7 +21,7 @@ export type CurrentTimeDisplayState = ReturnType<useCurrentTimeDisplayState>;
 
 export const useCurrentTimeDisplayProps = (
   props: React.PropsWithChildren<{ showRemaining?: boolean; [k: string]: any }>,
-  _state: ReturnType<typeof useCurrentTimeDisplayState>,
+  _state: ReturnType<typeof useCurrentTimeDisplayState>
 ) => {
   const baseProps: Record<string, any> = {
     /** external props spread last to allow for overriding */
@@ -38,10 +34,7 @@ export const useCurrentTimeDisplayProps = (
 export type useCurrentTimeDisplayProps = typeof useCurrentTimeDisplayProps;
 type CurrentTimeDisplayProps = ReturnType<useCurrentTimeDisplayProps>;
 
-export const renderCurrentTimeDisplay = (
-  props: CurrentTimeDisplayProps,
-  state: CurrentTimeDisplayState,
-) => {
+export const renderCurrentTimeDisplay = (props: CurrentTimeDisplayProps, state: CurrentTimeDisplayState) => {
   const { showRemaining, ...restProps } = props;
 
   /** @TODO Should this live here or elsewhere? (CJP) */
@@ -59,6 +52,6 @@ export const CurrentTimeDisplay = toConnectedComponent(
   useCurrentTimeDisplayState,
   useCurrentTimeDisplayProps,
   renderCurrentTimeDisplay,
-  'CurrentTimeDisplay',
+  'CurrentTimeDisplay'
 );
 export default CurrentTimeDisplay;
diff --git a/packages/react/react/src/components/DurationDisplay.tsx b/packages/react/react/src/components/DurationDisplay.tsx
index c8bb3afd..b96956c6 100644
--- a/packages/react/react/src/components/DurationDisplay.tsx
+++ b/packages/react/react/src/components/DurationDisplay.tsx
@@ -1,19 +1,14 @@
-import {
-  shallowEqual,
-  useMediaSelector,
-  useMediaStore,
-} from '@vjs-10/react-media-store';
 import * as React from 'react';
-import { toConnectedComponent } from '../utils/component-factory';
+
 import { durationDisplayStateDefinition, formatDisplayTime } from '@vjs-10/media-store';
+import { shallowEqual, useMediaSelector, useMediaStore } from '@vjs-10/react-media-store';
+
+import { toConnectedComponent } from '../utils/component-factory';
 
 export const useDurationDisplayState = (_props: any) => {
   const mediaStore = useMediaStore();
   /** @TODO Fix type issues with hooks (CJP) */
-  const mediaState = useMediaSelector(
-    durationDisplayStateDefinition.stateTransform,
-    shallowEqual,
-  );
+  const mediaState = useMediaSelector(durationDisplayStateDefinition.stateTransform, shallowEqual);
 
   // Duration display is read-only, no request methods needed
   return {
@@ -26,7 +21,7 @@ export type DurationDisplayState = ReturnType<useDurationDisplayState>;
 
 export const useDurationDisplayProps = (
   props: React.PropsWithChildren<{ [k: string]: any }>,
-  state: ReturnType<typeof useDurationDisplayState>,
+  state: ReturnType<typeof useDurationDisplayState>
 ) => {
   const baseProps: Record<string, any> = {
     /** external props spread last to allow for overriding */
@@ -39,15 +34,8 @@ export const useDurationDisplayProps = (
 export type useDurationDisplayProps = typeof useDurationDisplayProps;
 type DurationDisplayProps = ReturnType<useDurationDisplayProps>;
 
-export const renderDurationDisplay = (
-  props: DurationDisplayProps,
-  state: DurationDisplayState,
-) => {
-  return (
-    <span {...props}>
-      {formatDisplayTime(state.duration)}
-    </span>
-  );
+export const renderDurationDisplay = (props: DurationDisplayProps, state: DurationDisplayState) => {
+  return <span {...props}>{formatDisplayTime(state.duration)}</span>;
 };
 
 export type renderDurationDisplay = typeof renderDurationDisplay;
@@ -56,6 +44,6 @@ export const DurationDisplay = toConnectedComponent(
   useDurationDisplayState,
   useDurationDisplayProps,
   renderDurationDisplay,
-  'DurationDisplay',
+  'DurationDisplay'
 );
-export default DurationDisplay;
\ No newline at end of file
+export default DurationDisplay;
diff --git a/packages/react/react/src/components/FullscreenButton.tsx b/packages/react/react/src/components/FullscreenButton.tsx
index 5b51d94e..689dd7a9 100644
--- a/packages/react/react/src/components/FullscreenButton.tsx
+++ b/packages/react/react/src/components/FullscreenButton.tsx
@@ -1,23 +1,18 @@
-import {
-  shallowEqual,
-  useMediaSelector,
-  useMediaStore,
-} from '@vjs-10/react-media-store';
 import * as React from 'react';
-import { toConnectedComponent } from '../utils/component-factory';
+
 import { fullscreenButtonStateDefinition } from '@vjs-10/media-store';
+import { shallowEqual, useMediaSelector, useMediaStore } from '@vjs-10/react-media-store';
+
+import { toConnectedComponent } from '../utils/component-factory';
 
 export const useFullscreenButtonState = (_props: any) => {
   const mediaStore = useMediaStore();
   /** @TODO Fix type issues with hooks (CJP) */
-  const mediaState = useMediaSelector(
-    fullscreenButtonStateDefinition.stateTransform,
-    shallowEqual,
-  );
+  const mediaState = useMediaSelector(fullscreenButtonStateDefinition.stateTransform, shallowEqual);
 
   const methods = React.useMemo(
     () => fullscreenButtonStateDefinition.createRequestMethods(mediaStore.dispatch),
-    [mediaStore],
+    [mediaStore]
   );
 
   return {
@@ -32,7 +27,7 @@ export type FullscreenButtonState = ReturnType<useFullscreenButtonState>;
 
 export const useFullscreenButtonProps = (
   props: React.PropsWithChildren<{ [k: string]: any }>,
-  state: ReturnType<typeof useFullscreenButtonState>,
+  state: ReturnType<typeof useFullscreenButtonState>
 ) => {
   const baseProps: Record<string, any> = {
     /** @TODO Need another state provider in core for i18n (CJP) */
@@ -56,10 +51,7 @@ export const useFullscreenButtonProps = (
 export type useFullscreenButtonProps = typeof useFullscreenButtonProps;
 type FullscreenButtonProps = ReturnType<useFullscreenButtonProps>;
 
-export const renderFullscreenButton = (
-  props: FullscreenButtonProps,
-  state: FullscreenButtonState,
-) => {
+export const renderFullscreenButton = (props: FullscreenButtonProps, state: FullscreenButtonState) => {
   return (
     <button
       {...props}
@@ -84,6 +76,6 @@ export const FullscreenButton = toConnectedComponent(
   useFullscreenButtonState,
   useFullscreenButtonProps,
   renderFullscreenButton,
-  'FullscreenButton',
+  'FullscreenButton'
 );
-export default FullscreenButton;
\ No newline at end of file
+export default FullscreenButton;
diff --git a/packages/react/react/src/components/MediaContainer.tsx b/packages/react/react/src/components/MediaContainer.tsx
index 0bddda24..ab047a71 100644
--- a/packages/react/react/src/components/MediaContainer.tsx
+++ b/packages/react/react/src/components/MediaContainer.tsx
@@ -1,16 +1,17 @@
 import * as React from 'react';
+
 import { useMediaStore } from '@vjs-10/react-media-store';
 
 /**
  * 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 '@vjs-10/react';
- * 
+ *
  * const PlayerContainer = ({ children }) => {
  *   const containerRef = useMediaContainerRef();
  *   return <div ref={containerRef}>{children}</div>;
@@ -18,25 +19,28 @@ import { useMediaStore } from '@vjs-10/react-media-store';
  */
 export const useMediaContainerRef = () => {
   const mediaStore = useMediaStore();
-  
-  return React.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]);
+
+  return React.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 '@vjs-10/react';
- * 
+ *
  * const MyPlayer = () => (
  *   <MediaContainer>
  *     <video src="video.mp4" />
@@ -44,15 +48,15 @@ export const useMediaContainerRef = () => {
  *   </MediaContainer>
  * );
  */
-export const MediaContainer: React.FC<React.PropsWithChildren<React.HTMLProps<HTMLDivElement>>> = ({ 
-  children, 
-  ...props 
+export const MediaContainer: React.FC<React.PropsWithChildren<React.HTMLProps<HTMLDivElement>>> = ({
+  children,
+  ...props
 }) => {
   const containerRef = useMediaContainerRef();
-  
+
   return (
     <div ref={containerRef} {...props}>
       {children}
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/packages/react/react/src/components/MuteButton.tsx b/packages/react/react/src/components/MuteButton.tsx
index 5fce8a38..967837e7 100644
--- a/packages/react/react/src/components/MuteButton.tsx
+++ b/packages/react/react/src/components/MuteButton.tsx
@@ -1,23 +1,18 @@
-import {
-  shallowEqual,
-  useMediaSelector,
-  useMediaStore,
-} from '@vjs-10/react-media-store';
 import * as React from 'react';
-import { toConnectedComponent } from '../utils/component-factory';
+
 import { muteButtonStateDefinition } from '@vjs-10/media-store';
+import { shallowEqual, useMediaSelector, useMediaStore } from '@vjs-10/react-media-store';
+
+import { toConnectedComponent } from '../utils/component-factory';
 
 export const useMuteButtonState = (_props: any) => {
   const mediaStore = useMediaStore();
   /** @TODO Fix type issues with hooks (CJP) */
-  const mediaState = useMediaSelector(
-    muteButtonStateDefinition.stateTransform,
-    shallowEqual,
-  );
+  const mediaState = useMediaSelector(muteButtonStateDefinition.stateTransform, shallowEqual);
 
   const methods = React.useMemo(
     () => muteButtonStateDefinition.createRequestMethods(mediaStore.dispatch),
-    [mediaStore],
+    [mediaStore]
   );
 
   return {
@@ -33,7 +28,7 @@ export type MuteButtonState = ReturnType<useMuteButtonState>;
 
 export const useMuteButtonProps = (
   props: React.PropsWithChildren<{ [k: string]: any }>,
-  state: ReturnType<typeof useMuteButtonState>,
+  state: ReturnType<typeof useMuteButtonState>
 ) => {
   const baseProps: Record<string, any> = {
     /** data attributes/props - non-boolean */
@@ -59,10 +54,7 @@ export const useMuteButtonProps = (
 export type useMuteButtonProps = typeof useMuteButtonProps;
 type MuteButtonProps = ReturnType<useMuteButtonProps>;
 
-export const renderMuteButton = (
-  props: MuteButtonProps,
-  state: MuteButtonState,
-) => {
+export const renderMuteButton = (props: MuteButtonProps, state: MuteButtonState) => {
   return (
     <button
       {...props}
@@ -83,10 +75,5 @@ export const renderMuteButton = (
 
 export type renderMuteButton = typeof renderMuteButton;
 
-export const MuteButton = toConnectedComponent(
-  useMuteButtonState,
-  useMuteButtonProps,
-  renderMuteButton,
-  'MuteButton',
-);
+export const MuteButton = toConnectedComponent(useMuteButtonState, useMuteButtonProps, renderMuteButton, 'MuteButton');
 export default MuteButton;
diff --git a/packages/react/react/src/components/PlayButton.tsx b/packages/react/react/src/components/PlayButton.tsx
index 825fc8ec..d22e9758 100644
--- a/packages/react/react/src/components/PlayButton.tsx
+++ b/packages/react/react/src/components/PlayButton.tsx
@@ -1,23 +1,18 @@
-import {
-  shallowEqual,
-  useMediaSelector,
-  useMediaStore,
-} from '@vjs-10/react-media-store';
 import * as React from 'react';
-import { toConnectedComponent } from '../utils/component-factory';
+
 import { playButtonStateDefinition } from '@vjs-10/media-store';
+import { shallowEqual, useMediaSelector, useMediaStore } from '@vjs-10/react-media-store';
+
+import { toConnectedComponent } from '../utils/component-factory';
 
 export const usePlayButtonState = (_props: any) => {
   const mediaStore = useMediaStore();
   /** @TODO Fix type issues with hooks (CJP) */
-  const mediaState = useMediaSelector(
-    playButtonStateDefinition.stateTransform,
-    shallowEqual,
-  );
+  const mediaState = useMediaSelector(playButtonStateDefinition.stateTransform, shallowEqual);
 
   const methods = React.useMemo(
     () => playButtonStateDefinition.createRequestMethods(mediaStore.dispatch),
-    [mediaStore],
+    [mediaStore]
   );
 
   return {
@@ -32,7 +27,7 @@ export type PlayButtonState = ReturnType<usePlayButtonState>;
 
 export const usePlayButtonProps = (
   props: React.PropsWithChildren<{ [k: string]: any }>,
-  state: ReturnType<typeof usePlayButtonState>,
+  state: ReturnType<typeof usePlayButtonState>
 ) => {
   const baseProps: Record<string, any> = {
     /** @TODO Need another state provider in core for i18n (CJP) */
@@ -56,10 +51,7 @@ export const usePlayButtonProps = (
 export type usePlayButtonProps = typeof usePlayButtonProps;
 type PlayButtonProps = ReturnType<usePlayButtonProps>;
 
-export const renderPlayButton = (
-  props: PlayButtonProps,
-  state: PlayButtonState,
-) => {
+export const renderPlayButton = (props: PlayButtonProps, state: PlayButtonState) => {
   return (
     <button
       {...props}
@@ -80,10 +72,5 @@ export const renderPlayButton = (
 
 export type renderPlayButton = typeof renderPlayButton;
 
-export const PlayButton = toConnectedComponent(
-  usePlayButtonState,
-  usePlayButtonProps,
-  renderPlayButton,
-  'PlayButton',
-);
+export const PlayButton = toConnectedComponent(usePlayButtonState, usePlayButtonProps, renderPlayButton, 'PlayButton');
 export default PlayButton;
diff --git a/packages/react/react/src/components/TimeRange.tsx b/packages/react/react/src/components/TimeRange.tsx
index f69eeb49..1d2bb506 100644
--- a/packages/react/react/src/components/TimeRange.tsx
+++ b/packages/react/react/src/components/TimeRange.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { shallowEqual, useMediaSelector, useMediaStore } from '@vjs-10/react-media-store';
+
 import { timeRangeStateDefinition } from '@vjs-10/media-store';
+import { shallowEqual, useMediaSelector, useMediaStore } from '@vjs-10/react-media-store';
 
 import { toConnectedComponent, toContextComponent } from '../utils/component-factory';
 
@@ -20,10 +21,7 @@ const calculateSeekTimeFromRatio = (ratio: number, duration: number): number =>
   return (ratio / 100) * duration;
 };
 
-const calculateSeekTimeFromPointerEvent = (
-  e: React.PointerEvent<HTMLDivElement>,
-  duration: number
-): number => {
+const calculateSeekTimeFromPointerEvent = (e: React.PointerEvent<HTMLDivElement>, duration: number): number => {
   const rect = e.currentTarget.getBoundingClientRect();
   const ratio = calculatePointerRatio(e.clientX, rect);
   return calculateSeekTimeFromRatio(ratio, duration);
@@ -37,10 +35,7 @@ export const useTimeRangeRootState = (_props: any) => {
   const mediaStore = useMediaStore();
   const mediaState = useMediaSelector(timeRangeStateDefinition.stateTransform, shallowEqual);
 
-  const methods = React.useMemo(
-    () => timeRangeStateDefinition.createRequestMethods(mediaStore.dispatch),
-    [mediaStore]
-  );
+  const methods = React.useMemo(() => timeRangeStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);
 
   const { requestSeek } = methods;
   const [pointerPosition, setPointerPosition] = React.useState<number | null>(null);
@@ -114,14 +109,7 @@ export const useTimeRangeRootProps = (
       }
       state.setDragging(false);
     },
-    [
-      state.dragging,
-      state.trackRef,
-      state.pointerPosition,
-      state.requestSeek,
-      state.duration,
-      state.setDragging,
-    ]
+    [state.dragging, state.trackRef, state.pointerPosition, state.requestSeek, state.duration, state.setDragging]
   );
 
   const handlePointerEnter = React.useCallback(() => {
@@ -148,9 +136,7 @@ export const useTimeRangeRootProps = (
       ...props.style,
       '--slider-fill': `${sliderFill.toFixed(3)}%`,
       '--slider-pointer':
-        state.hovering && state.pointerPosition !== null
-          ? `${state.pointerPosition.toFixed(3)}%`
-          : '0%',
+        state.hovering && state.pointerPosition !== null ? `${state.pointerPosition.toFixed(3)}%` : '0%',
     },
     onPointerDown: handlePointerDown,
     onPointerMove: handlePointerMove,
@@ -166,9 +152,7 @@ type useTimeRangeRootProps = typeof useTimeRangeRootProps;
 type TimeRangeRootProps = ReturnType<useTimeRangeRootProps>;
 
 export const renderTimeRangeRoot = (props: TimeRangeRootProps) => {
-  return (
-    <div {...props} />
-  );
+  return <div {...props} />;
 };
 
 const TimeRangeRoot = toConnectedComponent(
@@ -198,11 +182,7 @@ export const renderTimeRangeTrack = (props: TimeRangeTrackProps) => {
   return <div {...props} />;
 };
 
-const TimeRangeTrack = toContextComponent(
-  useTimeRangeTrackProps,
-  renderTimeRangeTrack,
-  'TimeRange.Track'
-);
+const TimeRangeTrack = toContextComponent(useTimeRangeTrackProps, renderTimeRangeTrack, 'TimeRange.Track');
 
 // ============================================================================
 // THUMB COMPONENT
@@ -228,11 +208,7 @@ export const renderTimeRangeThumb = (props: TimeRangeThumbProps) => {
   return <div {...props} />;
 };
 
-const TimeRangeThumb = toContextComponent(
-  useTimeRangeThumbProps,
-  renderTimeRangeThumb,
-  'TimeRange.Thumb'
-);
+const TimeRangeThumb = toContextComponent(useTimeRangeThumbProps, renderTimeRangeThumb, 'TimeRange.Thumb');
 
 // ============================================================================
 // POINTER COMPONENT
@@ -257,11 +233,7 @@ export const renderTimeRangePointer = (props: TimeRangePointerProps) => {
   return <div {...props} />;
 };
 
-const TimeRangePointer = toContextComponent(
-  useTimeRangePointerProps,
-  renderTimeRangePointer,
-  'TimeRange.Pointer'
-);
+const TimeRangePointer = toContextComponent(useTimeRangePointerProps, renderTimeRangePointer, 'TimeRange.Pointer');
 
 // ============================================================================
 // PROGRESS COMPONENT
@@ -286,11 +258,7 @@ export const renderTimeRangeProgress = (props: TimeRangeProgressProps) => {
   return <div {...props} />;
 };
 
-const TimeRangeProgress = toContextComponent(
-  useTimeRangeProgressProps,
-  renderTimeRangeProgress,
-  'TimeRange.Progress'
-);
+const TimeRangeProgress = toContextComponent(useTimeRangeProgressProps, renderTimeRangeProgress, 'TimeRange.Progress');
 
 // ============================================================================
 // EXPORTS
diff --git a/packages/react/react/src/components/Video.tsx b/packages/react/react/src/components/Video.tsx
index 4b76784e..ce92658b 100644
--- a/packages/react/react/src/components/Video.tsx
+++ b/packages/react/react/src/components/Video.tsx
@@ -1,19 +1,20 @@
 'use client';
 
 import * as React from 'react';
-import { useMediaRef } from '@vjs-10/react-media-store';
-import { createMediaStateOwner } from '@vjs-10/media';
 import {
-  ElementType,
-  VideoHTMLAttributes,
-  DetailedHTMLProps,
-  PropsWithChildren,
   CSSProperties,
+  DetailedHTMLProps,
+  ElementType,
+  PropsWithChildren,
   Ref,
   useImperativeHandle,
   useRef,
+  VideoHTMLAttributes,
 } from 'react';
 
+import { createMediaStateOwner } from '@vjs-10/media';
+import { useMediaRef } from '@vjs-10/react-media-store';
+
 export type MuxVideoProps = {
   'playback-id'?: string;
 };
@@ -22,10 +23,9 @@ 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> }
+  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.
@@ -33,22 +33,13 @@ type ComponentType = ElementType<
 // 1. an audio/video element directly
 // 2. a custom element a la media-elements
 type CreateMediaStateOwner = typeof createMediaStateOwner;
-const useMediaStateOwner = (
-  ref: Ref<any>,
-  createMediaStateOwner: CreateMediaStateOwner /*, props? */
-) => {
+const useMediaStateOwner = (ref: Ref<any>, createMediaStateOwner: CreateMediaStateOwner /*, props? */) => {
   const mediaStateOwnerRef = useRef(createMediaStateOwner(/* props? */));
   useImperativeHandle(ref, () => mediaStateOwnerRef.current, []);
   /** @TODO Parameterize this (CJP) */
-  type ComponentProps = DetailedHTMLProps<
-    VideoHTMLAttributes<HTMLVideoElement>,
-    HTMLVideoElement
-  >;
+  type ComponentProps = DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
   return {
-    updateMediaElement(
-      mediaEl: HTMLMediaElement | null,
-      props: ComponentProps
-    ) {
+    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;
@@ -60,17 +51,17 @@ const useMediaStateOwner = (
 };
 
 const DefaultVideoComponent: ElementType<
-  Omit<
-    DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>,
-    'ref'
-  > & { ref: Ref<any> }
+  Omit<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'ref'> & { ref: Ref<any> }
 > = ({ children, ref, ...props }) => {
   const { updateMediaElement } = useMediaStateOwner(ref, createMediaStateOwner);
   return (
-    <video {...props} ref={(mediaEl) => {
+    <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>
   );
@@ -123,4 +114,4 @@ export const Video = ({
 // MediaElementVideo export (same as Video but for backwards compatibility)
 export const MediaElementVideo = Video;
 
-export default Video;
\ No newline at end of file
+export default Video;
diff --git a/packages/react/react/src/components/VolumeRange.tsx b/packages/react/react/src/components/VolumeRange.tsx
index 809bc0bc..041b5edb 100644
--- a/packages/react/react/src/components/VolumeRange.tsx
+++ b/packages/react/react/src/components/VolumeRange.tsx
@@ -1,23 +1,18 @@
-import {
-  shallowEqual,
-  useMediaSelector,
-  useMediaStore,
-} from '@vjs-10/react-media-store';
 import * as React from 'react';
-import { toConnectedComponent } from '../utils/component-factory';
+
 import { volumeRangeStateDefinition } from '@vjs-10/media-store';
+import { shallowEqual, useMediaSelector, useMediaStore } from '@vjs-10/react-media-store';
+
+import { toConnectedComponent } from '../utils/component-factory';
 
 export const useVolumeRangeState = (_props: any) => {
   const mediaStore = useMediaStore();
   /** @TODO Fix type issues with hooks (CJP) */
-  const mediaState = useMediaSelector(
-    volumeRangeStateDefinition.stateTransform,
-    shallowEqual,
-  );
+  const mediaState = useMediaSelector(volumeRangeStateDefinition.stateTransform, shallowEqual);
 
   const methods = React.useMemo(
     () => volumeRangeStateDefinition.createRequestMethods(mediaStore.dispatch),
-    [mediaStore],
+    [mediaStore]
   );
 
   return {
@@ -33,7 +28,7 @@ export type VolumeRangeState = ReturnType<useVolumeRangeState>;
 
 export const useVolumeRangeProps = (
   props: React.PropsWithChildren<{ [k: string]: any }>,
-  state: ReturnType<typeof useVolumeRangeState>,
+  state: ReturnType<typeof useVolumeRangeState>
 ) => {
   const displayValue = state.muted ? 0 : state.volume;
 
@@ -65,10 +60,7 @@ type VolumeRangeProps = ReturnType<useVolumeRangeProps>;
  * @TODO This is just a simple render function to demonstrate functionality.
  * A full implementation will need to implement a "compound component" architecture. (CJP)
  **/
-export const renderVolumeRange = (
-  props: VolumeRangeProps,
-  state: VolumeRangeState,
-) => {
+export const renderVolumeRange = (props: VolumeRangeProps, state: VolumeRangeState) => {
   return (
     <input
       {...props}
@@ -90,6 +82,6 @@ export const VolumeRange = toConnectedComponent(
   useVolumeRangeState,
   useVolumeRangeProps,
   renderVolumeRange,
-  'VolumeRange',
+  'VolumeRange'
 );
 export default VolumeRange;
diff --git a/packages/react/react/src/index.tsx b/packages/react/react/src/index.tsx
index ac128710..1a01cd73 100644
--- a/packages/react/react/src/index.tsx
+++ b/packages/react/react/src/index.tsx
@@ -11,4 +11,4 @@ export { MuteButton } from './components/MuteButton';
 export { VolumeRange } from './components/VolumeRange';
 export { FullscreenButton } from './components/FullscreenButton';
 export { DurationDisplay } from './components/DurationDisplay';
-export { CurrentTimeDisplay } from './components/CurrentTimeDisplay';
\ No newline at end of file
+export { CurrentTimeDisplay } from './components/CurrentTimeDisplay';
diff --git a/packages/react/react/src/skins/MediaSkinDefault.tsx b/packages/react/react/src/skins/MediaSkinDefault.tsx
index dbe80b25..31936f90 100644
--- a/packages/react/react/src/skins/MediaSkinDefault.tsx
+++ b/packages/react/react/src/skins/MediaSkinDefault.tsx
@@ -1,26 +1,27 @@
+import styles from './styles';
+
 import * as React from 'react';
-import { PauseIcon, PlayIcon } from '@vjs-10/react-icons';
-import PlayButton from '../components/PlayButton';
-import MuteButton from '../components/MuteButton';
-// import { VolumeRange } from '../components/VolumeRange';
-import { TimeRange } from '../components/TimeRange';
-import { FullscreenButton } from '../components/FullscreenButton';
-import { DurationDisplay } from '../components/DurationDisplay';
-import { CurrentTimeDisplay } from '../components/CurrentTimeDisplay';
-import { MediaContainer } from '../components/MediaContainer';
+
 import {
+  FullscreenEnterIcon,
+  FullscreenExitIcon,
+  PauseIcon,
+  PlayIcon,
   VolumeHighIcon,
   VolumeLowIcon,
   VolumeOffIcon,
-  FullscreenEnterIcon,
-  FullscreenExitIcon,
 } from '@vjs-10/react-icons';
 
-import styles from './styles';
+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 { VolumeRange } from '../components/VolumeRange';
+import { TimeRange } from '../components/TimeRange';
 
-export const MediaSkinDefault: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
+export const MediaSkinDefault: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return (
     <MediaContainer className={styles.MediaContainer}>
       {children}
diff --git a/packages/react/react/src/skins/styles.module.css b/packages/react/react/src/skins/styles.module.css
index ce4e645d..4f0a0a6c 100644
--- a/packages/react/react/src/skins/styles.module.css
+++ b/packages/react/react/src/skins/styles.module.css
@@ -115,29 +115,29 @@
   position: relative;
   min-width: 100px;
   width: 100%;
-  padding-block: .75rem;
-  margin: 0 .5rem;
+  padding-block: 0.75rem;
+  margin: 0 0.5rem;
 }
 
 .TimeRangeTrack {
   position: relative;
   width: 100%;
-  height: .375rem;
+  height: 0.375rem;
   background-color: #e0e0e0;
-  border-radius: .25rem;
+  border-radius: 0.25rem;
   overflow: hidden;
 }
 
 .TimeRangeThumb {
-  width: .75rem;
-  height: .75rem;
+  width: 0.75rem;
+  height: 0.75rem;
   background-color: #fff;
   border-radius: 50%;
   pointer-events: none;
 }
 
 .TimeRangePointer {
-  background-color: rgba(255, 255, 255, .5);
+  background-color: rgba(255, 255, 255, 0.5);
   pointer-events: none;
 }
 
diff --git a/packages/react/react/src/skins/styles.ts b/packages/react/react/src/skins/styles.ts
index dc02d180..e4675b0c 100644
--- a/packages/react/react/src/skins/styles.ts
+++ b/packages/react/react/src/skins/styles.ts
@@ -14,14 +14,14 @@ const styles = {
     'after:absolute after:inset-0 after:ring-black/10 after:ring-1 dark:after:ring-black/40 after:ring-inset after:z-10 after:pointer-events-none after:rounded-[inherit]',
     'before:absolute before:inset-px before:rounded-[inherit] before:ring-white/15 before:ring-1 before:ring-inset before:z-10 before:pointer-events-none',
     // Ensure the nested video inherits the radius.
-    '[&_video]:rounded-[inherit] [&_video]:w-full [&_video]:h-auto',
+    '[&_video]:rounded-[inherit] [&_video]:w-full [&_video]:h-auto'
   ),
   Overlay: cn(
     'opacity-0 delay-500 rounded-[inherit] absolute inset-0 pointer-events-none z-10 bg-gradient-to-t from-black/50 via-black/20 to-transparent transition-opacity backdrop-saturate-150 backdrop-brightness-90',
     // Hide when playing (for now).
     // This is crude temporary logic, we’ll improve it later I guess with a [data-show-controls] attribute or something?
     'has-[+.controls_[data-paused]]:opacity-100 has-[+.controls_[data-paused]]:delay-0',
-    'group-hover/root:opacity-100 group-hover/root:delay-0',
+    'group-hover/root:opacity-100 group-hover/root:delay-0'
   ),
   Controls: cn(
     'controls', // Temporary className hook for above logic. Can be removed once have a proper selector as above.
@@ -40,7 +40,7 @@ const styles = {
     // Reduced transparency for users with preference
     'reduced-transparency:bg-black/70 reduced-transparency:ring-black reduced-transparency:after:ring-white/20',
     // High contrast mode
-    'contrast-more:bg-black/90 contrast-more:ring-black contrast-more:after:ring-white/20',
+    'contrast-more:bg-black/90 contrast-more:ring-black contrast-more:after:ring-white/20'
   ),
   Button: cn(
     'group/button cursor-pointer relative shrink-0 transition select-none p-2 rounded-full',
@@ -57,15 +57,15 @@ const styles = {
     // Expanded state
     'aria-expanded:bg-white/10 aria-expanded:text-white',
     // Pressed state
-    'active:scale-95',
+    'active:scale-95'
   ),
   IconButton: cn(
     'grid [&_svg]:[grid-area:1/1]',
-    '[&_svg]:shrink-0 [&_svg]:transition-opacity [&_svg]:duration-300 [&_svg]:ease-out [&_svg]:drop-shadow-[0_1px_0_var(--tw-shadow-color)] [&_svg]:shadow-black/20',
+    '[&_svg]:shrink-0 [&_svg]:transition-opacity [&_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',
+    '[&_.play-icon]:opacity-0 [&[data-paused]_.play-icon]:opacity-100'
   ),
   PlayIcon: cn('play-icon'),
   PauseIcon: cn('pause-icon'),
@@ -74,7 +74,7 @@ const styles = {
     '[&[data-volume-level="high"]_.volume-high-icon]:opacity-100',
     '[&[data-volume-level="medium"]_.volume-low-icon]:opacity-100',
     '[&[data-volume-level="low"]_.volume-low-icon]:opacity-100',
-    '[&[data-volume-level="off"]_.volume-off-icon]:opacity-100',
+    '[&[data-volume-level="off"]_.volume-off-icon]:opacity-100'
   ),
   VolumeHighIcon: cn('volume-high-icon'),
   VolumeLowIcon: cn('volume-low-icon'),
@@ -82,24 +82,22 @@ const styles = {
   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',
+    '[&_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',
+    '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',
+    'group-hover/button:[&_.arrow-2]:translate-0'
   ),
   TimeControls: cn('flex-1 flex items-center gap-3 px-1.5'),
-  TimeDisplay: cn(
-    'tabular-nums text-shadow-2xs shadow-black/50'
-  ),
+  TimeDisplay: cn('tabular-nums text-shadow-2xs shadow-black/50'),
   TimeRangeRoot: cn('flex h-5 items-center flex-1 group/slider relative'),
   TimeRangeTrack: cn('h-1 w-full relative select-none rounded-full bg-white/20 ring-1 ring-black/5'),
   TimeRangeProgress: cn('bg-white rounded-[inherit]'),
@@ -110,8 +108,8 @@ const styles = {
     'opacity-0 transition-[opacity,height,width] ease-in-out',
     '-outline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500',
     'group-hover/slider:opacity-100 group-focus-within/slider:opacity-100',
-    'size-2.5 active:size-3 group-active/slider:size-3',
-  )
-}
+    'size-2.5 active:size-3 group-active/slider:size-3'
+  ),
+};
 
-export default styles;
\ No newline at end of file
+export default styles;
diff --git a/packages/react/react/src/types.d.ts b/packages/react/react/src/types.d.ts
index 1336d3bd..3d673e2e 100644
--- a/packages/react/react/src/types.d.ts
+++ b/packages/react/react/src/types.d.ts
@@ -1,4 +1,4 @@
 declare module '*.module.css' {
   const classes: { [key: string]: string };
   export default classes;
-}
\ No newline at end of file
+}
diff --git a/packages/react/react/src/utils/component-factory.tsx b/packages/react/react/src/utils/component-factory.tsx
index 18aee15d..c2832e58 100644
--- a/packages/react/react/src/utils/component-factory.tsx
+++ b/packages/react/react/src/utils/component-factory.tsx
@@ -10,10 +10,7 @@ export type PropsHookFn<TProps = any, TState = any, TResultProps = any> = (
   state: TState
 ) => TResultProps;
 
-export type RenderFn<TProps = any, TState = any> = (
-  props: TProps,
-  state: TState
-) => React.ReactElement;
+export type RenderFn<TProps = any, TState = any> = (props: TProps, state: TState) => React.ReactElement;
 
 const Context = React.createContext<any | null>(null);
 
@@ -38,17 +35,10 @@ export const toConnectedComponent = <
   defaultRender: TRenderFn,
   displayName: string
 ) => {
-  const ConnectedComponent = ({
-    render = defaultRender,
-    ...props
-  }: TProps & { render?: TRenderFn }) => {
+  const ConnectedComponent = ({ render = defaultRender, ...props }: TProps & { render?: TRenderFn }) => {
     const connectedState = useStateHook(props as TProps);
     const connectedProps = usePropsHook(props as TProps, connectedState);
-    return (
-      <Context.Provider value={connectedState}>
-        {render(connectedProps, connectedState)}
-      </Context.Provider>
-    );
+    return <Context.Provider value={connectedState}>{render(connectedProps, connectedState)}</Context.Provider>;
   };
 
   ConnectedComponent.displayName = displayName;
@@ -58,10 +48,9 @@ export const toConnectedComponent = <
 /**
  * Type helper to infer the component type from the factory
  */
-export type ConnectedComponent<
-  TProps extends Record<string, any>,
-  TRenderFn extends RenderFn<any, any>,
-> = React.FC<TProps & { render?: TRenderFn }>;
+export type ConnectedComponent<TProps extends Record<string, any>, TRenderFn extends RenderFn<any, any>> = React.FC<
+  TProps & { render?: TRenderFn }
+>;
 
 /**
  * Factory function to create context-based components that don't use toConnectedComponent
@@ -81,10 +70,7 @@ export const toContextComponent = <
   defaultRender: TRenderFn,
   displayName: string
 ) => {
-  const ContextComponent = ({
-    render = defaultRender,
-    ...props
-  }: TProps & { render?: TRenderFn }) => {
+  const ContextComponent = ({ render = defaultRender, ...props }: TProps & { render?: TRenderFn }) => {
     const context = React.useContext(Context);
     const contextProps = usePropsHook(props as TProps, context);
     return render(contextProps, context);
diff --git a/packages/react/react/tsconfig.build.json b/packages/react/react/tsconfig.build.json
index 698a5b71..6c809265 100644
--- a/packages/react/react/tsconfig.build.json
+++ b/packages/react/react/tsconfig.build.json
@@ -10,4 +10,4 @@
     "incremental": false
   },
   "exclude": ["dist", "node_modules"]
-}
\ No newline at end of file
+}
diff --git a/packages/react/react/tsconfig.json b/packages/react/react/tsconfig.json
index 5f20f019..b2717a5c 100644
--- a/packages/react/react/tsconfig.json
+++ b/packages/react/react/tsconfig.json
@@ -7,4 +7,4 @@
   },
   "include": ["src/**/*"],
   "exclude": ["dist", "node_modules"]
-}
\ No newline at end of file
+}
diff --git a/tsconfig.base.json b/tsconfig.base.json
index c0b6bf43..652bb62e 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -28,10 +28,5 @@
     "isolatedModules": true,
     "verbatimModuleSyntax": false
   },
-  "exclude": [
-    "node_modules",
-    "dist",
-    "build",
-    "coverage"
-  ]
-}
\ No newline at end of file
+  "exclude": ["node_modules", "dist", "build", "coverage"]
+}
diff --git a/tsconfig.json b/tsconfig.json
index 34f0fa3c..0c69260d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -39,4 +39,4 @@
   ],
   "files": [],
   "include": []
-}
\ No newline at end of file
+}