@maas/vue-equipment 1.0.0-beta.23 → 1.0.0-beta.24

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerRuntime.mjs

@@ -3,7 +3,7 @@ import { useEventListener } from "@vueuse/core";
 import { usePlayerState } from "./usePlayerState.mjs";
 export function usePlayerRuntime(args) {
   let hls;
-  const defferedLoading = shallowRef(false);
+  const deferredLoading = shallowRef(false);
   const { id, mediaRef, srcType, src } = args;
   const { initializeState } = usePlayerState(toValue(id));
   const state = initializeState();
@@ -24,7 +24,7 @@ export function usePlayerRuntime(args) {
     const el = toValue(mediaRef);
     if (!el) return;
     useEventListener(mediaRef, "play", () => {
-      defferedLoading.value = true;
+      deferredLoading.value = true;
     });
     const { default: Hls } = await import("hls.js");
     hls = new Hls({ autoStartLoad: false });
@@ -38,7 +38,7 @@ export function usePlayerRuntime(args) {
         toValue(mediaRef)?.dispatchEvent(new Event("suspend"));
       });
       hls.on(Hls.Events.MANIFEST_PARSED, () => {
-        if (defferedLoading.value) {
+        if (deferredLoading.value) {
           hls?.startLoad();
         }
       });
@@ -61,7 +61,7 @@ export function usePlayerRuntime(args) {
   }
   function destroy() {
     hls?.destroy();
-    defferedLoading.value = false;
+    deferredLoading.value = false;
   }
   return {
     initialize,

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerState.mjs

@@ -4,29 +4,33 @@ export function usePlayerState(id) {
   function createState(id2) {
     const state = {
       id: id2,
+      buffered: [],
       currentTime: 0,
+      dragging: false,
       duration: 0,
-      seeking: false,
-      volume: 1,
-      rate: 1,
-      loaded: false,
-      waiting: false,
       ended: false,
+      fullscreen: false,
+      loaded: false,
+      muted: false,
+      paused: false,
       playing: false,
+      rate: 1,
+      seeking: false,
       stalled: false,
-      buffered: [],
-      muted: false,
+      started: false,
       touched: false,
-      isFullscreen: false,
+      volume: 1,
+      waiting: false,
       fullscreenTarget: null,
       mouseEntered: false,
       controlsMouseEntered: false,
-      dragging: false,
       seekedTime: 0,
       seekedPercentage: 0,
       scrubbedPercentage: 0,
       thumbPercentage: 0,
       popoverOffsetX: 0,
+      hasOverlay: false,
+      hasControls: false,
       controlsBarRect: void 0,
       controlsTrackRect: void 0,
       controlsPopoverRect: void 0

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerVideoApi.d.ts

@@ -11,6 +11,7 @@ export declare function usePlayerVideoApi(args: UsePlayerVideoApiArgs): {
     seek: (time: number) => void;
     mute: () => void;
     unmute: () => void;
+    initializeFullscreen: () => void;
     enterFullscreen: () => void;
     exitFullscreen: () => void;
 };

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerVideoApi.mjs

@@ -6,16 +6,19 @@ export function usePlayerVideoApi(args) {
   const { id, playerRef, videoRef } = args;
   const { initializeState } = usePlayerState(toValue(id));
   const state = initializeState();
-  const { currentTime, playing, muted, touched, fullscreenTarget } = toRefs(state);
-  const { enter, exit } = useFullscreen(fullscreenTarget);
+  const { currentTime, playing, paused, muted, fullscreenTarget, fullscreen } = toRefs(state);
+  const { enter, exit, isFullscreen } = useFullscreen(fullscreenTarget);
   function play() {
     playing.value = true;
+    paused.value = false;
   }
   function pause() {
     playing.value = false;
+    paused.value = true;
   }
   function togglePlay() {
     playing.value = !playing.value;
+    paused.value = !playing.value;
   }
   function seek(time) {
     currentTime.value = time;
@@ -26,6 +29,39 @@ export function usePlayerVideoApi(args) {
   function unmute() {
     muted.value = false;
   }
+  function initializeFullscreen() {
+    if (!playerRef || !videoRef) {
+      return;
+    }
+    watch(
+      [playerRef, videoRef],
+      ([player, video]) => {
+        switch (true) {
+          case (!!video && !!player):
+            fullscreenTarget.value = isIOS() ? toValue(video) : toValue(player);
+            break;
+          case !!player:
+            fullscreenTarget.value = toValue(player);
+            break;
+          case !!video:
+            fullscreenTarget.value = toValue(video);
+            break;
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    watch(
+      isFullscreen,
+      (newFullscreen) => {
+        fullscreen.value = newFullscreen;
+      },
+      {
+        immediate: true
+      }
+    );
+  }
   function enterFullscreen() {
     if (!fullscreenTarget.value) {
       console.error("No fullscreen target found");
@@ -40,36 +76,6 @@ export function usePlayerVideoApi(args) {
     }
     exit();
   }
-  watch(playing, (value) => {
-    if (!touched.value && value) {
-      touched.value = true;
-    }
-  });
-  if (playerRef && !videoRef) {
-    watch(playerRef, (value) => {
-      if (value) {
-        fullscreenTarget.value = toValue(value);
-      }
-    });
-  }
-  if (videoRef && !playerRef) {
-    watch(videoRef, (value) => {
-      if (value) {
-        fullscreenTarget.value = toValue(value);
-      }
-    });
-  }
-  if (videoRef && playerRef) {
-    watch([playerRef, videoRef], ([player, video]) => {
-      if (player && video) {
-        fullscreenTarget.value = isIOS() ? toValue(video) : toValue(player);
-      } else if (player) {
-        fullscreenTarget.value = toValue(player);
-      } else if (video) {
-        fullscreenTarget.value = toValue(video);
-      }
-    });
-  }
   return {
     play,
     pause,
@@ -77,6 +83,7 @@ export function usePlayerVideoApi(args) {
     seek,
     mute,
     unmute,
+    initializeFullscreen,
     enterFullscreen,
     exitFullscreen
   };

package/dist/plugins/MagicPlayer/src/composables/useMagicPlayer.d.ts

@@ -8,12 +8,14 @@ export declare function useMagicPlayer(id: MaybeRef<string>): {
     waiting: import("vue").Ref<boolean, boolean>;
     ended: import("vue").Ref<boolean, boolean>;
     playing: import("vue").Ref<boolean, boolean>;
+    started: import("vue").Ref<boolean, boolean>;
+    paused: import("vue").Ref<boolean, boolean>;
     stalled: import("vue").Ref<boolean, boolean>;
     buffered: import("vue").Ref<import("../types/index.js").Buffered, import("../types/index.js").Buffered>;
     muted: import("vue").Ref<boolean, boolean>;
     touched: import("vue").Ref<boolean, boolean>;
     dragging: import("vue").Ref<boolean, boolean>;
-    isFullscreen: import("vue").Ref<boolean, boolean>;
+    fullscreen: import("vue").Ref<boolean, boolean>;
     currentTime: import("vue").Ref<number, number>;
     seekedTime: import("vue").Ref<number, number>;
     seekedPercentage: import("vue").Ref<number, number>;
@@ -35,6 +37,7 @@ export declare function useMagicPlayer(id: MaybeRef<string>): {
         seek: (time: number) => void;
         mute: () => void;
         unmute: () => void;
+        initializeFullscreen: () => void;
         enterFullscreen: () => void;
         exitFullscreen: () => void;
     };

package/dist/plugins/MagicPlayer/src/composables/useMagicPlayer.mjs

@@ -1,5 +1,4 @@
 import { toRefs } from "vue";
-import { usePlayerMediaApi } from "./private/usePlayerMediaApi.mjs";
 import { usePlayerVideoApi } from "./private/usePlayerVideoApi.mjs";
 import { usePlayerAudioApi } from "./private/usePlayerAudioApi.mjs";
 import { usePlayerRuntime } from "./private/usePlayerRuntime.mjs";
@@ -22,12 +21,14 @@ export function useMagicPlayer(id) {
     waiting,
     ended,
     playing,
+    started,
+    paused,
     stalled,
     buffered,
     muted,
     touched,
     dragging,
-    isFullscreen,
+    fullscreen,
     seekedTime,
     seekedPercentage,
     scrubbedPercentage,
@@ -43,12 +44,14 @@ export function useMagicPlayer(id) {
     waiting,
     ended,
     playing,
+    started,
+    paused,
     stalled,
     buffered,
     muted,
     touched,
     dragging,
-    isFullscreen,
+    fullscreen,
     currentTime,
     seekedTime,
     seekedPercentage,

package/dist/plugins/MagicPlayer/src/symbols/index.d.ts

@@ -2,7 +2,8 @@ import type { InjectionKey, MaybeRef, Ref } from 'vue';
 import type { MagicPlayerOptions } from '../types/index.js';
 declare const MagicPlayerInstanceId: InjectionKey<MaybeRef<string>>;
 declare const MagicPlayerOptionsKey: InjectionKey<MagicPlayerOptions>;
+declare const MagicPlayerRef: InjectionKey<Ref<HTMLDivElement | null>>;
 declare const MagicPlayerTrackRef: InjectionKey<Ref<HTMLDivElement | null>>;
 declare const MagicPlayerBarRef: InjectionKey<Ref<HTMLDivElement | null>>;
 declare const MagicPlayerPopoverRef: InjectionKey<Ref<HTMLDivElement | null>>;
-export { MagicPlayerInstanceId, MagicPlayerOptionsKey, MagicPlayerTrackRef, MagicPlayerBarRef, MagicPlayerPopoverRef, };
+export { MagicPlayerInstanceId, MagicPlayerOptionsKey, MagicPlayerRef, MagicPlayerTrackRef, MagicPlayerBarRef, MagicPlayerPopoverRef, };

package/dist/plugins/MagicPlayer/src/symbols/index.mjs

@@ -1,11 +1,13 @@
 const MagicPlayerInstanceId = Symbol();
 const MagicPlayerOptionsKey = Symbol();
+const MagicPlayerRef = Symbol();
 const MagicPlayerTrackRef = Symbol();
 const MagicPlayerBarRef = Symbol();
 const MagicPlayerPopoverRef = Symbol();
 export {
   MagicPlayerInstanceId,
   MagicPlayerOptionsKey,
+  MagicPlayerRef,
   MagicPlayerTrackRef,
   MagicPlayerBarRef,
   MagicPlayerPopoverRef

package/dist/plugins/MagicPlayer/src/types/index.d.ts

@@ -1,51 +1,77 @@
+type PlayerMode = 'audio' | 'video';
 export interface MagicPlayerOptions {
     src: string;
-    mode?: 'audio' | 'video';
+    mode?: PlayerMode;
     srcType?: 'native' | 'hls';
     preload?: 'auto' | 'metadata' | 'none';
     autoplay?: boolean;
+    playback?: ('viewport' | 'window')[] | false;
     loop?: boolean;
     transition?: {
         videoControls: string;
     };
 }
-type API = 'media' | 'player' | 'controls' | 'runtime' | 'player';
-export type Buffered = [number, number][];
-export type PlayerPrivateEvents = {
-    update: {
-        id: string;
-        api: API;
-        key: string;
-        value: string | number | boolean | Buffered | DOMRect | HTMLElement;
+export interface RequiredMagicPlayerOptions {
+    src: string;
+    mode: 'audio' | 'video';
+    srcType: 'native' | 'hls';
+    preload: 'auto' | 'metadata' | 'none';
+    autoplay: boolean;
+    loop: boolean;
+    transition: {
+        videoControls: string;
     };
-};
+}
+export type Buffered = [number, number][];
 export interface PlayerState {
     id: string;
+    buffered: Buffered;
     currentTime: number;
+    dragging: boolean;
     duration: number;
-    seeking: boolean;
-    volume: number;
-    rate: number;
-    loaded: boolean;
-    waiting: boolean;
     ended: boolean;
+    loaded: boolean;
+    muted: boolean;
+    paused: boolean;
     playing: boolean;
+    rate: number;
+    seeking: boolean;
     stalled: boolean;
-    buffered: Buffered;
-    muted: boolean;
+    started: boolean;
     touched: boolean;
-    isFullscreen: boolean;
+    volume: number;
+    waiting: boolean;
+    fullscreen: boolean;
     fullscreenTarget: HTMLElement | null;
     mouseEntered: boolean;
     controlsMouseEntered: boolean;
-    dragging: boolean;
     seekedTime: number;
     seekedPercentage: number;
     scrubbedPercentage: number;
     thumbPercentage: number;
     popoverOffsetX: number;
+    hasOverlay: boolean;
+    hasControls: boolean;
     controlsBarRect: DOMRect | undefined;
     controlsTrackRect: DOMRect | undefined;
     controlsPopoverRect: DOMRect | undefined;
 }
+export interface PlayerEvents {
+    onDragStart: string;
+    onDragEnd: string;
+    onEnd: string;
+    onFullscreenEnter: string;
+    onFullscreenLeave: string;
+    onLoad: string;
+    onMute: string;
+    onUnmute: string;
+    onPause: string;
+    onPlay: string;
+    onRateChange: string;
+    onStall: string;
+    onStart: string;
+    onTouch: string;
+    onVolumeChange: string;
+    onWait: string;
+}
 export {};

package/dist/plugins/MagicPlayer/src/utils/defaultOptions.d.ts

@@ -1,3 +1,3 @@
-import type { MagicPlayerOptions } from '../types/index.js';
-declare const defaultOptions: MagicPlayerOptions;
+import type { RequiredMagicPlayerOptions } from '../types/index.js';
+declare const defaultOptions: RequiredMagicPlayerOptions;
 export { defaultOptions };

package/dist/plugins/MagicPlayer/src/utils/playbackDefaults.d.ts

@@ -0,0 +1,3 @@
+import type { MagicPlayerOptions } from '../types/index.js';
+export declare const audioModePlaybackDefaults: MagicPlayerOptions['playback'];
+export declare const videoModePlaybackDefaults: MagicPlayerOptions['playback'];

package/dist/plugins/MagicPlayer/src/utils/playbackDefaults.mjs

@@ -0,0 +1,7 @@
+export const audioModePlaybackDefaults = [
+  "viewport"
+];
+export const videoModePlaybackDefaults = [
+  "viewport",
+  "window"
+];

package/dist/plugins/MagicScroll/src/components/MagicScrollCollision.vue.d.ts

@@ -3,12 +3,10 @@ interface MagicScrollCollisionProps {
     id?: string;
     offset?: CollisionOffset;
 }
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<MagicScrollCollisionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollCollisionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<MagicScrollCollisionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollCollisionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/plugins/MagicScroll/src/components/MagicScrollMotion.vue.d.ts

@@ -5,12 +5,10 @@ interface MagicScrollMotionProps {
     sequenceOptions?: SequenceOptions;
     progress?: number;
 }
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<MagicScrollMotionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollMotionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<MagicScrollMotionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollMotionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/plugins/MagicScroll/src/components/MagicScrollProvider.vue.d.ts

@@ -2,25 +2,6 @@ import { type MaybeElementRef } from '@vueuse/core';
 interface MagicScrollProviderProps {
     target?: MaybeElementRef<HTMLElement>;
 }
-declare const scrollReturn: {
-    x: import("vue").WritableComputedRef<number, number>;
-    y: import("vue").WritableComputedRef<number, number>;
-    isScrolling: import("vue").ShallowRef<boolean, boolean>;
-    arrivedState: {
-        left: boolean;
-        right: boolean;
-        top: boolean;
-        bottom: boolean;
-    };
-    directions: {
-        left: boolean;
-        right: boolean;
-        top: boolean;
-        bottom: boolean;
-    };
-    measure(): void;
-};
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {
     scrollReturn: {
         x: import("vue").WritableComputedRef<number, number>;
@@ -41,12 +22,9 @@ declare var __VLS_1: {
         measure(): void;
     };
 };
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<MagicScrollProviderProps, {
-    scrollReturn: typeof scrollReturn;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<MagicScrollProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/plugins/MagicScroll/src/components/MagicScrollScene.vue.d.ts

@@ -3,17 +3,12 @@ interface MagicScrollSceneProps {
     from?: ScrollIntersection;
     to?: ScrollIntersection;
 }
-declare const progress: import("vue").ShallowRef<number, number>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {
     progress: number;
 };
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<MagicScrollSceneProps, {
-    progress: typeof progress;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollSceneProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<MagicScrollSceneProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicScrollSceneProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/plugins/MagicToast/src/components/MagicToastView.vue.d.ts

@@ -2,27 +2,10 @@ interface MagicToastViewProps {
     id: string;
     index: number;
 }
-declare const state: import("../types/index.js").ToastState;
-declare const view: import("vue").ComputedRef<import("../types/index.js").ToastView>;
-declare const reversedIndex: import("vue").ComputedRef<number>;
-declare const height: import("vue").ComputedRef<string>;
-declare const offset: import("vue").ComputedRef<string>;
-declare const style: import("vue").ComputedRef<string>, onPointerdown: (e: PointerEvent) => void, onClick: (e: MouseEvent) => Promise<void>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<MagicToastViewProps, {
-    state: typeof state;
-    view: typeof view;
-    reversedIndex: typeof reversedIndex;
-    height: typeof height;
-    offset: typeof offset;
-    style: typeof style;
-    onPointerdown: typeof onPointerdown;
-    onClick: typeof onClick;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicToastViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<MagicToastViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicToastViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/plugins/MagicToast/src/composables/private/useToastDrag.mjs

@@ -7,8 +7,8 @@ import {
   interpolate,
   isWithinRange
 } from "@maas/vue-equipment/utils";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins";
 import { useToastState } from "./useToastState.mjs";
-import { useMagicEmitter } from "../../../../MagicEmitter/index.mjs";
 import { useToastView } from "./useToastView.mjs";
 import { useToastScrollLock } from "./useToastScrollLock.mjs";
 export function useToastDrag(args) {

package/dist/plugins/MagicToast/src/types/index.d.ts

@@ -40,14 +40,14 @@ export type ActiveToast = {
         bottom: number;
     };
 };
-export type ToastEvents = {
+export interface ToastEvents {
     beforeEnter: string;
     enter: string;
     afterEnter: string;
     beforeLeave: string;
     leave: string;
     afterLeave: string;
-};
+}
 export type MagicToastOptions = {
     debug?: boolean;
     position?: Position;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "Our Frontend Toolkit, Free and Open Source",
-  "version": "1.0.0-beta.23",
+  "version": "1.0.0-beta.24",
   "contributors": [
     {
       "name": "Robin Scholz",
@@ -17,6 +17,8 @@
     "@maas/mirror": "catalog:",
     "@release-it/bumper": "^7.0.2",
     "@types/node": "catalog:",
+    "eslint": "^9.25.1",
+    "prettier": "catalog:",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "release-it": "^18.1.2",
     "tailwindcss": "catalog:",
@@ -36,8 +38,8 @@
       "types": "./dist/plugins/index.d.ts",
       "import": "./dist/plugins/index.mjs"
     },
-    "./plugins/MagicPlayer/css/*.css": {
-      "import": "./dist/plugins/MagicPlayer/src/css/*.css"
+    "./plugins/MagicPlayer/css": {
+      "import": "./dist/plugins/MagicPlayer/src/css"
     },
     "./utils": {
       "types": "./dist/utils/index.d.mts",