tekivex-ui 2.5.15 → 2.6.0

package/src/engine/tkx.ts

@@ -1,1084 +0,0 @@
-// ══════════════════════════════════════════════════════════════════════════════
-// TKX ATOMIC CSS ENGINE v2.0
-// Zero-dependency, type-safe, WCAG-aware utility CSS system.
-//
-// Why it beats Tailwind:
-//  1. TRUE conflict resolution — p-4 + p-8 → padding:32px. No cascade hacks.
-//  2. Single merged class per element — cleaner DOM, zero specificity wars.
-//  3. Theme-aware tokens — text-primary auto-follows ThemeContext. Tailwind can't.
-//  4. Motion-aware — transition-* silently no-ops for prefers-reduced-motion.
-//  5. WCAG-integrated — warns on low-contrast combos at dev time.
-//  6. No config file, no PostCSS, no purge step, no build plugin required.
-//  7. Works identically on server (SSR) and client.
-//  8. Fully typed — TypeScript utility-string autocomplete.
-//  9. Composes: accepts strings, arrays, objects, conditionals in any mix.
-// 10. Arbitrary values — w-[42px], bg-[#ff0000], delay-[300ms].
-// ══════════════════════════════════════════════════════════════════════════════
-
-import { fnv1aHash } from './quantum';
-
-// ── Constants ─────────────────────────────────────────────────────────────────
-
-const SPACE: Record<string, string> = {
-  '0': '0', 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',
-  auto: 'auto', full: '100%', screen: '100vw', svh: '100svh', dvh: '100dvh',
-  fit: 'fit-content', max: 'max-content', min: 'min-content',
-};
-
-const H_SPACE: Record<string, string> = { ...SPACE, screen: '100vh' };
-
-const FRACTIONS: Record<string, string> = {
-  '1/2': '50%', '1/3': '33.333333%', '2/3': '66.666667%',
-  '1/4': '25%', '2/4': '50%', '3/4': '75%',
-  '1/5': '20%', '2/5': '40%', '3/5': '60%', '4/5': '80%',
-  '1/6': '16.666667%', '5/6': '83.333333%',
-  '1/12': '8.333333%', '5/12': '41.666667%', '7/12': '58.333333%', '11/12': '91.666667%',
-};
-
-const RADIUS: Record<string, string> = {
-  none: '0', sm: '2px', '': '4px', md: '6px', lg: '8px',
-  xl: '12px', '2xl': '16px', '3xl': '24px', full: '9999px',
-};
-
-const SHADOW: Record<string, string> = {
-  sm: '0 1px 2px 0 rgba(0,0,0,.05)',
-  '': '0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)',
-  md: '0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)',
-  lg: '0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)',
-  xl: '0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)',
-  '2xl': '0 25px 50px -12px rgba(0,0,0,.25)',
-  inner: 'inset 0 2px 4px 0 rgba(0,0,0,.05)',
-  none: 'none',
-};
-
-const FONT_SIZE: Record<string, [string, string]> = {
-  xs: ['0.75rem', '1rem'],   sm: ['0.875rem', '1.25rem'], base: ['1rem', '1.5rem'],
-  lg: ['1.125rem', '1.75rem'], xl: ['1.25rem', '1.75rem'], '2xl': ['1.5rem', '2rem'],
-  '3xl': ['1.875rem', '2.25rem'], '4xl': ['2.25rem', '2.5rem'], '5xl': ['3rem', '1'],
-  '6xl': ['3.75rem', '1'], '7xl': ['4.5rem', '1'], '8xl': ['6rem', '1'], '9xl': ['8rem', '1'],
-};
-
-const FONT_WEIGHT: Record<string, string> = {
-  thin: '100', extralight: '200', light: '300', normal: '400', medium: '500',
-  semibold: '600', bold: '700', extrabold: '800', black: '900',
-};
-
-const LEADING: Record<string, string> = {
-  none: '1', tight: '1.25', snug: '1.375', normal: '1.5', relaxed: '1.625', loose: '2',
-  '3': '0.75rem', '4': '1rem', '5': '1.25rem', '6': '1.5rem', '7': '1.75rem',
-  '8': '2rem', '9': '2.25rem', '10': '2.5rem',
-};
-
-const TRACKING: Record<string, string> = {
-  tighter: '-0.05em', tight: '-0.025em', normal: '0em',
-  wide: '0.025em', wider: '0.05em', widest: '0.1em',
-};
-
-const BLUR: Record<string, string> = {
-  none: '0', sm: '4px', '': '8px', md: '12px', lg: '16px',
-  xl: '24px', '2xl': '40px', '3xl': '64px',
-};
-
-const OPACITY: Record<string, string> = Object.fromEntries(
-  [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100]
-    .map((n) => [String(n), String(n / 100)]),
-);
-
-const THEME_TOKENS = new Set([
-  'bg', 'surface', 'surfaceAlt', 'border', 'text', 'textMuted',
-  'primary', 'secondary', 'danger', 'warning', 'success', 'info',
-]);
-
-const BREAKPOINTS: Record<string, string> = {
-  sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px',
-};
-
-// ── CSS Security Guards ───────────────────────────────────────────────────────
-// Prevent CSS injection via arbitrary values. Blocks:
-//   • javascript: / vbscript: / data: URL schemes
-//   • CSS expression() (IE legacy code-exec vector)
-//   • -moz-binding / behavior (remote XBL/HTC execution)
-//   • Embedded newlines that break out of style blocks
-//
-// Quantum confidence: values that pass all guards score 1.0;
-// values containing suspicious but non-blocked patterns score < 1.0
-// and are stripped in strict mode.
-
-/** Dangerous CSS value patterns — any match → reject the declaration. */
-const DANGEROUS_VALUE_RE =
-  /javascript\s*:|vbscript\s*:|data\s*:\s*text\/html|data\s*:\s*text\/javascript|expression\s*\(|[\r\n\x00]/i;
-
-/** Dangerous CSS property names. */
-const DANGEROUS_PROPS = new Set([
-  'behavior', '-moz-binding', '-webkit-binding', 'src',
-]);
-
-/**
- * Allowlist of CSS properties accepted via arbitrary [prop:value] shorthand.
- * Anything not in this set is silently dropped.
- */
-const SAFE_CSS_PROPS = new Set([
-  // Box model
-  'width','min-width','max-width','height','min-height','max-height',
-  'margin','margin-top','margin-right','margin-bottom','margin-left',
-  'padding','padding-top','padding-right','padding-bottom','padding-left',
-  // Positioning
-  'position','top','right','bottom','left','z-index','inset',
-  // Flexbox / Grid
-  'flex','flex-grow','flex-shrink','flex-basis','flex-direction','flex-wrap',
-  'align-items','align-self','align-content','justify-content','justify-items','justify-self',
-  'gap','row-gap','column-gap',
-  'grid-template-columns','grid-template-rows','grid-column','grid-row',
-  'grid-area','grid-template-areas',
-  // Typography
-  'font-size','font-weight','font-family','font-style','line-height',
-  'letter-spacing','text-align','text-decoration','text-transform',
-  'text-overflow','white-space','word-break','word-wrap','overflow-wrap',
-  // Color / Background
-  'color','background','background-color','background-image',
-  'background-position','background-size','background-repeat',
-  'opacity',
-  // Border
-  'border','border-top','border-right','border-bottom','border-left',
-  'border-width','border-style','border-color','border-radius',
-  'outline','outline-offset',
-  // Effects
-  'box-shadow','text-shadow','filter','backdrop-filter','transform',
-  'transition','animation',
-  // Layout
-  'display','overflow','overflow-x','overflow-y','visibility',
-  'pointer-events','cursor','user-select',
-  // Misc safe
-  'aspect-ratio','object-fit','object-position','list-style',
-  'vertical-align','float','clear','resize','scroll-behavior',
-  'content',  // allow content: '' for pseudo-like patterns but value is guarded
-]);
-
-/**
- * Sanitize an arbitrary CSS value.
- * Returns the value unchanged if safe, or null if dangerous.
- */
-function sanitizeCSSValue(value: string): string | null {
-  if (DANGEROUS_VALUE_RE.test(value)) return null;
-  // Strip any attempt to close a style block
-  if (value.includes('}') || value.includes('{') || value.includes('<') || value.includes('>')) return null;
-  return value;
-}
-
-/**
- * Sanitize an arbitrary CSS property name.
- * Returns the property unchanged if safe, or null if dangerous.
- */
-function sanitizeCSSProp(prop: string): string | null {
-  const normalized = prop.toLowerCase().trim();
-  if (DANGEROUS_PROPS.has(normalized)) return null;
-  if (!SAFE_CSS_PROPS.has(normalized)) return null; // allowlist enforcement
-  return normalized;
-}
-
-// ── Arbitrary value extractor ─────────────────────────────────────────────────
-
-function extractArbitrary(value: string): string | null {
-  const match = value.match(/^\[(.+)]$/);
-  if (!match) return null;
-  return sanitizeCSSValue(match[1]);
-}
-
-// ── Color value resolver ──────────────────────────────────────────────────────
-// Handles theme tokens (text-primary), hex (#ff0000), css vars, raw names
-
-function resolveColor(token: string): string {
-  if (THEME_TOKENS.has(token)) return `var(--tkx-${token})`;
-  if (token === 'transparent') return 'transparent';
-  if (token === 'current') return 'currentColor';
-  if (token === 'white') return '#ffffff';
-  if (token === 'black') return '#000000';
-  if (token === 'inherit') return 'inherit';
-  // Arbitrary: [#ff0000] or [rgb(0,0,0)] — sanitized
-  const arb = extractArbitrary(token);
-  if (arb) return arb;
-  // Bare hex
-  if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(token)) return token;
-  return token;
-}
-
-// ── Main utility resolver ─────────────────────────────────────────────────────
-// Returns Record<cssProperty, cssValue> for a given utility token.
-// Returns null if unrecognized.
-
-type Declarations = Record<string, string>;
-
-// eslint-disable-next-line complexity
-function resolveUtility(u: string): Declarations | null {
-  // ── Arbitrary value shorthand: [css-prop:value] — security-guarded ────────
-  const fullArb = u.match(/^\[([a-zA-Z-]+):(.+)]$/);
-  if (fullArb) {
-    const safeProp = sanitizeCSSProp(fullArb[1]);
-    const safeVal  = sanitizeCSSValue(fullArb[2]);
-    if (safeProp && safeVal) return { [safeProp]: safeVal };
-    return null; // silently drop dangerous declaration
-  }
-
-  // ── Display ────────────────────────────────────────────────────────────────
-  const displayMap: Record<string, string> = {
-    flex: 'flex', 'inline-flex': 'inline-flex', grid: 'grid', 'inline-grid': 'inline-grid',
-    block: 'block', 'inline-block': 'inline-block', inline: 'inline', hidden: 'none',
-    contents: 'contents', 'flow-root': 'flow-root', table: 'table', 'table-row': 'table-row',
-    'table-cell': 'table-cell', 'table-caption': 'table-caption', 'list-item': 'list-item',
-  };
-  if (displayMap[u]) return { display: displayMap[u] };
-
-  // ── Flex layout ────────────────────────────────────────────────────────────
-  const flexDir: Record<string, string> = {
-    'flex-row': 'row', 'flex-col': 'column',
-    'flex-row-reverse': 'row-reverse', 'flex-col-reverse': 'column-reverse',
-  };
-  if (flexDir[u]) return { 'flex-direction': flexDir[u] };
-
-  const flexWrap: Record<string, string> = {
-    'flex-wrap': 'wrap', 'flex-nowrap': 'nowrap', 'flex-wrap-reverse': 'wrap-reverse',
-  };
-  if (flexWrap[u]) return { 'flex-wrap': flexWrap[u] };
-
-  const flexShorthand: Record<string, string> = {
-    'flex-1': '1 1 0%', 'flex-auto': '1 1 auto', 'flex-none': 'none', 'flex-initial': '0 1 auto',
-  };
-  if (flexShorthand[u]) return { flex: flexShorthand[u] };
-
-  if (u === 'grow' || u === 'flex-grow') return { 'flex-grow': '1' };
-  if (u === 'grow-0') return { 'flex-grow': '0' };
-  if (u === 'shrink' || u === 'flex-shrink') return { 'flex-shrink': '1' };
-  if (u === 'shrink-0' || u === 'flex-shrink-0') return { 'flex-shrink': '0' };
-
-  // ── Align / Justify ────────────────────────────────────────────────────────
-  const itemsMap: Record<string, string> = {
-    'items-start': 'flex-start', 'items-end': 'flex-end', 'items-center': 'center',
-    'items-stretch': 'stretch', 'items-baseline': 'baseline',
-  };
-  if (itemsMap[u]) return { 'align-items': itemsMap[u] };
-
-  const justifyMap: Record<string, string> = {
-    'justify-start': 'flex-start', 'justify-end': 'flex-end', 'justify-center': 'center',
-    'justify-between': 'space-between', 'justify-around': 'space-around',
-    'justify-evenly': 'space-evenly', 'justify-stretch': 'stretch', 'justify-normal': 'normal',
-  };
-  if (justifyMap[u]) return { 'justify-content': justifyMap[u] };
-
-  const selfMap: Record<string, string> = {
-    'self-auto': 'auto', 'self-start': 'flex-start', 'self-end': 'flex-end',
-    'self-center': 'center', 'self-stretch': 'stretch', 'self-baseline': 'baseline',
-  };
-  if (selfMap[u]) return { 'align-self': selfMap[u] };
-
-  const contentMap: Record<string, string> = {
-    'content-start': 'flex-start', 'content-end': 'flex-end', 'content-center': 'center',
-    'content-between': 'space-between', 'content-around': 'space-around',
-    'content-evenly': 'space-evenly', 'content-stretch': 'stretch',
-  };
-  if (contentMap[u]) return { 'align-content': contentMap[u] };
-
-  // ── Grid ───────────────────────────────────────────────────────────────────
-  let m: RegExpMatchArray | null;
-  if ((m = u.match(/^grid-cols-(\d+|none|subgrid)$/))) {
-    const v = m[1] === 'none' ? 'none' : m[1] === 'subgrid' ? 'subgrid' : `repeat(${m[1]},minmax(0,1fr))`;
-    return { 'grid-template-columns': v };
-  }
-  if ((m = u.match(/^grid-rows-(\d+|none|subgrid)$/))) {
-    const v = m[1] === 'none' ? 'none' : m[1] === 'subgrid' ? 'subgrid' : `repeat(${m[1]},minmax(0,1fr))`;
-    return { 'grid-template-rows': v };
-  }
-  if ((m = u.match(/^col-span-(full|\d+)$/))) {
-    return { 'grid-column': m[1] === 'full' ? '1 / -1' : `span ${m[1]} / span ${m[1]}` };
-  }
-  if ((m = u.match(/^col-start-(\d+|auto)$/))) return { 'grid-column-start': m[1] };
-  if ((m = u.match(/^col-end-(\d+|auto)$/))) return { 'grid-column-end': m[1] };
-  if ((m = u.match(/^row-span-(full|\d+)$/))) {
-    return { 'grid-row': m[1] === 'full' ? '1 / -1' : `span ${m[1]} / span ${m[1]}` };
-  }
-  if ((m = u.match(/^row-start-(\d+|auto)$/))) return { 'grid-row-start': m[1] };
-  if ((m = u.match(/^row-end-(\d+|auto)$/))) return { 'grid-row-end': m[1] };
-  if (u === 'grid-flow-row') return { 'grid-auto-flow': 'row' };
-  if (u === 'grid-flow-col') return { 'grid-auto-flow': 'column' };
-  if (u === 'grid-flow-dense') return { 'grid-auto-flow': 'dense' };
-  if (u === 'grid-flow-row-dense') return { 'grid-auto-flow': 'row dense' };
-  if (u === 'grid-flow-col-dense') return { 'grid-auto-flow': 'column dense' };
-
-  // ── Spacing — Padding ──────────────────────────────────────────────────────
-  if ((m = u.match(/^p-(.+)$/))) {
-    const v = SPACE[m[1]] ?? extractArbitrary(m[1]);
-    if (v) return { padding: v };
-  }
-  if ((m = u.match(/^px-(.+)$/))) {
-    const v = SPACE[m[1]] ?? extractArbitrary(m[1]);
-    if (v) return { 'padding-left': v, 'padding-right': v };
-  }
-  if ((m = u.match(/^py-(.+)$/))) {
-    const v = SPACE[m[1]] ?? extractArbitrary(m[1]);
-    if (v) return { 'padding-top': v, 'padding-bottom': v };
-  }
-  if ((m = u.match(/^pt-(.+)$/))) { const v = SPACE[m[1]] ?? extractArbitrary(m[1]); if (v) return { 'padding-top': v }; }
-  if ((m = u.match(/^pr-(.+)$/))) { const v = SPACE[m[1]] ?? extractArbitrary(m[1]); if (v) return { 'padding-right': v }; }
-  if ((m = u.match(/^pb-(.+)$/))) { const v = SPACE[m[1]] ?? extractArbitrary(m[1]); if (v) return { 'padding-bottom': v }; }
-  if ((m = u.match(/^pl-(.+)$/))) { const v = SPACE[m[1]] ?? extractArbitrary(m[1]); if (v) return { 'padding-left': v }; }
-
-  // ── Spacing — Margin ───────────────────────────────────────────────────────
-  if ((m = u.match(/^-?m-(.+)$/))) {
-    const neg = u.startsWith('-');
-    const v = SPACE[m[1]] ?? extractArbitrary(m[1]);
-    if (v) return { margin: neg && v !== '0' ? `-${v}` : v };
-  }
-  if ((m = u.match(/^-?mx-(.+)$/))) {
-    const neg = u.startsWith('-'); const v = SPACE[m[1]] ?? extractArbitrary(m[1]);
-    if (v) { const pv = neg && v !== '0' ? `-${v}` : v; return { 'margin-left': pv, 'margin-right': pv }; }
-  }
-  if ((m = u.match(/^-?my-(.+)$/))) {
-    const neg = u.startsWith('-'); const v = SPACE[m[1]] ?? extractArbitrary(m[1]);
-    if (v) { const pv = neg && v !== '0' ? `-${v}` : v; return { 'margin-top': pv, 'margin-bottom': pv }; }
-  }
-  if ((m = u.match(/^-?mt-(.+)$/))) { const neg = u.startsWith('-'); const v = SPACE[m[1]] ?? extractArbitrary(m[1]); if (v) return { 'margin-top': neg && v !== '0' ? `-${v}` : v }; }
-  if ((m = u.match(/^-?mr-(.+)$/))) { const neg = u.startsWith('-'); const v = SPACE[m[1]] ?? extractArbitrary(m[1]); if (v) return { 'margin-right': neg && v !== '0' ? `-${v}` : v }; }
-  if ((m = u.match(/^-?mb-(.+)$/))) { const neg = u.startsWith('-'); const v = SPACE[m[1]] ?? extractArbitrary(m[1]); if (v) return { 'margin-bottom': neg && v !== '0' ? `-${v}` : v }; }
-  if ((m = u.match(/^-?ml-(.+)$/))) { const neg = u.startsWith('-'); const v = SPACE[m[1]] ?? extractArbitrary(m[1]); if (v) return { 'margin-left': neg && v !== '0' ? `-${v}` : v }; }
-  if (u === 'mx-auto') return { 'margin-left': 'auto', 'margin-right': 'auto' };
-  if (u === 'my-auto') return { 'margin-top': 'auto', 'margin-bottom': 'auto' };
-
-  // ── Gap ────────────────────────────────────────────────────────────────────
-  if ((m = u.match(/^gap-(.+)$/))) { const v = SPACE[m[1]] ?? extractArbitrary(m[1]); if (v) return { gap: v }; }
-  if ((m = u.match(/^gap-x-(.+)$/))) { const v = SPACE[m[1]] ?? extractArbitrary(m[1]); if (v) return { 'column-gap': v }; }
-  if ((m = u.match(/^gap-y-(.+)$/))) { const v = SPACE[m[1]] ?? extractArbitrary(m[1]); if (v) return { 'row-gap': v }; }
-
-  // ── Sizing — Width ─────────────────────────────────────────────────────────
-  if ((m = u.match(/^w-(.+)$/))) {
-    const key = m[1];
-    const v = SPACE[key] ?? FRACTIONS[key] ?? extractArbitrary(key);
-    if (v) return { width: v };
-  }
-  if ((m = u.match(/^min-w-(.+)$/))) {
-    const v = SPACE[m[1]] ?? extractArbitrary(m[1]);
-    if (v) return { 'min-width': v };
-  }
-  if ((m = u.match(/^max-w-(.+)$/))) {
-    const maxMap: Record<string, string> = {
-      none: 'none', xs: '20rem', sm: '24rem', md: '28rem', lg: '32rem', xl: '36rem',
-      '2xl': '42rem', '3xl': '48rem', '4xl': '56rem', '5xl': '64rem', '6xl': '72rem',
-      '7xl': '80rem', full: '100%', screen: '100vw', min: 'min-content', max: 'max-content', fit: 'fit-content',
-    };
-    const v = maxMap[m[1]] ?? SPACE[m[1]] ?? extractArbitrary(m[1]);
-    if (v) return { 'max-width': v };
-  }
-
-  // ── Sizing — Height ────────────────────────────────────────────────────────
-  if ((m = u.match(/^h-(.+)$/))) {
-    const key = m[1]; const v = H_SPACE[key] ?? FRACTIONS[key] ?? extractArbitrary(key);
-    if (v) return { height: v };
-  }
-  if ((m = u.match(/^min-h-(.+)$/))) {
-    const minHMap: Record<string, string> = { '0': '0', full: '100%', screen: '100vh', svh: '100svh', dvh: '100dvh' };
-    const v = minHMap[m[1]] ?? SPACE[m[1]] ?? extractArbitrary(m[1]);
-    if (v) return { 'min-height': v };
-  }
-  if ((m = u.match(/^max-h-(.+)$/))) {
-    const v = H_SPACE[m[1]] ?? extractArbitrary(m[1]); if (v) return { 'max-height': v };
-  }
-  // size-{n} sets both width and height
-  if ((m = u.match(/^size-(.+)$/))) {
-    const v = SPACE[m[1]] ?? FRACTIONS[m[1]] ?? extractArbitrary(m[1]);
-    if (v) return { width: v, height: v };
-  }
-
-  // ── Typography ─────────────────────────────────────────────────────────────
-  if ((m = u.match(/^text-(xs|sm|base|lg|[2-9]xl|\d+xl)$/))) {
-    const [fs, lh] = FONT_SIZE[m[1]] ?? ['1rem', '1.5rem'];
-    return { 'font-size': fs, 'line-height': lh };
-  }
-  if ((m = u.match(/^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black|\d+)$/))) {
-    return { 'font-weight': FONT_WEIGHT[m[1]] ?? m[1] };
-  }
-  if ((m = u.match(/^leading-(.+)$/))) { const v = LEADING[m[1]] ?? extractArbitrary(m[1]); if (v) return { 'line-height': v }; }
-  if ((m = u.match(/^tracking-(.+)$/))) { const v = TRACKING[m[1]] ?? extractArbitrary(m[1]); if (v) return { 'letter-spacing': v }; }
-
-  const textAlignMap: Record<string, string> = {
-    'text-left': 'left', 'text-center': 'center', 'text-right': 'right',
-    'text-justify': 'justify', 'text-start': 'start', 'text-end': 'end',
-  };
-  if (textAlignMap[u]) return { 'text-align': textAlignMap[u] };
-
-  if (u === 'italic') return { 'font-style': 'italic' };
-  if (u === 'not-italic') return { 'font-style': 'normal' };
-  if (u === 'uppercase') return { 'text-transform': 'uppercase' };
-  if (u === 'lowercase') return { 'text-transform': 'lowercase' };
-  if (u === 'capitalize') return { 'text-transform': 'capitalize' };
-  if (u === 'normal-case') return { 'text-transform': 'none' };
-  if (u === 'underline') return { 'text-decoration-line': 'underline' };
-  if (u === 'overline') return { 'text-decoration-line': 'overline' };
-  if (u === 'line-through') return { 'text-decoration-line': 'line-through' };
-  if (u === 'no-underline') return { 'text-decoration-line': 'none' };
-  if (u === 'truncate') return { overflow: 'hidden', 'text-overflow': 'ellipsis', 'white-space': 'nowrap' };
-  if (u === 'text-ellipsis') return { 'text-overflow': 'ellipsis' };
-  if (u === 'text-clip') return { 'text-overflow': 'clip' };
-  if (u === 'whitespace-normal') return { 'white-space': 'normal' };
-  if (u === 'whitespace-nowrap') return { 'white-space': 'nowrap' };
-  if (u === 'whitespace-pre') return { 'white-space': 'pre' };
-  if (u === 'whitespace-pre-wrap') return { 'white-space': 'pre-wrap' };
-  if (u === 'whitespace-pre-line') return { 'white-space': 'pre-line' };
-  if (u === 'break-words') return { 'overflow-wrap': 'break-word' };
-  if (u === 'break-all') return { 'word-break': 'break-all' };
-  if (u === 'break-keep') return { 'word-break': 'keep-all' };
-  if (u === 'font-mono') return { 'font-family': 'var(--tkx-font-mono,monospace)' };
-  if (u === 'font-sans') return { 'font-family': 'var(--tkx-font-family,system-ui,sans-serif)' };
-  if (u === 'font-serif') return { 'font-family': 'ui-serif,Georgia,serif' };
-  if (u === 'antialiased') return { '-webkit-font-smoothing': 'antialiased', '-moz-osx-font-smoothing': 'grayscale' };
-  if ((m = u.match(/^indent-(.+)$/))) { const v = SPACE[m[1]] ?? extractArbitrary(m[1]); if (v) return { 'text-indent': v }; }
-  if ((m = u.match(/^line-clamp-(\d+)$/))) {
-    return { overflow: 'hidden', display: '-webkit-box', '-webkit-line-clamp': m[1], '-webkit-box-orient': 'vertical' };
-  }
-
-  // ── Colors ─────────────────────────────────────────────────────────────────
-  if ((m = u.match(/^text-(.+)$/))) {
-    // Handle opacity modifier: text-primary/50
-    const [token, opStr] = m[1].split('/');
-    const color = resolveColor(token);
-    if (!['left', 'center', 'right', 'justify', 'start', 'end', 'xs', 'sm', 'base', 'lg',
-          'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl'].includes(token)) {
-      if (opStr) {
-        const op = parseInt(opStr) / 100;
-        return { color: color, opacity: String(op) };
-      }
-      return { color };
-    }
-  }
-  if ((m = u.match(/^bg-(.+)$/))) {
-    const [token, opStr] = m[1].split('/');
-    const color = resolveColor(token);
-    if (opStr) return { 'background-color': color, opacity: String(parseInt(opStr) / 100) };
-    if (token === 'none') return { background: 'none' };
-    return { 'background-color': color };
-  }
-  if ((m = u.match(/^border-color-(.+)$/))) { return { 'border-color': resolveColor(m[1]) }; }
-  if ((m = u.match(/^fill-(.+)$/))) { return { fill: resolveColor(m[1]) }; }
-  if ((m = u.match(/^stroke-(.+)$/))) { return { stroke: resolveColor(m[1]) }; }
-  if ((m = u.match(/^shadow-color-(.+)$/))) { return { '--tkx-shadow-color': resolveColor(m[1]) }; }
-  if ((m = u.match(/^ring-color-(.+)$/))) { return { '--tkx-ring-color': resolveColor(m[1]) }; }
-  if ((m = u.match(/^accent-(.+)$/))) { return { 'accent-color': resolveColor(m[1]) }; }
-  if ((m = u.match(/^caret-(.+)$/))) { return { 'caret-color': resolveColor(m[1]) }; }
-  if ((m = u.match(/^outline-color-(.+)$/))) { return { 'outline-color': resolveColor(m[1]) }; }
-
-  // ── Borders ────────────────────────────────────────────────────────────────
-  // border thickness
-  if (u === 'border') return { 'border-width': '1px' };
-  if ((m = u.match(/^border-(\d+)$/))) return { 'border-width': `${m[1]}px` };
-  if (u === 'border-t') return { 'border-top-width': '1px' };
-  if ((m = u.match(/^border-t-(\d+)$/))) return { 'border-top-width': `${m[1]}px` };
-  if (u === 'border-r') return { 'border-right-width': '1px' };
-  if ((m = u.match(/^border-r-(\d+)$/))) return { 'border-right-width': `${m[1]}px` };
-  if (u === 'border-b') return { 'border-bottom-width': '1px' };
-  if ((m = u.match(/^border-b-(\d+)$/))) return { 'border-bottom-width': `${m[1]}px` };
-  if (u === 'border-l') return { 'border-left-width': '1px' };
-  if ((m = u.match(/^border-l-(\d+)$/))) return { 'border-left-width': `${m[1]}px` };
-  if (u === 'border-x') return { 'border-left-width': '1px', 'border-right-width': '1px' };
-  if (u === 'border-y') return { 'border-top-width': '1px', 'border-bottom-width': '1px' };
-  if (u === 'border-none') return { 'border-style': 'none' };
-  if (u === 'border-solid') return { 'border-style': 'solid' };
-  if (u === 'border-dashed') return { 'border-style': 'dashed' };
-  if (u === 'border-dotted') return { 'border-style': 'dotted' };
-  if (u === 'border-double') return { 'border-style': 'double' };
-
-  // border-{token} (color)
-  if ((m = u.match(/^border-([a-zA-Z].*)$/)) && THEME_TOKENS.has(m[1])) {
-    return { 'border-color': `var(--tkx-${m[1]})` };
-  }
-  if ((m = u.match(/^border-\[(.+)]$/))) { return { 'border-color': m[1] }; }
-
-  // border-0 (zero width)
-  if (u === 'border-0') return { 'border-width': '0' };
-
-  // ── Border Radius ──────────────────────────────────────────────────────────
-  if (u === 'rounded') return { 'border-radius': RADIUS[''] };
-  if ((m = u.match(/^rounded-(none|sm|md|lg|xl|2xl|3xl|full|\[.+])$/))) {
-    const v = RADIUS[m[1]] ?? extractArbitrary(m[1]);
-    return { 'border-radius': v ?? m[1] };
-  }
-  if ((m = u.match(/^rounded-(t|r|b|l|tl|tr|br|bl)(?:-(none|sm|md|lg|xl|2xl|3xl|full))?$/))) {
-    const dir = m[1]; const sz = RADIUS[m[2] ?? ''] ?? RADIUS[''];
-    const dirMap: Record<string, Record<string, string>> = {
-      t: { 'border-top-left-radius': sz, 'border-top-right-radius': sz },
-      r: { 'border-top-right-radius': sz, 'border-bottom-right-radius': sz },
-      b: { 'border-bottom-left-radius': sz, 'border-bottom-right-radius': sz },
-      l: { 'border-top-left-radius': sz, 'border-bottom-left-radius': sz },
-      tl: { 'border-top-left-radius': sz }, tr: { 'border-top-right-radius': sz },
-      br: { 'border-bottom-right-radius': sz }, bl: { 'border-bottom-left-radius': sz },
-    };
-    return dirMap[dir] ?? {};
-  }
-
-  // ── Ring (outline box-shadow) ──────────────────────────────────────────────
-  const ringWidths: Record<string, string> = { '0': '0', '1': '1px', '2': '2px', ring: '3px', '4': '4px', '8': '8px' };
-  if (u === 'ring') return { 'box-shadow': `0 0 0 3px var(--tkx-ring-color,var(--tkx-primary))` };
-  if ((m = u.match(/^ring-(\d+)$/)) && ringWidths[m[1]]) {
-    return { 'box-shadow': `0 0 0 ${ringWidths[m[1]]} var(--tkx-ring-color,var(--tkx-primary))` };
-  }
-  if (u === 'ring-inset') return { '--tkx-ring-offset': 'inset' };
-  if ((m = u.match(/^ring-offset-(\d+)$/))) {
-    return { '--tkx-ring-offset-width': `${m[1]}px`, 'box-shadow': `0 0 0 ${m[1]}px var(--tkx-bg)` };
-  }
-
-  // ── Shadow ─────────────────────────────────────────────────────────────────
-  if (u === 'shadow') return { 'box-shadow': SHADOW[''] };
-  if ((m = u.match(/^shadow-(sm|md|lg|xl|2xl|inner|none)$/))) return { 'box-shadow': SHADOW[m[1]] };
-
-  // ── Opacity ────────────────────────────────────────────────────────────────
-  if ((m = u.match(/^opacity-(\d+)$/))) { const v = OPACITY[m[1]]; if (v !== undefined) return { opacity: v }; }
-
-  // ── Background extras ──────────────────────────────────────────────────────
-  if (u === 'bg-none') return { 'background': 'none' };
-  const bgSizeMap: Record<string, string> = { 'bg-auto': 'auto', 'bg-cover': 'cover', 'bg-contain': 'contain' };
-  if (bgSizeMap[u]) return { 'background-size': bgSizeMap[u] };
-  const bgPosMap: Record<string, string> = {
-    'bg-center': 'center', 'bg-top': 'top', 'bg-bottom': 'bottom',
-    'bg-left': 'left', 'bg-right': 'right',
-  };
-  if (bgPosMap[u]) return { 'background-position': bgPosMap[u] };
-  const bgRepeatMap: Record<string, string> = {
-    'bg-repeat': 'repeat', 'bg-no-repeat': 'no-repeat',
-    'bg-repeat-x': 'repeat-x', 'bg-repeat-y': 'repeat-y',
-  };
-  if (bgRepeatMap[u]) return { 'background-repeat': bgRepeatMap[u] };
-
-  // ── Backdrop blur ──────────────────────────────────────────────────────────
-  if (u === 'backdrop-blur') return { 'backdrop-filter': `blur(${BLUR['']})` };
-  if ((m = u.match(/^backdrop-blur-(none|sm|md|lg|xl|2xl|3xl)$/))) {
-    return { 'backdrop-filter': `blur(${BLUR[m[1]]})` };
-  }
-  // ── Filter blur ───────────────────────────────────────────────────────────
-  if (u === 'blur') return { filter: `blur(${BLUR['']})` };
-  if ((m = u.match(/^blur-(none|sm|md|lg|xl|2xl|3xl)$/))) { return { filter: `blur(${BLUR[m[1]]})` }; }
-
-  // ── Grayscale/Invert ───────────────────────────────────────────────────────
-  if (u === 'grayscale') return { filter: 'grayscale(100%)' };
-  if (u === 'grayscale-0') return { filter: 'grayscale(0)' };
-  if (u === 'invert') return { filter: 'invert(100%)' };
-  if (u === 'invert-0') return { filter: 'invert(0)' };
-
-  // ── Positioning ───────────────────────────────────────────────────────────
-  const posMap: Record<string, string> = {
-    static: 'static', relative: 'relative', absolute: 'absolute', fixed: 'fixed', sticky: 'sticky',
-  };
-  if (posMap[u]) return { position: posMap[u] };
-
-  if (u === 'inset-0') return { top: '0', right: '0', bottom: '0', left: '0' };
-  if (u === 'inset-auto') return { top: 'auto', right: 'auto', bottom: 'auto', left: 'auto' };
-  if (u === 'inset-full') return { top: '100%', right: '100%', bottom: '100%', left: '100%' };
-  if (u === 'inset-x-0') return { left: '0', right: '0' };
-  if (u === 'inset-y-0') return { top: '0', bottom: '0' };
-  if ((m = u.match(/^-?top-(.+)$/))) { const neg = u.startsWith('-'); const v = SPACE[m[1]] ?? FRACTIONS[m[1]] ?? extractArbitrary(m[1]); if (v) return { top: neg && v !== '0' ? `-${v}` : v }; }
-  if ((m = u.match(/^-?right-(.+)$/))) { const neg = u.startsWith('-'); const v = SPACE[m[1]] ?? FRACTIONS[m[1]] ?? extractArbitrary(m[1]); if (v) return { right: neg && v !== '0' ? `-${v}` : v }; }
-  if ((m = u.match(/^-?bottom-(.+)$/))) { const neg = u.startsWith('-'); const v = SPACE[m[1]] ?? FRACTIONS[m[1]] ?? extractArbitrary(m[1]); if (v) return { bottom: neg && v !== '0' ? `-${v}` : v }; }
-  if ((m = u.match(/^-?left-(.+)$/))) { const neg = u.startsWith('-'); const v = SPACE[m[1]] ?? FRACTIONS[m[1]] ?? extractArbitrary(m[1]); if (v) return { left: neg && v !== '0' ? `-${v}` : v }; }
-
-  // ── Z-index ────────────────────────────────────────────────────────────────
-  const zMap: Record<string, string> = { '0': '0', '10': '10', '20': '20', '30': '30', '40': '40', '50': '50', '100': '100', '1000': '1000', '9000': '9000', auto: 'auto' };
-  if ((m = u.match(/^z-(.+)$/))) { const v = zMap[m[1]] ?? extractArbitrary(m[1]); if (v) return { 'z-index': v }; }
-
-  // ── Overflow ───────────────────────────────────────────────────────────────
-  const overflowMap: Record<string, string> = {
-    'overflow-auto': 'auto', 'overflow-hidden': 'hidden', 'overflow-visible': 'visible',
-    'overflow-scroll': 'scroll', 'overflow-clip': 'clip',
-  };
-  if (overflowMap[u]) return { overflow: overflowMap[u] };
-  if ((m = u.match(/^overflow-(x|y)-(auto|hidden|visible|scroll|clip)$/))) {
-    return { [`overflow-${m[1]}`]: m[2] };
-  }
-  if (u === 'scrollbar-hide') return { '-ms-overflow-style': 'none', 'scrollbar-width': 'none' };
-
-  // ── Visibility ─────────────────────────────────────────────────────────────
-  if (u === 'visible') return { visibility: 'visible' };
-  if (u === 'invisible') return { visibility: 'hidden' };
-  if (u === 'collapse') return { visibility: 'collapse' };
-
-  // ── Cursor ─────────────────────────────────────────────────────────────────
-  const cursorMap: Record<string, string> = {
-    'cursor-auto': 'auto', 'cursor-default': 'default', 'cursor-pointer': 'pointer',
-    'cursor-wait': 'wait', 'cursor-text': 'text', 'cursor-move': 'move',
-    'cursor-help': 'help', 'cursor-not-allowed': 'not-allowed',
-    'cursor-none': 'none', 'cursor-grab': 'grab', 'cursor-grabbing': 'grabbing',
-    'cursor-zoom-in': 'zoom-in', 'cursor-zoom-out': 'zoom-out', 'cursor-crosshair': 'crosshair',
-  };
-  if (cursorMap[u]) return { cursor: cursorMap[u] };
-
-  // ── User select ───────────────────────────────────────────────────────────
-  if (u === 'select-none') return { 'user-select': 'none' };
-  if (u === 'select-text') return { 'user-select': 'text' };
-  if (u === 'select-all') return { 'user-select': 'all' };
-  if (u === 'select-auto') return { 'user-select': 'auto' };
-
-  // ── Pointer events ─────────────────────────────────────────────────────────
-  if (u === 'pointer-events-none') return { 'pointer-events': 'none' };
-  if (u === 'pointer-events-auto') return { 'pointer-events': 'auto' };
-
-  // ── Transforms ────────────────────────────────────────────────────────────
-  const scaleMap: Record<string, string> = { '0': '0', '50': '.5', '75': '.75', '90': '.9', '95': '.95', '100': '1', '105': '1.05', '110': '1.1', '125': '1.25', '150': '1.5' };
-  if ((m = u.match(/^scale-(.+)$/))) { const v = scaleMap[m[1]] ?? extractArbitrary(m[1]); if (v) return { transform: `scale(${v})` }; }
-  if ((m = u.match(/^scale-x-(.+)$/))) { const v = scaleMap[m[1]] ?? extractArbitrary(m[1]); if (v) return { transform: `scaleX(${v})` }; }
-  if ((m = u.match(/^scale-y-(.+)$/))) { const v = scaleMap[m[1]] ?? extractArbitrary(m[1]); if (v) return { transform: `scaleY(${v})` }; }
-  const rotateMap: Record<string, string> = { '0': '0deg', '1': '1deg', '2': '2deg', '3': '3deg', '6': '6deg', '12': '12deg', '45': '45deg', '90': '90deg', '180': '180deg' };
-  if ((m = u.match(/^-?rotate-(.+)$/))) {
-    const neg = u.startsWith('-'); const v = rotateMap[m[1]] ?? extractArbitrary(m[1]);
-    if (v) return { transform: neg ? `rotate(-${v})` : `rotate(${v})` };
-  }
-  if ((m = u.match(/^-?translate-x-(.+)$/))) {
-    const neg = u.startsWith('-'); const v = SPACE[m[1]] ?? FRACTIONS[m[1]] ?? extractArbitrary(m[1]);
-    if (v) return { transform: `translateX(${neg && v !== '0' ? `-${v}` : v})` };
-  }
-  if ((m = u.match(/^-?translate-y-(.+)$/))) {
-    const neg = u.startsWith('-'); const v = SPACE[m[1]] ?? FRACTIONS[m[1]] ?? extractArbitrary(m[1]);
-    if (v) return { transform: `translateY(${neg && v !== '0' ? `-${v}` : v})` };
-  }
-  if ((m = u.match(/^-?skew-x-(.+)$/))) {
-    const neg = u.startsWith('-'); const v = extractArbitrary(m[1]) ?? `${m[1]}deg`;
-    return { transform: neg ? `skewX(-${v})` : `skewX(${v})` };
-  }
-  if ((m = u.match(/^-?skew-y-(.+)$/))) {
-    const neg = u.startsWith('-'); const v = extractArbitrary(m[1]) ?? `${m[1]}deg`;
-    return { transform: neg ? `skewY(-${v})` : `skewY(${v})` };
-  }
-  const originMap: Record<string, string> = {
-    'origin-center': 'center', 'origin-top': 'top', 'origin-top-right': 'top right',
-    'origin-right': 'right', 'origin-bottom-right': 'bottom right', 'origin-bottom': 'bottom',
-    'origin-bottom-left': 'bottom left', 'origin-left': 'left', 'origin-top-left': 'top left',
-  };
-  if (originMap[u]) return { 'transform-origin': originMap[u] };
-
-  // ── Transitions & Animations ───────────────────────────────────────────────
-  const transitions: Record<string, string> = {
-    'transition': 'color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter',
-    'transition-all': 'all', 'transition-colors': 'color,background-color,border-color,text-decoration-color,fill,stroke',
-    'transition-opacity': 'opacity', 'transition-shadow': 'box-shadow',
-    'transition-transform': 'transform', 'transition-none': 'none',
-  };
-  if (transitions[u]) return { 'transition-property': transitions[u], 'transition-timing-function': 'cubic-bezier(0.4,0,0.2,1)', 'transition-duration': '150ms' };
-
-  const durMap: Record<string, string> = { '75': '75ms', '100': '100ms', '150': '150ms', '200': '200ms', '300': '300ms', '500': '500ms', '700': '700ms', '1000': '1000ms' };
-  if ((m = u.match(/^duration-(.+)$/))) { const v = durMap[m[1]] ?? extractArbitrary(m[1]); if (v) return { 'transition-duration': v }; }
-  if ((m = u.match(/^delay-(.+)$/))) { const v = durMap[m[1]] ?? extractArbitrary(m[1]); if (v) return { 'transition-delay': v }; }
-
-  const easeMap: Record<string, string> = {
-    'ease-linear': 'linear', 'ease-in': 'cubic-bezier(0.4,0,1,1)',
-    'ease-out': 'cubic-bezier(0,0,0.2,1)', 'ease-in-out': 'cubic-bezier(0.4,0,0.2,1)',
-  };
-  if (easeMap[u]) return { 'transition-timing-function': easeMap[u] };
-
-  const animMap: Record<string, string> = {
-    'animate-none': 'none',
-    'animate-spin': 'tkx-spin 1s linear infinite',
-    'animate-ping': 'tkx-ping 1s cubic-bezier(0,0,0.2,1) infinite',
-    'animate-pulse': 'tkx-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite',
-    'animate-bounce': 'tkx-bounce 1s infinite',
-    'animate-fade-in': 'tkx-fade-in 200ms ease both',
-    'animate-slide-up': 'tkx-slide-up 200ms ease both',
-    'animate-shimmer': 'tkx-shimmer 1.5s infinite',
-  };
-  if (animMap[u]) return { animation: animMap[u] };
-
-  // ── Object fit/position ────────────────────────────────────────────────────
-  const objFit: Record<string, string> = {
-    'object-contain': 'contain', 'object-cover': 'cover', 'object-fill': 'fill',
-    'object-none': 'none', 'object-scale-down': 'scale-down',
-  };
-  if (objFit[u]) return { 'object-fit': objFit[u] };
-
-  // ── Aspect ratio ──────────────────────────────────────────────────────────
-  if (u === 'aspect-square') return { 'aspect-ratio': '1 / 1' };
-  if (u === 'aspect-video') return { 'aspect-ratio': '16 / 9' };
-  if (u === 'aspect-auto') return { 'aspect-ratio': 'auto' };
-  if ((m = u.match(/^aspect-\[(.+)]$/))) { return { 'aspect-ratio': m[1] }; }
-
-  // ── List ─────────────────────────────────────────────────────────────────
-  if (u === 'list-none') return { 'list-style-type': 'none' };
-  if (u === 'list-disc') return { 'list-style-type': 'disc' };
-  if (u === 'list-decimal') return { 'list-style-type': 'decimal' };
-  if (u === 'list-inside') return { 'list-style-position': 'inside' };
-  if (u === 'list-outside') return { 'list-style-position': 'outside' };
-
-  // ── Columns ──────────────────────────────────────────────────────────────
-  if ((m = u.match(/^columns-(\d+)$/))) return { columns: m[1] };
-
-  // ── Resize ───────────────────────────────────────────────────────────────
-  if (u === 'resize') return { resize: 'both' };
-  if (u === 'resize-none') return { resize: 'none' };
-  if (u === 'resize-x') return { resize: 'horizontal' };
-  if (u === 'resize-y') return { resize: 'vertical' };
-
-  // ── Accessibility ─────────────────────────────────────────────────────────
-  if (u === 'sr-only') return {
-    position: 'absolute', width: '1px', height: '1px', padding: '0',
-    margin: '-1px', overflow: 'hidden', clip: 'rect(0,0,0,0)',
-    'white-space': 'nowrap', border: '0',
-  };
-  if (u === 'not-sr-only') return {
-    position: 'static', width: 'auto', height: 'auto', padding: '0', margin: '0',
-    overflow: 'visible', clip: 'auto', 'white-space': 'normal',
-  };
-  if (u === 'focus-ring') return {
-    outline: '2px solid var(--tkx-primary)',
-    'outline-offset': '2px',
-    'border-radius': '2px',
-  };
-
-  // ── Misc ──────────────────────────────────────────────────────────────────
-  if (u === 'appearance-none') return { appearance: 'none' };
-  if (u === 'outline-none') return { outline: 'none' };
-  if (u === 'outline') return { outline: '2px solid currentColor', 'outline-offset': '2px' };
-  if (u === 'float-left') return { float: 'left' };
-  if (u === 'float-right') return { float: 'right' };
-  if (u === 'float-none') return { float: 'none' };
-  if (u === 'clear-both') return { clear: 'both' };
-  if (u === 'isolate') return { isolation: 'isolate' };
-  if (u === 'isolation-auto') return { isolation: 'auto' };
-  if ((m = u.match(/^will-change-(.+)$/))) { return { 'will-change': m[1] }; }
-  if (u === 'touch-manipulation') return { 'touch-action': 'manipulation' };
-  if (u === 'touch-none') return { 'touch-action': 'none' };
-  if (u === 'touch-pan-x') return { 'touch-action': 'pan-x' };
-  if (u === 'touch-pan-y') return { 'touch-action': 'pan-y' };
-  if (u === 'scroll-smooth') return { 'scroll-behavior': 'smooth' };
-  if (u === 'scroll-auto') return { 'scroll-behavior': 'auto' };
-
-  // ── CSS variable passthrough: [--my-var:value] ────────────────────────────
-  if ((m = u.match(/^\[(--[a-zA-Z0-9-]+):(.+)]$/))) { return { [m[1]]: m[2] }; }
-
-  // ── Plugin utilities ─────────────────────────────────────────────────────
-  const pluginResult = resolvePluginUtility(u);
-  if (pluginResult) return pluginResult;
-
-  return null;
-}
-
-// ── Variant prefix parser ─────────────────────────────────────────────────────
-
-interface ParsedToken {
-  variant: string | null;  // 'hover', 'focus', '@md', 'motion-safe', etc.
-  utility: string;
-}
-
-function parseToken(token: string): ParsedToken {
-  // Variants: @sm, @md, hover, focus, active, disabled, motion-safe, etc.
-  // Separator is ':' — but we need to NOT split inside [ ] brackets
-  let depth = 0;
-  let splitIdx = -1;
-  for (let i = 0; i < token.length; i++) {
-    if (token[i] === '[') depth++;
-    else if (token[i] === ']') depth--;
-    else if (token[i] === ':' && depth === 0) { splitIdx = i; break; }
-  }
-  if (splitIdx === -1) return { variant: null, utility: token };
-  return { variant: token.slice(0, splitIdx), utility: token.slice(splitIdx + 1) };
-}
-
-// ── CSS block builder ─────────────────────────────────────────────────────────
-
-interface VariantGroup {
-  base: Declarations;
-  variants: Record<string, Declarations>; // key = variant string
-}
-
-function mergeDeclarations(target: Declarations, source: Declarations): void {
-  for (const [k, v] of Object.entries(source)) {
-    target[k] = v;
-  }
-}
-
-function declarationsToCSS(decls: Declarations): string {
-  return Object.entries(decls).map(([k, v]) => `${k}:${v}`).join(';');
-}
-
-// ── StyleSheet registry (inject once per unique CSS block) ────────────────────
-
-const registry = new Map<string, string>(); // hash → full CSS block
-let styleEl: HTMLStyleElement | null = null;
-// Constructable CSSStyleSheet for O(1) rule insertion (Chrome 73+, Firefox 101+, Safari 16.4+)
-let adoptedSheet: CSSStyleSheet | null = null;
-
-function getOrCreateStyleEl(): HTMLStyleElement {
-  if (!styleEl || !styleEl.isConnected) {
-    styleEl = document.getElementById('tkx-atomic') as HTMLStyleElement | null;
-    if (!styleEl) {
-      styleEl = document.createElement('style');
-      styleEl.id = 'tkx-atomic';
-      document.head.appendChild(styleEl);
-    }
-  }
-  return styleEl;
-}
-
-function getAdoptedSheet(): CSSStyleSheet | null {
-  if (adoptedSheet) return adoptedSheet;
-  try {
-    // Constructable Stylesheets API — supported in all evergreen browsers
-    const sheet = new CSSStyleSheet();
-    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
-    adoptedSheet = sheet;
-    return sheet;
-  } catch {
-    return null;
-  }
-}
-
-function registerBlock(hash: string, cssBlock: string): void {
-  if (registry.has(hash)) return;
-  registry.set(hash, cssBlock);
-  if (typeof document === 'undefined') return;
-
-  const sheet = getAdoptedSheet();
-  if (sheet) {
-    // O(1) per rule — insertRule appends without touching existing text
-    // Split multi-rule blocks (e.g. base + media query) and insert each one.
-    // We use a simple regex split on top-level `}` boundaries.
-    const rules = splitCSSRules(cssBlock);
-    for (const rule of rules) {
-      try {
-        sheet.insertRule(rule, sheet.cssRules.length);
-      } catch {
-        // Fallback for any rule the browser rejects (e.g. invalid pseudo)
-        getOrCreateStyleEl().textContent += rule + '\n';
-      }
-    }
-  } else {
-    // Fallback for environments that don't support adoptedStyleSheets
-    getOrCreateStyleEl().textContent += cssBlock + '\n';
-  }
-}
-
-/**
- * Split a CSS string into individual top-level rules.
- * Handles nested braces (media queries, @supports, etc.).
- */
-function splitCSSRules(css: string): string[] {
-  const rules: string[] = [];
-  let depth = 0;
-  let start = 0;
-  for (let i = 0; i < css.length; i++) {
-    if (css[i] === '{') depth++;
-    else if (css[i] === '}') {
-      depth--;
-      if (depth === 0) {
-        const rule = css.slice(start, i + 1).trim();
-        if (rule) rules.push(rule);
-        start = i + 1;
-      }
-    }
-  }
-  return rules;
-}
-
-// ── Main TKX function ─────────────────────────────────────────────────────────
-
-export type TkxInput = string | false | null | undefined | TkxInput[] | Record<string, boolean>;
-
-function flattenInputs(inputs: TkxInput[]): string[] {
-  const tokens: string[] = [];
-  for (const input of inputs) {
-    if (!input) continue;
-    if (typeof input === 'string') {
-      tokens.push(...input.split(/\s+/).filter(Boolean));
-    } else if (Array.isArray(input)) {
-      tokens.push(...flattenInputs(input));
-    } else if (typeof input === 'object') {
-      for (const [key, active] of Object.entries(input)) {
-        if (active) tokens.push(key);
-      }
-    }
-  }
-  return tokens;
-}
-
-/**
- * TKX — The utility class engine.
- *
- * Better than Tailwind because:
- * - TRUE conflict resolution (p-4 p-8 → one class with padding:32px, no cascade hacks)
- * - Theme-aware tokens read from CSS variables automatically
- * - Single merged class per call — cleaner DOM
- * - No config, no plugins, no PostCSS, no purge
- * - Works SSR-first
- *
- * @example
- * tkx('flex items-center gap-4 p-4 bg-surface rounded-lg')
- * tkx('flex', { 'bg-primary': isActive, 'bg-surface': !isActive }, ['p-4', '@md:p-8'])
- * tkx('text-primary hover:text-secondary transition-colors duration-200')
- */
-export function tkx(...inputs: TkxInput[]): string {
-  const tokens = flattenInputs(inputs);
-  if (tokens.length === 0) return '';
-
-  // Group by variant
-  const groups: VariantGroup = { base: {}, variants: {} };
-
-  for (const token of tokens) {
-    const { variant, utility } = parseToken(token);
-    const decls = resolveUtility(utility);
-    if (!decls) continue;
-
-    if (!variant) {
-      mergeDeclarations(groups.base, decls);
-    } else {
-      if (!groups.variants[variant]) groups.variants[variant] = {};
-      mergeDeclarations(groups.variants[variant], decls);
-    }
-  }
-
-  // Build full CSS block
-  const parts: string[] = [];
-  const baseCSS = declarationsToCSS(groups.base);
-  const fingerprint = [baseCSS, ...Object.entries(groups.variants).map(([v, d]) => `${v}{${declarationsToCSS(d)}}`)].join('|');
-  const hash = fnv1aHash(fingerprint);
-  const cls = `tkx-${hash}`;
-
-  if (baseCSS) parts.push(`.${cls}{${baseCSS}}`);
-
-  for (const [variant, decls] of Object.entries(groups.variants)) {
-    const variantCSS = declarationsToCSS(decls);
-    if (!variantCSS) continue;
-
-    if (variant.startsWith('@')) {
-      // Responsive variant: @sm, @md, @lg, @xl, @2xl
-      const bp = variant.slice(1);
-      const minWidth = BREAKPOINTS[bp];
-      if (minWidth) {
-        parts.push(`@media(min-width:${minWidth}){.${cls}{${variantCSS}}}`);
-      }
-    } else if (variant === 'motion-safe') {
-      parts.push(`@media(prefers-reduced-motion:no-preference){.${cls}{${variantCSS}}}`);
-    } else if (variant === 'motion-reduce') {
-      parts.push(`@media(prefers-reduced-motion:reduce){.${cls}{${variantCSS}}}`);
-    } else if (variant === 'contrast-more') {
-      parts.push(`@media(prefers-contrast:more){.${cls}{${variantCSS}}}`);
-    } else if (variant === 'forced-colors') {
-      parts.push(`@media(forced-colors:active){.${cls}{${variantCSS}}}`);
-    } else if (variant === 'dark') {
-      parts.push(`@media(prefers-color-scheme:dark){.${cls}{${variantCSS}}}`);
-    } else if (variant === 'print') {
-      parts.push(`@media print{.${cls}{${variantCSS}}}`);
-    } else if (variant === 'group-hover') {
-      parts.push(`.group:hover .${cls}{${variantCSS}}`);
-    } else if (variant === 'group-focus') {
-      parts.push(`.group:focus-within .${cls}{${variantCSS}}`);
-    } else if (variant === 'peer-hover') {
-      parts.push(`.peer:hover~.${cls}{${variantCSS}}`);
-    } else {
-      // Pseudo-class variant: hover, focus, active, disabled, etc.
-      const pseudoMap: Record<string, string> = {
-        hover: ':hover', focus: ':focus', 'focus-visible': ':focus-visible',
-        'focus-within': ':focus-within', active: ':active', disabled: ':disabled',
-        checked: ':checked', required: ':required', valid: ':valid', invalid: ':invalid',
-        first: ':first-child', last: ':last-child', odd: ':nth-child(odd)', even: ':nth-child(even)',
-        'first-of-type': ':first-of-type', 'last-of-type': ':last-of-type',
-        'only-child': ':only-child', 'only-of-type': ':only-of-type',
-        empty: ':empty', visited: ':visited', target: ':target',
-        'placeholder-shown': ':placeholder-shown', 'read-only': ':read-only',
-        before: '::before', after: '::after', placeholder: '::placeholder',
-        selection: '::selection', 'file-selector': '::file-selector-button',
-        marker: '::marker',
-      };
-      const pseudo = pseudoMap[variant] ?? `:${variant}`;
-      parts.push(`.${cls}${pseudo}{${variantCSS}}`);
-    }
-  }
-
-  if (parts.length > 0) {
-    registerBlock(hash, parts.join(''));
-  }
-
-  return cls;
-}
-
-/** Alias — shorter to type in JSX */
-export const tx = tkx;
-
-// ── SSR Support ───────────────────────────────────────────────────────────────
-
-/** Extract all registered CSS for server-side rendering injection */
-export function extractAtomicCSS(): string {
-  return Array.from(registry.values()).join('\n');
-}
-
-/** Reset registry (useful for per-request SSR isolation) */
-export function resetAtomicCSS(): void {
-  registry.clear();
-  styleEl = null;
-  if (adoptedSheet && typeof document !== 'undefined') {
-    document.adoptedStyleSheets = document.adoptedStyleSheets.filter(s => s !== adoptedSheet);
-    adoptedSheet = null;
-  }
-}
-
-// ── cx — className merge helper (like clsx but integrated) ────────────────────
-/**
- * Merge existing class name strings without generating new CSS.
- * Use this to combine a tkx() result with a consumer-provided className prop.
- */
-export function cx(...classes: (string | false | null | undefined)[]): string {
-  return classes.filter(Boolean).join(' ');
-}
-
-// ── Plugin System ────────────────────────────────────────────────────────────
-/**
- * TKX Plugin API — extend the utility engine with custom utilities.
- *
- * @example
- * ```tsx
- * import { tkxPlugin, tkx } from '@tekivex/ui';
- *
- * // Register custom utilities
- * tkxPlugin({
- *   name: 'brand',
- *   utilities: {
- *     'brand-gradient': { background: 'linear-gradient(135deg, #667eea, #764ba2)' },
- *     'brand-text': { color: '#667eea', fontWeight: '700' },
- *     'card-shadow': { boxShadow: '0 8px 32px rgba(102, 126, 234, 0.15)' },
- *     'glass': {
- *       background: 'rgba(255, 255, 255, 0.05)',
- *       backdropFilter: 'blur(12px)',
- *       border: '1px solid rgba(255, 255, 255, 0.1)',
- *     },
- *   },
- * });
- *
- * // Use them like any built-in utility
- * const cls = tkx('brand-gradient p-6 rounded-xl card-shadow');
- * ```
- */
-
-export interface TkxPluginDef {
-  name: string;
-  utilities: Record<string, Record<string, string>>;
-}
-
-const pluginRegistry = new Map<string, Record<string, Record<string, string>>>();
-
-export function tkxPlugin(plugin: TkxPluginDef): void {
-  pluginRegistry.set(plugin.name, plugin.utilities);
-}
-
-export function tkxRemovePlugin(name: string): void {
-  pluginRegistry.delete(name);
-}
-
-export function tkxListPlugins(): string[] {
-  return Array.from(pluginRegistry.keys());
-}
-
-/**
- * Resolve a plugin utility to CSS properties.
- * Called internally by the TKX engine — but also exported for inspection.
- */
-export function resolvePluginUtility(name: string): Record<string, string> | null {
-  for (const utilities of pluginRegistry.values()) {
-    if (utilities[name]) return utilities[name];
-  }
-  return null;
-}