@ozdao/martyrs 0.2.571 → 0.2.572

package/src/jit/rules.js

@@ -0,0 +1,474 @@
+/**
+ * Martyrs JIT CSS Engine - Rules
+ *
+ * resolveValue() резолвит любые значения:
+ * [200px] → 200px | medium → var(--medium) | 50r → 50rem | 100vh → 100vh | 100 → 100%
+ */
+
+const sizeVars = ['extra', 'big', 'semi', 'medium', 'regular', 'small', 'thin', 'micro', 'nano'];
+
+// Цвета для bg-*, t-*, fill-*, stroke-*
+const 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'
+];
+const colorVariants = ['extra', 'big', 'semi', 'medium', 'regular', 'small', 'thin', 'micro', 'nano'];
+
+// Проверяет цвет и возвращает CSS значение
+function resolveColor(name) {
+  // Проверяем базовый цвет или вариант (main-medium, black-thin)
+  for (const color of colorNames) {
+    if (name === color) {
+      return `rgb(var(--${color}))`;
+    }
+    for (const variant of colorVariants) {
+      if (name === `${color}-${variant}`) {
+        return `var(--${color}-${variant})`;
+      }
+    }
+  }
+  return null;
+}
+
+export function resolveValue(value, jit) {
+  if (!value) return null;
+
+  // [200px], [1fr_3fr]
+  if (value.startsWith('[') && value.endsWith(']')) {
+    const inner = value.slice(1, -1);
+    return jit ? jit.parseArbitraryValue(inner) : inner.replace(/_/g, ' ');
+  }
+
+  // extra, big, semi, medium...
+  if (sizeVars.includes(value)) return `var(--${value})`;
+
+  // 50r → 50rem
+  if (/^\d+r$/.test(value)) return value.replace('r', 'rem');
+
+  // 100vh, 50vw, 100dvh, 90deg...
+  if (/^\d+(vh|vw|dvh|dvw|svh|svw|lvh|lvw|deg)$/.test(value)) return value;
+
+  // 100 → 100%
+  if (/^\d+$/.test(value)) return `${value}%`;
+
+  // special
+  if (value === 'auto') return 'auto';
+  if (value === 'zero') return '0';
+  if (value === 'full') return '100%';
+  if (value === 'screen') return '100vh';
+  if (value === 'min') return 'min-content';
+  if (value === 'max') return 'max-content';
+  if (value === 'fit') return 'fit-content';
+
+  return null;
+}
+
+const dir = { t: 'top', r: 'right', b: 'bottom', l: 'left' };
+
+// Easing functions map
+const easings = {
+  'linear': 'linear',
+  'ease': 'ease',
+  'ease-in': 'ease-in',
+  'ease-out': 'ease-out',
+  'ease-in-out': 'ease-in-out',
+  // Standard easings
+  'sine-in': 'cubic-bezier(0.12,0,0.39,0)',
+  'sine-out': 'cubic-bezier(0.61,1,0.88,1)',
+  'sine-in-out': 'cubic-bezier(0.37,0,0.63,1)',
+  'quad-in': 'cubic-bezier(0.11,0,0.5,0)',
+  'quad-out': 'cubic-bezier(0.5,1,0.89,1)',
+  'quad-in-out': 'cubic-bezier(0.45,0,0.55,1)',
+  'cubic': 'cubic-bezier(0.65,0,0.35,1)',
+  'cubic-in': 'cubic-bezier(0.32,0,0.67,0)',
+  'cubic-out': 'cubic-bezier(0.33,1,0.68,1)',
+  'cubic-in-out': 'cubic-bezier(0.65,0,0.35,1)',
+  'quart-in': 'cubic-bezier(0.5,0,0.75,0)',
+  'quart-out': 'cubic-bezier(0.25,1,0.5,1)',
+  'quart-in-out': 'cubic-bezier(0.76,0,0.24,1)',
+  'quint-in': 'cubic-bezier(0.64,0,0.78,0)',
+  'quint-out': 'cubic-bezier(0.22,1,0.36,1)',
+  'quint-in-out': 'cubic-bezier(0.83,0,0.17,1)',
+  'expo-in': 'cubic-bezier(0.7,0,0.84,0)',
+  'expo-out': 'cubic-bezier(0.16,1,0.3,1)',
+  'expo-in-out': 'cubic-bezier(0.87,0,0.13,1)',
+  'circ-in': 'cubic-bezier(0.55,0,1,0.45)',
+  'circ-out': 'cubic-bezier(0,0.55,0.45,1)',
+  'circ-in-out': 'cubic-bezier(0.85,0,0.15,1)',
+  'back-in': 'cubic-bezier(0.36,0,0.66,-0.56)',
+  'back-out': 'cubic-bezier(0.34,1.56,0.64,1)',
+  'back-in-out': 'cubic-bezier(0.68,-0.6,0.32,1.6)',
+  'elastic': 'cubic-bezier(0.17,0.67,0.33,0.94)',
+  'spring': 'cubic-bezier(0.23,1,0.32,1.01)',
+  'bounce': 'cubic-bezier(0.71,-0.46,0.88,0.6)',
+};
+
+function handleNegative(val, jit) {
+  const isNeg = val.endsWith('-negative');
+  const clean = isNeg ? val.slice(0, -9) : val;
+  const resolved = resolveValue(clean, jit);
+  if (!resolved) return null;
+  return isNeg ? `calc(${resolved} * -1)` : resolved;
+}
+
+export const rules = [
+  // Display
+  [/^d-(block|inline|inline-block|flex|inline-flex|grid|inline-grid|none|contents|table|table-row|table-cell)$/, (m) => `display: ${m[1]};`],
+
+  // Position
+  [/^pos-(relative|absolute|fixed|sticky|static)$/, (m) => `position: ${m[1]};`],
+  [/^pos-(t|r|b|l)-(.+)$/, (m, jit) => {
+    const v = handleNegative(m[2], jit);
+    return v ? `${dir[m[1]]}: ${v};` : null;
+  }],
+
+  // Grid
+  [/^cols-(.+)$/, (m, jit) => {
+    if (m[1].startsWith('[')) {
+      const v = resolveValue(m[1], jit);
+      return v ? `display: grid; grid-template-columns: ${v};` : null;
+    }
+    const n = parseInt(m[1]);
+    if (n > 0) return `display: grid; grid-template-columns: repeat(${n}, minmax(0, 1fr));`;
+    return null;
+  }],
+  [/^rows-(.+)$/, (m, jit) => {
+    if (m[1].startsWith('[')) {
+      const v = resolveValue(m[1], jit);
+      return v ? `display: grid; grid-template-rows: ${v};` : null;
+    }
+    const n = parseInt(m[1]);
+    if (n > 0) return `display: grid; grid-template-rows: repeat(${n}, minmax(0, 1fr));`;
+    return null;
+  }],
+
+  // Gap (специфичные перед общими)
+  [/^gap-x-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `column-gap: ${v};` : null; }],
+  [/^gap-y-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `row-gap: ${v};` : null; }],
+  [/^gap-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `gap: ${v};` : null; }],
+
+  // Size (специфичные перед общими)
+  [/^w-min-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `min-width: ${v};` : null; }],
+  [/^w-max-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `max-width: ${v};` : null; }],
+  [/^h-min-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `min-height: ${v};` : null; }],
+  [/^h-max-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `max-height: ${v};` : null; }],
+  [/^w-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `width: ${v};` : null; }],
+  [/^h-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `height: ${v};` : null; }],
+
+  // Padding (специфичные перед общими)
+  [/^pd-(t|r|b|l)-(.+)$/, (m, jit) => {
+    const v = handleNegative(m[2], jit);
+    return v ? `padding-${dir[m[1]]}: ${v};` : null;
+  }],
+  [/^pd-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `padding: ${v};` : null; }],
+
+  // Margin (специфичные перед общими)
+  [/^mn-(t|r|b|l)-(.+)$/, (m, jit) => {
+    const v = handleNegative(m[2], jit);
+    return v ? `margin-${dir[m[1]]}: ${v};` : null;
+  }],
+  [/^mn-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `margin: ${v};` : null; }],
+
+  // Border radius (специфичные перед общими)
+  [/^radius-tl-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `border-top-left-radius: ${v};` : null; }],
+  [/^radius-tr-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `border-top-right-radius: ${v};` : null; }],
+  [/^radius-bl-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `border-bottom-left-radius: ${v};` : null; }],
+  [/^radius-br-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `border-bottom-right-radius: ${v};` : null; }],
+  [/^radius-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `border-radius: ${v};` : null; }],
+
+  // Inset
+  [/^top-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `top: ${v};` : null; }],
+  [/^right-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `right: ${v};` : null; }],
+  [/^bottom-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `bottom: ${v};` : null; }],
+  [/^left-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `left: ${v};` : null; }],
+  [/^inset-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `inset: ${v};` : null; }],
+
+  // Z-index (z-index-0..10 → 0, 10, 20..100, z-index-1-negative → -10)
+  [/^z-index-(\d+)(-negative)?$/, (m) => {
+    const val = parseInt(m[1]) * 10;
+    return `z-index: ${m[2] ? -val : val};`;
+  }],
+  // Z-index (z-0, z-10, z-[100])
+  [/^z-(.+)$/, (m) => {
+    if (m[1].startsWith('[')) return `z-index: ${m[1].slice(1, -1)};`;
+    if (/^\d+$/.test(m[1])) return `z-index: ${m[1]};`;
+    if (m[1] === 'auto') return 'z-index: auto;';
+    return null;
+  }],
+
+  // Flex
+  [/^flex-center$/, () => 'align-items: center; justify-content: center;'],
+  [/^flex-(h-center|justify-start|justify-center|justify-end|justify-between|justify-around)$/, (m) => {
+    const map = { 'h-center': 'center', 'justify-start': 'flex-start', 'justify-center': 'center', 'justify-end': 'flex-end', 'justify-between': 'space-between', 'justify-around': 'space-around' };
+    return `justify-content: ${map[m[1]]};`;
+  }],
+  [/^flex-(v-center|align-start|align-center|align-end|align-stretch|align-baseline)$/, (m) => {
+    const map = { 'v-center': 'center', 'align-start': 'flex-start', 'align-center': 'center', 'align-end': 'flex-end', 'align-stretch': 'stretch', 'align-baseline': 'baseline' };
+    return `align-items: ${map[m[1]]};`;
+  }],
+  [/^flex-(row|column|row-reverse|column-reverse)$/, (m) => `flex-direction: ${m[1]};`],
+  [/^flex-(wrap|nowrap)$/, (m) => `flex-wrap: ${m[1]};`],
+  [/^flex-\[(.+)\]$/, (m, jit) => `flex: ${jit.parseArbitraryValue(m[1])};`],
+  [/^basis-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `flex-basis: ${v};` : null; }],
+  [/^order-(.+)$/, (m) => {
+    if (m[1].startsWith('[')) return `order: ${m[1].slice(1, -1)};`;
+    if (/^\d+$/.test(m[1])) return `order: ${m[1]};`;
+    return null;
+  }],
+
+  // Flex child
+  [/^flex-child-none$/, () => 'flex: none;'],
+  [/^flex-child-noresize$/, () => 'flex: 0;'],
+  [/^flex-child-1$/, () => 'flex: 1;'],
+  [/^flex-child-auto$/, () => 'flex: auto;'],
+  [/^flex-child-default$/, () => 'flex: 0 0 auto;'],
+  [/^flex-child-initial$/, () => 'flex: initial;'],
+  [/^flex-child-grow-(\d+)$/, (m) => `flex-grow: ${m[1]};`],
+  [/^flex-child-shrink-(\d+)$/, (m) => `flex-shrink: ${m[1]};`],
+  [/^flex-child-basis-(auto|0)$/, (m) => `flex-basis: ${m[1]};`],
+  [/^flex-child-order-(\d+|last)$/, (m) => `order: ${m[1] === 'last' ? '9999' : m[1]};`],
+
+  // Align self
+  [/^align-self-(start|center|end|stretch|baseline|auto)$/, (m) => `align-self: ${m[1]};`],
+
+  // Overflow
+  [/^o-(hidden|scroll|auto|visible|clip)$/, (m) => `overflow: ${m[1]};`],
+  [/^o-x-(hidden|scroll|auto|visible|clip)$/, (m) => `overflow-x: ${m[1]};`],
+  [/^o-y-(hidden|scroll|auto|visible|clip)$/, (m) => `overflow-y: ${m[1]};`],
+
+  // Text
+  [/^t-(left|center|right|justify)$/, (m) => `text-align: ${m[1]};`],
+  [/^text-\[(.+)\]$/, (m, jit) => `font-size: ${jit.parseArbitraryValue(m[1])};`],
+  [/^leading-\[(.+)\]$/, (m, jit) => `line-height: ${jit.parseArbitraryValue(m[1])};`],
+  [/^tracking-\[(.+)\]$/, (m, jit) => `letter-spacing: ${jit.parseArbitraryValue(m[1])};`],
+
+  // Colors - transparency (bg-main-transp-50 → rgba(var(--main), 0.5))
+  [/^bg-(.+)-transp-(\d+)$/, (m) => {
+    const color = m[1];
+    const opacity = parseInt(m[2]) / 100;
+    if (colorNames.includes(color)) return `background: rgba(var(--${color}), ${opacity});`;
+    return null;
+  }],
+  [/^t-(.+)-transp-(\d+)$/, (m) => {
+    const color = m[1];
+    const opacity = parseInt(m[2]) / 100;
+    if (colorNames.includes(color)) return `color: rgba(var(--${color}), ${opacity});`;
+    return null;
+  }],
+  [/^fill-(.+)-transp-(\d+)$/, (m) => {
+    const color = m[1];
+    const opacity = parseInt(m[2]) / 100;
+    if (colorNames.includes(color)) return `fill: rgba(var(--${color}), ${opacity});`;
+    return null;
+  }],
+
+  // Gradient arbitrary: bg-grad-[135deg_main_white], bg-grad-[to-r_black_transparent]
+  [/^bg-grad-\[(.+)\]$/, (m, jit) => {
+    const parts = jit.parseArbitraryValue(m[1]).split(' ');
+    if (parts.length < 3) return null;
+
+    // Направление: 135deg или to-r/to-br/etc
+    let dir = parts[0];
+    if (dir.startsWith('to-')) {
+      const dirMap = { 't': 'to top', 'tr': 'to top right', 'r': 'to right', 'br': 'to bottom right', 'b': 'to bottom', 'bl': 'to bottom left', 'l': 'to left', 'tl': 'to top left' };
+      dir = dirMap[dir.slice(3)] || 'to bottom';
+    }
+
+    // Цвета: main → rgb(var(--main)), main-50 → rgba(var(--main), 0.5), transparent, #hex
+    const resolveGradColor = (c) => {
+      if (c === 'transparent') return 'transparent';
+      if (c.startsWith('#')) return c;
+      const match = c.match(/^([a-z]+)-(\d+)$/);
+      if (match && colorNames.includes(match[1])) return `rgba(var(--${match[1]}), ${parseInt(match[2]) / 100})`;
+      if (colorNames.includes(c)) return `rgb(var(--${c}))`;
+      return c;
+    };
+
+    const colors = parts.slice(1).map(resolveGradColor).join(', ');
+    return `background: linear-gradient(${dir}, ${colors});`;
+  }],
+
+  // Colors (arbitrary) - ПЕРЕД named чтобы [#fff] не попал в named
+  [/^bg-\[(.+)\]$/, (m, jit) => `background: ${jit.parseArbitraryValue(m[1])};`],
+  [/^t-\[(.+)\]$/, (m, jit) => `color: ${jit.parseArbitraryValue(m[1])};`],
+  [/^fill-\[(.+)\]$/, (m, jit) => `fill: ${jit.parseArbitraryValue(m[1])};`],
+  [/^stroke-\[(.+)\]$/, (m, jit) => `stroke: ${jit.parseArbitraryValue(m[1])};`],
+
+  // Colors - named (bg-main, bg-main-medium, t-black, fill-white)
+  [/^bg-([a-z][\w-]*)$/, (m) => { const v = resolveColor(m[1]); return v ? `background: ${v};` : null; }],
+  [/^t-([a-z][\w-]*)$/, (m) => { const v = resolveColor(m[1]); return v ? `color: ${v};` : null; }],
+  [/^fill-([a-z][\w-]*)$/, (m) => { const v = resolveColor(m[1]); return v ? `fill: ${v};` : null; }],
+  [/^stroke-([a-z][\w-]*)$/, (m) => { const v = resolveColor(m[1]); return v ? `stroke: ${v};` : null; }],
+
+  // Transform (через CSS-переменные для комбинирования)
+  [/^translate-x-(.+)$/, (m, jit) => { const v = handleNegative(m[1], jit); return v ? `--m-tx: ${v};` : null; }],
+  [/^translate-y-(.+)$/, (m, jit) => { const v = handleNegative(m[1], jit); return v ? `--m-ty: ${v};` : null; }],
+  [/^translate-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `--m-tx: ${v}; --m-ty: ${v};` : null; }],
+  [/^rotate-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `--m-rotate: ${v};` : null; }],
+  [/^scale-x-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `--m-scale-x: ${v};` : null; }],
+  [/^scale-y-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `--m-scale-y: ${v};` : null; }],
+  [/^scale-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `--m-scale-x: ${v}; --m-scale-y: ${v};` : null; }],
+  [/^skew-x-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `--m-skew-x: ${v};` : null; }],
+  [/^skew-y-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `--m-skew-y: ${v};` : null; }],
+
+  // Aspect ratio (aspect-16x9, aspect-4x3, aspect-1x1)
+  [/^aspect-(\d+)x(\d+)$/, (m) => `aspect-ratio: ${m[1]} / ${m[2]};`],
+
+  // Object fit
+  [/^object-fit-(cover|contain|fill|none|scale-down)$/, (m) => `object-fit: ${m[1]};`],
+
+  // Backdrop blur (bg-blur-medium, bg-blur-[10px])
+  [/^bg-blur-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `backdrop-filter: blur(${v});` : null; }],
+
+  // Borders (box-shadow inset) - специфичные перед общими
+  // Side + color: br-t-green, br-l-red (1px default)
+  [/^br-(t|r|b|l)-(.+)-transp-(\d+)$/, (m) => {
+    const color = m[2];
+    const opacity = parseInt(m[3]) / 100;
+    if (!colorNames.includes(color)) return null;
+    const c = `rgba(var(--${color}), ${opacity})`;
+    if (m[1] === 't') return `box-shadow: inset 0 1px 0 0 ${c};`;
+    if (m[1] === 'r') return `box-shadow: inset -1px 0 0 0 ${c};`;
+    if (m[1] === 'b') return `box-shadow: inset 0 -1px 0 0 ${c};`;
+    if (m[1] === 'l') return `box-shadow: inset 1px 0 0 0 ${c};`;
+    return null;
+  }],
+  [/^br-(t|r|b|l)-([a-z][\w-]*)$/, (m) => {
+    const v = resolveColor(m[2]);
+    if (!v) return null;
+    if (m[1] === 't') return `box-shadow: inset 0 1px 0 0 ${v};`;
+    if (m[1] === 'r') return `box-shadow: inset -1px 0 0 0 ${v};`;
+    if (m[1] === 'b') return `box-shadow: inset 0 -1px 0 0 ${v};`;
+    if (m[1] === 'l') return `box-shadow: inset 1px 0 0 0 ${v};`;
+    return null;
+  }],
+  // Single sides with width: br-t-1px, br-r-2px, br-b-1px, br-l-1px
+  [/^br-t-(\d+)px$/, (m) => `box-shadow: inset 0 ${m[1]}px 0 0 var(--br-color, currentColor);`],
+  [/^br-r-(\d+)px$/, (m) => `box-shadow: inset -${m[1]}px 0 0 0 var(--br-color, currentColor);`],
+  [/^br-b-(\d+)px$/, (m) => `box-shadow: inset 0 -${m[1]}px 0 0 var(--br-color, currentColor);`],
+  [/^br-l-(\d+)px$/, (m) => `box-shadow: inset ${m[1]}px 0 0 0 var(--br-color, currentColor);`],
+  // All sides: br-1px, br-2px, br-[3px]
+  [/^br-(\d+)px$/, (m) => `box-shadow: inset 0 0 0 ${m[1]}px var(--br-color, currentColor);`],
+  [/^br-\[(\d+px)\]$/, (m) => `box-shadow: inset 0 0 0 ${m[1]} var(--br-color, currentColor);`],
+  // Border colors: br-grey, br-main, br-black-transp-50
+  [/^br-(.+)-transp-(\d+)$/, (m) => {
+    const color = m[1];
+    const opacity = parseInt(m[2]) / 100;
+    if (colorNames.includes(color)) return `--br-color: rgba(var(--${color}), ${opacity});`;
+    return null;
+  }],
+  [/^br-([a-z][\w-]*)$/, (m) => { const v = resolveColor(m[1]); return v ? `--br-color: ${v};` : null; }],
+
+  // Opacity (opacity-50, opacity-[0.75])
+  [/^opacity-(\d+)$/, (m) => `opacity: ${parseInt(m[1]) / 100};`],
+  [/^opacity-\[(.+)\]$/, (m) => `opacity: ${m[1]};`],
+
+  // Box shadows: bs-{size}, bs-{color}, bs-{color}-{size}, bs-none, bs-[...]
+  // Sizes: nano, micro, thin, small, regular, medium, semi, big, extra
+  // Colors: any from colorNames (black, dark, main, etc.)
+  [/^bs-(nano|micro|thin|small|regular|medium|semi|big|extra)$/, (m) => {
+    const scale = { nano: 0.5, micro: 1, thin: 2, small: 3, regular: 4, medium: 5, semi: 6, big: 8, extra: 10 };
+    const s = scale[m[1]];
+    return `box-shadow: 0 ${s}px ${s*2}px rgba(var(--dark),0.05), 0 ${s*2}px ${s*4}px rgba(var(--dark),0.08), 0 ${s*3}px ${s*6}px rgba(var(--dark),0.10);`;
+  }],
+  [/^bs-([a-z]+)-(nano|micro|thin|small|regular|medium|semi|big|extra)$/, (m) => {
+    const color = m[1];
+    if (!colorNames.includes(color)) return null;
+    const scale = { nano: 0.5, micro: 1, thin: 2, small: 3, regular: 4, medium: 5, semi: 6, big: 8, extra: 10 };
+    const s = scale[m[2]];
+    return `box-shadow: 0 ${s}px ${s*2}px rgba(var(--${color}),0.05), 0 ${s*2}px ${s*4}px rgba(var(--${color}),0.08), 0 ${s*3}px ${s*6}px rgba(var(--${color}),0.10);`;
+  }],
+  [/^bs-([a-z]+)$/, (m) => {
+    if (!colorNames.includes(m[1])) return null;
+    return `box-shadow: 0 4px 8px rgba(var(--${m[1]}),0.05), 0 8px 16px rgba(var(--${m[1]}),0.08), 0 12px 24px rgba(var(--${m[1]}),0.10);`;
+  }],
+  [/^bs-none$/, () => 'box-shadow: none;'],
+  [/^bs-\[(.+)\]$/, (m, jit) => `box-shadow: ${jit.parseArbitraryValue(m[1])};`],
+
+  // Transitions: ease-{type}, ease-{type}-{ms}, duration-{ms}, delay-{ms}
+  [/^ease-([a-z-]+)-(\d+)$/, (m) => {
+    const easing = easings[m[1]];
+    return easing ? `transition: all ${parseInt(m[2]) / 1000}s ${easing};` : null;
+  }],
+  [/^ease-([a-z-]+)$/, (m) => {
+    const easing = easings[m[1]];
+    return easing ? `transition: all 0.33s ${easing};` : null;
+  }],
+  [/^duration-(\d+)$/, (m) => `transition-duration: ${parseInt(m[1]) / 1000}s;`],
+  [/^delay-(\d+)$/, (m) => `transition-delay: ${parseInt(m[1]) / 1000}s;`],
+
+  // Pointer events
+  [/^no-events$/, () => 'pointer-events: none;'],
+
+  // Width/Height с min() (w-m-66r → width: min(100%, 66rem))
+  [/^w-m-(\d+)r$/, (m) => `width: min(100%, ${m[1]}rem);`],
+  [/^h-m-(\d+)r$/, (m) => `height: min(100%, ${m[1]}rem);`],
+
+  // Font weight (fw-bold, fw-500, fw-[600])
+  [/^fw-(bold|demi|semi|medium|regular|light)$/, (m) => {
+    const map = { bold: 900, demi: 700, semi: 600, medium: 500, regular: 400, light: 300 };
+    return `font-weight: ${map[m[1]]};`;
+  }],
+  [/^fw-\[(.+)\]$/, (m) => `font-weight: ${m[1]};`],
+  [/^fw-(\d+)$/, (m) => `font-weight: ${m[1]};`],
+
+  // White-space (ws-nowrap, ws-pre-line)
+  [/^ws-(nowrap|normal|pre|pre-line|pre-wrap|break-spaces)$/, (m) => `white-space: ${m[1]};`],
+
+  // Line-height (lh-medium, lh-125, lh-[1.75])
+  [/^lh-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `line-height: ${v};` : null; }],
+
+  // Text transform
+  [/^uppercase$/, () => 'text-transform: uppercase;'],
+  [/^lowercase$/, () => 'text-transform: lowercase;'],
+  [/^capitalize$/, () => 'text-transform: capitalize;'],
+
+  // Text decoration
+  [/^underline$/, () => 'text-decoration: underline;'],
+  [/^line-through$/, () => 'text-decoration: line-through;'],
+
+  // User select
+  [/^select-none$/, () => '-webkit-user-select: none; user-select: none;'],
+
+  // Truncate (truncate, line-clamp-1, line-clamp-[5])
+  [/^truncate$/, () => 'overflow: hidden; text-overflow: ellipsis; white-space: nowrap;'],
+  [/^line-clamp-(\d+)$/, (m) => `display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: ${m[1]};`],
+
+  // Cursor (cursor-pointer, cursor-move, cursor-grab, etc.)
+  [/^cursor-(pointer|move|text|help|wait|crosshair|not-allowed|grab|grabbing|default|none|auto)$/, (m) => `cursor: ${m[1]};`],
+  [/^cursor-(ns|ew|ne|nw|se|sw|n|e|s|w)-resize$/, (m) => `cursor: ${m[1]}-resize;`],
+
+  // Icon sizes (i-extra, i-big, i-medium, etc.) - используют CSS переменные
+  [/^i-(extra|big|semi|medium|regular|small|thin|micro|nano)$/, (m) => `width: var(--${m[1]}); height: var(--${m[1]});`],
+
+  // Flex shrink (flex-shrink-0, flex-shrink-1)
+  [/^flex-shrink-(\d+)$/, (m) => `flex-shrink: ${m[1]};`],
+
+  // Scroll snap type (scroll-snap-x-mandatory, scroll-snap-y-proximity)
+  [/^scroll-snap-(x|y)-(mandatory|proximity)$/, (m) => `scroll-snap-type: ${m[1]} ${m[2]};`],
+  // Scroll snap align (scroll-snap-start, scroll-snap-center)
+  [/^scroll-snap-(start|end|center|none)$/, (m) => `scroll-snap-align: ${m[1]};`],
+
+  // Scroll behavior (scroll-smooth, scroll-auto)
+  [/^scroll-(auto|smooth)$/, (m) => `scroll-behavior: ${m[1]};`],
+
+  // Scroll padding (scroll-pd-medium, scroll-pd-t-small) - через resolveValue
+  [/^scroll-pd-(t|r|b|l)-(.+)$/, (m, jit) => { const v = resolveValue(m[2], jit); return v ? `scroll-padding-${dir[m[1]]}: ${v};` : null; }],
+  [/^scroll-pd-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `scroll-padding: ${v};` : null; }],
+
+  // Scroll margin (scroll-mn-medium, scroll-mn-t-small) - через resolveValue
+  [/^scroll-mn-(t|r|b|l)-(.+)$/, (m, jit) => { const v = resolveValue(m[2], jit); return v ? `scroll-margin-${dir[m[1]]}: ${v};` : null; }],
+  [/^scroll-mn-(.+)$/, (m, jit) => { const v = resolveValue(m[1], jit); return v ? `scroll-margin: ${v};` : null; }],
+
+  // Overscroll (overscroll-x-contain, overscroll-none)
+  [/^overscroll-(x|y)-(auto|contain|none)$/, (m) => `overscroll-behavior-${m[1]}: ${m[2]};`],
+  [/^overscroll-(auto|contain|none)$/, (m) => `overscroll-behavior: ${m[1]};`],
+
+  // Scroll hide (scroll-hide)
+  [/^scroll-hide$/, () => `-ms-overflow-style: none; scrollbar-width: none;`],
+
+];
+
+export default rules;

package/src/jit/variants.js

@@ -0,0 +1,128 @@
+/**
+ * Martyrs JIT CSS Engine - Variants
+ *
+ * Варианты (модификаторы) для классов:
+ * - mobile:cols-2 -> @media (max-width: 640px) { .mobile\:cols-2 { ... } }
+ * - hover:bg-main -> .hover\:bg-main:hover { ... }
+ * - dark:bg-black -> @media (prefers-color-scheme: dark) { ... }
+ */
+
+export const variants = [
+  // ========================================
+  // RESPONSIVE BREAKPOINTS
+  // ========================================
+
+  {
+    name: 'mobile',
+    wrapper: (selector, css, jit) =>
+      `@media (max-width: 640px) { .${selector} { ${css} } }`
+  },
+
+  {
+    name: 'tablet',
+    wrapper: (selector, css, jit) =>
+      `@media (min-width: 641px) and (max-width: 1024px) { .${selector} { ${css} } }`
+  },
+
+  {
+    name: 'desktop',
+    wrapper: (selector, css, jit) =>
+      `@media (min-width: 1025px) and (max-width: 1440px) { .${selector} { ${css} } }`
+  },
+
+  {
+    name: 'widescreen',
+    wrapper: (selector, css, jit) =>
+      `@media (min-width: 1441px) { .${selector} { ${css} } }`
+  },
+
+  // ========================================
+  // PSEUDO-CLASSES
+  // ========================================
+
+  {
+    name: 'hover',
+    wrapper: (selector, css) =>
+      `.${selector}:hover { ${css} }`
+  },
+
+  {
+    name: 'focus',
+    wrapper: (selector, css) =>
+      `.${selector}:focus { ${css} }`
+  },
+
+  {
+    name: 'active',
+    wrapper: (selector, css) =>
+      `.${selector}:active { ${css} }`
+  },
+
+  {
+    name: 'disabled',
+    wrapper: (selector, css) =>
+      `.${selector}:disabled { ${css} }`
+  },
+
+  {
+    name: 'first',
+    wrapper: (selector, css) =>
+      `.${selector}:first-child { ${css} }`
+  },
+
+  {
+    name: 'last',
+    wrapper: (selector, css) =>
+      `.${selector}:last-child { ${css} }`
+  },
+
+  {
+    name: 'odd',
+    wrapper: (selector, css) =>
+      `.${selector}:nth-child(odd) { ${css} }`
+  },
+
+  {
+    name: 'even',
+    wrapper: (selector, css) =>
+      `.${selector}:nth-child(even) { ${css} }`
+  },
+
+  // ========================================
+  // COLOR SCHEME
+  // ========================================
+
+  {
+    name: 'dark',
+    wrapper: (selector, css) =>
+      `@media (prefers-color-scheme: dark) { .${selector} { ${css} } }`
+  },
+
+  {
+    name: 'light',
+    wrapper: (selector, css) =>
+      `@media (prefers-color-scheme: light) { .${selector} { ${css} } }`
+  },
+
+  // ========================================
+  // GROUP VARIANTS
+  // ========================================
+
+  {
+    name: 'group-hover',
+    wrapper: (selector, css) =>
+      `.group:hover .${selector} { ${css} }`
+  },
+
+  // ========================================
+  // PRINT
+  // ========================================
+
+  {
+    name: 'print',
+    wrapper: (selector, css) =>
+      `@media print { .${selector} { ${css} } }`
+  },
+];
+
+export default variants;

package/src/modules/auth/views/components/blocks/CardUser.vue

@@ -33,14 +33,14 @@
     <div v-if="action || role" class="mn-l-auto  flex-stretch flex-v-center flex">
       <span 
         v-if="role"
-        class="flex-child flex-child-shrink-0 capitalize w-max t-medium radius-big pd-thin bg-main"
+        class="flex-child flex-shrink-0 capitalize w-max fw-medium radius-big pd-thin bg-main"
       >
         {{role}}
       </span>
       <button 
         v-if="action" 
         @click.stop="action.method" 
-        class="h-2r w-2r t-white mn-l-thin capitalize t-medium radius-big bg-red"
+        class="h-2r w-2r t-white mn-l-thin capitalize fw-medium radius-big bg-red"
       >
         <component v-if="action.label.is" :is="action.label.is" v-bind="action.label.props"></component>  
 

package/src/modules/auth/views/components/blocks/ProfileCard.vue

@@ -5,21 +5,21 @@
         loading="lazy"
         v-if="store.users?.state?.current?.profile?.photo && store.users.state.current.profile.photo.length > 0"
         :src="(FILE_SERVER_URL || '') + store.users.state.current.profile.photo"
-        class="avatar radius-100 bg-white object-fit-cover i-semi"
+        class="avatar radius-extra bg-white object-fit-cover i-semi"
       />
 
       <PlaceholderUserpic
         v-else
-        class="avatar radius-100 i-semi"
+        class="avatar radius-extra i-semi"
       />
 
       <div class="profile-info flex-child-default">
-        <div class="profile-name mn-b-micro t-medium">{{ store.users?.state?.current?.profile?.name || 'Anonymous' }}</div>
+        <div class="profile-name mn-b-micro fw-medium">{{ store.users?.state?.current?.profile?.name || 'Anonymous' }}</div>
         <div class="lex-nowrap flex gap-micro">
           <div
             v-for="(role, index) in store.users?.state?.current?.roles"
             :key="index"
-            class="pd-thin radius-small t-small t-semi bg-white"
+            class="pd-thin radius-small t-small fw-semi bg-white"
           >
             {{ role.icon }}
             {{ role.name }}

package/src/modules/auth/views/components/layouts/Auth.vue

@@ -1,6 +1,6 @@
 <template>
   <div 
-  	class="cols-2-1_2 gap-small pd-small"
+  	class="cols-[1fr_2fr] mobile:cols-1 gap-small pd-small"
   >
     <router-view
     	class="pd-big mobile:pd-medium w-m-66r t-center" 

package/src/modules/auth/views/components/pages/EnterPassword.vue

@@ -24,9 +24,9 @@
 		</div>
 		<div
 			 v-if="route.query.method !== 'reset-password'" 
-			 class="p-regular t-semi mn-b-semi "
+			 class="p-regular fw-semi mn-b-semi "
 		>
-			 By registering, you agree to our <a class="t-second" href="/legal/eula" target="_blank" rel="noopener noreferrer">End User License Agreement (EULA)</a>
+			 By registering, you agree to our <a class="t-grey" href="/legal/eula" target="_blank" rel="noopener noreferrer">End User License Agreement (EULA)</a>
 		</div>
 		<!-- Button -->
 		<Button :submit="onSubmit" :callback="redirectTo" class="w-100 bg-main mn-b-big">