refactor(core,react,html): migrate component state definitions to core media-store

- Move PlayButton and MuteButton state definitions from React/HTML packages to core media-store
- Create component-state-definitions directory in @vjs-10/media-store
- Update exports in media-store to include new state definitions
- Update all React and HTML components to import from @vjs-10/media-store
- Remove duplicate state definition files from React and HTML packages
- Establish single source of truth for component state logic in core package
- Fix TypeScript declaration generation for proper module resolution

This migration follows the monorepo architecture where core packages provide
foundation logic and platform packages consume it, eliminating code duplication
and ensuring consistent behavior across implementations.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

packages/core/media-store/src/component-state-definitions/mute-button.ts

@@ -11,7 +11,9 @@ export interface MuteButtonMethods {
 export interface MuteButtonStateDefinition {
   keys: string[];
   stateTransform: (rawState: any) => MuteButtonState;
-  createRequestMethods: (dispatch: (action: { type: string }) => void) => MuteButtonMethods;
+  createRequestMethods: (
+    dispatch: (action: { type: string }) => void,
+  ) => MuteButtonMethods;
 }
 
 /**
@@ -20,12 +22,12 @@ export interface MuteButtonStateDefinition {
  */
 export const muteButtonStateDefinition: MuteButtonStateDefinition = {
   keys: ['muted', 'volumeLevel'],
-  
+
   stateTransform: (rawState: any): MuteButtonState => ({
     muted: rawState.muted ?? false,
     volumeLevel: rawState.volumeLevel ?? 'off',
   }),
-  
+
   createRequestMethods: (dispatch): MuteButtonMethods => ({
     requestMute: () => dispatch({ type: 'muterequest' }),
     requestUnmute: () => dispatch({ type: 'unmuterequest' }),

packages/core/media-store/src/component-state-definitions/play-button.ts

@@ -30,4 +30,4 @@ export const playButtonStateDefinition: PlayButtonStateDefinition = {
     requestPlay: () => dispatch({ type: 'playrequest' }),
     requestPause: () => dispatch({ type: 'pauserequest' }),
   }),
-};
+};

packages/core/media-store/src/index.ts

@@ -1,4 +1,6 @@
 export * from './factory';
 export { createMediaStore } from './media-store';
 export * from './state-mediators/playable';
-export * from './state-mediators/audible';
+export * from './state-mediators/audible';
+export * from './component-state-definitions/play-button';
+export * from './component-state-definitions/mute-button';

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

@@ -4,7 +4,7 @@ import {
   PropsHook,
 } from '../utils/component-factory';
 import { MediaChromeButton } from './media-chrome-button';
-import { muteButtonStateDefinition } from './state-definitions/mute-button';
+import { muteButtonStateDefinition } from '@vjs-10/media-store';
 
 export class MuteButtonBase extends MediaChromeButton {
   _state:

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

@@ -4,7 +4,7 @@ import {
   PropsHook,
 } from '../utils/component-factory';
 import { MediaChromeButton } from './media-chrome-button';
-import { playButtonStateDefinition } from './state-definitions/play-button';
+import { playButtonStateDefinition } from '@vjs-10/media-store';
 
 export class PlayButtonBase extends MediaChromeButton {
   _state:

packages/html/html/src/components/state-definitions/mute-button.ts

@@ -1,35 +0,0 @@
-export interface MuteButtonState {
-  muted: boolean;
-  volumeLevel: string;
-}
-
-export interface MuteButtonMethods {
-  requestMute: () => void;
-  requestUnmute: () => void;
-}
-
-export interface MuteButtonStateDefinition {
-  keys: string[];
-  stateTransform: (rawState: any) => MuteButtonState;
-  createRequestMethods: (
-    dispatch: (action: { type: string }) => void,
-  ) => MuteButtonMethods;
-}
-
-/**
- * MuteButton state definition
- * Defines the core state logic that can be shared between implementations
- */
-export const muteButtonStateDefinition: MuteButtonStateDefinition = {
-  keys: ['muted', 'volumeLevel'],
-
-  stateTransform: (rawState: any): MuteButtonState => ({
-    muted: rawState.muted ?? (false as boolean),
-    volumeLevel: rawState.volumeLevel ?? ('off' as string),
-  }),
-
-  createRequestMethods: (dispatch): MuteButtonMethods => ({
-    requestMute: () => dispatch({ type: 'muterequest' }),
-    requestUnmute: () => dispatch({ type: 'unmuterequest' }),
-  }),
-};

packages/react/react/src/components/MuteButton.tsx

@@ -5,7 +5,7 @@ import {
 } from '@vjs-10/react-media-store';
 import * as React from 'react';
 import { toConnectedComponent } from '../utils/component-factory';
-import { muteButtonStateDefinition } from './state-definitions/mute-button';
+import { muteButtonStateDefinition } from '@vjs-10/media-store';
 
 export const useMuteButtonState = (_props: any) => {
   const mediaStore = useMediaStore();

packages/react/react/src/components/PlayButton.tsx

@@ -5,7 +5,7 @@ import {
 } from '@vjs-10/react-media-store';
 import * as React from 'react';
 import { toConnectedComponent } from '../utils/component-factory';
-import { playButtonStateDefinition } from './state-definitions/play-button';
+import { playButtonStateDefinition } from '@vjs-10/media-store';
 
 export const usePlayButtonState = (_props: any) => {
   const mediaStore = useMediaStore();

packages/react/react/src/components/state-definitions/play-button.ts

@@ -1,33 +0,0 @@
-export interface PlayButtonState {
-  paused: boolean;
-}
-
-export interface PlayButtonMethods {
-  requestPlay: () => void;
-  requestPause: () => void;
-}
-
-export interface PlayButtonStateDefinition {
-  keys: string[];
-  stateTransform: (rawState: any) => PlayButtonState;
-  createRequestMethods: (
-    dispatch: (action: { type: string }) => void,
-  ) => PlayButtonMethods;
-}
-
-/**
- * PlayButton state definition
- * Defines the core state logic that can be shared between implementations
- */
-export const playButtonStateDefinition: PlayButtonStateDefinition = {
-  keys: ['paused'],
-
-  stateTransform: (rawState: any): PlayButtonState => ({
-    paused: rawState.paused ?? true,
-  }),
-
-  createRequestMethods: (dispatch): PlayButtonMethods => ({
-    requestPlay: () => dispatch({ type: 'playrequest' }),
-    requestPause: () => dispatch({ type: 'pauserequest' }),
-  }),
-};