feat!: Migrate to media packages

.github/workflows/ci.yml

@@ -24,9 +24,9 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v5
+        uses: pnpm/action-setup@v6
         with:
-          version: 10.33.0
+          version: 10.33.2
 
       - name: Setup Node
         uses: actions/setup-node@v6
@@ -38,14 +38,14 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Run lint
-        run: pnpm nx run-many -t lint
-          --projects=cdg-core,cdg-loader,cdg-player,cdg-controls,demo,framework-demo
-          --outputStyle=stream
+        run: pnpm nx run-many -t lint \
+          --projects=media-core,media-loader,media-parser-cdg,media-player,media-playback-controls,logger,demo,framework-demo,storybook-hub,storybook-react,storybook-web
+          \ --outputStyle=stream
 
       - name: Run typecheck
-        run: pnpm nx run-many -t typecheck
-          --projects=cdg-core,cdg-loader,cdg-player,cdg-controls,demo,framework-demo
-          --outputStyle=stream
+        run: pnpm nx run-many -t typecheck \
+          --projects=media-core,media-loader,media-parser-cdg,media-player,media-playback-controls,logger,demo,framework-demo,storybook-hub,storybook-react,storybook-web
+          \ --outputStyle=stream
 
   unit-test:
     name: ci/unit-test
@@ -56,9 +56,9 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v5
+        uses: pnpm/action-setup@v6
         with:
-          version: 10.33.0
+          version: 10.33.2
 
       - name: Setup Node
         uses: actions/setup-node@v6
@@ -100,9 +100,9 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v5
+        uses: pnpm/action-setup@v6
         with:
-          version: 10.33.0
+          version: 10.33.2
 
       - name: Setup Node
         uses: actions/setup-node@v6

.github/workflows/codeql.yml

@@ -5,7 +5,7 @@ on:
     branches: [ main, master ]
     types: [ opened, reopened, synchronize, ready_for_review ]
   push:
-    branches: [ main, master ]
+    branches: [ main ]
   schedule:
     - cron: "23 4 * * 1"
 
@@ -38,9 +38,9 @@ jobs:
           languages: ${{ matrix.language }}
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v5
+        uses: pnpm/action-setup@v6
         with:
-          version: 10.33.0
+          version: 10.33.2
 
       - name: Setup Node
         uses: actions/setup-node@v6

.github/workflows/docs-pages.yml

@@ -34,9 +34,9 @@ jobs:
             github.event.workflow_run.head_sha || github.ref }}
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v5
+        uses: pnpm/action-setup@v6
         with:
-          version: 10.33.0
+          version: 10.33.2
 
       - name: Setup Node
         uses: actions/setup-node@v6

.github/workflows/release.yml

@@ -34,9 +34,9 @@ jobs:
           fetch-depth: 0
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v5
+        uses: pnpm/action-setup@v6
         with:
-          version: 10.33.0
+          version: 10.33.2
 
       - name: Setup git creds
         env:

README.md

@@ -4,27 +4,33 @@
 	<img src="./assets/branding/CDGPlayer.svg" alt="CDGPlayer logo" height="250" width="auto" />
 </p>
 
-CDGPlayer provides browser karaoke playback libraries under the `@cxing/cdg-\*` package family.
+CDGPlayer provides browser karaoke playback libraries under the `@cxing/media-*` package family.
 
 **BREAKING CHANGE**: The legacy `CDGPlayer` and `CDGControls` monolithic packages have been deprecated and replaced with a modular package architecture. See the [migration guide](https://cutterscrossing.com/?path=/docs/documentation-migration-guide--docs) for details.
 
 ## Packages
 
-- `@cxing/cdg-core`: CD+G parsing, instruction execution, and frame rendering primitives.
-- `@cxing/cdg-loader`: zip/file/url loading with normalized track payloads and metadata.
-- `@cxing/cdg-player`: high-level playback orchestration, audio sync, and rendering dispatch.
-- `@cxing/cdg-controls`: framework-agnostic controls model and UI control builders.
+- `@cxing/media-core`: shared media contracts, parser interfaces, and runtime primitives.
+- `@cxing/media-parser-cdg`: CD+G parsing, instruction execution, and frame rendering primitives.
+- `@cxing/media-loader`: zip/file/url loading with normalized track payloads and metadata.
+- `@cxing/media-player`: high-level playback orchestration, audio sync, and rendering dispatch.
+- `@cxing/media-playback-controls`: framework-agnostic controls model and UI control builders.
 - `@cxing/logger`: standalone scoped logging utility shared across runtime packages.
 
 ## Install
 
 Install the packages your app needs.
 
-- Minimal playback setup: `@cxing/cdg-player`
-- Loader-only integrations: `@cxing/cdg-loader`
-- UI control integrations: `@cxing/cdg-controls`
+- Minimal playback setup: `@cxing/media-player`
+- Loader-only integrations: `@cxing/media-loader`
+- UI control integrations: `@cxing/media-playback-controls`
 - Runtime logging integrations: `@cxing/logger`
 
+## Toolchain Baseline
+
+- `pnpm` is pinned via `packageManager` in `package.json`.
+- TypeScript baseline is `6.x` for workspace development and CI.
+
 ## Documentation
 
 - [Getting started](https://cutterscrossing.com/?path=/docs/documentation-getting-started--documentation)
@@ -39,3 +45,9 @@ Install the packages your app needs.
 ## Repository Contribution
 
 Repository setup, CI/CD workflows, and branch protection policy are documented in [CONTRIBUTING.md](CONTRIBUTING.md).
+
+## Storybook Hub Static Build
+
+The composed hub build (`pnpm nx run storybook-hub:site`) embeds the framework-specific Storybooks under `apps/storybook-hub/.dist`.
+
+Storybook 10 emits `index.json` for references. During static hosting, compatibility files (`stories.json`, `metadata.json`) are mirrored from `index.json` for each embedded ref to avoid 404 requests from composition clients that still probe legacy manifest names.

apps/demo/src/app/app.element.spec.ts

@@ -26,11 +26,11 @@ const {
   createKeyControlMock: vi.fn(),
 }));
 
-vi.mock('@cxing/cdg-player', () => ({
+vi.mock('@cxing/media-player', () => ({
   createPlayer: createPlayerMock,
 }));
 
-vi.mock('@cxing/cdg-controls', () => ({
+vi.mock('@cxing/media-playback-controls', () => ({
   createControlsModel: createControlsModelMock,
   createPlayPauseControl: createPlayPauseControlMock,
   createCurrentTimeDisplay: createCurrentTimeDisplayMock,

apps/demo/src/app/app.element.ts

@@ -1,6 +1,6 @@
 import './app.element.css';
 import { createScopedLogger } from '@cxing/logger';
-import { createPlayer, type CdgPlayer } from '@cxing/cdg-player';
+import { createPlayer, type CdgPlayer } from '@cxing/media-player';
 import {
   createControlsModel,
   createCurrentTimeDisplay,
@@ -12,7 +12,7 @@ import {
   createVolumeControl,
   type CdgControlsModel,
   type DisposableControl,
-} from '@cxing/cdg-controls';
+} from '@cxing/media-playback-controls';
 
 const logger = createScopedLogger({ scope: 'demo', debug: true });
 

apps/demo/src/styles.d.ts

@@ -0,0 +1,4 @@
+/**
+ * TypeScript declarations for side-effect stylesheet imports in the demo app.
+ */
+declare module '*.css';

apps/demo/tsconfig.app.json

@@ -26,10 +26,10 @@
       "path": "../../packages/logger/tsconfig.lib.json"
     },
     {
-      "path": "../../packages/cdg-controls/tsconfig.lib.json"
+      "path": "../../packages/media-playback-controls/tsconfig.lib.json"
     },
     {
-      "path": "../../packages/cdg-player/tsconfig.lib.json"
+      "path": "../../packages/media-player/tsconfig.lib.json"
     }
   ]
 }

apps/demo/tsconfig.json

@@ -11,7 +11,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "noEmit": true,
+
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,

apps/demo/tsconfig.spec.json

@@ -28,16 +28,19 @@
       "path": "./tsconfig.app.json"
     },
     {
-      "path": "../../packages/cdg-core/tsconfig.lib.json"
+      "path": "../../packages/media-core/tsconfig.lib.json"
     },
     {
-      "path": "../../packages/cdg-loader/tsconfig.lib.json"
+      "path": "../../packages/media-parser-cdg/tsconfig.lib.json"
     },
     {
-      "path": "../../packages/cdg-player/tsconfig.lib.json"
+      "path": "../../packages/media-loader/tsconfig.lib.json"
     },
     {
-      "path": "../../packages/cdg-controls/tsconfig.lib.json"
+      "path": "../../packages/media-player/tsconfig.lib.json"
+    },
+    {
+      "path": "../../packages/media-playback-controls/tsconfig.lib.json"
     }
   ]
 }

apps/demo/vite.config.mts

@@ -12,16 +12,17 @@ export default defineConfig(() => ({
       '@shared-assets': path.join(import.meta.dirname, '../../assets/branding'),
       'react-native-fs': path.join(
         import.meta.dirname,
-        '../../packages/cdg-loader/src/lib/shims/react-native-fs.ts',
+        '../../packages/media-loader/src/lib/shims/react-native-fs.ts',
       ),
     },
   },
   optimizeDeps: {
     exclude: [
-      '@cxing/cdg-core',
-      '@cxing/cdg-loader',
-      '@cxing/cdg-player',
-      '@cxing/cdg-controls',
+      '@cxing/media-core',
+      '@cxing/media-parser-cdg',
+      '@cxing/media-loader',
+      '@cxing/media-player',
+      '@cxing/media-playback-controls',
     ],
   },
   server: {

apps/framework-demo/src/App.spec.tsx

@@ -12,11 +12,11 @@ const { createPlayerMock, createControlsModelMock } = vi.hoisted(() => ({
   createControlsModelMock: vi.fn(),
 }));
 
-vi.mock('@cxing/cdg-player', () => ({
+vi.mock('@cxing/media-player', () => ({
   createPlayer: createPlayerMock,
 }));
 
-vi.mock('@cxing/cdg-controls', () => ({
+vi.mock('@cxing/media-playback-controls', () => ({
   createControlsModel: createControlsModelMock,
 }));
 

apps/framework-demo/src/app/components/FrameworkDemo/hooks/useFrameworkDemo.context.tsx

@@ -11,12 +11,12 @@ import {
   type RefObject,
   type SetStateAction,
 } from 'react';
-import { createPlayer, type CdgPlayer } from '@cxing/cdg-player';
+import { createPlayer, type CdgPlayer } from '@cxing/media-player';
 import {
   createControlsModel,
   type CdgControlsModel,
   type ControlsViewState,
-} from '@cxing/cdg-controls';
+} from '@cxing/media-playback-controls';
 
 const DEFAULT_STATE: ControlsViewState = {
   status: 'idle',

apps/framework-demo/src/app/components/FrameworkDemo/useFrameworkDemo.context.spec.tsx

@@ -12,11 +12,11 @@ const { createPlayerMock, createControlsModelMock } = vi.hoisted(() => ({
   createControlsModelMock: vi.fn(),
 }));
 
-vi.mock('@cxing/cdg-player', () => ({
+vi.mock('@cxing/media-player', () => ({
   createPlayer: createPlayerMock,
 }));
 
-vi.mock('@cxing/cdg-controls', () => ({
+vi.mock('@cxing/media-playback-controls', () => ({
   createControlsModel: createControlsModelMock,
 }));
 

apps/framework-demo/src/css-modules.d.ts

@@ -1,6 +1,8 @@
 /**
  * TypeScript module declaration for imported CSS Module class maps.
  */
+declare module '*.css';
+
 declare module '*.module.css' {
   const classes: Record<string, string>;
   export default classes;

apps/framework-demo/tsconfig.app.json

@@ -24,19 +24,10 @@
   ],
   "references": [
     {
-      "path": "../../packages/logger/tsconfig.lib.json"
+      "path": "../../packages/media-playback-controls/tsconfig.lib.json"
     },
     {
-      "path": "../../packages/cdg-controls/tsconfig.lib.json"
-    },
-    {
-      "path": "../../packages/cdg-player/tsconfig.lib.json"
-    },
-    {
-      "path": "../../packages/cdg-core/tsconfig.lib.json"
-    },
-    {
-      "path": "../../packages/cdg-loader/tsconfig.lib.json"
+      "path": "../../packages/media-player/tsconfig.lib.json"
     }
   ]
 }

apps/framework-demo/tsconfig.json

@@ -11,7 +11,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "noEmit": true,
+
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,

apps/framework-demo/tsconfig.spec.json

@@ -29,16 +29,19 @@
       "path": "./tsconfig.app.json"
     },
     {
-      "path": "../../packages/cdg-controls/tsconfig.lib.json"
+      "path": "../../packages/media-playback-controls/tsconfig.lib.json"
     },
     {
-      "path": "../../packages/cdg-player/tsconfig.lib.json"
+      "path": "../../packages/media-player/tsconfig.lib.json"
     },
     {
-      "path": "../../packages/cdg-core/tsconfig.lib.json"
+      "path": "../../packages/media-core/tsconfig.lib.json"
     },
     {
-      "path": "../../packages/cdg-loader/tsconfig.lib.json"
+      "path": "../../packages/media-parser-cdg/tsconfig.lib.json"
+    },
+    {
+      "path": "../../packages/media-loader/tsconfig.lib.json"
     }
   ]
 }

apps/framework-demo/vite.config.mts

@@ -13,16 +13,17 @@ export default defineConfig(() => ({
       '@shared-assets': path.join(import.meta.dirname, '../../assets/branding'),
       'react-native-fs': path.join(
         import.meta.dirname,
-        '../../packages/cdg-loader/src/lib/shims/react-native-fs.ts',
+        '../../packages/media-loader/src/lib/shims/react-native-fs.ts',
       ),
     },
   },
   optimizeDeps: {
     exclude: [
-      '@cxing/cdg-core',
-      '@cxing/cdg-loader',
-      '@cxing/cdg-player',
-      '@cxing/cdg-controls',
+      '@cxing/media-core',
+      '@cxing/media-parser-cdg',
+      '@cxing/media-loader',
+      '@cxing/media-player',
+      '@cxing/media-playback-controls',
     ],
   },
   server: {