@ozdao/martyrs 0.2.570 → 0.2.572

package/src/components/FieldPhone/FieldPhone.vue

@@ -17,7 +17,7 @@
       :style="[dropdownStyle]"
       :tabindex="dropdownOptions.tabindex"
       @keydown.esc="reset"
-      class="br-solid br-black-transp-10 br-1px radius-thin"
+      class="br-black-transp-10 br-1px radius-thin"
     >
       <span class="flex-nowrap flex flex-v-center p-regular vti__selection">
         <span v-if="dropdownOptions.showFlags" v-html="activeCountryFlag" class="mn-r-nano" />

package/src/components/FieldTags/BlockTags.vue

@@ -26,7 +26,7 @@
       v-if="filteredSuggestedItems.length > 0" 
       v-for="(tag,index) in filteredSuggestedItems" 
       @click="addTag(tag)"
-      class="cursor-pointer t-medium ti-tag-toDefactor"
+      class="cursor-pointer fw-medium ti-tag-toDefactor"
       :class="{'mn-r-micro':index !== filteredSuggestedItems.length - 1}"
     >
       {{ tag.text }}

package/src/components/Loader/Loader.vue

@@ -5,7 +5,7 @@
       <circle class="circular-loader-circle" cx="50" cy="50" r="20" fill="none" stroke-width="4" stroke-miterlimit="10" />
     </svg>
     <div v-if="progress" class="progress-text">{{ progress }}</div>
-    <div v-if="status" class="uppercase t-semi w-m-10r status-text">{{ status }}</div>
+    <div v-if="status" class="uppercase fw-semi w-m-10r status-text">{{ status }}</div>
   </div>
 </template>
 

package/src/components/Menu/MenuItem.vue

@@ -37,7 +37,7 @@
               h(
                 'div',
                 {
-                  class: ['mn-b-thin', 'mn-t-thin', 'flex-center', 'flex', 'mn-r-small','flex-child','flex-child-shrink-0', 'i-big', 'bg-main', 'radius-thin']
+                  class: ['mn-b-thin', 'mn-t-thin', 'flex-center', 'flex', 'mn-r-small','flex-child','flex-shrink-0', 'i-big', 'bg-main', 'radius-thin']
                 },
                 iconSlot
               )
@@ -51,7 +51,7 @@
                 h(
                   'span',
                   {
-                    class: ['p-medium', 't-medium', 'mn-r-auto']
+                    class: ['p-medium', 'fw-medium', 'mn-r-auto']
                   },
                   textSlot
                 )

package/src/components/PhotoViewer/PhotoViewer.vue

@@ -214,7 +214,7 @@
       v-if="photos.length > 1"
     >
 
-      <span class="pos-absolute pos-l-small bs-small pos-t-small radius-small pd-thin bg-white t-black t-medium">
+      <span class="pos-absolute pos-l-small bs-small pos-t-small radius-small pd-thin bg-white t-black fw-medium">
         {{ currentIndex + 1 }} / {{ photos.length }}
       </span>
       

package/src/components/Radio/Radio.vue

@@ -20,7 +20,7 @@
 
       <div 
         v-if="radio !== value"
-        class="br-solid br-2px br-grey-transp-25 pos-absolute pos-t-0 pos-r-0 radius-extra w-100 h-100"
+        class="br-2px br-grey-transp-25 pos-absolute pos-t-0 pos-r-0 radius-extra w-100 h-100"
       >
 
       </div> 

package/src/components/Select/Select.vue

@@ -22,7 +22,7 @@
         class="bs-black pos-absolute pos-t-100 pos-l-0 z-index-5 pd-small radius-small bg-white mn-t-thin w-100"
         style="min-width: max-content;"
       >
-        <li @click.stop="selectOption(option)" v-for="option in optionsListed" class="radius-thin hover-bg-light pd-thin text-box-trim">
+        <li @click.stop="selectOption(option)" v-for="option in optionsListed" class="radius-thin hover:bg-light pd-thin text-box-trim">
           <span v-if="option" class="w-100">
             {{ option.name || option[props.value] || option }}
           </span>

package/src/components/Table/Table.vue

@@ -26,14 +26,14 @@ const getNestedValue = (obj, path) => path.split('.').reduce((o, k) => (o ? o[k]
     <table class="w-100 custom-table">
       <thead class="t-left bg-light t-black">
         <tr>
-          <th v-for="col in columns" :key="col.key" class="pd-small t-medium">
+          <th v-for="col in columns" :key="col.key" class="pd-small fw-medium">
             {{ col.label }}
           </th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="(row, rowIndex) in props.items" :key="rowIndex">
-          <td v-for="col in columns" :key="col.key" class="pd-small br-t br-solid br-light t-left">
+          <td v-for="col in columns" :key="col.key" class="pd-small br-t-1px br-light t-left">
             <!-- Передаем полный объект row и текущее значение -->
             <slot :name="`cell-${col.key}`" :value="getNestedValue(row, col.key)" :row="row">
               {{ getNestedValue(row, col.key) }}

package/src/components/Text/Text.vue

@@ -1,7 +1,7 @@
 <template>
   <span @click="toggleShow" class="">
     {{ shownText }}
-    <span v-if="isTruncated && showToggleText" class="cursor-pointer t-second">{{ showMoreText }}</span>
+    <span v-if="isTruncated && showToggleText" class="cursor-pointer t-grey">{{ showMoreText }}</span>
   </span>
 </template>
 

package/src/components/UploadImage/UploadImage.vue

@@ -4,7 +4,7 @@
       @click="onComponentClick"
       @drop="onDrop"
       @dragover.prevent
-      class="pos-relative radius-small br-solid br-1px br-black-transp-10 h-100 aspect-1x1 flex-v-center flex-h-center flex cursor-pointer"
+      class="pos-relative radius-small br-1px br-black-transp-10 h-100 aspect-1x1 flex-v-center flex-h-center flex cursor-pointer"
     >
       <img loading="lazy" 
         v-if="imageUrl || photo || previewUrl" 
@@ -42,7 +42,7 @@
     
     <!-- Text block -->
     <div v-if="text" class="upload-text-block  flex flex-column">
-      <span class="mn-b-small t-medium">{{ textConfig.title }}</span>
+      <span class="mn-b-small fw-medium">{{ textConfig.title }}</span>
       <span class="mn-b-medium t-transp">{{ textConfig.subtitle }}</span>
       <div v-if="!imageUrl && !photo && !previewUrl">
         <button @click="onComponentClick" class="button button-small w-max bg-main t-black cursor-pointer">

package/src/components/UploadImageMultiple/UploadImageMultiple.vue

@@ -14,9 +14,9 @@
         />
         <span v-if="options.showText || options.showTitle" class="mn-t-medium  mn-b-medium d-block h3 t-black">{{ text.title }}</span>
         <span v-if="options.showText" class="mn-b-small t-transp d-block ">{{ text.subtitle }}</span>
-        <span  v-if="options.showText"class="mn-b-small uppercase p-small t-medium d-block">or</span>
-        <button  v-if="options.showText" class="cursor-pointer mn-b-small br-2px br-main br-solid radius-extra pd-l-thin pd-r-thin  t-main">Browse Files</button>
-        <span  v-if="options.showText" class="uppercase p-small t-medium d-block ">Maximum size: 2MB</span>
+        <span  v-if="options.showText"class="mn-b-small uppercase p-small fw-medium d-block">or</span>
+        <button  v-if="options.showText" class="cursor-pointer mn-b-small br-2px br-main radius-extra pd-l-thin pd-r-thin  t-main">Browse Files</button>
+        <span  v-if="options.showText" class="uppercase p-small fw-medium d-block ">Maximum size: 2MB</span>
       </div>
       <Loader v-else class="pos-absolute"/>
     </transition>

package/src/configurator/components/layouts/layoutConfigurator.vue

@@ -1,5 +1,5 @@
 <template>
-	<section id="account" class="cols-2-1_3 gap-regular pd-big">
+	<section id="account" class="cols-[1fr_3fr] mobile:cols-1 gap-regular pd-big">
     <!-- ---------------------------------------------------------------- -->
     <!-- 02. Page Tabs  -->
     <!-- ---------------------------------------------------------------- -->

package/src/configurator/components/pages/Styles.vue

@@ -14,7 +14,7 @@
 				v-for="subcolor in color.colors"
 				:class="`mn-r-small w-100 h-8r flex-center flex radius-big bg-${subcolor}`"
 			>
-				<span class="uppercase t-semi p-small">{{subcolor}}</span>
+				<span class="uppercase fw-semi p-small">{{subcolor}}</span>
 			</div>
 		</div>
 	</div>
@@ -152,7 +152,7 @@
 	--main:      		0,255,136; 
 	--light-main:  		rgb(var(--main)), 0.1;
 	--second:    		34,102,255;
-	--light-second: 	rgb(var(--second)), 0.1;
+	--light-grey: 	rgb(var(--second)), 0.1;
 	--transparent:   0,0,0,0;
 	// Main and secondary colors
 

package/src/jit/.claude/settings.local.json

@@ -0,0 +1,10 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(find:*)",
+      "Bash({} ;)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

package/src/jit/CLAUDE.md

@@ -0,0 +1,387 @@
+# Martyrs JIT CSS Engine
+
+## Архитектура
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                      MartyrsJitPlugin                        │
+│  (plugin.js - точка входа для rspack)                       │
+├─────────────────────────────────────────────────────────────┤
+│  1. VirtualModulesPlugin → martyrs-jit.css                  │
+│  2. Loader (pre) → extractFromFile()                        │
+│  3. processAssets → заменяет placeholder на CSS             │
+└─────────────────────────────────────────────────────────────┘
+         │                    │                    │
+         ▼                    ▼                    ▼
+┌─────────────┐      ┌─────────────┐      ┌─────────────┐
+│  loader.js  │      │ extractor.js│      │   core.js   │
+│  (rspack    │      │ (парсинг    │      │ (MartyrsJIT │
+│   loader)   │      │  токенов)   │      │  генерация) │
+└─────────────┘      └─────────────┘      └─────────────┘
+                                                  │
+                           ┌──────────────────────┼──────────────────────┐
+                           ▼                      ▼                      ▼
+                    ┌─────────────┐        ┌─────────────┐        ┌─────────────┐
+                    │  rules.js   │        │ variants.js │        │    cache    │
+                    │  (паттерны  │        │ (mobile:,   │        │   (Map)     │
+                    │   → CSS)    │        │  hover:)    │        │             │
+                    └─────────────┘        └─────────────┘        └─────────────┘
+```
+
+## Файлы
+
+| Файл | Назначение |
+|------|------------|
+| `index.js` | Экспорты |
+| `core.js` | MartyrsJIT класс - ядро генерации CSS |
+| `plugin.js` | MartyrsJitPlugin - rspack плагин |
+| `loader.js` | Rspack loader для извлечения токенов |
+| `rules.js` | Правила: паттерн → CSS |
+| `variants.js` | Модификаторы: mobile:, hover:, dark: |
+| `extractor.js` | Извлечение токенов из исходников |
+
+## Как работает
+
+1. **Loader** (`loader.js`) вызывается для каждого `.vue/.js/.ts` файла
+2. Loader передаёт содержимое в `plugin.extractFromFile()`
+3. **Extractor** (`extractor.js`) парсит токены из `class="..."` и `:class="..."`
+4. В конце сборки `processAssets` hook вызывает `generateCSS()`
+5. **Core** (`core.js`) матчит токены по rules и генерирует CSS
+6. Placeholder `#--martyrs--{layer:__ALL__}` заменяется на CSS
+
+## Формат значений (resolveValue)
+
+```
+[200px]     → 200px           # arbitrary value
+medium      → var(--medium)   # CSS переменная (размеры)
+50r         → 50rem           # rem shorthand
+100vh       → 100vh           # viewport units (vh, vw, dvh, dvw, svh, svw, lvh, lvw)
+100         → 100%            # число = проценты
+auto        → auto            # keywords
+zero        → 0
+full        → 100%
+screen      → 100vh
+min/max/fit → min-content/max-content/fit-content
+```
+
+## Цвета
+
+### Доступные цвета (colorNames)
+
+```
+main, second, third, fourth, fifth     # основные
+black, dark, grey, light, white        # нейтральные
+red, red-nice, green, green-nice       # тона
+orange, orange-nice, yellow, yellow-nice
+youtube, telegram, twitter, instagram, reddit  # бренды
+transparent
+```
+
+### Варианты цветов (colorVariants)
+
+Для main/second/third/fourth/fifth и black/dark/grey/light/white:
+```
+extra, big, semi, medium, regular, small, thin, micro, nano
+```
+
+### Примеры цветовых классов
+
+```html
+<!-- Базовые цвета -->
+<div class="bg-main">           → background: rgb(var(--main))
+<div class="t-black">           → color: rgb(var(--black))
+<div class="fill-white">        → fill: rgb(var(--white))
+<div class="stroke-grey">       → stroke: rgb(var(--grey))
+
+<!-- С вариантами (светлее/темнее) -->
+<div class="bg-main-medium">    → background: var(--main-medium)
+<div class="t-black-thin">      → color: var(--black-thin)
+
+<!-- Прозрачность (transp-0 до transp-100) -->
+<div class="bg-main-transp-50"> → background: rgba(var(--main), 0.5)
+<div class="t-black-transp-25"> → color: rgba(var(--black), 0.25)
+
+<!-- Arbitrary -->
+<div class="bg-[#ff0000]">      → background: #ff0000
+<div class="t-[rgba(0,0,0,0.5)]"> → color: rgba(0,0,0,0.5)
+```
+
+## Трансформации
+
+Трансформации используют CSS переменные для комбинирования:
+
+```html
+<!-- Отдельные трансформации -->
+<div class="translate-x-medium">  → --m-tx: var(--medium)
+<div class="translate-y-50">      → --m-ty: 50%
+<div class="rotate-[45deg]">      → --m-rotate: 45deg
+<div class="scale-[1.5]">         → --m-scale-x: 1.5; --m-scale-y: 1.5
+
+<!-- Комбинирование (все работают вместе) -->
+<div class="translate-x-medium rotate-[45deg] scale-[1.2]">
+```
+
+CSS переменные в `all.scss`:
+```scss
+*, *::before, *::after {
+  --m-tx: 0; --m-ty: 0; --m-rotate: 0deg;
+  --m-skew-x: 0deg; --m-skew-y: 0deg;
+  --m-scale-x: 1; --m-scale-y: 1;
+}
+
+[class*="translate-"], [class*="rotate-"], [class*="scale-"], [class*="skew-"] {
+  transform: translateX(var(--m-tx)) translateY(var(--m-ty))
+             rotate(var(--m-rotate))
+             skewX(var(--m-skew-x)) skewY(var(--m-skew-y))
+             scaleX(var(--m-scale-x)) scaleY(var(--m-scale-y));
+}
+```
+
+## Негативные значения
+
+Суффикс `-negative` для отрицательных значений:
+
+```html
+<div class="mn-t-medium-negative">  → margin-top: calc(var(--medium) * -1)
+<div class="translate-x-50-negative"> → --m-tx: calc(50% * -1)
+<div class="pos-t-small-negative">  → top: calc(var(--small) * -1)
+```
+
+## Варианты (множественные)
+
+Поддерживаются цепочки вариантов:
+
+```html
+<!-- Один вариант -->
+<div class="mobile:d-block">
+<div class="hover:bg-main">
+
+<!-- Множественные варианты -->
+<div class="mobile:hover:bg-main">      → @media (max-width: 640px) { .class:hover { ... } }
+<div class="dark:hover:t-white">        → @media (prefers-color-scheme: dark) { .class:hover { ... } }
+<div class="mobile:focus:active:bg-red"> → все три варианта применяются
+```
+
+### Доступные варианты
+
+**Media queries:**
+- `mobile` — max-width: 640px
+- `tablet` — min-width: 641px and max-width: 1024px
+- `desktop` — min-width: 1025px and max-width: 1440px
+- `widescreen` — min-width: 1441px
+- `dark` — prefers-color-scheme: dark
+- `light` — prefers-color-scheme: light
+- `print` — print
+
+**Pseudo-классы:**
+- `hover`, `focus`, `active`, `disabled`
+- `first`, `last`, `odd`, `even`
+- `group-hover` — `.group:hover .class`
+
+## Добавление правил
+
+В `rules.js`:
+
+```javascript
+// Простое правило
+[/^opacity-(\d+)$/, (m) => `opacity: ${m[1] / 100};`],
+
+// С resolveValue для arbitrary values
+[/^gap-(.+)$/, (m, jit) => {
+  const v = resolveValue(m[1], jit);
+  return v ? `gap: ${v};` : null;
+}],
+
+// С handleNegative для поддержки -negative суффикса
+[/^mn-(.+)$/, (m, jit) => {
+  const v = handleNegative(m[1], jit);
+  return v ? `margin: ${v};` : null;
+}],
+```
+
+### Порядок правил ВАЖЕН!
+
+Более специфичные правила должны идти ПЕРЕД общими:
+
+```javascript
+// ✅ ПРАВИЛЬНО
+[/^bg-(.+)-transp-(\d+)$/, ...],  // transp сначала
+[/^bg-\[(.+)\]$/, ...],            // arbitrary
+[/^bg-([a-z][\w-]*)$/, ...],       // named последним
+
+// ❌ НЕПРАВИЛЬНО - bg-main-transp-50 зматчится как bg-([a-z][\w-]*) = "main-transp-50"
+[/^bg-([a-z][\w-]*)$/, ...],
+[/^bg-(.+)-transp-(\d+)$/, ...],
+```
+
+## Типографика
+
+### Font weight (fw-*)
+
+```html
+<div class="fw-bold">      → font-weight: 900
+<div class="fw-demi">      → font-weight: 700
+<div class="fw-semi">      → font-weight: 600
+<div class="fw-medium">    → font-weight: 500
+<div class="fw-regular">   → font-weight: 400
+<div class="fw-light">     → font-weight: 300
+<div class="fw-500">       → font-weight: 500
+<div class="fw-[650]">     → font-weight: 650
+```
+
+### White-space (ws-*)
+
+```html
+<div class="ws-nowrap">      → white-space: nowrap
+<div class="ws-normal">      → white-space: normal
+<div class="ws-pre">         → white-space: pre
+<div class="ws-pre-line">    → white-space: pre-line
+<div class="ws-pre-wrap">    → white-space: pre-wrap
+<div class="ws-break-spaces"> → white-space: break-spaces
+```
+
+### Line-height (lh-*)
+
+Использует resolveValue — поддерживает CSS переменные и любые значения:
+
+```html
+<div class="lh-medium">    → line-height: var(--medium)
+<div class="lh-125">       → line-height: 125%
+<div class="lh-[1.75]">    → line-height: 1.75
+<div class="lh-[2em]">     → line-height: 2em
+```
+
+### Text transform
+
+```html
+<div class="uppercase">    → text-transform: uppercase
+<div class="lowercase">    → text-transform: lowercase
+<div class="capitalize">   → text-transform: capitalize
+```
+
+### Text decoration
+
+```html
+<div class="underline">    → text-decoration: underline
+<div class="line-through"> → text-decoration: line-through
+```
+
+### User select
+
+```html
+<div class="select-none">  → user-select: none
+```
+
+### Truncate / Line clamp
+
+```html
+<div class="truncate">       → overflow: hidden; text-overflow: ellipsis; white-space: nowrap
+<div class="line-clamp-2">   → -webkit-line-clamp: 2 (многострочное обрезание)
+<div class="line-clamp-5">   → -webkit-line-clamp: 5
+```
+
+## Примеры токенов
+
+```html
+<!-- Grid -->
+<div class="cols-3">                    → grid-template-columns: repeat(3, minmax(0, 1fr))
+<div class="cols-[1fr_3fr]">            → grid-template-columns: 1fr 3fr
+<div class="rows-2">                    → grid-template-rows: repeat(2, minmax(0, 1fr))
+<div class="gap-medium">                → gap: var(--medium)
+
+<!-- Size -->
+<div class="w-100 h-50">                → width: 100%; height: 50%
+<div class="w-[300px] h-[200px]">       → width: 300px; height: 200px
+<div class="w-min-[100px] w-max-full">  → min-width: 100px; max-width: 100%
+
+<!-- Spacing -->
+<div class="pd-medium mn-t-small">      → padding: var(--medium); margin-top: var(--small)
+<div class="mn-t-medium-negative">      → margin-top: calc(var(--medium) * -1)
+
+<!-- Colors -->
+<div class="bg-main t-white">           → background: rgb(var(--main)); color: rgb(var(--white))
+<div class="bg-main-transp-50">         → background: rgba(var(--main), 0.5)
+
+<!-- Typography -->
+<div class="fw-bold ws-nowrap">         → font-weight: 900; white-space: nowrap
+<div class="truncate">                  → text truncation with ellipsis
+<div class="line-clamp-3">              → multiline truncation (3 lines)
+
+<!-- Responsive -->
+<div class="cols-3 mobile:cols-1">      → 3 колонки, на mobile 1
+<div class="d-flex mobile:d-block">     → flex, на mobile block
+
+<!-- States -->
+<div class="hover:bg-main">             → background on hover
+<div class="mobile:hover:bg-main">      → background on hover только на mobile
+```
+
+## Virtual Module
+
+Импорт в приложении:
+```javascript
+import 'martyrs-jit.css';
+```
+
+Rspack alias:
+```
+martyrs-jit.css → node_modules/.martyrs/__martyrs.css
+```
+
+## Watch Mode
+
+Токены хранятся по файлам для корректной работы в watch mode:
+
+```javascript
+// plugin.js
+this.tokensByFile = new Map(); // filename → Set<tokens>
+
+// При watchRun:
+// - Удаляются токены только для удалённых файлов (compiler.removedFiles)
+// - jit.reset() очищает кэш CSS
+// - Токены изменённых файлов обновляются через loader
+```
+
+Это предотвращает потерю токенов из неизменённых файлов при HMR.
+
+## Ограничения
+
+1. **Токены извлекаются статически** - динамически генерируемые классы не работают:
+   ```javascript
+   // ❌ Не работает
+   const size = 'medium';
+   class="pd-${size}"
+
+   // ✅ Работает
+   class="pd-medium"
+   ```
+
+2. **Arbitrary values в квадратных скобках** - underscore `_` заменяется на пробел:
+   ```
+   cols-[1fr_3fr] → grid-template-columns: 1fr 3fr
+   ```
+
+3. **Экранирование селекторов** - специальные символы экранируются:
+   ```
+   cols-[1fr_3fr] → .cols-\[1fr\_3fr\]
+   mobile:d-flex → .mobile\:d-flex
+   ```
+
+4. **Негативные значения только через суффикс** `-negative`:
+   ```
+   // ✅ Правильно
+   mn-t-medium-negative
+
+   // ❌ Не работает
+   -mn-t-medium
+   mn-t--medium
+   ```
+
+## Отладка
+
+В plugin.js выводится статистика:
+```
+[MartyrsJIT] 245 tokens in 3.45ms
+```
+
+Для verbose логов добавить `verbose: true` в options.