@ozdao/martyrs 0.2.571 → 0.2.572

package/dist/martyrs/src/modules/music/components/blocks/ActionButtons.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButtons.vue.js","sources":["../../../../../../../src/modules/music/components/blocks/ActionButtons.vue"],"sourcesContent":["<template>\n  <div class=\"flex gap-small mn-b-medium\">\n    <template v-for=\"(button, index) in buttons\" :key=\"index\">\n      <!-- Regular button -->\n      <Button\n        v-if=\"button.type !== 'dropdown'\"\n        :class=\"['flex-1 radius-thin flex-center gap-thin', button.class]\"\n        @click=\"button.action\"\n      >\n        <component\n          v-if=\"button.icon\"\n          :is=\"button.icon\"\n          :fill=\"button.iconFill\"\n          class=\"i-medium\"\n        />\n        {{ button.text }}\n      </Button>\n\n      <!-- Dropdown button -->\n      <Dropdown\n        v-else\n        :label=\"{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }\"\n        v-model=\"dropdownOpen\"\n        class=\"relative\"\n      >\n        <template #trigger>\n          <Button color=\"transp\" size=\"medium\" class=\"w-3r h-3r radius-full\">\n            <IconEllipsis class=\"i-medium\" />\n          </Button>\n        </template>\n        <template #default>\n          <div class=\"dropdown-menu bg-white pd-small radius-medium shadow-big mn-t-thin\">\n            <template v-for=\"(item, idx) in button.items\" :key=\"idx\">\n              <hr v-if=\"item.separator\" class=\"mn-v-thin border-dark-transp-10\" />\n              <Button\n                v-else\n                @click=\"handleDropdownClick(item.action)\"\n                :color=\"item.color || 'transp'\"\n                size=\"small\"\n                class=\"w-100 justify-start\"\n                :class=\"item.class\"\n              >\n                {{ item.text }}\n              </Button>\n            </template>\n          </div>\n        </template>\n      </Dropdown>\n    </template>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\nimport IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';\n\nconst props = defineProps({\n  buttons: {\n    type: Array,\n    required: true\n  }\n});\n\nconst dropdownOpen = ref(false);\n\nconst handleDropdownClick = (action) => {\n  if (action) {\n    action();\n  }\n  dropdownOpen.value = false;\n};\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAiEA,UAAM,eAAe,IAAI,KAAK;AAE9B,UAAM,sBAAsB,CAAC,WAAW;AACtC,UAAI,QAAQ;AACV,eAAM;AAAA,MACR;AACA,mBAAa,QAAQ;AAAA,IACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ActionButtons.vue.js","sources":["../../../../../../../src/modules/music/components/blocks/ActionButtons.vue"],"sourcesContent":["<template>\n  <div class=\"flex gap-small mn-b-medium\">\n    <template v-for=\"(button, index) in buttons\" :key=\"index\">\n      <!-- Regular button -->\n      <Button\n        v-if=\"button.type !== 'dropdown'\"\n        :class=\"['flex-child-1 radius-thin flex-center gap-thin', button.class]\"\n        @click=\"button.action\"\n      >\n        <component\n          v-if=\"button.icon\"\n          :is=\"button.icon\"\n          :fill=\"button.iconFill\"\n          class=\"i-medium\"\n        />\n        {{ button.text }}\n      </Button>\n\n      <!-- Dropdown button -->\n      <Dropdown\n        v-else\n        :label=\"{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }\"\n        v-model=\"dropdownOpen\"\n        class=\"relative\"\n      >\n        <template #trigger>\n          <Button color=\"transp\" size=\"medium\" class=\"w-3r h-3r radius-full\">\n            <IconEllipsis class=\"i-medium\" />\n          </Button>\n        </template>\n        <template #default>\n          <div class=\"dropdown-menu bg-white pd-small radius-medium shadow-big mn-t-thin\">\n            <template v-for=\"(item, idx) in button.items\" :key=\"idx\">\n              <hr v-if=\"item.separator\" class=\"mn-v-thin br-dark-transp-10\" />\n              <Button\n                v-else\n                @click=\"handleDropdownClick(item.action)\"\n                :color=\"item.color || 'transp'\"\n                size=\"small\"\n                class=\"w-100 justify-start\"\n                :class=\"item.class\"\n              >\n                {{ item.text }}\n              </Button>\n            </template>\n          </div>\n        </template>\n      </Dropdown>\n    </template>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\nimport IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';\n\nconst props = defineProps({\n  buttons: {\n    type: Array,\n    required: true\n  }\n});\n\nconst dropdownOpen = ref(false);\n\nconst handleDropdownClick = (action) => {\n  if (action) {\n    action();\n  }\n  dropdownOpen.value = false;\n};\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAiEA,UAAM,eAAe,IAAI,KAAK;AAE9B,UAAM,sBAAsB,CAAC,WAAW;AACtC,UAAI,QAAQ;AACV,eAAM;AAAA,MACR;AACA,mBAAa,QAAQ;AAAA,IACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/cards/AlbumCard.vue.js

@@ -9,14 +9,14 @@ import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js
 const _hoisted_1 = { class: "album-cover pos-relative" };
 const _hoisted_2 = {
   key: 0,
-  class: "album-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex transition-cubic-in-out"
+  class: "album-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex ease-cubic-in-out"
 };
 const _hoisted_3 = { class: "album-info pd-medium bg-light" };
 const _hoisted_4 = {
-  class: "mn-b-thin t-medium t-truncate",
+  class: "mn-b-thin fw-medium truncate",
   style: { "height": "1.50rem" }
 };
-const _hoisted_5 = { class: "t-transp t-small t-truncate" };
+const _hoisted_5 = { class: "t-transp t-small truncate" };
 const _sfc_main = {
   __name: "AlbumCard",
   props: {
@@ -66,7 +66,7 @@ const _sfc_main = {
             __props.album.totalTracks && __props.album.totalTracks > 0 ? (openBlock(), createElementBlock("div", _hoisted_2, [
               createVNode(_sfc_main$1, {
                 onClick: _cache[0] || (_cache[0] = withModifiers(($event) => playAlbum(__props.album), ["stop", "prevent"])),
-                class: "play-button i-big bg-main radius-round flex-center flex aspect-1x1",
+                class: "play-button i-big bg-main radius-extra flex-center flex aspect-1x1",
                 showLoader: false,
                 showSucces: false
               }, {
@@ -90,7 +90,7 @@ const _sfc_main = {
     };
   }
 };
-const AlbumCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7bd0bb4d"]]);
+const AlbumCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-70639460"]]);
 export {
   AlbumCard as default
 };

package/dist/martyrs/src/modules/music/components/cards/AlbumCard.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlbumCard.vue.js","sources":["../../../../../../../src/modules/music/components/cards/AlbumCard.vue"],"sourcesContent":["<!-- components/cards/AlbumCard.vue -->\n<template>\n  <router-link \n    :to=\"{ name: 'album', params: { url: album.url } }\" \n    class=\"album-card d-block radius-medium o-hidden\"\n  >\n    <div class=\"album-cover pos-relative\">\n      <Media \n        :url=\"album.coverArt || album.coverUrl || '/logo/logo-placeholder.jpg'\" \n        class=\"w-100 aspect-1x1 object-fit-cover\"\n      />\n      <div v-if=\"album.totalTracks && album.totalTracks > 0\" class=\"album-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex transition-cubic-in-out\">\n        <Button \n          @click.stop.prevent=\"playAlbum(album)\" \n          class=\"play-button i-big bg-main radius-round flex-center flex aspect-1x1\"\n          :showLoader=\"false\"\n          :showSucces=\"false\"\n        >\n          <IconPlay class=\"i-small\" fill=\"rgb(var(--white))\" />\n        </Button>\n      </div>\n    </div>\n    <div class=\"album-info pd-medium bg-light\">\n      <h3 class=\"mn-b-thin t-medium  t-truncate\" style=\"height: 1.50rem\">{{ album.title }}</h3>\n      <p class=\"t-transp t-small t-truncate\">{{ albumInfo }}</p>\n    </div>\n  </router-link>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\n\n// Import player store & albums store\nimport { actions as playerActions } from '../../store/player.js';\nimport { state as albumsState, actions as albumsActions } from '../../store/albums.js';\n\nconst props = defineProps({\n  album: {\n    type: Object,\n    required: true\n  }\n});\n\n// Computed properties\nconst albumInfo = computed(() => {\n  const releaseYear = props.album.releaseDate ? new Date(props.album.releaseDate).getFullYear() : '';\n  let artistName = 'Unknown Artist';\n  \n  // Handle artists array (model uses 'artists' not 'artist')\n  if (props.album.artists && props.album.artists.length > 0) {\n    // If populated, artists[0] will have name property\n    if (props.album.artists[0]?.name) {\n      artistName = props.album.artists.map(artist => artist.name).join(', ');\n    } else if (typeof props.album.artists[0] === 'string') {\n      // If not populated, it might be just IDs\n      artistName = 'Various Artists';\n    }\n  } else if (props.album.artist?.name) {\n    // Fallback for old data structure\n    artistName = props.album.artist.name;\n  }\n  \n  return releaseYear ? `${artistName} • ${releaseYear}` : artistName;\n});\n\n// Methods\nconst playAlbum = async (album) => {\n  // If album tracks are already loaded in state, use those\n  if (albumsState.currentAlbum && albumsState.currentAlbum._id === album._id && albumsState.currentAlbumTracks.length > 0) {\n    playerActions.setQueue(albumsState.currentAlbumTracks);\n    return;\n  }\n  \n  // Otherwise fetch tracks for this album\n  const tracks = await albumsActions.fetchAlbumTracks(album._id);\n  \n  if (tracks && tracks.length > 0) {\n    playerActions.setQueue(tracks);\n  }\n};\n</script>\n\n<style scoped>\n.album-card {\n  transition: transform 0.3s ease;\n}\n\n.album-card:hover {\n  transform: translateY(-5px);\n}\n\n.album-overlay {\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.album-card:hover .album-overlay {\n  opacity: 1;\n}\n\n.play-button {\n  transform: scale(0.8);\n  transition: transform 0.3s ease;\n}\n\n.album-card:hover .play-button {\n  transform: scale(1);\n}\n</style>"],"names":["albumsState","playerActions","albumsActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,UAAM,QAAQ;AAQd,UAAM,YAAY,SAAS,MAAM;AAC/B,YAAM,cAAc,MAAM,MAAM,cAAc,IAAI,KAAK,MAAM,MAAM,WAAW,EAAE,YAAW,IAAK;AAChG,UAAI,aAAa;AAGjB,UAAI,MAAM,MAAM,WAAW,MAAM,MAAM,QAAQ,SAAS,GAAG;AAEzD,YAAI,MAAM,MAAM,QAAQ,CAAC,GAAG,MAAM;AAChC,uBAAa,MAAM,MAAM,QAAQ,IAAI,YAAU,OAAO,IAAI,EAAE,KAAK,IAAI;AAAA,QACvE,WAAW,OAAO,MAAM,MAAM,QAAQ,CAAC,MAAM,UAAU;AAErD,uBAAa;AAAA,QACf;AAAA,MACF,WAAW,MAAM,MAAM,QAAQ,MAAM;AAEnC,qBAAa,MAAM,MAAM,OAAO;AAAA,MAClC;AAEA,aAAO,cAAc,GAAG,UAAU,MAAM,WAAW,KAAK;AAAA,IAC1D,CAAC;AAGD,UAAM,YAAY,OAAO,UAAU;AAEjC,UAAIA,MAAY,gBAAgBA,MAAY,aAAa,QAAQ,MAAM,OAAOA,MAAY,mBAAmB,SAAS,GAAG;AACvHC,gBAAc,SAASD,MAAY,kBAAkB;AACrD;AAAA,MACF;AAGA,YAAM,SAAS,MAAME,UAAc,iBAAiB,MAAM,GAAG;AAE7D,UAAI,UAAU,OAAO,SAAS,GAAG;AAC/BD,gBAAc,SAAS,MAAM;AAAA,MAC/B;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AlbumCard.vue.js","sources":["../../../../../../../src/modules/music/components/cards/AlbumCard.vue"],"sourcesContent":["<!-- components/cards/AlbumCard.vue -->\n<template>\n  <router-link \n    :to=\"{ name: 'album', params: { url: album.url } }\" \n    class=\"album-card d-block radius-medium o-hidden\"\n  >\n    <div class=\"album-cover pos-relative\">\n      <Media \n        :url=\"album.coverArt || album.coverUrl || '/logo/logo-placeholder.jpg'\" \n        class=\"w-100 aspect-1x1 object-fit-cover\"\n      />\n      <div v-if=\"album.totalTracks && album.totalTracks > 0\" class=\"album-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex ease-cubic-in-out\">\n        <Button \n          @click.stop.prevent=\"playAlbum(album)\" \n          class=\"play-button i-big bg-main radius-extra flex-center flex aspect-1x1\"\n          :showLoader=\"false\"\n          :showSucces=\"false\"\n        >\n          <IconPlay class=\"i-small\" fill=\"rgb(var(--white))\" />\n        </Button>\n      </div>\n    </div>\n    <div class=\"album-info pd-medium bg-light\">\n      <h3 class=\"mn-b-thin fw-medium  truncate\" style=\"height: 1.50rem\">{{ album.title }}</h3>\n      <p class=\"t-transp t-small truncate\">{{ albumInfo }}</p>\n    </div>\n  </router-link>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\n\n// Import player store & albums store\nimport { actions as playerActions } from '../../store/player.js';\nimport { state as albumsState, actions as albumsActions } from '../../store/albums.js';\n\nconst props = defineProps({\n  album: {\n    type: Object,\n    required: true\n  }\n});\n\n// Computed properties\nconst albumInfo = computed(() => {\n  const releaseYear = props.album.releaseDate ? new Date(props.album.releaseDate).getFullYear() : '';\n  let artistName = 'Unknown Artist';\n  \n  // Handle artists array (model uses 'artists' not 'artist')\n  if (props.album.artists && props.album.artists.length > 0) {\n    // If populated, artists[0] will have name property\n    if (props.album.artists[0]?.name) {\n      artistName = props.album.artists.map(artist => artist.name).join(', ');\n    } else if (typeof props.album.artists[0] === 'string') {\n      // If not populated, it might be just IDs\n      artistName = 'Various Artists';\n    }\n  } else if (props.album.artist?.name) {\n    // Fallback for old data structure\n    artistName = props.album.artist.name;\n  }\n  \n  return releaseYear ? `${artistName} • ${releaseYear}` : artistName;\n});\n\n// Methods\nconst playAlbum = async (album) => {\n  // If album tracks are already loaded in state, use those\n  if (albumsState.currentAlbum && albumsState.currentAlbum._id === album._id && albumsState.currentAlbumTracks.length > 0) {\n    playerActions.setQueue(albumsState.currentAlbumTracks);\n    return;\n  }\n  \n  // Otherwise fetch tracks for this album\n  const tracks = await albumsActions.fetchAlbumTracks(album._id);\n  \n  if (tracks && tracks.length > 0) {\n    playerActions.setQueue(tracks);\n  }\n};\n</script>\n\n<style scoped>\n.album-card {\n  transition: transform 0.3s ease;\n}\n\n.album-card:hover {\n  transform: translateY(-5px);\n}\n\n.album-overlay {\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.album-card:hover .album-overlay {\n  opacity: 1;\n}\n\n.play-button {\n  transform: scale(0.8);\n  transition: transform 0.3s ease;\n}\n\n.album-card:hover .play-button {\n  transform: scale(1);\n}\n</style>"],"names":["albumsState","playerActions","albumsActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,UAAM,QAAQ;AAQd,UAAM,YAAY,SAAS,MAAM;AAC/B,YAAM,cAAc,MAAM,MAAM,cAAc,IAAI,KAAK,MAAM,MAAM,WAAW,EAAE,YAAW,IAAK;AAChG,UAAI,aAAa;AAGjB,UAAI,MAAM,MAAM,WAAW,MAAM,MAAM,QAAQ,SAAS,GAAG;AAEzD,YAAI,MAAM,MAAM,QAAQ,CAAC,GAAG,MAAM;AAChC,uBAAa,MAAM,MAAM,QAAQ,IAAI,YAAU,OAAO,IAAI,EAAE,KAAK,IAAI;AAAA,QACvE,WAAW,OAAO,MAAM,MAAM,QAAQ,CAAC,MAAM,UAAU;AAErD,uBAAa;AAAA,QACf;AAAA,MACF,WAAW,MAAM,MAAM,QAAQ,MAAM;AAEnC,qBAAa,MAAM,MAAM,OAAO;AAAA,MAClC;AAEA,aAAO,cAAc,GAAG,UAAU,MAAM,WAAW,KAAK;AAAA,IAC1D,CAAC;AAGD,UAAM,YAAY,OAAO,UAAU;AAEjC,UAAIA,MAAY,gBAAgBA,MAAY,aAAa,QAAQ,MAAM,OAAOA,MAAY,mBAAmB,SAAS,GAAG;AACvHC,gBAAc,SAASD,MAAY,kBAAkB;AACrD;AAAA,MACF;AAGA,YAAM,SAAS,MAAME,UAAc,iBAAiB,MAAM,GAAG;AAE7D,UAAI,UAAU,OAAO,SAAS,GAAG;AAC/BD,gBAAc,SAAS,MAAM;AAAA,MAC/B;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/cards/ArtistCard.vue.js

@@ -11,10 +11,10 @@ const _hoisted_3 = {
 const _hoisted_4 = { class: "h3" };
 const _hoisted_5 = { class: "p-small" };
 const _hoisted_6 = { class: "pd-small" };
-const _hoisted_7 = { class: "t-medium mn-b-small t-truncate" };
+const _hoisted_7 = { class: "fw-medium mn-b-small truncate" };
 const _hoisted_8 = {
   key: 0,
-  class: "p-small t-transp t-trim"
+  class: "p-small t-transp truncate"
 };
 const _sfc_main = {
   __name: "ArtistCard",
@@ -44,7 +44,7 @@ const _sfc_main = {
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["artist-card flex flex-column radius-medium o-hidden bg-white", { "cursor-pointer hover-scale-1": __props.clickable }]),
+        class: normalizeClass(["artist-card flex flex-column radius-medium o-hidden bg-white", { "cursor-pointer hover:scale-[1.05]": __props.clickable }]),
         onClick: handleClick
       }, [
         createElementVNode("div", _hoisted_1, [
@@ -77,7 +77,7 @@ const _sfc_main = {
     };
   }
 };
-const ArtistCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-648ab17c"]]);
+const ArtistCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0400c413"]]);
 export {
   ArtistCard as default
 };

package/dist/martyrs/src/modules/music/components/cards/ArtistCard.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArtistCard.vue.js","sources":["../../../../../../../src/modules/music/components/cards/ArtistCard.vue"],"sourcesContent":["<template>\n  <div \n    class=\"artist-card flex flex-column radius-medium o-hidden bg-white\"\n    :class=\"{ 'cursor-pointer hover-scale-1': clickable }\"\n    @click=\"handleClick\"\n  >\n    <div class=\"artist-image w-100 pos-relative aspect-1x1\">\n      <img \n        v-if=\"artist.photo\" \n        :src=\"FILE_SERVER_URL + artist.photo\" \n        :alt=\"artist.name\"\n        class=\"w-100 h-100 object-fit-cover\"\n        loading=\"lazy\"\n      />\n      <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n        <span class=\"h3\">{{ artist.name ? artist.name.charAt(0) : '?' }}</span>\n      </div>\n      \n      <div \n        v-if=\"showStatus\" \n        class=\"pos-absolute pos-t-small pos-r-small pd-micro radius-medium\"\n        :class=\"{\n          'bg-second': artist.status === 'published',\n          'bg-fifth': artist.status === 'featured',\n          'bg-grey': artist.status === 'draft'\n        }\"\n      >\n        <span class=\" p-small\">{{ artist.status }}</span>\n      </div>\n    </div>\n    \n    <div class=\"pd-small\">\n      <h4 class=\"t-medium mn-b-small t-truncate\">{{ artist.name }}</h4>\n      <p v-if=\"artist.genres && artist.genres.length\" class=\"p-small t-transp t-trim\">\n        {{ artist.genres.join(', ') }}\n      </p>\n    </div>\n    \n    <slot name=\"actions\"></slot>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { useRouter } from 'vue-router';\n\nconst props = defineProps({\n  artist: {\n    type: Object,\n    required: true\n  },\n  clickable: {\n    type: Boolean,\n    default: true\n  },\n  showStatus: {\n    type: Boolean,\n    default: false\n  }\n});\n\nconst router = useRouter();\n\nconst handleClick = () => {\n  if (!props.clickable) return;\n  \n  router.push({\n    name: 'artist',\n    params: { url: props.artist.url }\n  });\n};\n</script>\n\n<style scoped>\n.artist-card {\n  border: 1px solid rgba(var(--grey), 0.2);\n  transition: transform 0.2s ease;\n}\n\n.hover-scale-1:hover {\n  transform: scale(1.02);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,UAAM,QAAQ;AAed,UAAM,SAAS,UAAS;AAExB,UAAM,cAAc,MAAM;AACxB,UAAI,CAAC,MAAM,UAAW;AAEtB,aAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN,QAAQ,EAAE,KAAK,MAAM,OAAO,IAAG;AAAA,MACnC,CAAG;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ArtistCard.vue.js","sources":["../../../../../../../src/modules/music/components/cards/ArtistCard.vue"],"sourcesContent":["<template>\n  <div \n    class=\"artist-card flex flex-column radius-medium o-hidden bg-white\"\n    :class=\"{ 'cursor-pointer hover:scale-[1.05]': clickable }\"\n    @click=\"handleClick\"\n  >\n    <div class=\"artist-image w-100 pos-relative aspect-1x1\">\n      <img \n        v-if=\"artist.photo\" \n        :src=\"FILE_SERVER_URL + artist.photo\" \n        :alt=\"artist.name\"\n        class=\"w-100 h-100 object-fit-cover\"\n        loading=\"lazy\"\n      />\n      <div v-else class=\"w-100 h-100 bg-light flex-center flex\">\n        <span class=\"h3\">{{ artist.name ? artist.name.charAt(0) : '?' }}</span>\n      </div>\n      \n      <div \n        v-if=\"showStatus\" \n        class=\"pos-absolute pos-t-small pos-r-small pd-micro radius-medium\"\n        :class=\"{\n          'bg-second': artist.status === 'published',\n          'bg-fifth': artist.status === 'featured',\n          'bg-grey': artist.status === 'draft'\n        }\"\n      >\n        <span class=\" p-small\">{{ artist.status }}</span>\n      </div>\n    </div>\n    \n    <div class=\"pd-small\">\n      <h4 class=\"fw-medium mn-b-small truncate\">{{ artist.name }}</h4>\n      <p v-if=\"artist.genres && artist.genres.length\" class=\"p-small t-transp truncate\">\n        {{ artist.genres.join(', ') }}\n      </p>\n    </div>\n    \n    <slot name=\"actions\"></slot>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { useRouter } from 'vue-router';\n\nconst props = defineProps({\n  artist: {\n    type: Object,\n    required: true\n  },\n  clickable: {\n    type: Boolean,\n    default: true\n  },\n  showStatus: {\n    type: Boolean,\n    default: false\n  }\n});\n\nconst router = useRouter();\n\nconst handleClick = () => {\n  if (!props.clickable) return;\n  \n  router.push({\n    name: 'artist',\n    params: { url: props.artist.url }\n  });\n};\n</script>\n\n<style scoped>\n.artist-card {\n  border: 1px solid rgba(var(--grey), 0.2);\n  transition: transform 0.2s ease;\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,UAAM,QAAQ;AAed,UAAM,SAAS,UAAS;AAExB,UAAM,cAAc,MAAM;AACxB,UAAI,CAAC,MAAM,UAAW;AAEtB,aAAO,KAAK;AAAA,QACV,MAAM;AAAA,QACN,QAAQ,EAAE,KAAK,MAAM,OAAO,IAAG;AAAA,MACnC,CAAG;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/cards/ArtistCardSmall.vue.js

@@ -47,7 +47,7 @@ const _sfc_main = {
       const _component_router_link = resolveComponent("router-link");
       return openBlock(), createBlock(_component_router_link, {
         to: __props.artist.url ? { name: "artist", params: { url: __props.artist.url } } : __props.artist.to,
-        class: "artist-card bg-light pd-medium radius-medium flex flex-v-center flex-justify-between gap-thin flex-1 hover-opacity"
+        class: "artist-card bg-light pd-medium radius-medium flex flex-v-center flex-justify-between gap-thin flex-child-1 hover:opacity-70"
       }, {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1, [
@@ -64,7 +64,7 @@ const _sfc_main = {
                 createElementVNode("span", _hoisted_5, toDisplayString(__props.artist.name), 1),
                 __props.artist.isVerified ? (openBlock(), createBlock(_sfc_main$1, {
                   key: 0,
-                  class: "w-1r h-1r t-primary"
+                  class: "w-1r h-1r t-main"
                 })) : createCommentVNode("", true)
               ]),
               createElementVNode("span", _hoisted_6, toDisplayString(__props.artistType), 1)
@@ -88,7 +88,7 @@ const _sfc_main = {
     };
   }
 };
-const ArtistCardSmall = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-64fdf510"]]);
+const ArtistCardSmall = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3ff14280"]]);
 export {
   ArtistCardSmall as default
 };

package/dist/martyrs/src/modules/music/components/cards/ArtistCardSmall.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArtistCardSmall.vue.js","sources":["../../../../../../../src/modules/music/components/cards/ArtistCardSmall.vue"],"sourcesContent":["<!-- components/cards/ArtistCard.vue -->\n<template>\n  <router-link\n   :to=\"artist.url ? { name: 'artist', params: { url: artist.url } } : artist.to\"\n    class=\"artist-card bg-light pd-medium radius-medium flex flex-v-center flex-justify-between gap-thin flex-1 hover-opacity\"\n  >\n    <div\n     class=\"flex flex-nowrap flex-v-center gap-thin\"\n    >\n      <div class=\"artist-avatar\">\n        <Media \n          v-if=\"artist.photoUrl\"\n          :url=\"artist.photoUrl\"\n          :alt=\"artist.name\"\n          class=\"w-4r h-4r radius-full object-fit-cover\"\n        />\n        <div v-else class=\"w-4r h-4r flex flex center radius-extra radius-full bg-main flex-center\">\n          {{ artist.name.charAt(0) }}\n        </div>\n      </div>\n\n      <div>\n        <div class=\"flex items-center gap-thin\">\n          <span class=\"mn-b-thin\">{{ artist.name }}</span>\n          <IconVerified v-if=\"artist.isVerified\" class=\"w-1r h-1r t-primary\" />\n        </div>\n        <span class=\"t-small t-transp\">{{ artistType }}</span>\n      </div>\n    </div>\n\n    <Button \n      v-if=\"showFollowButton\"\n      @click=\"handleFollowClick\"\n      :color=\"isFollowing ? 'primary' : 'transp'\"\n      size=\"small\"\n      class=\"bg-main\"\n    >\n      {{ isFollowing ? 'Following' : 'Follow' }}\n    </Button>\n  </router-link>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\n\nconst props = defineProps({\n  artist: {\n    type: Object,\n    required: true,\n    validator: (value) => {\n      return value._id && value.name && value.url;\n    }\n  },\n  isFollowing: {\n    type: Boolean,\n    default: false\n  },\n  showFollowButton: {\n    type: Boolean,\n    default: true\n  },\n  artistType: {\n    type: String,\n    default: 'Artist'\n  }\n});\n\nconst emit = defineEmits(['toggle-follow']);\n\nconst handleFollowClick = () => {\n  emit('toggle-follow', props.artist._id);\n};\n</script>\n\n<style scoped>\n.artist-card {\n  transition: all 0.2s ease;\n}\n\n.artist-card:hover {\n  transform: translateY(-5px);\n}\n\n.artist-avatar img {\n  transition: transform 0.2s ease;\n}\n\n.artist-card:hover .artist-avatar img {\n  transform: scale(1.05);\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,UAAM,QAAQ;AAsBd,UAAM,OAAO;AAEb,UAAM,oBAAoB,MAAM;AAC9B,WAAK,iBAAiB,MAAM,OAAO,GAAG;AAAA,IACxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ArtistCardSmall.vue.js","sources":["../../../../../../../src/modules/music/components/cards/ArtistCardSmall.vue"],"sourcesContent":["<!-- components/cards/ArtistCard.vue -->\n<template>\n  <router-link\n   :to=\"artist.url ? { name: 'artist', params: { url: artist.url } } : artist.to\"\n    class=\"artist-card bg-light pd-medium radius-medium flex flex-v-center flex-justify-between gap-thin flex-child-1 hover:opacity-70\"\n  >\n    <div\n     class=\"flex flex-nowrap flex-v-center gap-thin\"\n    >\n      <div class=\"artist-avatar\">\n        <Media \n          v-if=\"artist.photoUrl\"\n          :url=\"artist.photoUrl\"\n          :alt=\"artist.name\"\n          class=\"w-4r h-4r radius-full object-fit-cover\"\n        />\n        <div v-else class=\"w-4r h-4r flex flex center radius-extra radius-full bg-main flex-center\">\n          {{ artist.name.charAt(0) }}\n        </div>\n      </div>\n\n      <div>\n        <div class=\"flex items-center gap-thin\">\n          <span class=\"mn-b-thin\">{{ artist.name }}</span>\n          <IconVerified v-if=\"artist.isVerified\" class=\"w-1r h-1r t-main\" />\n        </div>\n        <span class=\"t-small t-transp\">{{ artistType }}</span>\n      </div>\n    </div>\n\n    <Button \n      v-if=\"showFollowButton\"\n      @click=\"handleFollowClick\"\n      :color=\"isFollowing ? 'primary' : 'transp'\"\n      size=\"small\"\n      class=\"bg-main\"\n    >\n      {{ isFollowing ? 'Following' : 'Follow' }}\n    </Button>\n  </router-link>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\n\nconst props = defineProps({\n  artist: {\n    type: Object,\n    required: true,\n    validator: (value) => {\n      return value._id && value.name && value.url;\n    }\n  },\n  isFollowing: {\n    type: Boolean,\n    default: false\n  },\n  showFollowButton: {\n    type: Boolean,\n    default: true\n  },\n  artistType: {\n    type: String,\n    default: 'Artist'\n  }\n});\n\nconst emit = defineEmits(['toggle-follow']);\n\nconst handleFollowClick = () => {\n  emit('toggle-follow', props.artist._id);\n};\n</script>\n\n<style scoped>\n.artist-card {\n  transition: all 0.2s ease;\n}\n\n.artist-card:hover {\n  transform: translateY(-5px);\n}\n\n.artist-avatar img {\n  transition: transform 0.2s ease;\n}\n\n.artist-card:hover .artist-avatar img {\n  transform: scale(1.05);\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,UAAM,QAAQ;AAsBd,UAAM,OAAO;AAEb,UAAM,oBAAoB,MAAM;AAC9B,WAAK,iBAAiB,MAAM,OAAO,GAAG;AAAA,IACxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/cards/PlaylistCard.vue.js

@@ -9,11 +9,11 @@ import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js
 const _hoisted_1 = { class: "playlist-cover pos-relative" };
 const _hoisted_2 = {
   key: 0,
-  class: "playlist-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex transition-cubic-in-out"
+  class: "playlist-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex ease-cubic-in-out"
 };
 const _hoisted_3 = { class: "playlist-info pd-small bg-light" };
-const _hoisted_4 = { class: "t-medium mn-b-small t-truncate" };
-const _hoisted_5 = { class: "t-transp t-small t-truncate" };
+const _hoisted_4 = { class: "fw-medium mn-b-small truncate" };
+const _hoisted_5 = { class: "t-transp t-small truncate" };
 const _sfc_main = {
   __name: "PlaylistCard",
   props: {
@@ -69,7 +69,7 @@ const _sfc_main = {
             __props.playlist.tracks && __props.playlist.tracks.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2, [
               createVNode(_sfc_main$1, {
                 onClick: _cache[0] || (_cache[0] = withModifiers(($event) => playPlaylist(__props.playlist), ["stop", "prevent"])),
-                class: "play-button bg-main radius-round flex-center flex aspect-1x1",
+                class: "play-button bg-main radius-extra flex-center flex aspect-1x1",
                 showLoader: false,
                 showSucces: false
               }, {
@@ -93,7 +93,7 @@ const _sfc_main = {
     };
   }
 };
-const PlaylistCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-be2a71af"]]);
+const PlaylistCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f2da5559"]]);
 export {
   PlaylistCard as default
 };

package/dist/martyrs/src/modules/music/components/cards/PlaylistCard.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlaylistCard.vue.js","sources":["../../../../../../../src/modules/music/components/cards/PlaylistCard.vue"],"sourcesContent":["<!-- components/cards/PlaylistCard.vue -->\n<template>\n  <router-link \n    :to=\"{ name: 'playlist', params: { url: playlist.url } }\" \n    class=\"playlist-card d-block radius-small o-hidden\"\n  >\n    <div class=\"playlist-cover pos-relative\">\n      <Media \n        :url=\"playlist.coverUrl || '/logo/logo-placeholder.jpg'\" \n        class=\"w-100 aspect-1x1 object-fit-cover\"\n      />\n      <div v-if=\"playlist.tracks && playlist.tracks.length > 0\" class=\"playlist-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex transition-cubic-in-out\">\n        <Button \n          @click.stop.prevent=\"playPlaylist(playlist)\" \n          class=\"play-button bg-main radius-round flex-center flex aspect-1x1\"\n          :showLoader=\"false\"\n          :showSucces=\"false\"\n        >\n          <IconPlay class=\"i-small\" fill=\"rgb(var(--black))\" />\n        </Button>\n      </div>\n    </div>\n    <div class=\"playlist-info pd-small bg-light\">\n      <h3 class=\" t-medium mn-b-small t-truncate\">{{ playlist.title }}</h3>\n      <p class=\"t-transp t-small t-truncate\">{{ playlistInfo }}</p>\n    </div>\n  </router-link>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\n\n// Import player store\nimport { actions as playerActions } from '../../store/player.js';\nimport { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';\n\nconst props = defineProps({\n  playlist: {\n    type: Object,\n    required: true\n  }\n});\n\n// Computed properties\nconst playlistInfo = computed(() => {\n  const trackCount = props.playlist.tracks?.length || 0;\n  let creatorName = 'Unknown';\n  \n  if (props.playlist.creator?.target?.profile?.name) {\n    creatorName = props.playlist.creator.target.profile.name;\n  } else if (props.playlist.creator?.target?.name) {\n    creatorName = props.playlist.creator.target.name;\n  }\n  \n  return `${creatorName} • ${trackCount} ${trackCount === 1 ? 'track' : 'tracks'}`;\n});\n\n// Methods\nconst playPlaylist = async (playlist) => {\n  if (!playlist || !playlist.url) {\n    console.warn('Playlist or URL not available');\n    return;\n  }\n  \n  try {\n    console.log('Loading playlist:', playlist.url);\n    \n    // Fetch full playlist data with populated tracks\n    await playlistsActions.fetchPlaylistByUrl(playlist.url);\n    \n    // Get tracks from store after loading\n    const tracks = playlistsState.currentPlaylistTracks || [];\n    \n    console.log('Loaded tracks:', tracks);\n    \n    if (tracks.length > 0) {\n      console.log('Setting queue with tracks:', tracks);\n      playerActions.setQueue(tracks);\n    } else {\n      console.warn('No tracks found in playlist after loading');\n    }\n  } catch (error) {\n    console.error('Error loading playlist for playback:', error);\n  }\n};\n</script>\n\n<style scoped>\n.playlist-card {\n  transition: transform 0.3s ease;\n}\n\n.playlist-card:hover {\n  transform: translateY(-5px);\n}\n\n.playlist-overlay {\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.playlist-card:hover .playlist-overlay {\n  opacity: 1;\n}\n\n.play-button {\n  width: 48px;\n  height: 48px;\n  transform: scale(0.8);\n  transition: transform 0.3s ease;\n}\n\n.playlist-card:hover .play-button {\n  transform: scale(1);\n}\n</style>"],"names":["playlistsActions","playlistsState","playerActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,UAAM,QAAQ;AAQd,UAAM,eAAe,SAAS,MAAM;AAClC,YAAM,aAAa,MAAM,SAAS,QAAQ,UAAU;AACpD,UAAI,cAAc;AAElB,UAAI,MAAM,SAAS,SAAS,QAAQ,SAAS,MAAM;AACjD,sBAAc,MAAM,SAAS,QAAQ,OAAO,QAAQ;AAAA,MACtD,WAAW,MAAM,SAAS,SAAS,QAAQ,MAAM;AAC/C,sBAAc,MAAM,SAAS,QAAQ,OAAO;AAAA,MAC9C;AAEA,aAAO,GAAG,WAAW,MAAM,UAAU,IAAI,eAAe,IAAI,UAAU,QAAQ;AAAA,IAChF,CAAC;AAGD,UAAM,eAAe,OAAO,aAAa;AACvC,UAAI,CAAC,YAAY,CAAC,SAAS,KAAK;AAC9B,gBAAQ,KAAK,+BAA+B;AAC5C;AAAA,MACF;AAEA,UAAI;AACF,gBAAQ,IAAI,qBAAqB,SAAS,GAAG;AAG7C,cAAMA,QAAiB,mBAAmB,SAAS,GAAG;AAGtD,cAAM,SAASC,MAAe,yBAAyB,CAAA;AAEvD,gBAAQ,IAAI,kBAAkB,MAAM;AAEpC,YAAI,OAAO,SAAS,GAAG;AACrB,kBAAQ,IAAI,8BAA8B,MAAM;AAChDC,oBAAc,SAAS,MAAM;AAAA,QAC/B,OAAO;AACL,kBAAQ,KAAK,2CAA2C;AAAA,QAC1D;AAAA,MACF,SAAS,OAAO;AACd,gBAAQ,MAAM,wCAAwC,KAAK;AAAA,MAC7D;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlaylistCard.vue.js","sources":["../../../../../../../src/modules/music/components/cards/PlaylistCard.vue"],"sourcesContent":["<!-- components/cards/PlaylistCard.vue -->\n<template>\n  <router-link \n    :to=\"{ name: 'playlist', params: { url: playlist.url } }\" \n    class=\"playlist-card d-block radius-small o-hidden\"\n  >\n    <div class=\"playlist-cover pos-relative\">\n      <Media \n        :url=\"playlist.coverUrl || '/logo/logo-placeholder.jpg'\" \n        class=\"w-100 aspect-1x1 object-fit-cover\"\n      />\n      <div v-if=\"playlist.tracks && playlist.tracks.length > 0\" class=\"playlist-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex ease-cubic-in-out\">\n        <Button \n          @click.stop.prevent=\"playPlaylist(playlist)\" \n          class=\"play-button bg-main radius-extra flex-center flex aspect-1x1\"\n          :showLoader=\"false\"\n          :showSucces=\"false\"\n        >\n          <IconPlay class=\"i-small\" fill=\"rgb(var(--black))\" />\n        </Button>\n      </div>\n    </div>\n    <div class=\"playlist-info pd-small bg-light\">\n      <h3 class=\" fw-medium mn-b-small truncate\">{{ playlist.title }}</h3>\n      <p class=\"t-transp t-small truncate\">{{ playlistInfo }}</p>\n    </div>\n  </router-link>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\n\n// Import player store\nimport { actions as playerActions } from '../../store/player.js';\nimport { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';\n\nconst props = defineProps({\n  playlist: {\n    type: Object,\n    required: true\n  }\n});\n\n// Computed properties\nconst playlistInfo = computed(() => {\n  const trackCount = props.playlist.tracks?.length || 0;\n  let creatorName = 'Unknown';\n  \n  if (props.playlist.creator?.target?.profile?.name) {\n    creatorName = props.playlist.creator.target.profile.name;\n  } else if (props.playlist.creator?.target?.name) {\n    creatorName = props.playlist.creator.target.name;\n  }\n  \n  return `${creatorName} • ${trackCount} ${trackCount === 1 ? 'track' : 'tracks'}`;\n});\n\n// Methods\nconst playPlaylist = async (playlist) => {\n  if (!playlist || !playlist.url) {\n    console.warn('Playlist or URL not available');\n    return;\n  }\n  \n  try {\n    console.log('Loading playlist:', playlist.url);\n    \n    // Fetch full playlist data with populated tracks\n    await playlistsActions.fetchPlaylistByUrl(playlist.url);\n    \n    // Get tracks from store after loading\n    const tracks = playlistsState.currentPlaylistTracks || [];\n    \n    console.log('Loaded tracks:', tracks);\n    \n    if (tracks.length > 0) {\n      console.log('Setting queue with tracks:', tracks);\n      playerActions.setQueue(tracks);\n    } else {\n      console.warn('No tracks found in playlist after loading');\n    }\n  } catch (error) {\n    console.error('Error loading playlist for playback:', error);\n  }\n};\n</script>\n\n<style scoped>\n.playlist-card {\n  transition: transform 0.3s ease;\n}\n\n.playlist-card:hover {\n  transform: translateY(-5px);\n}\n\n.playlist-overlay {\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.playlist-card:hover .playlist-overlay {\n  opacity: 1;\n}\n\n.play-button {\n  width: 48px;\n  height: 48px;\n  transform: scale(0.8);\n  transition: transform 0.3s ease;\n}\n\n.playlist-card:hover .play-button {\n  transform: scale(1);\n}\n</style>"],"names":["playlistsActions","playlistsState","playerActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,UAAM,QAAQ;AAQd,UAAM,eAAe,SAAS,MAAM;AAClC,YAAM,aAAa,MAAM,SAAS,QAAQ,UAAU;AACpD,UAAI,cAAc;AAElB,UAAI,MAAM,SAAS,SAAS,QAAQ,SAAS,MAAM;AACjD,sBAAc,MAAM,SAAS,QAAQ,OAAO,QAAQ;AAAA,MACtD,WAAW,MAAM,SAAS,SAAS,QAAQ,MAAM;AAC/C,sBAAc,MAAM,SAAS,QAAQ,OAAO;AAAA,MAC9C;AAEA,aAAO,GAAG,WAAW,MAAM,UAAU,IAAI,eAAe,IAAI,UAAU,QAAQ;AAAA,IAChF,CAAC;AAGD,UAAM,eAAe,OAAO,aAAa;AACvC,UAAI,CAAC,YAAY,CAAC,SAAS,KAAK;AAC9B,gBAAQ,KAAK,+BAA+B;AAC5C;AAAA,MACF;AAEA,UAAI;AACF,gBAAQ,IAAI,qBAAqB,SAAS,GAAG;AAG7C,cAAMA,QAAiB,mBAAmB,SAAS,GAAG;AAGtD,cAAM,SAASC,MAAe,yBAAyB,CAAA;AAEvD,gBAAQ,IAAI,kBAAkB,MAAM;AAEpC,YAAI,OAAO,SAAS,GAAG;AACrB,kBAAQ,IAAI,8BAA8B,MAAM;AAChDC,oBAAc,SAAS,MAAM;AAAA,QAC/B,OAAO;AACL,kBAAQ,KAAK,2CAA2C;AAAA,QAC1D;AAAA,MACF,SAAS,OAAO;AACd,gBAAQ,MAAM,wCAAwC,KAAK;AAAA,MAC7D;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/cards/TrackListCard.vue.js

@@ -19,7 +19,7 @@ const _hoisted_6 = { key: 1 };
 const _hoisted_7 = { key: 1 };
 const _hoisted_8 = {
   key: 0,
-  class: "track-album w-15r mobile:w-0 mobile:hidden t-transp t-truncate"
+  class: "track-album w-15r mobile:w-0 mobile:hidden t-transp truncate"
 };
 const _hoisted_9 = { key: 1 };
 const _hoisted_10 = { class: "track-duration w-5r t-right t-transp" };
@@ -72,7 +72,7 @@ const _sfc_main = {
     return (_ctx, _cache) => {
       const _component_router_link = resolveComponent("router-link");
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["track-item pd-small hover-bg-white-transp-25 flex-v-center flex cursor-pointer", { "bg-main-transp-10": isPlaying(__props.track) }]),
+        class: normalizeClass(["track-item pd-small hover:bg-white-transp-25 flex-v-center flex cursor-pointer", { "bg-main-transp-10": isPlaying(__props.track) }]),
         onClick: _cache[7] || (_cache[7] = ($event) => playTrack(__props.track)),
         onDblclick: _cache[8] || (_cache[8] = ($event) => playTrack(__props.track, true)),
         onMouseenter: _cache[9] || (_cache[9] = ($event) => hoveredIndex.value = props.index),
@@ -125,7 +125,7 @@ const _sfc_main = {
               __props.track.url ? (openBlock(), createBlock(_component_router_link, {
                 key: 0,
                 to: "/music/tracks/" + __props.track.url,
-                class: normalizeClass(["hover-t-main hover-t-underline", { "t-main": isPlaying(__props.track) }]),
+                class: normalizeClass(["hover:t-main hover:underline", { "t-main": isPlaying(__props.track) }]),
                 onClick: _cache[4] || (_cache[4] = withModifiers(() => {
                 }, ["stop"]))
               }, {
@@ -141,7 +141,7 @@ const _sfc_main = {
               __props.track.artist && __props.track.artist._id ? (openBlock(), createBlock(_component_router_link, {
                 key: 0,
                 to: "/music/artists/" + __props.track.artist.url,
-                class: "t-transp hover-t-underline",
+                class: "t-transp hover:underline",
                 onClick: _cache[5] || (_cache[5] = withModifiers(() => {
                 }, ["stop"]))
               }, {
@@ -157,7 +157,7 @@ const _sfc_main = {
           __props.track.album && __props.track.album._id ? (openBlock(), createBlock(_component_router_link, {
             key: 0,
             to: "/music/albums/" + __props.track.album.url,
-            class: "t-transp hover-t-underline",
+            class: "t-transp hover:underline",
             onClick: _cache[6] || (_cache[6] = withModifiers(() => {
             }, ["stop"]))
           }, {

package/dist/martyrs/src/modules/music/components/cards/TrackListCard.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrackListCard.vue.js","sources":["../../../../../../../src/modules/music/components/cards/TrackListCard.vue"],"sourcesContent":["<!-- components/cards/TrackListCard.vue -->\n<template>\n  <div \n    class=\"track-item pd-small hover-bg-white-transp-25 flex-v-center flex cursor-pointer\"\n    :class=\"{'bg-main-transp-10': isPlaying(track)}\"\n    @click=\"playTrack(track)\"\n    @dblclick=\"playTrack(track, true)\"\n    @mouseenter=\"hoveredIndex = props.index\"\n    @mouseleave=\"hoveredIndex = -1\"\n  >\n    <div class=\"track-number w-3r t-center pos-relative\">\n      <span v-if=\"!isPlaying(track) && hoveredIndex !== props.index\" class=\"t-transp\">{{ props.index + 1 }}</span>\n      <Button \n        v-else-if=\"!isPlaying(track) && hoveredIndex === props.index\"\n        @click.stop=\"playTrack(track)\"\n        class=\"bg-main  pd-thin\"\n        :showLoader=\"false\"\n        :showSucces=\"false\"\n      >\n        <IconPlay @click.stop=\"playTrack(track)\" class=\"i-small\" fill=\"rgb(var(--white))\"/>\n      </Button>\n      <Button \n        v-else\n        @click.stop=\"pauseTrack()\"\n        class=\"bg-main pd-thin\"\n        :showLoader=\"false\"\n        :showSucces=\"false\"\n      >\n        <IconPause @click.stop=\"pauseTrack()\" class=\"i-small\" fill=\"rgb(var(--white))\"/>\n      </Button>\n    </div>\n    \n    <div class=\"track-title flex-child-1 flex flex-v-center\">\n      <div v-if=\"showCover\" class=\"track-cover mn-r-small\">\n        <Media \n          :url=\"track.coverUrl || (track.album && track.album.coverUrl) || '/logo/logo-placeholder.jpg'\" \n          class=\"w-3r h-3r object-fit-cover o-hidden radius-small\"\n        />\n      </div>\n      \n      <div class=\"track-info\">\n        <div class=\"track-name \" :class=\"{'t-main': isPlaying(track)}\">\n          <router-link\n            v-if=\"track.url\"\n            :to=\"'/music/tracks/' + track.url\"\n            class=\"hover-t-main hover-t-underline\"\n            :class=\"{'t-main': isPlaying(track)}\"\n            @click.stop\n          >\n            {{ track.title }}\n          </router-link>\n          <span v-else>{{ track.title }}</span>\n        </div>\n        <div :class=\"{'t-main': isPlaying(track)}\" class=\"track-artist t-transp t-small\">\n          <router-link\n            v-if=\"track.artist && track.artist._id\"\n            :to=\"'/music/artists/' + track.artist.url\"\n            class=\"t-transp hover-t-underline\"\n            @click.stop\n          >\n            {{ getArtistName(track) }}\n          </router-link>\n          <span v-else>{{ getArtistName(track) }}</span>\n        </div>\n      </div>\n    </div>\n    \n    <div v-if=\"showAlbum\" class=\"track-album  w-15r mobile:w-0 mobile:hidden t-transp t-truncate\">\n      <router-link\n        v-if=\"track.album && track.album._id\"\n        :to=\"'/music/albums/' + track.album.url\"\n        class=\"t-transp hover-t-underline\"\n        @click.stop\n      >\n        {{ track.album.title }}\n      </router-link>\n      <span v-else>{{ track.album?.title || 'Single' }}</span>\n    </div>\n    \n    <div class=\"track-duration w-5r t-right t-transp\">{{ formatDuration(track.duration) }}</div>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconPause from '@martyrs/src/modules/icons/navigation/IconPause.vue';\n\n// Import player store\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\n\n// Props\nconst props = defineProps({\n  track: {\n    type: Object,\n    required: true\n  },\n  index: {\n    type: Number,\n    default: 0\n  },\n  showCover: {\n    type: Boolean,\n    default: true\n  },\n  showAlbum: {\n    type: Boolean,\n    default: true\n  }\n});\n\n// State\nconst hoveredIndex = ref(-1);\n\n// Methods\nconst isPlaying = (track) => {\n  return playerState.currentTrack && playerState.currentTrack._id === track._id && playerState.isPlaying;\n};\n\nconst playTrack = (track, force = false) => {\n  if (isPlaying(track) && !force) {\n    playerActions.togglePlay();\n  } else {\n    playerActions.playTrack(track);\n  }\n};\n\nconst pauseTrack = () => {\n  playerActions.togglePlay();\n};\n\nconst getArtistName = (track) => {\n  if (!track || !track.artist) return 'Unknown Artist';\n  return typeof track.artist === 'object' ? track.artist.name : 'Unknown Artist';\n};\n\nconst formatDuration = (duration) => {\n  if (!duration) return '--:--';\n  \n  const minutes = Math.floor(duration / 60);\n  const seconds = Math.floor(duration % 60);\n  return `${minutes}:${seconds.toString().padStart(2, '0')}`;\n};\n</script>"],"names":["playerState","playerActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,UAAM,QAAQ;AAoBd,UAAM,eAAe,IAAI,EAAE;AAG3B,UAAM,YAAY,CAAC,UAAU;AAC3B,aAAOA,MAAY,gBAAgBA,MAAY,aAAa,QAAQ,MAAM,OAAOA,MAAY;AAAA,IAC/F;AAEA,UAAM,YAAY,CAAC,OAAO,QAAQ,UAAU;AAC1C,UAAI,UAAU,KAAK,KAAK,CAAC,OAAO;AAC9BC,gBAAc,WAAU;AAAA,MAC1B,OAAO;AACLA,gBAAc,UAAU,KAAK;AAAA,MAC/B;AAAA,IACF;AAEA,UAAM,aAAa,MAAM;AACvBA,cAAc,WAAU;AAAA,IAC1B;AAEA,UAAM,gBAAgB,CAAC,UAAU;AAC/B,UAAI,CAAC,SAAS,CAAC,MAAM,OAAQ,QAAO;AACpC,aAAO,OAAO,MAAM,WAAW,WAAW,MAAM,OAAO,OAAO;AAAA,IAChE;AAEA,UAAM,iBAAiB,CAAC,aAAa;AACnC,UAAI,CAAC,SAAU,QAAO;AAEtB,YAAM,UAAU,KAAK,MAAM,WAAW,EAAE;AACxC,YAAM,UAAU,KAAK,MAAM,WAAW,EAAE;AACxC,aAAO,GAAG,OAAO,IAAI,QAAQ,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC;AAAA,IAC1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TrackListCard.vue.js","sources":["../../../../../../../src/modules/music/components/cards/TrackListCard.vue"],"sourcesContent":["<!-- components/cards/TrackListCard.vue -->\n<template>\n  <div \n    class=\"track-item pd-small hover:bg-white-transp-25 flex-v-center flex cursor-pointer\"\n    :class=\"{'bg-main-transp-10': isPlaying(track)}\"\n    @click=\"playTrack(track)\"\n    @dblclick=\"playTrack(track, true)\"\n    @mouseenter=\"hoveredIndex = props.index\"\n    @mouseleave=\"hoveredIndex = -1\"\n  >\n    <div class=\"track-number w-3r t-center pos-relative\">\n      <span v-if=\"!isPlaying(track) && hoveredIndex !== props.index\" class=\"t-transp\">{{ props.index + 1 }}</span>\n      <Button \n        v-else-if=\"!isPlaying(track) && hoveredIndex === props.index\"\n        @click.stop=\"playTrack(track)\"\n        class=\"bg-main  pd-thin\"\n        :showLoader=\"false\"\n        :showSucces=\"false\"\n      >\n        <IconPlay @click.stop=\"playTrack(track)\" class=\"i-small\" fill=\"rgb(var(--white))\"/>\n      </Button>\n      <Button \n        v-else\n        @click.stop=\"pauseTrack()\"\n        class=\"bg-main pd-thin\"\n        :showLoader=\"false\"\n        :showSucces=\"false\"\n      >\n        <IconPause @click.stop=\"pauseTrack()\" class=\"i-small\" fill=\"rgb(var(--white))\"/>\n      </Button>\n    </div>\n    \n    <div class=\"track-title flex-child-1 flex flex-v-center\">\n      <div v-if=\"showCover\" class=\"track-cover mn-r-small\">\n        <Media \n          :url=\"track.coverUrl || (track.album && track.album.coverUrl) || '/logo/logo-placeholder.jpg'\" \n          class=\"w-3r h-3r object-fit-cover o-hidden radius-small\"\n        />\n      </div>\n      \n      <div class=\"track-info\">\n        <div class=\"track-name \" :class=\"{'t-main': isPlaying(track)}\">\n          <router-link\n            v-if=\"track.url\"\n            :to=\"'/music/tracks/' + track.url\"\n            class=\"hover:t-main hover:underline\"\n            :class=\"{'t-main': isPlaying(track)}\"\n            @click.stop\n          >\n            {{ track.title }}\n          </router-link>\n          <span v-else>{{ track.title }}</span>\n        </div>\n        <div :class=\"{'t-main': isPlaying(track)}\" class=\"track-artist t-transp t-small\">\n          <router-link\n            v-if=\"track.artist && track.artist._id\"\n            :to=\"'/music/artists/' + track.artist.url\"\n            class=\"t-transp hover:underline\"\n            @click.stop\n          >\n            {{ getArtistName(track) }}\n          </router-link>\n          <span v-else>{{ getArtistName(track) }}</span>\n        </div>\n      </div>\n    </div>\n    \n    <div v-if=\"showAlbum\" class=\"track-album  w-15r mobile:w-0 mobile:hidden t-transp truncate\">\n      <router-link\n        v-if=\"track.album && track.album._id\"\n        :to=\"'/music/albums/' + track.album.url\"\n        class=\"t-transp hover:underline\"\n        @click.stop\n      >\n        {{ track.album.title }}\n      </router-link>\n      <span v-else>{{ track.album?.title || 'Single' }}</span>\n    </div>\n    \n    <div class=\"track-duration w-5r t-right t-transp\">{{ formatDuration(track.duration) }}</div>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconPause from '@martyrs/src/modules/icons/navigation/IconPause.vue';\n\n// Import player store\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\n\n// Props\nconst props = defineProps({\n  track: {\n    type: Object,\n    required: true\n  },\n  index: {\n    type: Number,\n    default: 0\n  },\n  showCover: {\n    type: Boolean,\n    default: true\n  },\n  showAlbum: {\n    type: Boolean,\n    default: true\n  }\n});\n\n// State\nconst hoveredIndex = ref(-1);\n\n// Methods\nconst isPlaying = (track) => {\n  return playerState.currentTrack && playerState.currentTrack._id === track._id && playerState.isPlaying;\n};\n\nconst playTrack = (track, force = false) => {\n  if (isPlaying(track) && !force) {\n    playerActions.togglePlay();\n  } else {\n    playerActions.playTrack(track);\n  }\n};\n\nconst pauseTrack = () => {\n  playerActions.togglePlay();\n};\n\nconst getArtistName = (track) => {\n  if (!track || !track.artist) return 'Unknown Artist';\n  return typeof track.artist === 'object' ? track.artist.name : 'Unknown Artist';\n};\n\nconst formatDuration = (duration) => {\n  if (!duration) return '--:--';\n  \n  const minutes = Math.floor(duration / 60);\n  const seconds = Math.floor(duration % 60);\n  return `${minutes}:${seconds.toString().padStart(2, '0')}`;\n};\n</script>"],"names":["playerState","playerActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,UAAM,QAAQ;AAoBd,UAAM,eAAe,IAAI,EAAE;AAG3B,UAAM,YAAY,CAAC,UAAU;AAC3B,aAAOA,MAAY,gBAAgBA,MAAY,aAAa,QAAQ,MAAM,OAAOA,MAAY;AAAA,IAC/F;AAEA,UAAM,YAAY,CAAC,OAAO,QAAQ,UAAU;AAC1C,UAAI,UAAU,KAAK,KAAK,CAAC,OAAO;AAC9BC,gBAAc,WAAU;AAAA,MAC1B,OAAO;AACLA,gBAAc,UAAU,KAAK;AAAA,MAC/B;AAAA,IACF;AAEA,UAAM,aAAa,MAAM;AACvBA,cAAc,WAAU;AAAA,IAC1B;AAEA,UAAM,gBAAgB,CAAC,UAAU;AAC/B,UAAI,CAAC,SAAS,CAAC,MAAM,OAAQ,QAAO;AACpC,aAAO,OAAO,MAAM,WAAW,WAAW,MAAM,OAAO,OAAO;AAAA,IAChE;AAEA,UAAM,iBAAiB,CAAC,aAAa;AACnC,UAAI,CAAC,SAAU,QAAO;AAEtB,YAAM,UAAU,KAAK,MAAM,WAAW,EAAE;AACxC,YAAM,UAAU,KAAK,MAAM,WAAW,EAAE;AACxC,aAAO,GAAG,OAAO,IAAI,QAAQ,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC;AAAA,IAC1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/forms/AlbumForm.vue.js

@@ -17,21 +17,21 @@ const _hoisted_2 = { class: "h2 mn-b-medium" };
 const _hoisted_3 = { class: "bg-light pd-medium radius-medium" };
 const _hoisted_4 = { class: "mn-b-medium" };
 const _hoisted_5 = { class: "flex-nowrap flex-v-center flex gap-thin" };
-const _hoisted_6 = { class: "t-medium" };
+const _hoisted_6 = { class: "fw-medium" };
 const _hoisted_7 = ["onClick"];
 const _hoisted_8 = { class: "flex-nowrap flex-v-center flex" };
 const _hoisted_9 = { class: "w-100" };
-const _hoisted_10 = { class: "t-medium" };
+const _hoisted_10 = { class: "fw-medium" };
 const _hoisted_11 = {
   key: 0,
   class: "t-small t-transp"
 };
 const _hoisted_12 = { class: "flex-nowrap flex-v-center flex gap-thin" };
-const _hoisted_13 = { class: "t-medium" };
+const _hoisted_13 = { class: "fw-medium" };
 const _hoisted_14 = ["onClick"];
 const _hoisted_15 = { class: "flex-nowrap flex-v-center flex" };
 const _hoisted_16 = { class: "w-100" };
-const _hoisted_17 = { class: "t-medium" };
+const _hoisted_17 = { class: "fw-medium" };
 const _hoisted_18 = {
   key: 0,
   class: "t-small t-transp"
@@ -300,7 +300,7 @@ const _sfc_main = {
                 classSearch: "bg-white radius-small",
                 classSelected: "bg-white pd-small radius-small",
                 classDropdown: "bg-white pd-small radius-medium bs-small",
-                classItem: "pd-small radius-small hover-bg-light cursor-pointer",
+                classItem: "pd-small radius-small hover:bg-light cursor-pointer",
                 classFeed: "h-max-30r gap-thin flex-column flex o-scroll"
               }, {
                 selected: withCtx(({ item, clear }) => [
@@ -308,7 +308,7 @@ const _sfc_main = {
                     createElementVNode("span", _hoisted_6, toDisplayString(item?.name || item), 1),
                     createElementVNode("button", {
                       onClick: withModifiers(clear, ["stop"]),
-                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]"
                     }, [
                       createVNode(_sfc_main$2, { class: "i-micro fill-white" })
                     ], 8, _hoisted_7)
@@ -365,7 +365,7 @@ const _sfc_main = {
                 classSearch: "bg-white radius-small",
                 classSelected: "bg-white pd-small radius-small",
                 classDropdown: "bg-white pd-small radius-medium bs-small",
-                classItem: "pd-small radius-small hover-bg-light cursor-pointer",
+                classItem: "pd-small radius-small hover:bg-light cursor-pointer",
                 classFeed: "h-max-30r gap-thin flex-column flex o-scroll"
               }, {
                 selected: withCtx(({ item, clear }) => [
@@ -373,7 +373,7 @@ const _sfc_main = {
                     createElementVNode("span", _hoisted_13, toDisplayString(item?.name || item), 1),
                     createElementVNode("button", {
                       onClick: withModifiers(clear, ["stop"]),
-                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]"
                     }, [
                       createVNode(_sfc_main$2, { class: "i-micro fill-white" })
                     ], 8, _hoisted_14)

package/dist/martyrs/src/modules/music/components/forms/AlbumForm.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlbumForm.vue.js","sources":["../../../../../../../src/modules/music/components/forms/AlbumForm.vue"],"sourcesContent":["<template>\n  <div class=\"pd-medium\">\n    <h2 class=\"h2 mn-b-medium\">{{ editMode ? 'Edit Album' : 'Create Album' }}</h2>\n    \n    <form @submit.prevent=\"submitForm\" class=\"cols-1 gap-regular\">\n      <!-- Basic Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Basic Information</h3>\n        \n        <!-- Album Cover -->\n        <div class=\"mn-b-medium\">\n          <p class=\"p-medium mn-b-small\">Album Cover</p>\n          <UploadImage\n            v-model:photo=\"album.coverArt\"\n            uploadPath=\"albums/covers\"\n            class=\"w-100 h-15r radius-small o-hidden mn-b-small\"\n            @error=\"handleUploadError\"\n          />\n        </div>\n        \n        <!-- Title -->\n        <Field\n          v-model:field=\"album.title\"\n          label=\"Title\"\n          placeholder=\"Enter album title\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validation.title\"\n        />\n        \n        <!-- URL -->\n        <Field\n          v-model:field=\"album.url\"\n          label=\"URL\"\n          placeholder=\"Leave blank for auto-generation based on the album title\"\n          class=\"bg-white radius-small pd-small mn-b-small\"\n        />\n        \n        <!-- Description -->\n        <Field\n          v-model:field=\"album.description\"\n          label=\"Description\"\n          type=\"textarea\"\n          placeholder=\"Enter album description\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validation.description\"\n        />\n        \n        <!-- Release Date -->\n        <Field\n          v-model:field=\"album.releaseDate\"\n          label=\"Release Date\"\n          type=\"date\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validation.releaseDate\"\n        />\n        \n        <!-- Album Type -->\n        <Select\n          v-model:select=\"album.type\"\n          :options=\"albumTypeOptions\"\n          label=\"Album Type\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Artists Section -->\n      <Block title=\"Artists\">\n        <BlockMultiselect\n          v-model=\"album.artists\"\n          placeholder=\"Search artists...\"\n          :multiple=\"true\"\n          :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n          :store=\"{\n            read: (options) => artistsStore.actions.fetchArtists(options),\n            state: artistsStore.state\n          }\"\n          :options=\"{\n            rootOnly: false,\n            excludeChildren: false,\n            limit: 50\n          }\"\n          :skeleton=\"{\n            hide: false,\n            horizontal: true,\n            class: 'radius-small',\n            structure: [{ \n              block: 'text', size: 'large'\n            }]\n          }\"\n          :states=\"{\n            empty: {\n              title: 'No artists found',\n              description: 'Try different search terms or create a new artist',\n              class: 'radius-small'\n            }\n          }\"\n          key=\"_id\"\n          :label=\"item => item.name\"\n          classSearch=\"bg-white radius-small\"\n          classSelected=\"bg-white pd-small radius-small\"\n          classDropdown=\"bg-white pd-small radius-medium bs-small\"\n          classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n          classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n        >\n          <!-- Слот для выбранных артистов -->\n          <template #selected=\"{ item, clear }\">\n            <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n              <span class=\"t-medium\">{{ item?.name || item }}</span>\n              <button \n                @click.stop=\"clear\"\n                class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n              >\n                <IconCross class=\"i-micro fill-white\" />\n              </button>\n            </div>\n          </template>\n          \n          <!-- Слот для элементов в списке -->\n          <template #item=\"{ item }\">\n            <div class=\"flex-nowrap flex-v-center flex\">\n              <div class=\"w-100\">\n                <p class=\"t-medium\">{{ item.name }}</p>\n                <p v-if=\"item.bio\" class=\"t-small t-transp\">{{ item.bio }}</p>\n              </div>\n            </div>\n          </template>\n        </BlockMultiselect>\n      </Block>\n      \n      <!-- Genres Section -->\n      <Block title=\"Genres\">\n        <BlockMultiselect\n          v-model=\"album.genres\"\n          placeholder=\"Search genres...\"\n          :multiple=\"true\"\n          :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n          :store=\"{\n            read: (options) => genresStore.actions.fetchGenres(options),\n            state: genresStore.state\n          }\"\n          :options=\"{\n            rootOnly: false,\n            excludeChildren: false,\n            limit: 50\n          }\"\n          :skeleton=\"{\n            hide: false,\n            horizontal: true,\n            class: 'radius-small',\n            structure: [{ \n              block: 'text', size: 'large'\n            }]\n          }\"\n          :states=\"{\n            empty: {\n              title: 'No genres found',\n              description: 'Try different search terms or create a new genre',\n              class: 'radius-small'\n            }\n          }\"\n          key=\"_id\"\n          :label=\"item => item.name\"\n          classSearch=\"bg-white radius-small\"\n          classSelected=\"bg-white pd-small radius-small\"\n          classDropdown=\"bg-white pd-small radius-medium bs-small\"\n          classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n          classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n        >\n          <!-- Слот для выбранных жанров -->\n          <template #selected=\"{ item, clear }\">\n            <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n              <span class=\"t-medium\">{{ item?.name || item }}</span>\n              <button \n                @click.stop=\"clear\"\n                class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n              >\n                <IconCross class=\"i-micro fill-white\" />\n              </button>\n            </div>\n          </template>\n          \n          <!-- Слот для элементов в списке -->\n          <template #item=\"{ item }\">\n            <div class=\"flex-nowrap flex-v-center flex\">\n              <div class=\"w-100\">\n                <p class=\"t-medium\">{{ item.name }}</p>\n                <p v-if=\"item.description\" class=\"t-small t-transp\">{{ item.description }}</p>\n              </div>\n            </div>\n          </template>\n        </BlockMultiselect>\n      </Block>\n      \n      <!-- Status Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Publishing Status</h3>\n        \n        <Select\n          v-model:select=\"album.status\"\n          :options=\"statusOptions\"\n          label=\"Status\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Submit Button -->\n      <div class=\"flex flex-justify-between\">\n        <Button\n          @click=\"$router.go(-1)\"\n          class=\"bg-grey-nano t-black\"\n          :showSucces=\"false\"\n          :showLoader=\"false\"\n        >\n          Cancel\n        </Button>\n        \n        <Button\n          :submit=\"submitForm\"\n          class=\"bg-main t-black\"\n          :text=\"{\n            success: editMode ? 'Updated!' : 'Created!'\n          }\"\n        >\n          {{ editMode ? 'Update Album' : 'Create Album' }}\n        </Button>\n      </div>\n    </form>\n  </div>\n</template>\n\n<script setup>\nimport { ref, reactive, onMounted, watch } from 'vue';\nimport { useRouter, useRoute } from 'vue-router';\n\n// Import Martyrs components\nimport Field from '@martyrs/src/components/Field/Field.vue';\nimport Block from '@martyrs/src/components/Block/Block.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Select from '@martyrs/src/components/Select/Select.vue';\nimport UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\nimport BlockMultiselect from '@martyrs/src/modules/core/views/components/blocks/BlockMultiselect.vue';\n\n// Import stores\nimport * as albumsStore from '../../store/albums';\nimport * as artistsStore from '../../store/artists';\nimport * as genresStore from '../../store/genres';\nimport { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';\n\nconst store = useStore();\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n\n// Props\nconst props = defineProps({\n  editMode: {\n    type: Boolean,\n    default: false\n  },\n  url: {\n    type: String,\n    default: ''\n  }\n});\n\n// Router and route\nconst router = useRouter();\nconst route = useRoute();\n\n// State\nconst album = reactive({\n  title: '',\n  description: '',\n  releaseDate: new Date().toISOString().split('T')[0],\n  coverArt: '',\n  artists: [],\n  type: 'album',\n  genres: [],\n  totalTracks: 0,\n  url: '',\n  status: 'draft'\n});\n\nconst validation = reactive({\n  title: false,\n  description: false,\n  releaseDate: false\n});\n\n// Track if URL was manually entered\nconst urlManuallySet = ref(false);\n\n// Function to generate URL-friendly slug from text\nconst generateSlug = (text) => {\n  if (!text) return '';\n  return text\n    .toLowerCase()\n    .replace(/[^a-z0-9\\s-]/g, '') // Remove special characters\n    .replace(/\\s+/g, '-') // Replace spaces with hyphens\n    .replace(/-+/g, '-') // Replace multiple hyphens with single\n    .trim('-'); // Remove leading/trailing hyphens\n};\n\n// Watch for changes in album title to auto-generate URL\nwatch(() => album.title, (newTitle) => {\n  // Only auto-generate if URL hasn't been manually set and we're not in edit mode\n  if (!urlManuallySet.value && !props.editMode) {\n    album.url = generateSlug(newTitle);\n  }\n});\n\n// Watch for manual changes to URL field\nwatch(() => album.url, (newUrl, oldUrl) => {\n  // If user manually changes URL, mark as manually set\n  if (newUrl !== generateSlug(album.title)) {\n    urlManuallySet.value = true;\n  }\n});\n\n// Options\nconst statusOptions = [\n  'draft',\n  'published',\n  'archived'\n];\n\nconst albumTypeOptions = [\n  'album',\n  'single',\n  'EP',\n  'compilation'\n];\n\nconst fetchAlbum = async () => {\n  if (!props.url) return;\n  \n  try {\n    const fetchedAlbum = await albumsStore.actions.fetchAlbumByUrl(props.url);\n    \n    if (!fetchedAlbum) {\n      store.core.actions.setError({\n        message: 'Album not found'\n      });\n      return;\n    }\n    \n    // Update local album data\n    Object.assign(album, {\n      title: fetchedAlbum.title || '',\n      description: fetchedAlbum.description || '',\n      releaseDate: fetchedAlbum.releaseDate ? new Date(fetchedAlbum.releaseDate).toISOString().split('T')[0] : '',\n      coverArt: fetchedAlbum.coverArt || '',\n      artists: fetchedAlbum.artists || [],\n      type: fetchedAlbum.type || 'album',\n      genres: fetchedAlbum.genres || [],\n      totalTracks: fetchedAlbum.totalTracks || 0,\n      url: fetchedAlbum.url || '',\n      status: fetchedAlbum.status || 'draft',\n      _id: fetchedAlbum._id\n    });\n    \n  } catch (error) {\n    console.error('Error fetching album:', error);\n    store.core.actions.setError({\n      message: 'Failed to load album details'\n    });\n  }\n};\n\nconst validateForm = () => {\n  let isValid = true;\n  \n  // Validate title\n  if (!album.title.trim()) {\n    validation.title = {\n      message: 'Album title is required'\n    };\n    isValid = false;\n  } else {\n    validation.title = false;\n  }\n  \n  // Validate release date\n  if (!album.releaseDate) {\n    validation.releaseDate = {\n      message: 'Release date is required'\n    };\n    isValid = false;\n  } else {\n    validation.releaseDate = false;\n  }\n  \n  // Validate description\n  if (album.description && album.description.length > 2000) {\n    validation.description = {\n      message: 'Description is too long (max 2000 characters)'\n    };\n    isValid = false;\n  } else {\n    validation.description = false;\n  }\n  \n  return isValid;\n};\n\nconst submitForm = async () => {\n  if (!validateForm()) {\n    return;\n  }\n  \n  try {\n    // Prepare data for submission\n    const formData = {\n      ...album,\n      artists: album.artists.map(artist => artist._id || artist),\n      genres: album.genres.map(genre => genre._id || genre)\n    };\n    \n    // Add ownership data if creating new album\n    if (!props.editMode) {\n      formData.owner = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n    }\n    \n    let result;\n    if (props.editMode) {\n      result = await albumsStore.actions.updateAlbum(formData);\n    } else {\n      result = await albumsStore.actions.createAlbum(formData);\n    }\n    \n    // Navigate to album detail page\n    setTimeout(() => {\n      router.push({\n        name: 'album',\n        params: { url: result.url }\n      });\n    }, 1000);\n    \n  } catch (error) {\n    console.error('Error saving album:', error);\n    store.core.actions.setError({\n      message: 'Failed to save album'\n    });\n  }\n};\n\nconst handleUploadError = (error) => {\n  console.error('Upload error:', error);\n  store.core.actions.setError({\n    message: 'Error uploading image'\n  });\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n  if (props.editMode) {\n    await fetchAlbum();\n    // Mark URL as manually set in edit mode to prevent auto-generation\n    urlManuallySet.value = true;\n  }\n});\n</script>\n"],"names":["albumsStore.actions","auth.state"],"mappings":"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"}
+{"version":3,"file":"AlbumForm.vue.js","sources":["../../../../../../../src/modules/music/components/forms/AlbumForm.vue"],"sourcesContent":["<template>\n  <div class=\"pd-medium\">\n    <h2 class=\"h2 mn-b-medium\">{{ editMode ? 'Edit Album' : 'Create Album' }}</h2>\n    \n    <form @submit.prevent=\"submitForm\" class=\"cols-1 gap-regular\">\n      <!-- Basic Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Basic Information</h3>\n        \n        <!-- Album Cover -->\n        <div class=\"mn-b-medium\">\n          <p class=\"p-medium mn-b-small\">Album Cover</p>\n          <UploadImage\n            v-model:photo=\"album.coverArt\"\n            uploadPath=\"albums/covers\"\n            class=\"w-100 h-15r radius-small o-hidden mn-b-small\"\n            @error=\"handleUploadError\"\n          />\n        </div>\n        \n        <!-- Title -->\n        <Field\n          v-model:field=\"album.title\"\n          label=\"Title\"\n          placeholder=\"Enter album title\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validation.title\"\n        />\n        \n        <!-- URL -->\n        <Field\n          v-model:field=\"album.url\"\n          label=\"URL\"\n          placeholder=\"Leave blank for auto-generation based on the album title\"\n          class=\"bg-white radius-small pd-small mn-b-small\"\n        />\n        \n        <!-- Description -->\n        <Field\n          v-model:field=\"album.description\"\n          label=\"Description\"\n          type=\"textarea\"\n          placeholder=\"Enter album description\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validation.description\"\n        />\n        \n        <!-- Release Date -->\n        <Field\n          v-model:field=\"album.releaseDate\"\n          label=\"Release Date\"\n          type=\"date\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validation.releaseDate\"\n        />\n        \n        <!-- Album Type -->\n        <Select\n          v-model:select=\"album.type\"\n          :options=\"albumTypeOptions\"\n          label=\"Album Type\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Artists Section -->\n      <Block title=\"Artists\">\n        <BlockMultiselect\n          v-model=\"album.artists\"\n          placeholder=\"Search artists...\"\n          :multiple=\"true\"\n          :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n          :store=\"{\n            read: (options) => artistsStore.actions.fetchArtists(options),\n            state: artistsStore.state\n          }\"\n          :options=\"{\n            rootOnly: false,\n            excludeChildren: false,\n            limit: 50\n          }\"\n          :skeleton=\"{\n            hide: false,\n            horizontal: true,\n            class: 'radius-small',\n            structure: [{ \n              block: 'text', size: 'large'\n            }]\n          }\"\n          :states=\"{\n            empty: {\n              title: 'No artists found',\n              description: 'Try different search terms or create a new artist',\n              class: 'radius-small'\n            }\n          }\"\n          key=\"_id\"\n          :label=\"item => item.name\"\n          classSearch=\"bg-white radius-small\"\n          classSelected=\"bg-white pd-small radius-small\"\n          classDropdown=\"bg-white pd-small radius-medium bs-small\"\n          classItem=\"pd-small radius-small hover:bg-light cursor-pointer\"\n          classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n        >\n          <!-- Слот для выбранных артистов -->\n          <template #selected=\"{ item, clear }\">\n            <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n              <span class=\"fw-medium\">{{ item?.name || item }}</span>\n              <button \n                @click.stop=\"clear\"\n                class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]\"\n              >\n                <IconCross class=\"i-micro fill-white\" />\n              </button>\n            </div>\n          </template>\n          \n          <!-- Слот для элементов в списке -->\n          <template #item=\"{ item }\">\n            <div class=\"flex-nowrap flex-v-center flex\">\n              <div class=\"w-100\">\n                <p class=\"fw-medium\">{{ item.name }}</p>\n                <p v-if=\"item.bio\" class=\"t-small t-transp\">{{ item.bio }}</p>\n              </div>\n            </div>\n          </template>\n        </BlockMultiselect>\n      </Block>\n      \n      <!-- Genres Section -->\n      <Block title=\"Genres\">\n        <BlockMultiselect\n          v-model=\"album.genres\"\n          placeholder=\"Search genres...\"\n          :multiple=\"true\"\n          :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n          :store=\"{\n            read: (options) => genresStore.actions.fetchGenres(options),\n            state: genresStore.state\n          }\"\n          :options=\"{\n            rootOnly: false,\n            excludeChildren: false,\n            limit: 50\n          }\"\n          :skeleton=\"{\n            hide: false,\n            horizontal: true,\n            class: 'radius-small',\n            structure: [{ \n              block: 'text', size: 'large'\n            }]\n          }\"\n          :states=\"{\n            empty: {\n              title: 'No genres found',\n              description: 'Try different search terms or create a new genre',\n              class: 'radius-small'\n            }\n          }\"\n          key=\"_id\"\n          :label=\"item => item.name\"\n          classSearch=\"bg-white radius-small\"\n          classSelected=\"bg-white pd-small radius-small\"\n          classDropdown=\"bg-white pd-small radius-medium bs-small\"\n          classItem=\"pd-small radius-small hover:bg-light cursor-pointer\"\n          classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n        >\n          <!-- Слот для выбранных жанров -->\n          <template #selected=\"{ item, clear }\">\n            <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n              <span class=\"fw-medium\">{{ item?.name || item }}</span>\n              <button \n                @click.stop=\"clear\"\n                class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]\"\n              >\n                <IconCross class=\"i-micro fill-white\" />\n              </button>\n            </div>\n          </template>\n          \n          <!-- Слот для элементов в списке -->\n          <template #item=\"{ item }\">\n            <div class=\"flex-nowrap flex-v-center flex\">\n              <div class=\"w-100\">\n                <p class=\"fw-medium\">{{ item.name }}</p>\n                <p v-if=\"item.description\" class=\"t-small t-transp\">{{ item.description }}</p>\n              </div>\n            </div>\n          </template>\n        </BlockMultiselect>\n      </Block>\n      \n      <!-- Status Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Publishing Status</h3>\n        \n        <Select\n          v-model:select=\"album.status\"\n          :options=\"statusOptions\"\n          label=\"Status\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Submit Button -->\n      <div class=\"flex flex-justify-between\">\n        <Button\n          @click=\"$router.go(-1)\"\n          class=\"bg-grey-nano t-black\"\n          :showSucces=\"false\"\n          :showLoader=\"false\"\n        >\n          Cancel\n        </Button>\n        \n        <Button\n          :submit=\"submitForm\"\n          class=\"bg-main t-black\"\n          :text=\"{\n            success: editMode ? 'Updated!' : 'Created!'\n          }\"\n        >\n          {{ editMode ? 'Update Album' : 'Create Album' }}\n        </Button>\n      </div>\n    </form>\n  </div>\n</template>\n\n<script setup>\nimport { ref, reactive, onMounted, watch } from 'vue';\nimport { useRouter, useRoute } from 'vue-router';\n\n// Import Martyrs components\nimport Field from '@martyrs/src/components/Field/Field.vue';\nimport Block from '@martyrs/src/components/Block/Block.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Select from '@martyrs/src/components/Select/Select.vue';\nimport UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\nimport BlockMultiselect from '@martyrs/src/modules/core/views/components/blocks/BlockMultiselect.vue';\n\n// Import stores\nimport * as albumsStore from '../../store/albums';\nimport * as artistsStore from '../../store/artists';\nimport * as genresStore from '../../store/genres';\nimport { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';\n\nconst store = useStore();\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n\n// Props\nconst props = defineProps({\n  editMode: {\n    type: Boolean,\n    default: false\n  },\n  url: {\n    type: String,\n    default: ''\n  }\n});\n\n// Router and route\nconst router = useRouter();\nconst route = useRoute();\n\n// State\nconst album = reactive({\n  title: '',\n  description: '',\n  releaseDate: new Date().toISOString().split('T')[0],\n  coverArt: '',\n  artists: [],\n  type: 'album',\n  genres: [],\n  totalTracks: 0,\n  url: '',\n  status: 'draft'\n});\n\nconst validation = reactive({\n  title: false,\n  description: false,\n  releaseDate: false\n});\n\n// Track if URL was manually entered\nconst urlManuallySet = ref(false);\n\n// Function to generate URL-friendly slug from text\nconst generateSlug = (text) => {\n  if (!text) return '';\n  return text\n    .toLowerCase()\n    .replace(/[^a-z0-9\\s-]/g, '') // Remove special characters\n    .replace(/\\s+/g, '-') // Replace spaces with hyphens\n    .replace(/-+/g, '-') // Replace multiple hyphens with single\n    .trim('-'); // Remove leading/trailing hyphens\n};\n\n// Watch for changes in album title to auto-generate URL\nwatch(() => album.title, (newTitle) => {\n  // Only auto-generate if URL hasn't been manually set and we're not in edit mode\n  if (!urlManuallySet.value && !props.editMode) {\n    album.url = generateSlug(newTitle);\n  }\n});\n\n// Watch for manual changes to URL field\nwatch(() => album.url, (newUrl, oldUrl) => {\n  // If user manually changes URL, mark as manually set\n  if (newUrl !== generateSlug(album.title)) {\n    urlManuallySet.value = true;\n  }\n});\n\n// Options\nconst statusOptions = [\n  'draft',\n  'published',\n  'archived'\n];\n\nconst albumTypeOptions = [\n  'album',\n  'single',\n  'EP',\n  'compilation'\n];\n\nconst fetchAlbum = async () => {\n  if (!props.url) return;\n  \n  try {\n    const fetchedAlbum = await albumsStore.actions.fetchAlbumByUrl(props.url);\n    \n    if (!fetchedAlbum) {\n      store.core.actions.setError({\n        message: 'Album not found'\n      });\n      return;\n    }\n    \n    // Update local album data\n    Object.assign(album, {\n      title: fetchedAlbum.title || '',\n      description: fetchedAlbum.description || '',\n      releaseDate: fetchedAlbum.releaseDate ? new Date(fetchedAlbum.releaseDate).toISOString().split('T')[0] : '',\n      coverArt: fetchedAlbum.coverArt || '',\n      artists: fetchedAlbum.artists || [],\n      type: fetchedAlbum.type || 'album',\n      genres: fetchedAlbum.genres || [],\n      totalTracks: fetchedAlbum.totalTracks || 0,\n      url: fetchedAlbum.url || '',\n      status: fetchedAlbum.status || 'draft',\n      _id: fetchedAlbum._id\n    });\n    \n  } catch (error) {\n    console.error('Error fetching album:', error);\n    store.core.actions.setError({\n      message: 'Failed to load album details'\n    });\n  }\n};\n\nconst validateForm = () => {\n  let isValid = true;\n  \n  // Validate title\n  if (!album.title.trim()) {\n    validation.title = {\n      message: 'Album title is required'\n    };\n    isValid = false;\n  } else {\n    validation.title = false;\n  }\n  \n  // Validate release date\n  if (!album.releaseDate) {\n    validation.releaseDate = {\n      message: 'Release date is required'\n    };\n    isValid = false;\n  } else {\n    validation.releaseDate = false;\n  }\n  \n  // Validate description\n  if (album.description && album.description.length > 2000) {\n    validation.description = {\n      message: 'Description is too long (max 2000 characters)'\n    };\n    isValid = false;\n  } else {\n    validation.description = false;\n  }\n  \n  return isValid;\n};\n\nconst submitForm = async () => {\n  if (!validateForm()) {\n    return;\n  }\n  \n  try {\n    // Prepare data for submission\n    const formData = {\n      ...album,\n      artists: album.artists.map(artist => artist._id || artist),\n      genres: album.genres.map(genre => genre._id || genre)\n    };\n    \n    // Add ownership data if creating new album\n    if (!props.editMode) {\n      formData.owner = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n    }\n    \n    let result;\n    if (props.editMode) {\n      result = await albumsStore.actions.updateAlbum(formData);\n    } else {\n      result = await albumsStore.actions.createAlbum(formData);\n    }\n    \n    // Navigate to album detail page\n    setTimeout(() => {\n      router.push({\n        name: 'album',\n        params: { url: result.url }\n      });\n    }, 1000);\n    \n  } catch (error) {\n    console.error('Error saving album:', error);\n    store.core.actions.setError({\n      message: 'Failed to save album'\n    });\n  }\n};\n\nconst handleUploadError = (error) => {\n  console.error('Upload error:', error);\n  store.core.actions.setError({\n    message: 'Error uploading image'\n  });\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n  if (props.editMode) {\n    await fetchAlbum();\n    // Mark URL as manually set in edit mode to prevent auto-generation\n    urlManuallySet.value = true;\n  }\n});\n</script>\n"],"names":["albumsStore.actions","auth.state"],"mappings":"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"}

package/dist/martyrs/src/modules/music/components/forms/ArtistForm.vue.js

@@ -6,7 +6,7 @@ import _sfc_main$4 from "../../../../components/Button/Button.vue2.js";
 import _sfc_main$3 from "../../../../components/Checkbox/Checkbox.vue.js";
 import Select from "../../../../components/Select/Select.vue.js";
 import UploadImage from "../../../../components/UploadImage/UploadImage.vue.js";
-/* empty css                                        */
+/* empty css                                       */
 import BlockMultiselect from "../../../core/views/components/blocks/BlockMultiselect.vue.js";
 import _sfc_main$2 from "../../../icons/navigation/IconCross.vue.js";
 import { actions as actions$1 } from "../../store/artists.js";
@@ -20,11 +20,11 @@ const _hoisted_4 = { class: "cols-2 mobile:cols-1 gap-regular" };
 const _hoisted_5 = { class: "bg-light pd-medium radius-medium" };
 const _hoisted_6 = { class: "cols-2 mobile:cols-1 gap-thin" };
 const _hoisted_7 = { class: "flex-nowrap flex-v-center flex gap-thin" };
-const _hoisted_8 = { class: "t-medium" };
+const _hoisted_8 = { class: "fw-medium" };
 const _hoisted_9 = ["onClick"];
 const _hoisted_10 = { class: "flex-nowrap flex-v-center flex" };
 const _hoisted_11 = { class: "w-100" };
-const _hoisted_12 = { class: "t-medium" };
+const _hoisted_12 = { class: "fw-medium" };
 const _hoisted_13 = {
   key: 0,
   class: "t-small t-transp"
@@ -337,7 +337,7 @@ const _sfc_main = {
                 classSearch: "bg-white radius-small",
                 classSelected: "bg-white pd-small radius-small",
                 classDropdown: "bg-white pd-small radius-medium bs-small",
-                classItem: "pd-small radius-small hover-bg-light cursor-pointer",
+                classItem: "pd-small radius-small hover:bg-light cursor-pointer",
                 classFeed: "h-max-30r gap-thin flex-column flex o-scroll"
               }, {
                 selected: withCtx(({ item, clear }) => [
@@ -345,7 +345,7 @@ const _sfc_main = {
                     createElementVNode("span", _hoisted_8, toDisplayString(item?.name || item), 1),
                     createElementVNode("button", {
                       onClick: withModifiers(clear, ["stop"]),
-                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover:scale-[1.05]"
                     }, [
                       createVNode(_sfc_main$2, { class: "i-micro fill-white" })
                     ], 8, _hoisted_9)