@ozdao/martyrs 0.2.578 → 0.2.580

package/dist/style.css

@@ -275,15 +275,24 @@ a.button {
   top: 0;
 }
 .dropdown-content {
-  display: block;
   position: absolute;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-  z-index: 1;
+  z-index: 100;
+  border-radius: var(--small);
+  transform-origin: top left;
+  backdrop-filter: blur(var(--small));
+  -webkit-backdrop-filter: blur(var(--small));
+  background: rgba(var(--white), 0.5);
+}
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: transform 0.33s cubic-bezier(0.9, 0, 0.1, 1), opacity 0.15s ease;
+}
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0.01;
+  transform: translateY(-4px) scale(0.8);
 }
-
-/*.dropdown:hover .dropdown-content {
-  display: block;
-}*/
 .mobile-menu-section > div:last-of-type {
   border-bottom: none !important;
 }
@@ -1544,76 +1553,76 @@ to {
   overflow: hidden;
   transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
-.rotate-180deg[data-v-4bed57a8] {
+.rotate-180deg[data-v-9f149045] {
   transform: rotate(180deg);
 }
-.hidden[data-v-4bed57a8] {
+.hidden[data-v-9f149045] {
 /*  opacity: 0;*/
   width: 0;
   display: none;
 }
-.visible[data-v-4bed57a8] {
+.visible[data-v-9f149045] {
 /*  opacity: 1;*/
   display: block;
 }
 
 /* Dropdown animations */
-.dropdown-enter[data-v-4bed57a8], .dropdown-leave[data-v-4bed57a8] {
+.dropdown-enter[data-v-9f149045], .dropdown-leave[data-v-9f149045] {
   transition: all 0.3s ease-in-out;
 }
-.dropdown-enter-from[data-v-4bed57a8], .dropdown-leave-to[data-v-4bed57a8] {
+.dropdown-enter-from[data-v-9f149045], .dropdown-leave-to[data-v-9f149045] {
   opacity: 0;
   transform: translateY(-0.5rem);
 }
-.dropdown-enter-to[data-v-4bed57a8], .dropdown-leave-from[data-v-4bed57a8] {
+.dropdown-enter-to[data-v-9f149045], .dropdown-leave-from[data-v-9f149045] {
   opacity: 1;
   transform: translateY(0);
 }
 
 /* Horizontal dropdown submenu */
-.dropdown-submenu[data-v-4bed57a8] {
+.dropdown-submenu[data-v-9f149045] {
   list-style: none;
   padding: 0.5rem;
   margin: 0;
   min-width: 12rem;
 }
-.dropdown-submenu li[data-v-4bed57a8] {
+.dropdown-submenu li[data-v-9f149045] {
   width: 100%;
 }
-.dropdown-submenu a[data-v-4bed57a8] {
+.dropdown-submenu a[data-v-9f149045] {
   display: flex;
   text-decoration: none;
   white-space: nowrap;
 }
 
 /* Transition for horizontal dropdown */
-[data-v-4bed57a8] .TransitionTranslateY-enter-active,[data-v-4bed57a8] .TransitionTranslateY-leave-active {
+[data-v-9f149045] .TransitionTranslateY-enter-active,[data-v-9f149045] .TransitionTranslateY-leave-active {
   transition: translateY 0.2s ease;
    transition: opacity 0.2s ease;
 }
-[data-v-4bed57a8] .TransitionTranslateY-enter-from,[data-v-4bed57a8] .TransitionTranslateY-leave-to {
+[data-v-9f149045] .TransitionTranslateY-enter-from,[data-v-9f149045] .TransitionTranslateY-leave-to {
   opacity: 0;
   transform: translateY(-0.5rem);
 }
-[data-v-4bed57a8] .TransitionTranslateY-enter-to,[data-v-4bed57a8] .TransitionTranslateY-leave-from {
+[data-v-9f149045] .TransitionTranslateY-enter-to,[data-v-9f149045] .TransitionTranslateY-leave-from {
   opacity: 1;
   transform: translateY(0);
 }
 
-.hidden[data-v-c3592737] {
+.hidden[data-v-499f10e6] {
   opacity: 0;
   width: 0;
   display: none;
 }
-.visible[data-v-c3592737] {
+.visible[data-v-499f10e6] {
   opacity: 1;
   display: block;
 }
 
 /* Mobile: ВСЕГДА скрываем, показываем ТОЛЬКО по клику меню */
 @media (max-width: 1024px) {
-aside[data-sidebar][data-v-c3592737] {
-    position: fixed !important;
+aside[data-sidebar][data-v-499f10e6] {
+    position: absolute !important;
     left: 0 !important;
     transform: translateX(-100%) !important;
     visibility: hidden !important;
@@ -1621,24 +1630,24 @@ aside[data-sidebar][data-v-c3592737] {
 }
 
   /* Показываем ТОЛЬКО когда manual клик (НЕ от SSR state) */
-aside[data-sidebar].mobile-opened[data-v-c3592737] {
+aside[data-sidebar].mobile-opened[data-v-499f10e6] {
     transform: translateX(0) !important;
     visibility: visible !important;
 }
 }
 
 /* Scrollbar styles */
-[data-v-c3592737]::-webkit-scrollbar {
+[data-v-499f10e6]::-webkit-scrollbar {
   width: 6px;
 }
-[data-v-c3592737]::-webkit-scrollbar-track {
+[data-v-499f10e6]::-webkit-scrollbar-track {
   background: transparent;
 }
-[data-v-c3592737]::-webkit-scrollbar-thumb {
+[data-v-499f10e6]::-webkit-scrollbar-thumb {
   background-color: var(--grey-micro);
   border-radius: 3px;
 }
-[data-v-c3592737]::-webkit-scrollbar-thumb:hover {
+[data-v-499f10e6]::-webkit-scrollbar-thumb:hover {
   background-color: var(--grey-small);
 }
 .eye[data-v-4241147a] {

package/dist/{web-ClbcbWYJ.js → web-BNJDRie_.js}

@@ -1,4 +1,4 @@
-import { W as p } from "./main-EZaj64lH.js";
+import { W as p } from "./main-vq1_XpmQ.js";
 class f extends p {
   constructor() {
     super(...arguments), this.group = "CapacitorStorage";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozdao/martyrs",
-  "version": "0.2.578",
+  "version": "0.2.580",
   "description": "Fullstack framework focused on user experience and ease of development.",
   "author": "OZ DAO <hello@ozdao.dev>",
   "license": "GPL-3.0-or-later",

package/src/components/Chips/Chips.vue

@@ -1,12 +1,12 @@
 <template>
 	<div 
-    class="font-main"
+    class=""
    >
    	<slot></slot>
 		<p 
 			v-if="chips?.length"
 		  v-for="(chip,index) in chips" 
-		  :class="'p-regular font-main'"
+		  :class="'p-regular'"
 		 	class="mn-r-nano d-inline-block w-max p-regular pd-thin radius-thin fw-medium bg-main" 
 		>
 			{{chip.text ? chip.text : chip}}

package/src/components/Dropdown/Dropdown.vue

@@ -3,8 +3,8 @@
     class="dropdown pos-relative"
     v-click-outside="clickedOutside"
     @click.stop="trigger === 'click' ? (isOpen = !isOpen) : null"
-    @mouseenter="trigger === 'hover' ? (isOpen = true) : null"
-    @mouseleave="trigger === 'hover' ? (isOpen = false) : null"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
   >
     <slot name="label">
       <div v-if="isComponentLabel" class="w-100 h-100 flex-center flex">
@@ -14,15 +14,15 @@
         {{ label }}
       </div>
     </slot>
-    <transition name="TransitionTranslateY" mode="out-in">
+    <Transition name="dropdown">
       <div
-        v-show="isOpen"
+        v-if="isOpen"
         :style="{ left: align === 'left' ? '0' : 'auto', right: align === 'right' ? '0' : 'auto' }"
-        class="dropdown-content "
+        class="dropdown-content"
       >
         <slot></slot>
       </div>
-    </transition>
+    </Transition>
   </div>
 </template>
 
@@ -50,22 +50,50 @@ const props = defineProps({
 const isOpen = ref(false);
 const isComponentLabel = computed(() => typeof props.label === 'object');
 
-function clickedOutside () {
+let closeTimeout = null;
+
+function handleMouseEnter() {
+  if (props.trigger === 'hover') {
+    clearTimeout(closeTimeout);
+    isOpen.value = true;
+  }
+}
+
+function handleMouseLeave() {
+  if (props.trigger === 'hover') {
+    closeTimeout = setTimeout(() => {
+      isOpen.value = false;
+    }, 100);
+  }
+}
+
+function clickedOutside() {
   if (props.trigger === 'click') {
-    isOpen.value = false
+    isOpen.value = false;
   }
 }
 </script>
 
-<style >
+<style>
 .dropdown-content {
-  display: block;
   position: absolute;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-  z-index: 1;
+  z-index: 100;
+  border-radius: var(--small);
+  transform-origin: top left;
+  backdrop-filter: blur(var(--small));
+  -webkit-backdrop-filter: blur(var(--small));
+  background: rgba(var(--white), 0.5);
 }
 
-/*.dropdown:hover .dropdown-content {
-  display: block;
-}*/
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: transform 0.33s cubic-bezier(0.9, 0, 0.1, 1), opacity 0.15s ease;
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0.01;
+  transform: translateY(-4px) scale(0.8);
+}
 </style>

package/src/components/Menu/MenuItem.vue

@@ -45,19 +45,19 @@
             h(
               'div',
               {
-                class: ['w-100', 'mn-b-thin', 'mn-t-thin', 'mn-r-small', 'i-big', 'flex-v-center', 'flex']
+                class: ['flex-child-1', 'mn-b-thin', 'mn-t-thin', 'mn-r-small', 'i-big', 'flex-v-center', 'flex']
               },
               [
                 h(
                   'span',
                   {
-                    class: ['p-medium', 'fw-medium', 'mn-r-auto']
+                    class: ['p-medium', 'fw-medium']
                   },
                   textSlot
                 )
               ]
             ),
-            h(IconChevronRight, { class: "i-medium mn-r-medium", type: "chevron"})
+            h(IconChevronRight, { class: "i-medium mn-r-medium flex-child-default", type: "chevron"})
           ]
         );
       };

package/src/jit/loader.js

@@ -22,7 +22,12 @@ export default function martyrsLoader(source) {
 
   // Извлекаем токены через метод плагина
   try {
+    const before = plugin.tokensByFile.get(resourcePath)?.size || 0;
     plugin.extractFromFile(source, resourcePath);
+    const after = plugin.tokensByFile.get(resourcePath)?.size || 0;
+    if (before !== after) {
+      console.log(`[MartyrsJIT Loader] ${resourcePath.split('/').pop()}: ${before} → ${after} tokens`);
+    }
   } catch (error) {
     console.warn(`[MartyrsJIT] Error extracting tokens from ${resourcePath}:`, error.message);
   }

package/src/jit/plugin.js

@@ -140,7 +140,9 @@ export class MartyrsJitPlugin {
             if (replaced) {
               const { RawSource } = compiler.webpack.sources;
               compilation.updateAsset(filename, new RawSource(source));
-              console.log(`[MartyrsJIT] ${this.tokens.size} tokens in ${duration.toFixed(2)}ms`);
+              console.log(`[MartyrsJIT] Replaced in ${filename}: ${this.tokens.size} tokens in ${duration.toFixed(2)}ms`);
+            } else if (filename.includes('martyrs') || filename.includes('__martyrs')) {
+              console.log(`[MartyrsJIT] No placeholder found in ${filename}`);
             }
           }
         }
@@ -161,6 +163,13 @@ export class MartyrsJitPlugin {
       }
       // Сбрасываем кэш CSS (токены изменённых файлов обновятся через loader)
       this.jit.reset();
+      // Переписываем виртуальный модуль с плейсхолдером, чтобы rspack пересобрал CSS
+      try {
+        this.virtualModules.writeModule(VIRTUAL_MODULE_PATH, LAYER_PLACEHOLDER + '\n/*' + Date.now() + '*/');
+        console.log('[MartyrsJIT] Virtual module rewritten with placeholder');
+      } catch (e) {
+        console.log('[MartyrsJIT] watchRun: store not ready yet', e.message);
+      }
     });
   }
 

package/src/modules/core/views/components/partials/Navigation.vue

@@ -72,10 +72,10 @@ const processRoute = (routeFn) => {
 
 <template>
   <nav
-    class="ease-quint-out o-x-visible  h-100"
+    class="ease-quint-out"
     :class="[
       stateSidebar ? 'pd-small' : 'pd-micro',
-      horizontal ? 'w-100 desktop-only gap-thin flex flex-center flex-nowrap o-y-visible' : 'o-y-scroll gap-medium rows-1',
+      horizontal ? 'w-100 desktop-only gap-thin flex flex-center flex-nowrap o-y-visible o-x-visible' : 'gap-medium flex flex-column',
     ]"
   >
     <div 
@@ -130,12 +130,12 @@ const processRoute = (routeFn) => {
               <!-- <IconChevronBottom :fill="theme === 'dark' ? 'rgb(var(--white))': 'rgb(var(--black))'" class="i-small mn-l-thin"/> -->
             </button>
           </template>
-          <ul class="dropdown-submenu bg-blur-small" :class="theme === 'light' ? 'bg-white-transp-50 ' : 'bg-black-transp-50'">
+          <ul class="dropdown-submenu">
             <li v-for="subItem in item.subItems" :key="subItem.title">
               <a
                 @click="subItem.route ? router.push(processRoute(subItem.route)) : null"
                 href="#"
-                class="ease-quint-out flex flex-v-center flex-nowrap gap-thin pd-thin radius-small"
+                class="group ease-quint-out flex flex-v-center flex-nowrap gap-thin pd-thin radius-small"
                 :class="[
                   subItem.route && route.path === processRoute(subItem.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',
                   theme === 'light' ? 'hover:bg-light' : 'hover:bg-dark'
@@ -144,8 +144,7 @@ const processRoute = (routeFn) => {
                 <component
                   v-if="subItem.iconComponent"
                   :is="subItem.iconComponent"
-                  class="i-medium"
-                  fill="rgba(var(--black), 0.25)"
+                  class="i-medium t-black-transp-25 group-hover:t-main"
                 />
                 <span v-else class="">{{ subItem.icon }}</span>
                 <span class="w-100">{{ subItem.title }}</span>
@@ -155,7 +154,7 @@ const processRoute = (routeFn) => {
         </Dropdown>
         <button
           v-else
-          class="ease-quint-out w-100 flex radius-small flex-nowrap cursor-pointer flex-v-center"
+          class="group ease-quint-out w-100 flex radius-small flex-nowrap cursor-pointer flex-v-center"
           @click="item.route ? (isPhone ? (stateSidebar = false) : null, route.path !== processRoute(item.route) ? router.push(processRoute(item.route)) : null) : null"
           :class="[
               horizontal ? 'pd-thin' : '',
@@ -167,8 +166,7 @@ const processRoute = (routeFn) => {
             <component
               v-if="item.iconComponent"
               :is="item.iconComponent"
-              class="i-medium flex-child-default"
-              fill="rgba(var(--black), 0.25)"
+              class="i-medium flex-child-default ease-quint-out t-black-transp-25 group-hover:t-main"
             />
             <span
               v-if="!item.iconComponent "
@@ -211,7 +209,7 @@ const processRoute = (routeFn) => {
               <a
                @click="subItem.route ? (isPhone ? (stateSidebar = false) : null, route.path !== processRoute(subItem.route) ? router.push(processRoute(subItem.route)) : null) : null"
                 href="#"
-                class="ease-quint-out flex flex-v-center flex-nowrap gap-thin pd-thin radius-small"
+                class="group ease-quint-out flex flex-v-center flex-nowrap gap-thin pd-thin radius-small"
                 :class="[
                   subItem.route && route.path === processRoute(subItem.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',
                     theme === 'light' ? 'hover:bg-light' : 'hover:bg-dark'
@@ -220,8 +218,7 @@ const processRoute = (routeFn) => {
                 <component
                   v-if="subItem.iconComponent"
                   :is="subItem.iconComponent"
-                  class="i-medium"
-                  fill="rgba(var(--black), 0.25)"
+                  class="i-medium t-black-transp-25 group-hover:t-main"
                 />
                 <span v-else class="">{{ subItem.icon }}</span>
                 <span class="w-100">{{ subItem.title }}</span>

package/src/modules/core/views/components/partials/Sidebar.vue

@@ -86,7 +86,7 @@ router.beforeEach((to, from) => {
 <template>
   <aside
     data-sidebar
-    class="ease-quint-out w-min-0 o-hidden flex-child-default z-index-2  br-r-1px  flex flex-column h-100"
+    class="ease-quint-out w-min-0 flex-child-default z-index-2 br-r-1px flex flex-column h-100"
     :class="[
       { 'mobile-opened': isManuallyOpened },
       stateSidebar
@@ -100,23 +100,29 @@ router.beforeEach((to, from) => {
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
   >
-    <!-- Slot for header component (e.g., ProfileCard) -->
-    <slot name="header"></slot>
+    <!-- Header slot - shrink-0 -->
+    <div class="flex-shrink-0">
+      <slot name="header"></slot>
+    </div>
 
-    <!-- Slot for navigation content -->
-    <slot></slot>
+    <!-- Main scrollable content - flex-1 overflow-y-auto -->
+    <div class="flex-child-1 o-y-auto">
+      <slot></slot>
+    </div>
 
-    <!-- Slot for footer component (e.g., HelpCard) -->
-    <slot name="footer"></slot>
-    <div v-if="MOBILE_APP" @click="() => toggleSidebar()"  class="pos-relative">
+    <!-- Footer slot - shrink-0 -->
+    <div class="flex-shrink-0">
+      <slot name="footer"></slot>
+    </div>
+    <div v-if="MOBILE_APP" @click="() => toggleSidebar()" class="flex-shrink-0 pos-relative">
       <div class="bg-light radius-medium pd-medium">
         <p  class="fw-medium t-black-transp-60">
           Close Menu
         </p>
       </div>
     </div>
-    <div 
-      class="w-100 br-t-1px"
+    <div
+      class="flex-shrink-0 w-100 br-t-1px"
       :class="{ 
         'pd-micro': !stateSidebar, 
         'pd-small': stateSidebar,
@@ -160,7 +166,7 @@ router.beforeEach((to, from) => {
 /* Mobile: ВСЕГДА скрываем, показываем ТОЛЬКО по клику меню */
 @media (max-width: 1024px) {
   aside[data-sidebar] {
-    position: fixed !important;
+    position: absolute !important;
     left: 0 !important;
     transform: translateX(-100%) !important;
     visibility: hidden !important;

package/src/modules/icons/actions/IconDuplicate.vue

@@ -11,7 +11,7 @@
 	const props = defineProps({
 	  fill: {
 	    type: String,
-	    default: 'rgb(var(--black))'
+	    default: 'currentColor'
 	  }
 	})
 </script>

package/src/modules/icons/actions/IconOpenLink.vue

@@ -8,7 +8,7 @@
 	const props = defineProps({
 	  fill: {
 	    type: String,
-	    default: 'rgb(var(--black))'
+	    default: 'currentColor'
 	  }
 	})
 </script>

package/src/modules/icons/actions/IconShopcartAdd.vue

@@ -9,7 +9,7 @@
 	const props = defineProps({
 	  fill: {
 	    type: String,
-	    default: 'rgb(var(--black))'
+	    default: 'currentColor'
 	  }
 	})
 </script>

package/src/modules/icons/actions/IconShow.vue

@@ -13,7 +13,7 @@
 	const props = defineProps({
 	  fill: {
 	    type: String,
-	    default: 'rgb(var(--black))'
+	    default: 'currentColor'
 	  },
 	  show: {
 	  	type: Boolean,

package/src/modules/icons/entities/IconAddress.vue

@@ -11,7 +11,7 @@
 	const props = defineProps({
 	  fill: {
 	    type: String,
-	    default: 'rgb(var(--black))'
+	    default: 'currentColor'
 	  }
 	})
 </script>

package/src/modules/icons/entities/IconBell.vue

@@ -9,7 +9,7 @@
 	const props = defineProps({
 	  fill: {
 	    type: String,
-	    default: 'rgb(var(--black))'
+	    default: 'currentColor'
 	  },
 	  theme: {
     	type: String,

package/src/modules/icons/entities/IconCalendar.vue

@@ -8,7 +8,7 @@
   const props = defineProps({
     fill: {
       type: String,
-      default: 'rgb(var(--black))'
+      default: 'currentColor'
     },
     order: {
       type: String,

package/src/modules/icons/entities/IconCash.vue

@@ -17,7 +17,7 @@
 	const props = defineProps({
 	  fill: {
 	    type: String,
-	    default: 'rgb(var(--black))'
+	    default: 'currentColor'
 	  }
 	})
 </script>

package/src/modules/icons/entities/IconCatalog.vue

@@ -8,7 +8,7 @@
 	const props = defineProps({
 	  fill: {
 	    type: String,
-	    default: 'rgb(var(--black))'
+	    default: 'currentColor'
 	  },
 	  theme: {
     	type: String,

package/src/modules/icons/entities/IconCommunity.vue

@@ -10,7 +10,7 @@
 	const props = defineProps({
 	  fill: {
 	    type: String,
-	    default: 'rgb(var(--black))'
+	    default: 'currentColor'
 	  }
 	})
 </script>

package/src/modules/icons/entities/IconDate.vue

@@ -8,7 +8,7 @@
 	const props = defineProps({
 	  fill: {
 	    type: String,
-	    default: 'rgb(var(--black))'
+	    default: 'currentColor'
 	  }
 	})
 </script>

package/src/modules/icons/entities/IconDiscount.vue

@@ -13,7 +13,7 @@
 	const props = defineProps({
 	  fill: {
 	    type: String,
-	    default: 'rgb(var(--black))'
+	    default: 'currentColor'
 	  },
 	  theme: {
     	type: String,

package/src/modules/icons/entities/IconEarn.vue

@@ -14,7 +14,7 @@
 	const props = defineProps({
 	  fill: {
 	    type: String,
-	    default: 'rgb(var(--black))'
+	    default: 'currentColor'
 	  }
 	})
 </script>

package/src/modules/icons/entities/IconEmail.vue

@@ -8,7 +8,7 @@
 	const props = defineProps({
 	  fill: {
 	    type: String,
-	    default: 'rgb(var(--black))'
+	    default: 'currentColor'
 	  }
 	})
 </script>

package/src/modules/icons/entities/IconEvents.vue

@@ -8,7 +8,7 @@
 	const props = defineProps({
 	  fill: {
 	    type: String,
-	    default: 'rgb(var(--black))'
+	    default: 'currentColor'
 	  }
 	})
 </script>

package/src/modules/icons/entities/IconFeatured.vue

@@ -8,7 +8,7 @@
 	const props = defineProps({
 	  fill: {
 	    type: String,
-	    default: 'rgb(var(--black))'
+	    default: 'currentColor'
 	  }
 	})
 </script>

package/src/modules/icons/entities/IconFile.vue

@@ -8,7 +8,7 @@
 	const props = defineProps({
 	  fill: {
 	    type: String,
-	    default: 'rgb(var(--black))'
+	    default: 'currentColor'
 	  }
 	})
 </script>

package/src/modules/icons/entities/IconFollowing.vue

@@ -11,7 +11,7 @@
 	const props = defineProps({
 	  fill: {
 	    type: String,
-	    default: 'rgb(var(--black))'
+	    default: 'currentColor'
 	  }
 	})
 </script>