meno-core 1.0.53 → 1.1.0

package/lib/shared/utilityClassConfig.ts

@@ -1,9 +1,175 @@
 /**
  * Centralized configuration for utility class mappings
- * Single source of truth for property-to-prefix and CSS generation
+ * Single source of truth for property-to-class-root and CSS generation.
+ *
+ * Naming follows Tailwind CSS conventions:
+ *   - Static utilities reuse Tailwind's names: `flex`, `hidden`, `justify-center`,
+ *     `items-center`, `uppercase`, `whitespace-nowrap`, …
+ *   - Arbitrary values use Tailwind's bracket syntax with spaces encoded as
+ *     underscores: `p-[40px]`, `w-[50%]`, `m-[92px_0]`, `grid-cols-[repeat(3,1fr)]`.
+ *   - CSS variables use Tailwind v4's parenthesis shorthand: `bg-(--primary)`,
+ *     `text-(--primary)`; font-size variables carry a type hint:
+ *     `text-(length:--font-size-lg)`.
+ *   - Responsive overrides use breakpoint-name variants: `tablet:p-[24px]`,
+ *     `mobile:text-[24px]`.
  */
 
-// Mapping of CSS properties to utility class prefixes
+/**
+ * Canonical property emission/sort order. Shorthands (border, background) come
+ * before their longhands (borderColor, backgroundColor stays before backgroundImage)
+ * so generated CSS cascades correctly. Includes ALL known properties — also the
+ * ones without a value-carrying class root (statics-only / arbitrary-property).
+ */
+export const propertyOrder: string[] = [
+  // Padding
+  'padding',
+  'paddingTop',
+  'paddingRight',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingInline',
+  'paddingBlock',
+  // Margin
+  'margin',
+  'marginTop',
+  'marginRight',
+  'marginBottom',
+  'marginLeft',
+  'marginInline',
+  'marginBlock',
+  // Display & Layout
+  'display',
+  'flexDirection',
+  'justifyContent',
+  'alignItems',
+  'alignContent',
+  'flex',
+  'flexWrap',
+  'gap',
+  'rowGap',
+  'columnGap',
+  // Sizing
+  'width',
+  'height',
+  'maxWidth',
+  'maxHeight',
+  'minWidth',
+  'minHeight',
+  'aspectRatio',
+  // Colors & Background
+  'backgroundColor',
+  'background',
+  'backgroundImage',
+  'color',
+  // Borders & Radius
+  'border',
+  'borderRadius',
+  'borderTop',
+  'borderRight',
+  'borderBottom',
+  'borderLeft',
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderBottomLeftRadius',
+  'borderBottomRightRadius',
+  'borderColor',
+  // Text
+  'fontSize',
+  'fontWeight',
+  'fontFamily',
+  'textAlign',
+  'textDecoration',
+  'textTransform',
+  'lineHeight',
+  'letterSpacing',
+  'wordBreak',
+  'overflowWrap',
+  'textIndent',
+  'verticalAlign',
+  'whiteSpace',
+  // Lists
+  'listStyle',
+  'listStyleType',
+  'listStylePosition',
+  // Transform & Effects
+  'opacity',
+  'transform',
+  'transformOrigin',
+  'boxShadow',
+  'textShadow',
+  'filter',
+  'backdropFilter',
+  'backfaceVisibility',
+  'mixBlendMode',
+  'clipPath',
+  // Positioning
+  'position',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'inset',
+  'zIndex',
+  // Grid Layout
+  'gridTemplateColumns',
+  'gridTemplateRows',
+  'gridTemplateAreas',
+  'gridGap',
+  'gridAutoFlow',
+  'gridColumn',
+  'gridRow',
+  'gridArea',
+  'gridAutoRows',
+  'gridAutoColumns',
+  'justifyItems',
+  'justifySelf',
+  'placeContent',
+  'placeItems',
+  'placeSelf',
+  // Flexbox extras
+  'flexGrow',
+  'flexShrink',
+  'flexBasis',
+  'order',
+  'alignSelf',
+  // Outline
+  'outline',
+  'outlineWidth',
+  'outlineStyle',
+  'outlineColor',
+  'outlineOffset',
+  // Other
+  'overflow',
+  'overflowX',
+  'overflowY',
+  'cursor',
+  'pointerEvents',
+  'userSelect',
+  'transition',
+  'objectFit',
+  'objectPosition',
+  'boxSizing',
+  'visibility',
+  'resize',
+  'scrollBehavior',
+  'accentColor',
+];
+
+/**
+ * Mapping of CSS properties to Tailwind class roots — only for properties that
+ * can carry a value (`root-[value]`, `root-(--var)`, `root-keyword`).
+ * Properties whose values are always keywords (display, position, textAlign, …)
+ * live in `staticUtilities` instead; properties with no Tailwind root fall back
+ * to arbitrary-property syntax `[clip-path:circle(50%)]`.
+ *
+ * Several properties intentionally SHARE a root (Tailwind semantics) and are
+ * disambiguated by value type at parse time:
+ *   - `text`   → color | fontSize
+ *   - `font`   → fontWeight (numeric) | fontFamily
+ *   - `bg`     → backgroundColor | backgroundImage (url()/gradients)
+ *   - `border` → border shorthand | borderColor
+ *   - `outline`→ outline shorthand | outlineWidth | outlineColor
+ */
 export const propertyMap: Record<string, string> = {
   // Padding
   padding: 'p',
@@ -23,136 +189,102 @@ export const propertyMap: Record<string, string> = {
   marginInline: 'mx',
   marginBlock: 'my',
 
-  // Display & Layout
-  display: 'd',
-  flexDirection: 'fd',
-  justifyContent: 'jc',
-  alignItems: 'ai',
-  alignContent: 'ac',
+  // Flexbox
   flex: 'flex',
-  flexWrap: 'fw',
-  gap: 'g',
-  rowGap: 'rg',
-  columnGap: 'cg',
+  gap: 'gap',
+  rowGap: 'gap-y',
+  columnGap: 'gap-x',
+  flexGrow: 'grow',
+  flexShrink: 'shrink',
+  flexBasis: 'basis',
+  order: 'order',
 
   // Sizing
   width: 'w',
   height: 'h',
-  maxWidth: 'mw',
-  maxHeight: 'mh',
-  minWidth: 'miw',
-  minHeight: 'mih',
-  aspectRatio: 'ar',
+  maxWidth: 'max-w',
+  maxHeight: 'max-h',
+  minWidth: 'min-w',
+  minHeight: 'min-h',
+  aspectRatio: 'aspect',
 
   // Colors & Background
-  backgroundColor: 'bgc',
-  background: 'bg',
-  backgroundImage: 'bgi',
-  color: 'c',
+  backgroundColor: 'bg',
+  backgroundImage: 'bg',
+  color: 'text',
 
   // Borders & Radius
-  border: 'b',
-  borderRadius: 'br',
-  borderTop: 'bt',
+  border: 'border',
+  borderColor: 'border',
+  borderTop: 'border-t',
   borderRight: 'border-r',
-  borderBottom: 'bb',
-  borderLeft: 'bl',
-  borderTopLeftRadius: 'brtl',
-  borderTopRightRadius: 'brtr',
-  borderBottomLeftRadius: 'brbl',
-  borderBottomRightRadius: 'brbr',
-  borderColor: 'bc',
+  borderBottom: 'border-b',
+  borderLeft: 'border-l',
+  borderRadius: 'rounded',
+  borderTopLeftRadius: 'rounded-tl',
+  borderTopRightRadius: 'rounded-tr',
+  borderBottomLeftRadius: 'rounded-bl',
+  borderBottomRightRadius: 'rounded-br',
 
   // Text
-  fontSize: 'fs',
-  fontWeight: 'fe',
-  fontFamily: 'ff',
-  textAlign: 'ta',
-  textDecoration: 'td',
-  textTransform: 'tt',
-  lineHeight: 'lh',
-  letterSpacing: 'ls',
-  wordBreak: 'wb',
-  overflowWrap: 'ow',
-  textIndent: 'ti',
-  verticalAlign: 'va',
-  whiteSpace: 'whs',
+  fontSize: 'text',
+  fontWeight: 'font',
+  fontFamily: 'font',
+  lineHeight: 'leading',
+  letterSpacing: 'tracking',
+  textIndent: 'indent',
+  verticalAlign: 'align',
 
   // Lists
-  listStyle: 'lst',
-  listStyleType: 'lstt',
-  listStylePosition: 'lstp',
+  listStyleType: 'list',
 
   // Transform & Effects
-  opacity: 'o',
-  transform: 'tm',
-  transformOrigin: 'tmo',
-  boxShadow: 'bsh',
-  textShadow: 'ts',
-  filter: 'flt',
-  backdropFilter: 'bdf',
-  backfaceVisibility: 'bfv',
-  mixBlendMode: 'mbm',
-  clipPath: 'cp',
+  opacity: 'opacity',
+  transform: 'transform',
+  transformOrigin: 'origin',
+  boxShadow: 'shadow',
+  textShadow: 'text-shadow',
+  filter: 'filter',
+  backdropFilter: 'backdrop-filter',
 
   // Positioning
-  position: 'pos',
   top: 'top',
-  right: 'r',
-  bottom: 'bo',
-  left: 'l',
-  inset: 'ins',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left',
+  inset: 'inset',
   zIndex: 'z',
 
   // Grid Layout
-  gridTemplateColumns: 'gtc',
-  gridTemplateRows: 'gtr',
-  gridTemplateAreas: 'gta',
-  gridGap: 'gg',
-  gridAutoFlow: 'gaf',
-  gridColumn: 'gc',
-  gridRow: 'gr',
-  gridArea: 'ga',
-  gridAutoRows: 'gar',
-  gridAutoColumns: 'gac',
-  justifyItems: 'ji',
-  justifySelf: 'jse',
-  placeContent: 'plc',
-  placeItems: 'pli',
-  placeSelf: 'pls',
-
-  // Flexbox extras
-  flexGrow: 'fg',
-  flexShrink: 'fsh',
-  flexBasis: 'fb',
-  order: 'ord',
-  alignSelf: 'as',
+  gridTemplateColumns: 'grid-cols',
+  gridTemplateRows: 'grid-rows',
+  gridColumn: 'col',
+  gridRow: 'row',
+  gridAutoRows: 'auto-rows',
+  gridAutoColumns: 'auto-cols',
 
   // Outline
-  outline: 'ol',
-  outlineWidth: 'olw',
-  outlineStyle: 'ols',
-  outlineColor: 'olc',
-  outlineOffset: 'olo',
+  outline: 'outline',
+  outlineWidth: 'outline',
+  outlineColor: 'outline',
+  outlineOffset: 'outline-offset',
 
   // Other
-  overflow: 'ov',
-  overflowX: 'ovx',
-  overflowY: 'ovy',
-  cursor: 'cu',
-  pointerEvents: 'pe',
-  userSelect: 'us',
-  transition: 'tn',
-  objectFit: 'objf',
-  objectPosition: 'objp',
-  boxSizing: 'bsz',
-  visibility: 'vis',
-  resize: 'rsz',
-  scrollBehavior: 'scb',
-  accentColor: 'acc',
+  overflow: 'overflow',
+  overflowX: 'overflow-x',
+  overflowY: 'overflow-y',
+  cursor: 'cursor',
+  transition: 'transition',
+  objectPosition: 'object',
+  accentColor: 'accent',
 };
 
-// Mapping of prefixes to CSS property names for dynamic rule generation
+/**
+ * Mapping of class roots to their DEFAULT CSS property (kebab-case).
+ * Roots shared by several properties (text, font, bg, border, outline, object)
+ * map to their most common property here; value-type disambiguation happens in
+ * `resolveRootProperty` (utilityClassNames.ts).
+ */
 export const prefixToCSSProperty: Record<string, string> = {
   // Spacing
   p: 'padding',
@@ -169,275 +301,558 @@ export const prefixToCSSProperty: Record<string, string> = {
   ml: 'margin-left',
   mx: 'margin',
   my: 'margin',
-  g: 'gap',
-  rg: 'row-gap',
-  cg: 'column-gap',
+  gap: 'gap',
+  'gap-y': 'row-gap',
+  'gap-x': 'column-gap',
 
   // Sizing
   w: 'width',
   h: 'height',
-  mw: 'max-width',
-  mh: 'max-height',
-  miw: 'min-width',
-  mih: 'min-height',
-  ar: 'aspect-ratio',
+  'max-w': 'max-width',
+  'max-h': 'max-height',
+  'min-w': 'min-width',
+  'min-h': 'min-height',
+  aspect: 'aspect-ratio',
 
   // Colors & Background
-  bgc: 'background-color',
-  bg: 'background',
-  bgi: 'background-image',
-  c: 'color',
-  bc: 'border-color',
+  bg: 'background-color',
+  text: 'color',
+  accent: 'accent-color',
 
   // Borders
-  b: 'border',
-  br: 'border-radius',
-  brtl: 'border-top-left-radius',
-  brtr: 'border-top-right-radius',
-  brbl: 'border-bottom-left-radius',
-  brbr: 'border-bottom-right-radius',
-  bt: 'border-top',
-  bb: 'border-bottom',
-  bl: 'border-left',
+  border: 'border',
+  'border-t': 'border-top',
   'border-r': 'border-right',
+  'border-b': 'border-bottom',
+  'border-l': 'border-left',
+  rounded: 'border-radius',
+  'rounded-tl': 'border-top-left-radius',
+  'rounded-tr': 'border-top-right-radius',
+  'rounded-bl': 'border-bottom-left-radius',
+  'rounded-br': 'border-bottom-right-radius',
 
   // Text
-  fs: 'font-size',
-  fe: 'font-weight',
-  ff: 'font-family',
-  ta: 'text-align',
-  td: 'text-decoration',
-  tt: 'text-transform',
-  lh: 'line-height',
-  ls: 'letter-spacing',
-  wb: 'word-break',
-  ow: 'overflow-wrap',
-  ti: 'text-indent',
-  va: 'vertical-align',
-  whs: 'white-space',
+  font: 'font-weight',
+  leading: 'line-height',
+  tracking: 'letter-spacing',
+  indent: 'text-indent',
+  align: 'vertical-align',
 
   // Lists
-  lst: 'list-style',
-  lstt: 'list-style-type',
-  lstp: 'list-style-position',
-
-  // Display
-  d: 'display',
+  list: 'list-style-type',
 
   // Flexbox
-  fd: 'flex-direction',
-  jc: 'justify-content',
-  ai: 'align-items',
-  ac: 'align-content',
-  as: 'align-self',
   flex: 'flex',
-  fw: 'flex-wrap',
-  fg: 'flex-grow',
-  fsh: 'flex-shrink',
-  fb: 'flex-basis',
-  ord: 'order',
+  grow: 'flex-grow',
+  shrink: 'flex-shrink',
+  basis: 'flex-basis',
+  order: 'order',
 
   // Grid
-  gtc: 'grid-template-columns',
-  gtr: 'grid-template-rows',
-  gta: 'grid-template-areas',
-  gg: 'grid-gap',
-  gaf: 'grid-auto-flow',
-  gc: 'grid-column',
-  gr: 'grid-row',
-  ga: 'grid-area',
-  gar: 'grid-auto-rows',
-  gac: 'grid-auto-columns',
-  ji: 'justify-items',
-  jse: 'justify-self',
-  plc: 'place-content',
-  pli: 'place-items',
-  pls: 'place-self',
+  'grid-cols': 'grid-template-columns',
+  'grid-rows': 'grid-template-rows',
+  col: 'grid-column',
+  row: 'grid-row',
+  'auto-rows': 'grid-auto-rows',
+  'auto-cols': 'grid-auto-columns',
 
   // Effects
-  o: 'opacity',
-  tm: 'transform',
-  tmo: 'transform-origin',
-  bsh: 'box-shadow',
-  ts: 'text-shadow',
-  flt: 'filter',
-  bdf: 'backdrop-filter',
-  bfv: 'backface-visibility',
-  mbm: 'mix-blend-mode',
-  cp: 'clip-path',
+  opacity: 'opacity',
+  transform: 'transform',
+  origin: 'transform-origin',
+  shadow: 'box-shadow',
+  'text-shadow': 'text-shadow',
+  filter: 'filter',
+  'backdrop-filter': 'backdrop-filter',
 
   // Positioning
-  pos: 'position',
   top: 'top',
-  r: 'right',
-  bo: 'bottom',
-  l: 'left',
-  ins: 'inset',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left',
+  inset: 'inset',
   z: 'z-index',
 
   // Outline
-  ol: 'outline',
-  olw: 'outline-width',
-  ols: 'outline-style',
-  olc: 'outline-color',
-  olo: 'outline-offset',
+  outline: 'outline',
+  'outline-offset': 'outline-offset',
 
   // Other
-  ov: 'overflow',
-  ovx: 'overflow-x',
-  ovy: 'overflow-y',
-  cu: 'cursor',
-  pe: 'pointer-events',
-  us: 'user-select',
-  tn: 'transition',
-  objf: 'object-fit',
-  objp: 'object-position',
-  bsz: 'box-sizing',
-  vis: 'visibility',
-  rsz: 'resize',
-  scb: 'scroll-behavior',
-  acc: 'accent-color',
+  overflow: 'overflow',
+  'overflow-x': 'overflow-x',
+  'overflow-y': 'overflow-y',
+  cursor: 'cursor',
+  transition: 'transition',
+  object: 'object-position',
 };
 
-// Special value mappings for specific properties
-export const specialValueMappings: Record<string, Record<string, string>> = {
+/**
+ * Static utilities: property → value → Tailwind class name.
+ * These are emitted as-is (no brackets) and have fixed reverse mappings.
+ * When two values map to the same class (e.g. 'flex-start' and 'start' →
+ * `justify-start`), the FIRST entry is the canonical reverse value.
+ */
+export const staticUtilities: Record<string, Record<string, string>> = {
   display: {
-    flex: 'f',
-    grid: 'g',
-    block: 'b',
-    inline: 'i',
-    'inline-block': 'ib',
-    none: 'h',
-    'inline-flex': 'if',
-    'inline-grid': 'ig',
+    flex: 'flex',
+    grid: 'grid',
+    block: 'block',
+    inline: 'inline',
+    'inline-block': 'inline-block',
+    none: 'hidden',
+    'inline-flex': 'inline-flex',
+    'inline-grid': 'inline-grid',
+    table: 'table',
+    contents: 'contents',
+    'flow-root': 'flow-root',
+    'list-item': 'list-item',
   },
   flexDirection: {
-    column: 'fd-col',
-    row: 'fd-row',
+    column: 'flex-col',
+    row: 'flex-row',
+    'column-reverse': 'flex-col-reverse',
+    'row-reverse': 'flex-row-reverse',
+  },
+  flexWrap: {
+    wrap: 'flex-wrap',
+    nowrap: 'flex-nowrap',
+    'wrap-reverse': 'flex-wrap-reverse',
+  },
+  flex: {
+    '1': 'flex-1',
+    auto: 'flex-auto',
+    none: 'flex-none',
+    initial: 'flex-initial',
+  },
+  flexGrow: {
+    '1': 'grow',
+    '0': 'grow-0',
+  },
+  flexShrink: {
+    '1': 'shrink',
+    '0': 'shrink-0',
   },
   justifyContent: {
-    center: 'jc-c',
-    'flex-start': 'jc-s',
-    'flex-end': 'jc-e',
-    'space-between': 'jc-b',
-    'space-around': 'jc-a',
-    'space-evenly': 'jc-ev',
+    center: 'justify-center',
+    'flex-start': 'justify-start',
+    start: 'justify-start',
+    'flex-end': 'justify-end',
+    end: 'justify-end',
+    'space-between': 'justify-between',
+    'space-around': 'justify-around',
+    'space-evenly': 'justify-evenly',
+    stretch: 'justify-stretch',
+    normal: 'justify-normal',
   },
   alignItems: {
-    center: 'ai-c',
-    'flex-start': 'ai-s',
-    'flex-end': 'ai-e',
-    stretch: 'ai-st',
-    baseline: 'ai-b',
+    center: 'items-center',
+    'flex-start': 'items-start',
+    start: 'items-start',
+    'flex-end': 'items-end',
+    end: 'items-end',
+    stretch: 'items-stretch',
+    baseline: 'items-baseline',
+  },
+  alignContent: {
+    center: 'content-center',
+    'flex-start': 'content-start',
+    start: 'content-start',
+    'flex-end': 'content-end',
+    end: 'content-end',
+    'space-between': 'content-between',
+    'space-around': 'content-around',
+    'space-evenly': 'content-evenly',
+    stretch: 'content-stretch',
+    normal: 'content-normal',
+  },
+  alignSelf: {
+    auto: 'self-auto',
+    center: 'self-center',
+    'flex-start': 'self-start',
+    start: 'self-start',
+    'flex-end': 'self-end',
+    end: 'self-end',
+    stretch: 'self-stretch',
+    baseline: 'self-baseline',
+  },
+  justifyItems: {
+    center: 'justify-items-center',
+    start: 'justify-items-start',
+    end: 'justify-items-end',
+    stretch: 'justify-items-stretch',
+  },
+  justifySelf: {
+    auto: 'justify-self-auto',
+    center: 'justify-self-center',
+    start: 'justify-self-start',
+    end: 'justify-self-end',
+    stretch: 'justify-self-stretch',
+  },
+  placeContent: {
+    center: 'place-content-center',
+    start: 'place-content-start',
+    end: 'place-content-end',
+    'space-between': 'place-content-between',
+    'space-around': 'place-content-around',
+    'space-evenly': 'place-content-evenly',
+    stretch: 'place-content-stretch',
+  },
+  placeItems: {
+    center: 'place-items-center',
+    start: 'place-items-start',
+    end: 'place-items-end',
+    stretch: 'place-items-stretch',
+  },
+  placeSelf: {
+    auto: 'place-self-auto',
+    center: 'place-self-center',
+    start: 'place-self-start',
+    end: 'place-self-end',
+    stretch: 'place-self-stretch',
+  },
+  position: {
+    static: 'static',
+    fixed: 'fixed',
+    absolute: 'absolute',
+    relative: 'relative',
+    sticky: 'sticky',
   },
   overflow: {
-    hidden: 'o-h',
-    auto: 'o-a',
-    scroll: 'o-s',
-    visible: 'o-v',
+    hidden: 'overflow-hidden',
+    auto: 'overflow-auto',
+    scroll: 'overflow-scroll',
+    visible: 'overflow-visible',
+    clip: 'overflow-clip',
+  },
+  overflowX: {
+    hidden: 'overflow-x-hidden',
+    auto: 'overflow-x-auto',
+    scroll: 'overflow-x-scroll',
+    visible: 'overflow-x-visible',
+    clip: 'overflow-x-clip',
+  },
+  overflowY: {
+    hidden: 'overflow-y-hidden',
+    auto: 'overflow-y-auto',
+    scroll: 'overflow-y-scroll',
+    visible: 'overflow-y-visible',
+    clip: 'overflow-y-clip',
+  },
+  textAlign: {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+    justify: 'text-justify',
+    start: 'text-start',
+    end: 'text-end',
+  },
+  textDecoration: {
+    underline: 'underline',
+    overline: 'overline',
+    'line-through': 'line-through',
+    none: 'no-underline',
+  },
+  textTransform: {
+    uppercase: 'uppercase',
+    lowercase: 'lowercase',
+    capitalize: 'capitalize',
+    none: 'normal-case',
   },
-  cursor: {
-    pointer: 'cursor-pointer',
-    default: 'cursor-default',
+  whiteSpace: {
+    normal: 'whitespace-normal',
+    nowrap: 'whitespace-nowrap',
+    pre: 'whitespace-pre',
+    'pre-wrap': 'whitespace-pre-wrap',
+    'pre-line': 'whitespace-pre-line',
+    'break-spaces': 'whitespace-break-spaces',
+  },
+  wordBreak: {
+    normal: 'break-normal',
+    'break-all': 'break-all',
+    'keep-all': 'break-keep',
+    'break-word': 'break-word',
+  },
+  overflowWrap: {
+    normal: 'wrap-normal',
+    'break-word': 'wrap-break-word',
+    anywhere: 'wrap-anywhere',
+  },
+  fontWeight: {
+    normal: 'font-normal',
+    bold: 'font-bold',
+    bolder: 'font-bolder',
+    lighter: 'font-lighter',
+  },
+  color: {
+    transparent: 'text-transparent',
+    currentColor: 'text-current',
+    inherit: 'text-inherit',
+  },
+  backgroundColor: {
+    transparent: 'bg-transparent',
+    currentColor: 'bg-current',
+    inherit: 'bg-inherit',
+  },
+  backgroundImage: {
+    none: 'bg-none',
+  },
+  borderColor: {
+    transparent: 'border-transparent',
+    currentColor: 'border-current',
+    inherit: 'border-inherit',
   },
   pointerEvents: {
-    none: 'pe-none',
-    auto: 'pe-auto',
+    none: 'pointer-events-none',
+    auto: 'pointer-events-auto',
   },
   userSelect: {
-    none: 'us-none',
-    auto: 'us-auto',
-    text: 'us-text',
-    all: 'us-all',
+    none: 'select-none',
+    auto: 'select-auto',
+    text: 'select-text',
+    all: 'select-all',
+  },
+  objectFit: {
+    contain: 'object-contain',
+    cover: 'object-cover',
+    fill: 'object-fill',
+    none: 'object-none',
+    'scale-down': 'object-scale-down',
+  },
+  boxSizing: {
+    'border-box': 'box-border',
+    'content-box': 'box-content',
+  },
+  visibility: {
+    visible: 'visible',
+    hidden: 'invisible',
+    collapse: 'collapse',
+  },
+  resize: {
+    both: 'resize',
+    horizontal: 'resize-x',
+    vertical: 'resize-y',
+    none: 'resize-none',
+  },
+  scrollBehavior: {
+    smooth: 'scroll-smooth',
+    auto: 'scroll-auto',
+  },
+  gridAutoFlow: {
+    row: 'grid-flow-row',
+    column: 'grid-flow-col',
+    dense: 'grid-flow-dense',
+    'row dense': 'grid-flow-row-dense',
+    'column dense': 'grid-flow-col-dense',
+  },
+  listStyleType: {
+    none: 'list-none',
+    disc: 'list-disc',
+    decimal: 'list-decimal',
+  },
+  listStylePosition: {
+    inside: 'list-inside',
+    outside: 'list-outside',
+  },
+  backfaceVisibility: {
+    visible: 'backface-visible',
+    hidden: 'backface-hidden',
+  },
+  transition: {
+    none: 'transition-none',
+  },
+  transform: {
+    none: 'transform-none',
+  },
+  boxShadow: {
+    none: 'shadow-none',
+  },
+  outline: {
+    none: 'outline-none',
   },
-  whiteSpace: {
-    normal: 'whs-normal',
-    nowrap: 'whs-nowrap',
-    pre: 'whs-pre',
-    'pre-wrap': 'whs-pre-wrap',
-    'pre-line': 'whs-pre-line',
-  },
-  // Note: CSS functions (blur, translateY, scale, rotate, repeat) are now handled
-  // dynamically in utilityClassMapper.ts - no need to hardcode specific values here
 };
 
-// Reverse mapping for class-to-style conversion
-export const classToStyleSpecialCases: Record<string, { prop: string; value: string }> = {
-  f: { prop: 'display', value: 'flex' },
-  'fd-col': { prop: 'flexDirection', value: 'column' },
-  'fd-row': { prop: 'flexDirection', value: 'row' },
-  g: { prop: 'display', value: 'grid' },
-  b: { prop: 'display', value: 'block' },
-  i: { prop: 'display', value: 'inline' },
-  ib: { prop: 'display', value: 'inline-block' },
-  h: { prop: 'display', value: 'none' },
-  'if': { prop: 'display', value: 'inline-flex' },
-  ig: { prop: 'display', value: 'inline-grid' },
-  'jc-c': { prop: 'justifyContent', value: 'center' },
-  'jc-s': { prop: 'justifyContent', value: 'flex-start' },
-  'jc-e': { prop: 'justifyContent', value: 'flex-end' },
-  'jc-b': { prop: 'justifyContent', value: 'space-between' },
-  'jc-a': { prop: 'justifyContent', value: 'space-around' },
-  'jc-ev': { prop: 'justifyContent', value: 'space-evenly' },
-  'ai-c': { prop: 'alignItems', value: 'center' },
-  'ai-s': { prop: 'alignItems', value: 'flex-start' },
-  'ai-e': { prop: 'alignItems', value: 'flex-end' },
-  'ai-st': { prop: 'alignItems', value: 'stretch' },
-  'ai-b': { prop: 'alignItems', value: 'baseline' },
-  'o-h': { prop: 'overflow', value: 'hidden' },
-  'o-a': { prop: 'overflow', value: 'auto' },
-  'o-s': { prop: 'overflow', value: 'scroll' },
-  'o-v': { prop: 'overflow', value: 'visible' },
-  'cursor-pointer': { prop: 'cursor', value: 'pointer' },
-  'cursor-default': { prop: 'cursor', value: 'default' },
-  'pe-none': { prop: 'pointerEvents', value: 'none' },
-  'pe-auto': { prop: 'pointerEvents', value: 'auto' },
-  'us-none': { prop: 'userSelect', value: 'none' },
-  'us-auto': { prop: 'userSelect', value: 'auto' },
-  'us-text': { prop: 'userSelect', value: 'text' },
-  'us-all': { prop: 'userSelect', value: 'all' },
-  'whs-normal': { prop: 'whiteSpace', value: 'normal' },
-  'whs-nowrap': { prop: 'whiteSpace', value: 'nowrap' },
-  'whs-pre': { prop: 'whiteSpace', value: 'pre' },
-  'whs-pre-wrap': { prop: 'whiteSpace', value: 'pre-wrap' },
-  'whs-pre-line': { prop: 'whiteSpace', value: 'pre-line' },
-  // Grid template columns
-  'gtc-2': { prop: 'gridTemplateColumns', value: 'repeat(2, 1fr)' },
-  'gtc-3': { prop: 'gridTemplateColumns', value: 'repeat(3, 1fr)' },
-  'gtc-4': { prop: 'gridTemplateColumns', value: 'repeat(4, 1fr)' },
-  'gtc-5': { prop: 'gridTemplateColumns', value: 'repeat(5, 1fr)' },
-  'gtc-6': { prop: 'gridTemplateColumns', value: 'repeat(6, 1fr)' },
-  // Backdrop filter
-  'bdf-blur-4': { prop: 'backdropFilter', value: 'blur(4px)' },
-  'bdf-blur-8': { prop: 'backdropFilter', value: 'blur(8px)' },
-  'bdf-blur-10': { prop: 'backdropFilter', value: 'blur(10px)' },
-  // Transform
-  'tm-ty-0': { prop: 'transform', value: 'translateY(0)' },
-  'tm-ty-n10': { prop: 'transform', value: 'translateY(-10px)' },
-  'tm-ty-n50p': { prop: 'transform', value: 'translateY(-50%)' },
-  // Filter
-  'flt-blur-1': { prop: 'filter', value: 'blur(1px)' },
-  // Shadow presets (reverse mapping)
-  'sh-0': { prop: 'boxShadow', value: 'none' },
-  'sh-1': { prop: 'boxShadow', value: '0 1px 2px rgba(0, 0, 0, 0.05)' },
-  'sh-2': { prop: 'boxShadow', value: '0 4px 12px rgba(0, 0, 0, 0.1)' },
-  'sh-3': { prop: 'boxShadow', value: '0 8px 24px rgba(0, 0, 0, 0.15)' },
-  'sh-4': { prop: 'boxShadow', value: '0 12px 32px rgba(0, 0, 0, 0.2)' },
-  // Gradient presets (reverse mapping)
-  'gr-1': { prop: 'background', value: 'linear-gradient(90deg, rgba(10,22,40,0.85) 0%, rgba(10,22,40,0.2) 100%)' },
-  'gr-2': { prop: 'background', value: 'linear-gradient(0deg, #a9e8fd, #00aee8 25%, #0f1335 72%)' },
-  // Border presets (reverse mapping)
-  'bd-0': { prop: 'border', value: '1px solid var(--border)' },
-  'bd-1': { prop: 'border', value: '1px solid var(--border-light)' },
+/**
+ * Tailwind's default spacing scale: step name → CSS length (px). The forward
+ * mapper emits the named step on an EXACT match (`padding: 16px` → `p-4`); any
+ * off-scale value falls back to the arbitrary form (`p-[13px]`). The reverse map
+ * (length → step) drives that lookup and the inverse parser.
+ *
+ * Values are px because Meno stores px, so `p-4` ⇄ `16px` round-trips exactly;
+ * rem output (when enabled) is applied downstream by the CSS generator (pxToRem),
+ * never baked into the token.
+ */
+export const SPACING_SCALE: Record<string, string> = {
+  '0': '0px',
+  px: '1px',
+  '0.5': '2px',
+  '1': '4px',
+  '1.5': '6px',
+  '2': '8px',
+  '2.5': '10px',
+  '3': '12px',
+  '3.5': '14px',
+  '4': '16px',
+  '5': '20px',
+  '6': '24px',
+  '7': '28px',
+  '8': '32px',
+  '9': '36px',
+  '10': '40px',
+  '11': '44px',
+  '12': '48px',
+  '14': '56px',
+  '16': '64px',
+  '20': '80px',
+  '24': '96px',
+  '28': '112px',
+  '32': '128px',
+  '36': '144px',
+  '40': '160px',
+  '44': '176px',
+  '48': '192px',
+  '52': '208px',
+  '56': '224px',
+  '60': '240px',
+  '64': '256px',
+  '72': '288px',
+  '80': '320px',
+  '96': '384px',
+};
+
+/** Reverse of SPACING_SCALE: CSS length (px) → step name (`16px` → `4`). */
+export const SPACING_SCALE_REVERSE: Record<string, string> = (() => {
+  const reverse: Record<string, string> = {};
+  for (const [step, length] of Object.entries(SPACING_SCALE)) {
+    reverse[length] = step;
+  }
+  return reverse;
+})();
+
+/**
+ * Class roots that use the spacing scale. Tailwind shares one numeric scale
+ * across padding, margin, gap, inset and sizing — `p-4`, `gap-6`, `mt-2`,
+ * `top-4`, `w-64`, … Only roots listed here resolve a bare step name; keyword
+ * values (`w-full`, `m-auto`) still win first, and negatives stay arbitrary.
+ */
+export const SPACING_SCALE_ROOTS: Set<string> = new Set([
+  'p',
+  'pt',
+  'pr',
+  'pb',
+  'pl',
+  'px',
+  'py',
+  'm',
+  'mt',
+  'mr',
+  'mb',
+  'ml',
+  'mx',
+  'my',
+  'gap',
+  'gap-x',
+  'gap-y',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'inset',
+  'w',
+  'h',
+  'min-w',
+  'min-h',
+  'max-w',
+  'max-h',
+  'basis',
+]);
+
+/**
+ * Class roots whose bare-token value is a Meno color token (`bg-primary` →
+ * `var(--primary)`). The class-name counterpart of `colorTokenProps` (which is
+ * keyed by camelCase CSS property). Used by the inverse parser to recognize
+ * `bg-primary` / `text-text` / `border-border` etc.
+ */
+export const COLOR_TOKEN_ROOTS: Set<string> = new Set(['text', 'bg', 'border', 'accent', 'outline']);
+
+/** Reverse mapping for static utilities: class → { prop, value } (canonical value). */
+export const staticUtilityReverse: Record<string, { prop: string; value: string }> = (() => {
+  const reverse: Record<string, { prop: string; value: string }> = {};
+  for (const [prop, values] of Object.entries(staticUtilities)) {
+    for (const [value, className] of Object.entries(values)) {
+      if (!reverse[className]) {
+        reverse[className] = { prop, value };
+      }
+    }
+  }
+  return reverse;
+})();
+
+/**
+ * Named keyword values per class root: `root-keyword` → CSS value.
+ * Mirrors Tailwind's named sizes (`w-full`, `h-screen`, `m-auto`, `rounded-full`).
+ */
+export const keywordValues: Record<string, Record<string, string>> = {
+  w: { auto: 'auto', full: '100%', screen: '100vw', fit: 'fit-content', min: 'min-content', max: 'max-content' },
+  h: { auto: 'auto', full: '100%', screen: '100vh', fit: 'fit-content', min: 'min-content', max: 'max-content' },
+  'max-w': { full: '100%', none: 'none', screen: '100vw', fit: 'fit-content', min: 'min-content', max: 'max-content' },
+  'max-h': { full: '100%', none: 'none', screen: '100vh', fit: 'fit-content', min: 'min-content', max: 'max-content' },
+  'min-w': { auto: 'auto', full: '100%', fit: 'fit-content', min: 'min-content', max: 'max-content' },
+  'min-h': { auto: 'auto', full: '100%', screen: '100vh', fit: 'fit-content', min: 'min-content', max: 'max-content' },
+  m: { auto: 'auto' },
+  mt: { auto: 'auto' },
+  mr: { auto: 'auto' },
+  mb: { auto: 'auto' },
+  ml: { auto: 'auto' },
+  mx: { auto: 'auto' },
+  my: { auto: 'auto' },
+  top: { auto: 'auto', full: '100%' },
+  right: { auto: 'auto', full: '100%' },
+  bottom: { auto: 'auto', full: '100%' },
+  left: { auto: 'auto', full: '100%' },
+  inset: { auto: 'auto', full: '100%' },
+  basis: { auto: 'auto', full: '100%' },
+  rounded: { none: '0', full: '9999px' },
+  'rounded-tl': { none: '0', full: '9999px' },
+  'rounded-tr': { none: '0', full: '9999px' },
+  'rounded-bl': { none: '0', full: '9999px' },
+  'rounded-br': { none: '0', full: '9999px' },
+  z: { auto: 'auto' },
+  leading: { normal: 'normal' },
+  tracking: { normal: 'normal' },
 };
 
+/**
+ * Roots whose plain lowercase keyword values pass through verbatim:
+ * `cursor-pointer`, `align-middle`, `origin-center`, `object-center`, …
+ */
+export const genericKeywordRoots: Set<string> = new Set(['cursor', 'align', 'origin', 'object', 'list']);
+
+/**
+ * Roots that accept bare numeric values Tailwind-style: `z-10`, `order-2`,
+ * `flex-2`, `grow-2`. (`opacity` is handled separately — Tailwind's 0–100 scale.)
+ */
+export const integerValueRoots: Set<string> = new Set(['z', 'order', 'flex', 'grow', 'shrink']);
+
+/**
+ * Properties whose values are color tokens by Meno convention: a bare token
+ * (e.g. `primary`) refers to the CSS variable `--primary`. Forward: token →
+ * `root-(--token)`. Reverse: `root-(--token)` → bare token.
+ */
+export const colorTokenProps: Set<string> = new Set([
+  'color',
+  'backgroundColor',
+  'borderColor',
+  'accentColor',
+  'outlineColor',
+]);
+
 // ============================================================================
 // STYLE PRESETS
 // Predefined values for complex CSS properties (shadows, gradients, borders)
-// Usage: boxShadow: "2" → class "sh-2" → "box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)"
+// Usage: boxShadow: "2" → class "shadow-2" → "box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)"
 // ============================================================================
 
-// Shadow presets: sh-0, sh-1, sh-2, sh-3, sh-4
+// Shadow presets: shadow-0, shadow-1, shadow-2, shadow-3, shadow-4
 export const shadowPresets: Record<string, string> = {
   '0': 'none',
   '1': '0 1px 2px rgba(0, 0, 0, 0.05)',
@@ -446,14 +861,29 @@ export const shadowPresets: Record<string, string> = {
   '4': '0 12px 32px rgba(0, 0, 0, 0.2)',
 };
 
-// Gradient presets: gr-1, gr-2
+// Gradient presets: bg-gradient-1, bg-gradient-2
 export const gradientPresets: Record<string, string> = {
   '1': 'linear-gradient(90deg, rgba(10,22,40,0.85) 0%, rgba(10,22,40,0.2) 100%)',
   '2': 'linear-gradient(0deg, #a9e8fd, #00aee8 25%, #0f1335 72%)',
 };
 
-// Border presets: bd-0, bd-1
+// Border presets: border-preset-0, border-preset-1
 export const borderPresets: Record<string, string> = {
   '0': '1px solid var(--border)',
   '1': '1px solid var(--border-light)',
 };
+
+/** Reverse mapping for preset classes: class → { prop, value } (expanded value). */
+export const presetClassReverse: Record<string, { prop: string; value: string }> = (() => {
+  const reverse: Record<string, { prop: string; value: string }> = {};
+  for (const [key, value] of Object.entries(shadowPresets)) {
+    reverse[`shadow-${key}`] = { prop: 'boxShadow', value };
+  }
+  for (const [key, value] of Object.entries(gradientPresets)) {
+    reverse[`bg-gradient-${key}`] = { prop: 'background', value };
+  }
+  for (const [key, value] of Object.entries(borderPresets)) {
+    reverse[`border-preset-${key}`] = { prop: 'border', value };
+  }
+  return reverse;
+})();