@maas/vue-equipment 0.40.0 → 1.0.0-beta.2

package/dist/plugins/MagicCommand/src/components/MagicCommandBody.vue

@@ -1,91 +0,0 @@
-<template>
-  <div class="magic-command-body" ref="elRef">
-    <slot />
-  </div>
-</template>
-<script lang="ts" setup>
-import { inject, ref, watch, nextTick } from 'vue'
-import { useMagicKeys } from '@vueuse/core'
-
-import { useCommandItem } from '../composables/private/useCommandItem'
-import { useCommandScroll } from '../composables/private/useCommandScroll'
-import { MagicCommandInstanceId, MagicCommandProviderOptions } from '../symbols'
-
-import type { MagicCommandOptions } from '../types'
-
-const elRef = ref<HTMLElement | undefined>(undefined)
-
-const commandId = inject(MagicCommandInstanceId, '')
-const options = inject(MagicCommandProviderOptions, {} as MagicCommandOptions)
-
-const { activeItem, nextItem, prevItem } = useCommandItem(commandId)
-const {
-  findElement,
-  isElementAbove,
-  isElementBelow,
-  scrollInFromBottom,
-  scrollInFromTop,
-} = useCommandScroll(elRef)
-
-const keys = useMagicKeys()
-
-const nextTimeout = ref<ReturnType<typeof setTimeout> | undefined>(undefined)
-const prevTimeout = ref<ReturnType<typeof setTimeout> | undefined>(undefined)
-const nextInterval = ref<ReturnType<typeof setInterval> | undefined>(undefined)
-const prevInterval = ref<ReturnType<typeof setInterval> | undefined>(undefined)
-
-if (options.keys?.next) {
-  for (const key of options.keys.next) {
-    watch(keys[key], (value) => {
-      if (value) {
-        nextItem(options.loop)
-        nextTimeout.value = setTimeout(() => {
-          nextInterval.value = setInterval(() => {
-            nextItem(options.loop)
-          }, 100)
-        }, 500)
-      } else {
-        clearTimeout(nextTimeout.value)
-        clearInterval(nextInterval.value)
-      }
-    })
-  }
-}
-
-if (options.keys?.prev) {
-  for (const key of options.keys.prev) {
-    watch(keys[key], (value) => {
-      if (value) {
-        prevItem(options.loop)
-        prevTimeout.value = setTimeout(() => {
-          prevInterval.value = setInterval(() => {
-            prevItem(options.loop)
-          }, 100)
-        }, 500)
-      } else {
-        clearTimeout(prevTimeout.value)
-        clearInterval(prevInterval.value)
-      }
-    })
-  }
-}
-
-watch(activeItem, async (value) => {
-  if (!value) return
-
-  nextTick(() => {
-    const element = findElement(value)
-    if (element) {
-      if (isElementAbove(element)) {
-        scrollInFromTop(element)
-      } else if (isElementBelow(element)) {
-        scrollInFromBottom(element)
-      }
-    }
-  })
-})
-</script>
-
-<style>
-.magic-command-body{height:var(--magic-command-body-height,100%);overflow-y:var(--magic-command-body-overflow-y,auto)}
-</style>

package/dist/plugins/MagicCommand/src/components/MagicCommandFooter.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="magic-command-footer">
-    <slot />
-  </div>
-</template>

package/dist/plugins/MagicCommand/src/components/MagicCommandFooter.vue.d.ts

@@ -1,17 +0,0 @@
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/plugins/MagicCommand/src/components/MagicCommandGroup.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="magic-command-group">
-    <slot></slot>
-  </div>
-</template>

package/dist/plugins/MagicCommand/src/components/MagicCommandGroup.vue.d.ts

@@ -1,17 +0,0 @@
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/plugins/MagicCommand/src/components/MagicCommandHead.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="magic-command-head">
-    <slot />
-  </div>
-</template>

package/dist/plugins/MagicCommand/src/composables/private/useCommandStore.d.ts

@@ -1,35 +0,0 @@
-type Item = {
-    index: number;
-    id: string;
-};
-type CommandInstance = {
-    id: string;
-    items: Item[];
-    views: string[];
-};
-export declare function useCommandStore(): {
-    commandStore: import("vue").Ref<{
-        id: string;
-        items: {
-            index: number;
-            id: string;
-        }[];
-        views: string[];
-    }[], CommandInstance[] | {
-        id: string;
-        items: {
-            index: number;
-            id: string;
-        }[];
-        views: string[];
-    }[]>;
-    addInstance: (id: string) => void;
-    findInstance: (id: string) => CommandInstance;
-    removeInstance: (id: string) => void;
-    addItem: (id: string, item: string) => void;
-    removeItem: (id: string, item: string) => void;
-    sortItems: (id: string, parent: HTMLElement) => void;
-    addView: (id: string, view: string) => void;
-    removeView: (id: string, view: string) => void;
-};
-export {};

package/dist/plugins/MagicCommand/src/composables/private/useCommandStore.mjs

@@ -1,67 +0,0 @@
-import { ref } from "vue";
-let commandStore = ref([]);
-export function useCommandStore() {
-  function addInstance(id) {
-    commandStore.value.push({ id, items: [], views: [] });
-  }
-  function findInstance(id) {
-    const instance = commandStore.value.find((instance2) => {
-      return instance2.id === id;
-    });
-    return instance;
-  }
-  function removeInstance(id) {
-    commandStore.value = commandStore.value.filter(
-      (x) => x.id !== id
-    );
-  }
-  function sortItems(id, parent) {
-    const instance = findInstance(id);
-    if (instance) {
-      const itemElements = parent.querySelectorAll("[data-id]");
-      itemElements.forEach((el, index) => {
-        const itemId = el.dataset.itemId;
-        const item = instance.items?.find((item2) => item2.id === itemId);
-        if (item) {
-          item.index = index;
-        }
-      });
-      instance.items?.sort((a, b) => a.index - b.index);
-    }
-  }
-  function addItem(id, item) {
-    const instance = findInstance(id);
-    if (instance) {
-      instance.items?.push({ index: -1, id: item });
-    }
-  }
-  function removeItem(id, item) {
-    const instance = findInstance(id);
-    if (instance) {
-      instance.items = instance.items?.filter((x) => x.id !== item);
-    }
-  }
-  function addView(id, view) {
-    const instance = findInstance(id);
-    if (instance) {
-      instance.views?.push(view);
-    }
-  }
-  function removeView(id, view) {
-    const instance = findInstance(id);
-    if (instance) {
-      instance.views = instance.views?.filter((x) => x !== view);
-    }
-  }
-  return {
-    commandStore,
-    addInstance,
-    findInstance,
-    removeInstance,
-    addItem,
-    removeItem,
-    sortItems,
-    addView,
-    removeView
-  };
-}

package/dist/plugins/MagicCookie/src/components/MagicCookie.vue

@@ -1,117 +0,0 @@
-<template>
-  <client-only>
-    <div class="magic-cookie">
-      <div class="magic-cookie__container">
-        <div class="magic-cookie__body">
-          <slot />
-          <div v-show="preferencesVisible" class="magic-cookie__preferences">
-            <ul class="magic-cookie__cookies">
-              <li
-                v-for="cookie in cookies"
-                :key="cookie.key"
-                class="magic-cookie__cookie"
-              >
-                <div class="magic-cookie-checkbox">
-                  <input
-                    :id="cookie.key"
-                    type="checkbox"
-                    :checked="
-                      cookie.optional === false
-                        ? true
-                        : selectedCookies[cookie.key]
-                    "
-                    @change="toggleSelection(cookie.key)"
-                    :disabled="cookie.optional === false"
-                  />
-                </div>
-                <div>
-                  <slot :name="cookie.key" :cookie="cookie">
-                    <div class="magic-cookie__cookie__content">
-                      <div class="magic-cookie__cookie__title">
-                        <span v-text="cookie.title" />
-                      </div>
-                      <div
-                        v-if="cookie.text"
-                        class="magic-cookie__cookie__text"
-                        v-html="cookie.text"
-                      />
-                    </div>
-                  </slot>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
-        <div class="magic-cookie__footer">
-          <slot name="actions">
-            <div class="magic-cookie__actions">
-              <template v-if="preferencesVisible">
-                <button
-                  class="magic-cookie-button -secondary"
-                  @click="preferencesVisible = !preferencesVisible"
-                >
-                  Close
-                </button>
-                <button
-                  class="magic-cookie-button -secondary"
-                  @click="acceptSelected"
-                >
-                  Accept selected
-                </button>
-              </template>
-              <template v-else>
-                <button
-                  class="magic-cookie-button -secondary"
-                  @click="preferencesVisible = true"
-                >
-                  Preferences
-                </button>
-                <button class="magic-cookie-button -secondary" @click="reject">
-                  Reject
-                </button>
-              </template>
-              <button class="magic-cookie-button -primary" @click="accept">
-                Accept
-              </button>
-            </div>
-          </slot>
-        </div>
-      </div>
-    </div>
-  </client-only>
-</template>
-
-<script lang="ts" setup>
-import { useCookieApi } from '../composables/private/useCookieApi'
-import { useMagicCookie } from '../composables/useMagicCookie'
-import type { MagicCookieRecord } from '../types'
-
-// Define the props and their default values
-type MagicCookieProps = {
-  cookies: MagicCookieRecord[]
-  maxAge?: number
-}
-
-const props = withDefaults(defineProps<MagicCookieProps>(), {
-  maxAge: 60 * 60 * 24 * 30,
-})
-
-// Initialize the Cookie API
-useCookieApi({
-  cookies: props.cookies,
-  maxAge: props.maxAge,
-})
-
-const {
-  preferencesVisible,
-  selectedCookies,
-  accept,
-  acceptSelected,
-  reject,
-  toggleSelection,
-} = useMagicCookie()
-</script>
-
-<style>
-:root{--magic-cookie-preferences-mask:linear-gradient(0deg,hsla(0,0%,100%,0),#fff 1.5rem);--magic-cookie-checkbox-size:0.875rem;--magic-cookie-checkbox-border-width:1px;--magic-cookie-checkbox-border-color:currentColor;--magic-cookie-checkbox-border-radius:0;--magic-cookie-button-width:auto;--magic-cookie-button-height:2.5rem;--magic-cookie-button-spacing:1rem;--magic-cookie-button-border-width:1px;--magic-cookie-button-border-radius:0.25rem;--magic-cookie-button-backdrop-filter:none;--magic-cookie-button-primary-color:#000;--magic-cookie-button-primary-background:#fff;--magic-cookie-button-primary-border-color:transparent;--magic-cookie-button-secondary-color:#fff;--magic-cookie-button-secondary-background:transparent;--magic-cookie-button-secondary-border-color:transparent}.magic-cookie{-webkit-backdrop-filter:var(--magic-cookie-backdrop-filter,unset);backdrop-filter:var(--magic-cookie-backdrop-filter,unset);background-color:var(--magic-cookie-background,rgba(75,75,75,.5));border-radius:var(--magic-cookie-border-radius,0);box-shadow:var(--magic-cookie-box-shadow,unset);color:var(--magic-cookie-color,inherit);max-width:var(--magic-cookie-max-width,480px);overflow:hidden}.magic-cookie,.magic-cookie__container{display:flex;flex-direction:column;width:100%}.magic-cookie__container{max-height:var(--magic-cookie-max-height,calc(100vh - 2rem))}.magic-cookie__body{display:flex;flex-direction:column;gap:1rem;height:100%;mask:var(--magic-cookie-preferences-mask);-webkit-mask:var(--magic-cookie-preferences-mask);overflow-y:scroll;padding:1rem;width:100%;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none}.magic-cookie__body::-webkit-scrollbar{display:none}.magic-cookie__footer{padding:1rem;width:100%}.magic-cookie__preferences{flex-direction:column;height:100%}.magic-cookie__actions,.magic-cookie__preferences{display:flex;gap:1rem;width:100%}ul.magic-cookie__cookies{display:flex;flex-direction:column;gap:1rem;list-style:none;margin:0;padding:0}li.magic-cookie__cookie{align-items:flex-start;display:flex;gap:1rem;margin:0;padding:0}.magic-cookie__cookie__content{align-items:flex-start;display:flex;flex-direction:column;gap:.25rem}.magic-cookie__cookie__title{display:inline-flex}.magic-cookie__cookie__text{white-space:pre-line}.magic-cookie-checkbox{align-items:center;display:flex;gap:.625rem}.magic-cookie-checkbox input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:var(--magic-cookie-checkbox-border-width) var(--magic-cookie-checkbox-border-color) solid;border-radius:var(--magic-cookie-checkbox-border-radius);cursor:pointer;flex-shrink:0;height:var(--magic-cookie-checkbox-size);position:relative;vertical-align:middle;width:var(--magic-cookie-checkbox-size)}.magic-cookie-checkbox input[type=checkbox]:checked:after{background-color:var(--magic-cookie-checkbox-border-color);border-radius:var(--magic-cookie-checkbox-border-radius);content:"";display:block;height:calc(var(--magic-cookie-checkbox-size)/2);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(var(--magic-cookie-checkbox-size)/2)}.magic-cookie-checkbox:disabled{cursor:not-allowed}.magic-cookie-button{align-items:center;backdrop-filter:var(--magic-cookie-button-backdrop-filter);-webkit-backdrop-filter:var(--magic-cookie-button-backdrop-filter);border:var(--magic-cookie-button-border-width) solid;border-radius:var(--magic-cookie-button-border-radius);display:inline-flex;gap:var(--magic-cookie-button-spacing);height:var(--magic-cookie-button-height);justify-content:center;padding:0 var(--magic-cookie-button-spacing);width:var(--magic-cookie-button-width)}.magic-cookie-button.-primary{background-color:var(--magic-cookie-button-primary-background);border-color:var(--magic-cookie-button-primary-border-color);color:var(--magic-cookie-button-primary-color)}.magic-cookie-button.-secondary{background-color:var(--magic-cookie-button-secondary-background);border-color:var(--magic-cookie-button-secondary-border-color);color:var(--magic-cookie-button-secondary-color)}
-</style>

package/dist/plugins/MagicCookie/src/components/MagicCookie.vue.d.ts

@@ -1,27 +0,0 @@
-import type { MagicCookieRecord } from '../types';
-type MagicCookieProps = {
-    cookies: MagicCookieRecord[];
-    maxAge?: number;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Partial<Record<string, (_: {
-        cookie: MagicCookieRecord;
-    }) => any>> & {
-        default?(_: {}): any;
-        actions?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicCookieProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCookieProps> & Readonly<{}>, {
-    maxAge: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/plugins/MagicCookie/src/composables/private/useCookieApi.d.ts

@@ -1,29 +0,0 @@
-import type { MagicCookieRecord } from '../../types/index.js';
-type UseCookieApiArgs = {
-    cookies: MagicCookieRecord[];
-    maxAge?: number;
-};
-export declare const cookieApiStore: import("vue").Ref<{
-    cookies: {
-        [x: string]: unknown;
-        key: string;
-        optional?: boolean | undefined;
-        title?: string | undefined;
-        text?: string | undefined;
-    }[];
-    maxAge: number | undefined;
-}, {
-    cookies: MagicCookieRecord[];
-    maxAge: number | undefined;
-} | {
-    cookies: {
-        [x: string]: unknown;
-        key: string;
-        optional?: boolean | undefined;
-        title?: string | undefined;
-        text?: string | undefined;
-    }[];
-    maxAge: number | undefined;
-}>;
-export declare function useCookieApi({ cookies, maxAge }: UseCookieApiArgs): void;
-export {};

package/dist/plugins/MagicCookie/src/composables/private/useCookieApi.mjs

@@ -1,22 +0,0 @@
-import { ref } from "vue";
-import { slugify } from "@maas/vue-equipment/utils";
-export const cookieApiStore = ref({
-  cookies: [],
-  maxAge: void 0
-});
-export function useCookieApi({ cookies, maxAge }) {
-  if (!Array.isArray(cookies)) {
-    console.warn('Invalid configuration. "cookies" must be an array.');
-  }
-  cookieApiStore.value.cookies = cookies?.map((cookie) => {
-    return {
-      ...cookie,
-      key: slugify(cookie.key, {
-        separator: "_",
-        lowercase: true,
-        strict: true
-      })
-    };
-  });
-  cookieApiStore.value.maxAge = maxAge;
-}

package/dist/plugins/MagicPlayer/src/components/MagicAudioPlayer.vue

@@ -1,89 +0,0 @@
-<template>
-  <div
-    ref="playerRef"
-    class="magic-audio-player"
-    :class="{ '-slot': $slots.default }"
-  >
-    <div class="magic-audio-player__container">
-      <div v-if="$slots.default" class="magic-audio-player__slot">
-        <slot />
-      </div>
-      <magic-audio-player-controls :id="id" />
-    </div>
-    <audio ref="audioRef" class="magic-audio-player__audio" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import MagicAudioPlayerControls from './MagicAudioPlayerControls.vue'
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { useIntersectionObserver } from '@vueuse/core'
-import { usePlayerAudioApi } from '../composables/private/usePlayerAudioApi'
-import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
-import { usePlayerRuntime } from '../composables/private/usePlayerRuntime'
-
-interface MagicAudioPlayerProps {
-  id: string
-  src: string
-  loop?: boolean
-}
-
-const props = withDefaults(defineProps<MagicAudioPlayerProps>(), {
-  src: '',
-  loop: false,
-})
-
-const playerRef = ref<HTMLDivElement | undefined>(undefined)
-const audioRef = ref<HTMLVideoElement | undefined>(undefined)
-
-const pausedByIntersection = ref(false)
-
-const { playing } = usePlayerMediaApi({
-  id: props.id,
-  mediaRef: audioRef,
-})
-
-const { initialize, destroy } = usePlayerRuntime({
-  id: props.id,
-  mediaRef: audioRef,
-  src: props.src,
-  srcType: 'native',
-})
-
-const { play, pause } = usePlayerAudioApi({
-  id: props.id,
-})
-
-useIntersectionObserver(
-  playerRef,
-  ([{ isIntersecting }]) => {
-    if (!isIntersecting && playing.value) {
-      pause()
-      pausedByIntersection.value = true
-    } else if (isIntersecting && !playing.value && pausedByIntersection.value) {
-      pausedByIntersection.value = false
-
-      play()
-    }
-  },
-  {
-    immediate: true,
-  }
-)
-
-onMounted(() => {
-  initialize()
-})
-
-onBeforeUnmount(() => {
-  destroy()
-})
-</script>
-
-<style>
-:root{--magic-audio-player-border-radius:1.25rem;--magic-audio-player-padding:0.25rem;--magic-audio-player-slot-radius:calc(var(--magic-audio-player-border-radius) - var(--magic-audio-player-padding))}.magic-audio-player{-webkit-backdrop-filter:var(--magic-audio-player-backdrop-filter,blur(80px));backdrop-filter:var(--magic-audio-player-backdrop-filter,blur(80px));background:var(--magic-audio-player-background,rgba(32,32,32,.8));border-radius:var(--magic-audio-player-border-radius);color:var(--magic-audio-player-color,#fff);container-type:inline-size;padding:var(--magic-audio-player-padding);position:relative;width:100%}.magic-audio-player.-slot{background:var(
-    --magic-audio-player-background-slot,hsla(0,0%,98%,.15)
-  )}.magic-audio-player__container{display:flex;flex-direction:column;gap:var(--magic-audio-player-gap,.25rem);height:100%;position:relative;width:100%}.magic-audio-player__slot{background-color:var(
-    --magic-audio-player-slot-background,rgba(32,32,32,.8)
-  );border-radius:var(--magic-audio-player-slot-radius);color:inherit;padding:var(--magic-audio-player-slot-padding,.75rem 1rem)}.magic-audio-player__audio{width:100%}
-</style>

package/dist/plugins/MagicPlayer/src/components/MagicAudioPlayer.vue.d.ts

@@ -1,28 +0,0 @@
-interface MagicAudioPlayerProps {
-    id: string;
-    src: string;
-    loop?: boolean;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {
-        playerRef: HTMLDivElement;
-        audioRef: HTMLAudioElement;
-    };
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicAudioPlayerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAudioPlayerProps> & Readonly<{}>, {
-    loop: boolean;
-    src: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/plugins/MagicPlayer/src/components/MagicAudioPlayerControls.vue

@@ -1,95 +0,0 @@
-<template>
-  <div
-    class="magic-audio-player-controls"
-    :class="{
-      '-touched': touched,
-      '-untouched': !touched,
-      '-playing': playing,
-      '-paused': !playing,
-      '-waiting': waiting,
-      '-idle': idle,
-      '-not-idle': !idle,
-      '-hover': mouseEntered,
-      '-not-hover': !mouseEntered,
-    }"
-  >
-    <div class="magic-audio-player-controls__bar">
-      <div class="magic-audio-player-controls__bar--inner" ref="barRef">
-        <div
-          class="magic-audio-player-controls__item -shrink-0"
-          data-slot="play-toggle"
-        >
-          <button v-if="!playing" @click="play">
-            <slot name="playIcon">
-              <icon-play />
-            </slot>
-          </button>
-          <button v-else @click="pause">
-            <slot name="pauseIcon">
-              <icon-pause />
-            </slot>
-          </button>
-        </div>
-        <div
-          class="magic-audio-player-controls__item -shrink-0"
-          data-slot="display-time-current"
-        >
-          <magic-player-display-time :id="id" type="current" />
-        </div>
-        <div
-          class="magic-audio-player-controls__item -grow"
-          data-slot="timeline"
-        >
-          <div class="magic-audio-player-controls__timeline" ref="trackRef">
-            <magic-player-timeline :id="id" />
-          </div>
-        </div>
-        <div
-          class="magic-audio-player-controls__item -shrink-0"
-          data-slot="display-time-duration"
-        >
-          <magic-player-display-time :id="id" type="duration" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useIdle } from '@vueuse/core'
-import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
-import { usePlayerAudioApi } from '../composables/private/usePlayerAudioApi'
-import { usePlayerControlsApi } from '../composables/private/usePlayerControlsApi'
-import IconPlay from './icons/Play.vue'
-import IconPause from './icons/Pause.vue'
-
-interface MagicAudioPlayerControlsProps {
-  id: string
-}
-
-const props = defineProps<MagicAudioPlayerControlsProps>()
-
-const barRef = ref<HTMLDivElement | undefined>(undefined)
-const trackRef = ref<HTMLDivElement | undefined>(undefined)
-
-const { playing, waiting } = usePlayerMediaApi({
-  id: props.id,
-})
-
-const { play, pause, touched, mouseEntered } = usePlayerAudioApi({
-  id: props.id,
-})
-
-usePlayerControlsApi({
-  id: props.id,
-  barRef: barRef,
-  trackRef: trackRef,
-})
-
-const { idle } = useIdle(3000)
-</script>
-
-<style>
-:root{--magic-audio-player-controls-height:3rem}.magic-audio-player-controls{pointer-events:none;width:100%}.magic-audio-player-controls__bar{align-items:flex-start;display:flex;flex-direction:column;margin:0 auto;pointer-events:auto;width:100%}.magic-audio-player-controls__bar--inner{align-items:center;box-sizing:border-box;color:var(--magic-audio-player-controls-color,inherit);display:flex;height:var(--magic-audio-player-controls-height);padding:0 var(--magic-audio-player-controls-padding-x,0);width:100%}.magic-audio-player-controls__item{align-items:center;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-audio-player-controls__item.-shrink-0{flex-shrink:0}.magic-audio-player-controls__item.-grow{flex-grow:1}.magic-audio-player-controls__item button{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:0;color:inherit;cursor:pointer;display:flex;height:var(--magic-audio-player-controls-height);justify-content:center;outline:none;padding:0;width:var(--magic-audio-player-controls-button-width,4rem)}.magic-audio-player-controls__item button svg{display:block;height:auto;width:var(--magic-audio-player-controls-icon-width,1.25rem)}.magic-audio-player-controls__timeline{width:100%}@container (max-width: 480px){.magic-audio-player-controls__item[data-slot=display-time-current]{display:none}}@container (max-width: 320px ){.magic-audio-player-controls__item[data-slot=display-time-duration]{display:none}.magic-audio-player-controls__item[data-slot=timeline]{padding-right:1rem}}@container (max-width: 240px){.magic-audio-player-controls__item[data-slot=timeline]{display:none}.magic-audio-player-controls__bar--inner{justify-content:center}}
-</style>