@ozdao/martyrs 0.2.570 → 0.2.572

package/dist/martyrs/src/modules/music/components/pages/Track.vue.js

@@ -1,9 +1,9 @@
 import { computed, ref, onMounted, resolveComponent, createElementBlock, openBlock, createCommentVNode, createBlock, createVNode, createElementVNode, withCtx, toDisplayString, Fragment, renderList } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import _sfc_main$5 from "../../../../components/Button/Button.vue.js";
+import _sfc_main$5 from "../../../../components/Button/Button.vue2.js";
 import Loader from "../../../../components/Loader/Loader.vue2.js";
 import Media from "../../../../components/Media/Media.vue.js";
-/* empty css                                            */
+/* empty css                                           */
 import _sfc_main$c from "../../../../components/Popup/Popup.vue.js";
 import _sfc_main$a from "../../../../components/Feed/Feed.vue.js";
 import _sfc_main$2 from "../../../icons/navigation/IconPlay.vue.js";
@@ -36,7 +36,7 @@ const _hoisted_4 = {
 const _hoisted_5 = { class: "pos-sticky pos-t-0 mobile:pos-relative track-cover-section" };
 const _hoisted_6 = { class: "cover-container pos-relative mn-b-medium radius-big o-hidden" };
 const _hoisted_7 = { class: "cover-overlay w-100 h-100 pos-absolute pos-t-0 pos-r-0 bg-black-transp-40 flex flex-center" };
-const _hoisted_8 = { class: "stats-grid grid cols-2 gap-small" };
+const _hoisted_8 = { class: "stats-grid d-grid cols-2 gap-small" };
 const _hoisted_9 = { class: "stat-card bg-light pd-medium radius-medium t-center" };
 const _hoisted_10 = { class: "mn-b-thin" };
 const _hoisted_11 = { class: "stat-card bg-light pd-medium radius-medium t-center" };
@@ -46,26 +46,26 @@ const _hoisted_14 = { class: "h1 mn-b-medium" };
 const _hoisted_15 = { class: "artists-section mn-b-medium" };
 const _hoisted_16 = {
   key: 0,
-  class: "t-medium mn-b-small"
+  class: "fw-medium mn-b-small"
 };
-const _hoisted_17 = { class: "metadata-grid grid cols-2 gap-small mn-b-medium" };
+const _hoisted_17 = { class: "metadata-grid d-grid cols-2 gap-small mn-b-medium" };
 const _hoisted_18 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
-const _hoisted_19 = { class: "t-medium" };
+const _hoisted_19 = { class: "fw-medium" };
 const _hoisted_20 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
-const _hoisted_21 = { class: "t-medium" };
+const _hoisted_21 = { class: "fw-medium" };
 const _hoisted_22 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
-const _hoisted_23 = { class: "t-medium" };
+const _hoisted_23 = { class: "fw-medium" };
 const _hoisted_24 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
-const _hoisted_25 = { class: "t-medium" };
+const _hoisted_25 = { class: "fw-medium" };
 const _hoisted_26 = {
   key: 0,
-  class: "t-medium mn-b-small"
+  class: "fw-medium mn-b-small"
 };
 const _hoisted_27 = {
   key: 1,
   class: "album-card bg-light pd-medium radius-medium mn-b-medium"
 };
-const _hoisted_28 = { class: "t-medium" };
+const _hoisted_28 = { class: "fw-medium" };
 const _hoisted_29 = {
   key: 2,
   class: "tags-section mn-b-medium"
@@ -227,7 +227,7 @@ const _sfc_main = {
         ])) : createCommentVNode("", true),
         hasLoaded.value && !track.value ? (openBlock(), createElementBlock("div", _hoisted_3, _cache[1] || (_cache[1] = [
           createElementVNode("h2", { class: "" }, "Track not found", -1),
-          createElementVNode("p", { class: "t-transp t-medium" }, "The track you're looking for doesn't exist or has been removed.", -1)
+          createElementVNode("p", { class: "t-transp fw-medium" }, "The track you're looking for doesn't exist or has been removed.", -1)
         ]))) : createCommentVNode("", true),
         track.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
           createElementVNode("div", _hoisted_5, [
@@ -242,7 +242,7 @@ const _sfc_main = {
                   onClick: playTrack,
                   color: "white",
                   size: "big",
-                  class: "w-5r h-5r radius-big bg-main shadow-big hover-scale-110"
+                  class: "w-5r h-5r radius-big bg-main shadow-big hover:scale-[1.05]10"
                 }, {
                   default: withCtx(() => [
                     !isPlaying.value ? (openBlock(), createBlock(_sfc_main$2, {
@@ -272,8 +272,8 @@ const _sfc_main = {
           ]),
           createElementVNode("div", _hoisted_13, [
             _cache[11] || (_cache[11] = createElementVNode("div", { class: "flex items-center gap-small mn-b-small" }, [
-              createElementVNode("span", { class: "bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase" }, "Single"),
-              createElementVNode("span", { class: "bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase" }, "Explicit")
+              createElementVNode("span", { class: "bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase" }, "Single"),
+              createElementVNode("span", { class: "bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase" }, "Explicit")
             ], -1)),
             createElementVNode("h1", _hoisted_14, toDisplayString(track.value.title), 1),
             createVNode(_sfc_main$6, { buttons: actionButtons.value }, null, 8, ["buttons"]),
@@ -287,31 +287,31 @@ const _sfc_main = {
                 onToggleFollow: toggleFollowArtist
               }, null, 8, ["artist", "is-following", "show-follow-button"]))
             ]),
-            _cache[12] || (_cache[12] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Metadata", -1)),
+            _cache[12] || (_cache[12] = createElementVNode("h3", { class: "fw-medium mn-b-small" }, "Metadata", -1)),
             createElementVNode("div", _hoisted_17, [
               createElementVNode("div", _hoisted_18, [
-                createVNode(_sfc_main$7, { class: "i-medium t-primary" }),
+                createVNode(_sfc_main$7, { class: "i-medium t-main" }),
                 createElementVNode("div", null, [
                   _cache[4] || (_cache[4] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Released", -1)),
                   createElementVNode("div", _hoisted_19, toDisplayString(formatDate(track.value.releaseDate)), 1)
                 ])
               ]),
               createElementVNode("div", _hoisted_20, [
-                createVNode(IconTime, { class: "i-medium t-primary" }),
+                createVNode(IconTime, { class: "i-medium t-main" }),
                 createElementVNode("div", null, [
                   _cache[5] || (_cache[5] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Duration", -1)),
                   createElementVNode("div", _hoisted_21, toDisplayString(formatDuration(track.value.duration)), 1)
                 ])
               ]),
               createElementVNode("div", _hoisted_22, [
-                createVNode(_sfc_main$8, { class: "i-medium t-primary" }),
+                createVNode(_sfc_main$8, { class: "i-medium t-main" }),
                 createElementVNode("div", null, [
                   _cache[6] || (_cache[6] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Status", -1)),
                   createElementVNode("div", _hoisted_23, toDisplayString(track.value.status), 1)
                 ])
               ]),
               createElementVNode("div", _hoisted_24, [
-                createVNode(_sfc_main$9, { class: "i-medium t-primary" }),
+                createVNode(_sfc_main$9, { class: "i-medium t-main" }),
                 createElementVNode("div", null, [
                   _cache[7] || (_cache[7] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Visibility", -1)),
                   createElementVNode("div", _hoisted_25, toDisplayString(track.value.isPublic ? "Public" : "Private"), 1)
@@ -322,7 +322,7 @@ const _sfc_main = {
             track.value.album ? (openBlock(), createElementBlock("div", _hoisted_27, [
               createVNode(_component_router_link, {
                 to: `/album/${track.value.album.url}`,
-                class: "flex flex-v-center gap-thin hover-opacity"
+                class: "flex flex-v-center gap-thin hover:opacity-70"
               }, {
                 default: withCtx(() => [
                   createVNode(Media, {
@@ -336,28 +336,28 @@ const _sfc_main = {
               }, 8, ["to"])
             ])) : createCommentVNode("", true),
             track.value.genre && track.value.genre.length || track.value.tags && track.value.tags.length ? (openBlock(), createElementBlock("div", _hoisted_29, [
-              _cache[8] || (_cache[8] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Genres & Tags", -1)),
+              _cache[8] || (_cache[8] = createElementVNode("h3", { class: "fw-medium mn-b-small" }, "Genres & Tags", -1)),
               createElementVNode("div", _hoisted_30, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(track.value.genre, (genre) => {
                   return openBlock(), createElementBlock("span", {
                     key: genre,
-                    class: "tag bg-main t-medium pd-thin radius-thin t-small cursor-pointer"
+                    class: "tag bg-main fw-medium pd-thin radius-thin t-small cursor-pointer"
                   }, toDisplayString(genre.name || genre), 1);
                 }), 128)),
                 (openBlock(true), createElementBlock(Fragment, null, renderList(track.value.tags, (tag) => {
                   return openBlock(), createElementBlock("span", {
                     key: tag,
-                    class: "tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer"
+                    class: "tag bg-light t-transp pd-thin-big radius-small t-small hover:bg-light cursor-pointer"
                   }, " #" + toDisplayString(tag.name || tag), 1);
                 }), 128))
               ])
             ])) : createCommentVNode("", true),
             track.value.description ? (openBlock(), createElementBlock("div", _hoisted_31, [
-              _cache[9] || (_cache[9] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "About", -1)),
+              _cache[9] || (_cache[9] = createElementVNode("h3", { class: "fw-medium mn-b-small" }, "About", -1)),
               createElementVNode("p", _hoisted_32, toDisplayString(track.value.description), 1)
             ])) : createCommentVNode("", true),
             track.value.lyrics ? (openBlock(), createElementBlock("div", _hoisted_33, [
-              _cache[10] || (_cache[10] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Lyrics", -1)),
+              _cache[10] || (_cache[10] = createElementVNode("h3", { class: "fw-medium mn-b-small" }, "Lyrics", -1)),
               createElementVNode("pre", _hoisted_34, toDisplayString(track.value.lyrics), 1)
             ])) : createCommentVNode("", true)
           ])
@@ -378,7 +378,7 @@ const _sfc_main = {
                 class: "pd-medium bg-light radius-medium"
               }
             },
-            class: "grid cols-2 cols-m-3 cols-l-4 gap-regular"
+            class: "d-grid cols-2 cols-m-3 cols-l-4 gap-regular"
           }, {
             default: withCtx(({ items }) => [
               createElementVNode("div", _hoisted_36, [

package/dist/martyrs/src/modules/music/components/pages/Track.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Track.vue.js","sources":["../../../../../../../src/modules/music/components/pages/Track.vue"],"sourcesContent":["<!-- components/pages/Track.vue -->\n<template>\n  <div class=\"track-page pd-small\">\n    <!-- Loading -->\n    <div v-if=\"isLoading\" class=\"w-100 h-25r flex-center flex\">\n      <Loader />\n    </div>\n\n    <!-- Not Found -->\n    <div v-if=\"hasLoaded && !track\" class=\"t-center pd-big\">\n      <h2 class=\"\">Track not found</h2>\n      <p class=\"t-transp t-medium\">The track you're looking for doesn't exist or has been removed.</p>\n    </div>\n\n    <!-- Track Content -->\n    <div v-if=\"track\" class=\"track-content cols-2 mobile:cols-1 gap-big\">\n      <!-- Left Column - Cover & Stats -->\n      <div class=\"pos-sticky pos-t-0 mobile:pos-relative track-cover-section\">\n        <!-- Cover with Play Overlay -->\n        <div class=\"cover-container pos-relative mn-b-medium radius-big o-hidden\">\n          <Media \n            :url=\"track.coverUrl || (track.album && track.album.coverUrl) || '/logo/logo-placeholder.jpg'\" \n            :alt=\"track.title\"\n            class=\"aspect-1x1 w-100 radius-medium o-hidden\"\n          />\n          <div class=\"cover-overlay w-100 h-100 pos-absolute pos-t-0 pos-r-0 bg-black-transp-40 flex flex-center\">\n            <Button\n              @click=\"playTrack\"\n              color=\"white\"\n              size=\"big\"\n              class=\"w-5r h-5r radius-big bg-main shadow-big hover-scale-110\"\n            >\n              <IconPlay v-if=\"!isPlaying\" fill=\"rgb(var(--white))\" class=\"i-medium\" />\n              <IconPause v-else fill=\"rgb(var(--white))\" class=\"i-medium\" />\n            </Button>\n          </div>\n        </div>\n\n          \n\n        <!-- Quick Stats -->\n        <div class=\"stats-grid grid cols-2 gap-small\">\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ formatNumber(track.playCount) }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Plays</div>\n          </div>\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ formatNumber(track.views) }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Views</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Column - Track Details -->\n      <div class=\"track-details-section\">\n        <!-- Track Type Badge -->\n        <div class=\"flex items-center gap-small mn-b-small\">\n           <span class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">Single</span>\n           <span class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">Explicit</span>\n        </div>\n\n        <!-- Track Title -->\n        <h1 class=\"h1 mn-b-medium\">{{ track.title }}</h1>\n        <!-- Action Buttons -->\n        <ActionButtons :buttons=\"actionButtons\" />\n\n        <!-- Artist Card -->\n        <div class=\"artists-section mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\" v-if=\"track.artist\">Artist</h3>\n          <ArtistCardSmall \n            :key=\"track.artist._id\"\n            :artist=\"track.artist\"\n            :is-following=\"isFollowingArtist\"\n            :show-follow-button=\"!isOwner\"\n            @toggle-follow=\"toggleFollowArtist\"\n          />\n        </div>\n\n        <!-- Metadata Cards -->\n        <h3 class=\"t-medium mn-b-small\">Metadata</h3>\n        <div class=\"metadata-grid grid cols-2 gap-small mn-b-medium\">\n          <!-- Release Date -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n            <IconCalendar class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Released</div>\n              <div class=\"t-medium \">{{ formatDate(track.releaseDate) }}</div>\n            </div>\n          </div>\n\n          <!-- Total Duration -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n            <IconClock class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Duration</div>\n              <div class=\"t-medium \">{{ formatDuration(track.duration) }}</div>\n            </div>\n          </div>\n\n          <!-- Label -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n            <IconCheck class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Status</div>\n              <div class=\"t-medium \">{{ track.status }}</div>\n            </div>\n          </div>\n\n          <!-- Visibility -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n            <IconEye class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Visibility</div>\n              <div class=\"t-medium \">{{ track.isPublic ? 'Public' : 'Private' }}</div>\n            </div>\n          </div>\n        </div>\n\n\n        <!-- Album Info -->\n        <h3 v-if=\"track.album\" class=\"t-medium mn-b-small\">From Album</h3>\n        <div v-if=\"track.album\" class=\"album-card bg-light pd-medium radius-medium mn-b-medium\">\n         \n          <router-link \n            :to=\"`/album/${track.album.url}`\"\n            class=\"flex flex-v-center gap-thin hover-opacity\"\n          >\n            <Media \n              :url=\"track.album.coverArt || '/logo/logo-placeholder.jpg'\"\n              :alt=\"track.album.title\"\n              class=\"w-3r h-3r radius-thin o-hidden object-cover\"\n            />\n            <span class=\"t-medium \">{{ track.album.title }}</span>\n          </router-link>\n        </div>\n\n        <!-- Genres & Tags -->\n        <div v-if=\"(track.genre && track.genre.length) || (track.tags && track.tags.length)\" class=\"tags-section mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\">Genres & Tags</h3>\n          <div class=\"flex gap-thin flex-wrap\">\n            <span \n              v-for=\"genre in track.genre\" \n              :key=\"genre\"\n              class=\"tag bg-main t-medium pd-thin radius-thin t-small cursor-pointer\"\n            >\n              {{ genre.name || genre }}\n            </span>\n            <span \n              v-for=\"tag in track.tags\" \n              :key=\"tag\"\n              class=\"tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer\"\n            >\n              #{{ tag.name || tag }}\n            </span>\n          </div>\n        </div>\n\n        <!-- Description -->\n        <div v-if=\"track.description\" class=\"description-section bg-light pd-medium radius-medium mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\">About</h3>\n          <p class=\"t-transp\">{{ track.description }}</p>\n        </div>\n\n        <!-- Lyrics -->\n        <div v-if=\"track.lyrics\" class=\"lyrics-section bg-light pd-medium radius-medium\">\n          <h3 class=\"t-medium mn-b-small\">Lyrics</h3>\n          <pre class=\"t-transp t-small\">{{ track.lyrics }}</pre>\n        </div>\n      </div>\n    </div>\n\n    <!-- Related Tracks -->\n    <section v-if=\"track && relatedTracks && relatedTracks.length\" class=\"related-section mn-t-big\">\n      <h2 class=\"h2 mn-b-medium\">Related Tracks</h2>\n      <Feed\n        :store=\"{\n          read: () => new Promise(resolve => resolve(relatedTracks || [])),\n          state: { isLoading: false }\n        }\"\n        :external=\"true\"\n        :items=\"relatedTracks\"\n        :states=\"{\n          empty: {\n            title: 'No related tracks',\n            description: 'Check back later for recommendations',\n            class: 'pd-medium bg-light radius-medium'\n          }\n        }\"\n        class=\"grid cols-2 cols-m-3 cols-l-4 gap-regular\"\n      >\n        <template #default=\"{ items }\">\n          <div class=\"bg-light radius-medium o-hidden\">\n            <TrackListCard\n              v-for=\"(relatedTrack, index) in items\"\n              :key=\"relatedTrack._id\"\n              :track=\"relatedTrack\"\n              :index=\"index\"\n              :showAlbum=\"true\"\n              :showCover=\"true\"\n            />\n          </div>\n        </template>\n      </Feed>\n    </section>\n\n    <!-- Add to Playlist Modal -->\n    <Popup \n      v-if=\"showAddToPlaylistModal\" \n      @close-popup=\"showAddToPlaylistModal = false\" \n      class=\"bg-white pd-medium w-m-25r radius-medium\"\n    >\n      <h3 class=\"h3 mn-b-medium\">Add to Playlist</h3>\n      <!-- <PlaylistSelector \n        :trackId=\"track._id\" \n        @added=\"showAddToPlaylistModal = false\"\n      /> -->\n      <p class=\"t-transp\">Playlist selector coming soon...</p>\n    </Popup>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\n\n// Icons\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconPause from '@martyrs/src/modules/icons/navigation/IconPause.vue';\nimport IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';\nimport IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';\nimport IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue';\nimport IconClock from '@martyrs/src/modules/icons/entities/IconTime.vue';\nimport IconCalendar from '@martyrs/src/modules/icons/entities/IconCalendar.vue';\nimport IconCheck from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\nimport IconEye from '@martyrs/src/modules/icons/actions/IconShow.vue';\nimport IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\n\n// Components\nimport ActionButtons from '../blocks/ActionButtons.vue';\nimport TrackListCard from '../cards/TrackListCard.vue';\nimport ArtistCardSmall from '../cards/ArtistCardSmall.vue';\n// import PlaylistSelector from '../forms/PlaylistSelector.vue';\n\n// Store\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\n\nconst isPlaying = computed(() => playerState.isPlaying);\n\nconst route = useRoute();\nconst router = useRouter();\n\n// Emits\nconst emits = defineEmits(['page-loading', 'page-loaded']);\n\n// State\nconst hasLoaded = ref(false);\nconst showAddToPlaylistModal = ref(false);\nconst isFavorite = ref(false);\nconst isFollowingArtist = ref(false);\n\n// Clear state\ntracksState.currentTrack = null;\ntracksState.relatedTracks = [];\n\n// Computed\nconst track = computed(() => tracksState.currentTrack);\nconst relatedTracks = computed(() => tracksState.relatedTracks || []);\n\nconst isOwner = computed(() => {\n  return track.value?.owner?.target === authState.user?._id;\n});\n\nconst actionButtons = computed(() => {\n  const buttons = [\n    {\n      type: 'button',\n      class: 't-white bg-black',\n      icon: isPlaying.value ? IconPause : IconPlay,\n      iconFill: 'rgb(var(--white))',\n      text: isPlaying.value ? 'Pause' : 'Play',\n      action: playTrack\n    },\n    {\n      type: 'button',\n      class: 'bg-light',\n      icon: IconAdd,\n      text: 'Add to Queue',\n      action: addToQueue\n    },\n    {\n      type: 'button',\n      class: 'bg-light',\n      icon: IconLike,\n      iconFill: isFavorite.value ? 'rgb(var(--main))' : 'rgb(var(--black))',\n      text: isFavorite.value ? 'Liked' : 'Like',\n      action: toggleFavorite\n    },\n    {\n      type: 'dropdown',\n      items: [\n        { text: 'Add to Playlist', action: () => showAddToPlaylistModal.value = true },\n        { text: 'Copy Link', action: copyLink }\n      ]\n    }\n  ];\n\n  if (isOwner.value) {\n    const items = buttons[3].items;\n    items.push({ separator: true });\n    items.push({ text: 'Edit Track', action: editTrack });\n    items.push({ text: 'Delete Track', action: deleteTrack, color: 'danger' });\n  }\n\n  return buttons;\n});\n\n// Format helpers\nconst formatDuration = (seconds) => {\n  if (!seconds) return '0:00';\n  const h = Math.floor(seconds / 3600);\n  const m = Math.floor((seconds % 3600) / 60);\n  const s = Math.floor(seconds % 60);\n  \n  if (h > 0) {\n    return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;\n  }\n  return `${m}:${s.toString().padStart(2, '0')}`;\n};\n\nconst formatDate = (dateString) => {\n  if (!dateString) return 'Unknown';\n  return new Date(dateString).toLocaleDateString('en-US', {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric'\n  });\n};\n\nconst formatNumber = (num) => {\n  if (!num) return '0';\n  if (num >= 1000000) {\n    return (num / 1000000).toFixed(1) + 'M';\n  } else if (num >= 1000) {\n    return (num / 1000).toFixed(1) + 'K';\n  }\n  return num.toString();\n};\n\n// Actions\nconst playTrack = () => {\n  if (track.value) {\n    playerActions.setQueue([track.value]);\n  }\n};\n\nconst toggleFavorite = () => {\n  isFavorite.value = !isFavorite.value;\n  // TODO: Implement actual saving\n};\n\nconst toggleFollowArtist = () => {\n  isFollowingArtist.value = !isFollowingArtist.value;\n  // TODO: Implement actual following\n};\n\nconst addToQueue = () => {\n  if (track.value) {\n    playerActions.addToQueue(track.value);\n  }\n};\n\nconst editTrack = () => {\n  router.push({ name: 'track-edit', params: { url: track.value.url } });\n};\n\nconst deleteTrack = async () => {\n  if (confirm('Are you sure you want to delete this track?')) {\n    try {\n      await tracksActions.deleteTrack(track.value._id);\n      router.push({ name: 'music-library' });\n    } catch (error) {\n      console.error('Failed to delete track:', error);\n    }\n  }\n};\n\nconst copyLink = () => {\n  navigator.clipboard.writeText(window.location.href);\n};\n\n// Data fetching\nconst fetchTrackData = async () => {\n  try {\n    await tracksActions.fetchTrackByUrl(route.params.url);\n    await tracksActions.fetchRelatedTracks(route.params.url);\n  } catch (error) {\n    console.error('Error loading track:', error);\n  }\n};\n\n// Lifecycle\nonMounted(async () => {\n  emits('page-loading');\n  \n  await fetchTrackData();\n  \n  hasLoaded.value = true;\n  emits('page-loaded');\n});\n</script>\n\n<style scoped>\n</style>"],"names":["playerState","tracksState","authState","IconPause","IconPlay","IconAdd","IconLike","playerActions","tracksActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8PA,UAAM,YAAY,SAAS,MAAMA,MAAY,SAAS;AAEtD,UAAM,QAAQ,SAAQ;AACtB,UAAM,SAAS,UAAS;AAGxB,UAAM,QAAQ;AAGd,UAAM,YAAY,IAAI,KAAK;AAC3B,UAAM,yBAAyB,IAAI,KAAK;AACxC,UAAM,aAAa,IAAI,KAAK;AAC5B,UAAM,oBAAoB,IAAI,KAAK;AAGnCC,YAAY,eAAe;AAC3BA,YAAY,gBAAgB,CAAA;AAG5B,UAAM,QAAQ,SAAS,MAAMA,QAAY,YAAY;AACrD,UAAM,gBAAgB,SAAS,MAAMA,QAAY,iBAAiB,CAAA,CAAE;AAEpE,UAAM,UAAU,SAAS,MAAM;AAC7B,aAAO,MAAM,OAAO,OAAO,WAAWC,QAAU,MAAM;AAAA,IACxD,CAAC;AAED,UAAM,gBAAgB,SAAS,MAAM;AACnC,YAAM,UAAU;AAAA,QACd;AAAA,UACE,MAAM;AAAA,UACN,OAAO;AAAA,UACP,MAAM,UAAU,QAAQC,cAAYC;AAAAA,UACpC,UAAU;AAAA,UACV,MAAM,UAAU,QAAQ,UAAU;AAAA,UAClC,QAAQ;AAAA,QACd;AAAA,QACI;AAAA,UACE,MAAM;AAAA,UACN,OAAO;AAAA,UACP,MAAMC;AAAAA,UACN,MAAM;AAAA,UACN,QAAQ;AAAA,QACd;AAAA,QACI;AAAA,UACE,MAAM;AAAA,UACN,OAAO;AAAA,UACP,MAAMC;AAAAA,UACN,UAAU,WAAW,QAAQ,qBAAqB;AAAA,UAClD,MAAM,WAAW,QAAQ,UAAU;AAAA,UACnC,QAAQ;AAAA,QACd;AAAA,QACI;AAAA,UACE,MAAM;AAAA,UACN,OAAO;AAAA,YACL,EAAE,MAAM,mBAAmB,QAAQ,MAAM,uBAAuB,QAAQ,KAAI;AAAA,YAC5E,EAAE,MAAM,aAAa,QAAQ,SAAQ;AAAA,UAC7C;AAAA,QACA;AAAA,MACA;AAEE,UAAI,QAAQ,OAAO;AACjB,cAAM,QAAQ,QAAQ,CAAC,EAAE;AACzB,cAAM,KAAK,EAAE,WAAW,KAAI,CAAE;AAC9B,cAAM,KAAK,EAAE,MAAM,cAAc,QAAQ,WAAW;AACpD,cAAM,KAAK,EAAE,MAAM,gBAAgB,QAAQ,aAAa,OAAO,UAAU;AAAA,MAC3E;AAEA,aAAO;AAAA,IACT,CAAC;AAGD,UAAM,iBAAiB,CAAC,YAAY;AAClC,UAAI,CAAC,QAAS,QAAO;AACrB,YAAM,IAAI,KAAK,MAAM,UAAU,IAAI;AACnC,YAAM,IAAI,KAAK,MAAO,UAAU,OAAQ,EAAE;AAC1C,YAAM,IAAI,KAAK,MAAM,UAAU,EAAE;AAEjC,UAAI,IAAI,GAAG;AACT,eAAO,GAAG,CAAC,IAAI,EAAE,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC,IAAI,EAAE,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC;AAAA,MAC/E;AACA,aAAO,GAAG,CAAC,IAAI,EAAE,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC;AAAA,IAC9C;AAEA,UAAM,aAAa,CAAC,eAAe;AACjC,UAAI,CAAC,WAAY,QAAO;AACxB,aAAO,IAAI,KAAK,UAAU,EAAE,mBAAmB,SAAS;AAAA,QACtD,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MACT,CAAG;AAAA,IACH;AAEA,UAAM,eAAe,CAAC,QAAQ;AAC5B,UAAI,CAAC,IAAK,QAAO;AACjB,UAAI,OAAO,KAAS;AAClB,gBAAQ,MAAM,KAAS,QAAQ,CAAC,IAAI;AAAA,MACtC,WAAW,OAAO,KAAM;AACtB,gBAAQ,MAAM,KAAM,QAAQ,CAAC,IAAI;AAAA,MACnC;AACA,aAAO,IAAI,SAAQ;AAAA,IACrB;AAGA,UAAM,YAAY,MAAM;AACtB,UAAI,MAAM,OAAO;AACfC,gBAAc,SAAS,CAAC,MAAM,KAAK,CAAC;AAAA,MACtC;AAAA,IACF;AAEA,UAAM,iBAAiB,MAAM;AAC3B,iBAAW,QAAQ,CAAC,WAAW;AAAA,IAEjC;AAEA,UAAM,qBAAqB,MAAM;AAC/B,wBAAkB,QAAQ,CAAC,kBAAkB;AAAA,IAE/C;AAEA,UAAM,aAAa,MAAM;AACvB,UAAI,MAAM,OAAO;AACfA,gBAAc,WAAW,MAAM,KAAK;AAAA,MACtC;AAAA,IACF;AAEA,UAAM,YAAY,MAAM;AACtB,aAAO,KAAK,EAAE,MAAM,cAAc,QAAQ,EAAE,KAAK,MAAM,MAAM,IAAG,EAAE,CAAE;AAAA,IACtE;AAEA,UAAM,cAAc,YAAY;AAC9B,UAAI,QAAQ,6CAA6C,GAAG;AAC1D,YAAI;AACF,gBAAMC,UAAc,YAAY,MAAM,MAAM,GAAG;AAC/C,iBAAO,KAAK,EAAE,MAAM,gBAAe,CAAE;AAAA,QACvC,SAAS,OAAO;AACd,kBAAQ,MAAM,2BAA2B,KAAK;AAAA,QAChD;AAAA,MACF;AAAA,IACF;AAEA,UAAM,WAAW,MAAM;AACrB,gBAAU,UAAU,UAAU,OAAO,SAAS,IAAI;AAAA,IACpD;AAGA,UAAM,iBAAiB,YAAY;AACjC,UAAI;AACF,cAAMA,UAAc,gBAAgB,MAAM,OAAO,GAAG;AACpD,cAAMA,UAAc,mBAAmB,MAAM,OAAO,GAAG;AAAA,MACzD,SAAS,OAAO;AACd,gBAAQ,MAAM,wBAAwB,KAAK;AAAA,MAC7C;AAAA,IACF;AAGA,cAAU,YAAY;AACpB,YAAM,cAAc;AAEpB,YAAM,eAAc;AAEpB,gBAAU,QAAQ;AAClB,YAAM,aAAa;AAAA,IACrB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Track.vue.js","sources":["../../../../../../../src/modules/music/components/pages/Track.vue"],"sourcesContent":["<!-- components/pages/Track.vue -->\n<template>\n  <div class=\"track-page pd-small\">\n    <!-- Loading -->\n    <div v-if=\"isLoading\" class=\"w-100 h-25r flex-center flex\">\n      <Loader />\n    </div>\n\n    <!-- Not Found -->\n    <div v-if=\"hasLoaded && !track\" class=\"t-center pd-big\">\n      <h2 class=\"\">Track not found</h2>\n      <p class=\"t-transp fw-medium\">The track you're looking for doesn't exist or has been removed.</p>\n    </div>\n\n    <!-- Track Content -->\n    <div v-if=\"track\" class=\"track-content cols-2 mobile:cols-1 gap-big\">\n      <!-- Left Column - Cover & Stats -->\n      <div class=\"pos-sticky pos-t-0 mobile:pos-relative track-cover-section\">\n        <!-- Cover with Play Overlay -->\n        <div class=\"cover-container pos-relative mn-b-medium radius-big o-hidden\">\n          <Media \n            :url=\"track.coverUrl || (track.album && track.album.coverUrl) || '/logo/logo-placeholder.jpg'\" \n            :alt=\"track.title\"\n            class=\"aspect-1x1 w-100 radius-medium o-hidden\"\n          />\n          <div class=\"cover-overlay w-100 h-100 pos-absolute pos-t-0 pos-r-0 bg-black-transp-40 flex flex-center\">\n            <Button\n              @click=\"playTrack\"\n              color=\"white\"\n              size=\"big\"\n              class=\"w-5r h-5r radius-big bg-main shadow-big hover:scale-[1.05]10\"\n            >\n              <IconPlay v-if=\"!isPlaying\" fill=\"rgb(var(--white))\" class=\"i-medium\" />\n              <IconPause v-else fill=\"rgb(var(--white))\" class=\"i-medium\" />\n            </Button>\n          </div>\n        </div>\n\n          \n\n        <!-- Quick Stats -->\n        <div class=\"stats-grid d-grid cols-2 gap-small\">\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ formatNumber(track.playCount) }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Plays</div>\n          </div>\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ formatNumber(track.views) }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Views</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Column - Track Details -->\n      <div class=\"track-details-section\">\n        <!-- Track Type Badge -->\n        <div class=\"flex items-center gap-small mn-b-small\">\n           <span class=\"bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase\">Single</span>\n           <span class=\"bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase\">Explicit</span>\n        </div>\n\n        <!-- Track Title -->\n        <h1 class=\"h1 mn-b-medium\">{{ track.title }}</h1>\n        <!-- Action Buttons -->\n        <ActionButtons :buttons=\"actionButtons\" />\n\n        <!-- Artist Card -->\n        <div class=\"artists-section mn-b-medium\">\n          <h3 class=\"fw-medium mn-b-small\" v-if=\"track.artist\">Artist</h3>\n          <ArtistCardSmall \n            :key=\"track.artist._id\"\n            :artist=\"track.artist\"\n            :is-following=\"isFollowingArtist\"\n            :show-follow-button=\"!isOwner\"\n            @toggle-follow=\"toggleFollowArtist\"\n          />\n        </div>\n\n        <!-- Metadata Cards -->\n        <h3 class=\"fw-medium mn-b-small\">Metadata</h3>\n        <div class=\"metadata-grid d-grid cols-2 gap-small mn-b-medium\">\n          <!-- Release Date -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n            <IconCalendar class=\"i-medium t-main\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Released</div>\n              <div class=\"fw-medium \">{{ formatDate(track.releaseDate) }}</div>\n            </div>\n          </div>\n\n          <!-- Total Duration -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n            <IconClock class=\"i-medium t-main\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Duration</div>\n              <div class=\"fw-medium \">{{ formatDuration(track.duration) }}</div>\n            </div>\n          </div>\n\n          <!-- Label -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n            <IconCheck class=\"i-medium t-main\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Status</div>\n              <div class=\"fw-medium \">{{ track.status }}</div>\n            </div>\n          </div>\n\n          <!-- Visibility -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n            <IconEye class=\"i-medium t-main\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Visibility</div>\n              <div class=\"fw-medium \">{{ track.isPublic ? 'Public' : 'Private' }}</div>\n            </div>\n          </div>\n        </div>\n\n\n        <!-- Album Info -->\n        <h3 v-if=\"track.album\" class=\"fw-medium mn-b-small\">From Album</h3>\n        <div v-if=\"track.album\" class=\"album-card bg-light pd-medium radius-medium mn-b-medium\">\n         \n          <router-link \n            :to=\"`/album/${track.album.url}`\"\n            class=\"flex flex-v-center gap-thin hover:opacity-70\"\n          >\n            <Media \n              :url=\"track.album.coverArt || '/logo/logo-placeholder.jpg'\"\n              :alt=\"track.album.title\"\n              class=\"w-3r h-3r radius-thin o-hidden object-cover\"\n            />\n            <span class=\"fw-medium \">{{ track.album.title }}</span>\n          </router-link>\n        </div>\n\n        <!-- Genres & Tags -->\n        <div v-if=\"(track.genre && track.genre.length) || (track.tags && track.tags.length)\" class=\"tags-section mn-b-medium\">\n          <h3 class=\"fw-medium mn-b-small\">Genres & Tags</h3>\n          <div class=\"flex gap-thin flex-wrap\">\n            <span \n              v-for=\"genre in track.genre\" \n              :key=\"genre\"\n              class=\"tag bg-main fw-medium pd-thin radius-thin t-small cursor-pointer\"\n            >\n              {{ genre.name || genre }}\n            </span>\n            <span \n              v-for=\"tag in track.tags\" \n              :key=\"tag\"\n              class=\"tag bg-light t-transp pd-thin-big radius-small t-small hover:bg-light cursor-pointer\"\n            >\n              #{{ tag.name || tag }}\n            </span>\n          </div>\n        </div>\n\n        <!-- Description -->\n        <div v-if=\"track.description\" class=\"description-section bg-light pd-medium radius-medium mn-b-medium\">\n          <h3 class=\"fw-medium mn-b-small\">About</h3>\n          <p class=\"t-transp\">{{ track.description }}</p>\n        </div>\n\n        <!-- Lyrics -->\n        <div v-if=\"track.lyrics\" class=\"lyrics-section bg-light pd-medium radius-medium\">\n          <h3 class=\"fw-medium mn-b-small\">Lyrics</h3>\n          <pre class=\"t-transp t-small\">{{ track.lyrics }}</pre>\n        </div>\n      </div>\n    </div>\n\n    <!-- Related Tracks -->\n    <section v-if=\"track && relatedTracks && relatedTracks.length\" class=\"related-section mn-t-big\">\n      <h2 class=\"h2 mn-b-medium\">Related Tracks</h2>\n      <Feed\n        :store=\"{\n          read: () => new Promise(resolve => resolve(relatedTracks || [])),\n          state: { isLoading: false }\n        }\"\n        :external=\"true\"\n        :items=\"relatedTracks\"\n        :states=\"{\n          empty: {\n            title: 'No related tracks',\n            description: 'Check back later for recommendations',\n            class: 'pd-medium bg-light radius-medium'\n          }\n        }\"\n        class=\"d-grid cols-2 cols-m-3 cols-l-4 gap-regular\"\n      >\n        <template #default=\"{ items }\">\n          <div class=\"bg-light radius-medium o-hidden\">\n            <TrackListCard\n              v-for=\"(relatedTrack, index) in items\"\n              :key=\"relatedTrack._id\"\n              :track=\"relatedTrack\"\n              :index=\"index\"\n              :showAlbum=\"true\"\n              :showCover=\"true\"\n            />\n          </div>\n        </template>\n      </Feed>\n    </section>\n\n    <!-- Add to Playlist Modal -->\n    <Popup \n      v-if=\"showAddToPlaylistModal\" \n      @close-popup=\"showAddToPlaylistModal = false\" \n      class=\"bg-white pd-medium w-m-25r radius-medium\"\n    >\n      <h3 class=\"h3 mn-b-medium\">Add to Playlist</h3>\n      <!-- <PlaylistSelector \n        :trackId=\"track._id\" \n        @added=\"showAddToPlaylistModal = false\"\n      /> -->\n      <p class=\"t-transp\">Playlist selector coming soon...</p>\n    </Popup>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\n\n// Icons\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconPause from '@martyrs/src/modules/icons/navigation/IconPause.vue';\nimport IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';\nimport IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';\nimport IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue';\nimport IconClock from '@martyrs/src/modules/icons/entities/IconTime.vue';\nimport IconCalendar from '@martyrs/src/modules/icons/entities/IconCalendar.vue';\nimport IconCheck from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\nimport IconEye from '@martyrs/src/modules/icons/actions/IconShow.vue';\nimport IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\n\n// Components\nimport ActionButtons from '../blocks/ActionButtons.vue';\nimport TrackListCard from '../cards/TrackListCard.vue';\nimport ArtistCardSmall from '../cards/ArtistCardSmall.vue';\n// import PlaylistSelector from '../forms/PlaylistSelector.vue';\n\n// Store\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\n\nconst isPlaying = computed(() => playerState.isPlaying);\n\nconst route = useRoute();\nconst router = useRouter();\n\n// Emits\nconst emits = defineEmits(['page-loading', 'page-loaded']);\n\n// State\nconst hasLoaded = ref(false);\nconst showAddToPlaylistModal = ref(false);\nconst isFavorite = ref(false);\nconst isFollowingArtist = ref(false);\n\n// Clear state\ntracksState.currentTrack = null;\ntracksState.relatedTracks = [];\n\n// Computed\nconst track = computed(() => tracksState.currentTrack);\nconst relatedTracks = computed(() => tracksState.relatedTracks || []);\n\nconst isOwner = computed(() => {\n  return track.value?.owner?.target === authState.user?._id;\n});\n\nconst actionButtons = computed(() => {\n  const buttons = [\n    {\n      type: 'button',\n      class: 't-white bg-black',\n      icon: isPlaying.value ? IconPause : IconPlay,\n      iconFill: 'rgb(var(--white))',\n      text: isPlaying.value ? 'Pause' : 'Play',\n      action: playTrack\n    },\n    {\n      type: 'button',\n      class: 'bg-light',\n      icon: IconAdd,\n      text: 'Add to Queue',\n      action: addToQueue\n    },\n    {\n      type: 'button',\n      class: 'bg-light',\n      icon: IconLike,\n      iconFill: isFavorite.value ? 'rgb(var(--main))' : 'rgb(var(--black))',\n      text: isFavorite.value ? 'Liked' : 'Like',\n      action: toggleFavorite\n    },\n    {\n      type: 'dropdown',\n      items: [\n        { text: 'Add to Playlist', action: () => showAddToPlaylistModal.value = true },\n        { text: 'Copy Link', action: copyLink }\n      ]\n    }\n  ];\n\n  if (isOwner.value) {\n    const items = buttons[3].items;\n    items.push({ separator: true });\n    items.push({ text: 'Edit Track', action: editTrack });\n    items.push({ text: 'Delete Track', action: deleteTrack, color: 'danger' });\n  }\n\n  return buttons;\n});\n\n// Format helpers\nconst formatDuration = (seconds) => {\n  if (!seconds) return '0:00';\n  const h = Math.floor(seconds / 3600);\n  const m = Math.floor((seconds % 3600) / 60);\n  const s = Math.floor(seconds % 60);\n  \n  if (h > 0) {\n    return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;\n  }\n  return `${m}:${s.toString().padStart(2, '0')}`;\n};\n\nconst formatDate = (dateString) => {\n  if (!dateString) return 'Unknown';\n  return new Date(dateString).toLocaleDateString('en-US', {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric'\n  });\n};\n\nconst formatNumber = (num) => {\n  if (!num) return '0';\n  if (num >= 1000000) {\n    return (num / 1000000).toFixed(1) + 'M';\n  } else if (num >= 1000) {\n    return (num / 1000).toFixed(1) + 'K';\n  }\n  return num.toString();\n};\n\n// Actions\nconst playTrack = () => {\n  if (track.value) {\n    playerActions.setQueue([track.value]);\n  }\n};\n\nconst toggleFavorite = () => {\n  isFavorite.value = !isFavorite.value;\n  // TODO: Implement actual saving\n};\n\nconst toggleFollowArtist = () => {\n  isFollowingArtist.value = !isFollowingArtist.value;\n  // TODO: Implement actual following\n};\n\nconst addToQueue = () => {\n  if (track.value) {\n    playerActions.addToQueue(track.value);\n  }\n};\n\nconst editTrack = () => {\n  router.push({ name: 'track-edit', params: { url: track.value.url } });\n};\n\nconst deleteTrack = async () => {\n  if (confirm('Are you sure you want to delete this track?')) {\n    try {\n      await tracksActions.deleteTrack(track.value._id);\n      router.push({ name: 'music-library' });\n    } catch (error) {\n      console.error('Failed to delete track:', error);\n    }\n  }\n};\n\nconst copyLink = () => {\n  navigator.clipboard.writeText(window.location.href);\n};\n\n// Data fetching\nconst fetchTrackData = async () => {\n  try {\n    await tracksActions.fetchTrackByUrl(route.params.url);\n    await tracksActions.fetchRelatedTracks(route.params.url);\n  } catch (error) {\n    console.error('Error loading track:', error);\n  }\n};\n\n// Lifecycle\nonMounted(async () => {\n  emits('page-loading');\n  \n  await fetchTrackData();\n  \n  hasLoaded.value = true;\n  emits('page-loaded');\n});\n</script>\n\n<style scoped>\n</style>"],"names":["playerState","tracksState","authState","IconPause","IconPlay","IconAdd","IconLike","playerActions","tracksActions"],"mappings":"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"}

package/dist/martyrs/src/modules/music/components/pages/TrackCreate.vue.js

@@ -1,7 +1,7 @@
 import { createElementBlock, openBlock, createVNode } from "vue";
 import { useRouter } from "vue-router";
 /* empty css                                       */
-/* empty css                                        */
+/* empty css                                       */
 import _sfc_main$1 from "../forms/TrackForm.vue.js";
 const _hoisted_1 = { class: "track-create-page" };
 const _sfc_main = {

package/dist/martyrs/src/modules/music/components/player/FullscreenPlayer.vue.js

@@ -1,6 +1,6 @@
 import { ref, onMounted, createElementBlock, openBlock, createElementVNode, createCommentVNode, normalizeClass, unref, normalizeStyle, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createVNode } from "vue";
 import _imports_0 from "./tonar.png.js";
-import { r as fu } from "../../../../../dist/main-BFvlam0J.js";
+import { r as cu } from "../../../../../dist/main-BfEQkhXS.js";
 import _sfc_main$1 from "../../../icons/navigation/IconLike.vue.js";
 import _sfc_main$2 from "../../../icons/entities/IconEvents.vue.js";
 import _sfc_main$3 from "../cards/TrackListCard.vue.js";
@@ -13,7 +13,7 @@ import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js
 const _hoisted_1 = { class: "o-y-scroll o-x-hidden bg-light pd-small pos-relative z-index-2 t-center t-black w-100 h-100" };
 const _hoisted_2 = { class: "pos-relative gap-small flex-nowrap flex-column flex-center flex z-index-1" };
 const _hoisted_3 = {
-  class: "mn-b-thin h-max-30r br-2px br-solid br-black-transp-10 radius-extra w-100 pos-relative aspect-1x1 flex-center flex",
+  class: "mn-b-thin h-max-30r br-2px br-black-transp-10 radius-extra w-100 pos-relative aspect-1x1 flex-center flex",
   style: { "background": "linear-gradient(180deg, #BDBDBD 0%, #D9D9D9 79.69%, #A5A5A5 100%)", "box-shadow": "0 2px 0px 2px #aaaaaa" }
 };
 const _hoisted_4 = { class: "pos-relative" };
@@ -27,7 +27,7 @@ const _hoisted_8 = {
   key: 0,
   class: "flex-nowrap flex gap-thin flex-v-center"
 };
-const _hoisted_9 = { class: "t-semi h4" };
+const _hoisted_9 = { class: "fw-semi h4" };
 const _hoisted_10 = { class: "gap-thin flex-center flex-nowrap flex pd-small bg-white radius-medium o-hidden w-100 pos-relative" };
 const _hoisted_11 = { class: "pd-thin bg-white radius-medium w-100 pos-relative" };
 const _hoisted_12 = {
@@ -69,7 +69,7 @@ const _sfc_main = {
               ], 2),
               createElementVNode("div", {
                 ref: "disk",
-                class: normalizeClass([["radius-100 rotate-gradient flex-center flex"], "pos-relative z-index-1"]),
+                class: normalizeClass([["radius-extra rotate-gradient flex-center flex"], "pos-relative z-index-1"]),
                 style: normalizeStyle({
                   transform: `rotate(${unref(state).rotationAngle}deg)`,
                   width: "24rem",
@@ -99,14 +99,14 @@ const _sfc_main = {
                     backgroundPosition: "center center",
                     backgroundSize: "106%"
                   }),
-                  class: "radius-extra br-solid br-black-transp-10 br-1px"
+                  class: "radius-extra br-black-transp-10 br-1px"
                 }, null, 4)
               ], 4)
             ])
           ]),
           createElementVNode("div", _hoisted_5, [
             _cache[1] || (_cache[1] = createElementVNode("p", { class: "mn-l-auto mn-b-thin mn-r-auto radius-big pd-thin bg-second w-min" }, "NOW PLAYING", -1)),
-            unref(state).currentTrack ? (openBlock(), createBlock(unref(fu), {
+            unref(state).currentTrack ? (openBlock(), createBlock(unref(cu), {
               key: 0,
               class: "h2 uppercase mn-b-thin",
               gradient: true,
@@ -132,7 +132,7 @@ const _sfc_main = {
               createElementVNode("p", _hoisted_9, toDisplayString(isLiked.value ? "Liked" : "Like"), 1)
             ])) : createCommentVNode("", true),
             createElementVNode("p", {
-              class: normalizeClass(["t-semi h4", { "mn-l-auto": unref(state$1).user }])
+              class: normalizeClass(["fw-semi h4", { "mn-l-auto": unref(state$1).user }])
             }, toDisplayString(likesCount.value) + " " + toDisplayString(likesCount.value === 1 ? "person" : "people") + " liked", 3)
           ]),
           createElementVNode("div", _hoisted_10, [
@@ -164,7 +164,7 @@ const _sfc_main = {
     };
   }
 };
-const FullscreenPlayer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-76598c55"]]);
+const FullscreenPlayer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6e78a1a6"]]);
 export {
   FullscreenPlayer as default
 };

package/dist/martyrs/src/modules/music/components/player/FullscreenPlayer.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"FullscreenPlayer.vue.js","sources":["../../../../../../../src/modules/music/components/player/FullscreenPlayer.vue"],"sourcesContent":["<template>\n  <section\n    class=\"o-y-scroll o-x-hidden bg-light pd-small pos-relative z-index-2 t-center t-black w-100 h-100\"\n  >\n\n    <div\n      class=\"pos-relative gap-small flex-nowrap flex-column flex-center flex z-index-1\"\n    >\n      <!-- COVER -->\n      <div class=\"mn-b-thin h-max-30r br-2px br-solid br-black-transp-10  radius-extra w-100 pos-relative aspect-1x1 flex-center flex \"\n        style=\"\n          background: linear-gradient(180deg, #BDBDBD 0%, #D9D9D9 79.69%, #A5A5A5 100%);\n          box-shadow: 0 2px 0px 2px #aaaaaa;\n        \"\n      >\n\n        <div class=\"pos-relative\">\n          <div class=\"radioTonarWrapper\" :class=\"{'activeTonar': playerState.isPlaying}\">\n            <img\n              class=\"radioTonar z-index-2\"\n              src=\"./tonar.png\"\n              :class=\"{'playingTonar': playerState.isPlaying}\"\n            >\n          </div>\n          <div\n            ref=\"disk\"\n            :class=\"['radius-100 rotate-gradient flex-center flex']\"\n            :style=\"{\n              transform: `rotate(${playerState.rotationAngle}deg)`,\n              width: '24rem',\n              height: '24rem',\n              border: '3px solid var(--black)',\n              'box-shadow': 'rgba(0,0,0,0.5) 0 0 64px 0px'\n            }\"\n            class=\"pos-relative z-index-1\"\n          >\n            <div\n              v-for=\"i in 11\"\n              :key=\"i\"\n              :style=\"{\n                border: '1px solid rgba(0,0,0,0.25)',\n                position: 'absolute',\n                width: 23 - i * 1 + 'rem',\n                height: 23 - i * 1 + 'rem',\n                'border-radius': '100%',\n                'box-shadow': 'rgb(47 47 47 / 18%) 0px 0px 5px 10px'\n              }\"\n            >\n            </div>\n\n            <div\n              :style=\"{\n                width: '10rem',\n                height: '10rem',\n                backgroundImage: `url('${playerState.currentTrack?.coverUrl || playerState.currentTrack?.album?.coverArt}')`,\n                backgroundPosition: 'center center',\n                backgroundSize: '106%',\n              }\"\n              class=\"radius-extra br-solid br-black-transp-10 br-1px\"\n            >\n            </div>\n          </div>\n\n        </div>\n\n      </div>\n\n      <!-- NOW PLAYING -->\n      <div\n        class=\"pd-thin bg-white radius-medium o-hidden w-100 pos-relative\"\n      >\n        <p class=\"mn-l-auto mn-b-thin mn-r-auto radius-big pd-thin bg-second w-min\">NOW&nbsp;PLAYING</p>\n        <!-- SONG -->\n        <Marquee\n          v-if=\"playerState.currentTrack\"\n          class=\"h2 uppercase mn-b-thin\"\n          :gradient=\"true\"\n          :gradientColor=\"'rgb(var(--white))'\"\n          :clone=\"true\"\n          gradient-length=\"10%\"\n        >\n          {{ playerState.currentTrack.title + '\\xa0\\xa0'}}\n        </Marquee>\n\n        <!-- AUTHOR -->\n        <p\n          v-if=\"playerState.currentTrack\"\n          class=\"h3 uppercase t-transp\"\n        >\n          {{ playerState.currentTrack.artist?.name || 'Unknown Artist' }}\n        </p>\n      </div>\n\n      <!-- LIKES -->\n      <div\n        class=\"pd-thin bg-white radius-medium w-100 pos-relative flex flex-v-center gap-thin\"\n      >\n        <div v-if=\"authState.user\" class=\"flex-nowrap flex gap-thin flex-v-center\">\n          <IconLike\n            @click=\"toggleLike()\"\n            :isLiked=\"isLiked\"\n            fill=\"rgb(var(--black))\"\n            class=\"i-medium cursor-pointer\"\n            :class=\"{'no-events': isLoading}\"\n          />\n          <p class=\"t-semi h4\">{{ isLiked ? 'Liked' : 'Like' }}</p>\n        </div>\n\n        <p class=\"t-semi h4\" :class=\"{'mn-l-auto': authState.user}\">{{ likesCount }} {{ likesCount === 1 ? 'person' : 'people' }} liked</p>\n      </div>\n\n      <!-- CONTROLS -->\n      <div\n        class=\"gap-thin flex-center flex-nowrap flex pd-small bg-white radius-medium o-hidden w-100 pos-relative\"\n      >\n        <PlayerControls />\n      </div>\n\n      <!-- VOLUME -->\n      <div class=\"pd-thin bg-white radius-medium w-100 pos-relative\">\n        <VolumeControl />\n      </div>\n\n\n      <!-- QUEUE LIST -->\n      <div\n        v-if=\"playerState.queue.length > 0\"\n        class=\"mn-b-small bg-white radius-medium o-hidden w-100 pos-relative\"\n      >\n\n        <div class=\"pd-regular w-100 gap-thin flex-nowrap flex flex-v-center\">\n          <IconEvents :fill=\"'rgb(var(--black))'\" class=\"t-transp i-medium\"/>\n          <p class=\"w-100 t-transp t-left\">QUEUE</p>\n        </div>\n\n        <TrackListCard\n          v-for=\"(track, index) in playerState.queue.slice(0, 10)\"\n          :key=\"track._id || index\"\n          :track=\"track\"\n          :index=\"index\"\n          :showCover=\"true\"\n          :showAlbum=\"false\"\n        />\n\n      </div>\n\n    </div>\n\n  </section>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted } from 'vue';\n\nimport { Text, Tooltip, Marquee } from '@ozdao/martyrs';\nimport IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';\nimport IconEvents from '@martyrs/src/modules/icons/entities/IconEvents.vue';\n\nimport TrackListCard from '../cards/TrackListCard.vue';\nimport VolumeControl from './VolumeControl.vue';\nimport PlayerControls from './PlayerControls.vue';\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\n\nconst isLiked = ref(false);\nconst isLoading = ref(false);\nconst likesCount = ref(0);\n\nasync function toggleLike() {\n  // TODO: Implement likes integration with community module\n  isLiked.value = !isLiked.value;\n  likesCount.value += isLiked.value ? 1 : -1;\n}\n\nonMounted(() => {\n  if ('mediaSession' in navigator) {\n    navigator.mediaSession.setActionHandler('pause', () => playerActions.togglePlay());\n    navigator.mediaSession.setActionHandler('play', () => playerActions.togglePlay());\n    navigator.mediaSession.setActionHandler('stop', () => playerActions.togglePlay());\n    navigator.mediaSession.setActionHandler('previoustrack', () => playerActions.playPrevious());\n    navigator.mediaSession.setActionHandler('nexttrack', () => playerActions.playNext());\n  }\n});\n\n</script>\n\n\n<style lang=\"scss\" scoped>\n.radioTonarWrapper {\n  width: 15rem;\n  position: absolute;\n  z-index: 30;\n  transform: rotate(253deg);\n  transform-origin: 75% center;\n  top: 0;\n  right: -2.5rem;\n  transition: transform 1s ease-in-out;\n}\n\n.radioTonar {\n  width: 15rem;\n  transform-origin: 75% center;\n}\n\n.activeTonar {\n  transform: rotate(285deg);\n}\n\n.playingTonar {\n  animation: playingTonar 2s ease-in-out infinite;\n}\n\n@keyframes playingTonar {\n  0%, 100% {\n    transform: rotate(0deg);\n  }\n  25% {\n    transform: rotate(2deg);\n  }\n  50% {\n    transform: rotate(-2deg);\n  }\n}\n\n@property --a {\n  syntax: '<angle>';\n  inherits: false;\n  initial-value: 0deg;\n}\n\n@property --b {\n  syntax: '<angle>';\n  inherits: false;\n  initial-value: 0deg;\n}\n\n.rotate-gradient {\n  --a: 0deg;\n  --b: 0deg;\n  transition: --a 0.5s, --b 0.5s;\n\n  background:\n    conic-gradient(from var(--a), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.33), rgba(255, 255, 255, 0.1)),\n    linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 1) 100%),\n    linear-gradient(180deg, #000 0%, rgba(10, 10, 10, 0.00) 100%),\n    #000;\n}\n</style>\n"],"names":["playerActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoKA,UAAM,UAAU,IAAI,KAAK;AACzB,UAAM,YAAY,IAAI,KAAK;AAC3B,UAAM,aAAa,IAAI,CAAC;AAExB,mBAAe,aAAa;AAE1B,cAAQ,QAAQ,CAAC,QAAQ;AACzB,iBAAW,SAAS,QAAQ,QAAQ,IAAI;AAAA,IAC1C;AAEA,cAAU,MAAM;AACd,UAAI,kBAAkB,WAAW;AAC/B,kBAAU,aAAa,iBAAiB,SAAS,MAAMA,QAAc,YAAY;AACjF,kBAAU,aAAa,iBAAiB,QAAQ,MAAMA,QAAc,YAAY;AAChF,kBAAU,aAAa,iBAAiB,QAAQ,MAAMA,QAAc,YAAY;AAChF,kBAAU,aAAa,iBAAiB,iBAAiB,MAAMA,QAAc,cAAc;AAC3F,kBAAU,aAAa,iBAAiB,aAAa,MAAMA,QAAc,UAAU;AAAA,MACrF;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FullscreenPlayer.vue.js","sources":["../../../../../../../src/modules/music/components/player/FullscreenPlayer.vue"],"sourcesContent":["<template>\n  <section\n    class=\"o-y-scroll o-x-hidden bg-light pd-small pos-relative z-index-2 t-center t-black w-100 h-100\"\n  >\n\n    <div\n      class=\"pos-relative gap-small flex-nowrap flex-column flex-center flex z-index-1\"\n    >\n      <!-- COVER -->\n      <div class=\"mn-b-thin h-max-30r br-2px br-black-transp-10  radius-extra w-100 pos-relative aspect-1x1 flex-center flex \"\n        style=\"\n          background: linear-gradient(180deg, #BDBDBD 0%, #D9D9D9 79.69%, #A5A5A5 100%);\n          box-shadow: 0 2px 0px 2px #aaaaaa;\n        \"\n      >\n\n        <div class=\"pos-relative\">\n          <div class=\"radioTonarWrapper\" :class=\"{'activeTonar': playerState.isPlaying}\">\n            <img\n              class=\"radioTonar z-index-2\"\n              src=\"./tonar.png\"\n              :class=\"{'playingTonar': playerState.isPlaying}\"\n            >\n          </div>\n          <div\n            ref=\"disk\"\n            :class=\"['radius-extra rotate-gradient flex-center flex']\"\n            :style=\"{\n              transform: `rotate(${playerState.rotationAngle}deg)`,\n              width: '24rem',\n              height: '24rem',\n              border: '3px solid var(--black)',\n              'box-shadow': 'rgba(0,0,0,0.5) 0 0 64px 0px'\n            }\"\n            class=\"pos-relative z-index-1\"\n          >\n            <div\n              v-for=\"i in 11\"\n              :key=\"i\"\n              :style=\"{\n                border: '1px solid rgba(0,0,0,0.25)',\n                position: 'absolute',\n                width: 23 - i * 1 + 'rem',\n                height: 23 - i * 1 + 'rem',\n                'border-radius': '100%',\n                'box-shadow': 'rgb(47 47 47 / 18%) 0px 0px 5px 10px'\n              }\"\n            >\n            </div>\n\n            <div\n              :style=\"{\n                width: '10rem',\n                height: '10rem',\n                backgroundImage: `url('${playerState.currentTrack?.coverUrl || playerState.currentTrack?.album?.coverArt}')`,\n                backgroundPosition: 'center center',\n                backgroundSize: '106%',\n              }\"\n              class=\"radius-extra br-black-transp-10 br-1px\"\n            >\n            </div>\n          </div>\n\n        </div>\n\n      </div>\n\n      <!-- NOW PLAYING -->\n      <div\n        class=\"pd-thin bg-white radius-medium o-hidden w-100 pos-relative\"\n      >\n        <p class=\"mn-l-auto mn-b-thin mn-r-auto radius-big pd-thin bg-second w-min\">NOW&nbsp;PLAYING</p>\n        <!-- SONG -->\n        <Marquee\n          v-if=\"playerState.currentTrack\"\n          class=\"h2 uppercase mn-b-thin\"\n          :gradient=\"true\"\n          :gradientColor=\"'rgb(var(--white))'\"\n          :clone=\"true\"\n          gradient-length=\"10%\"\n        >\n          {{ playerState.currentTrack.title + '\\xa0\\xa0'}}\n        </Marquee>\n\n        <!-- AUTHOR -->\n        <p\n          v-if=\"playerState.currentTrack\"\n          class=\"h3 uppercase t-transp\"\n        >\n          {{ playerState.currentTrack.artist?.name || 'Unknown Artist' }}\n        </p>\n      </div>\n\n      <!-- LIKES -->\n      <div\n        class=\"pd-thin bg-white radius-medium w-100 pos-relative flex flex-v-center gap-thin\"\n      >\n        <div v-if=\"authState.user\" class=\"flex-nowrap flex gap-thin flex-v-center\">\n          <IconLike\n            @click=\"toggleLike()\"\n            :isLiked=\"isLiked\"\n            fill=\"rgb(var(--black))\"\n            class=\"i-medium cursor-pointer\"\n            :class=\"{'no-events': isLoading}\"\n          />\n          <p class=\"fw-semi h4\">{{ isLiked ? 'Liked' : 'Like' }}</p>\n        </div>\n\n        <p class=\"fw-semi h4\" :class=\"{'mn-l-auto': authState.user}\">{{ likesCount }} {{ likesCount === 1 ? 'person' : 'people' }} liked</p>\n      </div>\n\n      <!-- CONTROLS -->\n      <div\n        class=\"gap-thin flex-center flex-nowrap flex pd-small bg-white radius-medium o-hidden w-100 pos-relative\"\n      >\n        <PlayerControls />\n      </div>\n\n      <!-- VOLUME -->\n      <div class=\"pd-thin bg-white radius-medium w-100 pos-relative\">\n        <VolumeControl />\n      </div>\n\n\n      <!-- QUEUE LIST -->\n      <div\n        v-if=\"playerState.queue.length > 0\"\n        class=\"mn-b-small bg-white radius-medium o-hidden w-100 pos-relative\"\n      >\n\n        <div class=\"pd-regular w-100 gap-thin flex-nowrap flex flex-v-center\">\n          <IconEvents :fill=\"'rgb(var(--black))'\" class=\"t-transp i-medium\"/>\n          <p class=\"w-100 t-transp t-left\">QUEUE</p>\n        </div>\n\n        <TrackListCard\n          v-for=\"(track, index) in playerState.queue.slice(0, 10)\"\n          :key=\"track._id || index\"\n          :track=\"track\"\n          :index=\"index\"\n          :showCover=\"true\"\n          :showAlbum=\"false\"\n        />\n\n      </div>\n\n    </div>\n\n  </section>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted } from 'vue';\n\nimport { Text, Tooltip, Marquee } from '@ozdao/martyrs';\nimport IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';\nimport IconEvents from '@martyrs/src/modules/icons/entities/IconEvents.vue';\n\nimport TrackListCard from '../cards/TrackListCard.vue';\nimport VolumeControl from './VolumeControl.vue';\nimport PlayerControls from './PlayerControls.vue';\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\n\nconst isLiked = ref(false);\nconst isLoading = ref(false);\nconst likesCount = ref(0);\n\nasync function toggleLike() {\n  // TODO: Implement likes integration with community module\n  isLiked.value = !isLiked.value;\n  likesCount.value += isLiked.value ? 1 : -1;\n}\n\nonMounted(() => {\n  if ('mediaSession' in navigator) {\n    navigator.mediaSession.setActionHandler('pause', () => playerActions.togglePlay());\n    navigator.mediaSession.setActionHandler('play', () => playerActions.togglePlay());\n    navigator.mediaSession.setActionHandler('stop', () => playerActions.togglePlay());\n    navigator.mediaSession.setActionHandler('previoustrack', () => playerActions.playPrevious());\n    navigator.mediaSession.setActionHandler('nexttrack', () => playerActions.playNext());\n  }\n});\n\n</script>\n\n\n<style lang=\"scss\" scoped>\n.radioTonarWrapper {\n  width: 15rem;\n  position: absolute;\n  z-index: 30;\n  transform: rotate(253deg);\n  transform-origin: 75% center;\n  top: 0;\n  right: -2.5rem;\n  transition: transform 1s ease-in-out;\n}\n\n.radioTonar {\n  width: 15rem;\n  transform-origin: 75% center;\n}\n\n.activeTonar {\n  transform: rotate(285deg);\n}\n\n.playingTonar {\n  animation: playingTonar 2s ease-in-out infinite;\n}\n\n@keyframes playingTonar {\n  0%, 100% {\n    transform: rotate(0deg);\n  }\n  25% {\n    transform: rotate(2deg);\n  }\n  50% {\n    transform: rotate(-2deg);\n  }\n}\n\n@property --a {\n  syntax: '<angle>';\n  inherits: false;\n  initial-value: 0deg;\n}\n\n@property --b {\n  syntax: '<angle>';\n  inherits: false;\n  initial-value: 0deg;\n}\n\n.rotate-gradient {\n  --a: 0deg;\n  --b: 0deg;\n  transition: --a 0.5s, --b 0.5s;\n\n  background:\n    conic-gradient(from var(--a), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.33), rgba(255, 255, 255, 0.1)),\n    linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 1) 100%),\n    linear-gradient(180deg, #000 0%, rgba(10, 10, 10, 0.00) 100%),\n    #000;\n}\n</style>\n"],"names":["playerActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoKA,UAAM,UAAU,IAAI,KAAK;AACzB,UAAM,YAAY,IAAI,KAAK;AAC3B,UAAM,aAAa,IAAI,CAAC;AAExB,mBAAe,aAAa;AAE1B,cAAQ,QAAQ,CAAC,QAAQ;AACzB,iBAAW,SAAS,QAAQ,QAAQ,IAAI;AAAA,IAC1C;AAEA,cAAU,MAAM;AACd,UAAI,kBAAkB,WAAW;AAC/B,kBAAU,aAAa,iBAAiB,SAAS,MAAMA,QAAc,YAAY;AACjF,kBAAU,aAAa,iBAAiB,QAAQ,MAAMA,QAAc,YAAY;AAChF,kBAAU,aAAa,iBAAiB,QAAQ,MAAMA,QAAc,YAAY;AAChF,kBAAU,aAAa,iBAAiB,iBAAiB,MAAMA,QAAc,cAAc;AAC3F,kBAAU,aAAa,iBAAiB,aAAa,MAAMA,QAAc,UAAU;AAAA,MACrF;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/player/MusicPlayer.vue.js

@@ -1,6 +1,6 @@
 import { ref, computed, createElementBlock, openBlock, createElementVNode, createVNode, createBlock, createCommentVNode, toDisplayString, unref, normalizeClass, withModifiers, withCtx } from "vue";
 import Media from "../../../../components/Media/Media.vue.js";
-import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
+import _sfc_main$1 from "../../../../components/Button/Button.vue2.js";
 import TrackProgress from "./TrackProgress.vue.js";
 import VolumeControl from "./VolumeControl.vue.js";
 import PlayerControls from "./PlayerControls.vue.js";

package/dist/martyrs/src/modules/music/components/player/PlayerControls.vue.js

@@ -1,5 +1,5 @@
 import { createElementBlock, openBlock, createVNode, normalizeClass, unref, withCtx, createElementVNode } from "vue";
-import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
+import _sfc_main$1 from "../../../../components/Button/Button.vue2.js";
 import IconPrevious from "../../../icons/navigation/IconChevronLeft.vue.js";
 import IconNext from "../../../icons/navigation/IconChevronRight.vue.js";
 import _sfc_main$2 from "../../../icons/navigation/IconShuffle.vue.js";

package/dist/martyrs/src/modules/music/components/player/VolumeControl.vue.js

@@ -1,5 +1,5 @@
 import { ref, computed, createElementBlock, openBlock, createVNode, createElementVNode, unref, withCtx, createBlock, normalizeStyle } from "vue";
-import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
+import _sfc_main$1 from "../../../../components/Button/Button.vue2.js";
 import _sfc_main$2 from "../../../icons/navigation/IconMute.vue.js";
 import _sfc_main$3 from "../../../icons/navigation/IconUnMute.vue.js";
 import { state, actions } from "../../store/player.js";

package/dist/martyrs/src/modules/music/music.client.js

@@ -7,10 +7,10 @@ import * as search from "./store/search.js";
 import * as tracks from "./store/tracks.js";
 import addRoutes from "../core/views/router/addRoutes.js";
 import { getRoutes } from "./music.router.js";
-import _sfc_main$b from "./components/layouts/MusicBottomPlayer.vue.js";
+import _sfc_main$c from "./components/layouts/MusicBottomPlayer.vue.js";
 import _sfc_main$9 from "./components/pages/Album.vue.js";
 import _sfc_main$a from "./components/pages/Artist.vue.js";
-import MusicHome from "./components/pages/MusicHome.vue.js";
+import _sfc_main$b from "./components/pages/MusicHome.vue.js";
 import _sfc_main$6 from "./components/pages/MusicLibrary.vue.js";
 import _sfc_main$5 from "./components/pages/TrackCreate.vue.js";
 import _sfc_main$8 from "./components/pages/Playlist.vue.js";
@@ -74,9 +74,9 @@ const ModuleMusic = {
     },
     components: {
       // Layouts
-      MusicBottomPlayer: _sfc_main$b,
+      MusicBottomPlayer: _sfc_main$c,
       // Pages
-      MusicHome,
+      MusicHome: _sfc_main$b,
       SearchResults,
       Artist: _sfc_main$a,
       Album: _sfc_main$9,
@@ -109,8 +109,8 @@ export {
   _sfc_main$a as Artist,
   ArtistCard,
   _sfc_main$3 as ArtistForm,
-  _sfc_main$b as MusicBottomPlayer,
-  MusicHome,
+  _sfc_main$c as MusicBottomPlayer,
+  _sfc_main$b as MusicHome,
   _sfc_main$6 as MusicLibrary,
   MusicPlayer,
   _sfc_main$8 as Playlist,

package/dist/martyrs/src/modules/music/music.client.js.map

@@ -1 +1 @@
-{"version":3,"file":"music.client.js","sources":["../../../../../src/modules/music/music.client.js"],"sourcesContent":["// Store modules\nimport * as storeAlbums from './store/albums.js';\nimport * as storeArtists from './store/artists.js';\nimport * as storeGenres from './store/genres.js';\nimport * as storePlayer from './store/player.js';\nimport * as storePlaylists from './store/playlists.js';\nimport * as storeSearch from './store/search.js';\nimport * as storeTracks from './store/tracks.js';\n\n// Router\nimport addRoutes from '@martyrs/src/modules/core/views/router/addRoutes.js';\nimport { getRoutes } from './music.router.js';\n\n// Layouts\nimport MusicBottomPlayer from './components/layouts/MusicBottomPlayer.vue';\n\n// Pages\nimport Album from './components/pages/Album.vue';\nimport Artist from './components/pages/Artist.vue';\nimport MusicHome from './components/pages/MusicHome.vue';\nimport MusicLibrary from './components/pages/MusicLibrary.vue';\nimport TrackCreate from './components/pages/TrackCreate.vue';\nimport Playlist from './components/pages/Playlist.vue';\nimport SearchResults from './components/pages/SearchResults.vue';\nimport Track from './components/pages/Track.vue';\n\n// Components - Player\nimport MusicPlayer from './components/player/MusicPlayer.vue';\nimport TrackProgress from './components/player/TrackProgress.vue';\nimport VolumeControl from './components/player/VolumeControl.vue';\n\n// Components - Cards\nimport AlbumCard from './components/cards/AlbumCard.vue';\nimport ArtistCard from './components/cards/ArtistCard.vue';\nimport PlaylistCard from './components/cards/PlaylistCard.vue';\nimport TrackListCard from './components/cards/TrackListCard.vue';\n\n\n// Components - Forms\nimport ArtistForm from './components/forms/ArtistForm.vue';\nimport AlbumForm from './components/forms/AlbumForm.vue';\nimport PlaylistForm from './components/forms/PlaylistForm.vue';\nimport SearchForm from './components/forms/SearchForm.vue';\nimport TrackForm from './components/forms/TrackForm.vue';\n\n// WebSocket integration for streaming\nimport wsManager from '@martyrs/src/modules/core/views/classes/ws.manager.js';\n\n/**\n * Initialize Music module on client-side\n * @param {Object} app - Vue app instance\n * @param {Object} store - Global store instance\n * @param {Object} router - Vue router instance\n * @param {Object} config - Configuration options\n * @param {Object} options - Additional options\n */\nfunction initializeMusic(app, store, router, config, options = {}) {\n  const routes = getRoutes(options);\n  routes.forEach(({ parentName, config }) => {\n    addRoutes(router, { ...config, parentName });\n  });\n\n  // Register store modules\n  store.addStore('tracks', storeTracks);\n  store.addStore('playlists', storePlaylists);\n  store.addStore('albums', storeAlbums);\n  store.addStore('artists', storeArtists);\n  store.addStore('genres', storeGenres);\n  store.addStore('player', storePlayer);\n  store.addStore('search', storeSearch);\n\n  // Set up WebSocket subscription for music streaming\n  if (options.enableStreaming !== false && app.config.globalProperties.WSS_URL) {\n    wsManager.initialize({\n      wsUrl: process.env.WSS_URL,\n      maxReconnectAttempts: 10,\n      reconnectDelay: 2000,\n    });\n\n    // Subscribe to music streaming module when authenticated\n    if (options.userId) {\n      wsManager\n        .connect(options.userId)\n        .then(() => {\n          wsManager.subscribeModule('music-streaming');\n        })\n        .catch(err => {\n          console.error('Failed to connect to WebSocket for music streaming:', err);\n        });\n    }\n  }\n\n  // Register global components if needed\n  app.component('MusicPlayer', MusicPlayer);\n}\n\n// Module export\nconst ModuleMusic = {\n  initialize: initializeMusic,\n  views: {\n    store: {\n      storeTracks,\n      storePlaylists,\n      storeAlbums,\n      storeArtists,\n      storeGenres,\n      storePlayer,\n      storeSearch,\n    },\n    router: {\n      getRoutes,\n    },\n    components: {\n      // Layouts\n      MusicBottomPlayer,\n      // Pages\n      MusicHome,\n      SearchResults,\n      Artist,\n      Album,\n      Playlist,\n      Track,\n      MusicLibrary,\n      TrackCreate,\n      // Player Components\n      MusicPlayer,\n      TrackProgress,\n      VolumeControl,\n      // Cards\n      TrackListCard,\n      AlbumCard,\n      PlaylistCard,\n      ArtistCard,\n      // Forms\n      ArtistForm,\n      AlbumForm,\n      PlaylistForm,\n      SearchForm,\n      TrackForm,\n    },\n  },\n};\n\n// Named exports for direct component imports\nexport {\n  AlbumCard,\n  Album,\n  ArtistCard,\n  Artist,\n  // Pages\n  MusicHome,\n  // Layout\n  MusicBottomPlayer,\n  MusicLibrary,\n  // Player Components\n  MusicPlayer,\n  TrackCreate,\n  PlaylistCard,\n  Playlist,\n  // Forms\n  ArtistForm,\n  AlbumForm,\n  PlaylistForm,\n  SearchForm,\n  SearchResults,\n  // Cards\n  TrackListCard,\n  Track,\n  TrackForm,\n  TrackProgress,\n  VolumeControl,\n  // Router\n  getRoutes,\n  storeAlbums,\n  storeArtists,\n  storeGenres,\n  storePlayer,\n  storePlaylists,\n  storeSearch,\n  // Store modules\n  storeTracks,\n};\n\n// Default export\nexport default ModuleMusic;\n"],"names":["config","storeTracks","storePlaylists","storeAlbums","storeArtists","storeGenres","storePlayer","storeSearch","MusicBottomPlayer","Artist","Album","Playlist","Track","MusicLibrary","TrackCreate","TrackListCard","ArtistForm","AlbumForm","PlaylistForm","TrackForm"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,SAAS,gBAAgB,KAAK,OAAO,QAAQ,QAAQ,UAAU,IAAI;AACjE,QAAM,SAAS,UAAU,OAAO;AAChC,SAAO,QAAQ,CAAC,EAAE,YAAY,QAAAA,QAAM,MAAO;AACzC,cAAU,QAAQ,EAAE,GAAGA,SAAQ,WAAU,CAAE;AAAA,EAC7C,CAAC;AAGD,QAAM,SAAS,UAAUC,MAAW;AACpC,QAAM,SAAS,aAAaC,SAAc;AAC1C,QAAM,SAAS,UAAUC,MAAW;AACpC,QAAM,SAAS,WAAWC,OAAY;AACtC,QAAM,SAAS,UAAUC,MAAW;AACpC,QAAM,SAAS,UAAUC,MAAW;AACpC,QAAM,SAAS,UAAUC,MAAW;AAGpC,MAAI,QAAQ,oBAAoB,SAAS,IAAI,OAAO,iBAAiB,SAAS;AAC5E,cAAU,WAAW;AAAA,MACnB,OAAO,QAAQ,IAAI;AAAA,MACnB,sBAAsB;AAAA,MACtB,gBAAgB;AAAA,IACtB,CAAK;AAGD,QAAI,QAAQ,QAAQ;AAClB,gBACG,QAAQ,QAAQ,MAAM,EACtB,KAAK,MAAM;AACV,kBAAU,gBAAgB,iBAAiB;AAAA,MAC7C,CAAC,EACA,MAAM,SAAO;AACZ,gBAAQ,MAAM,uDAAuD,GAAG;AAAA,MAC1E,CAAC;AAAA,IACL;AAAA,EACF;AAGA,MAAI,UAAU,eAAe,WAAW;AAC1C;AAGK,MAAC,cAAc;AAAA,EAClB,YAAY;AAAA,EACZ,OAAO;AAAA,IACL,OAAO;AAAA,MACX,aAAMN;AAAAA,MACN,gBAAMC;AAAAA,MACN,aAAMC;AAAAA,MACN,cAAMC;AAAAA,MACN,aAAMC;AAAAA,MACN,aAAMC;AAAAA,MACN,aAAMC;AAAAA,IACN;AAAA,IACI,QAAQ;AAAA,MACN;AAAA,IACN;AAAA,IACI,YAAY;AAAA;AAAA,MAEhB,mBAAMC;AAAAA;AAAAA,MAEA;AAAA,MACA;AAAA,MACN,QAAMC;AAAAA,MACN,OAAMC;AAAAA,MACN,UAAMC;AAAAA,MACN,OAAMC;AAAAA,MACN,cAAMC;AAAAA,MACN,aAAMC;AAAAA;AAAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEN,eAAMC;AAAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEN,YAAMC;AAAAA,MACN,WAAMC;AAAAA,MACN,cAAMC;AAAAA,MACA;AAAA,MACN,WAAMC;AAAAA,IACN;AAAA,EACA;AACA;"}
+{"version":3,"file":"music.client.js","sources":["../../../../../src/modules/music/music.client.js"],"sourcesContent":["// Store modules\nimport * as storeAlbums from './store/albums.js';\nimport * as storeArtists from './store/artists.js';\nimport * as storeGenres from './store/genres.js';\nimport * as storePlayer from './store/player.js';\nimport * as storePlaylists from './store/playlists.js';\nimport * as storeSearch from './store/search.js';\nimport * as storeTracks from './store/tracks.js';\n\n// Router\nimport addRoutes from '@martyrs/src/modules/core/views/router/addRoutes.js';\nimport { getRoutes } from './music.router.js';\n\n// Layouts\nimport MusicBottomPlayer from './components/layouts/MusicBottomPlayer.vue';\n\n// Pages\nimport Album from './components/pages/Album.vue';\nimport Artist from './components/pages/Artist.vue';\nimport MusicHome from './components/pages/MusicHome.vue';\nimport MusicLibrary from './components/pages/MusicLibrary.vue';\nimport TrackCreate from './components/pages/TrackCreate.vue';\nimport Playlist from './components/pages/Playlist.vue';\nimport SearchResults from './components/pages/SearchResults.vue';\nimport Track from './components/pages/Track.vue';\n\n// Components - Player\nimport MusicPlayer from './components/player/MusicPlayer.vue';\nimport TrackProgress from './components/player/TrackProgress.vue';\nimport VolumeControl from './components/player/VolumeControl.vue';\n\n// Components - Cards\nimport AlbumCard from './components/cards/AlbumCard.vue';\nimport ArtistCard from './components/cards/ArtistCard.vue';\nimport PlaylistCard from './components/cards/PlaylistCard.vue';\nimport TrackListCard from './components/cards/TrackListCard.vue';\n\n\n// Components - Forms\nimport ArtistForm from './components/forms/ArtistForm.vue';\nimport AlbumForm from './components/forms/AlbumForm.vue';\nimport PlaylistForm from './components/forms/PlaylistForm.vue';\nimport SearchForm from './components/forms/SearchForm.vue';\nimport TrackForm from './components/forms/TrackForm.vue';\n\n// WebSocket integration for streaming\nimport wsManager from '@martyrs/src/modules/core/views/classes/ws.manager.js';\n\n/**\n * Initialize Music module on client-side\n * @param {Object} app - Vue app instance\n * @param {Object} store - Global store instance\n * @param {Object} router - Vue router instance\n * @param {Object} config - Configuration options\n * @param {Object} options - Additional options\n */\nfunction initializeMusic(app, store, router, config, options = {}) {\n  const routes = getRoutes(options);\n  routes.forEach(({ parentName, config }) => {\n    addRoutes(router, { ...config, parentName });\n  });\n\n  // Register store modules\n  store.addStore('tracks', storeTracks);\n  store.addStore('playlists', storePlaylists);\n  store.addStore('albums', storeAlbums);\n  store.addStore('artists', storeArtists);\n  store.addStore('genres', storeGenres);\n  store.addStore('player', storePlayer);\n  store.addStore('search', storeSearch);\n\n  // Set up WebSocket subscription for music streaming\n  if (options.enableStreaming !== false && app.config.globalProperties.WSS_URL) {\n    wsManager.initialize({\n      wsUrl: process.env.WSS_URL,\n      maxReconnectAttempts: 10,\n      reconnectDelay: 2000,\n    });\n\n    // Subscribe to music streaming module when authenticated\n    if (options.userId) {\n      wsManager\n        .connect(options.userId)\n        .then(() => {\n          wsManager.subscribeModule('music-streaming');\n        })\n        .catch(err => {\n          console.error('Failed to connect to WebSocket for music streaming:', err);\n        });\n    }\n  }\n\n  // Register global components if needed\n  app.component('MusicPlayer', MusicPlayer);\n}\n\n// Module export\nconst ModuleMusic = {\n  initialize: initializeMusic,\n  views: {\n    store: {\n      storeTracks,\n      storePlaylists,\n      storeAlbums,\n      storeArtists,\n      storeGenres,\n      storePlayer,\n      storeSearch,\n    },\n    router: {\n      getRoutes,\n    },\n    components: {\n      // Layouts\n      MusicBottomPlayer,\n      // Pages\n      MusicHome,\n      SearchResults,\n      Artist,\n      Album,\n      Playlist,\n      Track,\n      MusicLibrary,\n      TrackCreate,\n      // Player Components\n      MusicPlayer,\n      TrackProgress,\n      VolumeControl,\n      // Cards\n      TrackListCard,\n      AlbumCard,\n      PlaylistCard,\n      ArtistCard,\n      // Forms\n      ArtistForm,\n      AlbumForm,\n      PlaylistForm,\n      SearchForm,\n      TrackForm,\n    },\n  },\n};\n\n// Named exports for direct component imports\nexport {\n  AlbumCard,\n  Album,\n  ArtistCard,\n  Artist,\n  // Pages\n  MusicHome,\n  // Layout\n  MusicBottomPlayer,\n  MusicLibrary,\n  // Player Components\n  MusicPlayer,\n  TrackCreate,\n  PlaylistCard,\n  Playlist,\n  // Forms\n  ArtistForm,\n  AlbumForm,\n  PlaylistForm,\n  SearchForm,\n  SearchResults,\n  // Cards\n  TrackListCard,\n  Track,\n  TrackForm,\n  TrackProgress,\n  VolumeControl,\n  // Router\n  getRoutes,\n  storeAlbums,\n  storeArtists,\n  storeGenres,\n  storePlayer,\n  storePlaylists,\n  storeSearch,\n  // Store modules\n  storeTracks,\n};\n\n// Default export\nexport default ModuleMusic;\n"],"names":["config","storeTracks","storePlaylists","storeAlbums","storeArtists","storeGenres","storePlayer","storeSearch","MusicBottomPlayer","MusicHome","Artist","Album","Playlist","Track","MusicLibrary","TrackCreate","TrackListCard","ArtistForm","AlbumForm","PlaylistForm","TrackForm"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,SAAS,gBAAgB,KAAK,OAAO,QAAQ,QAAQ,UAAU,IAAI;AACjE,QAAM,SAAS,UAAU,OAAO;AAChC,SAAO,QAAQ,CAAC,EAAE,YAAY,QAAAA,QAAM,MAAO;AACzC,cAAU,QAAQ,EAAE,GAAGA,SAAQ,WAAU,CAAE;AAAA,EAC7C,CAAC;AAGD,QAAM,SAAS,UAAUC,MAAW;AACpC,QAAM,SAAS,aAAaC,SAAc;AAC1C,QAAM,SAAS,UAAUC,MAAW;AACpC,QAAM,SAAS,WAAWC,OAAY;AACtC,QAAM,SAAS,UAAUC,MAAW;AACpC,QAAM,SAAS,UAAUC,MAAW;AACpC,QAAM,SAAS,UAAUC,MAAW;AAGpC,MAAI,QAAQ,oBAAoB,SAAS,IAAI,OAAO,iBAAiB,SAAS;AAC5E,cAAU,WAAW;AAAA,MACnB,OAAO,QAAQ,IAAI;AAAA,MACnB,sBAAsB;AAAA,MACtB,gBAAgB;AAAA,IACtB,CAAK;AAGD,QAAI,QAAQ,QAAQ;AAClB,gBACG,QAAQ,QAAQ,MAAM,EACtB,KAAK,MAAM;AACV,kBAAU,gBAAgB,iBAAiB;AAAA,MAC7C,CAAC,EACA,MAAM,SAAO;AACZ,gBAAQ,MAAM,uDAAuD,GAAG;AAAA,MAC1E,CAAC;AAAA,IACL;AAAA,EACF;AAGA,MAAI,UAAU,eAAe,WAAW;AAC1C;AAGK,MAAC,cAAc;AAAA,EAClB,YAAY;AAAA,EACZ,OAAO;AAAA,IACL,OAAO;AAAA,MACX,aAAMN;AAAAA,MACN,gBAAMC;AAAAA,MACN,aAAMC;AAAAA,MACN,cAAMC;AAAAA,MACN,aAAMC;AAAAA,MACN,aAAMC;AAAAA,MACN,aAAMC;AAAAA,IACN;AAAA,IACI,QAAQ;AAAA,MACN;AAAA,IACN;AAAA,IACI,YAAY;AAAA;AAAA,MAEhB,mBAAMC;AAAAA;AAAAA,MAEN,WAAMC;AAAAA,MACA;AAAA,MACN,QAAMC;AAAAA,MACN,OAAMC;AAAAA,MACN,UAAMC;AAAAA,MACN,OAAMC;AAAAA,MACN,cAAMC;AAAAA,MACN,aAAMC;AAAAA;AAAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEN,eAAMC;AAAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEN,YAAMC;AAAAA,MACN,WAAMC;AAAAA,MACN,cAAMC;AAAAA,MACA;AAAA,MACN,WAAMC;AAAAA,IACN;AAAA,EACA;AACA;"}

package/dist/martyrs/src/modules/notifications/components/blocks/NotificationItem.vue.js

@@ -3,7 +3,7 @@ import { computed, createElementBlock, openBlock, normalizeClass, createElementV
 import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
 const _hoisted_1 = { class: "notification-icon" };
 const _hoisted_2 = { class: "notification-content" };
-const _hoisted_3 = { class: "p-regular t-medium mn-b-small" };
+const _hoisted_3 = { class: "p-regular fw-medium mn-b-small" };
 const _hoisted_4 = { class: "p-small mn-b-small" };
 const _hoisted_5 = { class: "pd-thin w-max radius-thin bg-white" };
 const _hoisted_6 = {
@@ -75,7 +75,7 @@ const _sfc_main = {
     };
   }
 };
-const NotificationItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3166e453"]]);
+const NotificationItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3bc04d97"]]);
 export {
   NotificationItem as default
 };

package/dist/martyrs/src/modules/notifications/components/blocks/NotificationItem.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationItem.vue.js","sources":["../../../../../../../src/modules/notifications/components/blocks/NotificationItem.vue"],"sourcesContent":["<script setup>\nimport { computed } from 'vue';\n\n// Props\nconst props = defineProps({\n  notification: {\n    type: Object,\n    required: true\n  }\n});\n\n// Compute if notification is unread\nconst isUnread = computed(() => props.notification.status !== 'read');\n\n// Format date\nconst formattedDate = computed(() => {\n  const date = new Date(props.notification.createdAt);\n  const now = new Date();\n  const diffMs = now - date;\n  const diffSec = Math.floor(diffMs / 1000);\n  const diffMin = Math.floor(diffSec / 60);\n  const diffHours = Math.floor(diffMin / 60);\n  const diffDays = Math.floor(diffHours / 24);\n  \n  if (diffSec < 60) {\n    return 'Just now';\n  } else if (diffMin < 60) {\n    return `${diffMin}m ago`;\n  } else if (diffHours < 24) {\n    return `${diffHours}h ago`;\n  } else if (diffDays < 7) {\n    return `${diffDays}d ago`;\n  } else {\n    return date.toLocaleDateString();\n  }\n});\n\n// Get icon based on notification type\nconst notificationIcon = computed(() => {\n  switch (props.notification.type) {\n    case 'alert':\n      return '⚠️';\n    case 'success':\n      return '✅';\n    case 'error':\n      return '❌';\n    case 'info':\n    default:\n      return 'ℹ️';\n  }\n});\n\n// Emit click event\nconst emit = defineEmits(['click']);\nconst handleClick = () => {\n  emit('click', props.notification);\n};\n</script>\n\n<template>\n  <div \n    class=\"notification-item gap-thin flex pd-small radius-small bg-light\" \n    :class=\"{ 'bg-second-small': isUnread }\"\n    @click=\"handleClick\"\n  >\n    <div class=\"notification-icon\">\n      {{ notificationIcon }}\n    </div>\n    <div class=\"notification-content\">\n      <p class=\"p-regular t-medium mn-b-small\">{{ notification.title }}</p>\n      <p class=\"p-small mn-b-small\">{{ notification.body }}</p>\n      <p class=\"pd-thin w-max radius-thin bg-white\">{{ formattedDate }}</p>\n    </div>\n    <div v-if=\"isUnread\" class=\"flex-child-default unread-indicator\"></div>\n  </div>\n</template>\n\n<style scoped>\n.unread-indicator {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background-color: var(--primary-color, #0066cc);\n  align-self: center;\n  margin-left: 0.5rem;\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAIA,UAAM,QAAQ;AAQd,UAAM,WAAW,SAAS,MAAM,MAAM,aAAa,WAAW,MAAM;AAGpE,UAAM,gBAAgB,SAAS,MAAM;AACnC,YAAM,OAAO,IAAI,KAAK,MAAM,aAAa,SAAS;AAClD,YAAM,MAAM,oBAAI,KAAI;AACpB,YAAM,SAAS,MAAM;AACrB,YAAM,UAAU,KAAK,MAAM,SAAS,GAAI;AACxC,YAAM,UAAU,KAAK,MAAM,UAAU,EAAE;AACvC,YAAM,YAAY,KAAK,MAAM,UAAU,EAAE;AACzC,YAAM,WAAW,KAAK,MAAM,YAAY,EAAE;AAE1C,UAAI,UAAU,IAAI;AAChB,eAAO;AAAA,MACT,WAAW,UAAU,IAAI;AACvB,eAAO,GAAG,OAAO;AAAA,MACnB,WAAW,YAAY,IAAI;AACzB,eAAO,GAAG,SAAS;AAAA,MACrB,WAAW,WAAW,GAAG;AACvB,eAAO,GAAG,QAAQ;AAAA,MACpB,OAAO;AACL,eAAO,KAAK,mBAAkB;AAAA,MAChC;AAAA,IACF,CAAC;AAGD,UAAM,mBAAmB,SAAS,MAAM;AACtC,cAAQ,MAAM,aAAa,MAAI;AAAA,QAC7B,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AAAA,QACL;AACE,iBAAO;AAAA,MACb;AAAA,IACA,CAAC;AAGD,UAAM,OAAO;AACb,UAAM,cAAc,MAAM;AACxB,WAAK,SAAS,MAAM,YAAY;AAAA,IAClC;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NotificationItem.vue.js","sources":["../../../../../../../src/modules/notifications/components/blocks/NotificationItem.vue"],"sourcesContent":["<script setup>\nimport { computed } from 'vue';\n\n// Props\nconst props = defineProps({\n  notification: {\n    type: Object,\n    required: true\n  }\n});\n\n// Compute if notification is unread\nconst isUnread = computed(() => props.notification.status !== 'read');\n\n// Format date\nconst formattedDate = computed(() => {\n  const date = new Date(props.notification.createdAt);\n  const now = new Date();\n  const diffMs = now - date;\n  const diffSec = Math.floor(diffMs / 1000);\n  const diffMin = Math.floor(diffSec / 60);\n  const diffHours = Math.floor(diffMin / 60);\n  const diffDays = Math.floor(diffHours / 24);\n  \n  if (diffSec < 60) {\n    return 'Just now';\n  } else if (diffMin < 60) {\n    return `${diffMin}m ago`;\n  } else if (diffHours < 24) {\n    return `${diffHours}h ago`;\n  } else if (diffDays < 7) {\n    return `${diffDays}d ago`;\n  } else {\n    return date.toLocaleDateString();\n  }\n});\n\n// Get icon based on notification type\nconst notificationIcon = computed(() => {\n  switch (props.notification.type) {\n    case 'alert':\n      return '⚠️';\n    case 'success':\n      return '✅';\n    case 'error':\n      return '❌';\n    case 'info':\n    default:\n      return 'ℹ️';\n  }\n});\n\n// Emit click event\nconst emit = defineEmits(['click']);\nconst handleClick = () => {\n  emit('click', props.notification);\n};\n</script>\n\n<template>\n  <div \n    class=\"notification-item gap-thin flex pd-small radius-small bg-light\" \n    :class=\"{ 'bg-second-small': isUnread }\"\n    @click=\"handleClick\"\n  >\n    <div class=\"notification-icon\">\n      {{ notificationIcon }}\n    </div>\n    <div class=\"notification-content\">\n      <p class=\"p-regular fw-medium mn-b-small\">{{ notification.title }}</p>\n      <p class=\"p-small mn-b-small\">{{ notification.body }}</p>\n      <p class=\"pd-thin w-max radius-thin bg-white\">{{ formattedDate }}</p>\n    </div>\n    <div v-if=\"isUnread\" class=\"flex-child-default unread-indicator\"></div>\n  </div>\n</template>\n\n<style scoped>\n.unread-indicator {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background-color: var(--primary-color, #0066cc);\n  align-self: center;\n  margin-left: 0.5rem;\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAIA,UAAM,QAAQ;AAQd,UAAM,WAAW,SAAS,MAAM,MAAM,aAAa,WAAW,MAAM;AAGpE,UAAM,gBAAgB,SAAS,MAAM;AACnC,YAAM,OAAO,IAAI,KAAK,MAAM,aAAa,SAAS;AAClD,YAAM,MAAM,oBAAI,KAAI;AACpB,YAAM,SAAS,MAAM;AACrB,YAAM,UAAU,KAAK,MAAM,SAAS,GAAI;AACxC,YAAM,UAAU,KAAK,MAAM,UAAU,EAAE;AACvC,YAAM,YAAY,KAAK,MAAM,UAAU,EAAE;AACzC,YAAM,WAAW,KAAK,MAAM,YAAY,EAAE;AAE1C,UAAI,UAAU,IAAI;AAChB,eAAO;AAAA,MACT,WAAW,UAAU,IAAI;AACvB,eAAO,GAAG,OAAO;AAAA,MACnB,WAAW,YAAY,IAAI;AACzB,eAAO,GAAG,SAAS;AAAA,MACrB,WAAW,WAAW,GAAG;AACvB,eAAO,GAAG,QAAQ;AAAA,MACpB,OAAO;AACL,eAAO,KAAK,mBAAkB;AAAA,MAChC;AAAA,IACF,CAAC;AAGD,UAAM,mBAAmB,SAAS,MAAM;AACtC,cAAQ,MAAM,aAAa,MAAI;AAAA,QAC7B,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AAAA,QACL;AACE,iBAAO;AAAA,MACb;AAAA,IACA,CAAC;AAGD,UAAM,OAAO;AACb,UAAM,cAAc,MAAM;AACxB,WAAK,SAAS,MAAM,YAAY;AAAA,IAClC;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/notifications/components/elements/NotificationBadge.vue.js

@@ -135,7 +135,7 @@ const _sfc_main = {
     };
   }
 };
-const NotificationBadge = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1dbe1152"]]);
+const NotificationBadge = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ce5c73ba"]]);
 export {
   NotificationBadge as default
 };

package/dist/martyrs/src/modules/notifications/components/elements/NotificationBadge.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationBadge.vue.js","sources":["../../../../../../../src/modules/notifications/components/elements/NotificationBadge.vue"],"sourcesContent":["<template>\n  <div class=\"notification-badge-container\">\n    <button \n      class=\"i-medium notification-button\"\n      @click=\"toggleNotifications\"\n      :aria-label=\"unreadCount > 0 ? `${unreadCount} unread notifications` : 'No unread notifications'\"\n    >\n      <IconBell class=\"notification-icon i-medium\" :fill=\"fill\"/>\n      <div  \n        v-if=\"unreadCount > 0\" \n        class=\"button-counter flex flex-center\"\n      >\n        <span>{{ unreadCount > 99 ? '99+' : unreadCount }}</span>\n      </div>\n    </button>\n    \n    <Popup\n      title=\"Notifications\"\n      @close-popup=\"closeNotifications\"\n      :isPopupOpen=\"isOpen\"\n      align=\"center right\"\n      class=\"bg-white h-min-100 w-100 w-max-30r pd-medium\"\n    >\n      <div class=\"cols-1 gap-thin o-y-scroll\">\n        <div v-if=\"loading\" class=\"notifications-loading\">\n          Loading...\n        </div>\n        \n        <div v-else-if=\"notifications.length === 0\" class=\"notifications-empty\">\n          No notifications\n        </div>\n        \n        <div v-else class=\"flex-column flex gap-thin\">\n          <notification-item \n            v-for=\"notification in recentNotifications\" \n            :key=\"notification._id\" \n            :notification=\"notification\"\n            @click=\"handleNotificationClick(notification)\"\n          />\n\n          <div class=\"flex-nowrap flex gap-thin\">\n            <button \n              v-if=\"unreadCount > 0\"\n              class=\"w-100 bg-second t-white radius-small  button\" \n              @click=\"markAllAsRead\"\n            >\n              Mark all read\n            </button>\n\n            <router-link class=\"w-100 bg-black t-white radius-small button\" to=\"/notifications\" @click=\"closeNotifications\">\n              View all \n            </router-link>\n          </div>\n\n        </div>\n\n      </div>\n    </Popup>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, inject } from 'vue';\nimport { useRouter } from 'vue-router';\n\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\n\nimport NotificationItem from '../blocks/NotificationItem.vue';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\nimport IconBell from '@martyrs/src/modules/icons/entities/IconBell.vue';\n\nconst props = defineProps({\n  maxNotifications: {\n    type: Number,\n    default: 10\n  },\n  fill: {\n    type: String,\n    default: 'rgb(var(--white))'\n  }\n});\n\n// Get router and notification functionality\nconst router = useRouter();\n\n// Check if notifications module is loaded, provide fallback if not\nconst useNotifications = inject('useNotifications', () => ({\n  notifications: ref([]),\n  unreadCount: ref(0),\n  loading: ref(false),\n  markAllAsRead: () => {},\n  getNotifications: () => {}\n}));\n\nconst { notifications, unreadCount, loading, markAllAsRead, getNotifications } = useNotifications();\n\n// Local state\nconst isOpen = ref(false);\n\n// Computed properties\nconst recentNotifications = computed(() => {\n  return notifications.value\n    .slice()\n    .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))\n    .slice(0, props.maxNotifications);\n});\n\n// Methods\nconst toggleNotifications = () => {\n  isOpen.value = !isOpen.value;\n};\n\nconst closeNotifications = () => {\n  isOpen.value = false;\n};\n\nconst handleNotificationClick = (notification) => {\n  isOpen.value = false;\n  \n  if (notification._id) {\n    // Handle in store\n    actions.handleNotificationAction({\n      notificationId: notification._id,\n      ...notification.metadata\n    });\n  }\n};\n\n// Lifecycle hooks\nonMounted(() => {\n  // Load notifications when component mounts\n  const userId = auth.state.user._id;\n  if (userId) {\n    getNotifications(userId);\n  }\n});\n</script>\n\n<style scoped>\n.notification-badge-container {\n  position: relative;\n  display: inline-block;\n}\n\n.notification-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: relative;\n  font-size: 1.2rem;\n}\n\n.notification-icon {\n  font-size: 1.4rem;\n}\n\n.button-counter {\n  position: absolute;\n  right: -8px;\n  bottom: -8px;\n  background: rgb(var(--fourth));\n  color: rgb(var(--white));\n  height: 16px;\n  border-radius: 16px;\n  width: 16px;\n  font-weight: 500;\n  text-align: center;\n  line-height: 16px;\n  font-size: 10px;\n}\n\n\n.notifications-loading,\n.notifications-empty {\n  padding: 24px;\n  text-align: center;\n  color: rgb(var(--text-light));\n}\n</style>"],"names":["auth.state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,UAAM,QAAQ;AAYC,cAAS;AAGxB,UAAM,mBAAmB,OAAO,oBAAoB,OAAO;AAAA,MACzD,eAAe,IAAI,EAAE;AAAA,MACrB,aAAa,IAAI,CAAC;AAAA,MAClB,SAAS,IAAI,KAAK;AAAA,MAClB,eAAe,MAAM;AAAA,MAAC;AAAA,MACtB,kBAAkB,MAAM;AAAA,MAAC;AAAA,IAC3B,EAAE;AAEF,UAAM,EAAE,eAAe,aAAa,SAAS,eAAe,iBAAgB,IAAK,iBAAgB;AAGjG,UAAM,SAAS,IAAI,KAAK;AAGxB,UAAM,sBAAsB,SAAS,MAAM;AACzC,aAAO,cAAc,MAClB,MAAK,EACL,KAAK,CAAC,GAAG,MAAM,IAAI,KAAK,EAAE,SAAS,IAAI,IAAI,KAAK,EAAE,SAAS,CAAC,EAC5D,MAAM,GAAG,MAAM,gBAAgB;AAAA,IACpC,CAAC;AAGD,UAAM,sBAAsB,MAAM;AAChC,aAAO,QAAQ,CAAC,OAAO;AAAA,IACzB;AAEA,UAAM,qBAAqB,MAAM;AAC/B,aAAO,QAAQ;AAAA,IACjB;AAEA,UAAM,0BAA0B,CAAC,iBAAiB;AAChD,aAAO,QAAQ;AAEf,UAAI,aAAa,KAAK;AAEpB,gBAAQ,yBAAyB;AAAA,UAC/B,gBAAgB,aAAa;AAAA,UAC7B,GAAG,aAAa;AAAA,QACtB,CAAK;AAAA,MACH;AAAA,IACF;AAGA,cAAU,MAAM;AAEd,YAAM,SAASA,MAAW,KAAK;AAC/B,UAAI,QAAQ;AACV,yBAAiB,MAAM;AAAA,MACzB;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NotificationBadge.vue.js","sources":["../../../../../../../src/modules/notifications/components/elements/NotificationBadge.vue"],"sourcesContent":["<template>\n  <div class=\"notification-badge-container\">\n    <button \n      class=\"i-medium notification-button\"\n      @click=\"toggleNotifications\"\n      :aria-label=\"unreadCount > 0 ? `${unreadCount} unread notifications` : 'No unread notifications'\"\n    >\n      <IconBell class=\"notification-icon i-medium\" :fill=\"fill\"/>\n      <div  \n        v-if=\"unreadCount > 0\" \n        class=\"button-counter flex flex-center\"\n      >\n        <span>{{ unreadCount > 99 ? '99+' : unreadCount }}</span>\n      </div>\n    </button>\n    \n    <Popup\n      title=\"Notifications\"\n      @close-popup=\"closeNotifications\"\n      :isPopupOpen=\"isOpen\"\n      align=\"center right\"\n      class=\"bg-white h-min-100 w-100 w-max-30r pd-medium\"\n    >\n      <div class=\"cols-1 gap-thin o-y-scroll\">\n        <div v-if=\"loading\" class=\"notifications-loading\">\n          Loading...\n        </div>\n        \n        <div v-else-if=\"notifications.length === 0\" class=\"notifications-empty\">\n          No notifications\n        </div>\n        \n        <div v-else class=\"flex-column flex gap-thin\">\n          <notification-item \n            v-for=\"notification in recentNotifications\" \n            :key=\"notification._id\" \n            :notification=\"notification\"\n            @click=\"handleNotificationClick(notification)\"\n          />\n\n          <div class=\"flex-nowrap flex gap-thin\">\n            <button \n              v-if=\"unreadCount > 0\"\n              class=\"w-100 bg-second t-white radius-small  button\" \n              @click=\"markAllAsRead\"\n            >\n              Mark all read\n            </button>\n\n            <router-link class=\"w-100 bg-black t-white radius-small button\" to=\"/notifications\" @click=\"closeNotifications\">\n              View all \n            </router-link>\n          </div>\n\n        </div>\n\n      </div>\n    </Popup>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, inject } from 'vue';\nimport { useRouter } from 'vue-router';\n\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\n\nimport NotificationItem from '../blocks/NotificationItem.vue';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\nimport IconBell from '@martyrs/src/modules/icons/entities/IconBell.vue';\n\nconst props = defineProps({\n  maxNotifications: {\n    type: Number,\n    default: 10\n  },\n  fill: {\n    type: String,\n    default: 'rgb(var(--white))'\n  }\n});\n\n// Get router and notification functionality\nconst router = useRouter();\n\n// Check if notifications module is loaded, provide fallback if not\nconst useNotifications = inject('useNotifications', () => ({\n  notifications: ref([]),\n  unreadCount: ref(0),\n  loading: ref(false),\n  markAllAsRead: () => {},\n  getNotifications: () => {}\n}));\n\nconst { notifications, unreadCount, loading, markAllAsRead, getNotifications } = useNotifications();\n\n// Local state\nconst isOpen = ref(false);\n\n// Computed properties\nconst recentNotifications = computed(() => {\n  return notifications.value\n    .slice()\n    .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))\n    .slice(0, props.maxNotifications);\n});\n\n// Methods\nconst toggleNotifications = () => {\n  isOpen.value = !isOpen.value;\n};\n\nconst closeNotifications = () => {\n  isOpen.value = false;\n};\n\nconst handleNotificationClick = (notification) => {\n  isOpen.value = false;\n  \n  if (notification._id) {\n    // Handle in store\n    actions.handleNotificationAction({\n      notificationId: notification._id,\n      ...notification.metadata\n    });\n  }\n};\n\n// Lifecycle hooks\nonMounted(() => {\n  // Load notifications when component mounts\n  const userId = auth.state.user._id;\n  if (userId) {\n    getNotifications(userId);\n  }\n});\n</script>\n\n<style scoped>\n.notification-badge-container {\n  position: relative;\n  display: inline-block;\n}\n\n.notification-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: relative;\n  font-size: 1.2rem;\n}\n\n.notification-icon {\n  font-size: 1.4rem;\n}\n\n.button-counter {\n  position: absolute;\n  right: -8px;\n  bottom: -8px;\n  background: rgb(var(--fourth));\n  color: rgb(var(--white));\n  height: 16px;\n  border-radius: 16px;\n  width: 16px;\n  font-weight: 500;\n  text-align: center;\n  line-height: 16px;\n  font-size: 10px;\n}\n\n\n.notifications-loading,\n.notifications-empty {\n  padding: 24px;\n  text-align: center;\n  color: rgb(var(--texfw-light));\n}\n</style>"],"names":["auth.state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,UAAM,QAAQ;AAYC,cAAS;AAGxB,UAAM,mBAAmB,OAAO,oBAAoB,OAAO;AAAA,MACzD,eAAe,IAAI,EAAE;AAAA,MACrB,aAAa,IAAI,CAAC;AAAA,MAClB,SAAS,IAAI,KAAK;AAAA,MAClB,eAAe,MAAM;AAAA,MAAC;AAAA,MACtB,kBAAkB,MAAM;AAAA,MAAC;AAAA,IAC3B,EAAE;AAEF,UAAM,EAAE,eAAe,aAAa,SAAS,eAAe,iBAAgB,IAAK,iBAAgB;AAGjG,UAAM,SAAS,IAAI,KAAK;AAGxB,UAAM,sBAAsB,SAAS,MAAM;AACzC,aAAO,cAAc,MAClB,MAAK,EACL,KAAK,CAAC,GAAG,MAAM,IAAI,KAAK,EAAE,SAAS,IAAI,IAAI,KAAK,EAAE,SAAS,CAAC,EAC5D,MAAM,GAAG,MAAM,gBAAgB;AAAA,IACpC,CAAC;AAGD,UAAM,sBAAsB,MAAM;AAChC,aAAO,QAAQ,CAAC,OAAO;AAAA,IACzB;AAEA,UAAM,qBAAqB,MAAM;AAC/B,aAAO,QAAQ;AAAA,IACjB;AAEA,UAAM,0BAA0B,CAAC,iBAAiB;AAChD,aAAO,QAAQ;AAEf,UAAI,aAAa,KAAK;AAEpB,gBAAQ,yBAAyB;AAAA,UAC/B,gBAAgB,aAAa;AAAA,UAC7B,GAAG,aAAa;AAAA,QACtB,CAAK;AAAA,MACH;AAAA,IACF;AAGA,cAAU,MAAM;AAEd,YAAM,SAASA,MAAW,KAAK;AAC/B,UAAI,QAAQ;AACV,yBAAiB,MAAM;AAAA,MACzB;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}