From 351e25f0b524b1204e64c964345775f1fb33d888 Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Wed, 8 Oct 2025 17:28:05 -0500
Subject: [PATCH 1/3] fix: enable eslint & run eslint:fix

---
 .vscode/settings.json                         |   6 +-
 examples/html-demo/package.json               |   4 +-
 examples/react-demo/package.json              |   4 +-
 examples/react-demo/src/App.tsx               |  32 +--
 examples/react-demo/src/globals.css           |   4 +-
 examples/react-demo/tsconfig.json             |   4 +-
 examples/react-demo/vite.config.ts            |   4 +-
 package.json                                  |   1 +
 packages/core/core/package.json               |  24 +--
 packages/core/core/src/components/range.ts    |   6 +-
 .../core/core/src/components/time-range.ts    |  10 +-
 .../core/core/src/components/volume-range.ts  |   7 +-
 packages/core/core/src/utils/state.ts         |   8 +-
 packages/core/icons/assets/play.svg           |   4 +-
 packages/core/icons/assets/volume-high.svg    |  10 +-
 packages/core/icons/assets/volume-low.svg     |   7 +-
 packages/core/icons/assets/volume-off.svg     |   7 +-
 packages/core/icons/package.json              |  22 +--
 packages/core/icons/src/index.ts              |   2 +-
 packages/core/media-store/package.json        |  22 +--
 .../component-state-definitions/time-range.ts |   2 +-
 .../volume-range.ts                           |   4 +-
 packages/core/media-store/src/factory.ts      |  42 ++--
 packages/core/media-store/src/index.ts        |  16 +-
 packages/core/media-store/src/media-store.ts  |   5 +-
 .../src/state-mediators/fullscreenable.ts     |  42 ++--
 .../media-store/src/state-mediators/index.ts  |   2 +-
 .../src/state-mediators/playable.ts           |   4 +-
 .../src/state-mediators/temporal.ts           |  18 +-
 packages/core/media-store/src/utils/time.ts   |  12 +-
 packages/core/media/package.json              |  22 +--
 packages/core/media/src/index.ts              |   4 +-
 packages/core/media/src/playable.ts           |  12 +-
 packages/core/playback-engine/package.json    |  24 +--
 packages/core/playback-engine/src/index.ts    |   2 +-
 packages/html/html-icons/package.json         |  24 +--
 packages/html/html-icons/src/index.ts         |   6 +-
 .../html/html-media-elements/package.json     |  24 +--
 packages/html/html-media-store/package.json   |  22 +--
 packages/html/html/package.json               |  22 +--
 .../src/components/media-chrome-button.ts     |   2 +-
 .../components/media-current-time-display.ts  |  14 +-
 .../src/components/media-duration-display.ts  |  10 +-
 .../src/components/media-fullscreen-button.ts |  25 +--
 .../html/src/components/media-mute-button.ts  |  33 ++--
 .../html/src/components/media-play-button.ts  |  17 +-
 .../html/html/src/components/media-popover.ts |   9 +-
 .../html/src/components/media-time-range.ts   |  46 +++--
 .../html/html/src/components/media-tooltip.ts |  23 ++-
 .../html/src/components/media-volume-range.ts |  49 ++---
 packages/html/html/src/index.ts               |  12 +-
 .../html/html/src/skins/media-skin-default.ts |   4 +-
 .../html/html/src/utils/component-factory.ts  |  17 +-
 .../react-native-icons/package.json           |  22 +--
 .../react-native-icons/tsconfig.json          |   6 +-
 .../react-native-media-elements/package.json  |  22 +--
 .../react-native-media-elements/src/index.ts  |   8 +-
 .../react-native-media-elements/tsconfig.json |   6 +-
 .../react-native/react-native/package.json    |  28 +--
 .../react-native/react-native/tsconfig.json   |   6 +-
 packages/react/react-icons/package.json       |  28 +--
 packages/react/react-icons/svgr.config.js     |   8 +-
 packages/react/react-icons/tsconfig.json      |   6 +-
 .../react/react-media-elements/package.json   |  28 +--
 .../react/react-media-elements/src/index.ts   |   4 +-
 .../src/media-elements.tsx                    |  22 +--
 .../react/react-media-elements/tsconfig.json  |   6 +-
 packages/react/react-media-store/package.json |  30 +--
 .../react-media-store/src/MediaProvider.tsx   |  37 ++--
 packages/react/react-media-store/src/index.ts |   6 +-
 .../src/useSyncExternalStoreWithSelector.ts   |  25 +--
 .../react/react-media-store/tsconfig.json     |   6 +-
 packages/react/react/package.json             |  28 +--
 .../src/components/CurrentTimeDisplay.tsx     |  34 ++--
 .../react/src/components/DurationDisplay.tsx  |  22 +--
 .../react/src/components/FullscreenButton.tsx |  40 ++--
 .../react/src/components/MediaContainer.tsx   |  10 +-
 .../react/react/src/components/MuteButton.tsx |  38 ++--
 .../react/react/src/components/PlayButton.tsx |  36 ++--
 .../react/react/src/components/Popover.tsx    |   4 +-
 .../react/react/src/components/TimeRange.tsx  |  84 ++++----
 .../react/react/src/components/Tooltip.tsx    |  18 +-
 packages/react/react/src/components/Video.tsx |  22 +--
 .../react/src/components/VolumeRange.tsx      |  69 +++----
 packages/react/react/src/index.ts             |  16 +-
 .../src/skins/default/MediaSkinDefault.tsx    |   6 +-
 .../react/react/src/skins/default/index.ts    |   2 +-
 .../react/react/src/skins/default/styles.ts   |  34 ++--
 packages/react/react/src/skins/index.ts       |   4 +-
 .../src/skins/toasted/MediaSkinToasted.tsx    |   7 +-
 .../react/react/src/skins/toasted/index.ts    |   2 +-
 .../react/react/src/skins/toasted/styles.ts   |   4 +-
 .../react/react/src/skins/toasted/types.ts    |   2 +-
 packages/react/react/src/utils/cn.ts          |   2 +-
 .../react/src/utils/component-factory.tsx     |  37 ++--
 .../react/react/src/utils/useComposedRefs.ts  |   6 +-
 packages/react/react/tsconfig.json            |   6 +-
 pnpm-workspace.yaml                           |   2 +-
 tsconfig.base.json                            |  28 +--
 website/README.md                             |  12 +-
 website/TODO.md                               |   2 +-
 website/astro.config.mjs                      |   4 +-
 website/public/favicon.svg                    |  10 +-
 website/src/components/docs/Selectors.tsx     |  23 ++-
 website/src/config/docs/sidebar.ts            |  24 +--
 website/src/content.config.ts                 | 187 +++++++++---------
 website/src/content/authors.json              |  58 +++---
 .../blog/2024-07-19-markdown-style-guide.md   |   4 +-
 website/src/pages/rss.xml.js                  |  22 +--
 website/src/types/docs.ts                     |  44 ++---
 website/src/utils/docs/redirects.ts           |  23 +--
 website/src/utils/docs/sidebar.ts             | 181 ++++++++---------
 website/src/utils/globWithParser.ts           |  83 ++++----
 website/tsconfig.json                         |  22 +--
 114 files changed, 1156 insertions(+), 1168 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 348680a7d..0e60dd2f3 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/examples/html-demo/package.json b/examples/html-demo/package.json
index 94391b42a..92c9f4394 100644
--- a/examples/html-demo/package.json
+++ b/examples/html-demo/package.json
@@ -1,9 +1,9 @@
 {
   "name": "html-demo",
+  "type": "module",
   "version": "1.0.0",
-  "description": "HTML example for Video.js 10",
   "private": true,
-  "type": "module",
+  "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 7a38dee58..643122a90 100644
--- a/examples/react-demo/package.json
+++ b/examples/react-demo/package.json
@@ -1,9 +1,9 @@
 {
   "name": "react-demo",
+  "type": "module",
   "version": "1.0.0",
-  "description": "React example for Video.js 10",
   "private": true,
-  "type": "module",
+  "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 23c503a11..ec0e4c8ac 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 ca5200df5..18f9a175e 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 85e780732..40aa8ebcd 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 6aa7b8a71..faef47bdf 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 0ef406864..daa7f813c 100644
--- a/package.json
+++ b/package.json
@@ -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"
   },
diff --git a/packages/core/core/package.json b/packages/core/core/package.json
index 7f6baf26f..356990e3c 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 0ef60eef9..4f5776159 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 fa9010065..afbbfde55 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 38fda567f..e853926ba 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 b030b9f5e..d72bec3d6 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 d946a5854..a333b956f 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 cf52ac19b..f16ae1bfa 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 a3fb79ce7..a54772694 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 f652de6f9..cd7944383 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 7a463cf96..37c2120c9 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 0d45b5e4d..b7c9cf838 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 ef14a33fc..7fb793973 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 94195c5e6..92d90246a 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 2783d2ca3..748593075 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 5b2977d16..6ba5c72de 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 32c61ecf9..bb9b38472 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 98242da8d..b8e5eb11a 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 4cfb76fb2..178005aa0 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 b19a68cd5..e0348ad37 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 540f68a1d..b44a626be 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 5958b37c8..09b2f33f1 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 e59c0e7d8..f34ee2a90 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 2a7a051e0..fb39dda89 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 57d37acf3..d4be17568 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 b001245a5..5bc418756 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 935b46ad3..82818ea9d 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 724972c6b..f501ce234 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 120be94ac..5677077dc 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 c0fc97713..30729a0d1 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 dc8c292c2..b47058e69 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 a9d5dda60..fcf0eb060 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 d35502239..7f0377ee2 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 be9175c76..15bfb515f 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 0534e63e0..4fda6acb2 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 9d34d41d8..a5732876a 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 071737ec8..2e7027a64 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 06cb0b44d..6950557ea 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 8ce155e81..b0afd7a94 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 50377d1d7..963562e1d 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 8b5f88b65..d23e298bf 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 3e44eda61..914ccf537 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 d5341f931..fc2ea359a 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 2a8d5e647..bc14b9688 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 cdf6e8b33..93b0ffb7d 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 825a3dd02..8b7b51b88 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 b16b583ec..1cf053670 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 61b21bbc9..df7cb2db2 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 c8d8dff38..282d87a9a 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 dfded90ed..a62bb76ef 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 61b21bbc9..df7cb2db2 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 80d970f31..6e565123f 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 61b21bbc9..df7cb2db2 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 38306674b..5326d0b0a 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 0287f934a..4edaeda44 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 61b21bbc9..df7cb2db2 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 4dc9ebdae..e77281675 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 ab84d0ea5..c8cbae7a8 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 6f215eafa..2b120c06b 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 61b21bbc9..df7cb2db2 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 29cfd8bac..bf387f915 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 2f218e68c..36c70c220 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 92d7df5cd..292a5f06b 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 f39a7ca9b..d704be02b 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> =
-  | {
-      hasValue: true;
-      value: Selection;
-    }
+type SnapshotRef<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 61b21bbc9..df7cb2db2 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 164f4a844..70e14387e 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 e93470a1d..49f5113c1 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 8ff39482e..63549eeac 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 0c5e3a61d..9610696c5 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 b8d74ea16..2f8d70d2e 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 efef0ec81..0ec782d4d 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 a03214c5c..1b243fd41 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 d8174d21b..772c6af8d 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 77c9b2fae..a6a4d9509 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 effa40cc8..4819dca08 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 562824cfc..79cbb7460 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 { forwardRef, useImperativeHandle, useRef } from 'react';
-
 import { createMediaStateOwner } from '@vjs-10/media';
+
 import { useMediaRef } from '@vjs-10/react-media-store';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
 
-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 08adc23f4..1e3364400 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 17a851397..bb8c40713 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 4aaf4bf59..d2242fbba 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 d790012bd..09ab0fb44 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 07d6f1252..b076b1dd8 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 bd5af525a..885060fc2 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 1752ea647..a714e7ae0 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 692577a7e..f09f4f820 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 65637ce41..9106559ed 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 583f85590..0dc0a0d93 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 af3edfde3..a5a5ee844 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 ef601d2ae..c8d94fd10 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 1caa51af3..09704d4a4 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 61b21bbc9..df7cb2db2 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 2cfb4985d..a269441f6 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 48c5e0c7e..c76ba1cc0 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,
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "composite": true,
-    "incremental": true,
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
+    "exactOptionalPropertyTypes": true,
     "noFallthroughCasesInSwitch": true,
     "noImplicitAny": true,
+    "noImplicitReturns": true,
     "noImplicitThis": true,
-    "exactOptionalPropertyTypes": true,
     "noUncheckedIndexedAccess": true,
-    "esModuleInterop": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": 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 02ae83598..991a53120 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 65058bf0f..fa56dcdde 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 2924c404b..0ebf9bf05 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 f157bd1c5..69cc43a9c 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 f0817fb2e..b9778372b 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 fe146477e..e55f31226 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 f3c69041b..edb814b0c 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 72e42c80b..36c0932be 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 f032313c0..10f4e5571 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 b937a6524..5ac61bf8d 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 4fc581ced..3b084184b 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 2140a80d9..3977f6190 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 a074491ea..3629d1fe3 100644
--- a/website/src/utils/docs/sidebar.ts
+++ b/website/src/utils/docs/sidebar.ts
@@ -1,14 +1,12 @@
+import type { AnySupportedStyle, Guide, Section, Sidebar, SupportedFramework, SupportedStyle } from '@/types/docs';
+import { sidebar } from '@/config/docs/sidebar';
 import {
-	type SupportedFramework,
-	type SupportedStyle,
-	type AnySupportedStyle,
-	getAvailableStyles,
-	type Guide,
-	type Section,
-	type Sidebar,
-	isSection,
+
+  getAvailableStyles,
+
+  isSection,
+
 } from '@/types/docs';
-import { sidebar } from '@/config/docs/sidebar';
 
 /**
  * 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 8f22f3cb8..46a019181 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 558dcfeef..edc885210 100644
--- a/website/tsconfig.json
+++ b/website/tsconfig.json
@@ -1,19 +1,19 @@
 {
   "extends": "astro/tsconfigs/strict",
-  "include": [
-    ".astro/types.d.ts",
-    "**/*"
-  ],
-  "exclude": [
-    "dist"
-  ],
   "compilerOptions": {
-    "strictNullChecks": true,
     "jsx": "react-jsx",
     "jsxImportSource": "react",
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
-  }
-}
\ No newline at end of file
+    },
+    "strictNullChecks": true
+  },
+  "include": [
+    ".astro/types.d.ts",
+    "**/*"
+  ],
+  "exclude": [
+    "dist"
+  ]
+}

From 3ae48147c3cd486d430875fe062935b81a4a6230 Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Wed, 8 Oct 2025 17:49:45 -0500
Subject: [PATCH 2/3] chore: eslint ignore .astro folder

---
 eslint.config.mjs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 366e15562..881e1594c 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,
   },

From 158cac143809a4d227e6a05538accaa7a3317326 Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Wed, 8 Oct 2025 17:50:20 -0500
Subject: [PATCH 3/3] chore: enable pre-commit hook and lint-staged

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index daa7f813c..5dc706518 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",
@@ -51,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"
   }
 }