meno-core 1.1.0 → 1.1.1

package/lib/server/ssr/htmlGenerator.ts

@@ -442,8 +442,6 @@ export async function generateSSRHTML(
   // Include component CSS (no longer generating inline style classes)
   const componentCSS = rendered.componentCSS || '';
 
-  // Extract and generate utility CSS from rendered HTML
-  const usedUtilityClasses = extractUtilityClassesFromHTML(rendered.html);
   const breakpointConfig = await loadBreakpointConfig();
   const responsiveScalesConfig = configService.getResponsiveScales();
 
@@ -451,11 +449,29 @@ export async function generateSSRHTML(
   const variablesConfig = await variableService.loadConfig();
   const variablesCSS = generateVariablesCSS(variablesConfig, breakpointConfig, responsiveScalesConfig);
   const remConversionConfig = configService.getRemConversion();
+
+  // Named design-token classes (`text-muted` → color: var(--muted), `bg-<token>`, …) only resolve to a
+  // CSS rule when the generator knows which token names are DEFINED — without that set, `text-muted` is
+  // indistinguishable from a typo and is dropped, both at extraction (filtered by parseUtilityClass) and
+  // at generation. Build it from the project's theme colors + variables — mirroring the Astro build's
+  // readKnownTokensSync and the canvas client's loadKnownTokens — so an instance-level color class that
+  // renders in a real Astro build also renders in the SSR design canvas.
+  const knownTokens = new Set<string>();
+  for (const theme of Object.values(themeConfig.themes)) {
+    for (const name of Object.keys(theme.colors)) knownTokens.add(name);
+  }
+  for (const variable of variablesConfig.variables) {
+    if (variable.cssVar) knownTokens.add(variable.cssVar.replace(/^--/, ''));
+  }
+
+  // Extract and generate utility CSS from rendered HTML
+  const usedUtilityClasses = extractUtilityClassesFromHTML(rendered.html, knownTokens);
   const utilityCSS = generateUtilityCSS(
     usedUtilityClasses,
     breakpointConfig,
     responsiveScalesConfig,
     remConversionConfig,
+    knownTokens,
   );
 
   // Generate interactive styles CSS from map collected during render

package/lib/server/ssr/ssrRenderer.test.ts

@@ -1115,6 +1115,31 @@ describe('ssrRenderer', () => {
       expect(html).toContain('<div');
     });
 
+    test('component instance class-STRING override lands on the root element', async () => {
+      // The class-based instance seam (`<Heading class="text-muted text-[#ff0000]" />`): the instance's
+      // `class` prop must be applied onto the component root, mirroring real Astro's
+      // cx(style(...), variants(...), className). Without it, instance-level colors render in a real
+      // build but vanish in the SSR design canvas.
+      const componentDef: ComponentDefinition = {
+        component: {
+          structure: { type: 'node', tag: 'h1', children: '{{text}}' },
+          interface: { text: { type: 'string', default: 'Hi' } },
+        },
+      };
+
+      const node = {
+        type: 'component',
+        component: 'Heading',
+        props: { text: 'Hi', class: 'text-muted text-[#ff0000]' },
+      };
+
+      const html = await render(node, { globalComponents: { Heading: componentDef } });
+      const classMatch = html.match(/<h1[^>]*\sclass="([^"]*)"/);
+      expect(classMatch).not.toBeNull();
+      expect(classMatch?.[1]).toContain('text-muted');
+      expect(classMatch?.[1]).toContain('text-[#ff0000]');
+    });
+
     test('component with defineVars: true adds data attributes', async () => {
       const componentDef: ComponentDefinition = {
         component: {

package/lib/server/ssr/ssrRenderer.ts

@@ -1850,8 +1850,18 @@ async function renderNode(
   delete nodeAttributesWithoutClass.className;
   delete nodeAttributesWithoutClass.class;
 
-  // Merge classNames: element class (first for specificity) + attribute classes + utility classes
-  const allClassNames = [elementClass, attrClassName, ...utilityClasses].filter(Boolean);
+  // A component INSTANCE carries its class-string override as a prop (`<Heading class="text-muted" />`
+  // → nodeProps.class) — the class-based equivalent of the legacy instance style object. Real Astro
+  // applies it onto the component root via cx(style(...), variants(...), className); the SSR canvas
+  // must too, or instance-level classes (named colors like `text-muted`/`text-text`, arbitrary
+  // `text-[#ff0000]`) silently vanish in design mode while rendering correctly in a real build. Last in
+  // the list so it wins source order, matching cx's instance-last precedence. Empty for HTML nodes
+  // (nodeProps is {} there), so this only affects component instances.
+  const instanceClassName = typeof nodeProps.class === 'string' ? nodeProps.class : '';
+
+  // Merge classNames: element class (first for specificity) + attribute classes + utility classes +
+  // the component instance's class-string override (last → wins)
+  const allClassNames = [elementClass, attrClassName, ...utilityClasses, instanceClassName].filter(Boolean);
   const mergedClassName = allClassNames.length > 0 ? allClassNames.join(' ') : '';
 
   const propsWithStyleAndAttrs = {

package/lib/shared/cssGeneration.test.ts

@@ -694,6 +694,16 @@ describe('styleObjectToCSS', () => {
     expect(styleObjectToCSS({ color: 'rgb(0,0,0)' })).toBe('color: rgb(0,0,0)');
   });
 
+  test('named CSS colors and keywords pass through — never wrapped in var()', () => {
+    // Regression: a literal `red` was being emitted as `var(--red)` (a token
+    // that does not exist) instead of the real CSS color.
+    expect(styleObjectToCSS({ color: 'red' })).toBe('color: red');
+    expect(styleObjectToCSS({ backgroundColor: 'transparent' })).toBe('background-color: transparent');
+    expect(styleObjectToCSS({ color: 'currentColor' })).toBe('color: currentColor');
+    expect(styleObjectToCSS({ borderColor: 'rebeccapurple' })).toBe('border-color: rebeccapurple');
+    expect(styleObjectToCSS({ color: 'inherit' })).toBe('color: inherit');
+  });
+
   test('skips _mapping (binding) values — bound props yield empty/partial output', () => {
     expect(styleObjectToCSS({ color: { _mapping: { prop: 'x' } } as never })).toBe('');
     expect(styleObjectToCSS({ color: { _mapping: { prop: 'x' } } as never, padding: '4px' })).toBe('padding: 4px');

package/lib/shared/cssGeneration.ts

@@ -11,6 +11,7 @@ import {
   breakpointClassPrefixes,
   resolveRootProperty,
   camelToKebab,
+  isBareColorTokenName,
 } from './utilityClassNames';
 import { getStyleValue, getDynamicStyle, isDynamicClass } from './styleValueRegistry';
 import type { BreakpointConfig } from './breakpoints';
@@ -213,6 +214,9 @@ export function generateRuleForClass(className: string, knownTokens?: ReadonlySe
   }
 
   // Multi-property roots (Tailwind axis shorthands)
+  if (root === 'size') {
+    return `width: ${value}; height: ${value};`;
+  }
   if (root === 'px') {
     return `padding-left: ${value}; padding-right: ${value};`;
   }
@@ -726,15 +730,13 @@ export function styleObjectToCSS(style: StyleObject): string {
     // Convert camelCase to kebab-case
     const cssProperty = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
 
-    // Handle CSS variable references for color properties
+    // Handle CSS variable references for color properties. Only a bare Meno
+    // color *token* (e.g. `primary`) is wrapped in `var(--token)`. Named CSS
+    // colors (`red`), hex, color functions and Tailwind palette names are real
+    // values and pass through untouched — mirrors the utility-class engine so
+    // the interactive path and the static path resolve colors identically.
     let cssValue = String(value);
-    if (
-      (prop === 'backgroundColor' || prop === 'color' || prop === 'borderColor') &&
-      !cssValue.startsWith('#') &&
-      !cssValue.startsWith('rgb') &&
-      !cssValue.startsWith('var(') &&
-      !cssValue.includes('(')
-    ) {
+    if ((prop === 'backgroundColor' || prop === 'color' || prop === 'borderColor') && isBareColorTokenName(cssValue)) {
       cssValue = `var(--${cssValue})`;
     }
 

package/lib/shared/index.ts

@@ -30,6 +30,12 @@ export { splitVariantPrefix, normalizeBreakpointVariant } from './utilityClassNa
 // Utility-class catalog pieces — the seed for the Styles panel's class-bar autocomplete (§13 Phase 5).
 // Selective (not `export *`) to keep the barrel collision-free.
 export { propertyMap, staticUtilityReverse, keywordValues, presetClassReverse } from './utilityClassConfig';
+// Tailwind theme-scale tokens + the seed-variable generator (`text-lg` → `var(--text-lg, …)`).
+export {
+  THEME_SCALE_ENTRIES,
+  defaultTailwindThemeVariables,
+  type ThemeScaleEntry,
+} from './tailwindThemeScale';
 export * from './elementClassName';
 export * from './styleValueRegistry';
 

package/lib/shared/interactiveStyles.test.ts

@@ -33,8 +33,10 @@ describe('generateInteractiveCSS', () => {
       const css = generateInteractiveCSS(elementClass, interactiveStyles);
 
       expect(css).toContain(`.${elementClass}:hover`);
+      // `primary` is a bare Meno token → wrapped in var(); `white` is a real
+      // named CSS color → passes through untouched (not var(--white)).
       expect(css).toContain('background-color: var(--primary)');
-      expect(css).toContain('color: var(--white)');
+      expect(css).toContain('color: white');
     });
 
     test('should generate active styles for page element', () => {

package/lib/shared/tailwindThemeScale.ts

@@ -0,0 +1,256 @@
+/**
+ * Tailwind named-scale → CSS-variable theme table.
+ *
+ * Tailwind's *named* value scales (`text-lg`, `font-semibold`, `rounded-md`, `shadow-lg`,
+ * `max-w-md`, `leading-tight`, `tracking-wide`, `font-sans`) have no single numeric mapping — each
+ * name is a theme token. Meno is token-based, so the class resolves to a plain variable reference
+ * with **no baked default** — it renders the project's variable when defined, and is inert when not
+ * (Meno deliberately does NOT smuggle Tailwind's opinionated defaults into the render):
+ *
+ *   `text-lg`  →  `font-size: var(--text-lg)`
+ *
+ * Define `--text-lg` (in `variables.json`) → `text-lg` uses it everywhere; leave it undefined →
+ * the declaration has no effect (use an arbitrary value like `text-[18px]` for a one-off). See the
+ * styling docs for the authoring guidance.
+ *
+ * This table is the single source of truth for:
+ *   - the parser (`parseUtilityClass`): class → `var(--token)`
+ *   - the inverse mapper (`propertyValueToClass`): `var(--token)` → compact class
+ *   - `defaultTailwindThemeVariables()`: an OPT-IN starter set (Tailwind values) a user can choose
+ *     to create — it is never auto-applied and never a render fallback.
+ */
+
+import type { CSSVariable, VariableGroup, VariableType } from './types/variables';
+
+/** One Tailwind theme token: the class it backs, its CSS var, default value and UI grouping. */
+export interface ThemeScaleEntry {
+  /** Full utility class, e.g. `text-lg`, or the bare default (`rounded`, `shadow`). */
+  className: string;
+  /** The class root (`text`, `font`, `rounded`, `shadow`, `max-w`, `leading`, `tracking`). */
+  root: string;
+  /** CSS custom property, e.g. `--text-lg`. */
+  cssVar: string;
+  /** kebab-case CSS property the class targets. */
+  property: string;
+  /** Tailwind's default value — the starter value for the OPT-IN seed set, NOT a render fallback. */
+  value: string;
+  /** Variable picker group + scaling type for the seeded variable. */
+  group: VariableGroup;
+  /** Human label for the seeded variable, e.g. `Text LG`. */
+  label: string;
+}
+
+type ScaleSpec = {
+  root: string;
+  property: string;
+  group: VariableGroup;
+  /** Prefix for the css var; class is `${root}-${name}` (or bare `${root}` when name is ''). */
+  varPrefix: string;
+  /** Human label prefix for the seeded variable. */
+  labelPrefix: string;
+  /** [classSuffix, cssValue] pairs. '' suffix = the bare class (`rounded`, `shadow`). */
+  values: [string, string][];
+};
+
+const SANS = 'ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif';
+const SERIF = 'ui-serif, Georgia, Cambria, serif';
+const MONO = 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace';
+
+const SPECS: ScaleSpec[] = [
+  {
+    root: 'text',
+    property: 'font-size',
+    group: 'font-size',
+    varPrefix: 'text',
+    labelPrefix: 'Text',
+    values: [
+      ['xs', '0.75rem'],
+      ['sm', '0.875rem'],
+      ['base', '1rem'],
+      ['lg', '1.125rem'],
+      ['xl', '1.25rem'],
+      ['2xl', '1.5rem'],
+      ['3xl', '1.875rem'],
+      ['4xl', '2.25rem'],
+      ['5xl', '3rem'],
+      ['6xl', '3.75rem'],
+      ['7xl', '4.5rem'],
+      ['8xl', '6rem'],
+      ['9xl', '8rem'],
+    ],
+  },
+  {
+    // Only the weights Meno's static utilities don't already cover (normal/bold stay static).
+    root: 'font',
+    property: 'font-weight',
+    group: 'font-weight',
+    varPrefix: 'font-weight',
+    labelPrefix: 'Font Weight',
+    values: [
+      ['thin', '100'],
+      ['extralight', '200'],
+      ['light', '300'],
+      ['medium', '500'],
+      ['semibold', '600'],
+      ['extrabold', '800'],
+      ['black', '900'],
+    ],
+  },
+  {
+    root: 'font',
+    property: 'font-family',
+    group: 'font-family',
+    varPrefix: 'font',
+    labelPrefix: 'Font',
+    values: [
+      ['sans', SANS],
+      ['serif', SERIF],
+      ['mono', MONO],
+    ],
+  },
+  {
+    root: 'rounded',
+    property: 'border-radius',
+    group: 'border-radius',
+    varPrefix: 'radius',
+    labelPrefix: 'Radius',
+    values: [
+      ['', '0.25rem'],
+      ['sm', '0.125rem'],
+      ['md', '0.375rem'],
+      ['lg', '0.5rem'],
+      ['xl', '0.75rem'],
+      ['2xl', '1rem'],
+      ['3xl', '1.5rem'],
+    ],
+  },
+  {
+    root: 'shadow',
+    property: 'box-shadow',
+    group: 'shadow',
+    varPrefix: 'shadow',
+    labelPrefix: 'Shadow',
+    values: [
+      ['', '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)'],
+      ['sm', '0 1px 2px 0 rgb(0 0 0 / 0.05)'],
+      ['md', '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'],
+      ['lg', '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)'],
+      ['xl', '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)'],
+      ['2xl', '0 25px 50px -12px rgb(0 0 0 / 0.25)'],
+    ],
+  },
+  {
+    root: 'max-w',
+    property: 'max-width',
+    group: 'size',
+    varPrefix: 'container',
+    labelPrefix: 'Container',
+    values: [
+      ['xs', '20rem'],
+      ['sm', '24rem'],
+      ['md', '28rem'],
+      ['lg', '32rem'],
+      ['xl', '36rem'],
+      ['2xl', '42rem'],
+      ['3xl', '48rem'],
+      ['4xl', '56rem'],
+      ['5xl', '64rem'],
+      ['6xl', '72rem'],
+      ['7xl', '80rem'],
+      ['prose', '65ch'],
+    ],
+  },
+  {
+    root: 'leading',
+    property: 'line-height',
+    group: 'line-height',
+    varPrefix: 'leading',
+    labelPrefix: 'Leading',
+    values: [
+      ['none', '1'],
+      ['tight', '1.25'],
+      ['snug', '1.375'],
+      ['relaxed', '1.625'],
+      ['loose', '2'],
+    ],
+  },
+  {
+    root: 'tracking',
+    property: 'letter-spacing',
+    group: 'letter-spacing',
+    varPrefix: 'tracking',
+    labelPrefix: 'Tracking',
+    values: [
+      ['tighter', '-0.05em'],
+      ['tight', '-0.025em'],
+      ['wide', '0.025em'],
+      ['wider', '0.05em'],
+      ['widest', '0.1em'],
+    ],
+  },
+];
+
+/** Size codes read better uppercased (`LG`, `2XL`); word names get title case (`Semibold`). */
+function labelSuffix(suffix: string): string {
+  if (/^(xs|sm|md|lg|xl|\dxl)$/.test(suffix)) return suffix.toUpperCase();
+  return suffix.charAt(0).toUpperCase() + suffix.slice(1);
+}
+
+/** All theme entries, flattened. */
+export const THEME_SCALE_ENTRIES: ThemeScaleEntry[] = SPECS.flatMap((spec) =>
+  spec.values.map(([suffix, value]) => {
+    const className = suffix ? `${spec.root}-${suffix}` : spec.root;
+    const cssVar = suffix ? `--${spec.varPrefix}-${suffix}` : `--${spec.varPrefix}`;
+    const label = suffix ? `${spec.labelPrefix} ${labelSuffix(suffix)}` : spec.labelPrefix;
+    return { className, root: spec.root, cssVar, property: spec.property, value, group: spec.group, label };
+  }),
+);
+
+/** className → entry (parser lookup). e.g. `text-lg`, `rounded`, `font-sans`. */
+export const THEME_SCALE_BY_CLASS: ReadonlyMap<string, ThemeScaleEntry> = new Map(
+  THEME_SCALE_ENTRIES.map((e) => [e.className, e]),
+);
+
+/** cssVar → entry (inverse-mapper lookup). e.g. `--text-lg` → `text-lg`. */
+export const THEME_SCALE_BY_CSSVAR: ReadonlyMap<string, ThemeScaleEntry> = new Map(
+  THEME_SCALE_ENTRIES.map((e) => [e.cssVar, e]),
+);
+
+/**
+ * The CSS value a themed class resolves to: a plain `var(--token)` reference with no fallback.
+ * Renders the project variable when defined, inert otherwise (token-based by design — no baked
+ * Tailwind default in the render path).
+ */
+export function themeScaleValue(entry: ThemeScaleEntry): string {
+  return `var(${entry.cssVar})`;
+}
+
+/** Map a variable group to its responsive-scaling type (mirrors getDefaultScalingType). */
+function scalingTypeFor(group: VariableGroup): VariableType {
+  switch (group) {
+    case 'font-size':
+      return 'fontSize';
+    case 'border-radius':
+      return 'borderRadius';
+    case 'size':
+      return 'size';
+    default:
+      return 'none';
+  }
+}
+
+/**
+ * The full set of Tailwind theme tokens as Meno `CSSVariable`s, ready to merge into a project's
+ * `variables.json`. Seeding makes the tokens visible/editable in the variable picker (filed under
+ * their group); rendering does NOT require seeding — the class carries the Tailwind default as the
+ * `var()` fallback. Idempotent merge is the caller's job (skip a `cssVar` that already exists).
+ */
+export function defaultTailwindThemeVariables(): CSSVariable[] {
+  return THEME_SCALE_ENTRIES.map((e) => ({
+    name: e.label,
+    cssVar: e.cssVar,
+    value: e.value,
+    type: scalingTypeFor(e.group),
+    group: e.group,
+  }));
+}

package/lib/shared/utilityClassConfig.ts

@@ -94,6 +94,9 @@ export const propertyOrder: string[] = [
   // Transform & Effects
   'opacity',
   'transform',
+  'translate',
+  'rotate',
+  'scale',
   'transformOrigin',
   'boxShadow',
   'textShadow',
@@ -109,6 +112,8 @@ export const propertyOrder: string[] = [
   'bottom',
   'left',
   'inset',
+  'insetInline',
+  'insetBlock',
   'zIndex',
   // Grid Layout
   'gridTemplateColumns',
@@ -117,7 +122,11 @@ export const propertyOrder: string[] = [
   'gridGap',
   'gridAutoFlow',
   'gridColumn',
+  'gridColumnStart',
+  'gridColumnEnd',
   'gridRow',
+  'gridRowStart',
+  'gridRowEnd',
   'gridArea',
   'gridAutoRows',
   'gridAutoColumns',
@@ -146,6 +155,10 @@ export const propertyOrder: string[] = [
   'pointerEvents',
   'userSelect',
   'transition',
+  'transitionProperty',
+  'transitionDuration',
+  'transitionTimingFunction',
+  'transitionDelay',
   'objectFit',
   'objectPosition',
   'boxSizing',
@@ -308,6 +321,7 @@ export const prefixToCSSProperty: Record<string, string> = {
   // Sizing
   w: 'width',
   h: 'height',
+  size: 'width', // multi-prop (width + height) — expanded in generateRuleForClass / classesToStyles
   'max-w': 'max-width',
   'max-h': 'max-height',
   'min-w': 'min-width',
@@ -352,14 +366,28 @@ export const prefixToCSSProperty: Record<string, string> = {
   'grid-cols': 'grid-template-columns',
   'grid-rows': 'grid-template-rows',
   col: 'grid-column',
+  'col-span': 'grid-column',
+  'col-start': 'grid-column-start',
+  'col-end': 'grid-column-end',
   row: 'grid-row',
+  'row-span': 'grid-row',
+  'row-start': 'grid-row-start',
+  'row-end': 'grid-row-end',
   'auto-rows': 'grid-auto-rows',
   'auto-cols': 'grid-auto-columns',
 
   // Effects
   opacity: 'opacity',
   transform: 'transform',
+  scale: 'scale',
+  rotate: 'rotate',
+  'translate-x': 'translate',
+  'translate-y': 'translate',
   origin: 'transform-origin',
+  // Transitions (each maps to a distinct longhand → compose across classes)
+  duration: 'transition-duration',
+  delay: 'transition-delay',
+  ease: 'transition-timing-function',
   shadow: 'box-shadow',
   'text-shadow': 'text-shadow',
   filter: 'filter',
@@ -371,6 +399,8 @@ export const prefixToCSSProperty: Record<string, string> = {
   bottom: 'bottom',
   left: 'left',
   inset: 'inset',
+  'inset-x': 'inset-inline',
+  'inset-y': 'inset-block',
   z: 'z-index',
 
   // Outline
@@ -757,8 +787,11 @@ export const SPACING_SCALE_ROOTS: Set<string> = new Set([
   'bottom',
   'left',
   'inset',
+  'inset-x',
+  'inset-y',
   'w',
   'h',
+  'size',
   'min-w',
   'min-h',
   'max-w',
@@ -796,6 +829,7 @@ export const keywordValues: Record<string, Record<string, string>> = {
   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' },
+  size: { auto: 'auto', full: '100%', 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' },
@@ -819,6 +853,10 @@ export const keywordValues: Record<string, Record<string, string>> = {
   z: { auto: 'auto' },
   leading: { normal: 'normal' },
   tracking: { normal: 'normal' },
+  'inset-x': { auto: 'auto', full: '100%' },
+  'inset-y': { auto: 'auto', full: '100%' },
+  aspect: { auto: 'auto', square: '1 / 1', video: '16 / 9' },
+  order: { first: '-9999', last: '9999', none: '0' },
 };
 
 /**
@@ -846,6 +884,84 @@ export const colorTokenProps: Set<string> = new Set([
   'outlineColor',
 ]);
 
+/**
+ * Roots that accept Tailwind fractional values (`w-1/2` → `50%`, `top-1/3` → `33.333333%`).
+ * Tailwind resolves `n/d` to `calc(n / d * 100%)` (pre-computed here to a plain percentage so
+ * the value round-trips and renders without a calc). Sizing, position/inset, flex-basis and the
+ * individual translate axes take fractions.
+ */
+export const FRACTION_ROOTS: Set<string> = new Set([
+  'w',
+  'h',
+  'size',
+  'min-w',
+  'min-h',
+  'max-w',
+  'max-h',
+  'basis',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'inset',
+  'inset-x',
+  'inset-y',
+  'translate-x',
+  'translate-y',
+]);
+
+/**
+ * Class roots whose value is negatable with a leading `-` (`-mt-4`, `-top-2`, `-translate-x-1/2`,
+ * `-rotate-3`). Mirrors Tailwind: margins, position/inset, translate and rotate. The inverse parser
+ * strips the `-`, resolves the positive class, then negates the numeric/length/percentage value.
+ */
+export const NEGATABLE_ROOTS: Set<string> = new Set([
+  'm',
+  'mt',
+  'mr',
+  'mb',
+  'ml',
+  'mx',
+  'my',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'inset',
+  'inset-x',
+  'inset-y',
+  'translate-x',
+  'translate-y',
+  'rotate',
+]);
+
+/** Tailwind `ease-*` → `transition-timing-function` value. */
+export const EASE_TIMING: Record<string, string> = {
+  linear: 'linear',
+  in: 'cubic-bezier(0.4, 0, 1, 1)',
+  out: 'cubic-bezier(0, 0, 0.2, 1)',
+  'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+  initial: 'initial',
+};
+
+/**
+ * Tailwind transition-enable classes → the `transition-property` list they animate. Emitted as the
+ * `transition` shorthand with Tailwind's default 150ms / ease curve baked in, so a bare `transition`
+ * animates standalone; a following `duration-*` / `ease-*` longhand still overrides duration/timing
+ * (shorthand sorts before longhand). The empty key is the bare `transition` class.
+ */
+export const TRANSITION_PROPERTY_VALUES: Record<string, string> = {
+  '': 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
+  all: 'all',
+  colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
+  opacity: 'opacity',
+  shadow: 'box-shadow',
+  transform: 'transform, translate, scale, rotate',
+};
+
+/** Tailwind's default transition timing baked into the `transition` shorthand. */
+export const TRANSITION_DEFAULT_TIMING = '150ms cubic-bezier(0.4, 0, 0.2, 1)';
+
 // ============================================================================
 // STYLE PRESETS
 // Predefined values for complex CSS properties (shadows, gradients, borders)