diff --git a/.vscode/settings.json b/.vscode/settings.json
index 348680a7..0e60dd2f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,9 +1,9 @@
 {
   // At some point, we'll watch to flick this on and uncomment lines 5 & 6 below.
-  "eslint.enable": false,
+  "eslint.enable": true,
   // Disable the default formatter, use eslint instead
-  // "prettier.enable": false,
-  // "editor.formatOnSave": false,
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
 
   // Auto fix
   "editor.codeActionsOnSave": {
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 366e1556..881e1594 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -17,7 +17,9 @@ export default antfu({
     indent: 2,
     quotes: 'single',
   },
-  ignores: ['node_modules', 'dist'],
+  // Many are ignored by default.
+  // https://github.com/antfu/eslint-config/blob/main/src/globs.ts#L56
+  ignores: ['**/.astro/'],
   plugins: {
     'jsx-a11y': jsxA11y,
   },
diff --git a/examples/html-demo/package.json b/examples/html-demo/package.json
index 94391b42..92c9f439 100644
--- a/examples/html-demo/package.json
+++ b/examples/html-demo/package.json
@@ -1,9 +1,9 @@
 {
   "name": "html-demo",
-  "version": "1.0.0",
-  "description": "HTML example for Video.js 10",
-  "private": true,
   "type": "module",
+  "version": "1.0.0",
+  "private": true,
+  "description": "HTML example for Video.js 10",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
diff --git a/examples/react-demo/package.json b/examples/react-demo/package.json
index 7a38dee5..643122a9 100644
--- a/examples/react-demo/package.json
+++ b/examples/react-demo/package.json
@@ -1,9 +1,9 @@
 {
   "name": "react-demo",
-  "version": "1.0.0",
-  "description": "React example for Video.js 10",
-  "private": true,
   "type": "module",
+  "version": "1.0.0",
+  "private": true,
+  "description": "React example for Video.js 10",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
diff --git a/examples/react-demo/src/App.tsx b/examples/react-demo/src/App.tsx
index 23c503a1..ec0e4c8a 100644
--- a/examples/react-demo/src/App.tsx
+++ b/examples/react-demo/src/App.tsx
@@ -1,7 +1,8 @@
-import { MediaProvider, MediaSkinDefault, MediaSkinToasted, Video } from '@vjs-10/react';
+import type { ChangeEventHandler } from 'react';
 
+import { MediaProvider, MediaSkinDefault, MediaSkinToasted, Video } from '@vjs-10/react';
+import { useCallback, useMemo, useState } from 'react';
 import './globals.css';
-import { useCallback, useMemo, useState, type ChangeEventHandler } from 'react';
 
 const skins = [{
   key: 'default',
@@ -18,19 +19,19 @@ type SkinKey = (typeof skins)[number]['key'];
 const mediaSources = [{
   key: '1',
   name: 'Mux 1',
-  value: 'https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8'
+  value: 'https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8',
 }, {
   key: '2',
   name: 'Mux 2',
-  value: 'https://stream.mux.com/a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M.m3u8'
+  value: 'https://stream.mux.com/a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M.m3u8',
 }, {
   key: '3',
   name: 'Mux 3',
-  value: 'https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4'
+  value: 'https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4',
 }, {
   key: '4',
   name: 'Mux 4',
-  value: 'https://stream.mux.com/lyrKpPcGfqyzeI00jZAfW6MvP6GNPrkML.m3u8'
+  value: 'https://stream.mux.com/lyrKpPcGfqyzeI00jZAfW6MvP6GNPrkML.m3u8',
 }] as const;
 
 type MediaSourceKey = (typeof mediaSources)[number]['key'];
@@ -103,21 +104,21 @@ export default function App(): JSX.Element {
   return (
     <>
       <header className="fixed top-0 inset-x-0 bg-white dark:bg-stone-800 shadow shadow-black/10 after:h-px after:absolute after:inset-x-0 after:top-full after:bg-black/5">
-        <div className='grid grid-cols-5 h-2' aria-hidden="true">
-          <div className='bg-yellow-500'></div>
-          <div className='bg-orange-500'></div>
-          <div className='bg-red-500'></div>
-          <div className='bg-purple-500'></div>
-          <div className='bg-blue-500'></div>
+        <div className="grid grid-cols-5 h-2" aria-hidden="true">
+          <div className="bg-yellow-500"></div>
+          <div className="bg-orange-500"></div>
+          <div className="bg-red-500"></div>
+          <div className="bg-purple-500"></div>
+          <div className="bg-blue-500"></div>
         </div>
 
         <div className="py-3 px-6 flex items-center justify-between">
           <div className="space-y-1">
             <h1 className="font-medium text-lg tracking-tight leading-tight dark:text-white">Playground</h1>
-            <small className='block text-stone-400 text-sm'>Test out the various skins for Video.js.</small>
+            <small className="block text-stone-400 text-sm">Test out the various skins for Video.js.</small>
           </div>
 
-          <nav className='flex items-center gap-3'>
+          <nav className="flex items-center gap-3">
             <select value={mediaSourceKey} onChange={onChangeMediaSource}>
               {mediaSources.map(({ key, name }) => (
                 <option key={key} value={key}>
@@ -137,7 +138,7 @@ export default function App(): JSX.Element {
       </header>
 
       <main className="min-h-screen flex justify-center items-center bg-radial bg-size-[16px_16px] from-stone-300 dark:from-stone-700 via-10% via-transparent to-transparent">
-        <div className='w-full max-w-4xl mx-auto p-6'>
+        <div className="w-full max-w-4xl mx-auto p-6">
           <MediaProvider key={key}>
             <Skin className={skinClassName}>
               {/* @ts-ignore -- types are incorrect */}
@@ -149,4 +150,3 @@ export default function App(): JSX.Element {
     </>
   );
 }
-
diff --git a/examples/react-demo/src/globals.css b/examples/react-demo/src/globals.css
index ca5200df..18f9a175 100644
--- a/examples/react-demo/src/globals.css
+++ b/examples/react-demo/src/globals.css
@@ -4,7 +4,9 @@
 @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';
 }
 
 .body {
diff --git a/examples/react-demo/tsconfig.json b/examples/react-demo/tsconfig.json
index 85e78073..40aa8ebc 100644
--- a/examples/react-demo/tsconfig.json
+++ b/examples/react-demo/tsconfig.json
@@ -1,9 +1,9 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "baseUrl": ".",
     "jsx": "react-jsx",
-    "jsxImportSource": "react"
+    "jsxImportSource": "react",
+    "baseUrl": "."
   },
   "include": ["src"]
 }
diff --git a/examples/react-demo/vite.config.ts b/examples/react-demo/vite.config.ts
index 6aa7b8a7..faef47bd 100644
--- a/examples/react-demo/vite.config.ts
+++ b/examples/react-demo/vite.config.ts
@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite';
-
 import tailwindcss from '@tailwindcss/vite';
+
 import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config
 export default defineConfig({
diff --git a/package.json b/package.json
index 0ef40686..5dc70651 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "npm": ">=10.9.3"
   },
   "scripts": {
-    "//prepare": "simple-git-hooks",
+    "prepare": "simple-git-hooks",
     "build:libs": "turbo run build --filter=./packages/**",
     "build:website": "turbo run build --filter=website",
     "build": "turbo run build",
@@ -27,6 +27,7 @@
     "format:check": "prettier . --check --log-level warn --cache",
     "format": "prettier . --write --log-level warn --cache",
     "lint": "eslint . --cache",
+    "lint:fix": "eslint . --fix --cache",
     "test": "turbo run test",
     "typecheck": "pnpm run generate:icons && tsc --build --noEmit"
   },
@@ -50,10 +51,10 @@
     "turbo": "^2.5.8",
     "typescript": "^5.9.2"
   },
-  "//simple-git-hooks": {
+  "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"
   },
-  "//lint-staged": {
+  "lint-staged": {
     "*": "eslint --fix"
   }
 }
diff --git a/packages/core/core/package.json b/packages/core/core/package.json
index 7f6baf26..356990e3 100644
--- a/packages/core/core/package.json
+++ b/packages/core/core/package.json
@@ -3,15 +3,24 @@
   "type": "module",
   "version": "0.1.0",
   "description": "Core components and utilities for Video.js",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "keywords": [
+    "core",
+    "components",
+    "media",
+    "player",
+    "ui",
+    "time-range"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     }
   },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -22,15 +31,6 @@
     "test": "echo \"No tests yet\"",
     "clean": "rm -rf dist"
   },
-  "keywords": [
-    "core",
-    "components",
-    "media",
-    "player",
-    "ui",
-    "time-range"
-  ],
-  "license": "Apache-2.0",
   "dependencies": {
     "nanostores": "^1.0.1"
   },
diff --git a/packages/core/core/src/components/range.ts b/packages/core/core/src/components/range.ts
index 0ef60eef..4f577615 100644
--- a/packages/core/core/src/components/range.ts
+++ b/packages/core/core/src/components/range.ts
@@ -92,7 +92,7 @@ export class Range {
       evt.clientX,
       evt.clientY,
       { x: rect.left, y: rect.bottom },
-      { x: rect.right, y: rect.top }
+      { x: rect.right, y: rect.top },
     );
   }
 
@@ -122,7 +122,7 @@ export class Range {
   }
 }
 
-export type Point = { x: number; y: number };
+export interface Point { x: number; y: number }
 
 /**
  * Get progress ratio of a point on a line segment.
@@ -144,5 +144,5 @@ export function getPointProgressOnLine(x: number, y: number, p1: Point, p2: Poin
 }
 
 export function distance(p1: Point, p2: Point): number {
-  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+  return Math.sqrt((p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2);
 }
diff --git a/packages/core/core/src/components/time-range.ts b/packages/core/core/src/components/time-range.ts
index fa901006..afbbfde5 100644
--- a/packages/core/core/src/components/time-range.ts
+++ b/packages/core/core/src/components/time-range.ts
@@ -23,10 +23,12 @@ export class TimeRange extends Range {
     let _fillWidth = 0;
     if (state._dragging) {
       _fillWidth = state._pointerRatio * 100;
-    } else if (state.duration > 0) {
+    }
+    else if (state.duration > 0) {
       if (this.#seekingTime !== null && this.#oldCurrentTime === state.currentTime) {
         _fillWidth = (this.#seekingTime / state.duration) * 100;
-      } else {
+      }
+      else {
         _fillWidth = (state.currentTime / state.duration) * 100;
         this.#seekingTime = null;
       }
@@ -90,8 +92,8 @@ export class TimeRange extends Range {
   }
 }
 
-const formatTime = (time: number): string => {
+function formatTime(time: number): string {
   const minutes = Math.floor(time / 60);
   const seconds = Math.floor(time % 60);
   return `${minutes}:${seconds.toString().padStart(2, '0')}`;
-};
+}
diff --git a/packages/core/core/src/components/volume-range.ts b/packages/core/core/src/components/volume-range.ts
index 38fda567..e853926b 100644
--- a/packages/core/core/src/components/volume-range.ts
+++ b/packages/core/core/src/components/volume-range.ts
@@ -19,7 +19,8 @@ export class VolumeRange extends Range {
     let _fillWidth = 0;
     if (state._dragging) {
       _fillWidth = state._pointerRatio * 100;
-    } else {
+    }
+    else {
       _fillWidth = state.muted ? 0 : (state.volume || 0) * 100;
     }
 
@@ -74,6 +75,6 @@ export class VolumeRange extends Range {
   }
 }
 
-const formatVolume = (volume: number): string => {
+function formatVolume(volume: number): string {
   return `${Math.round(volume * 100)}%`;
-};
+}
diff --git a/packages/core/core/src/utils/state.ts b/packages/core/core/src/utils/state.ts
index b030b9f5..d72bec3d 100644
--- a/packages/core/core/src/utils/state.ts
+++ b/packages/core/core/src/utils/state.ts
@@ -3,7 +3,7 @@
  * so we may treat them specifically as unequal if they are not a) both arrays
  * or b) don't contain the same (shallowly compared) elements.
  */
-export const shallowEqual = (objA: any, objB: any): boolean => {
+export function shallowEqual(objA: any, objB: any): boolean {
   // Using Object.is as a first pass, as it covers a lot of the "simple" cases that are
   // more complex than strict equality and is a built-in. For discussion, see, e.g.:
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#description
@@ -35,12 +35,12 @@ export const shallowEqual = (objA: any, objB: any): boolean => {
   for (let i = 0; i < keysA.length; i++) {
     // NOTE: Since we've already guaranteed the keys list lengths are the same, we can safely cast to string here (CJP)
     if (
-      !globalThis.hasOwnProperty.call(objB, keysA[i] as string) ||
-      !Object.is(objA[keysA[i] as string], objB[keysA[i] as string])
+      !globalThis.hasOwnProperty.call(objB, keysA[i] as string)
+      || !Object.is(objA[keysA[i] as string], objB[keysA[i] as string])
     ) {
       return false;
     }
   }
 
   return true;
-};
+}
diff --git a/packages/core/icons/assets/play.svg b/packages/core/icons/assets/play.svg
index d946a585..a333b956 100644
--- a/packages/core/icons/assets/play.svg
+++ b/packages/core/icons/assets/play.svg
@@ -1,4 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
   <path
-    d="M15.1,7.478L5.608,2.222c-.553-.306-1.206-.297-1.749,.023-.538,.317-.859,.877-.859,1.499V14.256c0,.622,.321,1.182,.859,1.499,.279,.164,.586,.247,.895,.247,.293,0,.586-.075,.854-.223l9.491-5.256c.556-.307,.901-.891,.901-1.522s-.345-1.215-.9-1.522Z" fill="currentColor"/>
+    d="M15.1,7.478L5.608,2.222c-.553-.306-1.206-.297-1.749,.023-.538,.317-.859,.877-.859,1.499V14.256c0,.622,.321,1.182,.859,1.499,.279,.164,.586,.247,.895,.247,.293,0,.586-.075,.854-.223l9.491-5.256c.556-.307,.901-.891,.901-1.522s-.345-1.215-.9-1.522Z"
+    fill="currentColor"
+  />
 </svg>
diff --git a/packages/core/icons/assets/volume-high.svg b/packages/core/icons/assets/volume-high.svg
index cf52ac19..f16ae1bf 100755
--- a/packages/core/icons/assets/volume-high.svg
+++ b/packages/core/icons/assets/volume-high.svg
@@ -1,6 +1,10 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
   <g fill="currentColor">
-    <path d="M15.5999996,3.3 C15.1999996,2.9 14.5999996,2.9 14.1999996,3.3 C13.7999996,3.7 13.7999996,4.3 14.1999996,4.7 C15.3999996,5.9 15.9999996,7.4 15.9999996,9 C15.9999996,10.6 15.3999996,12.1 14.1999996,13.3 C13.7999996,13.7 13.7999996,14.3 14.1999996,14.7 C14.3999996,14.9 14.6999996,15 14.8999996,15 C15.1999996,15 15.3999996,14.9 15.5999996,14.7 C17.0999996,13.2 17.9999996,11.2 17.9999996,9 C17.9999996,6.8 17.0999996,4.8 15.5999996,3.3 L15.5999996,3.3 Z"/>
-    <path d="M11.2819745,5.28197449 C10.9060085,5.65794047 10.9060085,6.22188944 11.2819745,6.59785542 C12.0171538,7.33303477 12.2772954,8.05605449 12.2772954,9 C12.2772954,9.93588462 11.851678,10.9172014 11.2819745,11.4869049 C10.9060085,11.8628709 10.9060085,12.4268199 11.2819745,12.8027859 C11.4271642,12.9479755 11.9176724,13.0649528 12.2998149,12.9592565 C12.4124479,12.9281035 12.5156669,12.8776063 12.5978555,12.8027859 C13.773371,11.732654 14.1311161,10.1597914 14.1312524,9 C14.1312524,8.8299555 14.1286311,8.66015647 14.119665,8.4897429 C14.0674781,7.49784946 13.8010171,6.48513613 12.5978554,5.28197449 C12.2218894,4.9060085 11.6579405,4.9060085 11.2819745,5.28197449 Z M3.78571429,6.00820648 L0.714285714,6.00820648 C0.285714286,6.00820648 0,6.30901277 0,6.76022222 L0,11.2723167 C0,11.7235261 0.285714286,12.0243324 0.714285714,12.0243324 L3.78571429,12.0243324 L7.85714286,15.8819922 C8.35714286,16.1827985 9,15.8819922 9,15.2803796 L9,2.75215925 C9,2.15054666 8.35714286,1.77453879 7.85714286,2.15054666 L3.78571429,6.00820648 Z"/>
+    <path
+      d="M15.5999996,3.3 C15.1999996,2.9 14.5999996,2.9 14.1999996,3.3 C13.7999996,3.7 13.7999996,4.3 14.1999996,4.7 C15.3999996,5.9 15.9999996,7.4 15.9999996,9 C15.9999996,10.6 15.3999996,12.1 14.1999996,13.3 C13.7999996,13.7 13.7999996,14.3 14.1999996,14.7 C14.3999996,14.9 14.6999996,15 14.8999996,15 C15.1999996,15 15.3999996,14.9 15.5999996,14.7 C17.0999996,13.2 17.9999996,11.2 17.9999996,9 C17.9999996,6.8 17.0999996,4.8 15.5999996,3.3 L15.5999996,3.3 Z"
+    />
+    <path
+      d="M11.2819745,5.28197449 C10.9060085,5.65794047 10.9060085,6.22188944 11.2819745,6.59785542 C12.0171538,7.33303477 12.2772954,8.05605449 12.2772954,9 C12.2772954,9.93588462 11.851678,10.9172014 11.2819745,11.4869049 C10.9060085,11.8628709 10.9060085,12.4268199 11.2819745,12.8027859 C11.4271642,12.9479755 11.9176724,13.0649528 12.2998149,12.9592565 C12.4124479,12.9281035 12.5156669,12.8776063 12.5978555,12.8027859 C13.773371,11.732654 14.1311161,10.1597914 14.1312524,9 C14.1312524,8.8299555 14.1286311,8.66015647 14.119665,8.4897429 C14.0674781,7.49784946 13.8010171,6.48513613 12.5978554,5.28197449 C12.2218894,4.9060085 11.6579405,4.9060085 11.2819745,5.28197449 Z M3.78571429,6.00820648 L0.714285714,6.00820648 C0.285714286,6.00820648 0,6.30901277 0,6.76022222 L0,11.2723167 C0,11.7235261 0.285714286,12.0243324 0.714285714,12.0243324 L3.78571429,12.0243324 L7.85714286,15.8819922 C8.35714286,16.1827985 9,15.8819922 9,15.2803796 L9,2.75215925 C9,2.15054666 8.35714286,1.77453879 7.85714286,2.15054666 L3.78571429,6.00820648 Z"
+    />
   </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/packages/core/icons/assets/volume-low.svg b/packages/core/icons/assets/volume-low.svg
index a3fb79ce..a5477269 100644
--- a/packages/core/icons/assets/volume-low.svg
+++ b/packages/core/icons/assets/volume-low.svg
@@ -1,3 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-  <path d="M11.2819745 5.28197449C10.9060085 5.65794047 10.9060085 6.22188944 11.2819745 6.59785542 12.0171538 7.33303477 12.2772954 8.05605449 12.2772954 9 12.2772954 9.93588462 11.851678 10.9172014 11.2819745 11.4869049 10.9060085 11.8628709 10.9060085 12.4268199 11.2819745 12.8027859 11.4271642 12.9479755 11.9176724 13.0649528 12.2998149 12.9592565 12.4124479 12.9281035 12.5156669 12.8776063 12.5978555 12.8027859 13.773371 11.732654 14.1311161 10.1597914 14.1312524 9 14.1312524 8.8299555 14.1286311 8.66015647 14.119665 8.4897429 14.0674781 7.49784946 13.8010171 6.48513613 12.5978554 5.28197449 12.2218894 4.9060085 11.6579405 4.9060085 11.2819745 5.28197449ZM3.78571429 6.00820648.714285714 6.00820648C.285714286 6.00820648 0 6.30901277 0 6.76022222L0 11.2723167C0 11.7235261.285714286 12.0243324.714285714 12.0243324L3.78571429 12.0243324 7.85714286 15.8819922C8.35714286 16.1827985 9 15.8819922 9 15.2803796L9 2.75215925C9 2.15054666 8.35714286 1.77453879 7.85714286 2.15054666L3.78571429 6.00820648Z" fill="currentColor" />
-</svg>
\ No newline at end of file
+  <path
+    d="M11.2819745 5.28197449C10.9060085 5.65794047 10.9060085 6.22188944 11.2819745 6.59785542 12.0171538 7.33303477 12.2772954 8.05605449 12.2772954 9 12.2772954 9.93588462 11.851678 10.9172014 11.2819745 11.4869049 10.9060085 11.8628709 10.9060085 12.4268199 11.2819745 12.8027859 11.4271642 12.9479755 11.9176724 13.0649528 12.2998149 12.9592565 12.4124479 12.9281035 12.5156669 12.8776063 12.5978555 12.8027859 13.773371 11.732654 14.1311161 10.1597914 14.1312524 9 14.1312524 8.8299555 14.1286311 8.66015647 14.119665 8.4897429 14.0674781 7.49784946 13.8010171 6.48513613 12.5978554 5.28197449 12.2218894 4.9060085 11.6579405 4.9060085 11.2819745 5.28197449ZM3.78571429 6.00820648.714285714 6.00820648C.285714286 6.00820648 0 6.30901277 0 6.76022222L0 11.2723167C0 11.7235261.285714286 12.0243324.714285714 12.0243324L3.78571429 12.0243324 7.85714286 15.8819922C8.35714286 16.1827985 9 15.8819922 9 15.2803796L9 2.75215925C9 2.15054666 8.35714286 1.77453879 7.85714286 2.15054666L3.78571429 6.00820648Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/packages/core/icons/assets/volume-off.svg b/packages/core/icons/assets/volume-off.svg
index f652de6f..cd794438 100644
--- a/packages/core/icons/assets/volume-off.svg
+++ b/packages/core/icons/assets/volume-off.svg
@@ -1,3 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-  <path d="M12.7535534 12.1464466 14.5 10.4 14.5 10.4 16.2464466 12.1464466C16.4417088 12.3417088 16.7582912 12.3417088 16.9535534 12.1464466L17.6464466 11.4535534C17.8417088 11.2582912 17.8417088 10.9417088 17.6464466 10.7464466L15.9 9 15.9 9 17.6464466 7.25355339C17.8417088 7.05829124 17.8417088 6.74170876 17.6464466 6.54644661L16.9535534 5.85355339C16.7582912 5.65829124 16.4417088 5.65829124 16.2464466 5.85355339L14.5 7.6 14.5 7.6 12.7535534 5.85355339C12.5582912 5.65829124 12.2417088 5.65829124 12.0464466 5.85355339L11.3535534 6.54644661C11.1582912 6.74170876 11.1582912 7.05829124 11.3535534 7.25355339L13.1 9 13.1 9 11.3535534 10.7464466C11.1582912 10.9417088 11.1582912 11.2582912 11.3535534 11.4535534L12.0464466 12.1464466C12.2417088 12.3417088 12.5582912 12.3417088 12.7535534 12.1464466ZM3.78571429 6.00820648.714285714 6.00820648C.285714286 6.00820648 0 6.30901277 0 6.76022222L0 11.2723167C0 11.7235261.285714286 12.0243324.714285714 12.0243324L3.78571429 12.0243324 7.85714286 15.8819922C8.35714286 16.1827985 9 15.8819922 9 15.2803796L9 2.75215925C9 2.15054666 8.35714286 1.77453879 7.85714286 2.15054666L3.78571429 6.00820648Z" fill="currentColor"/>
-</svg>
\ No newline at end of file
+  <path
+    d="M12.7535534 12.1464466 14.5 10.4 14.5 10.4 16.2464466 12.1464466C16.4417088 12.3417088 16.7582912 12.3417088 16.9535534 12.1464466L17.6464466 11.4535534C17.8417088 11.2582912 17.8417088 10.9417088 17.6464466 10.7464466L15.9 9 15.9 9 17.6464466 7.25355339C17.8417088 7.05829124 17.8417088 6.74170876 17.6464466 6.54644661L16.9535534 5.85355339C16.7582912 5.65829124 16.4417088 5.65829124 16.2464466 5.85355339L14.5 7.6 14.5 7.6 12.7535534 5.85355339C12.5582912 5.65829124 12.2417088 5.65829124 12.0464466 5.85355339L11.3535534 6.54644661C11.1582912 6.74170876 11.1582912 7.05829124 11.3535534 7.25355339L13.1 9 13.1 9 11.3535534 10.7464466C11.1582912 10.9417088 11.1582912 11.2582912 11.3535534 11.4535534L12.0464466 12.1464466C12.2417088 12.3417088 12.5582912 12.3417088 12.7535534 12.1464466ZM3.78571429 6.00820648.714285714 6.00820648C.285714286 6.00820648 0 6.30901277 0 6.76022222L0 11.2723167C0 11.7235261.285714286 12.0243324.714285714 12.0243324L3.78571429 12.0243324 7.85714286 15.8819922C8.35714286 16.1827985 9 15.8819922 9 15.2803796L9 2.75215925C9 2.15054666 8.35714286 1.77453879 7.85714286 2.15054666L3.78571429 6.00820648Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/packages/core/icons/package.json b/packages/core/icons/package.json
index 7a463cf9..37c2120c 100644
--- a/packages/core/icons/package.json
+++ b/packages/core/icons/package.json
@@ -3,15 +3,23 @@
   "type": "module",
   "version": "0.1.0",
   "description": "SVG icon library for Video.js",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "keywords": [
+    "icons",
+    "svg",
+    "media",
+    "player",
+    "ui"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     }
   },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -22,14 +30,6 @@
     "test": "echo \"No tests yet\"",
     "clean": "rm -rf dist"
   },
-  "keywords": [
-    "icons",
-    "svg",
-    "media",
-    "player",
-    "ui"
-  ],
-  "license": "Apache-2.0",
   "devDependencies": {
     "tsdown": "^0.15.4",
     "typescript": "^5.9.2"
diff --git a/packages/core/icons/src/index.ts b/packages/core/icons/src/index.ts
index 0d45b5e4..b7c9cf83 100644
--- a/packages/core/icons/src/index.ts
+++ b/packages/core/icons/src/index.ts
@@ -82,6 +82,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>`;
 }
diff --git a/packages/core/media-store/package.json b/packages/core/media-store/package.json
index ef14a33f..7fb79397 100644
--- a/packages/core/media-store/package.json
+++ b/packages/core/media-store/package.json
@@ -3,15 +3,23 @@
   "type": "module",
   "version": "0.1.0",
   "description": "Media store for tracking and managing media state.",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "keywords": [
+    "media",
+    "state",
+    "video",
+    "audio",
+    "player"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     }
   },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -22,14 +30,6 @@
     "test": "echo \"No tests yet\"",
     "clean": "rm -rf dist"
   },
-  "keywords": [
-    "media",
-    "state",
-    "video",
-    "audio",
-    "player"
-  ],
-  "license": "Apache-2.0",
   "dependencies": {
     "nanostores": "^1.0.1"
   },
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 94195c5e..92d90246 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
@@ -23,7 +23,7 @@ export const timeRangeStateDefinition: TimeRangeStateDefinition = {
     currentTime: rawState.currentTime ?? 0,
     duration: rawState.duration ?? 0,
   }),
-  createRequestMethods: (dispatch) => ({
+  createRequestMethods: dispatch => ({
     requestSeek: (time: number) => {
       dispatch({ type: 'seekrequest', detail: time });
     },
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 2783d2ca..74859307 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
@@ -25,13 +25,13 @@ export const volumeRangeStateDefinition: VolumeRangeStateDefinition = {
     muted: rawState.muted ?? false,
     volumeLevel: rawState.volumeLevel ?? 'high',
   }),
-  createRequestMethods: (dispatch) => ({
+  createRequestMethods: dispatch => ({
     /**
      * @TODO Unmuting is owned by the "request-map" in media-chrome.
      * The closest equivalent to that is the "actions" in the current architecture.
      * Should unmuting live here (even if "here" gets promoted to the state model) or "actions" or state setter?
      * Currently this is solved in the state setter (as is the corresponding unmute behavior). See state-mediators/audible for details. (CJP)
-     **/
+     */
     requestVolumeChange: (volume: number) => {
       // if (volume > 0) {
       //   dispatch({ type: 'unmuterequest' });
diff --git a/packages/core/media-store/src/factory.ts b/packages/core/media-store/src/factory.ts
index 5b2977d1..6ba5c72d 100644
--- a/packages/core/media-store/src/factory.ts
+++ b/packages/core/media-store/src/factory.ts
@@ -1,15 +1,15 @@
 import { getKey, map, subscribeKeys } from 'nanostores';
 
-export type StateOwners = {
+export interface StateOwners {
   media?: any;
   container?: any;
-};
+}
 
-export type EventOrAction<D = undefined> = {
+export interface EventOrAction<D = undefined> {
   type: string;
   detail?: D;
   target?: EventTarget;
-};
+}
 
 export type FacadeGetter<T, D = T> = (stateOwners: StateOwners, event?: EventOrAction<D>) => T;
 
@@ -20,10 +20,10 @@ export type StateOwnerUpdateHandler<T> = (
   stateOwners: StateOwners
 ) => (() => void) | void;
 
-export type ReadonlyFacadeProp<T, D = T> = {
+export interface ReadonlyFacadeProp<T, D = T> {
   get: FacadeGetter<T, D>;
   stateOwnersUpdateHandlers?: StateOwnerUpdateHandler<T>[];
-};
+}
 
 export type FacadeProp<T, S = T, D = T> = ReadonlyFacadeProp<T, D> & {
   set: FacadeSetter<S>;
@@ -33,7 +33,7 @@ export type FacadeProp<T, S = T, D = T> = ReadonlyFacadeProp<T, D> & {
   };
 };
 
-export type StateMediator = {
+export interface StateMediator {
   paused: FacadeProp<HTMLMediaElement['paused']>;
   muted: FacadeProp<HTMLMediaElement['muted']>;
   volume: FacadeProp<HTMLMediaElement['volume']>;
@@ -42,14 +42,14 @@ export type StateMediator = {
   duration: ReadonlyFacadeProp<HTMLMediaElement['duration']>;
   seekable: ReadonlyFacadeProp<[number, number] | undefined>;
   fullscreen: FacadeProp<boolean>;
-};
+}
 
 export interface MediaStore {
-  dispatch(action: { type: string; detail?: unknown }): void;
-  getState(): any;
-  getKeys(keys: string[]): Record<string, any>;
-  subscribeKeys(keys: string[], callback: (state: any) => void): void;
-  subscribe(callback: (state: any) => void): void;
+  dispatch: (action: { type: string; detail?: unknown }) => void;
+  getState: () => any;
+  getKeys: (keys: string[]) => Record<string, any>;
+  subscribeKeys: (keys: string[], callback: (state: any) => void) => void;
+  subscribe: (callback: (state: any) => void) => void;
 }
 
 export function createMediaStore({
@@ -68,7 +68,7 @@ export function createMediaStore({
   function updateStateOwners(nextStateOwners: any) {
     // Check if any state owner has changed
     const hasChanges = Object.entries(nextStateOwners).some(
-      ([key, value]) => stateOwners[key as keyof StateOwners] !== value
+      ([key, value]) => stateOwners[key as keyof StateOwners] !== value,
     );
 
     if (!hasChanges) {
@@ -77,7 +77,7 @@ export function createMediaStore({
 
     // Clean up existing handlers
     Object.entries(stateUpdateHandlerCleanups).forEach(([stateName, cleanups]) => {
-      cleanups.forEach((cleanup) => cleanup?.());
+      cleanups.forEach(cleanup => cleanup?.());
       stateUpdateHandlerCleanups[stateName] = [];
     });
 
@@ -114,11 +114,13 @@ export function createMediaStore({
 
       if (type === 'mediastateownerchangerequest') {
         updateStateOwners({ media: detail });
-      } else if (type === 'containerstateownerchangerequest') {
+      }
+      else if (type === 'containerstateownerchangerequest') {
         updateStateOwners({ container: detail });
-      } else {
+      }
+      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]) {
@@ -140,7 +142,7 @@ export function createMediaStore({
           acc[k] = getKey(store, k);
           return acc;
         },
-        {} as { [k: string]: any }
+        {} as { [k: string]: any },
       );
     },
 
@@ -156,7 +158,7 @@ export function createMediaStore({
 }
 
 function getInitialState(stateMediator: Partial<StateMediator> & Pick<StateMediator, 'paused'>, stateOwners: any) {
-  let initialState: any = {};
+  const 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 32c61ecf..bb9b3847 100644
--- a/packages/core/media-store/src/index.ts
+++ b/packages/core/media-store/src/index.ts
@@ -1,13 +1,13 @@
+export * from './component-state-definitions/current-time-display';
+export * from './component-state-definitions/duration-display';
+export * from './component-state-definitions/fullscreen-button';
+export * from './component-state-definitions/mute-button';
+export * from './component-state-definitions/play-button';
+export * from './component-state-definitions/time-range';
+export * from './component-state-definitions/volume-range';
 export * from './factory';
 export { createMediaStore } from './media-store';
-export * from './state-mediators/playable';
 export * from './state-mediators/audible';
+export * from './state-mediators/playable';
 export * from './state-mediators/temporal';
-export * from './component-state-definitions/play-button';
-export * from './component-state-definitions/mute-button';
-export * from './component-state-definitions/volume-range';
-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';
diff --git a/packages/core/media-store/src/media-store.ts b/packages/core/media-store/src/media-store.ts
index 98242da8..b8e5eb11 100644
--- a/packages/core/media-store/src/media-store.ts
+++ b/packages/core/media-store/src/media-store.ts
@@ -12,8 +12,9 @@ const stateMediator = { ...playable, ...audible, ...temporal, ...fullscreenable
 
 type Params = Partial<Parameters<typeof factory>[0]>;
 
-export const createMediaStore = (params: Params = {}): MediaStore =>
-  factory({
+export function createMediaStore(params: Params = {}): MediaStore {
+  return factory({
     stateMediator: stateMediator as any,
     ...params,
   });
+}
diff --git a/packages/core/media-store/src/state-mediators/fullscreenable.ts b/packages/core/media-store/src/state-mediators/fullscreenable.ts
index 4cfb76fb..178005aa 100644
--- a/packages/core/media-store/src/state-mediators/fullscreenable.ts
+++ b/packages/core/media-store/src/state-mediators/fullscreenable.ts
@@ -1,5 +1,5 @@
 // Utility function to check if a root node contains a child node across shadow DOM boundaries
-const containsComposedNode = (rootNode: Node, childNode: Node): boolean => {
+function containsComposedNode(rootNode: Node, childNode: Node): boolean {
   if (!rootNode || !childNode) return false;
   if (rootNode?.contains(childNode)) return true;
   const childRootNode = childNode.getRootNode();
@@ -7,7 +7,7 @@ const containsComposedNode = (rootNode: Node, childNode: Node): boolean => {
     return containsComposedNode(rootNode, childRootNode.host as Node);
   }
   return false;
-};
+}
 
 /** @TODO This is implemented for web/browser only! We will need an alternative state mediator model for e.g. React Native. (CJP) */
 export const fullscreenable = {
@@ -17,11 +17,11 @@ export const fullscreenable = {
       if (!container || !globalThis?.document) return false;
 
       const doc = globalThis.document;
-      const currentFullscreenElement =
-        doc.fullscreenElement ||
-        (doc as any).webkitFullscreenElement ||
-        (doc as any).mozFullScreenElement ||
-        (doc as any).msFullscreenElement;
+      const currentFullscreenElement
+        = doc.fullscreenElement
+          || (doc as any).webkitFullscreenElement
+          || (doc as any).mozFullScreenElement
+          || (doc as any).msFullscreenElement;
 
       if (!currentFullscreenElement) return false;
 
@@ -42,8 +42,8 @@ export const fullscreenable = {
         let currentRoot = currentFullscreenElement.shadowRoot;
 
         // Check if ShadowRoot supports fullscreenElement (Safari < 16.4 workaround)
-        const fullscreenElementKey =
-          'fullscreenElement' in doc
+        const fullscreenElementKey
+          = 'fullscreenElement' in doc
             ? 'fullscreenElement'
             : 'webkitFullscreenElement' in doc
               ? 'webkitFullscreenElement'
@@ -73,33 +73,41 @@ export const fullscreenable = {
           // Enter fullscreen
           if (container.requestFullscreen) {
             container.requestFullscreen();
-          } else if (container.webkitRequestFullscreen) {
+          }
+          else if (container.webkitRequestFullscreen) {
             // Safari support
             container.webkitRequestFullscreen();
-          } else if (container.mozRequestFullScreen) {
+          }
+          else if (container.mozRequestFullScreen) {
             // Firefox support
             container.mozRequestFullScreen();
-          } else if (container.msRequestFullscreen) {
+          }
+          else if (container.msRequestFullscreen) {
             // IE/Edge support
             container.msRequestFullscreen();
           }
-        } else {
+        }
+        else {
           // Exit fullscreen
           const doc = globalThis.document as any;
           if (doc.exitFullscreen) {
             doc.exitFullscreen();
-          } else if (doc.webkitExitFullscreen) {
+          }
+          else if (doc.webkitExitFullscreen) {
             // Safari support
             doc.webkitExitFullscreen();
-          } else if (doc.mozCancelFullScreen) {
+          }
+          else if (doc.mozCancelFullScreen) {
             // Firefox support
             doc.mozCancelFullScreen();
-          } else if (doc.msExitFullscreen) {
+          }
+          else if (doc.msExitFullscreen) {
             // IE/Edge support
             doc.msExitFullscreen();
           }
         }
-      } catch (error) {
+      }
+      catch (error) {
         // Gracefully handle fullscreen API errors (e.g., user interaction required)
         console.warn('Fullscreen operation failed:', error);
       }
diff --git a/packages/core/media-store/src/state-mediators/index.ts b/packages/core/media-store/src/state-mediators/index.ts
index b19a68cd..e0348ad3 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 { fullscreenable } from './fullscreenable';
 export { playable } from './playable';
 export { temporal } from './temporal';
-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 540f68a1..b44a626b 100644
--- a/packages/core/media-store/src/state-mediators/playable.ts
+++ b/packages/core/media-store/src/state-mediators/playable.ts
@@ -15,9 +15,9 @@ export const playable = {
 
         const eventHandler = () => handler();
         const events = ['play', 'playing', 'pause', 'emptied'];
-        events.forEach((event) => media.addEventListener(event, eventHandler));
+        events.forEach(event => media.addEventListener(event, eventHandler));
 
-        return () => events.forEach((event) => media.removeEventListener(event, eventHandler));
+        return () => events.forEach(event => media.removeEventListener(event, eventHandler));
       },
     ] as const,
     actions: {
diff --git a/packages/core/media-store/src/state-mediators/temporal.ts b/packages/core/media-store/src/state-mediators/temporal.ts
index 5958b37c..09b2f33f 100644
--- a/packages/core/media-store/src/state-mediators/temporal.ts
+++ b/packages/core/media-store/src/state-mediators/temporal.ts
@@ -1,6 +1,6 @@
-const isValidNumber = (value: any): value is number => {
+function isValidNumber(value: any): value is number {
   return typeof value === 'number' && !Number.isNaN(value) && Number.isFinite(value);
-};
+}
 
 export const temporal = {
   currentTime: {
@@ -20,9 +20,9 @@ export const temporal = {
 
         const eventHandler = () => handler();
         const events = ['timeupdate', 'loadedmetadata'];
-        events.forEach((event) => media.addEventListener(event, eventHandler));
+        events.forEach(event => media.addEventListener(event, eventHandler));
 
-        return () => events.forEach((event) => media.removeEventListener(event, eventHandler));
+        return () => events.forEach(event => media.removeEventListener(event, eventHandler));
       },
     ] as const,
     actions: {
@@ -49,9 +49,9 @@ export const temporal = {
 
         const eventHandler = () => handler();
         const events = ['loadedmetadata', 'durationchange', 'emptied'];
-        events.forEach((event) => media.addEventListener(event, eventHandler));
+        events.forEach(event => media.addEventListener(event, eventHandler));
 
-        return () => events.forEach((event) => media.removeEventListener(event, eventHandler));
+        return () => events.forEach(event => media.removeEventListener(event, eventHandler));
       },
     ] as const,
   },
@@ -77,10 +77,10 @@ export const temporal = {
 
         const eventHandler = () => handler();
         const events = ['loadedmetadata', 'emptied', 'progress', 'seekablechange'];
-        events.forEach((event) => media.addEventListener(event, eventHandler));
+        events.forEach(event => media.addEventListener(event, eventHandler));
 
-        return () => events.forEach((event) => media.removeEventListener(event, eventHandler));
+        return () => events.forEach(event => media.removeEventListener(event, eventHandler));
       },
     ] as const,
-  },  
+  },
 };
diff --git a/packages/core/media-store/src/utils/time.ts b/packages/core/media-store/src/utils/time.ts
index e59c0e7d..f34ee2a9 100644
--- a/packages/core/media-store/src/utils/time.ts
+++ b/packages/core/media-store/src/utils/time.ts
@@ -28,11 +28,11 @@ const UnitLabels = [
   },
 ] as const;
 
-const toTimeUnitPhrase = (timeUnitValue: number, unitIndex: number): string => {
+function toTimeUnitPhrase(timeUnitValue: number, unitIndex: number): string {
   const unitLabel = timeUnitValue === 1 ? UnitLabels[unitIndex]?.singular : UnitLabels[unitIndex]?.plural;
 
   return `${timeUnitValue} ${unitLabel}`;
-};
+}
 
 /**
  * Converts numeric seconds into a human-readable phrase for accessibility
@@ -56,7 +56,7 @@ export function formatAsTimePhrase(seconds: number): string {
     // Convert non-0 values to a string of the value plus its unit
     .map((timeUnitValue, index) => timeUnitValue && toTimeUnitPhrase(timeUnitValue, index))
     // Ignore/exclude any 0 values
-    .filter((x) => x)
+    .filter(x => x)
     // join into a single comma-separated string phrase
     .join(', ');
 
@@ -110,14 +110,14 @@ export function formatTime(seconds: number, guide?: number): string {
 
   // Check if we need to show hours
   const showHours = (h as number) > 0 || gh > 0;
-  const hoursString = showHours ? h + ':' : '';
+  const hoursString = showHours ? `${h}:` : '';
 
   // If hours are showing, we may need to add a leading zero.
   // Always show at least one digit of minutes.
-  const minutesString = ((showHours || gm >= 10) && (m as number) < 10 ? '0' + m : m) + ':';
+  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;
+  const secondsString = (s as number) < 10 ? `0${s}` : s;
 
   return (negative ? '-' : '') + hoursString + minutesString + secondsString;
 }
diff --git a/packages/core/media/package.json b/packages/core/media/package.json
index 2a7a051e..fb39dda8 100644
--- a/packages/core/media/package.json
+++ b/packages/core/media/package.json
@@ -3,15 +3,23 @@
   "type": "module",
   "version": "0.1.0",
   "description": "Media related contracts and utilities.",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "keywords": [
+    "media",
+    "HTMLMediaElement",
+    "video",
+    "audio",
+    "contracts"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     }
   },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -22,14 +30,6 @@
     "test": "echo \"No tests yet\"",
     "clean": "rm -rf dist"
   },
-  "keywords": [
-    "media",
-    "HTMLMediaElement",
-    "video",
-    "audio",
-    "contracts"
-  ],
-  "license": "Apache-2.0",
   "dependencies": {
     "@vjs-10/playback-engine": "workspace:*"
   },
diff --git a/packages/core/media/src/index.ts b/packages/core/media/src/index.ts
index 57d37acf..d4be1756 100644
--- a/packages/core/media/src/index.ts
+++ b/packages/core/media/src/index.ts
@@ -1,2 +1,2 @@
-export type { IBaseMediaStateOwner, IPlayableMediaStateOwner, IAudibleMediaStateOwner } from './playable';
-export { Events, PlayableMediaStateOwner, createMediaStateOwner } from './playable';
+export type { IAudibleMediaStateOwner, IBaseMediaStateOwner, IPlayableMediaStateOwner } from './playable';
+export { createMediaStateOwner, Events, PlayableMediaStateOwner } from './playable';
diff --git a/packages/core/media/src/playable.ts b/packages/core/media/src/playable.ts
index b001245a..5bc41875 100644
--- a/packages/core/media/src/playable.ts
+++ b/packages/core/media/src/playable.ts
@@ -20,18 +20,18 @@ export interface IBaseMediaStateOwner extends EventTarget, Pick<HTMLMediaElement
 
 export interface IPlayableMediaStateOwner
   extends EventTarget,
-    IBaseMediaStateOwner,
-    Pick<HTMLMediaElement, 'play' | 'pause' | 'paused'> {}
+  IBaseMediaStateOwner,
+  Pick<HTMLMediaElement, 'play' | 'pause' | 'paused'> {}
 
 export interface IAudibleMediaStateOwner
   extends EventTarget,
-    IBaseMediaStateOwner,
-    Pick<HTMLMediaElement, 'muted' | 'volume'> {}
+  IBaseMediaStateOwner,
+  Pick<HTMLMediaElement, 'muted' | 'volume'> {}
 
 export interface ITemporalMediaStateOwner
   extends EventTarget,
-    IBaseMediaStateOwner,
-    Pick<HTMLMediaElement, 'duration' | 'currentTime'> {}
+  IBaseMediaStateOwner,
+  Pick<HTMLMediaElement, 'duration' | 'currentTime'> {}
 
 export class PlayableMediaStateOwner extends EventTarget implements IPlayableMediaStateOwner, IAudibleMediaStateOwner {
   protected _playbackEngine: IBasePlaybackEngine;
diff --git a/packages/core/playback-engine/package.json b/packages/core/playback-engine/package.json
index 935b46ad..82818ea9 100644
--- a/packages/core/playback-engine/package.json
+++ b/packages/core/playback-engine/package.json
@@ -3,15 +3,24 @@
   "type": "module",
   "version": "0.1.0",
   "description": "Common media playback engine utilities and contracts supporting various streaming protocols",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "keywords": [
+    "media",
+    "playback",
+    "engine",
+    "hls",
+    "dash",
+    "streaming"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     }
   },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -22,15 +31,6 @@
     "test": "echo \"No tests yet\"",
     "clean": "rm -rf dist"
   },
-  "keywords": [
-    "media",
-    "playback",
-    "engine",
-    "hls",
-    "dash",
-    "streaming"
-  ],
-  "license": "Apache-2.0",
   "dependencies": {
     "hls.js": "^1.6.7"
   },
diff --git a/packages/core/playback-engine/src/index.ts b/packages/core/playback-engine/src/index.ts
index 724972c6..f501ce23 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';
+export { createPlaybackEngine, HlsJSPlaybackEngine } from './HlsJSPlaybackEngine';
diff --git a/packages/html/html-icons/package.json b/packages/html/html-icons/package.json
index 120be94a..5677077d 100644
--- a/packages/html/html-icons/package.json
+++ b/packages/html/html-icons/package.json
@@ -3,15 +3,24 @@
   "type": "module",
   "version": "0.1.0",
   "description": "HTML icons for Video.js",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "keywords": [
+    "icons",
+    "html",
+    "dom",
+    "web-components",
+    "media",
+    "player"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     }
   },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -22,15 +31,6 @@
     "test": "echo \"No tests yet\"",
     "clean": "rm -rf dist"
   },
-  "keywords": [
-    "icons",
-    "html",
-    "dom",
-    "web-components",
-    "media",
-    "player"
-  ],
-  "license": "Apache-2.0",
   "dependencies": {
     "@vjs-10/icons": "workspace:*"
   },
diff --git a/packages/html/html-icons/src/index.ts b/packages/html/html-icons/src/index.ts
index c0fc9771..30729a0d 100644
--- a/packages/html/html-icons/src/index.ts
+++ b/packages/html/html-icons/src/index.ts
@@ -1,7 +1,7 @@
-export * as MediaPlayIcon from './media-play-icon.js';
+export * as MediaFullscreenEnterIcon from './media-fullscreen-enter-icon.js';
+export * as MediaFullscreenExitIcon from './media-fullscreen-exit-icon.js';
 export * as MediaPauseIcon from './media-pause-icon.js';
+export * as MediaPlayIcon from './media-play-icon.js';
 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';
diff --git a/packages/html/html-media-elements/package.json b/packages/html/html-media-elements/package.json
index dc8c292c..b47058e6 100644
--- a/packages/html/html-media-elements/package.json
+++ b/packages/html/html-media-elements/package.json
@@ -3,15 +3,24 @@
   "type": "module",
   "version": "0.1.0",
   "description": "HTML media element components and utilities",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "keywords": [
+    "media",
+    "html",
+    "dom",
+    "web-components",
+    "video",
+    "audio"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     }
   },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -22,15 +31,6 @@
     "test": "echo \"No tests yet\"",
     "clean": "rm -rf dist"
   },
-  "keywords": [
-    "media",
-    "html",
-    "dom",
-    "web-components",
-    "video",
-    "audio"
-  ],
-  "license": "Apache-2.0",
   "dependencies": {
     "@open-wc/context-protocol": "^0.0.9",
     "@vjs-10/media-store": "workspace:*"
diff --git a/packages/html/html-media-store/package.json b/packages/html/html-media-store/package.json
index a9d5dda6..fcf0eb06 100644
--- a/packages/html/html-media-store/package.json
+++ b/packages/html/html-media-store/package.json
@@ -3,15 +3,23 @@
   "type": "module",
   "version": "0.1.0",
   "description": "HTML media store integration",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "keywords": [
+    "media",
+    "store",
+    "state",
+    "html",
+    "dom"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     }
   },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -22,14 +30,6 @@
     "test": "echo \"No tests yet\"",
     "clean": "rm -rf dist"
   },
-  "keywords": [
-    "media",
-    "store",
-    "state",
-    "html",
-    "dom"
-  ],
-  "license": "Apache-2.0",
   "dependencies": {
     "@vjs-10/html-media-elements": "workspace:*",
     "@vjs-10/media-store": "workspace:*"
diff --git a/packages/html/html/package.json b/packages/html/html/package.json
index d3550223..7f0377ee 100644
--- a/packages/html/html/package.json
+++ b/packages/html/html/package.json
@@ -3,15 +3,23 @@
   "type": "module",
   "version": "0.1.0",
   "description": "HTML library for building media players",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "keywords": [
+    "media",
+    "player",
+    "html",
+    "ui",
+    "components"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     }
   },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -22,14 +30,6 @@
     "test": "echo \"No tests yet\"",
     "clean": "rm -rf dist"
   },
-  "keywords": [
-    "media",
-    "player",
-    "html",
-    "ui",
-    "components"
-  ],
-  "license": "Apache-2.0",
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
     "@open-wc/context-protocol": "^0.0.9",
diff --git a/packages/html/html/src/components/media-chrome-button.ts b/packages/html/html/src/components/media-chrome-button.ts
index be9175c7..15bfb515 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> = {},
 ): string {
   return /* html */ `
     <style>
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 0534e63e..4fda6acb 100644
--- a/packages/html/html/src/components/media-current-time-display.ts
+++ b/packages/html/html/src/components/media-current-time-display.ts
@@ -1,5 +1,5 @@
-import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
 import type { CurrentTimeDisplayState } from '@vjs-10/media-store';
+import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
 
 import { currentTimeDisplayStateDefinition, formatDisplayTime } from '@vjs-10/media-store';
 
@@ -14,9 +14,9 @@ export class CurrentTimeDisplayBase extends HTMLElement {
 
   _state:
     | {
-        currentTime: number | undefined;
-        duration: number | undefined;
-      }
+      currentTime: number | undefined;
+      duration: number | undefined;
+    }
     | undefined;
 
   constructor() {
@@ -50,8 +50,8 @@ export class CurrentTimeDisplayBase extends HTMLElement {
     this._state = state;
 
     /** @TODO Should this live here or elsewhere? (CJP) */
-    const timeLabel =
-      this.showRemaining && state.duration != null && state.currentTime != null
+    const timeLabel
+      = this.showRemaining && state.duration != null && state.currentTime != null
         ? formatDisplayTime(-(state.duration - state.currentTime))
         : formatDisplayTime(state.currentTime);
 
@@ -84,7 +84,7 @@ export const CurrentTimeDisplay: ConnectedComponentConstructor<CurrentTimeDispla
   CurrentTimeDisplayBase,
   useCurrentTimeDisplayState,
   useCurrentTimeDisplayProps,
-  'CurrentTimeDisplay'
+  'CurrentTimeDisplay',
 );
 
 // Register the custom element
diff --git a/packages/html/html/src/components/media-duration-display.ts b/packages/html/html/src/components/media-duration-display.ts
index 9d34d41d..a5732876 100644
--- a/packages/html/html/src/components/media-duration-display.ts
+++ b/packages/html/html/src/components/media-duration-display.ts
@@ -1,5 +1,5 @@
-import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
 import type { DurationDisplayState } from '@vjs-10/media-store';
+import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
 
 import { durationDisplayStateDefinition, formatDisplayTime } from '@vjs-10/media-store';
 
@@ -9,7 +9,7 @@ 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>
@@ -25,8 +25,8 @@ export class DurationDisplayBase extends HTMLElement {
 
   _state:
     | {
-        duration: number | undefined;
-      }
+      duration: number | undefined;
+    }
     | undefined;
 
   constructor() {
@@ -78,7 +78,7 @@ export const DurationDisplay: ConnectedComponentConstructor<DurationDisplayState
   DurationDisplayBase,
   useDurationDisplayState,
   useDurationDisplayProps,
-  'DurationDisplay'
+  'DurationDisplay',
 );
 
 // Register the custom element
diff --git a/packages/html/html/src/components/media-fullscreen-button.ts b/packages/html/html/src/components/media-fullscreen-button.ts
index 071737ec..2e7027a6 100644
--- a/packages/html/html/src/components/media-fullscreen-button.ts
+++ b/packages/html/html/src/components/media-fullscreen-button.ts
@@ -1,5 +1,5 @@
-import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
 import type { FullscreenButtonState } from '@vjs-10/media-store';
+import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
 
 import { fullscreenButtonStateDefinition } from '@vjs-10/media-store';
 
@@ -9,10 +9,10 @@ import { MediaChromeButton } from './media-chrome-button';
 export class FullscreenButtonBase extends MediaChromeButton {
   _state:
     | {
-        fullscreen: boolean;
-        requestEnterFullscreen: () => void;
-        requestExitFullscreen: () => void;
-      }
+      fullscreen: boolean;
+      requestEnterFullscreen: () => void;
+      requestExitFullscreen: () => void;
+    }
     | undefined;
 
   handleEvent(event: Event): void {
@@ -21,7 +21,8 @@ export class FullscreenButtonBase extends MediaChromeButton {
     if (state && type === 'click') {
       if (state.fullscreen) {
         state.requestExitFullscreen();
-      } else {
+      }
+      else {
         state.requestEnterFullscreen();
       }
     }
@@ -36,7 +37,7 @@ export class FullscreenButtonBase extends MediaChromeButton {
     /** @TODO Follow up with React vs. W.C. data-* attributes discrepancies (CJP)  */
     // Make generic
     this.toggleAttribute('data-fullscreen', props['data-fullscreen']);
-    this.setAttribute('role', props['role']);
+    this.setAttribute('role', props.role);
     this.setAttribute('aria-label', props['aria-label']);
     this.setAttribute('data-tooltip', props['data-tooltip']);
   }
@@ -57,13 +58,13 @@ export const useFullscreenButtonState: StateHook<{ fullscreen: boolean }> = {
 export const useFullscreenButtonProps: PropsHook<{ fullscreen: boolean }> = (state, _element) => {
   const baseProps: Record<string, any> = {
     /** data attributes/props */
-    ['data-fullscreen']: state.fullscreen,
+    'data-fullscreen': state.fullscreen,
     /** @TODO Need another state provider in core for i18n (CJP) */
     /** aria attributes/props */
-    role: 'button',
-    ['aria-label']: state.fullscreen ? 'exit fullscreen' : 'enter fullscreen',
+    'role': 'button',
+    'aria-label': state.fullscreen ? 'exit fullscreen' : 'enter fullscreen',
     /** tooltip */
-    ['data-tooltip']: state.fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen',
+    'data-tooltip': state.fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen',
     /** @TODO Figure out how we want to handle attr overrides (e.g. aria-label) (CJP) */
     /** external props spread last to allow for overriding */
     // ...props,
@@ -76,7 +77,7 @@ export const FullscreenButton: ConnectedComponentConstructor<FullscreenButtonSta
   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 06cb0b44..6950557e 100644
--- a/packages/html/html/src/components/media-mute-button.ts
+++ b/packages/html/html/src/components/media-mute-button.ts
@@ -1,5 +1,5 @@
-import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
 import type { MuteButtonState } from '@vjs-10/media-store';
+import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
 
 import { muteButtonStateDefinition } from '@vjs-10/media-store';
 
@@ -9,22 +9,23 @@ import { MediaChromeButton } from './media-chrome-button';
 export class MuteButtonBase extends MediaChromeButton {
   _state:
     | {
-        muted: boolean;
-        volumeLevel: string;
-        requestMute: () => void;
-        requestUnmute: () => void;
-      }
+      muted: boolean;
+      volumeLevel: string;
+      requestMute: () => void;
+      requestUnmute: () => void;
+    }
     | undefined;
 
   handleEvent(event: Event): void {
-    const { type } = event,
-      state = this._state;
+    const { type } = event;
+    const state = this._state;
 
     if (state) {
       if (type === 'click') {
         if (state.volumeLevel === 'off') {
           state.requestUnmute();
-        } else {
+        }
+        else {
           state.requestMute();
         }
       }
@@ -45,7 +46,7 @@ export class MuteButtonBase extends MediaChromeButton {
     // Make generic
     this.toggleAttribute('data-muted', props['data-muted']);
     this.setAttribute('data-volume-level', props['data-volume-level']);
-    this.setAttribute('role', props['role']);
+    this.setAttribute('role', props.role);
     this.setAttribute('aria-label', props['aria-label']);
     this.setAttribute('data-tooltip', props['data-tooltip']);
   }
@@ -68,14 +69,14 @@ export const useMuteButtonProps: PropsHook<{
 }> = (state, _element) => {
   const baseProps: Record<string, any> = {
     /** data attributes/props */
-    ['data-muted']: state.muted,
-    ['data-volume-level']: state.volumeLevel,
+    'data-muted': state.muted,
+    'data-volume-level': state.volumeLevel,
     /** @TODO Need another state provider in core for i18n (CJP) */
     /** aria attributes/props */
-    role: 'button',
-    ['aria-label']: state.muted ? 'unmute' : 'mute',
+    'role': 'button',
+    'aria-label': state.muted ? 'unmute' : 'mute',
     /** tooltip */
-    ['data-tooltip']: state.muted ? 'Unmute' : 'Mute',
+    'data-tooltip': state.muted ? 'Unmute' : 'Mute',
     /** @TODO Figure out how we want to handle attr overrides (e.g. aria-label) (CJP) */
     /** external props spread last to allow for overriding */
     // ...props,
@@ -88,7 +89,7 @@ export const MuteButton: ConnectedComponentConstructor<MuteButtonState> = toConn
   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 8ce155e8..b0afd7a9 100644
--- a/packages/html/html/src/components/media-play-button.ts
+++ b/packages/html/html/src/components/media-play-button.ts
@@ -1,5 +1,5 @@
-import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
 import type { PlayButtonState } from '@vjs-10/media-store';
+import type { ConnectedComponentConstructor, PropsHook, StateHook } from '../utils/component-factory';
 
 import { playButtonStateDefinition } from '@vjs-10/media-store';
 
@@ -19,7 +19,8 @@ export class PlayButtonBase extends MediaChromeButton {
     if (state && type === 'click') {
       if (state.paused) {
         state.requestPlay();
-      } else {
+      }
+      else {
         state.requestPause();
       }
     }
@@ -34,7 +35,7 @@ export class PlayButtonBase extends MediaChromeButton {
     /** @TODO Follow up with React vs. W.C. data-* attributes discrepancies (CJP)  */
     // Make generic
     this.toggleAttribute('data-paused', props['data-paused']);
-    this.setAttribute('role', props['role']);
+    this.setAttribute('role', props.role);
     this.setAttribute('aria-label', props['aria-label']);
     this.setAttribute('data-tooltip', props['data-tooltip']);
   }
@@ -51,13 +52,13 @@ export const usePlayButtonState: StateHook<{ paused: boolean }> = {
 export const usePlayButtonProps: PropsHook<{ paused: boolean }> = (state, _element) => {
   const baseProps: Record<string, any> = {
     /** data attributes/props */
-    ['data-paused']: state.paused,
+    'data-paused': state.paused,
     /** @TODO Need another state provider in core for i18n (CJP) */
     /** aria attributes/props */
-    role: 'button',
-    ['aria-label']: state.paused ? 'play' : 'pause',
+    'role': 'button',
+    'aria-label': state.paused ? 'play' : 'pause',
     /** tooltip */
-    ['data-tooltip']: state.paused ? 'Play' : 'Pause',
+    'data-tooltip': state.paused ? 'Play' : 'Pause',
     /** @TODO Figure out how we want to handle attr overrides (e.g. aria-label) (CJP) */
     /** external props spread last to allow for overriding */
     // ...props,
@@ -70,7 +71,7 @@ export const PlayButton: ConnectedComponentConstructor<PlayButtonState> = toConn
   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-popover.ts b/packages/html/html/src/components/media-popover.ts
index 50377d1d..963562e1 100644
--- a/packages/html/html/src/components/media-popover.ts
+++ b/packages/html/html/src/components/media-popover.ts
@@ -32,11 +32,11 @@ export class MediaPopoverRoot extends HTMLElement {
   }
 
   get delay(): number {
-    return parseInt(this.getAttribute('delay') ?? '0', 10);
+    return Number.parseInt(this.getAttribute('delay') ?? '0', 10);
   }
 
   get closeDelay(): number {
-    return parseInt(this.getAttribute('close-delay') ?? '0', 10);
+    return Number.parseInt(this.getAttribute('close-delay') ?? '0', 10);
   }
 
   get #triggerElement(): MediaPopoverTrigger | null {
@@ -63,7 +63,8 @@ export class MediaPopoverRoot extends HTMLElement {
 
     if (open) {
       this.#setupFloating();
-    } else {
+    }
+    else {
       this.#cleanup?.();
       this.#cleanup = null;
     }
@@ -209,7 +210,7 @@ export class MediaPopoverPositioner extends HTMLElement {
   }
 
   get sideOffset(): number {
-    return parseInt(this.getAttribute('side-offset') ?? '0', 10);
+    return Number.parseInt(this.getAttribute('side-offset') ?? '0', 10);
   }
 }
 
diff --git a/packages/html/html/src/components/media-time-range.ts b/packages/html/html/src/components/media-time-range.ts
index 8b5f88b6..d23e298b 100644
--- a/packages/html/html/src/components/media-time-range.ts
+++ b/packages/html/html/src/components/media-time-range.ts
@@ -5,12 +5,12 @@ import { timeRangeStateDefinition } from '@vjs-10/media-store';
 
 import { toConnectedHTMLComponent } from '../utils/component-factory';
 
-type TimeRangeRootState = {
+interface TimeRangeRootState {
   currentTime: number;
   duration: number;
   requestSeek: (time: number) => void;
   core: CoreTimeRange | null;
-};
+}
 
 export class TimeRangeRootBase extends HTMLElement {
   static readonly observedAttributes: readonly string[] = ['orientation'];
@@ -91,7 +91,8 @@ export class TimeRangeTrackBase extends HTMLElement {
     if (orientation === 'horizontal') {
       this.style.width = '100%';
       this.style.removeProperty('height');
-    } else {
+    }
+    else {
       this.style.height = '100%';
       this.style.removeProperty('width');
     }
@@ -116,7 +117,8 @@ export class TimeRangeProgressBase extends HTMLElement {
       this.style.height = '100%';
       this.style.top = '0';
       this.style.removeProperty('bottom');
-    } else {
+    }
+    else {
       this.style.height = 'var(--slider-fill, 0%)';
       this.style.width = '100%';
       this.style.bottom = '0';
@@ -143,7 +145,8 @@ export class TimeRangePointerBase extends HTMLElement {
       this.style.height = '100%';
       this.style.top = '0';
       this.style.removeProperty('bottom');
-    } else {
+    }
+    else {
       this.style.height = 'var(--slider-pointer, 0%)';
       this.style.width = '100%';
       this.style.bottom = '0';
@@ -167,7 +170,8 @@ export class TimeRangeThumbBase extends HTMLElement {
       this.style.left = 'var(--slider-fill, 0%)';
       this.style.top = '50%';
       this.style.transform = 'translate(-50%, -50%)';
-    } else {
+    }
+    else {
       this.style.bottom = 'var(--slider-fill, 0%)';
       this.style.left = '50%';
       this.style.transform = 'translate(-50%, 50%)';
@@ -206,13 +210,13 @@ export const useTimeRangeRootProps: PropsHook<{
 
   const baseProps: Record<string, any> = {
     /** data attributes/props */
-    ['data-current-time']: state.currentTime.toString(),
-    ['data-duration']: state.duration.toString(),
-    ['data-orientation']: (element as any).orientation || 'horizontal',
+    'data-current-time': state.currentTime.toString(),
+    'data-duration': state.duration.toString(),
+    'data-orientation': (element as any).orientation || 'horizontal',
     /** aria attributes/props */
-    ['aria-label']: 'Seek',
-    ['aria-valuetext']: `${currentTimeText} of ${durationText}`,
-    ['aria-orientation']: (element as any).orientation || 'horizontal',
+    'aria-label': 'Seek',
+    'aria-valuetext': `${currentTimeText} of ${durationText}`,
+    'aria-orientation': (element as any).orientation || 'horizontal',
   };
 
   return baseProps;
@@ -222,7 +226,7 @@ export const useTimeRangeTrackProps: PropsHook<{}> = (_state, element) => {
   // Get orientation from parent root element if not provided in state
   const rootElement = element.closest('media-time-range-root') as any;
   return {
-    ['data-orientation']: rootElement?.orientation || 'horizontal',
+    'data-orientation': rootElement?.orientation || 'horizontal',
   };
 };
 
@@ -230,7 +234,7 @@ export const useTimeRangeProgressProps: PropsHook<{}> = (_state, element) => {
   // Get orientation from parent root element if not provided in state
   const rootElement = element.closest('media-time-range-root') as any;
   return {
-    ['data-orientation']: rootElement?.orientation || 'horizontal',
+    'data-orientation': rootElement?.orientation || 'horizontal',
   };
 };
 
@@ -238,7 +242,7 @@ export const useTimeRangePointerProps: PropsHook<{}> = (_state, element) => {
   // Get orientation from parent root element if not provided in state
   const rootElement = element.closest('media-time-range-root') as any;
   return {
-    ['data-orientation']: rootElement?.orientation || 'horizontal',
+    'data-orientation': rootElement?.orientation || 'horizontal',
   };
 };
 
@@ -246,7 +250,7 @@ export const useTimeRangeThumbProps: PropsHook<{}> = (_state, element) => {
   // Get orientation from parent root element if not provided in state
   const rootElement = element.closest('media-time-range-root') as any;
   return {
-    ['data-orientation']: rootElement?.orientation || 'horizontal',
+    'data-orientation': rootElement?.orientation || 'horizontal',
   };
 };
 
@@ -261,28 +265,28 @@ export const TimeRangeTrack: ConnectedComponentConstructor<any> = toConnectedHTM
   TimeRangeTrackBase,
   { keys: [], transform: () => ({}) },
   useTimeRangeTrackProps,
-  'TimeRangeTrack'
+  'TimeRangeTrack',
 );
 
 export const TimeRangeProgress: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(
   TimeRangeProgressBase,
   { keys: [], transform: () => ({}) },
   useTimeRangeProgressProps,
-  'TimeRangeProgress'
+  'TimeRangeProgress',
 );
 
 export const TimeRangePointer: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(
   TimeRangePointerBase,
   { keys: [], transform: () => ({}) },
   useTimeRangePointerProps,
-  'TimeRangePointer'
+  'TimeRangePointer',
 );
 
 export const TimeRangeThumb: ConnectedComponentConstructor<any> = toConnectedHTMLComponent(
   TimeRangeThumbBase,
   { keys: [], transform: () => ({}) },
   useTimeRangeThumbProps,
-  'TimeRangeThumb'
+  'TimeRangeThumb',
 );
 
 export const TimeRange = Object.assign(
@@ -293,7 +297,7 @@ export const TimeRange = Object.assign(
     Progress: TimeRangeProgress,
     Pointer: TimeRangePointer,
     Thumb: TimeRangeThumb,
-  }
+  },
 ) as {
   Root: typeof TimeRangeRoot;
   Track: typeof TimeRangeTrack;
diff --git a/packages/html/html/src/components/media-tooltip.ts b/packages/html/html/src/components/media-tooltip.ts
index 3e44eda6..914ccf53 100644
--- a/packages/html/html/src/components/media-tooltip.ts
+++ b/packages/html/html/src/components/media-tooltip.ts
@@ -1,7 +1,7 @@
 import type { Placement } from '@floating-ui/dom';
 import type { MediaContainer } from '@/media-container';
 
-import { autoUpdate, computePosition, flip, offset, shift, arrow } from '@floating-ui/dom';
+import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
 import { uniqueId } from '../utils/element-utils';
 
 export class MediaTooltipRoot extends HTMLElement {
@@ -19,7 +19,8 @@ export class MediaTooltipRoot extends HTMLElement {
   handleEvent(event: Event): void {
     if (event.type === 'mouseenter') {
       this.#handleMouseEnter();
-    } else if (event.type === 'mouseleave') {
+    }
+    else if (event.type === 'mouseleave') {
       this.#handleMouseLeave();
     }
   }
@@ -38,11 +39,11 @@ export class MediaTooltipRoot extends HTMLElement {
   }
 
   get delay(): number {
-    return parseInt(this.getAttribute('delay') ?? '600', 10);
+    return Number.parseInt(this.getAttribute('delay') ?? '600', 10);
   }
 
   get closeDelay(): number {
-    return parseInt(this.getAttribute('close-delay') ?? '0', 10);
+    return Number.parseInt(this.getAttribute('close-delay') ?? '0', 10);
   }
 
   get #triggerElement(): MediaTooltipTrigger | null {
@@ -69,7 +70,8 @@ export class MediaTooltipRoot extends HTMLElement {
 
     if (open) {
       this.#setupFloating();
-    } else {
+    }
+    else {
       this.#cleanup?.();
       this.#cleanup = null;
     }
@@ -111,7 +113,7 @@ export class MediaTooltipRoot extends HTMLElement {
         flip(),
         shift({
           boundary: mediaContainer,
-          padding: collisionPadding 
+          padding: collisionPadding,
         }),
       ];
 
@@ -192,7 +194,7 @@ export class MediaTooltipTrigger extends HTMLElement {
                 return;
               }
             }
-            
+
             const attributeName = mutation.attributeName;
             if (!attributeName) {
               return;
@@ -201,7 +203,8 @@ export class MediaTooltipTrigger extends HTMLElement {
             const attributeValue = triggerElement.getAttribute(attributeName);
             if (attributeValue !== null) {
               popupElement.setAttribute(attributeName, attributeValue);
-            } else {
+            }
+            else {
               popupElement.removeAttribute(attributeName);
             }
           }
@@ -274,11 +277,11 @@ export class MediaTooltipPositioner extends HTMLElement {
   }
 
   get sideOffset(): number {
-    return parseInt(this.getAttribute('side-offset') ?? '0', 10);
+    return Number.parseInt(this.getAttribute('side-offset') ?? '0', 10);
   }
 
   get collisionPadding(): number {
-    return parseInt(this.getAttribute('collision-padding') ?? '0', 10);
+    return Number.parseInt(this.getAttribute('collision-padding') ?? '0', 10);
   }
 }
 
diff --git a/packages/html/html/src/components/media-volume-range.ts b/packages/html/html/src/components/media-volume-range.ts
index d5341f93..fc2ea359 100644
--- a/packages/html/html/src/components/media-volume-range.ts
+++ b/packages/html/html/src/components/media-volume-range.ts
@@ -8,17 +8,17 @@ import { toConnectedHTMLComponent } from '../utils/component-factory';
 /**
  * VolumeRange Root component - Main container with pointer event handling
  */
-type VolumeRangeRootState = {
+interface VolumeRangeRootState {
   volume: number;
   muted: boolean;
   volumeLevel: string;
   requestVolumeChange: (volume: number) => void;
   core: CoreVolumeRange | null;
-};
+}
 
 export class VolumeRangeRootBase extends HTMLElement {
   static readonly observedAttributes: readonly string[] = ['orientation'];
-  
+
   _state: VolumeRangeRootState | undefined;
   _core: CoreVolumeRange | null = null;
 
@@ -44,7 +44,7 @@ export class VolumeRangeRootBase extends HTMLElement {
     }
   }
 
-  _update(_props: any, state: any): void {    
+  _update(_props: any, state: any): void {
     this._state = state;
 
     if (state && !this._core) {
@@ -97,12 +97,13 @@ export class VolumeRangeTrackBase extends HTMLElement {
   _update(props: any, _state: any): void {
     const orientation = props['data-orientation'] || 'horizontal';
     this.setAttribute('data-orientation', orientation);
-    
+
     // Set appropriate dimensions based on orientation
     if (orientation === 'horizontal') {
       this.style.width = '100%';
       this.style.removeProperty('height');
-    } else {
+    }
+    else {
       this.style.height = '100%';
       this.style.removeProperty('width');
     }
@@ -123,14 +124,15 @@ export class VolumeRangeProgressBase extends HTMLElement {
   _update(props: any, _state: any): void {
     const orientation = props['data-orientation'] || 'horizontal';
     this.setAttribute('data-orientation', orientation);
-    
+
     // Set appropriate dimensions based on orientation
     if (orientation === 'horizontal') {
       this.style.width = 'var(--slider-fill, 0%)';
       this.style.height = '100%';
       this.style.top = '0';
       this.style.removeProperty('bottom');
-    } else {
+    }
+    else {
       this.style.height = 'var(--slider-fill, 0%)';
       this.style.width = '100%';
       this.style.bottom = '0';
@@ -151,13 +153,14 @@ export class VolumeRangeThumbBase extends HTMLElement {
   _update(props: any, _state: any): void {
     const orientation = props['data-orientation'] || 'horizontal';
     this.setAttribute('data-orientation', orientation);
-    
+
     // Set appropriate positioning based on orientation
     if (orientation === 'horizontal') {
       this.style.left = 'var(--slider-fill, 0%)';
       this.style.top = '50%';
       this.style.transform = 'translate(-50%, -50%)';
-    } else {
+    }
+    else {
       this.style.bottom = 'var(--slider-fill, 0%)';
       this.style.left = '50%';
       this.style.transform = 'translate(-50%, 50%)';
@@ -199,13 +202,13 @@ export const useVolumeRangeRootProps: PropsHook<{
 
   const baseProps: Record<string, any> = {
     /** data attributes/props */
-    ['data-muted']: state.muted.toString(),
-    ['data-volume-level']: state.volumeLevel,
-    ['data-orientation']: (element as any).orientation || 'horizontal',
+    'data-muted': state.muted.toString(),
+    'data-volume-level': state.volumeLevel,
+    'data-orientation': (element as any).orientation || 'horizontal',
     /** aria attributes/props */
-    ['aria-label']: 'Volume',
-    ['aria-valuetext']: volumeText,
-    ['aria-orientation']: (element as any).orientation || 'horizontal',
+    'aria-label': 'Volume',
+    'aria-valuetext': volumeText,
+    'aria-orientation': (element as any).orientation || 'horizontal',
   };
 
   return baseProps;
@@ -218,7 +221,7 @@ export const useVolumeRangeTrackProps: PropsHook<{}> = (_state, element) => {
   // Get orientation from parent root element if not provided in state
   const rootElement = element.closest('media-volume-range-root') as any;
   return {
-    ['data-orientation']: rootElement?.orientation || 'horizontal',
+    'data-orientation': rootElement?.orientation || 'horizontal',
   };
 };
 
@@ -229,7 +232,7 @@ export const useVolumeRangeProgressProps: PropsHook<{}> = (_state, element) => {
   // Get orientation from parent root element if not provided in state
   const rootElement = element.closest('media-volume-range-root') as any;
   return {
-    ['data-orientation']: rootElement?.orientation || 'horizontal',
+    'data-orientation': rootElement?.orientation || 'horizontal',
   };
 };
 
@@ -240,7 +243,7 @@ export const useVolumeRangeThumbProps: PropsHook<{}> = (_state, element) => {
   // Get orientation from parent root element if not provided in state
   const rootElement = element.closest('media-volume-range-root') as any;
   return {
-    ['data-orientation']: rootElement?.orientation || 'horizontal',
+    'data-orientation': rootElement?.orientation || 'horizontal',
   };
 };
 
@@ -262,7 +265,7 @@ export const VolumeRangeTrack: ConnectedComponentConstructor<any> = toConnectedH
   VolumeRangeTrackBase,
   { keys: [], transform: () => ({}) },
   useVolumeRangeTrackProps,
-  'VolumeRangeTrack'
+  'VolumeRangeTrack',
 );
 
 /**
@@ -272,7 +275,7 @@ export const VolumeRangeProgress: ConnectedComponentConstructor<any> = toConnect
   VolumeRangeProgressBase,
   { keys: [], transform: () => ({}) },
   useVolumeRangeProgressProps,
-  'VolumeRangeProgress'
+  'VolumeRangeProgress',
 );
 
 /**
@@ -282,7 +285,7 @@ export const VolumeRangeThumb: ConnectedComponentConstructor<any> = toConnectedH
   VolumeRangeThumbBase,
   { keys: [], transform: () => ({}) },
   useVolumeRangeThumbProps,
-  'VolumeRangeThumb'
+  'VolumeRangeThumb',
 );
 
 /**
@@ -295,7 +298,7 @@ export const VolumeRange = Object.assign(
     Track: VolumeRangeTrack,
     Progress: VolumeRangeProgress,
     Thumb: VolumeRangeThumb,
-  }
+  },
 ) as {
   Root: typeof VolumeRangeRoot;
   Track: typeof VolumeRangeTrack;
diff --git a/packages/html/html/src/index.ts b/packages/html/html/src/index.ts
index 2a8d5e64..bc14b968 100644
--- a/packages/html/html/src/index.ts
+++ b/packages/html/html/src/index.ts
@@ -1,13 +1,13 @@
-export * as MediaProvider from './media-provider.js';
-export * as MediaThemeDefault from './skins/media-skin-default.js';
+export { CurrentTimeDisplay } from './components/media-current-time-display.js';
+export { DurationDisplay } from './components/media-duration-display.js';
 
+export { FullscreenButton } from './components/media-fullscreen-button.js';
+export { MuteButton } from './components/media-mute-button.js';
 // New hook-style components
 export { PlayButton } from './components/media-play-button.js';
-export { MuteButton } from './components/media-mute-button.js';
 export { VolumeRange } from './components/media-volume-range.js';
-export { FullscreenButton } from './components/media-fullscreen-button.js';
-export { DurationDisplay } from './components/media-duration-display.js';
-export { CurrentTimeDisplay } from './components/media-current-time-display.js';
+export * as MediaProvider from './media-provider.js';
+export * as MediaThemeDefault from './skins/media-skin-default.js';
 
 export function defineVjsPlayer(): void {
   /** @TODO - Reimplement me (at least as a POC) (CJP) */
diff --git a/packages/html/html/src/skins/media-skin-default.ts b/packages/html/html/src/skins/media-skin-default.ts
index cdf6e8b3..93b0ffb7 100644
--- a/packages/html/html/src/skins/media-skin-default.ts
+++ b/packages/html/html/src/skins/media-skin-default.ts
@@ -1,5 +1,6 @@
 import { MediaSkin } from '../media-skin';
 
+import { uniqueId } from '../utils/element-utils';
 import '../media-container';
 import '../components/media-play-button';
 import '../components/media-mute-button';
@@ -11,11 +12,10 @@ import '../components/media-current-time-display';
 import '../components/media-popover';
 import '../components/media-tooltip';
 import '@vjs-10/html-icons';
-import { uniqueId } from '../utils/element-utils';
 
 export function getTemplateHTML() {
   const portalId = uniqueId();
-  
+
   return /* html */ `
     ${MediaSkin.getTemplateHTML()}
     <style>
diff --git a/packages/html/html/src/utils/component-factory.ts b/packages/html/html/src/utils/component-factory.ts
index 825a3dd0..8b7b51b8 100644
--- a/packages/html/html/src/utils/component-factory.ts
+++ b/packages/html/html/src/utils/component-factory.ts
@@ -4,16 +4,16 @@ import { ConsumerMixin } from '@open-wc/context-protocol';
  * Generic types for HTML component hooks pattern
  * Mirrors the React hooks architecture for consistency
  */
-export type StateHook<T = any> = {
+export interface StateHook<T = any> {
   keys: string[];
   transform: (rawState: any, mediaStore: any) => T;
-};
+}
 
 export type PropsHook<T = any, P = any> = (state: T, element: HTMLElement) => P;
 
-export type ConnectedComponentConstructor<State> = {
+export interface ConnectedComponentConstructor<State> {
   new (state: State): HTMLElement;
-};
+}
 
 /**
  * Generic factory function to create connected HTML components using hooks pattern.
@@ -26,12 +26,7 @@ export type ConnectedComponentConstructor<State> = {
  * @param displayName - Display name for debugging
  * @returns Connected custom element class with media store integration
  */
-export const toConnectedHTMLComponent = <State = any>(
-  BaseClass: CustomElementConstructor,
-  stateHook: StateHook<State>,
-  propsHook: PropsHook<State>,
-  displayName?: string
-): ConnectedComponentConstructor<State> => {
+export function toConnectedHTMLComponent<State = any>(BaseClass: CustomElementConstructor, stateHook: StateHook<State>, propsHook: PropsHook<State>, displayName?: string): ConnectedComponentConstructor<State> {
   const ConnectedComponent = class extends ConsumerMixin(BaseClass) {
     static get observedAttributes(): string[] {
       return [
@@ -81,4 +76,4 @@ export const toConnectedHTMLComponent = <State = any>(
   }
 
   return ConnectedComponent;
-};
+}
diff --git a/packages/react-native/react-native-icons/package.json b/packages/react-native/react-native-icons/package.json
index b16b583e..1cf05367 100644
--- a/packages/react-native/react-native-icons/package.json
+++ b/packages/react-native/react-native-icons/package.json
@@ -3,15 +3,23 @@
   "type": "module",
   "version": "0.1.0",
   "description": "React Native icon library for Video.js",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "keywords": [
+    "icons",
+    "react-native",
+    "media",
+    "player",
+    "mobile"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     }
   },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -22,14 +30,6 @@
     "test": "echo \"No tests yet\"",
     "clean": "rm -rf dist"
   },
-  "keywords": [
-    "icons",
-    "react-native",
-    "media",
-    "player",
-    "mobile"
-  ],
-  "license": "Apache-2.0",
   "peerDependencies": {
     "react": ">=16.8.0"
   },
diff --git a/packages/react-native/react-native-icons/tsconfig.json b/packages/react-native/react-native-icons/tsconfig.json
index 61b21bbc..df7cb2db 100644
--- a/packages/react-native/react-native-icons/tsconfig.json
+++ b/packages/react-native/react-native-icons/tsconfig.json
@@ -1,12 +1,12 @@
 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
-    },
-    "jsx": "react-jsx",
-    "jsxImportSource": "react"
+    }
   },
   "include": ["src"]
 }
diff --git a/packages/react-native/react-native-media-elements/package.json b/packages/react-native/react-native-media-elements/package.json
index c8d8dff3..282d87a9 100644
--- a/packages/react-native/react-native-media-elements/package.json
+++ b/packages/react-native/react-native-media-elements/package.json
@@ -3,15 +3,23 @@
   "type": "module",
   "version": "0.1.0",
   "description": "React Native media element components, hooks, and utilities",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "keywords": [
+    "media",
+    "react-native",
+    "video",
+    "audio",
+    "mobile"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     }
   },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -22,14 +30,6 @@
     "test": "echo \"No tests yet\"",
     "clean": "rm -rf dist"
   },
-  "keywords": [
-    "media",
-    "react-native",
-    "video",
-    "audio",
-    "mobile"
-  ],
-  "license": "Apache-2.0",
   "peerDependencies": {
     "react": ">=16.8.0"
   },
diff --git a/packages/react-native/react-native-media-elements/src/index.ts b/packages/react-native/react-native-media-elements/src/index.ts
index dfded90e..a62bb76e 100644
--- a/packages/react-native/react-native-media-elements/src/index.ts
+++ b/packages/react-native/react-native-media-elements/src/index.ts
@@ -27,10 +27,10 @@ export interface MediaElementRef {
   readyState: number;
   networkState: number;
 
-  play(): Promise<void>;
-  pause(): void;
-  load(): void;
-  seek(time: number): void;
+  play: () => Promise<void>;
+  pause: () => void;
+  load: () => void;
+  seek: (time: number) => void;
 }
 
 export const VideoElement: React.ForwardRefExoticComponent<MediaElementProps> = forwardRef<
diff --git a/packages/react-native/react-native-media-elements/tsconfig.json b/packages/react-native/react-native-media-elements/tsconfig.json
index 61b21bbc..df7cb2db 100644
--- a/packages/react-native/react-native-media-elements/tsconfig.json
+++ b/packages/react-native/react-native-media-elements/tsconfig.json
@@ -1,12 +1,12 @@
 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
-    },
-    "jsx": "react-jsx",
-    "jsxImportSource": "react"
+    }
   },
   "include": ["src"]
 }
diff --git a/packages/react-native/react-native/package.json b/packages/react-native/react-native/package.json
index 80d970f3..6e565123 100644
--- a/packages/react-native/react-native/package.json
+++ b/packages/react-native/react-native/package.json
@@ -3,15 +3,23 @@
   "type": "module",
   "version": "0.1.0",
   "description": "React Native library for building media players",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "keywords": [
+    "media",
+    "player",
+    "react-native",
+    "mobile",
+    "components"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     }
   },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -22,21 +30,13 @@
     "test": "echo \"No tests yet\"",
     "clean": "rm -rf dist"
   },
-  "keywords": [
-    "media",
-    "player",
-    "react-native",
-    "mobile",
-    "components"
-  ],
-  "license": "Apache-2.0",
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
   "dependencies": {
     "@vjs-10/react-native-icons": "workspace:*",
     "@vjs-10/react-native-media-elements": "workspace:*"
   },
-  "peerDependencies": {
-    "react": ">=16.8.0"
-  },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "react": "^18.0.0",
diff --git a/packages/react-native/react-native/tsconfig.json b/packages/react-native/react-native/tsconfig.json
index 61b21bbc..df7cb2db 100644
--- a/packages/react-native/react-native/tsconfig.json
+++ b/packages/react-native/react-native/tsconfig.json
@@ -1,12 +1,12 @@
 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
-    },
-    "jsx": "react-jsx",
-    "jsxImportSource": "react"
+    }
   },
   "include": ["src"]
 }
diff --git a/packages/react/react-icons/package.json b/packages/react/react-icons/package.json
index 38306674..5326d0b0 100644
--- a/packages/react/react-icons/package.json
+++ b/packages/react/react-icons/package.json
@@ -3,15 +3,23 @@
   "type": "module",
   "version": "0.1.0",
   "description": "React icon library for Video.js",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "keywords": [
+    "icons",
+    "react",
+    "media",
+    "player",
+    "components"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     }
   },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -24,20 +32,12 @@
     "generate:icons": "svgr --config-file svgr.config.js --out-dir src/generated-icons ../../core/icons/assets && pnpm format:icons",
     "test": "echo \"No tests yet\""
   },
-  "keywords": [
-    "icons",
-    "react",
-    "media",
-    "player",
-    "components"
-  ],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@vjs-10/icons": "workspace:*"
-  },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
+  "dependencies": {
+    "@vjs-10/icons": "workspace:*"
+  },
   "devDependencies": {
     "@svgr/babel-plugin-add-jsx-attribute": "^8.0.0",
     "@svgr/cli": "^8.1.0",
diff --git a/packages/react/react-icons/svgr.config.js b/packages/react/react-icons/svgr.config.js
index 0287f934..4edaeda4 100644
--- a/packages/react/react-icons/svgr.config.js
+++ b/packages/react/react-icons/svgr.config.js
@@ -12,9 +12,9 @@ export default {
   replaceAttrValues: {
     '#000': '{color}',
     '#fff': '{color}',
-    black: '{color}',
-    white: '{color}',
-    currentColor: '{color}',
+    'black': '{color}',
+    'white': '{color}',
+    'currentColor': '{color}',
   },
   template: (variables, { tpl }) => {
     return tpl`
@@ -67,6 +67,6 @@ ${variables.exports};
  */
 `;
 
-    return header + exportEntries.join('\n') + '\n';
+    return `${header + exportEntries.join('\n')}\n`;
   },
 };
diff --git a/packages/react/react-icons/tsconfig.json b/packages/react/react-icons/tsconfig.json
index 61b21bbc..df7cb2db 100644
--- a/packages/react/react-icons/tsconfig.json
+++ b/packages/react/react-icons/tsconfig.json
@@ -1,12 +1,12 @@
 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
-    },
-    "jsx": "react-jsx",
-    "jsxImportSource": "react"
+    }
   },
   "include": ["src"]
 }
diff --git a/packages/react/react-media-elements/package.json b/packages/react/react-media-elements/package.json
index 4dc9ebda..e7728167 100644
--- a/packages/react/react-media-elements/package.json
+++ b/packages/react/react-media-elements/package.json
@@ -3,15 +3,23 @@
   "type": "module",
   "version": "0.1.0",
   "description": "React media element components, hooks, and utilities",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "keywords": [
+    "media",
+    "react",
+    "hooks",
+    "video",
+    "audio"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     }
   },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -22,21 +30,13 @@
     "test": "echo \"No tests yet\"",
     "clean": "rm -rf dist"
   },
-  "keywords": [
-    "media",
-    "react",
-    "hooks",
-    "video",
-    "audio"
-  ],
-  "license": "Apache-2.0",
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
   "dependencies": {
     "@vjs-10/media": "workspace:*",
     "@vjs-10/playback-engine": "workspace:*"
   },
-  "peerDependencies": {
-    "react": ">=16.8.0"
-  },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "react": "^18.0.0",
diff --git a/packages/react/react-media-elements/src/index.ts b/packages/react/react-media-elements/src/index.ts
index ab84d0ea..c8cbae7a 100644
--- a/packages/react/react-media-elements/src/index.ts
+++ b/packages/react/react-media-elements/src/index.ts
@@ -1,2 +1,2 @@
-export { VideoElement, AudioElement, createMediaElementAdapter } from './media-elements';
-export type { MediaElementProps, MediaElementRef, MediaElementLike } from './media-elements';
+export { AudioElement, createMediaElementAdapter, VideoElement } from './media-elements';
+export type { MediaElementLike, MediaElementProps, MediaElementRef } 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 6f215eaf..2b120c06 100644
--- a/packages/react/react-media-elements/src/media-elements.tsx
+++ b/packages/react/react-media-elements/src/media-elements.tsx
@@ -13,13 +13,13 @@ interface MediaElementLike {
   playbackRate: number;
   readyState: number;
   networkState: number;
-  play(): Promise<void>;
-  pause(): void;
-  load(): void;
+  play: () => Promise<void>;
+  pause: () => void;
+  load: () => void;
 }
 
 // @ts-ignore - Placeholder function for future implementation
-const createMediaElementAdapter = (element: HTMLMediaElement): MediaElementLike => {
+function createMediaElementAdapter(element: HTMLMediaElement): MediaElementLike {
   return {
     get currentTime() {
       return element.currentTime;
@@ -64,7 +64,7 @@ const createMediaElementAdapter = (element: HTMLMediaElement): MediaElementLike
     pause: () => element.pause(),
     load: () => element.load(),
   };
-};
+}
 
 // @ts-ignore - Placeholder class for future implementation
 class NativePlaybackEngine {
@@ -127,7 +127,7 @@ export const VideoElement: ForwardRefExoticComponent<MediaElementProps> = forwar
       className,
       style,
     },
-    ref
+    ref,
   ) => {
     const videoRef = useRef<HTMLVideoElement>(null);
     const engineRef = useRef(new NativePlaybackEngine());
@@ -228,7 +228,7 @@ export const VideoElement: ForwardRefExoticComponent<MediaElementProps> = forwar
         pause: () => adapterRef.current?.pause(),
         load: () => adapterRef.current?.load(),
       }),
-      []
+      [],
     );
 
     return (
@@ -245,7 +245,7 @@ export const VideoElement: ForwardRefExoticComponent<MediaElementProps> = forwar
         style={style}
       />
     );
-  }
+  },
 );
 
 VideoElement.displayName = 'VideoElement';
@@ -272,7 +272,7 @@ export const AudioElement: ForwardRefExoticComponent<MediaElementProps> = forwar
       className,
       style,
     },
-    ref
+    ref,
   ) => {
     const audioRef = useRef<HTMLAudioElement>(null);
     const engineRef = useRef(new NativePlaybackEngine());
@@ -373,7 +373,7 @@ export const AudioElement: ForwardRefExoticComponent<MediaElementProps> = forwar
         pause: () => adapterRef.current?.pause(),
         load: () => adapterRef.current?.load(),
       }),
-      []
+      [],
     );
 
     return (
@@ -389,7 +389,7 @@ export const AudioElement: ForwardRefExoticComponent<MediaElementProps> = forwar
         style={style}
       />
     );
-  }
+  },
 );
 
 AudioElement.displayName = 'AudioElement';
diff --git a/packages/react/react-media-elements/tsconfig.json b/packages/react/react-media-elements/tsconfig.json
index 61b21bbc..df7cb2db 100644
--- a/packages/react/react-media-elements/tsconfig.json
+++ b/packages/react/react-media-elements/tsconfig.json
@@ -1,12 +1,12 @@
 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
-    },
-    "jsx": "react-jsx",
-    "jsxImportSource": "react"
+    }
   },
   "include": ["src"]
 }
diff --git a/packages/react/react-media-store/package.json b/packages/react/react-media-store/package.json
index 29cfd8ba..bf387f91 100644
--- a/packages/react/react-media-store/package.json
+++ b/packages/react/react-media-store/package.json
@@ -3,15 +3,24 @@
   "type": "module",
   "version": "0.1.0",
   "description": "React media store integration",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "keywords": [
+    "media",
+    "store",
+    "state",
+    "react",
+    "hooks",
+    "context"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     }
   },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -22,21 +31,12 @@
     "test": "echo \"No tests yet\"",
     "clean": "rm -rf dist"
   },
-  "keywords": [
-    "media",
-    "store",
-    "state",
-    "react",
-    "hooks",
-    "context"
-  ],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@vjs-10/media-store": "workspace:*"
-  },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
+  "dependencies": {
+    "@vjs-10/media-store": "workspace:*"
+  },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "react": "^18.0.0",
diff --git a/packages/react/react-media-store/src/MediaProvider.tsx b/packages/react/react-media-store/src/MediaProvider.tsx
index 2f218e68..36c70c22 100644
--- a/packages/react/react-media-store/src/MediaProvider.tsx
+++ b/packages/react/react-media-store/src/MediaProvider.tsx
@@ -4,10 +4,10 @@
 import type { MediaStore } from '@vjs-10/media-store';
 import type { Context, ReactNode } from 'react';
 
-import { createContext, useContext, useMemo } from 'react';
-
 import { createMediaStore } from '@vjs-10/media-store';
 
+import { createContext, useContext, useMemo } from 'react';
+
 import { useSyncExternalStoreWithSelector } from './useSyncExternalStoreWithSelector.js';
 
 const identity = (x?: any) => x;
@@ -23,7 +23,7 @@ const identity = (x?: any) => x;
  */
 export const MediaContext: Context<any | null> = createContext<any | null>(null);
 
-export const MediaProvider = ({ children }: { children: ReactNode }): JSX.Element => {
+export function MediaProvider({ children }: { children: ReactNode }): JSX.Element {
   const value = useMemo(() => createMediaStore(), []);
 
   // useEffect(() => {
@@ -40,21 +40,21 @@ export const MediaProvider = ({ children }: { children: ReactNode }): JSX.Elemen
   // }, []);
 
   return <MediaContext.Provider value={value}>{children}</MediaContext.Provider>;
-};
+}
 
-export const useMediaStore = (): MediaStore => {
+export function useMediaStore(): MediaStore {
   return useContext(MediaContext);
-};
+}
 
-export const useMediaDispatch = (): ((value: any) => unknown) => {
+export function useMediaDispatch(): ((value: any) => unknown) {
   const store = useContext(MediaContext);
   const dispatch = store?.dispatch ?? identity;
   return (value: any) => {
     return dispatch(value);
   };
-};
+}
 
-export const useMediaRef = () => {
+export function useMediaRef() {
   const dispatch = useMediaDispatch();
 
   return (element: any): void => {
@@ -65,7 +65,7 @@ export const useMediaRef = () => {
     */
     dispatch({ type: 'mediastateownerchangerequest', detail: element });
   };
-};
+}
 
 export const refEquality = (a: any, b: any): boolean => a === b;
 
@@ -76,7 +76,7 @@ const hasOwnProperty = Object.prototype.hasOwnProperty;
  * so we may treat them specifically as unequal if they are not a) both arrays
  * or b) don't contain the same (shallowly compared) elements.
  */
-export const shallowEqual = (objA: any, objB: any): boolean => {
+export function shallowEqual(objA: any, objB: any): boolean {
   // Using Object.is as a first pass, as it covers a lot of the "simple" cases that are
   // more complex than strict equality and is a built-in. For discussion, see, e.g.:
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#description
@@ -108,28 +108,25 @@ export const shallowEqual = (objA: any, objB: any): boolean => {
   for (let i = 0; i < keysA.length; i++) {
     // NOTE: Since we've already guaranteed the keys list lengths are the same, we can safely cast to string here (CJP)
     if (
-      !hasOwnProperty.call(objB, keysA[i] as string) ||
-      !Object.is(objA[keysA[i] as string], objB[keysA[i] as string])
+      !hasOwnProperty.call(objB, keysA[i] as string)
+      || !Object.is(objA[keysA[i] as string], objB[keysA[i] as string])
     ) {
       return false;
     }
   }
 
   return true;
-};
+}
 
-export const useMediaSelector = <S = any,>(
-  selector: (state: any) => S,
-  equalityFn: (a: S, b: S) => boolean = refEquality
-): S => {
+export function useMediaSelector<S = any,>(selector: (state: any) => S, equalityFn: (a: S, b: S) => boolean = refEquality): S {
   const store = useContext(MediaContext);
   const selectedState = useSyncExternalStoreWithSelector(
     store?.subscribe ?? identity,
     store?.getState ?? identity,
     store?.getState ?? identity,
     selector,
-    equalityFn
+    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 92d7df5c..292a5f06 100644
--- a/packages/react/react-media-store/src/index.ts
+++ b/packages/react/react-media-store/src/index.ts
@@ -1,11 +1,11 @@
 export {
-  MediaProvider,
   MediaContext,
-  useMediaStore,
+  MediaProvider,
+  shallowEqual,
   useMediaDispatch,
   useMediaRef,
   useMediaSelector,
-  shallowEqual,
+  useMediaStore,
 } from './MediaProvider';
 
 export type MediaStore = any;
diff --git a/packages/react/react-media-store/src/useSyncExternalStoreWithSelector.ts b/packages/react/react-media-store/src/useSyncExternalStoreWithSelector.ts
index f39a7ca9..d704be02 100644
--- a/packages/react/react-media-store/src/useSyncExternalStoreWithSelector.ts
+++ b/packages/react/react-media-store/src/useSyncExternalStoreWithSelector.ts
@@ -22,15 +22,15 @@ function isPolyfill(x: any, y: any) {
   );
 }
 
-type SnapshotRef<Selection> =
+type SnapshotRef<Selection>
+  = | {
+    hasValue: true;
+    value: Selection;
+  }
   | {
-      hasValue: true;
-      value: Selection;
-    }
-  | {
-      hasValue: false;
-      value: null;
-    }
+    hasValue: false;
+    value: null;
+  }
   | null;
 
 const is: (x: any, y: any) => boolean = typeof Object.is === 'function' ? Object.is : isPolyfill;
@@ -41,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,
 ): Selection {
   // Use this to track the rendered snapshot.
   const instRef = useRef<SnapshotRef<Selection>>(null);
@@ -52,7 +52,8 @@ export function useSyncExternalStoreWithSelector<Snapshot, Selection>(
       value: null,
     };
     instRef.current = inst as SnapshotRef<Selection>;
-  } else {
+  }
+  else {
     inst = instRef.current;
   }
 
@@ -113,8 +114,8 @@ export function useSyncExternalStoreWithSelector<Snapshot, Selection>(
     // Assigning this to a constant so that Flow knows it can't change.
     const maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot;
     const getSnapshotWithSelector = () => memoizedSelector(getSnapshot());
-    const getServerSnapshotWithSelector =
-      maybeGetServerSnapshot === null ? undefined : () => memoizedSelector(maybeGetServerSnapshot());
+    const getServerSnapshotWithSelector
+      = maybeGetServerSnapshot === null ? undefined : () => memoizedSelector(maybeGetServerSnapshot());
     return [getSnapshotWithSelector, getServerSnapshotWithSelector];
   }, [getSnapshot, getServerSnapshot, selector, isEqual]);
 
diff --git a/packages/react/react-media-store/tsconfig.json b/packages/react/react-media-store/tsconfig.json
index 61b21bbc..df7cb2db 100644
--- a/packages/react/react-media-store/tsconfig.json
+++ b/packages/react/react-media-store/tsconfig.json
@@ -1,12 +1,12 @@
 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
-    },
-    "jsx": "react-jsx",
-    "jsxImportSource": "react"
+    }
   },
   "include": ["src"]
 }
diff --git a/packages/react/react/package.json b/packages/react/react/package.json
index 164f4a84..70e14387 100644
--- a/packages/react/react/package.json
+++ b/packages/react/react/package.json
@@ -3,15 +3,23 @@
   "type": "module",
   "version": "0.1.0",
   "description": "React library for building media players",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "keywords": [
+    "media",
+    "player",
+    "react",
+    "components",
+    "hooks"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     }
   },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -22,14 +30,9 @@
     "test": "echo \"No tests yet\"",
     "clean": "rm -rf dist"
   },
-  "keywords": [
-    "media",
-    "player",
-    "react",
-    "components",
-    "hooks"
-  ],
-  "license": "Apache-2.0",
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
   "dependencies": {
     "@floating-ui/react": "^0.27.16",
     "@vjs-10/core": "workspace:*",
@@ -39,9 +42,6 @@
     "@vjs-10/react-media-elements": "workspace:*",
     "@vjs-10/react-media-store": "workspace:*"
   },
-  "peerDependencies": {
-    "react": ">=16.8.0"
-  },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "react": "^18.0.0",
diff --git a/packages/react/react/src/components/CurrentTimeDisplay.tsx b/packages/react/react/src/components/CurrentTimeDisplay.tsx
index e93470a1..49f5113c 100644
--- a/packages/react/react/src/components/CurrentTimeDisplay.tsx
+++ b/packages/react/react/src/components/CurrentTimeDisplay.tsx
@@ -1,17 +1,15 @@
-import type { ConnectedComponent } from '../utils/component-factory';
 import type { PropsWithChildren } from 'react';
+import type { ConnectedComponent } from '../utils/component-factory';
 
 import { currentTimeDisplayStateDefinition, formatDisplayTime } from '@vjs-10/media-store';
 import { shallowEqual, useMediaSelector } from '@vjs-10/react-media-store';
 
 import { toConnectedComponent } from '../utils/component-factory';
 
-export const useCurrentTimeDisplayState = (
-  _props: any
-): {
+export function useCurrentTimeDisplayState(_props: any): {
   currentTime: number;
   duration: number;
-} => {
+} {
   /** @TODO Fix type issues with hooks (CJP) */
   const mediaState = useMediaSelector(currentTimeDisplayStateDefinition.stateTransform, shallowEqual);
 
@@ -20,49 +18,43 @@ export const useCurrentTimeDisplayState = (
     currentTime: mediaState.currentTime ?? 0,
     duration: mediaState.duration ?? 0,
   };
-};
+}
 
 export type useCurrentTimeDisplayState = typeof useCurrentTimeDisplayState;
 export type CurrentTimeDisplayState = ReturnType<useCurrentTimeDisplayState>;
 
-export const useCurrentTimeDisplayProps = (
-  props: PropsWithChildren,
-  _state: ReturnType<typeof useCurrentTimeDisplayState>
-): PropsWithChildren<Record<string, unknown>> => {
+export function useCurrentTimeDisplayProps(props: PropsWithChildren, _state: ReturnType<typeof useCurrentTimeDisplayState>): PropsWithChildren<Record<string, unknown>> {
   const baseProps: Record<string, any> = {
     /** external props spread last to allow for overriding */
     ...props,
   };
 
   return baseProps;
-};
+}
 
 export type useCurrentTimeDisplayProps = typeof useCurrentTimeDisplayProps;
 type CurrentTimeDisplayProps = ReturnType<useCurrentTimeDisplayProps>;
 
-export const renderCurrentTimeDisplay = (
-  props: CurrentTimeDisplayProps,
-  state: CurrentTimeDisplayState
-): JSX.Element => {
+export function renderCurrentTimeDisplay(props: CurrentTimeDisplayProps, state: CurrentTimeDisplayState): JSX.Element {
   const { showRemaining, ...restProps } = props;
 
   /** @TODO Should this live here or elsewhere? (CJP) */
-  const timeLabel =
-    showRemaining && state.duration != null && state.currentTime != null
+  const timeLabel
+    = showRemaining && state.duration != null && state.currentTime != null
       ? formatDisplayTime(-(state.duration - state.currentTime))
       : formatDisplayTime(state.currentTime);
 
   return <span {...restProps}>{timeLabel}</span>;
-};
+}
 
 export type renderCurrentTimeDisplay = typeof renderCurrentTimeDisplay;
 
-export const CurrentTimeDisplay: ConnectedComponent<CurrentTimeDisplayProps, typeof renderCurrentTimeDisplay> =
-  toConnectedComponent(
+export const CurrentTimeDisplay: ConnectedComponent<CurrentTimeDisplayProps, typeof renderCurrentTimeDisplay>
+  = 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 8ff39482..63549eea 100644
--- a/packages/react/react/src/components/DurationDisplay.tsx
+++ b/packages/react/react/src/components/DurationDisplay.tsx
@@ -1,16 +1,14 @@
-import type { ConnectedComponent } from '../utils/component-factory';
 import type { PropsWithChildren } from 'react';
+import type { ConnectedComponent } from '../utils/component-factory';
 
 import { durationDisplayStateDefinition, formatDisplayTime } from '@vjs-10/media-store';
 import { shallowEqual, useMediaSelector } from '@vjs-10/react-media-store';
 
 import { toConnectedComponent } from '../utils/component-factory';
 
-export const useDurationDisplayState = (
-  _props: any
-): {
+export function useDurationDisplayState(_props: any): {
   duration: number;
-} => {
+} {
   /** @TODO Fix type issues with hooks (CJP) */
   const mediaState = useMediaSelector(durationDisplayStateDefinition.stateTransform, shallowEqual);
 
@@ -18,30 +16,30 @@ export const useDurationDisplayState = (
   return {
     duration: mediaState.duration ?? 0,
   };
-};
+}
 
 export type useDurationDisplayState = typeof useDurationDisplayState;
 export type DurationDisplayState = ReturnType<useDurationDisplayState>;
 
-export const useDurationDisplayProps = (props: PropsWithChildren): PropsWithChildren<Record<string, unknown>> => {
+export function useDurationDisplayProps(props: PropsWithChildren): PropsWithChildren<Record<string, unknown>> {
   const baseProps: Record<string, any> = {
     /** external props spread last to allow for overriding */
     ...props,
   };
 
   return baseProps;
-};
+}
 
 export type useDurationDisplayProps = typeof useDurationDisplayProps;
 type DurationDisplayProps = ReturnType<useDurationDisplayProps>;
 
-export const renderDurationDisplay = (props: DurationDisplayProps, state: DurationDisplayState): JSX.Element => {
+export function renderDurationDisplay(props: DurationDisplayProps, state: DurationDisplayState): JSX.Element {
   return <span {...props}>{formatDisplayTime(state.duration)}</span>;
-};
+}
 
 export type renderDurationDisplay = typeof renderDurationDisplay;
 
-export const DurationDisplay: ConnectedComponent<DurationDisplayProps, typeof renderDurationDisplay> =
-  toConnectedComponent(useDurationDisplayState, useDurationDisplayProps, renderDurationDisplay, 'DurationDisplay');
+export const DurationDisplay: ConnectedComponent<DurationDisplayProps, typeof renderDurationDisplay>
+  = toConnectedComponent(useDurationDisplayState, useDurationDisplayProps, renderDurationDisplay, 'DurationDisplay');
 
 export default DurationDisplay;
diff --git a/packages/react/react/src/components/FullscreenButton.tsx b/packages/react/react/src/components/FullscreenButton.tsx
index 0c5e3a61..9610696c 100644
--- a/packages/react/react/src/components/FullscreenButton.tsx
+++ b/packages/react/react/src/components/FullscreenButton.tsx
@@ -1,27 +1,25 @@
-import type { ConnectedComponent } from '../utils/component-factory';
 import type { PropsWithChildren } from 'react';
-
-import { useMemo } from 'react';
+import type { ConnectedComponent } from '../utils/component-factory';
 
 import { fullscreenButtonStateDefinition } from '@vjs-10/media-store';
+
 import { shallowEqual, useMediaSelector, useMediaStore } from '@vjs-10/react-media-store';
+import { useMemo } from 'react';
 
 import { toConnectedComponent } from '../utils/component-factory';
 
-export const useFullscreenButtonState = (
-  _props: any
-): {
+export function useFullscreenButtonState(_props: any): {
   fullscreen: boolean;
   requestEnterFullscreen: () => void;
   requestExitFullscreen: () => void;
-} => {
+} {
   const mediaStore = useMediaStore();
   /** @TODO Fix type issues with hooks (CJP) */
   const mediaState = useMediaSelector(fullscreenButtonStateDefinition.stateTransform, shallowEqual);
 
   const methods = useMemo(
     () => fullscreenButtonStateDefinition.createRequestMethods(mediaStore.dispatch),
-    [mediaStore]
+    [mediaStore],
   );
 
   return {
@@ -29,22 +27,19 @@ export const useFullscreenButtonState = (
     requestEnterFullscreen: methods.requestEnterFullscreen,
     requestExitFullscreen: methods.requestExitFullscreen,
   } as const;
-};
+}
 
 export type useFullscreenButtonState = typeof useFullscreenButtonState;
 export type FullscreenButtonState = ReturnType<useFullscreenButtonState>;
 
-export const useFullscreenButtonProps = (
-  props: PropsWithChildren,
-  state: ReturnType<typeof useFullscreenButtonState>
-): PropsWithChildren<Record<string, unknown>> => {
+export function useFullscreenButtonProps(props: PropsWithChildren, state: ReturnType<typeof useFullscreenButtonState>): PropsWithChildren<Record<string, unknown>> {
   const baseProps: Record<string, any> = {
     /** @TODO Need another state provider in core for i18n (CJP) */
     /** aria attributes/props */
-    role: 'button',
-    ['aria-label']: state.fullscreen ? 'exit fullscreen' : 'enter fullscreen',
+    'role': 'button',
+    'aria-label': state.fullscreen ? 'exit fullscreen' : 'enter fullscreen',
     /** tooltip */
-    ['data-tooltip']: state.fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen',
+    'data-tooltip': state.fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen',
     /** external props spread last to allow for overriding */
     ...props,
   };
@@ -55,12 +50,12 @@ export const useFullscreenButtonProps = (
   }
 
   return baseProps;
-};
+}
 
 export type useFullscreenButtonProps = typeof useFullscreenButtonProps;
 type FullscreenButtonProps = ReturnType<useFullscreenButtonProps>;
 
-export const renderFullscreenButton = (props: FullscreenButtonProps, state: FullscreenButtonState): JSX.Element => {
+export function renderFullscreenButton(props: FullscreenButtonProps, state: FullscreenButtonState): JSX.Element {
   return (
     <button
       {...props}
@@ -69,7 +64,8 @@ export const renderFullscreenButton = (props: FullscreenButtonProps, state: Full
         if (props.disabled) return;
         if (state.fullscreen) {
           state.requestExitFullscreen();
-        } else {
+        }
+        else {
           state.requestEnterFullscreen();
         }
       }}
@@ -77,11 +73,11 @@ export const renderFullscreenButton = (props: FullscreenButtonProps, state: Full
       {props.children}
     </button>
   );
-};
+}
 
 export type renderFullscreenButton = typeof renderFullscreenButton;
 
-export const FullscreenButton: ConnectedComponent<FullscreenButtonProps, typeof renderFullscreenButton> =
-  toConnectedComponent(useFullscreenButtonState, useFullscreenButtonProps, renderFullscreenButton, 'FullscreenButton');
+export const FullscreenButton: ConnectedComponent<FullscreenButtonProps, typeof renderFullscreenButton>
+  = toConnectedComponent(useFullscreenButtonState, useFullscreenButtonProps, renderFullscreenButton, 'FullscreenButton');
 
 export default FullscreenButton;
diff --git a/packages/react/react/src/components/MediaContainer.tsx b/packages/react/react/src/components/MediaContainer.tsx
index b8d74ea1..2f8d70d2 100644
--- a/packages/react/react/src/components/MediaContainer.tsx
+++ b/packages/react/react/src/components/MediaContainer.tsx
@@ -1,9 +1,9 @@
 import type { FC, HTMLProps, PropsWithChildren, RefCallback } from 'react';
 
-import { forwardRef, useCallback } from 'react';
-
 import { useMediaStore } from '@vjs-10/react-media-store';
 
+import { forwardRef, useCallback } from 'react';
+
 import { useComposedRefs } from '../utils/useComposedRefs';
 
 /**
@@ -21,7 +21,7 @@ import { useComposedRefs } from '../utils/useComposedRefs';
  *   return <div ref={containerRef}>{children}</div>;
  * };
  */
-export const useMediaContainerRef = (): RefCallback<HTMLElement | null> => {
+export function useMediaContainerRef(): RefCallback<HTMLElement | null> {
   const mediaStore = useMediaStore();
 
   return useCallback(
@@ -34,9 +34,9 @@ export const useMediaContainerRef = (): RefCallback<HTMLElement | null> => {
         detail: containerElement,
       });
     },
-    [mediaStore]
+    [mediaStore],
   );
-};
+}
 
 /**
  * MediaContainer component that automatically registers itself as the fullscreen container.
diff --git a/packages/react/react/src/components/MuteButton.tsx b/packages/react/react/src/components/MuteButton.tsx
index efef0ec8..0ec782d4 100644
--- a/packages/react/react/src/components/MuteButton.tsx
+++ b/packages/react/react/src/components/MuteButton.tsx
@@ -1,21 +1,19 @@
-import type { ConnectedComponent } from '../utils/component-factory';
 import type { PropsWithChildren } from 'react';
-
-import { useMemo } from 'react';
+import type { ConnectedComponent } from '../utils/component-factory';
 
 import { muteButtonStateDefinition } from '@vjs-10/media-store';
+
 import { shallowEqual, useMediaSelector, useMediaStore } from '@vjs-10/react-media-store';
+import { useMemo } from 'react';
 
 import { toConnectedComponent } from '../utils/component-factory';
 
-export const useMuteButtonState = (
-  _props: any
-): {
+export function useMuteButtonState(_props: any): {
   volumeLevel: string;
   muted: boolean;
   requestMute: () => void;
   requestUnmute: () => void;
-} => {
+} {
   const mediaStore = useMediaStore();
 
   /** @TODO Fix type issues with hooks (CJP) */
@@ -29,24 +27,21 @@ export const useMuteButtonState = (
     requestMute: methods.requestMute,
     requestUnmute: methods.requestUnmute,
   } as const;
-};
+}
 
 export type useMuteButtonState = typeof useMuteButtonState;
 export type MuteButtonState = ReturnType<useMuteButtonState>;
 
-export const useMuteButtonProps = (
-  props: PropsWithChildren,
-  state: ReturnType<typeof useMuteButtonState>
-): PropsWithChildren<Record<string, unknown>> => {
+export function useMuteButtonProps(props: PropsWithChildren, state: ReturnType<typeof useMuteButtonState>): PropsWithChildren<Record<string, unknown>> {
   const baseProps: Record<string, any> = {
     /** data attributes/props - non-boolean */
-    ['data-volume-level']: state.volumeLevel,
+    'data-volume-level': state.volumeLevel,
     /** @TODO Need another state provider in core for i18n (CJP) */
     /** aria attributes/props */
-    role: 'button',
-    ['aria-label']: state.muted ? 'unmute' : 'mute',
+    'role': 'button',
+    'aria-label': state.muted ? 'unmute' : 'mute',
     /** tooltip */
-    ['data-tooltip']: state.muted ? 'Unmute' : 'Mute',
+    'data-tooltip': state.muted ? 'Unmute' : 'Mute',
     /** external props spread last to allow for overriding */
     ...props,
   };
@@ -57,12 +52,12 @@ export const useMuteButtonProps = (
   }
 
   return baseProps;
-};
+}
 
 export type useMuteButtonProps = typeof useMuteButtonProps;
 type MuteButtonProps = ReturnType<useMuteButtonProps>;
 
-export const renderMuteButton = (props: MuteButtonProps, state: MuteButtonState): JSX.Element => {
+export function renderMuteButton(props: MuteButtonProps, state: MuteButtonState): JSX.Element {
   return (
     <button
       {...props}
@@ -71,7 +66,8 @@ export const renderMuteButton = (props: MuteButtonProps, state: MuteButtonState)
         if (props.disabled) return;
         if (state.volumeLevel === 'off') {
           state.requestUnmute();
-        } else {
+        }
+        else {
           state.requestMute();
         }
       }}
@@ -79,7 +75,7 @@ export const renderMuteButton = (props: MuteButtonProps, state: MuteButtonState)
       {props.children}
     </button>
   );
-};
+}
 
 export type renderMuteButton = typeof renderMuteButton;
 
@@ -87,7 +83,7 @@ export const MuteButton: ConnectedComponent<MuteButtonProps, typeof renderMuteBu
   useMuteButtonState,
   useMuteButtonProps,
   renderMuteButton,
-  'MuteButton'
+  'MuteButton',
 );
 
 export default MuteButton;
diff --git a/packages/react/react/src/components/PlayButton.tsx b/packages/react/react/src/components/PlayButton.tsx
index a03214c5..1b243fd4 100644
--- a/packages/react/react/src/components/PlayButton.tsx
+++ b/packages/react/react/src/components/PlayButton.tsx
@@ -1,20 +1,18 @@
-import type { ConnectedComponent } from '../utils/component-factory';
 import type { PropsWithChildren } from 'react';
-
-import { useMemo } from 'react';
+import type { ConnectedComponent } from '../utils/component-factory';
 
 import { playButtonStateDefinition } from '@vjs-10/media-store';
+
 import { shallowEqual, useMediaSelector, useMediaStore } from '@vjs-10/react-media-store';
+import { useMemo } from 'react';
 
 import { toConnectedComponent } from '../utils/component-factory';
 
-export const usePlayButtonState = (
-  _props: any
-): {
+export function usePlayButtonState(_props: any): {
   paused: boolean;
   requestPlay: () => void;
   requestPause: () => void;
-} => {
+} {
   const mediaStore = useMediaStore();
 
   /** @TODO Fix type issues with hooks (CJP) */
@@ -27,22 +25,19 @@ export const usePlayButtonState = (
     requestPlay: methods.requestPlay,
     requestPause: methods.requestPause,
   };
-};
+}
 
 export type usePlayButtonState = typeof usePlayButtonState;
 export type PlayButtonState = ReturnType<usePlayButtonState>;
 
-export const usePlayButtonProps = (
-  props: Record<string, unknown>,
-  state: ReturnType<typeof usePlayButtonState>
-): PropsWithChildren<Record<string, unknown>> => {
+export function usePlayButtonProps(props: Record<string, unknown>, state: ReturnType<typeof usePlayButtonState>): PropsWithChildren<Record<string, unknown>> {
   const baseProps: Record<string, any> = {
     /** @TODO Need another state provider in core for i18n (CJP) */
     /** aria attributes/props */
-    role: 'button',
-    ['aria-label']: state.paused ? 'play' : 'pause',
+    'role': 'button',
+    'aria-label': state.paused ? 'play' : 'pause',
     /** tooltip */
-    ['data-tooltip']: state.paused ? 'Play' : 'Pause',
+    'data-tooltip': state.paused ? 'Play' : 'Pause',
     /** external props spread last to allow for overriding */
     ...props,
   };
@@ -53,12 +48,12 @@ export const usePlayButtonProps = (
   }
 
   return baseProps;
-};
+}
 
 export type usePlayButtonProps = typeof usePlayButtonProps;
 type PlayButtonProps = ReturnType<usePlayButtonProps>;
 
-export const renderPlayButton = (props: PlayButtonProps, state: PlayButtonState): JSX.Element => {
+export function renderPlayButton(props: PlayButtonProps, state: PlayButtonState): JSX.Element {
   return (
     <button
       {...props}
@@ -67,7 +62,8 @@ export const renderPlayButton = (props: PlayButtonProps, state: PlayButtonState)
         if (props.disabled) return;
         if (state.paused) {
           state.requestPlay();
-        } else {
+        }
+        else {
           state.requestPause();
         }
       }}
@@ -75,7 +71,7 @@ export const renderPlayButton = (props: PlayButtonProps, state: PlayButtonState)
       {props.children}
     </button>
   );
-};
+}
 
 export type renderPlayButton = typeof renderPlayButton;
 
@@ -83,7 +79,7 @@ export const PlayButton: ConnectedComponent<PlayButtonProps, typeof renderPlayBu
   usePlayButtonState,
   usePlayButtonProps,
   renderPlayButton,
-  'PlayButton'
+  'PlayButton',
 );
 
 export default PlayButton;
diff --git a/packages/react/react/src/components/Popover.tsx b/packages/react/react/src/components/Popover.tsx
index d8174d21..772c6af8 100644
--- a/packages/react/react/src/components/Popover.tsx
+++ b/packages/react/react/src/components/Popover.tsx
@@ -1,8 +1,6 @@
 import type { Placement } from '@floating-ui/react';
 import type { ReactNode } from 'react';
 
-import React, { createContext, useContext, useEffect, useState } from 'react';
-
 import {
   autoUpdate,
   flip,
@@ -17,6 +15,8 @@ import {
   useRole,
 } from '@floating-ui/react';
 
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
 interface PopoverContextType {
   open: boolean;
   setOpen: (open: boolean) => void;
diff --git a/packages/react/react/src/components/TimeRange.tsx b/packages/react/react/src/components/TimeRange.tsx
index 77c9b2fa..a6a4d950 100644
--- a/packages/react/react/src/components/TimeRange.tsx
+++ b/packages/react/react/src/components/TimeRange.tsx
@@ -1,10 +1,10 @@
 import type { ConnectedComponent } from '../utils/component-factory';
 
-import { useCallback, useMemo } from 'react';
-
 import { TimeRange as CoreTimeRange } from '@vjs-10/core';
+
 import { timeRangeStateDefinition } from '@vjs-10/media-store';
 import { shallowEqual, useMediaSelector, useMediaStore } from '@vjs-10/react-media-store';
+import { useCallback, useMemo } from 'react';
 
 import { toConnectedComponent, toContextComponent, useCore } from '../utils/component-factory';
 
@@ -32,7 +32,7 @@ interface TimeRangeRenderProps extends React.ComponentProps<'div'> {
 // ROOT COMPONENT
 // ============================================================================
 
-export const useTimeRangeRootState = (props: TimeRange.Props): TimeRange.State => {
+export function useTimeRangeRootState(props: TimeRange.Props): TimeRange.State {
   const { orientation = 'horizontal' } = props;
   const mediaStore = useMediaStore();
   const mediaState = useMediaSelector(timeRangeStateDefinition.stateTransform, shallowEqual);
@@ -45,20 +45,20 @@ export const useTimeRangeRootState = (props: TimeRange.Props): TimeRange.State =
     orientation,
     core,
   };
-};
+}
 
-export const useTimeRangeRootProps = (props: TimeRange.Props, state: TimeRange.State): TimeRangeRenderProps => {
+export function useTimeRangeRootProps(props: TimeRange.Props, state: TimeRange.State): TimeRangeRenderProps {
   const { _fillWidth, _pointerWidth, _currentTimeText, _durationText } = state.core.getState();
 
   const { children, className, id, style, orientation = 'horizontal' } = props;
 
   return {
-    ref: useCallback((el: HTMLDivElement) => {
+    'ref': useCallback((el: HTMLDivElement) => {
       if (!el) return;
       state.core?.attach(el);
     }, []),
     id,
-    role: 'slider',
+    'role': 'slider',
     'aria-label': 'Seek',
     'aria-valuemin': 0,
     'aria-valuemax': 100,
@@ -69,74 +69,68 @@ export const useTimeRangeRootProps = (props: TimeRange.Props, state: TimeRange.S
     'data-current-time': state.currentTime,
     'data-duration': state.duration,
     className,
-    style: {
+    'style': {
       ...style,
       '--slider-fill': `${_fillWidth.toFixed(3)}%`,
       '--slider-pointer': `${_pointerWidth.toFixed(3)}%`,
     } as React.CSSProperties,
     children,
   };
-};
+}
 
 type useTimeRangeRootState = typeof useTimeRangeRootState;
 type useTimeRangeRootProps = typeof useTimeRangeRootProps;
 
-export const renderTimeRangeRoot = (props: TimeRangeRenderProps): JSX.Element => {
+export function renderTimeRangeRoot(props: TimeRangeRenderProps): JSX.Element {
   return <div {...props} />;
-};
+}
 
 const TimeRangeRoot: ConnectedComponent<TimeRange.Props, typeof renderTimeRangeRoot> = toConnectedComponent(
   useTimeRangeRootState,
   useTimeRangeRootProps,
   renderTimeRangeRoot,
-  'TimeRange.Root'
+  'TimeRange.Root',
 );
 
 // ============================================================================
 // TRACK COMPONENT
 // ============================================================================
 
-export const useTimeRangeTrackProps = (
-  props: React.ComponentProps<'div'>,
-  context: TimeRange.State
-): TimeRangeRenderProps => {
+export function useTimeRangeTrackProps(props: React.ComponentProps<'div'>, context: TimeRange.State): TimeRangeRenderProps {
   return {
-    ref: useCallback((el: HTMLDivElement) => {
+    'ref': useCallback((el: HTMLDivElement) => {
       context.core?.setState({ _trackElement: el });
     }, []),
     'data-orientation': context.orientation,
     ...props,
-    style: {
+    'style': {
       ...props.style,
       [context.orientation === 'horizontal' ? 'width' : 'height']: '100%',
     },
   };
-};
+}
 
 type useTimeRangeTrackProps = typeof useTimeRangeTrackProps;
 
-export const renderTimeRangeTrack = (props: TimeRangeRenderProps): JSX.Element => {
+export function renderTimeRangeTrack(props: TimeRangeRenderProps): JSX.Element {
   return <div {...props} />;
-};
+}
 
 const TimeRangeTrack: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeRangeTrack> = toContextComponent(
   useTimeRangeTrackProps,
   renderTimeRangeTrack,
-  'TimeRange.Track'
+  'TimeRange.Track',
 );
 
 // ============================================================================
 // THUMB COMPONENT
 // ============================================================================
 
-export const useTimeRangeThumbProps = (
-  props: React.ComponentProps<'div'>,
-  context: TimeRange.State
-): TimeRangeRenderProps => {
+export function useTimeRangeThumbProps(props: React.ComponentProps<'div'>, context: TimeRange.State): TimeRangeRenderProps {
   return {
     'data-orientation': context.orientation,
     ...props,
-    style: {
+    'style': {
       ...props.style,
       [context.orientation === 'horizontal' ? 'insetInlineStart' : 'insetBlockEnd']: 'var(--slider-fill)',
       [context.orientation === 'horizontal' ? 'top' : 'left']: '50%',
@@ -144,45 +138,42 @@ export const useTimeRangeThumbProps = (
       position: 'absolute' as const,
     },
   };
-};
+}
 
 type useTimeRangeThumbProps = typeof useTimeRangeThumbProps;
 
-export const renderTimeRangeThumb = (props: TimeRangeRenderProps): JSX.Element => {
+export function renderTimeRangeThumb(props: TimeRangeRenderProps): JSX.Element {
   return <div {...props} />;
-};
+}
 
 const TimeRangeThumb: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeRangeThumb> = toContextComponent(
   useTimeRangeThumbProps,
   renderTimeRangeThumb,
-  'TimeRange.Thumb'
+  'TimeRange.Thumb',
 );
 
 // ============================================================================
 // POINTER COMPONENT
 // ============================================================================
 
-export const useTimeRangePointerProps = (
-  props: React.ComponentProps<'div'>,
-  context: TimeRange.State
-): TimeRangeRenderProps => {
+export function useTimeRangePointerProps(props: React.ComponentProps<'div'>, context: TimeRange.State): TimeRangeRenderProps {
   return {
     'data-orientation': context.orientation,
     ...props,
-    style: {
+    'style': {
       ...props.style,
       [context.orientation === 'horizontal' ? 'width' : 'height']: 'var(--slider-pointer, 0%)',
       [context.orientation === 'horizontal' ? 'height' : 'width']: '100%',
       position: 'absolute' as const,
     },
   };
-};
+}
 
 type useTimeRangePointerProps = typeof useTimeRangePointerProps;
 
-export const renderTimeRangePointer = (props: TimeRangeRenderProps): JSX.Element => {
+export function renderTimeRangePointer(props: TimeRangeRenderProps): JSX.Element {
   return <div {...props} />;
-};
+}
 
 const TimeRangePointer: ConnectedComponent<
   React.ComponentProps<'div'>,
@@ -193,14 +184,11 @@ const TimeRangePointer: ConnectedComponent<
 // PROGRESS COMPONENT
 // ============================================================================
 
-export const useTimeRangeProgressProps = (
-  props: React.ComponentProps<'div'>,
-  context: TimeRange.State
-): TimeRangeRenderProps => {
+export function useTimeRangeProgressProps(props: React.ComponentProps<'div'>, context: TimeRange.State): TimeRangeRenderProps {
   return {
     'data-orientation': context.orientation,
     ...props,
-    style: {
+    'style': {
       ...props.style,
       [context.orientation === 'horizontal' ? 'width' : 'height']: 'var(--slider-fill, 0%)',
       [context.orientation === 'horizontal' ? 'height' : 'width']: '100%',
@@ -208,13 +196,13 @@ export const useTimeRangeProgressProps = (
       position: 'absolute' as const,
     },
   };
-};
+}
 
 type useTimeRangeProgressProps = typeof useTimeRangeProgressProps;
 
-export const renderTimeRangeProgress = (props: TimeRangeRenderProps): JSX.Element => {
+export function renderTimeRangeProgress(props: TimeRangeRenderProps): JSX.Element {
   return <div {...props} />;
-};
+}
 
 const TimeRangeProgress: ConnectedComponent<
   React.ComponentProps<'div'>,
@@ -233,7 +221,7 @@ export const TimeRange = Object.assign(
     Thumb: TimeRangeThumb,
     Pointer: TimeRangePointer,
     Progress: TimeRangeProgress,
-  }
+  },
 ) as {
   Root: typeof TimeRangeRoot;
   Track: typeof TimeRangeTrack;
diff --git a/packages/react/react/src/components/Tooltip.tsx b/packages/react/react/src/components/Tooltip.tsx
index effa40cc..4819dca0 100644
--- a/packages/react/react/src/components/Tooltip.tsx
+++ b/packages/react/react/src/components/Tooltip.tsx
@@ -1,8 +1,6 @@
 import type { Placement } from '@floating-ui/react';
 import type { ReactNode } from 'react';
 
-import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
-
 import {
   arrow,
   autoUpdate,
@@ -19,6 +17,8 @@ import {
   useTransitionStatus,
 } from '@floating-ui/react';
 
+import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
+
 interface UpdatePositioningProps {
   side: Placement;
   sideOffset: number;
@@ -150,7 +150,7 @@ function TooltipTrigger({ children }: TooltipTriggerProps): JSX.Element {
   const { refs, open } = context;
 
   return React.cloneElement(React.Children.only(children) as JSX.Element, {
-    ref: refs.setReference,
+    'ref': refs.setReference,
     ...getReferenceProps(),
     'data-popup-open': open ? '' : undefined,
   });
@@ -187,21 +187,21 @@ function TooltipPopup({ className = '', children }: TooltipPopupProps): JSX.Elem
   const dataAttributes = triggerElement
     ? Object.fromEntries(
         Array.from(triggerElement.attributes)
-          .filter((attr) => attr.name.startsWith('data-'))
-          .map((attr) => [attr.name, attr.value])
+          .filter(attr => attr.name.startsWith('data-'))
+          .map(attr => [attr.name, attr.value]),
       )
     : {};
 
   return (
-    <div 
-      className={className} 
-      {...getFloatingProps()} 
+    <div
+      className={className}
+      {...getFloatingProps()}
       {...dataAttributes}
       data-side={placement}
       data-starting-style={transitionStatus === 'initial' ? '' : undefined}
       data-open={transitionStatus === 'initial' || transitionStatus === 'open' ? '' : undefined}
       data-ending-style={transitionStatus === 'close' || transitionStatus === 'unmounted' ? '' : undefined}
-      data-closed={transitionStatus === 'close' || transitionStatus === 'unmounted' ? '' : undefined}      
+      data-closed={transitionStatus === 'close' || transitionStatus === 'unmounted' ? '' : undefined}
     >
       {children}
     </div>
diff --git a/packages/react/react/src/components/Video.tsx b/packages/react/react/src/components/Video.tsx
index 562824cf..79cbb746 100644
--- a/packages/react/react/src/components/Video.tsx
+++ b/packages/react/react/src/components/Video.tsx
@@ -10,14 +10,14 @@ import type {
   VideoHTMLAttributes,
 } from 'react';
 
+import { createMediaStateOwner } from '@vjs-10/media';
+
+import { useMediaRef } from '@vjs-10/react-media-store';
 import { forwardRef, useImperativeHandle, useRef } from 'react';
 
-import { createMediaStateOwner } from '@vjs-10/media';
-import { useMediaRef } from '@vjs-10/react-media-store';
-
-export type MuxVideoProps = {
+export interface MuxVideoProps {
   'playback-id'?: string;
-};
+}
 
 type MediaStateOwner = NonNullable<Parameters<ReturnType<typeof useMediaRef>>[0]>;
 
@@ -33,7 +33,7 @@ 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? */) => {
+function useMediaStateOwner(ref: Ref<any>, createMediaStateOwner: CreateMediaStateOwner) {
   const mediaStateOwnerRef = useRef(createMediaStateOwner(/* props? */));
   useImperativeHandle(ref, () => mediaStateOwnerRef.current, []);
   /** @TODO Parameterize this (CJP) */
@@ -48,7 +48,7 @@ const useMediaStateOwner = (ref: Ref<any>, createMediaStateOwner: CreateMediaSta
       }
     },
   };
-};
+}
 
 const DefaultVideoComponent: ElementType<
   Omit<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'ref'> & { ref: Ref<any> }
@@ -74,7 +74,7 @@ const DefaultVideoComponent: ElementType<
  * MUI users: a `component` prop that allows you to use something other than the <video/> element under the hood.
  * @returns A media react component (e.g. <video/>), wired up as the media element.
  */
-const ConnectedVideo = ({
+function ConnectedVideo({
   component,
   children,
   ...props
@@ -82,7 +82,7 @@ const ConnectedVideo = ({
   component: ComponentType;
   className?: string | undefined;
   style?: CSSProperties | undefined;
-}>) => {
+}>) {
   const Component = component;
   const mediaRefCallback = useMediaRef();
   // NOTE: While this may feel like magic to folks, in the "default" use case, you can think of it as:
@@ -92,7 +92,7 @@ const ConnectedVideo = ({
       {children}
     </Component>
   );
-};
+}
 
 export type VideoProps = PropsWithChildren<{
   component?: ComponentType;
@@ -101,13 +101,13 @@ export type VideoProps = PropsWithChildren<{
 }>;
 
 // Main Video component with default component
-export const Video = ({ component = DefaultVideoComponent, children, ...props }: VideoProps): JSX.Element => {
+export function Video({ component = DefaultVideoComponent, children, ...props }: VideoProps): JSX.Element {
   return (
     <ConnectedVideo {...props} component={component}>
       {children}
     </ConnectedVideo>
   );
-};
+}
 
 // MediaElementVideo export (same as Video but for backwards compatibility)
 export const MediaElementVideo: FC<VideoProps> = Video;
diff --git a/packages/react/react/src/components/VolumeRange.tsx b/packages/react/react/src/components/VolumeRange.tsx
index 08adc23f..1e336440 100644
--- a/packages/react/react/src/components/VolumeRange.tsx
+++ b/packages/react/react/src/components/VolumeRange.tsx
@@ -1,10 +1,10 @@
 import type { ConnectedComponent } from '../utils/component-factory';
 
-import { useCallback, useMemo } from 'react';
-
 import { VolumeRange as CoreVolumeRange } from '@vjs-10/core';
+
 import { volumeRangeStateDefinition } from '@vjs-10/media-store';
 import { shallowEqual, useMediaSelector, useMediaStore } from '@vjs-10/react-media-store';
+import { useCallback, useMemo } from 'react';
 
 import { toConnectedComponent, toContextComponent, useCore } from '../utils/component-factory';
 
@@ -33,13 +33,13 @@ interface VolumeRangeRenderProps extends React.ComponentProps<'div'> {
 // ROOT COMPONENT
 // ============================================================================
 
-export const useVolumeRangeRootState = (props: VolumeRange.Props): VolumeRange.State => {
+export function useVolumeRangeRootState(props: VolumeRange.Props): VolumeRange.State {
   const { orientation = 'horizontal' } = props;
   const mediaStore = useMediaStore();
   const mediaState = useMediaSelector(volumeRangeStateDefinition.stateTransform, shallowEqual);
   const mediaMethods = useMemo(
     () => volumeRangeStateDefinition.createRequestMethods(mediaStore.dispatch),
-    [mediaStore]
+    [mediaStore],
   );
   const core = useCore(CoreVolumeRange, { ...mediaState, ...mediaMethods });
 
@@ -49,20 +49,20 @@ export const useVolumeRangeRootState = (props: VolumeRange.Props): VolumeRange.S
     orientation,
     core,
   };
-};
+}
 
-export const useVolumeRangeRootProps = (props: VolumeRange.Props, state: VolumeRange.State): VolumeRangeRenderProps => {
+export function useVolumeRangeRootProps(props: VolumeRange.Props, state: VolumeRange.State): VolumeRangeRenderProps {
   const { _fillWidth, _pointerWidth, _volumeText } = state.core.getState();
 
   const { children, className, id, style, orientation = 'horizontal' } = props;
 
   return {
-    ref: useCallback((el: HTMLDivElement) => {
+    'ref': useCallback((el: HTMLDivElement) => {
       if (!el) return;
       state.core?.attach(el);
     }, []),
     id,
-    role: 'slider',
+    'role': 'slider',
     'aria-label': 'Volume',
     'aria-valuemin': 0,
     'aria-valuemax': 100,
@@ -73,55 +73,52 @@ export const useVolumeRangeRootProps = (props: VolumeRange.Props, state: VolumeR
     'data-muted': state.muted,
     'data-volume-level': state.volumeLevel,
     className,
-    style: {
+    'style': {
       ...style,
       '--slider-fill': `${_fillWidth.toFixed(3)}%`,
       '--slider-pointer': `${_pointerWidth.toFixed(3)}%`,
     } as React.CSSProperties,
     children,
   };
-};
+}
 
 type useVolumeRangeRootState = typeof useVolumeRangeRootState;
 type useVolumeRangeRootProps = typeof useVolumeRangeRootProps;
 
-export const renderVolumeRangeRoot = (props: VolumeRangeRenderProps): JSX.Element => {
+export function renderVolumeRangeRoot(props: VolumeRangeRenderProps): JSX.Element {
   return <div {...props} />;
-};
+}
 
 const VolumeRangeRoot: ConnectedComponent<VolumeRange.Props, typeof renderVolumeRangeRoot> = toConnectedComponent(
   useVolumeRangeRootState,
   useVolumeRangeRootProps,
   renderVolumeRangeRoot,
-  'VolumeRange.Root'
+  'VolumeRange.Root',
 );
 
 // ============================================================================
 // TRACK COMPONENT
 // ============================================================================
 
-export const useVolumeRangeTrackProps = (
-  props: React.ComponentProps<'div'>,
-  context: VolumeRange.State
-): VolumeRangeRenderProps => {
+export function useVolumeRangeTrackProps(props: React.ComponentProps<'div'>, context: VolumeRange.State): VolumeRangeRenderProps {
   return {
-    ref: useCallback((el: HTMLDivElement) => {
+    'ref': useCallback((el: HTMLDivElement) => {
       context.core?.setState({ _trackElement: el });
     }, []),
     'data-orientation': context.orientation,
     ...props,
-    style: {
+    'style': {
       ...props.style,
       [context.orientation === 'horizontal' ? 'width' : 'height']: '100%',
     },
   };
-};
+}
 
 type useVolumeRangeTrackProps = typeof useVolumeRangeTrackProps;
 
-export const renderVolumeRangeTrack = (props: VolumeRangeRenderProps): JSX.Element => {
+export function renderVolumeRangeTrack(props: VolumeRangeRenderProps): JSX.Element {
   return <div {...props} />;
-};
+}
 
 const VolumeRangeTrack: ConnectedComponent<
   React.ComponentProps<'div'>,
@@ -132,14 +129,11 @@ const VolumeRangeTrack: ConnectedComponent<
 // THUMB COMPONENT
 // ============================================================================
 
-export const useVolumeRangeThumbProps = (
-  props: React.ComponentProps<'div'>,
-  context: VolumeRange.State
-): VolumeRangeRenderProps => {
+export function useVolumeRangeThumbProps(props: React.ComponentProps<'div'>, context: VolumeRange.State): VolumeRangeRenderProps {
   return {
     'data-orientation': context.orientation,
     ...props,
-    style: {
+    'style': {
       ...props.style,
       [context.orientation === 'horizontal' ? 'insetInlineStart' : 'insetBlockEnd']: 'var(--slider-fill)',
       [context.orientation === 'horizontal' ? 'top' : 'left']: '50%',
@@ -147,13 +141,13 @@ export const useVolumeRangeThumbProps = (
       position: 'absolute' as const,
     },
   };
-};
+}
 
 type useVolumeRangeThumbProps = typeof useVolumeRangeThumbProps;
 
-export const renderVolumeRangeThumb = (props: VolumeRangeRenderProps): JSX.Element => {
+export function renderVolumeRangeThumb(props: VolumeRangeRenderProps): JSX.Element {
   return <div {...props} />;
-};
+}
 
 const VolumeRangeThumb: ConnectedComponent<
   React.ComponentProps<'div'>,
@@ -164,14 +158,11 @@ const VolumeRangeThumb: ConnectedComponent<
 // PROGRESS COMPONENT
 // ============================================================================
 
-export const useVolumeRangeProgressProps = (
-  props: React.ComponentProps<'div'>,
-  context: VolumeRange.State
-): VolumeRangeRenderProps => {
+export function useVolumeRangeProgressProps(props: React.ComponentProps<'div'>, context: VolumeRange.State): VolumeRangeRenderProps {
   return {
     'data-orientation': context.orientation,
     ...props,
-    style: {
+    'style': {
       ...props.style,
       [context.orientation === 'horizontal' ? 'width' : 'height']: 'var(--slider-fill, 0%)',
       [context.orientation === 'horizontal' ? 'height' : 'width']: '100%',
@@ -179,13 +170,13 @@ export const useVolumeRangeProgressProps = (
       position: 'absolute' as const,
     },
   };
-};
+}
 
 type useVolumeRangeProgressProps = typeof useVolumeRangeProgressProps;
 
-export const renderVolumeRangeProgress = (props: VolumeRangeRenderProps): JSX.Element => {
+export function renderVolumeRangeProgress(props: VolumeRangeRenderProps): JSX.Element {
   return <div {...props} />;
-};
+}
 
 const VolumeRangeProgress: ConnectedComponent<
   React.ComponentProps<'div'>,
@@ -203,7 +194,7 @@ export const VolumeRange = Object.assign(
     Track: VolumeRangeTrack,
     Thumb: VolumeRangeThumb,
     Progress: VolumeRangeProgress,
-  }
+  },
 ) as {
   Root: typeof VolumeRangeRoot;
   Track: typeof VolumeRangeTrack;
diff --git a/packages/react/react/src/index.ts b/packages/react/react/src/index.ts
index 17a85139..bb8c4071 100644
--- a/packages/react/react/src/index.ts
+++ b/packages/react/react/src/index.ts
@@ -1,12 +1,12 @@
-export * from '@vjs-10/react-media-store';
-export * from './skins';
-export { Video, MediaElementVideo } from './components/Video';
+export { CurrentTimeDisplay } from './components/CurrentTimeDisplay';
+export { DurationDisplay } from './components/DurationDisplay';
+export { FullscreenButton } from './components/FullscreenButton';
 export { MediaContainer, useMediaContainerRef } from './components/MediaContainer';
 
-export { PlayButton } from './components/PlayButton';
 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';
+export { PlayButton } from './components/PlayButton';
 export { Popover } from './components/Popover';
+export { MediaElementVideo, Video } from './components/Video';
+export { VolumeRange } from './components/VolumeRange';
+export * from './skins';
+export * from '@vjs-10/react-media-store';
diff --git a/packages/react/react/src/skins/default/MediaSkinDefault.tsx b/packages/react/react/src/skins/default/MediaSkinDefault.tsx
index 4aaf4bf5..d2242fbb 100644
--- a/packages/react/react/src/skins/default/MediaSkinDefault.tsx
+++ b/packages/react/react/src/skins/default/MediaSkinDefault.tsx
@@ -1,7 +1,4 @@
-import styles from './styles';
-
 import type { PropsWithChildren } from 'react';
-import { useId } from 'react';
 
 import {
   FullscreenEnterIcon,
@@ -12,8 +9,10 @@ import {
   VolumeLowIcon,
   VolumeOffIcon,
 } from '@vjs-10/react-icons';
+import { useId } from 'react';
 
 import { CurrentTimeDisplay } from '../../components/CurrentTimeDisplay';
+
 import { DurationDisplay } from '../../components/DurationDisplay';
 import { FullscreenButton } from '../../components/FullscreenButton';
 import { MediaContainer } from '../../components/MediaContainer';
@@ -23,6 +22,7 @@ import { Popover } from '../../components/Popover';
 import { TimeRange } from '../../components/TimeRange';
 import { Tooltip } from '../../components/Tooltip';
 import { VolumeRange } from '../../components/VolumeRange';
+import styles from './styles';
 
 type SkinProps = PropsWithChildren<{
   className?: string;
diff --git a/packages/react/react/src/skins/default/index.ts b/packages/react/react/src/skins/default/index.ts
index d790012b..09ab0fb4 100644
--- a/packages/react/react/src/skins/default/index.ts
+++ b/packages/react/react/src/skins/default/index.ts
@@ -1 +1 @@
-export { default as MediaSkinDefault } from './MediaSkinDefault';
\ No newline at end of file
+export { default as MediaSkinDefault } from './MediaSkinDefault';
diff --git a/packages/react/react/src/skins/default/styles.ts b/packages/react/react/src/skins/default/styles.ts
index 07d6f125..b076b1dd 100644
--- a/packages/react/react/src/skins/default/styles.ts
+++ b/packages/react/react/src/skins/default/styles.ts
@@ -1,6 +1,6 @@
-import type { MediaDefaultSkinStyles } from "./types";
+import type { MediaDefaultSkinStyles } from './types';
 
-import { cn } from "../../utils/cn";
+import { cn } from '../../utils/cn';
 
 const styles: MediaDefaultSkinStyles = {
   MediaContainer: cn(
@@ -13,14 +13,14 @@ const styles: MediaDefaultSkinStyles = {
     '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 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).
     //  FIXME: 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', //  FIXME: Temporary className hook for above logic in the overlay. Can be removed once have a proper way to handle controls visibility.
@@ -40,7 +40,7 @@ const styles: MediaDefaultSkinStyles = {
     // XXX: This requires a Tailwind custom variant (see 1 below)
     '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: MediaDefaultSkinStyles = {
     // 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'),
@@ -84,7 +84,7 @@ const styles: MediaDefaultSkinStyles = {
   ),
   PlayTooltipPopup: cn(
     '[&_.pause-tooltip]:inline [&[data-paused]_.pause-tooltip]:hidden',
-    '[&_.play-tooltip]:hidden [&[data-paused]_.play-tooltip]:inline'
+    '[&_.play-tooltip]:hidden [&[data-paused]_.play-tooltip]:inline',
   ),
   PlayTooltip: cn('play-tooltip'),
   PauseTooltip: cn('pause-tooltip'),
@@ -93,7 +93,7 @@ const styles: MediaDefaultSkinStyles = {
     '[&[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'),
@@ -101,23 +101,23 @@ const styles: MediaDefaultSkinStyles = {
   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',
   ),
   FullScreenTooltipPopup: cn(
     '[&_.fullscreen-enter-tooltip]:inline [&[data-fullscreen]_.fullscreen-enter-tooltip]:hidden',
-    '[&_.fullscreen-exit-tooltip]:hidden [&[data-fullscreen]_.fullscreen-exit-tooltip]:inline'
+    '[&_.fullscreen-exit-tooltip]:hidden [&[data-fullscreen]_.fullscreen-exit-tooltip]:inline',
   ),
   FullScreenEnterTooltip: cn('fullscreen-enter-tooltip'),
   FullScreenExitTooltip: cn('fullscreen-exit-tooltip'),
@@ -131,7 +131,7 @@ const styles: MediaDefaultSkinStyles = {
   SliderTrack: cn(
     'w-full relative select-none rounded-full bg-white/20 ring-1 ring-black/5',
     '[&[data-orientation="horizontal"]]:h-1',
-    '[&[data-orientation="vertical"]]:w-1'
+    '[&[data-orientation="vertical"]]:w-1',
   ),
   SliderProgress: cn('bg-white rounded-[inherit]'),
   // TODO: Work out what we want to do here.
@@ -141,7 +141,7 @@ const styles: MediaDefaultSkinStyles = {
     '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 hover:cursor-ew-resize'
+    'size-2.5 active:size-3 group-active/slider:size-3 hover:cursor-ew-resize',
   ),
   PopoverPopup: cn(
     'relative px-2 py-4 rounded-2xl',
@@ -153,7 +153,7 @@ const styles: MediaDefaultSkinStyles = {
     // XXX: This requires a Tailwind custom variant (see 1 below)
     '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',
   ),
 };
 
diff --git a/packages/react/react/src/skins/index.ts b/packages/react/react/src/skins/index.ts
index bd5af525..885060fc 100644
--- a/packages/react/react/src/skins/index.ts
+++ b/packages/react/react/src/skins/index.ts
@@ -1,2 +1,2 @@
-export * from './default'
-export * from './toasted'
\ No newline at end of file
+export * from './default';
+export * from './toasted';
diff --git a/packages/react/react/src/skins/toasted/MediaSkinToasted.tsx b/packages/react/react/src/skins/toasted/MediaSkinToasted.tsx
index 1752ea64..a714e7ae 100644
--- a/packages/react/react/src/skins/toasted/MediaSkinToasted.tsx
+++ b/packages/react/react/src/skins/toasted/MediaSkinToasted.tsx
@@ -46,7 +46,7 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
         </div>
 
         <div className={styles.ControlsRow}>
-          <div className='flex items-center gap-3'>
+          <div className="flex items-center gap-3">
             <PlayButton className={`${styles.Button} ${styles.IconButton} ${styles.PlayButton}`}>
               <PlayIcon className={styles.PlayIcon}></PlayIcon>
               <PauseIcon className={styles.PauseIcon}></PauseIcon>
@@ -58,13 +58,12 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
                 // showRemaining
                 className={styles.TimeDisplay}
               />
-              <span className='opacity-50'>/</span>
+              <span className="opacity-50">/</span>
               <DurationDisplay className={`${styles.TimeDisplay} opacity-50`} />
             </div>
           </div>
 
-
-          <div className='flex items-center gap-0.5'>
+          <div className="flex items-center gap-0.5">
             <div className={styles.VolumeControls}>
               <MuteButton className={`${styles.Button} ${styles.IconButton} ${styles.VolumeButton}`}>
                 <VolumeHighIcon className={styles.VolumeHighIcon} />
diff --git a/packages/react/react/src/skins/toasted/index.ts b/packages/react/react/src/skins/toasted/index.ts
index 692577a7..f09f4f82 100644
--- a/packages/react/react/src/skins/toasted/index.ts
+++ b/packages/react/react/src/skins/toasted/index.ts
@@ -1 +1 @@
-export { default as MediaSkinToasted } from './MediaSkinToasted';
\ No newline at end of file
+export { default as MediaSkinToasted } from './MediaSkinToasted';
diff --git a/packages/react/react/src/skins/toasted/styles.ts b/packages/react/react/src/skins/toasted/styles.ts
index 65637ce4..9106559e 100644
--- a/packages/react/react/src/skins/toasted/styles.ts
+++ b/packages/react/react/src/skins/toasted/styles.ts
@@ -1,5 +1,5 @@
-import type { MediaToastedSkinStyles } from "./types";
-import { cn } from "../../utils/cn";
+import type { MediaToastedSkinStyles } from './types';
+import { cn } from '../../utils/cn';
 
 const styles: MediaToastedSkinStyles = {
   MediaContainer: cn(
diff --git a/packages/react/react/src/skins/toasted/types.ts b/packages/react/react/src/skins/toasted/types.ts
index 583f8559..0dc0a0d9 100644
--- a/packages/react/react/src/skins/toasted/types.ts
+++ b/packages/react/react/src/skins/toasted/types.ts
@@ -23,4 +23,4 @@ export interface MediaToastedSkinStyles {
   readonly SliderProgress: string;
   readonly SliderPointer: string;
   readonly SliderThumb: string;
-}
\ No newline at end of file
+}
diff --git a/packages/react/react/src/utils/cn.ts b/packages/react/react/src/utils/cn.ts
index af3edfde..a5a5ee84 100644
--- a/packages/react/react/src/utils/cn.ts
+++ b/packages/react/react/src/utils/cn.ts
@@ -3,4 +3,4 @@
 // It just makes the billions of Tailwind classes a little easier to read.
 export function cn(...classes: (string | undefined)[]): string {
   return classes.filter(Boolean).join(' ');
-}
\ 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 ef601d2a..c8d94fd1 100644
--- a/packages/react/react/src/utils/component-factory.tsx
+++ b/packages/react/react/src/utils/component-factory.tsx
@@ -23,17 +23,12 @@ const Context = createContext<any>(null);
  * @param displayName - Display name for React DevTools
  * @returns Connected component with customizable render prop
  */
-export const toConnectedComponent = <
+export function toConnectedComponent<
   TProps extends Record<string, any>,
   TState,
   TResultProps extends Record<string, any>,
   TRenderFn extends RenderFn<TResultProps, TState>,
->(
-  useStateHook: StateHookFn<TProps, TState>,
-  usePropsHook: PropsHookFn<TProps, TState, TResultProps>,
-  defaultRender: TRenderFn,
-  displayName: string
-): ConnectedComponent<TProps, TRenderFn> => {
+>(useStateHook: StateHookFn<TProps, TState>, usePropsHook: PropsHookFn<TProps, TState, TResultProps>, defaultRender: TRenderFn, displayName: string): ConnectedComponent<TProps, TRenderFn> {
   const ConnectedComponent = forwardRef<any, TProps & { render?: TRenderFn }>(
     ({ render = defaultRender, ...props }, ref) => {
       const connectedState = useStateHook(props as TProps);
@@ -41,13 +36,13 @@ export const toConnectedComponent = <
       // Add ref to connectedProps if it exists
       const propsWithRef = ref ? { ...connectedProps, ref } : connectedProps;
       return <Context.Provider value={connectedState}>{render(propsWithRef, connectedState)}</Context.Provider>;
-    }
+    },
   );
 
   ConnectedComponent.displayName = displayName;
 
   return ConnectedComponent;
-};
+}
 
 /**
  * Type helper to infer the component type from the factory
@@ -65,15 +60,11 @@ export type ConnectedComponent<TProps extends Record<string, any>, TRenderFn ext
  * @param displayName - Display name for React DevTools
  * @returns Context-based component with customizable render prop
  */
-export const toContextComponent = <
+export function toContextComponent<
   TProps extends Record<string, any>,
   TResultProps extends Record<string, any>,
   TRenderFn extends (props: TResultProps, context: any) => ReactElement,
->(
-  usePropsHook: (props: TProps, context: any) => TResultProps,
-  defaultRender: TRenderFn,
-  displayName: string
-): ContextComponent<TProps, TRenderFn> => {
+>(usePropsHook: (props: TProps, context: any) => TResultProps, defaultRender: TRenderFn, displayName: string): ContextComponent<TProps, TRenderFn> {
   const ContextComponent = forwardRef<any, TProps & { render?: TRenderFn }>(
     ({ render = defaultRender, ...props }, ref) => {
       const context = useContext(Context);
@@ -81,13 +72,13 @@ export const toContextComponent = <
       // Add ref to contextProps if it exists
       const propsWithRef = ref ? { ...contextProps, ref } : contextProps;
       return render(propsWithRef, context);
-    }
+    },
   );
 
   ContextComponent.displayName = displayName;
 
   return ContextComponent;
-};
+}
 
 /**
  * Type helper to infer the context component type from the factory
@@ -97,21 +88,17 @@ export type ContextComponent<
   TRenderFn extends (props: any, context: any) => ReactElement,
 > = FC<TProps & { render?: TRenderFn }>;
 
-
 /**
  * Hook that manages a CoreClass instance and triggers re-renders when state changes.
  * Uses useSyncExternalStore for optimal performance with external state subscriptions.
  */
-export const useCore = <
+export function useCore<
   T extends {
     subscribe: (callback: (state: any) => void) => () => void;
     getState: () => any;
     setState: (state: any) => void;
   },
->(
-  CoreClass: new () => T,
-  state: any,
-): T => {
+>(CoreClass: new () => T, state: any): T {
   const coreRef = useRef<T | null>(null);
   const snapshotRef = useRef<any>(null);
 
@@ -137,8 +124,8 @@ export const useCore = <
     useCallback(() => {
       return snapshotRef.current;
     }, []),
-    () => null // server snapshot
+    () => null, // server snapshot
   );
 
   return coreRef.current;
-};
+}
diff --git a/packages/react/react/src/utils/useComposedRefs.ts b/packages/react/react/src/utils/useComposedRefs.ts
index 1caa51af..09704d4a 100644
--- a/packages/react/react/src/utils/useComposedRefs.ts
+++ b/packages/react/react/src/utils/useComposedRefs.ts
@@ -9,7 +9,8 @@ type PossibleRef<T> = React.Ref<T> | undefined;
 function setRef<T>(ref: PossibleRef<T>, value: T): (() => void) | void | undefined {
   if (typeof ref === 'function') {
     return ref(value);
-  } else if (ref !== null && ref !== undefined) {
+  }
+  else if (ref !== null && ref !== undefined) {
     (ref as React.MutableRefObject<T>).current = value;
   }
 }
@@ -39,7 +40,8 @@ function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
           const cleanup = cleanups[i];
           if (typeof cleanup == 'function') {
             cleanup();
-          } else {
+          }
+          else {
             setRef(refs[i], null);
           }
         }
diff --git a/packages/react/react/tsconfig.json b/packages/react/react/tsconfig.json
index 61b21bbc..df7cb2db 100644
--- a/packages/react/react/tsconfig.json
+++ b/packages/react/react/tsconfig.json
@@ -1,12 +1,12 @@
 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
-    },
-    "jsx": "react-jsx",
-    "jsxImportSource": "react"
+    }
   },
   "include": ["src"]
 }
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 2cfb4985..a269441f 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -4,5 +4,5 @@ packages:
   - 'packages/react/*'
   - 'packages/react-native/*'
   - 'examples/*'
-  - 'website'
+  - website
 minimumReleaseAge: 1440
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 48c5e0c7..c76ba1cc 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -1,33 +1,33 @@
 {
   "compilerOptions": {
+    "incremental": true,
+    "composite": true,
     "target": "ES2020",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "moduleResolution": "bundler",
+    "resolveJsonModule": true,
     "allowJs": false,
     "checkJs": false,
+    "strict": true,
+    "exactOptionalPropertyTypes": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUncheckedIndexedAccess": true,
     "declaration": true,
     "declarationMap": true,
     "sourceMap": true,
-    "composite": true,
-    "incremental": true,
-    "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "exactOptionalPropertyTypes": true,
-    "noUncheckedIndexedAccess": true,
-    "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "skipLibCheck": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
     "isolatedDeclarations": true,
-    "verbatimModuleSyntax": true
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true
   },
   "exclude": ["node_modules", "dist", "build", "coverage"]
 }
diff --git a/website/README.md b/website/README.md
index 02ae8359..991a5312 100644
--- a/website/README.md
+++ b/website/README.md
@@ -27,9 +27,9 @@ Any static assets, like images, can be placed in the `public/` directory.
 
 All commands are run from the root of the project, from a terminal:
 
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `pnpm install`             | Installs dependencies                            |
+| Command                | Action                                           |
+| :--------------------- | :----------------------------------------------- |
+| `pnpm install`         | Installs dependencies                            |
 | `pnpm dev`             | Starts local dev server at `localhost:4321`      |
 | `pnpm build`           | Build your production site to `./dist/`          |
 | `pnpm preview`         | Preview your build locally, before deploying     |
@@ -106,9 +106,9 @@ Example: `/docs/framework/react/style/tailwind/concepts/state-management/`
 
 ##### Framework/Style Matrix
 
-| Framework | Available Styles |
-|-----------|-----------------|
-| HTML      | css, tailwind   |
+| Framework | Available Styles                 |
+| --------- | -------------------------------- |
+| HTML      | css, tailwind                    |
 | React     | css, tailwind, styled-components |
 
 ##### Content Filtering
diff --git a/website/TODO.md b/website/TODO.md
index 65058bf0..fa56dcdd 100644
--- a/website/TODO.md
+++ b/website/TODO.md
@@ -1,4 +1,4 @@
 # TODO
 
 - testing of all the wild filtering and redirect stuff that's going on
-- a kick-ass 404 page
\ No newline at end of file
+- a kick-ass 404 page
diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 2924c404..0ebf9bf0 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -1,11 +1,11 @@
 // @ts-check
 
-import { defineConfig } from 'astro/config';
-
 import mdx from '@astrojs/mdx';
+
 import react from '@astrojs/react';
 import sitemap from '@astrojs/sitemap';
 import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'astro/config';
 
 // https://astro.build/config
 export default defineConfig({
diff --git a/website/public/favicon.svg b/website/public/favicon.svg
index f157bd1c..69cc43a9 100644
--- a/website/public/favicon.svg
+++ b/website/public/favicon.svg
@@ -1,9 +1,11 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
+  <path
+    d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z"
+  />
+  <style>
+    path { fill: #000; }
         @media (prefers-color-scheme: dark) {
             path { fill: #FFF; }
         }
-    </style>
+  </style>
 </svg>
diff --git a/website/src/components/docs/Selectors.tsx b/website/src/components/docs/Selectors.tsx
index f0817fb2..b9778372 100644
--- a/website/src/components/docs/Selectors.tsx
+++ b/website/src/components/docs/Selectors.tsx
@@ -37,7 +37,8 @@ export function Selectors({ currentFramework, currentStyle }: SelectorProps) {
       const firstGuide = findFirstGuide(newFramework, getDefaultStyle(newFramework));
       if (firstGuide) {
         navigate(`/docs/framework/${newFramework}/style/${getDefaultStyle(newFramework)}/${firstGuide}/`);
-      } else {
+      }
+      else {
         navigate('/docs/');
       }
       return;
@@ -49,7 +50,8 @@ export function Selectors({ currentFramework, currentStyle }: SelectorProps) {
       const firstGuide = findFirstGuide(newFramework, getDefaultStyle(newFramework));
       if (firstGuide) {
         navigate(`/docs/framework/${newFramework}/style/${getDefaultStyle(newFramework)}/${firstGuide}/`);
-      } else {
+      }
+      else {
         navigate('/docs/');
       }
       return;
@@ -63,14 +65,15 @@ export function Selectors({ currentFramework, currentStyle }: SelectorProps) {
       const firstGuide = findFirstGuide(newFramework, getDefaultStyle(newFramework));
       if (firstGuide) {
         navigate(`/docs/framework/${newFramework}/style/${getDefaultStyle(newFramework)}/${firstGuide}/`);
-      } else {
+      }
+      else {
         navigate('/docs/');
       }
       return;
     }
 
     // Pick best style: current if still valid, otherwise first valid
-    const newStyle = validStyles.some((s) => s === currentStyle) ? currentStyle : validStyles[0];
+    const newStyle = validStyles.includes(currentStyle) ? currentStyle : validStyles[0];
 
     // Navigate to same guide with adjusted framework/style
     navigate(`/docs/framework/${newFramework}/style/${newStyle}/${currentGuideSlug}/`);
@@ -90,7 +93,8 @@ export function Selectors({ currentFramework, currentStyle }: SelectorProps) {
       const firstGuide = findFirstGuide(currentFramework, newStyle);
       if (firstGuide) {
         navigate(`/docs/framework/${currentFramework}/style/${newStyle}/${firstGuide}/`);
-      } else {
+      }
+      else {
         navigate('/docs/');
       }
       return;
@@ -99,12 +103,13 @@ export function Selectors({ currentFramework, currentStyle }: SelectorProps) {
     // Check if guide is valid for current framework and new style
     const validStyles = getValidStylesForGuide(currentGuide, currentFramework);
 
-    if (!validStyles.some((s) => s === newStyle)) {
+    if (!validStyles.includes(newStyle)) {
       // Guide not available for new style, go to first guide
       const firstGuide = findFirstGuide(currentFramework, newStyle);
       if (firstGuide) {
         navigate(`/docs/framework/${currentFramework}/style/${newStyle}/${firstGuide}/`);
-      } else {
+      }
+      else {
         navigate('/docs/');
       }
       return;
@@ -121,7 +126,7 @@ export function Selectors({ currentFramework, currentStyle }: SelectorProps) {
       <div>
         <label htmlFor="framework-select">Framework:</label>
         <select id="framework-select" value={currentFramework} onChange={handleFrameworkChange}>
-          {SUPPORTED_FRAMEWORKS.map((fw) => (
+          {SUPPORTED_FRAMEWORKS.map(fw => (
             <option key={fw} value={fw}>
               {fw}
             </option>
@@ -131,7 +136,7 @@ export function Selectors({ currentFramework, currentStyle }: SelectorProps) {
       <div>
         <label htmlFor="style-select">Style:</label>
         <select id="style-select" value={currentStyle} onChange={handleStyleChange}>
-          {availableStyles.map((st) => (
+          {availableStyles.map(st => (
             <option key={st} value={st}>
               {st}
             </option>
diff --git a/website/src/config/docs/sidebar.ts b/website/src/config/docs/sidebar.ts
index fe146477..e55f3122 100644
--- a/website/src/config/docs/sidebar.ts
+++ b/website/src/config/docs/sidebar.ts
@@ -1,16 +1,16 @@
 import type { Sidebar } from '@/types/docs';
 
 export const sidebar: Sidebar = [
-	{
-		sidebarLabel: 'Concepts',
-		contents: [
-			{ slug: 'concepts/everyone' },
-			{ slug: 'concepts/react-only', frameworks: ['react'] },
-			{ slug: 'concepts/tailwind-only', styles: ['tailwind'] },
-		],
-	},
-	{
-		sidebarLabel: 'How-To Guides',
-		contents: [{ slug: 'how-to/everyone' }],
-	},
+  {
+    sidebarLabel: 'Concepts',
+    contents: [
+      { slug: 'concepts/everyone' },
+      { slug: 'concepts/react-only', frameworks: ['react'] },
+      { slug: 'concepts/tailwind-only', styles: ['tailwind'] },
+    ],
+  },
+  {
+    sidebarLabel: 'How-To Guides',
+    contents: [{ slug: 'how-to/everyone' }],
+  },
 ];
diff --git a/website/src/content.config.ts b/website/src/content.config.ts
index f3c69041..edb814b0 100644
--- a/website/src/content.config.ts
+++ b/website/src/content.config.ts
@@ -1,5 +1,5 @@
-import { defineCollection, reference, z } from 'astro:content';
 import { file } from 'astro/loaders';
+import { defineCollection, reference, z } from 'astro:content';
 import { simpleGit } from 'simple-git';
 import { globWithParser } from './utils/globWithParser';
 
@@ -10,15 +10,15 @@ const git = simpleGit();
  * Throws an error if the filename doesn't match the expected pattern
  */
 function extractDateFromFilename(id: string): Date {
-	const match = id.match(/^(\d{4})-(\d{2})-(\d{2})-/);
-	if (!match) {
-		throw new Error(
-			`Filename "${id}" must follow format: YYYY-MM-DD-slug.{md,mdx}`,
-		);
-	}
+  const match = id.match(/^(\d{4})-(\d{2})-(\d{2})-/);
+  if (!match) {
+    throw new Error(
+      `Filename "${id}" must follow format: YYYY-MM-DD-slug.{md,mdx}`,
+    );
+  }
 
-	const [, year, month, day] = match;
-	return new Date(`${year}-${month}-${day}`);
+  const [, year, month, day] = match;
+  return new Date(`${year}-${month}-${day}`);
 }
 
 /**
@@ -26,103 +26,104 @@ function extractDateFromFilename(id: string): Date {
  * Returns null if git command fails or file is not in git history
  */
 async function getGitLastModifiedDate(filePath: string): Promise<Date | null> {
-	try {
-		const log = await git.log({ file: filePath, maxCount: 1 });
-		if (!log.latest) return null;
+  try {
+    const log = await git.log({ file: filePath, maxCount: 1 });
+    if (!log.latest) return null;
 
-		return new Date(log.latest.date);
-	} catch {
-		return null;
-	}
+    return new Date(log.latest.date);
+  }
+  catch {
+    return null;
+  }
 }
 
 const blog = defineCollection({
-	// Load Markdown and MDX files in the `src/content/blog/` directory.
-	loader: globWithParser({
-		base: './src/content/blog',
-		pattern: '**/*.{md,mdx}',
-		generateId: ({ entry }) => {
-			// Remove date prefix and extension from slug (e.g., "2022-07-08-first-post.md" -> "first-post")
-			return entry.replace(/^\d{4}-\d{2}-\d{2}-/, '').replace(/\.mdx?$/, '');
-		},
-		parser: async (entry, originalEntry) => {
-			// Extract pubDate from original filename (before date prefix was removed)
-			const pubDate = extractDateFromFilename(originalEntry);
+  // Load Markdown and MDX files in the `src/content/blog/` directory.
+  loader: globWithParser({
+    base: './src/content/blog',
+    pattern: '**/*.{md,mdx}',
+    generateId: ({ entry }) => {
+      // Remove date prefix and extension from slug (e.g., "2022-07-08-first-post.md" -> "first-post")
+      return entry.replace(/^\d{4}-\d{2}-\d{2}-/, '').replace(/\.mdx?$/, '');
+    },
+    parser: async (entry, originalEntry) => {
+      // Extract pubDate from original filename (before date prefix was removed)
+      const pubDate = extractDateFromFilename(originalEntry);
 
-			// Get updatedDate from git history (last modification date)
-			const filePath = `website/src/content/blog/${originalEntry}`;
-			const updatedDate = await getGitLastModifiedDate(filePath);
+      // Get updatedDate from git history (last modification date)
+      const filePath = `website/src/content/blog/${originalEntry}`;
+      const updatedDate = await getGitLastModifiedDate(filePath);
 
-			// Return transformed entry with added fields
-			return {
-				...entry,
-				data: {
-					...entry.data,
-					pubDate,
-					...(updatedDate &&
-					updatedDate.getTime() !== pubDate.getTime()
-						? { updatedDate }
-						: {}),
-				},
-			};
-		},
-	}),
-	// Type-check frontmatter using a schema
-	schema: ({ image }) =>
-		z.object({
-			title: z.string(),
-			description: z.string(),
-			pubDate: z.date(),
-			updatedDate: z.coerce.date().optional(),
-			heroImage: image().optional(),
-			authors: z.array(reference('authors')),
-		}),
+      // Return transformed entry with added fields
+      return {
+        ...entry,
+        data: {
+          ...entry.data,
+          pubDate,
+          ...(updatedDate
+            && updatedDate.getTime() !== pubDate.getTime()
+            ? { updatedDate }
+            : {}),
+        },
+      };
+    },
+  }),
+  // Type-check frontmatter using a schema
+  schema: ({ image }) =>
+    z.object({
+      title: z.string(),
+      description: z.string(),
+      pubDate: z.date(),
+      updatedDate: z.coerce.date().optional(),
+      heroImage: image().optional(),
+      authors: z.array(reference('authors')),
+    }),
 });
 
 const docs = defineCollection({
-	loader: globWithParser({
-		base: './src/content/docs',
-		pattern: '**/*.{md,mdx}',
-		parser: async (entry, originalEntry) => {
-			// Get updatedDate from git history
-			const filePath = `website/src/content/docs/${originalEntry}`;
-			const updatedDate = await getGitLastModifiedDate(filePath);
+  loader: globWithParser({
+    base: './src/content/docs',
+    pattern: '**/*.{md,mdx}',
+    parser: async (entry, originalEntry) => {
+      // Get updatedDate from git history
+      const filePath = `website/src/content/docs/${originalEntry}`;
+      const updatedDate = await getGitLastModifiedDate(filePath);
 
-			// Return transformed entry with added field if updatedDate exists
-			return {
-				...entry,
-				data: {
-					...entry.data,
-					...(updatedDate ? { updatedDate } : {}),
-				},
-			};
-		},
-	}),
-	schema: z.object({
-		title: z.string(),
-		description: z.string(),
-		updatedDate: z.coerce.date().optional(),
-	}),
+      // Return transformed entry with added field if updatedDate exists
+      return {
+        ...entry,
+        data: {
+          ...entry.data,
+          ...(updatedDate ? { updatedDate } : {}),
+        },
+      };
+    },
+  }),
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+    updatedDate: z.coerce.date().optional(),
+  }),
 });
 
 const authors = defineCollection({
-	loader: file('./src/content/authors.json'),
-	schema: z.object({
-		name: z.string(),
-		shortName: z.string(),
-		bio: z.string().optional(),
-		avatar: z.string().optional(),
-		socialLinks: z
-			.object({
-				x: z.string().optional(),
-				bluesky: z.string().optional(),
-				mastodon: z.string().optional(),
-				github: z.string().optional(),
-				linkedin: z.string().optional(),
-				website: z.string().optional(),
-			})
-			.optional(),
-	}),
+  loader: file('./src/content/authors.json'),
+  schema: z.object({
+    name: z.string(),
+    shortName: z.string(),
+    bio: z.string().optional(),
+    avatar: z.string().optional(),
+    socialLinks: z
+      .object({
+        x: z.string().optional(),
+        bluesky: z.string().optional(),
+        mastodon: z.string().optional(),
+        github: z.string().optional(),
+        linkedin: z.string().optional(),
+        website: z.string().optional(),
+      })
+      .optional(),
+  }),
 });
 
 export const collections = { blog, docs, authors };
diff --git a/website/src/content/authors.json b/website/src/content/authors.json
index 72e42c80..36c0932b 100644
--- a/website/src/content/authors.json
+++ b/website/src/content/authors.json
@@ -1,31 +1,31 @@
 [
-	{
-		"id": "john-doe",
-		"name": "John Doe",
-		"shortName": "John",
-		"bio": "Software engineer and video technology enthusiast. Loves building web applications.",
-		"avatar": "https://placecats.com/neo/150/150",
-		"socialLinks": {
-			"x": "https://x.com/johndoe",
-			"github": "https://github.com/johndoe"
-		}
-	},
-	{
-		"id": "jane-smith",
-		"name": "Jane Smith",
-		"shortName": "Jane",
-		"bio": "Frontend developer passionate about accessibility and user experience.",
-		"avatar": "https://placecats.com/millie/150/150",
-		"socialLinks": {
-			"github": "https://github.com/janesmith",
-			"linkedin": "https://linkedin.com/in/janesmith",
-			"website": "https://janesmith.dev"
-		}
-	},
-	{
-		"id": "alex-johnson",
-		"name": "Alex Johnson",
-		"shortName": "Alex",
-		"bio": "Full-stack developer with a focus on media streaming technologies."
-	}
+  {
+    "id": "john-doe",
+    "name": "John Doe",
+    "shortName": "John",
+    "bio": "Software engineer and video technology enthusiast. Loves building web applications.",
+    "avatar": "https://placecats.com/neo/150/150",
+    "socialLinks": {
+      "x": "https://x.com/johndoe",
+      "github": "https://github.com/johndoe"
+    }
+  },
+  {
+    "id": "jane-smith",
+    "name": "Jane Smith",
+    "shortName": "Jane",
+    "bio": "Frontend developer passionate about accessibility and user experience.",
+    "avatar": "https://placecats.com/millie/150/150",
+    "socialLinks": {
+      "github": "https://github.com/janesmith",
+      "linkedin": "https://linkedin.com/in/janesmith",
+      "website": "https://janesmith.dev"
+    }
+  },
+  {
+    "id": "alex-johnson",
+    "name": "Alex Johnson",
+    "shortName": "Alex",
+    "bio": "Full-stack developer with a focus on media streaming technologies."
+  }
 ]
diff --git a/website/src/content/blog/2024-07-19-markdown-style-guide.md b/website/src/content/blog/2024-07-19-markdown-style-guide.md
index f032313c..10f4e557 100644
--- a/website/src/content/blog/2024-07-19-markdown-style-guide.md
+++ b/website/src/content/blog/2024-07-19-markdown-style-guide.md
@@ -47,13 +47,13 @@ The blockquote element represents content that is quoted from another source, op
 #### Syntax
 
 ```markdown
-> Tiam, ad mint andaepu dandae nostion secatur sequo quae.  
+> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
 > **Note** that you can use _Markdown syntax_ within a blockquote.
 ```
 
 #### Output
 
-> Tiam, ad mint andaepu dandae nostion secatur sequo quae.  
+> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
 > **Note** that you can use _Markdown syntax_ within a blockquote.
 
 ### Blockquote with attribution
diff --git a/website/src/pages/rss.xml.js b/website/src/pages/rss.xml.js
index b937a652..5ac61bf8 100644
--- a/website/src/pages/rss.xml.js
+++ b/website/src/pages/rss.xml.js
@@ -1,16 +1,16 @@
-import { getCollection } from 'astro:content';
 import rss from '@astrojs/rss';
+import { getCollection } from 'astro:content';
 import { SITE_DESCRIPTION, SITE_TITLE } from '@/consts';
 
 export async function GET(context) {
-	const posts = await getCollection('blog');
-	return rss({
-		title: SITE_TITLE,
-		description: SITE_DESCRIPTION,
-		site: context.site,
-		items: posts.map((post) => ({
-			...post.data,
-			link: `/blog/${post.id}/`,
-		})),
-	});
+  const posts = await getCollection('blog');
+  return rss({
+    title: SITE_TITLE,
+    description: SITE_DESCRIPTION,
+    site: context.site,
+    items: posts.map(post => ({
+      ...post.data,
+      link: `/blog/${post.id}/`,
+    })),
+  });
 }
diff --git a/website/src/types/docs.ts b/website/src/types/docs.ts
index 4fc581ce..3b084184 100644
--- a/website/src/types/docs.ts
+++ b/website/src/types/docs.ts
@@ -1,48 +1,48 @@
 export const FRAMEWORK_STYLES = {
-	html: ['css', 'tailwind'],
-	react: ['css', 'tailwind', 'styled-components'],
+  html: ['css', 'tailwind'],
+  react: ['css', 'tailwind', 'styled-components'],
 } as const;
 
 export const SUPPORTED_FRAMEWORKS = Object.keys(
-	FRAMEWORK_STYLES,
+  FRAMEWORK_STYLES,
 ) as (keyof typeof FRAMEWORK_STYLES)[];
 
 export type SupportedFramework = keyof typeof FRAMEWORK_STYLES;
-export type SupportedStyle<F extends SupportedFramework> =
-	(typeof FRAMEWORK_STYLES)[F][number];
+export type SupportedStyle<F extends SupportedFramework>
+  = (typeof FRAMEWORK_STYLES)[F][number];
 export type AnySupportedStyle = SupportedStyle<SupportedFramework>;
 
 /**
  * Get the available styles for a given framework
  */
 export function getAvailableStyles<F extends SupportedFramework>(
-	framework: F,
+  framework: F,
 ): readonly SupportedStyle<F>[] {
-	return FRAMEWORK_STYLES[framework];
+  return FRAMEWORK_STYLES[framework];
 }
 
 /**
  * Get the default style for a given framework (first available style)
  */
 export function getDefaultStyle<F extends SupportedFramework>(
-	framework: F,
+  framework: F,
 ): SupportedStyle<F> {
-	return FRAMEWORK_STYLES[framework][0];
+  return FRAMEWORK_STYLES[framework][0];
 }
 
-export type Guide = {
-	slug: string;
-	sidebarLabel?: string; // defaults to guide title
-	frameworks?: SupportedFramework[];
-	styles?: AnySupportedStyle[];
-};
+export interface Guide {
+  slug: string;
+  sidebarLabel?: string; // defaults to guide title
+  frameworks?: SupportedFramework[];
+  styles?: AnySupportedStyle[];
+}
 
-export type Section = {
-	sidebarLabel: string;
-	frameworks?: SupportedFramework[];
-	styles?: AnySupportedStyle[];
-	contents: Array<Guide | Section>;
-};
+export interface Section {
+  sidebarLabel: string;
+  frameworks?: SupportedFramework[];
+  styles?: AnySupportedStyle[];
+  contents: Array<Guide | Section>;
+}
 
 export type Sidebar = Array<Guide | Section>;
 
@@ -50,5 +50,5 @@ export type Sidebar = Array<Guide | Section>;
  * Type guard to check if an item is a Section (vs a Guide)
  */
 export function isSection(item: Guide | Section): item is Section {
-	return 'contents' in item;
+  return 'contents' in item;
 }
diff --git a/website/src/utils/docs/redirects.ts b/website/src/utils/docs/redirects.ts
index 2140a80d..3977f619 100644
--- a/website/src/utils/docs/redirects.ts
+++ b/website/src/utils/docs/redirects.ts
@@ -1,7 +1,4 @@
-import {
-	type SupportedFramework,
-	type SupportedStyle,
-} from '@/types/docs';
+import type { SupportedFramework, SupportedStyle } from '@/types/docs';
 import { findFirstGuide } from '@/utils/docs/sidebar';
 
 /**
@@ -15,16 +12,16 @@ import { findFirstGuide } from '@/utils/docs/sidebar';
  * @throws Error if no guide is available for the given framework/style
  */
 export function getDocsRedirectUrl<F extends SupportedFramework>(
-	framework: F,
-	style: SupportedStyle<F>,
+  framework: F,
+  style: SupportedStyle<F>,
 ): string {
-	const firstGuide = findFirstGuide(framework, style);
+  const firstGuide = findFirstGuide(framework, style);
 
-	if (!firstGuide) {
-		throw new Error(
-			`No guide available for framework "${framework}" and style "${style}"`,
-		);
-	}
+  if (!firstGuide) {
+    throw new Error(
+      `No guide available for framework "${framework}" and style "${style}"`,
+    );
+  }
 
-	return `/docs/framework/${framework}/style/${style}/${firstGuide}/`;
+  return `/docs/framework/${framework}/style/${style}/${firstGuide}/`;
 }
diff --git a/website/src/utils/docs/sidebar.ts b/website/src/utils/docs/sidebar.ts
index a074491e..3629d1fe 100644
--- a/website/src/utils/docs/sidebar.ts
+++ b/website/src/utils/docs/sidebar.ts
@@ -1,14 +1,12 @@
-import {
-	type SupportedFramework,
-	type SupportedStyle,
-	type AnySupportedStyle,
-	getAvailableStyles,
-	type Guide,
-	type Section,
-	type Sidebar,
-	isSection,
-} from '@/types/docs';
+import type { AnySupportedStyle, Guide, Section, Sidebar, SupportedFramework, SupportedStyle } from '@/types/docs';
 import { sidebar } from '@/config/docs/sidebar';
+import {
+
+  getAvailableStyles,
+
+  isSection,
+
+} from '@/types/docs';
 
 /**
  * Check if an item (Guide or Section) should be shown based on framework and style.
@@ -21,14 +19,14 @@ import { sidebar } from '@/config/docs/sidebar';
  * @returns true if the item should be visible
  */
 function isItemVisible(
-	item: Guide | Section,
-	framework: SupportedFramework,
-	style: AnySupportedStyle,
+  item: Guide | Section,
+  framework: SupportedFramework,
+  style: AnySupportedStyle,
 ): boolean {
-	const frameworkMatch =
-		!item.frameworks || item.frameworks.includes(framework);
-	const styleMatch = !item.styles || item.styles.includes(style);
-	return frameworkMatch && styleMatch;
+  const frameworkMatch
+    = !item.frameworks || item.frameworks.includes(framework);
+  const styleMatch = !item.styles || item.styles.includes(style);
+  return frameworkMatch && styleMatch;
 }
 
 /**
@@ -43,31 +41,31 @@ function isItemVisible(
  * @returns A new filtered sidebar with only visible content
  */
 export function filterSidebar(
-	framework: SupportedFramework,
-	style: AnySupportedStyle,
-	sidebarToFilter: Sidebar = sidebar,
+  framework: SupportedFramework,
+  style: AnySupportedStyle,
+  sidebarToFilter: Sidebar = sidebar,
 ): Sidebar {
-	return sidebarToFilter
-		.filter((item) => isItemVisible(item, framework, style))
-		.map((item) => {
-			if (isSection(item)) {
-				const filteredContents = filterSidebar(framework, style, item.contents);
-				return {
-					...item,
-					contents: filteredContents,
-				};
-			}
-			// It's a Guide, return as-is
-			return item;
-		})
-		.filter((item) => {
-			// Remove sections with no contents after filtering
-			if (isSection(item)) {
-				return item.contents.length > 0;
-			}
-			// Keep all guides
-			return true;
-		});
+  return sidebarToFilter
+    .filter(item => isItemVisible(item, framework, style))
+    .map((item) => {
+      if (isSection(item)) {
+        const filteredContents = filterSidebar(framework, style, item.contents);
+        return {
+          ...item,
+          contents: filteredContents,
+        };
+      }
+      // It's a Guide, return as-is
+      return item;
+    })
+    .filter((item) => {
+      // Remove sections with no contents after filtering
+      if (isSection(item)) {
+        return item.contents.length > 0;
+      }
+      // Keep all guides
+      return true;
+    });
 }
 
 /**
@@ -81,26 +79,27 @@ export function filterSidebar(
  * @returns The slug of the first visible guide, or null if none found
  */
 export function findFirstGuide(
-	framework: SupportedFramework,
-	style: AnySupportedStyle,
-	sidebarToSearch: Sidebar = sidebar,
+  framework: SupportedFramework,
+  style: AnySupportedStyle,
+  sidebarToSearch: Sidebar = sidebar,
 ): string | null {
-	for (const item of sidebarToSearch) {
-		if (!isItemVisible(item, framework, style)) {
-			continue;
-		}
+  for (const item of sidebarToSearch) {
+    if (!isItemVisible(item, framework, style)) {
+      continue;
+    }
 
-		if (isSection(item)) {
-			// Recursively search section contents
-			const guide = findFirstGuide(framework, style, item.contents);
-			if (guide) return guide;
-		} else {
-			// It's a Guide, return its slug
-			return item.slug;
-		}
-	}
+    if (isSection(item)) {
+      // Recursively search section contents
+      const guide = findFirstGuide(framework, style, item.contents);
+      if (guide) return guide;
+    }
+    else {
+      // It's a Guide, return its slug
+      return item.slug;
+    }
+  }
 
-	return null;
+  return null;
 }
 
 /**
@@ -113,19 +112,20 @@ export function findFirstGuide(
  * @returns An array of all guide slugs found in the sidebar
  */
 export function getAllGuideSlugs(sidebarToExtract: Sidebar = sidebar): string[] {
-	const slugs: string[] = [];
+  const slugs: string[] = [];
 
-	for (const item of sidebarToExtract) {
-		if (isSection(item)) {
-			// Recursively get slugs from section contents
-			slugs.push(...getAllGuideSlugs(item.contents));
-		} else {
-			// It's a Guide, add its slug
-			slugs.push(item.slug);
-		}
-	}
+  for (const item of sidebarToExtract) {
+    if (isSection(item)) {
+      // Recursively get slugs from section contents
+      slugs.push(...getAllGuideSlugs(item.contents));
+    }
+    else {
+      // It's a Guide, add its slug
+      slugs.push(item.slug);
+    }
+  }
 
-	return slugs;
+  return slugs;
 }
 
 /**
@@ -136,20 +136,21 @@ export function getAllGuideSlugs(sidebarToExtract: Sidebar = sidebar): string[]
  * @returns The guide object if found, null otherwise
  */
 export function findGuideBySlug(
-	slug: string,
-	sidebarToSearch: Sidebar = sidebar,
+  slug: string,
+  sidebarToSearch: Sidebar = sidebar,
 ): Guide | null {
-	for (const item of sidebarToSearch) {
-		if (isSection(item)) {
-			// Recursively search section contents
-			const guide = findGuideBySlug(slug, item.contents);
-			if (guide) return guide;
-		} else if (item.slug === slug) {
-			// Found the guide
-			return item;
-		}
-	}
-	return null;
+  for (const item of sidebarToSearch) {
+    if (isSection(item)) {
+      // Recursively search section contents
+      const guide = findGuideBySlug(slug, item.contents);
+      if (guide) return guide;
+    }
+    else if (item.slug === slug) {
+      // Found the guide
+      return item;
+    }
+  }
+  return null;
 }
 
 /**
@@ -162,16 +163,16 @@ export function findGuideBySlug(
  * @returns Array of valid styles for this guide in this framework
  */
 export function getValidStylesForGuide<F extends SupportedFramework>(
-	guide: Guide,
-	framework: F,
+  guide: Guide,
+  framework: F,
 ): readonly SupportedStyle<F>[] {
-	const frameworkStyles = getAvailableStyles(framework);
+  const frameworkStyles = getAvailableStyles(framework);
 
-	// If guide has no style restrictions, all framework styles are valid
-	if (!guide.styles) {
-		return frameworkStyles;
-	}
+  // If guide has no style restrictions, all framework styles are valid
+  if (!guide.styles) {
+    return frameworkStyles;
+  }
 
-	// Return intersection of framework styles and guide styles
-	return frameworkStyles.filter((s) => guide.styles!.includes(s));
+  // Return intersection of framework styles and guide styles
+  return frameworkStyles.filter(s => guide.styles!.includes(s));
 }
diff --git a/website/src/utils/globWithParser.ts b/website/src/utils/globWithParser.ts
index 8f22f3cb..46a01918 100644
--- a/website/src/utils/globWithParser.ts
+++ b/website/src/utils/globWithParser.ts
@@ -1,16 +1,17 @@
-import { glob, type ParseDataOptions } from 'astro/loaders';
+import type { ParseDataOptions } from 'astro/loaders';
+import { glob } from 'astro/loaders';
 
 /**
  * Parser function that runs before Astro's schema validation.
  * Receives the entry and the original filename (before generateId transforms it).
  */
 type Parser = <TData extends Record<string, unknown>>(
-	options: ParseDataOptions<TData>,
-	originalEntry: string,
+  options: ParseDataOptions<TData>,
+  originalEntry: string,
 ) => Promise<ParseDataOptions<TData>>;
 
 type GlobWithParserOptions = Parameters<typeof glob>[0] & {
-	parser: Parser;
+  parser: Parser;
 };
 
 /**
@@ -36,46 +37,46 @@ type GlobWithParserOptions = Parameters<typeof glob>[0] & {
  * ```
  */
 export function globWithParser({
-	parser,
-	generateId,
-	...globOptions
+  parser,
+  generateId,
+  ...globOptions
 }: GlobWithParserOptions) {
-	/**
-	 * Store mapping of transformed IDs to original entry filenames.
-	 * Created per-invocation to avoid memory leaks across builds.
-	 * This is needed because generateId transforms the entry name (e.g., removes date prefix),
-	 * but we need access to the original filename in the parser (e.g., to extract date from filename).
-	 */
-	const entryMap = new Map<string, string>();
+  /**
+   * Store mapping of transformed IDs to original entry filenames.
+   * Created per-invocation to avoid memory leaks across builds.
+   * This is needed because generateId transforms the entry name (e.g., removes date prefix),
+   * but we need access to the original filename in the parser (e.g., to extract date from filename).
+   */
+  const entryMap = new Map<string, string>();
 
-	// Wrap generateId to capture the original entry name before transformation
-	// This allows us to maintain a mapping from the transformed ID back to the original filename
-	const wrappedGenerateId = generateId
-		? (ctx: Parameters<NonNullable<typeof generateId>>[0]) => {
-				const newId = generateId(ctx);
-				// Store mapping: transformed ID -> original filename
-				entryMap.set(newId, ctx.entry);
-				return newId;
-			}
-		: undefined;
+  // Wrap generateId to capture the original entry name before transformation
+  // This allows us to maintain a mapping from the transformed ID back to the original filename
+  const wrappedGenerateId = generateId
+    ? (ctx: Parameters<NonNullable<typeof generateId>>[0]) => {
+        const newId = generateId(ctx);
+        // Store mapping: transformed ID -> original filename
+        entryMap.set(newId, ctx.entry);
+        return newId;
+      }
+    : undefined;
 
-	// Create the base glob loader with our wrapped generateId
-	const loader = glob({ ...globOptions, generateId: wrappedGenerateId });
-	const originalLoad = loader.load;
+  // Create the base glob loader with our wrapped generateId
+  const loader = glob({ ...globOptions, generateId: wrappedGenerateId });
+  const originalLoad = loader.load;
 
-	// Intercept the load function to inject our custom parser
-	// This allows us to provide both the transformed entry and original filename to the parser
-	loader.load = async ({ parseData, ...rest }) => {
-		return originalLoad({
-			parseData: async (entry) => {
-				// Retrieve the original filename from our map, falling back to entry.id if not found
-				const originalEntry = entryMap.get(entry.id) || entry.id;
-				// Call user's parser with both the transformed entry and original filename
-				return parseData(await parser(entry, originalEntry));
-			},
-			...rest,
-		});
-	};
+  // Intercept the load function to inject our custom parser
+  // This allows us to provide both the transformed entry and original filename to the parser
+  loader.load = async ({ parseData, ...rest }) => {
+    return originalLoad({
+      parseData: async (entry) => {
+        // Retrieve the original filename from our map, falling back to entry.id if not found
+        const originalEntry = entryMap.get(entry.id) || entry.id;
+        // Call user's parser with both the transformed entry and original filename
+        return parseData(await parser(entry, originalEntry));
+      },
+      ...rest,
+    });
+  };
 
-	return loader;
+  return loader;
 }
diff --git a/website/tsconfig.json b/website/tsconfig.json
index 558dcfee..edc88521 100644
--- a/website/tsconfig.json
+++ b/website/tsconfig.json
@@ -1,19 +1,19 @@
 {
   "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "strictNullChecks": true
+  },
   "include": [
     ".astro/types.d.ts",
     "**/*"
   ],
   "exclude": [
     "dist"
-  ],
-  "compilerOptions": {
-    "strictNullChecks": true,
-    "jsx": "react-jsx",
-    "jsxImportSource": "react",
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  }
-}
\ No newline at end of file
+  ]
+}