inkhouse 0.1.0-beta.0

package/src/tailwind.ts

@@ -0,0 +1,2379 @@
+// --- Tailwind utilities: class parsing, style conversion, and codegen ---
+
+import { COMPONENT_DEFS } from './tokens';
+import { parseColor, nearestColorToken } from './colors';
+import type { RGB } from './colors';
+import { getComponentDef } from './component-defs';
+import { bindColorVariable } from './variables';
+import {
+  parseUtilityClass,
+  hasResponsiveVariant as hasResponsiveVariantSemantic,
+  variantState as variantStateSemantic,
+  spacingValue,
+  resolveMaxWidth,
+  resolveRadius,
+  parseLength as parseLengthSemantic,
+} from './utility-resolver';
+import { parseRadialAnchorFromUtility, radialGradientTransformFromAnchor, type RadialAnchor } from './radial-gradient';
+import { rotationTransformAroundPointRadians } from './transform-math';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface TailwindStyle {
+  bg: string | null;
+  bgToken: string | null;
+  bgOpacity?: number;
+  text: string | null;
+  textToken: string | null;
+  border: string | null;
+  borderToken: string | null;
+  opacity: number | null;
+  underline?: boolean;
+}
+
+export interface FrameProperties {
+  cornerRadius: number;
+  paddingTop: number;
+  paddingBottom: number;
+  paddingLeft: number;
+  paddingRight: number;
+  background: string | null;
+  backgroundOpacity?: number;
+  borderColor: string | null;
+  borderWidth: number;
+}
+
+const FALLBACK_COLOR_TOKENS: Record<string, string> = {
+  white: '#ffffff',
+  black: '#000000',
+  transparent: '#000000',  // parsed color; opacity: 0 is applied separately via resolveColorTokenValue
+  'gray-900': '#111827',
+  'gray-800': '#1f2937',
+  'gray-700': '#374151',
+  'gray-600': '#4b5563',
+  'gray-500': '#6b7280',
+  'gray-400': '#9ca3af',
+  'gray-300': '#d1d5db',
+  'gray-200': '#e5e7eb',
+  'gray-100': '#f3f4f6',
+  'slate-900': '#0f172a',
+  'slate-800': '#1e293b',
+  'slate-700': '#334155',
+  'slate-600': '#475569',
+  'slate-500': '#64748b',
+  'slate-400': '#94a3b8',
+  'slate-300': '#cbd5e1',
+  'slate-200': '#e2e8f0',
+  'slate-100': '#f1f5f9',
+};
+
+type StyleMapEntry = { declarations: Record<string, string>; media?: string };
+type StyleMap = Record<string, StyleMapEntry[]>;
+
+const ABSOLUTE_NODES = new WeakSet<SceneNode>();
+const CSS_GRID_VERTICAL_FRAMES = new WeakSet<SceneNode>(); // grid without grid-cols-N → single-column, children stretch
+const FULL_WIDTH_NODES = new WeakSet<SceneNode>();
+const FULL_HEIGHT_NODES = new WeakSet<SceneNode>();
+const FRACTION_WIDTH_NODES = new WeakMap<SceneNode, number>();
+const FIXED_WIDTH_NODES = new WeakSet<SceneNode>();
+const SELF_ALIGNMENT_NODES = new WeakMap<SceneNode, 'MIN' | 'CENTER' | 'MAX' | 'STRETCH'>();
+const FLEX_BASIS_NODES = new WeakMap<SceneNode, number>();
+const MIN_WIDTH_NODES = new WeakMap<SceneNode, number>();
+const GRID_COLUMNS_NODES = new WeakMap<SceneNode, number>();
+const COL_SPAN_NODES = new WeakMap<SceneNode, number>(); // child → number of columns spanned
+const POSITION_INFO_NODES = new WeakMap<SceneNode, { top?: number; bottom?: number; left?: number; right?: number; hintParentHeight?: number; inset?: number }>();
+const DEFERRED_BOTTOM_NODES = new WeakMap<SceneNode, number>(); // child → bottom pixel offset
+const DEFERRED_TOP_RELATIVE_NODES = new WeakMap<SceneNode, number>(); // child → (parentHeight - N) top offset
+const DEFERRED_CENTER_Y_NODES = new WeakSet<SceneNode>(); // absolute children needing cross-axis centering
+const BORDER_WIDTH_CLASSES = new WeakMap<SceneNode, string[]>();
+
+function getStyleMap(): StyleMap | null {
+  const defs: any = COMPONENT_DEFS as any;
+  return defs && defs.styleMap ? (defs.styleMap as StyleMap) : null;
+}
+
+function getPaletteTokens(): Record<string, string> {
+  const defs: any = COMPONENT_DEFS as any;
+  return defs && defs.paletteTokens ? (defs.paletteTokens as Record<string, string>) : {};
+}
+
+export function markAbsoluteNode(node: SceneNode): void {
+  ABSOLUTE_NODES.add(node);
+}
+
+export function markPositionInfo(node: SceneNode, info: { top?: number; bottom?: number; left?: number; right?: number; hintParentHeight?: number; inset?: number }): void {
+  const existing = POSITION_INFO_NODES.get(node) || {};
+  POSITION_INFO_NODES.set(node, { ...existing, ...info });
+}
+
+export function applyAbsoluteIfPossible(child: SceneNode, parent: FrameNode): void {
+  if (!ABSOLUTE_NODES.has(child)) return;
+  if ('layoutMode' in parent && parent.layoutMode && parent.layoutMode !== 'NONE') {
+    try {
+      (child as any).layoutPositioning = 'ABSOLUTE';
+
+      // Apply positioning from stored position info
+      const posInfo = POSITION_INFO_NODES.get(child);
+      if (posInfo) {
+        // If the child hints a minimum parent height (e.g. gradient-blob inside collapsed container)
+        if (posInfo.hintParentHeight != null && 'resize' in parent) {
+          try {
+            const ph = posInfo.hintParentHeight;
+            const pw = Math.max(1, parent.width);
+            // Respect explicit fixed-height parents. Only auto-expand when the
+            // parent is effectively unconstrained/collapsed.
+            let heightIsFixed = false;
+            if ('layoutMode' in parent && 'primaryAxisSizingMode' in parent && 'counterAxisSizingMode' in parent) {
+              if ((parent as any).layoutMode === 'VERTICAL') {
+                heightIsFixed = (parent as any).primaryAxisSizingMode === 'FIXED';
+              } else if ((parent as any).layoutMode === 'HORIZONTAL') {
+                heightIsFixed = (parent as any).counterAxisSizingMode === 'FIXED';
+              }
+            }
+            const parentCollapsed = parent.height <= 1;
+            if (!heightIsFixed && parentCollapsed && parent.height < ph) {
+              parent.resize(pw, ph);
+              if ('primaryAxisSizingMode' in parent) (parent as any).primaryAxisSizingMode = 'FIXED';
+            }
+          } catch (_e) { /* ignore */ }
+        }
+        if ('x' in child && 'y' in child) {
+          const childFrame = child as FrameNode;
+          // inset-{n}: position at (n, n) and resize to fill parent minus inset on all sides
+          if (posInfo.inset != null) {
+            const inset = posInfo.inset;
+            childFrame.x = inset;
+            childFrame.y = inset;
+            const targetW = Math.max(1, parent.width - inset * 2);
+            const targetH = Math.max(1, parent.height - inset * 2);
+            try {
+              (childFrame as any).resize(targetW, targetH);
+              if ('primaryAxisSizingMode' in childFrame) (childFrame as any).primaryAxisSizingMode = 'FIXED';
+              if ('counterAxisSizingMode' in childFrame) (childFrame as any).counterAxisSizingMode = 'FIXED';
+            } catch (_e) { /* ignore */ }
+          } else {
+            if (posInfo.left != null) {
+              childFrame.x = posInfo.left;
+            } else if (posInfo.right != null) {
+              childFrame.x = parent.width - childFrame.width - posInfo.right;
+            }
+            if (posInfo.top != null) {
+              childFrame.y = posInfo.top;
+            } else if (posInfo.bottom != null) {
+              // Defer: parent height may not be final yet (flow children added after this call)
+              DEFERRED_BOTTOM_NODES.set(child, posInfo.bottom);
+            } else {
+              // No explicit top/bottom: CSS places absolute children at the cross-axis
+              // static position. For items-center parents this means vertically centered.
+              if ((parent as any).counterAxisAlignItems === 'CENTER') {
+                DEFERRED_CENTER_Y_NODES.add(child);
+              }
+            }
+          }
+        }
+      }
+    } catch (_err) {
+      // ignore
+    }
+  }
+  ABSOLUTE_NODES.delete(child);
+  POSITION_INFO_NODES.delete(child);
+}
+
+/** Call after all children have been appended to a frame to apply bottom-anchored positions. */
+export function applyDeferredBottomPositioning(parent: FrameNode): void {
+  for (const child of (parent.children as SceneNode[])) {
+    const bottom = DEFERRED_BOTTOM_NODES.get(child);
+    if (bottom != null) {
+      try {
+        (child as any).y = parent.height - (child as any).height - bottom;
+      } catch (_e) { /* ignore */ }
+      DEFERRED_BOTTOM_NODES.delete(child);
+    }
+    // Handle top-[calc(100%-Nrem)]: top = parentHeight - N
+    const topRelative = DEFERRED_TOP_RELATIVE_NODES.get(child);
+    if (topRelative != null) {
+      try {
+        (child as any).y = parent.height - topRelative;
+      } catch (_e) { /* ignore */ }
+      DEFERRED_TOP_RELATIVE_NODES.delete(child);
+    }
+  }
+}
+
+/** Call after all children have been appended to center absolute children with no explicit top/bottom. */
+export function applyDeferredCenterYPositioning(parent: FrameNode): void {
+  const parentHeight = parent.height;
+  if (parentHeight <= 0) return;
+  for (const child of (parent.children as SceneNode[])) {
+    if (DEFERRED_CENTER_Y_NODES.has(child)) {
+      try {
+        const childHeight = (child as any).height || 0;
+        (child as any).y = Math.round((parentHeight - childHeight) / 2);
+      } catch (_e) { /* ignore */ }
+      DEFERRED_CENTER_Y_NODES.delete(child);
+    }
+  }
+}
+
+export function markFullWidthNode(node: SceneNode): void {
+  FULL_WIDTH_NODES.add(node);
+}
+
+function markFullHeightNode(node: SceneNode): void {
+  FULL_HEIGHT_NODES.add(node);
+}
+
+function markFixedWidthNode(node: SceneNode): void {
+  FIXED_WIDTH_NODES.add(node);
+}
+
+function markSelfAlignmentNode(node: SceneNode, align: 'MIN' | 'CENTER' | 'MAX' | 'STRETCH'): void {
+  SELF_ALIGNMENT_NODES.set(node, align);
+}
+
+function markFlexBasisNode(node: SceneNode, basis: number): void {
+  if (!Number.isFinite(basis)) return;
+  FLEX_BASIS_NODES.set(node, basis);
+}
+
+function markMinWidthNode(node: SceneNode, minWidth: number): void {
+  if (!Number.isFinite(minWidth)) return;
+  MIN_WIDTH_NODES.set(node, minWidth);
+}
+
+function markGridColumnsNode(node: SceneNode, cols: number): void {
+  if (!Number.isFinite(cols) || cols <= 0) return;
+  GRID_COLUMNS_NODES.set(node, cols);
+}
+
+function markColSpanNode(node: SceneNode, span: number): void {
+  if (!Number.isFinite(span) || span <= 0) return;
+  COL_SPAN_NODES.set(node, span);
+}
+
+export function getColSpanNode(node: SceneNode): number {
+  return COL_SPAN_NODES.get(node) ?? 1;
+}
+
+function markFractionWidthNode(node: SceneNode, fraction: number): void {
+  if (!Number.isFinite(fraction) || fraction <= 0) return;
+  FRACTION_WIDTH_NODES.set(node, fraction);
+}
+
+function parseFractionToken(token: string): number | null {
+  if (!token.includes('/')) return null;
+  const [rawNum, rawDen] = token.split('/');
+  const num = Number(rawNum);
+  const den = Number(rawDen);
+  if (!Number.isFinite(num) || !Number.isFinite(den) || den === 0) return null;
+  return num / den;
+}
+
+function reapplyDirectionalBordersIfNeeded(node: SceneNode): void {
+  const classes = BORDER_WIDTH_CLASSES.get(node);
+  if (!classes || classes.length === 0) return;
+  if (!('strokes' in node)) return;
+  applyBorderWidthUtilities(node as FrameNode, classes);
+}
+
+export function applyFullWidthIfPossible(
+  child: SceneNode,
+  parent: FrameNode,
+  options?: { skipFullWidth?: boolean; widthOverride?: number }
+): void {
+  const align = SELF_ALIGNMENT_NODES.get(child);
+  const hasSelfAlign = align != null;
+  if (align) {
+    if (align === 'STRETCH') {
+      if ('layoutAlign' in child) {
+        try { (child as any).layoutAlign = align; } catch (_err) { /* ignore */ }
+      }
+    } else {
+      // MIN / CENTER / MAX: layoutAlign is deprecated for these; use layoutSizingHorizontal = 'HUG' as the best proxy
+      try { (child as any).layoutSizingHorizontal = 'HUG'; } catch (_err) { /* ignore if no auto-layout */ }
+    }
+    SELF_ALIGNMENT_NODES.delete(child);
+  }
+
+  const basis = FLEX_BASIS_NODES.get(child);
+  if (basis != null && basis > 0 && 'resize' in child) {
+    try {
+      if (parent.layoutMode === 'HORIZONTAL') {
+        (child as any).resize(basis, (child as any).height);
+        if ('primaryAxisSizingMode' in child) (child as any).primaryAxisSizingMode = 'FIXED';
+      } else if (parent.layoutMode === 'VERTICAL') {
+        (child as any).resize((child as any).width, basis);
+        if ('primaryAxisSizingMode' in child) (child as any).primaryAxisSizingMode = 'FIXED';
+      }
+    } catch (_err) {
+      // ignore
+    }
+  }
+  if (basis != null) {
+    FLEX_BASIS_NODES.delete(child);
+  }
+
+  const minWidth = MIN_WIDTH_NODES.get(child);
+  if (minWidth != null && 'resize' in child) {
+    const currentWidth = (child as any).width as number;
+    if (!Number.isFinite(currentWidth) || currentWidth < minWidth) {
+      try {
+        (child as any).resize(minWidth, (child as any).height);
+        if (parent.layoutMode === 'HORIZONTAL' && 'primaryAxisSizingMode' in child) {
+          (child as any).primaryAxisSizingMode = 'FIXED';
+        } else if (parent.layoutMode === 'VERTICAL' && 'counterAxisSizingMode' in child) {
+          (child as any).counterAxisSizingMode = 'FIXED';
+        }
+      } catch (_err) {
+        // ignore
+      }
+    }
+    MIN_WIDTH_NODES.delete(child);
+  }
+
+  const skipFullWidth = !!(options && options.skipFullWidth);
+  const widthOverride = options && typeof options.widthOverride === 'number' && Number.isFinite(options.widthOverride)
+    ? options.widthOverride
+    : null;
+  const widthBase = widthOverride != null ? widthOverride : parent.width;
+  // CSS grid (single-column) children stretch to fill the column by default (align-items: stretch).
+  // Don't stretch absolute-positioned children — they're handled separately.
+  const isGridStretchChild = !skipFullWidth && CSS_GRID_VERTICAL_FRAMES.has(parent) && !ABSOLUTE_NODES.has(child);
+  const hasFullWidth = skipFullWidth ? false : (FULL_WIDTH_NODES.has(child) || isGridStretchChild);
+  const fractionWidth = skipFullWidth ? null : FRACTION_WIDTH_NODES.get(child);
+  const hasFixedWidth = FIXED_WIDTH_NODES.has(child);
+  const hasFullHeight = FULL_HEIGHT_NODES.has(child);
+  if (!hasFullWidth && fractionWidth == null && !hasFullHeight && !hasFixedWidth) return;
+  if (hasFixedWidth && parent.layoutMode === 'VERTICAL' && !hasSelfAlign && 'layoutAlign' in child) {
+    try {
+      (child as any).layoutAlign = 'INHERIT';
+    } catch (_err) {
+      // ignore
+    }
+  }
+  try {
+    if (!hasFullWidth && fractionWidth != null && 'resize' in child && widthBase > 0) {
+      // widthOverride is already content-width; only subtract padding when using parent.width
+      const padding = widthOverride != null ? 0 : (parent.paddingLeft || 0) + (parent.paddingRight || 0);
+      const targetWidth = Math.max(0, widthBase - padding) * fractionWidth;
+      try {
+        (child as any).resize(targetWidth, (child as any).height);
+        // Prevent fractional width children from expanding
+        if ('layoutGrow' in child) {
+          (child as any).layoutGrow = 0;
+        }
+        if (parent.layoutMode === 'VERTICAL' && !hasSelfAlign && 'layoutAlign' in child) {
+          (child as any).layoutAlign = 'INHERIT';
+        }
+        // Set sizing mode to FIXED so the width is respected
+        if ('layoutMode' in child) {
+          const childLayout = (child as any).layoutMode;
+          if (childLayout === 'HORIZONTAL' && 'primaryAxisSizingMode' in child) {
+            (child as any).primaryAxisSizingMode = 'FIXED';
+          } else if (childLayout === 'VERTICAL' && 'counterAxisSizingMode' in child) {
+            (child as any).counterAxisSizingMode = 'FIXED';
+          }
+        } else if (parent.layoutMode === 'VERTICAL' && 'counterAxisSizingMode' in child) {
+          // For non-layout children in vertical parent, fix the width
+          (child as any).counterAxisSizingMode = 'FIXED';
+        }
+      } catch (_err) {
+        // ignore resize errors
+      }
+    }
+
+    if (hasFullWidth) {
+      if (parent.layoutMode === 'HORIZONTAL') {
+        // When parent uses SPACE_BETWEEN, don't apply layoutGrow=1 because that would
+        // make this child consume all space, leaving nothing for siblings.
+        // In CSS flexbox, width:100% with justify-content:space-between still spaces items at edges.
+        // In Figma, we need to explicitly set layoutGrow=0 and let SPACE_BETWEEN distribute items.
+        const isSpaceBetween = (parent as any).primaryAxisAlignItems === 'SPACE_BETWEEN';
+        if (isSpaceBetween) {
+          // Explicitly set to 0 to prevent any expansion
+          (child as any).layoutGrow = 0;
+          // Also ensure the child sizes to its content, not to fill
+          if ('primaryAxisSizingMode' in child) {
+            (child as any).primaryAxisSizingMode = 'AUTO';
+          }
+        } else {
+          (child as any).layoutGrow = 1;
+        }
+        if (
+          (('primaryAxisSizingMode' in parent && (parent as any).primaryAxisSizingMode === 'FIXED') || widthOverride != null)
+          && 'resize' in child
+          && !isSpaceBetween
+          && widthBase > 0
+        ) {
+          try {
+            (child as any).resize(widthBase, (child as any).height);
+            if ('primaryAxisSizingMode' in child) {
+              (child as any).primaryAxisSizingMode = 'FIXED';
+            }
+          } catch (_err) {
+            // ignore resize errors
+          }
+        }
+      } else if (parent.layoutMode === 'VERTICAL') {
+        // If the child is HORIZONTAL with SPACE_BETWEEN and already has FIXED sizing,
+        // don't use STRETCH as it conflicts. Instead, keep the explicit FIXED width.
+        const childIsHorizontal = 'layoutMode' in child && (child as any).layoutMode === 'HORIZONTAL';
+        const childHasSpaceBetween = childIsHorizontal && (child as any).primaryAxisAlignItems === 'SPACE_BETWEEN';
+        const childHasFixedWidth = 'primaryAxisSizingMode' in child && (child as any).primaryAxisSizingMode === 'FIXED';
+        if (childHasSpaceBetween && childHasFixedWidth) {
+          // Keep the FIXED sizing, but set layoutAlign to FILL to take parent width
+          // Actually, for SPACE_BETWEEN to work, we need the child to have a specific width
+          // So we resize it to parent width and keep FIXED
+          if ('resize' in child && widthBase > 0) {
+            try {
+              const padding = (parent.paddingLeft || 0) + (parent.paddingRight || 0);
+              (child as any).resize(widthBase - padding, (child as any).height);
+            } catch (_err) {
+              // ignore
+            }
+          }
+        } else {
+          (child as any).layoutAlign = 'STRETCH';
+          if (
+            (('counterAxisSizingMode' in parent && (parent as any).counterAxisSizingMode === 'FIXED') || widthOverride != null)
+            && 'resize' in child
+          ) {
+            try {
+              // widthOverride is already content-width (padding already subtracted by caller).
+              // When falling back to parent.width we must subtract padding ourselves.
+              const padding = widthOverride != null ? 0 : (parent.paddingLeft || 0) + (parent.paddingRight || 0);
+              const targetWidth = Math.max(0, widthBase - padding);
+              if (targetWidth > 0) {
+                (child as any).resize(targetWidth, (child as any).height);
+                if ('layoutMode' in child) {
+                  const childLayout = (child as any).layoutMode;
+                  if (childLayout === 'HORIZONTAL' && 'primaryAxisSizingMode' in child) {
+                    (child as any).primaryAxisSizingMode = 'FIXED';
+                  } else if (childLayout === 'VERTICAL' && 'counterAxisSizingMode' in child) {
+                    (child as any).counterAxisSizingMode = 'FIXED';
+                  }
+                } else if ('counterAxisSizingMode' in child) {
+                  (child as any).counterAxisSizingMode = 'FIXED';
+                }
+              }
+            } catch (_err) {
+              // ignore
+            }
+          }
+        }
+      }
+    }
+    if (hasFullHeight) {
+      if (parent.layoutMode === 'VERTICAL') {
+        if ('layoutGrow' in child && (parent as any).primaryAxisSizingMode === 'FIXED') {
+          (child as any).layoutGrow = 1;
+        }
+      } else if (parent.layoutMode === 'HORIZONTAL') {
+        if ('layoutAlign' in child) {
+          (child as any).layoutAlign = 'STRETCH';
+        }
+        if (
+          'counterAxisSizingMode' in parent
+          && (parent as any).counterAxisSizingMode === 'FIXED'
+          && 'resize' in child
+        ) {
+          try {
+            const padding = (parent.paddingTop || 0) + (parent.paddingBottom || 0);
+            const targetHeight = Math.max(0, parent.height - padding);
+            if (targetHeight > 0) {
+              (child as any).resize((child as any).width, targetHeight);
+              if ('counterAxisSizingMode' in child) {
+                (child as any).counterAxisSizingMode = 'FIXED';
+              }
+            }
+          } catch (_err) {
+            // ignore
+          }
+        }
+      }
+    }
+  } catch (_err) {
+    // ignore
+  }
+  reapplyDirectionalBordersIfNeeded(child);
+  // Keep mark so we can re-apply after parent resize.
+}
+
+export function applyGridColumnsIfPossible(
+  frame: FrameNode,
+  widthOverride?: number,
+  colsOverride?: number
+): void {
+  const cols = colsOverride != null ? colsOverride : GRID_COLUMNS_NODES.get(frame);
+  if (!cols || cols <= 0) return;
+  if (colsOverride != null) {
+    GRID_COLUMNS_NODES.set(frame, cols);
+  }
+
+  try {
+    if (frame.layoutMode !== 'HORIZONTAL') {
+      frame.layoutMode = 'HORIZONTAL';
+    }
+    if ((frame as any).layoutWrap !== undefined) {
+      (frame as any).layoutWrap = 'WRAP';
+    }
+  } catch (_err) {
+    // ignore
+  }
+
+  const totalWidth = widthOverride && Number.isFinite(widthOverride) ? widthOverride : frame.width;
+  if (!totalWidth || totalWidth <= 0) return;
+
+  const gap = frame.itemSpacing || 0;
+  const padding = (frame.paddingLeft || 0) + (frame.paddingRight || 0);
+  const available = totalWidth - padding - gap * (cols - 1);
+  if (available <= 0) return;
+
+  const childWidth = Math.max(0, available / cols);
+  if ((frame as any).counterAxisSpacing !== undefined) {
+    (frame as any).counterAxisSpacing = gap;
+  }
+
+  for (const child of frame.children) {
+    if (!('resize' in child)) continue;
+    try {
+      if ((child as any).layoutPositioning === 'ABSOLUTE') continue;
+      const span = Math.min(COL_SPAN_NODES.get(child) ?? 1, cols);
+      const spanWidth = childWidth * span + gap * (span - 1);
+      // For text nodes, fix the width so textAlignHorizontal (e.g. text-right) takes effect.
+      // Without this, WIDTH_AND_HEIGHT auto-resize snaps the node back to text-fit width.
+      if ((child as any).textAutoResize !== undefined) {
+        (child as any).textAutoResize = 'HEIGHT';
+      }
+      (child as any).resize(spanWidth, (child as any).height);
+      // Prevent grid children from expanding beyond calculated width
+      if ('layoutGrow' in child) {
+        (child as any).layoutGrow = 0;
+      }
+      if ('layoutMode' in child) {
+        const childLayout = (child as any).layoutMode;
+        if (childLayout === 'VERTICAL' && 'counterAxisSizingMode' in child) {
+          (child as any).counterAxisSizingMode = 'FIXED';
+        } else if (childLayout === 'HORIZONTAL' && 'primaryAxisSizingMode' in child) {
+          (child as any).primaryAxisSizingMode = 'FIXED';
+        }
+      } else if ('primaryAxisSizingMode' in child) {
+        (child as any).primaryAxisSizingMode = 'FIXED';
+      }
+      reapplyDirectionalBordersIfNeeded(child);
+    } catch (_err) {
+      // ignore
+    }
+  }
+}
+
+export function hasGridColumnsNode(node: SceneNode): boolean {
+  return GRID_COLUMNS_NODES.has(node);
+}
+
+export function getGridColumnsNode(node: SceneNode): number | null {
+  const cols = GRID_COLUMNS_NODES.get(node);
+  return cols != null ? cols : null;
+}
+
+export function applyFlexGrowIfPossible(frame: FrameNode, widthOverride?: number): void {
+  if (frame.layoutMode !== 'HORIZONTAL') return;
+
+  const padding = (frame.paddingLeft || 0) + (frame.paddingRight || 0);
+  const gap = frame.itemSpacing || 0;
+  const children = frame.children.filter(child => {
+    const positioning = (child as any).layoutPositioning;
+    return positioning !== 'ABSOLUTE';
+  });
+  if (children.length === 0) return;
+
+  let fixedWidth = 0;
+  let growTotal = 0;
+  const growChildren: SceneNode[] = [];
+
+  for (const child of children) {
+    const grow = (child as any).layoutGrow;
+    if (Number.isFinite(grow) && grow > 0) {
+      growTotal += grow;
+      growChildren.push(child);
+    } else {
+      fixedWidth += (child as any).width || 0;
+    }
+  }
+
+  if (growChildren.length === 0 || growTotal <= 0) return;
+
+  // Determine target width: use override, frame width, or compute based on children
+  let targetWidth = widthOverride && Number.isFinite(widthOverride) ? widthOverride : frame.width;
+
+  // If no width available, compute a minimum width based on fixed children + space for grow children
+  const totalGap = gap * Math.max(0, children.length - 1);
+  if (!targetWidth || targetWidth <= 0) {
+    // Use 150px per grow unit as a reasonable default for flex-grow children
+    const growWidth = 150 * growTotal;
+    targetWidth = padding + totalGap + fixedWidth + growWidth;
+  }
+
+  // Resize frame to target width and set to FIXED
+  try {
+    frame.resize(targetWidth, frame.height);
+    frame.primaryAxisSizingMode = 'FIXED';
+  } catch (_err) {
+    // ignore
+  }
+
+  const remaining = targetWidth - padding - totalGap - fixedWidth;
+  if (!Number.isFinite(remaining) || remaining <= 0) return;
+
+  for (const child of growChildren) {
+    const grow = (child as any).layoutGrow;
+    const width = remaining * (grow / growTotal);
+    if (!Number.isFinite(width) || width <= 0) continue;
+    if (!('resize' in child)) continue;
+    try {
+      (child as any).resize(width, (child as any).height);
+      if ('layoutMode' in child) {
+        const childLayout = (child as any).layoutMode;
+        if (childLayout === 'VERTICAL' && 'counterAxisSizingMode' in child) {
+          (child as any).counterAxisSizingMode = 'FIXED';
+        } else if (childLayout === 'HORIZONTAL' && 'primaryAxisSizingMode' in child) {
+          (child as any).primaryAxisSizingMode = 'FIXED';
+        }
+      } else if ('primaryAxisSizingMode' in child) {
+        (child as any).primaryAxisSizingMode = 'FIXED';
+      }
+    } catch (_err) {
+      // ignore
+    }
+  }
+}
+
+function cssVarToToken(value: string): string | null {
+  const varMatch = value.match(/var\\(--([^)]+)\\)/);
+  if (!varMatch) return null;
+  const token = varMatch[1].replace(/^color-/, '');
+  return token || null;
+}
+
+function resolveSpacingToken(token: string, spacingScale: Record<string, number>): number | null {
+  if (!token) return null;
+  if (token.startsWith('[') && token.endsWith(']')) {
+    const inner = token.slice(1, -1);
+    return parseLengthSemantic(inner);
+  }
+  return spacingValue(token, spacingScale);
+}
+
+const STATE_VARIANTS = new Set([
+  'hover',
+  'focus',
+  'focus-visible',
+  'disabled',
+  'active',
+  'aria-invalid',
+]);
+
+function isStateVariant(variant: string): boolean {
+  if (STATE_VARIANTS.has(variant)) return true;
+  return variant.startsWith('data-[state=');
+}
+
+function shouldApplyAtom(atom: ReturnType<typeof parseUtilityClass>, state: string): boolean {
+  if (hasResponsiveVariantSemantic(atom.variants)) return false;
+  if (state === 'default') return atom.variants.length === 0;
+  if (!atom.variants.length) return false;
+  if (!atom.variants.every(isStateVariant)) return false;
+  return variantStateSemantic(atom.variants) === state;
+}
+
+function parseOpacityToken(token: string): number | null {
+  if (!token) return null;
+  let raw = token;
+  if (raw.startsWith('[') && raw.endsWith(']')) {
+    raw = raw.slice(1, -1);
+  }
+  const percent = raw.endsWith('%');
+  const num = parseFloat(percent ? raw.slice(0, -1) : raw);
+  if (Number.isNaN(num)) return null;
+  const value = percent ? num / 100 : (num > 1 ? num / 100 : num);
+  return Math.max(0, Math.min(1, value));
+}
+
+function applyCssDeclarations(style: TailwindStyle, declarations: Record<string, string>): void {
+  for (const [prop, rawValue] of Object.entries(declarations)) {
+    const value = rawValue.trim();
+    if (prop === 'background-color') {
+      if (value === 'transparent') {
+        style.bg = null;
+        style.bgToken = null;
+        continue;
+      }
+      style.bg = value;
+      const token = cssVarToToken(value);
+      if (token) style.bgToken = token;
+    } else if (prop === 'color') {
+      style.text = value;
+      const token = cssVarToToken(value);
+      if (token) style.textToken = token;
+    } else if (prop === 'border-color') {
+      style.border = value;
+      const token = cssVarToToken(value);
+      if (token) style.borderToken = token;
+    } else if (prop === 'opacity') {
+      const num = parseFloat(value);
+      if (!Number.isNaN(num)) style.opacity = num > 1 ? num / 100 : num;
+    } else if (prop === 'text-decoration-line' && value.includes('underline')) {
+      style.underline = true;
+    }
+  }
+}
+
+function parseCssLength(value: string): number | null {
+  const trimmed = value.trim();
+  if (trimmed === '0') return 0;
+  const pxMatch = trimmed.match(/^(-?\d+(?:\.\d+)?)px$/);
+  if (pxMatch) return parseFloat(pxMatch[1]);
+  const remMatch = trimmed.match(/^(-?\d+(?:\.\d+)?)rem$/);
+  if (remMatch) return parseFloat(remMatch[1]) * 16;
+  return null;
+}
+
+function alignSelfToLayoutAlign(value: string): 'MIN' | 'CENTER' | 'MAX' | 'STRETCH' | null {
+  if (value === 'center') return 'CENTER';
+  if (value === 'flex-start' || value === 'start') return 'MIN';
+  if (value === 'flex-end' || value === 'end') return 'MAX';
+  if (value === 'stretch') return 'STRETCH';
+  if (value === 'baseline') return 'MIN';
+  return null;
+}
+
+function parseFlexShorthand(value: string): { grow: number | null; basis: number | null } {
+  const trimmed = value.trim();
+  if (!trimmed) return { grow: null, basis: null };
+  if (trimmed === 'none') return { grow: 0, basis: null };
+  if (trimmed === 'auto') return { grow: 1, basis: null };
+  if (trimmed === 'initial') return { grow: 0, basis: null };
+
+  const parts = trimmed.split(/\s+/);
+  if (parts.length === 1) {
+    const grow = parseFloat(parts[0]);
+    return { grow: Number.isFinite(grow) ? grow : null, basis: null };
+  }
+
+  const grow = parseFloat(parts[0]);
+  const basisRaw = parts.length >= 3 ? parts[2] : '';
+  const basis = parseCssLength(basisRaw);
+  return { grow: Number.isFinite(grow) ? grow : null, basis };
+}
+
+function getBorderSideWeights(frame: FrameNode): { top: number; right: number; bottom: number; left: number } {
+  const target = frame as any;
+  const hasStroke = Array.isArray(frame.strokes) && frame.strokes.length > 0;
+  const baseWeight = hasStroke && Number.isFinite(frame.strokeWeight) ? frame.strokeWeight : 0;
+  return {
+    top: Number.isFinite(target.strokeTopWeight) ? target.strokeTopWeight : baseWeight,
+    right: Number.isFinite(target.strokeRightWeight) ? target.strokeRightWeight : baseWeight,
+    bottom: Number.isFinite(target.strokeBottomWeight) ? target.strokeBottomWeight : baseWeight,
+    left: Number.isFinite(target.strokeLeftWeight) ? target.strokeLeftWeight : baseWeight,
+  };
+}
+
+function setBorderSideWeights(frame: FrameNode, sides: { top: number; right: number; bottom: number; left: number }): void {
+  const target = frame as any;
+  const hasIndividualStrokes = (
+    'strokeTopWeight' in target
+    || 'strokeRightWeight' in target
+    || 'strokeBottomWeight' in target
+    || 'strokeLeftWeight' in target
+  );
+  if (hasIndividualStrokes) {
+    target.strokeTopWeight = sides.top;
+    target.strokeRightWeight = sides.right;
+    target.strokeBottomWeight = sides.bottom;
+    target.strokeLeftWeight = sides.left;
+    // Do not write strokeWeight here: in Figma this can normalize all sides
+    // and undo directional borders (e.g. border-t becoming full box).
+    return;
+  }
+  frame.strokeWeight = Math.max(sides.top, sides.right, sides.bottom, sides.left, 0);
+}
+
+function setDirectionalBorder(frame: FrameNode, utility: string, weight: number): boolean {
+  if (!Number.isFinite(weight) || weight < 0) return false;
+  const current = getBorderSideWeights(frame);
+  const next = {
+    top: current.top,
+    right: current.right,
+    bottom: current.bottom,
+    left: current.left,
+  };
+  if (utility === 'border-t') next.top = weight;
+  else if (utility === 'border-r') next.right = weight;
+  else if (utility === 'border-b') next.bottom = weight;
+  else if (utility === 'border-l') next.left = weight;
+  else if (utility === 'border-x') {
+    next.left = weight;
+    next.right = weight;
+  } else if (utility === 'border-y') {
+    next.top = weight;
+    next.bottom = weight;
+  } else {
+    return false;
+  }
+  setBorderSideWeights(frame, next);
+  return true;
+}
+
+export function applyBorderWidthUtilities(frame: FrameNode, classes: string[]): void {
+  let touched = false;
+  let next = { top: 0, right: 0, bottom: 0, left: 0 };
+  for (const cls of classes) {
+    const atom = parseUtilityClass(cls);
+    if (!atom.utility) continue;
+    if (!shouldApplyAtom(atom, 'default')) continue;
+
+    const utility = atom.utility;
+    if (utility === 'border') {
+      next = { top: 1, right: 1, bottom: 1, left: 1 };
+      touched = true;
+      continue;
+    }
+    const borderWidthMatch = utility.match(/^border-(\d+)$/);
+    if (borderWidthMatch) {
+      const weight = parseFloat(borderWidthMatch[1]);
+      if (Number.isFinite(weight) && weight >= 0) {
+        next = { top: weight, right: weight, bottom: weight, left: weight };
+        touched = true;
+      }
+      continue;
+    }
+    if (utility === 'border-t') { next.top = 1; touched = true; continue; }
+    if (utility === 'border-r') { next.right = 1; touched = true; continue; }
+    if (utility === 'border-b') { next.bottom = 1; touched = true; continue; }
+    if (utility === 'border-l') { next.left = 1; touched = true; continue; }
+    if (utility === 'border-x') { next.left = 1; next.right = 1; touched = true; continue; }
+    if (utility === 'border-y') { next.top = 1; next.bottom = 1; touched = true; continue; }
+    const directionalBorderWidthMatch = utility.match(/^(border-(?:t|r|b|l|x|y))-(\d+)$/);
+    if (directionalBorderWidthMatch) {
+      const borderWeight = parseFloat(directionalBorderWidthMatch[2]);
+      if (!Number.isFinite(borderWeight) || borderWeight < 0) continue;
+      const directionalUtility = directionalBorderWidthMatch[1];
+      if (directionalUtility === 'border-t') next.top = borderWeight;
+      else if (directionalUtility === 'border-r') next.right = borderWeight;
+      else if (directionalUtility === 'border-b') next.bottom = borderWeight;
+      else if (directionalUtility === 'border-l') next.left = borderWeight;
+      else if (directionalUtility === 'border-x') { next.left = borderWeight; next.right = borderWeight; }
+      else if (directionalUtility === 'border-y') { next.top = borderWeight; next.bottom = borderWeight; }
+      touched = true;
+      continue;
+    }
+  }
+  if (touched) {
+    setBorderSideWeights(frame, next);
+  }
+}
+
+function applyCssDeclarationsToFrame(frame: FrameNode, declarations: Record<string, string>): void {
+  let autoMarginLeft = false;
+  let autoMarginRight = false;
+  let autoMarginInline = false;
+
+  for (const [prop, rawValue] of Object.entries(declarations)) {
+    const value = rawValue.trim();
+    if (prop === 'display' && (value === 'flex' || value === 'inline-flex')) {
+      frame.layoutMode = 'HORIZONTAL';
+      continue;
+    }
+    if (prop === 'display' && value === 'grid') {
+      frame.layoutMode = 'HORIZONTAL';
+      if ((frame as any).layoutWrap !== undefined) {
+        (frame as any).layoutWrap = 'WRAP';
+      }
+      continue;
+    }
+    if (prop === 'flex-direction') {
+      frame.layoutMode = value === 'column' || value === 'column-reverse' ? 'VERTICAL' : 'HORIZONTAL';
+      continue;
+    }
+    if (prop === 'flex-wrap' && (frame as any).layoutWrap !== undefined) {
+      (frame as any).layoutWrap = value === 'wrap' || value === 'wrap-reverse' ? 'WRAP' : 'NO_WRAP';
+      continue;
+    }
+    if (prop === 'grid-template-columns') {
+      const match = value.match(/repeat\((\d+),/);
+      if (match) {
+        markGridColumnsNode(frame, parseInt(match[1], 10));
+      }
+      continue;
+    }
+    if (prop === 'gap' || prop === 'column-gap' || prop === 'row-gap') {
+      const len = parseCssLength(value);
+      if (len != null) frame.itemSpacing = len;
+      continue;
+    }
+    if (prop === 'justify-content') {
+      if (value === 'center') frame.primaryAxisAlignItems = 'CENTER';
+      if (value === 'flex-start') frame.primaryAxisAlignItems = 'MIN';
+      if (value === 'flex-end') frame.primaryAxisAlignItems = 'MAX';
+      if (value === 'space-between') frame.primaryAxisAlignItems = 'SPACE_BETWEEN';
+      if (value === 'space-around' || value === 'space-evenly') frame.primaryAxisAlignItems = 'SPACE_BETWEEN';
+      continue;
+    }
+    if (prop === 'align-items') {
+      if (value === 'center') frame.counterAxisAlignItems = 'CENTER';
+      if (value === 'flex-start') frame.counterAxisAlignItems = 'MIN';
+      if (value === 'flex-end') frame.counterAxisAlignItems = 'MAX';
+      if (value === 'stretch') frame.counterAxisAlignItems = 'MIN';
+      continue;
+    }
+    if (prop === 'align-self') {
+      const align = alignSelfToLayoutAlign(value);
+      if (align) markSelfAlignmentNode(frame, align);
+      continue;
+    }
+    if (prop === 'flex-grow') {
+      const grow = parseFloat(value);
+      if (Number.isFinite(grow)) frame.layoutGrow = grow;
+      continue;
+    }
+    if (prop === 'flex-basis') {
+      const len = parseCssLength(value);
+      if (len != null) markFlexBasisNode(frame, len);
+      continue;
+    }
+    if (prop === 'flex') {
+      const parsed = parseFlexShorthand(value);
+      if (parsed.grow != null) frame.layoutGrow = parsed.grow;
+      if (parsed.basis != null) markFlexBasisNode(frame, parsed.basis);
+      continue;
+    }
+    if (prop === 'padding') {
+      const parts = value.split(/\\s+/);
+      const nums = parts.map(parseCssLength);
+      if (nums.every(n => n != null)) {
+        const [t, r, b, l] = nums as number[];
+        if (parts.length === 1) {
+          frame.paddingTop = frame.paddingRight = frame.paddingBottom = frame.paddingLeft = t;
+        } else if (parts.length === 2) {
+          frame.paddingTop = frame.paddingBottom = t;
+          frame.paddingLeft = frame.paddingRight = r;
+        } else if (parts.length === 3) {
+          frame.paddingTop = t;
+          frame.paddingLeft = frame.paddingRight = r;
+          frame.paddingBottom = b;
+        } else if (parts.length === 4) {
+          frame.paddingTop = t;
+          frame.paddingRight = r;
+          frame.paddingBottom = b;
+          frame.paddingLeft = l;
+        }
+      }
+      continue;
+    }
+    if (prop === 'padding-left') {
+      const len = parseCssLength(value);
+      if (len != null) frame.paddingLeft = len;
+      continue;
+    }
+    if (prop === 'padding-right') {
+      const len = parseCssLength(value);
+      if (len != null) frame.paddingRight = len;
+      continue;
+    }
+    if (prop === 'padding-top') {
+      const len = parseCssLength(value);
+      if (len != null) frame.paddingTop = len;
+      continue;
+    }
+    if (prop === 'padding-bottom') {
+      const len = parseCssLength(value);
+      if (len != null) frame.paddingBottom = len;
+      continue;
+    }
+    if (prop === 'width') {
+      if (value === '100%') {
+        markFullWidthNode(frame);
+        continue;
+      }
+      const len = parseCssLength(value);
+      if (len != null) {
+        frame.resize(len, frame.height);
+        markFixedWidthNode(frame);
+        if (frame.layoutMode === 'HORIZONTAL') {
+          frame.primaryAxisSizingMode = 'FIXED';
+        } else if (frame.layoutMode === 'VERTICAL') {
+          frame.counterAxisSizingMode = 'FIXED';
+        }
+      }
+      continue;
+    }
+    if (prop === 'height') {
+      const len = parseCssLength(value);
+      if (len != null) {
+        frame.resize(frame.width, len);
+        if (frame.layoutMode === 'VERTICAL') {
+          frame.primaryAxisSizingMode = 'FIXED';
+        } else if (frame.layoutMode === 'HORIZONTAL') {
+          frame.counterAxisSizingMode = 'FIXED';
+        }
+      }
+      if (value === '100%') markFullHeightNode(frame);
+      continue;
+    }
+    if (prop === 'max-width') {
+      const len = parseCssLength(value);
+      if (len != null) {
+        frame.resize(len, frame.height);
+        frame.counterAxisSizingMode = 'FIXED';
+      }
+      continue;
+    }
+    if (prop === 'border-width') {
+      const len = parseCssLength(value);
+      if (len != null) {
+        frame.strokeWeight = len;
+      }
+      continue;
+    }
+    if (prop === 'border-top-width' || prop === 'border-right-width' || prop === 'border-bottom-width' || prop === 'border-left-width') {
+      const len = parseCssLength(value);
+      if (len != null) {
+        const utility = prop === 'border-top-width'
+          ? 'border-t'
+          : prop === 'border-right-width'
+            ? 'border-r'
+            : prop === 'border-bottom-width'
+              ? 'border-b'
+              : 'border-l';
+        setDirectionalBorder(frame, utility, len);
+      }
+      continue;
+    }
+    if (prop === 'min-width') {
+      const len = parseCssLength(value);
+      if (len != null) markMinWidthNode(frame, len);
+      continue;
+    }
+    if (prop === 'margin-inline' && value === 'auto') {
+      autoMarginInline = true;
+      continue;
+    }
+    if (prop === 'margin-left' && value === 'auto') {
+      autoMarginLeft = true;
+      continue;
+    }
+    if (prop === 'margin-right' && value === 'auto') {
+      autoMarginRight = true;
+      continue;
+    }
+    if (prop === 'position' && value === 'absolute') {
+      markAbsoluteNode(frame);
+      continue;
+    }
+  }
+
+  if (autoMarginInline || (autoMarginLeft && autoMarginRight)) {
+    markSelfAlignmentNode(frame, 'CENTER');
+  } else if (autoMarginLeft) {
+    markSelfAlignmentNode(frame, 'MAX');
+  } else if (autoMarginRight) {
+    markSelfAlignmentNode(frame, 'MIN');
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Section 1 – Tailwind-to-Style conversion (lines 194-425 of code.js)
+// ---------------------------------------------------------------------------
+
+/**
+ * Extract color token name from a Tailwind class
+ * e.g., "bg-primary" -> "primary", "text-primary-foreground" -> "primary-foreground"
+ */
+export function extractColorToken(cls: string): string | null {
+  // Handle bg-* classes
+  if (cls.startsWith('bg-')) {
+    const token = cls.substring(3);
+    // Skip non-color values like bg-transparent, bg-gradient, bg-[...]
+    if (token === 'transparent' || token === 'current' || token.startsWith('[')) return null;
+    return token;
+  }
+  // Handle text-* classes (only color ones, not text-sm, text-center, etc.)
+  if (cls.startsWith('text-')) {
+    const token = cls.substring(5);
+    // Skip non-color text utilities
+    const nonColorPrefixes = [
+      'xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl',
+      'left', 'center', 'right', 'justify', 'start', 'end', 'wrap', 'nowrap', 'balance', 'pretty',
+    ];
+    if (nonColorPrefixes.indexOf(token) !== -1 || token.startsWith('[')) return null;
+    return token;
+  }
+  // Handle border-* classes
+  if (cls.startsWith('border-')) {
+    const token = cls.substring(7);
+    // Skip non-color border utilities
+    const nonColorBorder = [
+      '0', '2', '4', '8', 't', 'r', 'b', 'l', 'x', 'y',
+      'solid', 'dashed', 'dotted', 'double', 'hidden', 'none', 'collapse', 'separate', 'transparent',
+    ];
+    if (nonColorBorder.indexOf(token) !== -1 || token.startsWith('[')) return null;
+    return token;
+  }
+  return null;
+}
+
+function applySemanticStyleForUtility(
+  style: TailwindStyle,
+  utility: string,
+  colorGroup: Record<string, string>,
+): boolean {
+  if (!utility) return false;
+
+  if (utility === 'bg-transparent') {
+    style.bg = null;
+    style.bgToken = null;
+    return true;
+  }
+
+  if (utility === 'underline') {
+    style.underline = true;
+    return true;
+  }
+  if (utility === 'no-underline') {
+    style.underline = false;
+    return true;
+  }
+
+  if (utility.startsWith('opacity-')) {
+    const opacityToken = utility.slice('opacity-'.length);
+    const opacityValue = parseOpacityToken(opacityToken);
+    if (opacityValue != null) {
+      style.opacity = opacityValue;
+      return true;
+    }
+  }
+
+  const token = extractColorToken(utility);
+  if (!token) return false;
+
+  const opacityMatch = token.match(/^(.+)\/(\d+)$/);
+  const actualToken = opacityMatch ? opacityMatch[1] : token;
+  const colorOpacity = opacityMatch ? parseInt(opacityMatch[2], 10) / 100 : null;
+  const palette = getPaletteTokens();
+  const color = colorGroup[actualToken] || palette[actualToken] || FALLBACK_COLOR_TOKENS[actualToken];
+  if (!color) return false;
+
+  if (utility.startsWith('bg-')) {
+    style.bg = color;
+    style.bgToken = actualToken;
+    if (colorOpacity !== null) style.bgOpacity = colorOpacity;
+    return true;
+  }
+  if (utility.startsWith('text-')) {
+    style.text = color;
+    style.textToken = actualToken;
+    return true;
+  }
+  if (utility.startsWith('border-')) {
+    style.border = color;
+    style.borderToken = actualToken;
+    return true;
+  }
+
+  return false;
+}
+
+function resolveColorTokenValue(
+  token: string,
+  colorGroup: Record<string, string>,
+): { value: string; opacity?: number } | null {
+  if (!token) return null;
+  // Special-case: transparent always resolves to black at opacity 0
+  if (token === 'transparent') return { value: '#000000', opacity: 0 };
+  let raw = token;
+  let opacity: number | undefined;
+  if (raw.includes('/')) {
+    const [base, alpha] = raw.split('/');
+    raw = base;
+    const parsed = parseOpacityToken(alpha);
+    if (parsed != null) opacity = parsed;
+  }
+  if (raw.startsWith('[') && raw.endsWith(']')) {
+    raw = raw.slice(1, -1);
+  }
+  if (raw.startsWith('#') || raw.startsWith('rgb') || raw.startsWith('hsl') || raw.startsWith('oklch(')) {
+    return { value: raw, opacity };
+  }
+  const palette = getPaletteTokens();
+  const value = colorGroup[raw] || palette[raw] || FALLBACK_COLOR_TOKENS[raw];
+  if (!value) return null;
+  return { value, opacity };
+}
+
+/**
+ * Convert Tailwind gradient direction to Figma gradientTransform matrix.
+ * Tailwind directions: t, tr, r, br, b, bl, l, tl
+ * Default Figma gradient goes left-to-right (equivalent to 'r').
+ * We rotate around center (0.5, 0.5) to match CSS gradient angles.
+ */
+function directionToGradientTransform(
+  direction: string | undefined
+): [[number, number, number], [number, number, number]] {
+  // Default to left-to-right (to-r) = identity matrix
+  if (!direction) return [[1, 0, 0], [0, 1, 0]];
+
+  // Map direction to rotation angle in radians in Figma's y-down coordinate space.
+  // Positive CSS angles are clockwise in y-up space, so vertical components must
+  // be sign-adjusted here to avoid mirrored gradients.
+  const angleMap: Record<string, number> = {
+    'r': 0,                       // 0° - left to right (default)
+    'br': -Math.PI / 4,           // 45° - top-left to bottom-right
+    'b': -Math.PI / 2,            // 90° - top to bottom
+    'bl': -(3 * Math.PI) / 4,     // 135° - top-right to bottom-left
+    'l': Math.PI,                 // 180° - right to left
+    'tl': (3 * Math.PI) / 4,      // 225° - bottom-right to top-left
+    't': Math.PI / 2,             // 270° - bottom to top
+    'tr': Math.PI / 4,            // 315° - bottom-left to top-right
+  };
+
+  const angle = angleMap[direction];
+  if (angle == null) return [[1, 0, 0], [0, 1, 0]];
+  return rotationTransformAroundPointRadians(angle, 0.5, 0.5);
+}
+
+function gradientFromClasses(
+  classes: string[],
+  colorGroup: Record<string, string>,
+): { from: RGB; to: RGB; via?: RGB; direction?: string; type?: 'linear' | 'radial'; opacity?: number; radialAnchor?: RadialAnchor } | null {
+  let direction: string | undefined;
+  let gradientType: 'linear' | 'radial' = 'linear';
+  let radialAnchor: RadialAnchor | undefined;
+  let fromToken: string | undefined;
+  let viaToken: string | undefined;
+  let toToken: string | undefined;
+  let opacity: number | undefined;
+
+  for (const cls of classes) {
+    const atom = parseUtilityClass(cls);
+    if (!atom.utility) continue;
+    if (!shouldApplyAtom(atom, 'default')) continue;
+    const utility = atom.utility;
+    if (utility.startsWith('bg-gradient-to-')) {
+      direction = utility.replace('bg-gradient-to-', '');
+      gradientType = 'linear';
+    } else if (utility.startsWith('bg-linear-to-')) {
+      direction = utility.replace('bg-linear-to-', '');
+      gradientType = 'linear';
+    } else if (utility === 'bg-radial' || utility.startsWith('bg-radial-')) {
+      gradientType = 'radial';
+      const anchor = parseRadialAnchorFromUtility(utility);
+      if (anchor) radialAnchor = anchor;
+    } else if (utility.startsWith('from-')) {
+      fromToken = utility.slice(5);
+    } else if (utility.startsWith('via-')) {
+      viaToken = utility.slice(4);
+    } else if (utility.startsWith('to-')) {
+      toToken = utility.slice(3);
+    } else if (utility.startsWith('opacity-')) {
+      const op = parseOpacityToken(utility.slice('opacity-'.length));
+      if (op != null) opacity = op;
+    }
+  }
+
+  if (!fromToken || !toToken) return null;
+  const fromValue = resolveColorTokenValue(fromToken, colorGroup);
+  const toValue = resolveColorTokenValue(toToken, colorGroup);
+  if (!fromValue || !toValue) return null;
+
+  const from = parseColor(fromValue.value);
+  const to = parseColor(toValue.value);
+  if (fromValue.opacity != null) from.a = fromValue.opacity;
+  if (toValue.opacity != null) to.a = toValue.opacity;
+
+  // Parse optional via color for 3-color gradients
+  let via: RGB | undefined;
+  if (viaToken) {
+    const viaValue = resolveColorTokenValue(viaToken, colorGroup);
+    if (viaValue) {
+      via = parseColor(viaValue.value);
+      if (viaValue.opacity != null) via.a = viaValue.opacity;
+    }
+  }
+
+  return { from, to, via, direction, type: gradientType, opacity, radialAnchor };
+}
+
+/**
+ * Parse Tailwind classes and convert to style object
+ */
+export function tailwindClassesToStyle(
+  classes: string[],
+  state: string,
+  colorGroup: Record<string, string>,
+): TailwindStyle {
+  const style: TailwindStyle = {
+    bg: null,
+    bgToken: null,
+    text: null,
+    textToken: null,
+    border: null,
+    borderToken: null,
+    opacity: null,
+  };
+  const styleMap = getStyleMap();
+
+  for (const cls of classes) {
+    const atom = parseUtilityClass(cls);
+    if (!atom.utility) continue;
+    if (!shouldApplyAtom(atom, state)) continue;
+
+    if (applySemanticStyleForUtility(style, atom.utility, colorGroup)) continue;
+
+    if (styleMap) {
+      const entryList = styleMap[cls];
+      if (!entryList || entryList.length === 0) continue;
+      for (const entry of entryList) {
+        applyCssDeclarations(style, entry.declarations);
+      }
+    }
+  }
+
+  return style;
+}
+
+/**
+ * Get button style from COMPONENT_DEFS
+ */
+export function getButtonStyleFromDefs(
+  variant: string,
+  state: string,
+  colorGroup: Record<string, string>,
+): TailwindStyle | null {
+  const def = getComponentDef('Button');
+  if (!def || def.type !== 'cva') {
+    // Fallback to null if no definition found
+    return null;
+  }
+
+  // Get all classes for this variant
+  let classes: string[] = def.baseClasses.slice();
+  if (def.variantClasses && def.variantClasses.variant && def.variantClasses.variant[variant]) {
+    classes = classes.concat(def.variantClasses.variant[variant]);
+  }
+
+  // Convert to style for the requested state
+  return tailwindClassesToStyle(classes, state, colorGroup);
+}
+
+function applySemanticUtilitiesToFrame(
+  frame: FrameNode,
+  classes: string[],
+  radiusGroup: Record<string, string> | null,
+): Set<string> {
+  const handled = new Set<string>();
+  const spacingScale = (COMPONENT_DEFS && COMPONENT_DEFS.spacingScale) ? COMPONENT_DEFS.spacingScale : {};
+  let gap: number | null = null;
+  let gapX: number | null = null;
+  let gapY: number | null = null;
+
+  for (const cls of classes) {
+    const atom = parseUtilityClass(cls);
+    if (!atom.utility) continue;
+
+    const utility = atom.utility;
+
+    const gridColsMatch = utility.match(/^grid-cols-(\d+)$/);
+    if (gridColsMatch) {
+      markGridColumnsNode(frame, parseInt(gridColsMatch[1], 10));
+      handled.add(cls);
+      continue;
+    }
+
+    const colSpanMatch = utility.match(/^col-span-(\d+|full)$/);
+    if (colSpanMatch) {
+      // 'full' is stored as 999 and clamped to actual cols when applied
+      const span = colSpanMatch[1] === 'full' ? 999 : parseInt(colSpanMatch[1], 10);
+      markColSpanNode(frame, span);
+      handled.add(cls);
+      continue;
+    }
+
+    if (!shouldApplyAtom(atom, 'default')) continue;
+
+    if (utility === 'flex' || utility === 'inline-flex' || utility === 'flex-row') {
+      frame.layoutMode = 'HORIZONTAL';
+      handled.add(cls);
+      continue;
+    }
+    if (utility === 'grid' || utility === 'inline-grid') {
+      const hasColumns = classes.some((c: string) => /^grid-cols-\d+$/.test(c));
+      if (hasColumns) {
+        frame.layoutMode = 'HORIZONTAL';
+        if ((frame as any).layoutWrap !== undefined) {
+          (frame as any).layoutWrap = 'WRAP';
+        }
+      } else {
+        // Single-column implicit grid → VERTICAL; children stretch to fill (CSS default align-items: stretch)
+        frame.layoutMode = 'VERTICAL';
+        CSS_GRID_VERTICAL_FRAMES.add(frame);
+      }
+      handled.add(cls);
+      continue;
+    }
+    if (utility === 'absolute') {
+      markAbsoluteNode(frame);
+      handled.add(cls);
+      continue;
+    }
+
+    // Handle inset-{n} → position at (n,n) and fill parent minus 2*n on each axis
+    const insetMatch = utility.match(/^inset-(\d+(?:\.\d+)?)$/);
+    if (insetMatch) {
+      const insetPx = parseFloat(insetMatch[1]) * 4;
+      if (insetPx === 0) {
+        markFullWidthNode(frame);
+        markFullHeightNode(frame);
+      } else {
+        markAbsoluteNode(frame);
+        markPositionInfo(frame, { inset: insetPx });
+      }
+      handled.add(cls);
+      continue;
+    }
+
+    // Handle inset-x-0 → full width (like CSS left:0 right:0 for absolute elements)
+    if (utility === 'inset-x-0') {
+      markFullWidthNode(frame);
+      handled.add(cls);
+      continue;
+    }
+
+    // Handle inset-y-0 → full height (like CSS top:0 bottom:0 for absolute elements)
+    if (utility === 'inset-y-0') {
+      markFullHeightNode(frame);
+      handled.add(cls);
+      continue;
+    }
+
+    // Handle top-{n}, -top-{n}, bottom-{n}, -bottom-{n} as absolute y-position hints
+    const topMatch = utility.match(/^(-?)top-(\d+(?:\.\d+)?)$/);
+    if (topMatch) {
+      const negative = topMatch[1] === '-';
+      const val = parseFloat(topMatch[2]) * 4; // Tailwind spacing scale: 1 unit = 4px
+      markPositionInfo(frame, { top: negative ? -val : val });
+      handled.add(cls);
+      continue;
+    }
+    // Handle top-[calc(100%-Nrem)] — positions element so top = parentHeight - N*16px
+    const topCalcMatch = utility.match(/^top-\[calc\(100%-(\d+(?:\.\d+)?)rem\)\]$/);
+    if (topCalcMatch) {
+      const remOffset = parseFloat(topCalcMatch[1]) * 16;
+      DEFERRED_TOP_RELATIVE_NODES.set(frame, remOffset);
+      handled.add(cls);
+      continue;
+    }
+    const bottomMatch = utility.match(/^bottom-(\d+(?:\.\d+)?)$/);
+    if (bottomMatch) {
+      const val = parseFloat(bottomMatch[1]) * 4;
+      markPositionInfo(frame, { bottom: val });
+      handled.add(cls);
+      continue;
+    }
+    const leftMatch = utility.match(/^(-?)left-(\d+(?:\.\d+)?)$/);
+    if (leftMatch) {
+      const negative = leftMatch[1] === '-';
+      const val = parseFloat(leftMatch[2]) * 4;
+      markPositionInfo(frame, { left: negative ? -val : val });
+      handled.add(cls);
+      continue;
+    }
+    const rightMatch = utility.match(/^(-?)right-(\d+(?:\.\d+)?)$/);
+    if (rightMatch) {
+      const negative = rightMatch[1] === '-';
+      const val = parseFloat(rightMatch[2]) * 4;
+      markPositionInfo(frame, { right: negative ? -val : val });
+      handled.add(cls);
+      continue;
+    }
+
+    // Handle blur effects (blur-sm, blur, blur-md, blur-lg, blur-xl, blur-2xl, blur-3xl)
+    const blurMatch = utility.match(/^blur(?:-(.+))?$/);
+    if (blurMatch) {
+      // CSS filter:blur(N) uses σ=N (Gaussian std dev). Figma's layer blur visual spread
+      // is roughly half that of CSS for the same value, so we scale up by 2× to match.
+      const blurScale: Record<string, number> = {
+        'none': 0,
+        'sm': 8,
+        '': 16,       // plain 'blur' = 8px CSS → 16px Figma
+        'md': 24,
+        'lg': 32,
+        'xl': 48,
+        '2xl': 80,
+        '3xl': 128,
+      };
+      const blurKey = blurMatch[1] || '';
+      const blurRadius = blurScale[blurKey];
+      if (blurRadius != null && blurRadius > 0) {
+        frame.effects = [
+          ...(frame.effects || []),
+          { type: 'LAYER_BLUR', blurType: 'NORMAL', radius: blurRadius, visible: true } as Effect,
+        ];
+      }
+      handled.add(cls);
+      continue;
+    }
+
+    // Handle box-shadow utilities (shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-inner, shadow-none)
+    const shadowMatch = utility.match(/^shadow(?:-(.+))?$/);
+    if (shadowMatch) {
+      const shadowKey = shadowMatch[1] || '';
+      const SHADOW_MAP: Record<string, Array<{ x: number; y: number; radius: number; spread: number; r: number; g: number; b: number; a: number; type: 'DROP_SHADOW' | 'INNER_SHADOW' }>> = {
+        'none': [],
+        'sm': [{ x: 0, y: 1, radius: 2, spread: 0, r: 0, g: 0, b: 0, a: 0.05, type: 'DROP_SHADOW' }],
+        '': [
+          { x: 0, y: 1, radius: 3, spread: 0, r: 0, g: 0, b: 0, a: 0.1, type: 'DROP_SHADOW' },
+          { x: 0, y: 1, radius: 2, spread: 0, r: 0, g: 0, b: 0, a: 0.06, type: 'DROP_SHADOW' },
+        ],
+        'md': [
+          { x: 0, y: 4, radius: 6, spread: 0, r: 0, g: 0, b: 0, a: 0.1, type: 'DROP_SHADOW' },
+          { x: 0, y: 2, radius: 4, spread: 0, r: 0, g: 0, b: 0, a: 0.06, type: 'DROP_SHADOW' },
+        ],
+        'lg': [
+          { x: 0, y: 10, radius: 15, spread: 0, r: 0, g: 0, b: 0, a: 0.1, type: 'DROP_SHADOW' },
+          { x: 0, y: 4, radius: 6, spread: 0, r: 0, g: 0, b: 0, a: 0.05, type: 'DROP_SHADOW' },
+        ],
+        'xl': [
+          { x: 0, y: 20, radius: 25, spread: 0, r: 0, g: 0, b: 0, a: 0.1, type: 'DROP_SHADOW' },
+          { x: 0, y: 8, radius: 10, spread: 0, r: 0, g: 0, b: 0, a: 0.04, type: 'DROP_SHADOW' },
+        ],
+        '2xl': [{ x: 0, y: 25, radius: 50, spread: 0, r: 0, g: 0, b: 0, a: 0.25, type: 'DROP_SHADOW' }],
+        'inner': [{ x: 0, y: 2, radius: 4, spread: 0, r: 0, g: 0, b: 0, a: 0.06, type: 'INNER_SHADOW' }],
+      };
+      const defs = SHADOW_MAP[shadowKey];
+      if (defs !== undefined) {
+        const shadowEffects: Effect[] = [];
+        for (let si = 0; si < defs.length; si++) {
+          const d = defs[si];
+          shadowEffects.push({
+            type: d.type,
+            color: { r: d.r, g: d.g, b: d.b, a: d.a },
+            offset: { x: d.x, y: d.y },
+            radius: d.radius,
+            spread: d.spread,
+            visible: true,
+            blendMode: 'NORMAL',
+          } as Effect);
+        }
+        // Replace any existing shadow effects (drop + inner) and keep other effects (blur etc.)
+        const allEffects: Effect[] = Array.from((frame as any).effects || []);
+        const nonShadow = allEffects.filter(
+          (e: Effect) => (e as any).type !== 'DROP_SHADOW' && (e as any).type !== 'INNER_SHADOW'
+        );
+        (frame as any).effects = nonShadow.concat(shadowEffects);
+      }
+      handled.add(cls);
+      continue;
+    }
+
+    if (utility === 'flex-col') {
+      frame.layoutMode = 'VERTICAL';
+      handled.add(cls);
+      continue;
+    }
+    if (utility === 'flex-wrap' && (frame as any).layoutWrap !== undefined) {
+      (frame as any).layoutWrap = 'WRAP';
+      handled.add(cls);
+      continue;
+    }
+    if (utility === 'flex-1') {
+      // layoutGrow is a child property that requires parent context.
+      // Setting it here (before the frame is in a parent) causes Figma to
+      // switch the frame to FILL mode and collapse height to 1px.
+      // applyChildProperties handles this with the correct parent-FIXED guard.
+      handled.add(cls);
+      continue;
+    }
+    if (utility === 'items-center') { frame.counterAxisAlignItems = 'CENTER'; handled.add(cls); continue; }
+    if (utility === 'items-start') { frame.counterAxisAlignItems = 'MIN'; handled.add(cls); continue; }
+    if (utility === 'items-end') { frame.counterAxisAlignItems = 'MAX'; handled.add(cls); continue; }
+    if (utility === 'justify-center') { frame.primaryAxisAlignItems = 'CENTER'; handled.add(cls); continue; }
+    if (utility === 'justify-between') { frame.primaryAxisAlignItems = 'SPACE_BETWEEN'; handled.add(cls); continue; }
+    if (utility === 'justify-start') { frame.primaryAxisAlignItems = 'MIN'; handled.add(cls); continue; }
+    if (utility === 'justify-end') { frame.primaryAxisAlignItems = 'MAX'; handled.add(cls); continue; }
+    if (utility === 'mx-auto') {
+      // Figma no longer supports layoutAlign = CENTER. Keep as a no-op.
+      handled.add(cls);
+      continue;
+    }
+
+    const gapXMatch = utility.match(/^gap-x-(.+)$/);
+    if (gapXMatch) {
+      const val = resolveSpacingToken(gapXMatch[1], spacingScale);
+      if (val != null) gapX = val;
+      handled.add(cls);
+      continue;
+    }
+    const gapYMatch = utility.match(/^gap-y-(.+)$/);
+    if (gapYMatch) {
+      const val = resolveSpacingToken(gapYMatch[1], spacingScale);
+      if (val != null) gapY = val;
+      handled.add(cls);
+      continue;
+    }
+    const gapMatch = utility.match(/^gap-(.+)$/);
+    if (gapMatch) {
+      const val = resolveSpacingToken(gapMatch[1], spacingScale);
+      if (val != null) gap = val;
+      handled.add(cls);
+      continue;
+    }
+    const spaceXMatch = utility.match(/^space-x-(.+)$/);
+    if (spaceXMatch) {
+      const val = resolveSpacingToken(spaceXMatch[1], spacingScale);
+      if (val != null) gapX = val;
+      handled.add(cls);
+      continue;
+    }
+    const spaceYMatch = utility.match(/^space-y-(.+)$/);
+    if (spaceYMatch) {
+      const val = resolveSpacingToken(spaceYMatch[1], spacingScale);
+      if (val != null) gapY = val;
+      handled.add(cls);
+      continue;
+    }
+
+    const pMatch = utility.match(/^p-(.+)$/);
+    if (pMatch) {
+      const val = resolveSpacingToken(pMatch[1], spacingScale);
+      if (val != null) {
+        frame.paddingLeft = frame.paddingRight = frame.paddingTop = frame.paddingBottom = val;
+      }
+      handled.add(cls);
+      continue;
+    }
+    const pxMatch = utility.match(/^px-(.+)$/);
+    if (pxMatch) {
+      const val = resolveSpacingToken(pxMatch[1], spacingScale);
+      if (val != null) frame.paddingLeft = frame.paddingRight = val;
+      handled.add(cls);
+      continue;
+    }
+    const pyMatch = utility.match(/^py-(.+)$/);
+    if (pyMatch) {
+      const val = resolveSpacingToken(pyMatch[1], spacingScale);
+      if (val != null) frame.paddingTop = frame.paddingBottom = val;
+      handled.add(cls);
+      continue;
+    }
+    const ptMatch = utility.match(/^pt-(.+)$/);
+    if (ptMatch) {
+      const val = resolveSpacingToken(ptMatch[1], spacingScale);
+      if (val != null) frame.paddingTop = val;
+      handled.add(cls);
+      continue;
+    }
+    const pbMatch = utility.match(/^pb-(.+)$/);
+    if (pbMatch) {
+      const val = resolveSpacingToken(pbMatch[1], spacingScale);
+      if (val != null) frame.paddingBottom = val;
+      handled.add(cls);
+      continue;
+    }
+    const plMatch = utility.match(/^pl-(.+)$/);
+    if (plMatch) {
+      const val = resolveSpacingToken(plMatch[1], spacingScale);
+      if (val != null) frame.paddingLeft = val;
+      handled.add(cls);
+      continue;
+    }
+    const prMatch = utility.match(/^pr-(.+)$/);
+    if (prMatch) {
+      const val = resolveSpacingToken(prMatch[1], spacingScale);
+      if (val != null) frame.paddingRight = val;
+      handled.add(cls);
+      continue;
+    }
+    const mtMatch = utility.match(/^mt-(.+)$/);
+    if (mtMatch) {
+      const val = resolveSpacingToken(mtMatch[1], spacingScale);
+      if (val != null) frame.paddingTop = (frame.paddingTop || 0) + val;
+      handled.add(cls);
+      continue;
+    }
+    const mbMatch = utility.match(/^mb-(.+)$/);
+    if (mbMatch) {
+      const val = resolveSpacingToken(mbMatch[1], spacingScale);
+      if (val != null) frame.paddingBottom = (frame.paddingBottom || 0) + val;
+      handled.add(cls);
+      continue;
+    }
+
+    if (utility === 'w-full') {
+      markFullWidthNode(frame);
+      handled.add(cls);
+      continue;
+    }
+    if (utility === 'container') {
+      markFullWidthNode(frame);
+      handled.add(cls);
+      continue;
+    }
+    if (utility === 'h-full') {
+      markFullHeightNode(frame);
+      handled.add(cls);
+      continue;
+    }
+    const wMatch = utility.match(/^w-(.+)$/);
+    if (wMatch) {
+      const token = wMatch[1];
+      const val = resolveSpacingToken(token, spacingScale);
+      if (val != null) {
+        frame.resize(val, frame.height);
+        markFixedWidthNode(frame);
+        // Set sizing mode to FIXED to prevent auto-resizing
+        if (frame.layoutMode === 'HORIZONTAL') {
+          frame.primaryAxisSizingMode = 'FIXED';
+        } else if (frame.layoutMode === 'VERTICAL') {
+          frame.counterAxisSizingMode = 'FIXED';
+        } else {
+          // For NONE layout mode, use counterAxisSizingMode for width
+          if ('counterAxisSizingMode' in frame) {
+            frame.counterAxisSizingMode = 'FIXED';
+          }
+        }
+      } else {
+        const fraction = parseFractionToken(token);
+        if (fraction != null) {
+          markFractionWidthNode(frame, fraction);
+        }
+      }
+      handled.add(cls);
+      continue;
+    }
+    const hMatch = utility.match(/^h-(.+)$/);
+    if (hMatch) {
+      const val = resolveSpacingToken(hMatch[1], spacingScale);
+      if (val != null) {
+        frame.resize(frame.width, val);
+        // Set sizing mode to FIXED to prevent auto-resizing
+        if (frame.layoutMode === 'VERTICAL') {
+          frame.primaryAxisSizingMode = 'FIXED';
+        } else if (frame.layoutMode === 'HORIZONTAL') {
+          frame.counterAxisSizingMode = 'FIXED';
+        } else {
+          // For NONE layout mode, use primaryAxisSizingMode for height
+          if ('primaryAxisSizingMode' in frame) {
+            frame.primaryAxisSizingMode = 'FIXED';
+          }
+        }
+      }
+      handled.add(cls);
+      continue;
+    }
+
+    // size-X sets both width and height (Tailwind's size utility)
+    const sizeMatch = utility.match(/^size-(.+)$/);
+    if (sizeMatch) {
+      const val = resolveSpacingToken(sizeMatch[1], spacingScale);
+      if (val != null) {
+        frame.resize(val, val);
+        markFixedWidthNode(frame);
+        frame.primaryAxisSizingMode = 'FIXED';
+        frame.counterAxisSizingMode = 'FIXED';
+      }
+      handled.add(cls);
+      continue;
+    }
+
+    if (utility.startsWith('max-w-')) {
+      const maxW = resolveMaxWidth(utility);
+      if (maxW != null) {
+        frame.resize(maxW, frame.height);
+        frame.counterAxisSizingMode = 'FIXED';
+      }
+      handled.add(cls);
+      continue;
+    }
+
+    if (utility === 'border') {
+      frame.strokeWeight = 1;
+      handled.add(cls);
+      continue;
+    }
+    const borderWidthMatch = utility.match(/^border-(\d+)$/);
+    if (borderWidthMatch) {
+      frame.strokeWeight = parseFloat(borderWidthMatch[1]);
+      handled.add(cls);
+      continue;
+    }
+    if (setDirectionalBorder(frame, utility, 1)) {
+      handled.add(cls);
+      continue;
+    }
+    const directionalBorderWidthMatch = utility.match(/^(border-(?:t|r|b|l|x|y))-(\d+)$/);
+    if (directionalBorderWidthMatch) {
+      const directionalUtility = directionalBorderWidthMatch[1];
+      const borderWeight = parseFloat(directionalBorderWidthMatch[2]);
+      if (setDirectionalBorder(frame, directionalUtility, borderWeight)) {
+        handled.add(cls);
+        continue;
+      }
+    }
+
+    if (utility === 'rounded' || utility.startsWith('rounded-')) {
+      const radius = resolveRadius(utility, radiusGroup);
+      if (radius != null) frame.cornerRadius = radius;
+      handled.add(cls);
+      continue;
+    }
+  }
+
+  if (gap != null) {
+    frame.itemSpacing = gap;
+  } else if (frame.layoutMode === 'HORIZONTAL' && gapX != null) {
+    frame.itemSpacing = gapX;
+  } else if (frame.layoutMode === 'VERTICAL' && gapY != null) {
+    frame.itemSpacing = gapY;
+  } else if (gapX != null) {
+    frame.itemSpacing = gapX;
+  } else if (gapY != null) {
+    frame.itemSpacing = gapY;
+  }
+
+  return handled;
+}
+
+/**
+ * Apply Tailwind classes to a Figma frame
+ */
+export function applyTailwindStylesToFrame(
+  frame: FrameNode,
+  classes: string[],
+  colorGroup: Record<string, string>,
+  radiusGroup: Record<string, string> | null,
+  theme: string,
+): TailwindStyle {
+  const style = tailwindClassesToStyle(classes, 'default', colorGroup);
+  const styleMap = getStyleMap();
+  applySemanticUtilitiesToFrame(frame, classes, radiusGroup);
+  let hasGradient = false;
+
+  if (styleMap) {
+    for (const cls of classes) {
+      const entryList = styleMap[cls];
+      if (!entryList || entryList.length === 0) continue;
+      const atom = parseUtilityClass(cls);
+      if (!shouldApplyAtom(atom, 'default')) continue;
+      for (const entry of entryList) {
+        if (entry.media) continue;
+        applyCssDeclarationsToFrame(frame, entry.declarations);
+      }
+    }
+  }
+
+  const gradient = gradientFromClasses(classes, colorGroup);
+  if (gradient) {
+    // Build gradient stops - include via color at 50% if present
+    const gradientStops: Array<{ position: number; color: { r: number; g: number; b: number; a: number } }> = [
+      { position: 0, color: { r: gradient.from.r, g: gradient.from.g, b: gradient.from.b, a: gradient.from.a ?? 1 } },
+    ];
+    if (gradient.via) {
+      gradientStops.push({
+        position: 0.5,
+        color: { r: gradient.via.r, g: gradient.via.g, b: gradient.via.b, a: gradient.via.a ?? 1 },
+      });
+    }
+    gradientStops.push({
+      position: 1,
+      color: { r: gradient.to.r, g: gradient.to.g, b: gradient.to.b, a: gradient.to.a ?? 1 },
+    });
+
+    // Premultiplied-alpha correction: CSS gradients avoid dark bands by matching the RGB of a
+    // transparent stop to its neighbour (e.g. "to-transparent" inherits the from-color).
+    // Figma interpolates RGB linearly, so without this fix green→transparent becomes green→black.
+    const firstStop = gradientStops[0];
+    const lastStop = gradientStops[gradientStops.length - 1];
+    if (firstStop.color.a === 0) {
+      firstStop.color.r = lastStop.color.r;
+      firstStop.color.g = lastStop.color.g;
+      firstStop.color.b = lastStop.color.b;
+    }
+    if (lastStop.color.a === 0) {
+      lastStop.color.r = firstStop.color.r;
+      lastStop.color.g = firstStop.color.g;
+      lastStop.color.b = firstStop.color.b;
+    }
+    // If there's a via stop, apply the same correction against its neighbours
+    if (gradientStops.length === 3) {
+      const midStop = gradientStops[1];
+      if (midStop.color.a === 0) {
+        midStop.color.r = (firstStop.color.r + lastStop.color.r) / 2;
+        midStop.color.g = (firstStop.color.g + lastStop.color.g) / 2;
+        midStop.color.b = (firstStop.color.b + lastStop.color.b) / 2;
+      }
+    }
+
+    // Apply opacity to the fill itself, not the frame (frame.opacity would affect children too)
+    const fillOpacity = gradient.opacity != null ? gradient.opacity : 1;
+
+    if (gradient.type === 'radial') {
+      // Match CSS `radial-gradient(...)` defaults:
+      // ellipse farthest-corner at center, unless class specifies `at_*`.
+      const gradientTransform = radialGradientTransformFromAnchor(gradient.radialAnchor);
+      frame.fills = [{
+        type: 'GRADIENT_RADIAL',
+        gradientStops: gradientStops,
+        gradientTransform: gradientTransform,
+        opacity: fillOpacity,
+      }];
+    } else {
+      // Linear gradient with direction
+      const gradientTransform = directionToGradientTransform(gradient.direction);
+      frame.fills = [{
+        type: 'GRADIENT_LINEAR',
+        gradientStops: gradientStops,
+        gradientTransform: gradientTransform,
+        opacity: fillOpacity,
+      }];
+    }
+    hasGradient = true;
+  }
+
+  // Apply background - try variable binding first, fall back to raw color
+  if (style.bg && !hasGradient) {
+    const bgToken = style.bgToken;
+    const bound = bgToken && bindColorVariable(frame, bgToken, 'fill', theme);
+    if (bound) {
+      if (style.bgOpacity != null && Array.isArray(frame.fills) && frame.fills.length > 0) {
+        const nextFills = JSON.parse(JSON.stringify(frame.fills));
+        nextFills[0].opacity = style.bgOpacity;
+        frame.fills = nextFills;
+      }
+    } else {
+      const bg = parseColor(style.bg);
+      const bgOpacity = style.bgOpacity != null ? style.bgOpacity : (bg.a == null ? 1 : bg.a);
+      frame.fills = [{ type: 'SOLID', color: { r: bg.r, g: bg.g, b: bg.b }, opacity: bgOpacity }];
+    }
+  }
+
+  // Apply border - try variable binding first, fall back to raw color
+  if (style.border) {
+    const borderToken = style.borderToken;
+    const borderBound = borderToken && bindColorVariable(frame, borderToken, 'stroke', theme);
+    if (!borderBound) {
+      const borderColor = parseColor(style.border);
+      frame.strokes = [{ type: 'SOLID', color: { r: borderColor.r, g: borderColor.g, b: borderColor.b } }];
+    }
+    frame.strokeWeight = 1;
+  }
+
+  const hasBorderWidth = classes.some(cls => {
+    const atom = parseUtilityClass(cls);
+    if (!atom.utility) return false;
+    if (!shouldApplyAtom(atom, 'default')) return false;
+    return (
+      atom.utility === 'border'
+      || /^border-\d+$/.test(atom.utility)
+      || /^border-(t|r|b|l|x|y)$/.test(atom.utility)
+      || /^border-(t|r|b|l|x|y)-\d+$/.test(atom.utility)
+    );
+  });
+  if (hasBorderWidth) {
+    BORDER_WIDTH_CLASSES.set(frame, classes.slice());
+  } else {
+    BORDER_WIDTH_CLASSES.delete(frame);
+  }
+
+  if (
+    hasBorderWidth
+    && frame.strokeWeight
+    && (!frame.strokes || frame.strokes.length === 0)
+    && (!style.border)
+  ) {
+    const fallbackBorder = colorGroup.border || FALLBACK_COLOR_TOKENS['gray-200'] || '#e5e7eb';
+    const rgb = parseColor(fallbackBorder);
+    frame.strokes = [{ type: 'SOLID', color: { r: rgb.r, g: rgb.g, b: rgb.b } }];
+  }
+
+  if (hasBorderWidth && frame.strokeWeight) {
+    // Setting strokes can normalize per-side weights in Figma; re-apply directional border
+    // utilities so classes like `border-t` remain top-only instead of becoming full boxes.
+    applyBorderWidthUtilities(frame, classes);
+  }
+
+  // Apply opacity - but NOT if we have a gradient (gradient fill already has its own opacity)
+  // Applying frame.opacity when there's a gradient would make children transparent too
+  if (style.opacity != null && !hasGradient) {
+    frame.opacity = style.opacity;
+  }
+
+  return style;
+}
+
+// ---------------------------------------------------------------------------
+// Section 2 – Component Change Detection helpers (lines 3283-3433 of code.js)
+// ---------------------------------------------------------------------------
+
+/**
+ * Tailwind spacing scale (matches tailwind-parser.ts)
+ */
+export const TAILWIND_SPACING_REVERSE: Record<number, string> = {
+  0: '0', 1: '0.25', 2: '0.5', 4: '1', 6: '1.5', 8: '2', 10: '2.5', 12: '3',
+  14: '3.5', 16: '4', 20: '5', 24: '6', 28: '7', 32: '8', 36: '9', 40: '10',
+  44: '11', 48: '12', 56: '14', 64: '16', 80: '20', 96: '24', 112: '28',
+  128: '32', 144: '36', 160: '40', 176: '44', 192: '48', 208: '52', 224: '56',
+  240: '60', 256: '64', 288: '72', 320: '80', 384: '96',
+};
+
+/**
+ * Tailwind border radius scale
+ */
+export const TAILWIND_RADIUS_REVERSE: Record<number, string> = {
+  0: 'none', 2: 'sm', 4: 'DEFAULT', 6: 'md', 8: 'lg', 12: 'xl', 16: '2xl', 24: '3xl', 9999: 'full',
+};
+
+/**
+ * Find closest Tailwind spacing value for a pixel value
+ */
+export function pxToTailwindSpacing(px: number): string {
+  let closest = 0;
+  let closestDiff = Infinity;
+  for (const key in TAILWIND_SPACING_REVERSE) {
+    const diff = Math.abs(parseInt(key) - px);
+    if (diff < closestDiff) {
+      closestDiff = diff;
+      closest = parseInt(key);
+    }
+  }
+  return TAILWIND_SPACING_REVERSE[closest];
+}
+
+/**
+ * Find closest Tailwind radius value for a pixel value
+ */
+export function pxToTailwindRadius(px: number): string {
+  let closest = 0;
+  let closestDiff = Infinity;
+  for (const key in TAILWIND_RADIUS_REVERSE) {
+    const diff = Math.abs(parseInt(key) - px);
+    if (diff < closestDiff) {
+      closestDiff = diff;
+      closest = parseInt(key);
+    }
+  }
+  return TAILWIND_RADIUS_REVERSE[closest];
+}
+
+/**
+ * Convert RGB color to hex string
+ */
+export function rgbToHex(r: number, g: number, b: number): string {
+  const toHex = (c: number): string => {
+    const hex = Math.round(c * 255).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  };
+  return '#' + toHex(r) + toHex(g) + toHex(b);
+}
+
+/**
+ * Extract design properties from a Figma frame
+ */
+export function extractFrameProperties(frame: SceneNode | null): FrameProperties {
+  const props: FrameProperties = {
+    cornerRadius: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    background: null,
+    borderColor: null,
+    borderWidth: 0,
+  };
+
+  if (!frame || (frame.type !== 'FRAME' && frame.type !== 'COMPONENT')) {
+    return props;
+  }
+
+  // Corner radius
+  if (typeof frame.cornerRadius === 'number') {
+    props.cornerRadius = frame.cornerRadius;
+  }
+
+  // Padding
+  props.paddingTop = frame.paddingTop || 0;
+  props.paddingBottom = frame.paddingBottom || 0;
+  props.paddingLeft = frame.paddingLeft || 0;
+  props.paddingRight = frame.paddingRight || 0;
+
+  // Background color
+  if (frame.fills && (frame.fills as readonly Paint[]).length > 0) {
+    const fill = (frame.fills as readonly Paint[])[0];
+    if (fill.type === 'SOLID' && fill.visible !== false) {
+      props.background = rgbToHex(fill.color.r, fill.color.g, fill.color.b);
+      if (fill.opacity !== undefined && fill.opacity !== 1) {
+        props.backgroundOpacity = fill.opacity;
+      }
+    }
+  }
+
+  // Border
+  if (frame.strokes && frame.strokes.length > 0) {
+    const stroke = frame.strokes[0];
+    if (stroke.type === 'SOLID' && stroke.visible !== false) {
+      props.borderColor = rgbToHex(stroke.color.r, stroke.color.g, stroke.color.b);
+      props.borderWidth = frame.strokeWeight as number || 1;
+    }
+  }
+
+  return props;
+}
+
+/**
+ * Convert Figma properties to Tailwind class suggestions
+ */
+export function propsToTailwindClasses(props: FrameProperties): string[] {
+  const classes: string[] = [];
+
+  // Padding
+  const pt = pxToTailwindSpacing(props.paddingTop);
+  const pb = pxToTailwindSpacing(props.paddingBottom);
+  const pl = pxToTailwindSpacing(props.paddingLeft);
+  const pr = pxToTailwindSpacing(props.paddingRight);
+
+  if (pt === pb && pl === pr && pt === pl) {
+    // All same: p-X
+    classes.push('p-' + pt);
+  } else if (pt === pb && pl === pr) {
+    // Symmetric: px-X py-Y
+    classes.push('px-' + pl);
+    classes.push('py-' + pt);
+  } else {
+    // Individual
+    if (pt !== '0') classes.push('pt-' + pt);
+    if (pb !== '0') classes.push('pb-' + pb);
+    if (pl !== '0') classes.push('pl-' + pl);
+    if (pr !== '0') classes.push('pr-' + pr);
+  }
+
+  // Border radius
+  const radius = pxToTailwindRadius(props.cornerRadius);
+  if (radius !== 'none') {
+    classes.push(radius === 'DEFAULT' ? 'rounded' : 'rounded-' + radius);
+  }
+
+  // Border
+  if (props.borderWidth > 0) {
+    classes.push(props.borderWidth === 1 ? 'border' : 'border-' + props.borderWidth);
+  }
+
+  return classes;
+}
+
+// ---------------------------------------------------------------------------
+// Section 3 – Dev Mode Codegen helpers (lines 4350-4486 of code.js)
+// ---------------------------------------------------------------------------
+
+/** Format a number as a CSS px value */
+export function px(n: number): string {
+  return Math.round(n) + 'px';
+}
+
+/** Tailwind spacing scale (px -> token) for codegen */
+const SPACING_SCALE = new Map<number, string>([
+  [0, '0'], [2, '0.5'], [4, '1'], [6, '1.5'], [8, '2'], [10, '2.5'], [12, '3'], [14, '3.5'],
+  [16, '4'], [20, '5'], [24, '6'], [28, '7'], [32, '8'], [36, '9'], [40, '10'], [44, '11'], [48, '12'],
+  [56, '14'], [64, '16'], [80, '20'], [96, '24'], [112, '28'], [128, '32'], [144, '36'], [160, '40'],
+  [176, '44'], [192, '48'], [208, '52'], [224, '56'], [240, '60'], [256, '64'], [288, '72'],
+  [320, '80'], [384, '96'],
+]);
+
+/** Map a pixel value to the nearest Tailwind spacing token, or an arbitrary value */
+export function twSpace(pxVal: number): string {
+  const p = Math.round(pxVal || 0);
+  if (SPACING_SCALE.has(p)) return SPACING_SCALE.get(p)!;
+  return '[' + p + 'px]';
+}
+
+/** Push a size class (e.g. w-4, h-8) onto a class list */
+export function pushSizeClass(list: string[], prefix: string, pxVal: number): void {
+  if (typeof pxVal !== 'number') return;
+  const token = twSpace(pxVal);
+  list.push(prefix + '-' + token);
+}
+
+/** Push optimised padding classes onto a class list */
+export function pushPaddingClasses(
+  classes: string[],
+  pl: number,
+  pr: number,
+  pt: number,
+  pb: number,
+): void {
+  const L = twSpace(pl);
+  const R = twSpace(pr);
+  const T = twSpace(pt);
+  const B = twSpace(pb);
+  if (L === R && T === B && L === T) { classes.push('p-' + L); return; }
+  if (L === R) classes.push('px-' + L); else { classes.push('pl-' + L, 'pr-' + R); }
+  if (T === B) classes.push('py-' + T); else { classes.push('pt-' + T, 'pb-' + B); }
+}
+
+/** Tailwind opacity scale values */
+const OPACITY_SCALE = [0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100];
+
+/** Map an opacity value (0-1) to the nearest Tailwind opacity class */
+export function opacityClass(value: number): string {
+  const v = Math.max(0, Math.min(1, value));
+  const pct = Math.round(v * 100);
+  let best = OPACITY_SCALE[0];
+  let diff = Infinity;
+  for (const entry of OPACITY_SCALE) {
+    const d = Math.abs(entry - pct);
+    if (d < diff) {
+      diff = d;
+      best = entry;
+    }
+  }
+  if (diff <= 2) return 'opacity-' + best;
+  return 'opacity-[' + pct + '%]';
+}
+
+/** Return the first visible SOLID paint from an array of paints */
+export function firstVisiblePaint(paints: readonly Paint[] | null): SolidPaint | null {
+  if (!Array.isArray(paints)) return null;
+  return (paints.find((p: Paint) => p.visible !== false && p.type === 'SOLID') as SolidPaint) || null;
+}
+
+/** Map a drop-shadow effect to a Tailwind shadow class */
+export function mapShadow(eff: Effect | null | undefined): string | null {
+  if (!eff) return null;
+  const r = (eff as DropShadowEffect).radius || 0;
+  const y = ((eff as DropShadowEffect).offset && (eff as DropShadowEffect).offset.y) || 0;
+  // Approximate Tailwind shadow scale
+  if (r <= 2 && y <= 1) return 'shadow-sm';
+  if (r <= 4 && y <= 2) return 'shadow';
+  if (r <= 8) return 'shadow-md';
+  if (r <= 12) return 'shadow-lg';
+  if (r <= 20) return 'shadow-xl';
+  return 'shadow-2xl';
+}
+
+/** Generate Tailwind classes for a Figma node (codegen) */
+export function tailwindForNode(node: SceneNode): string {
+  const classes: string[] = [];
+
+  // Layout (Auto Layout)
+  if ('layoutMode' in node && (node as FrameNode).layoutMode) {
+    const frame = node as FrameNode;
+    classes.push('flex');
+    classes.push(frame.layoutMode === 'HORIZONTAL' ? 'flex-row' : 'flex-col');
+    if (typeof frame.itemSpacing === 'number' && frame.itemSpacing > 0) {
+      classes.push('gap-' + twSpace(frame.itemSpacing));
+    }
+    // Padding
+    const pl = frame.paddingLeft || 0;
+    const pr = frame.paddingRight || 0;
+    const pt = frame.paddingTop || 0;
+    const pb = frame.paddingBottom || 0;
+    if (pl || pr || pt || pb) {
+      pushPaddingClasses(classes, pl, pr, pt, pb);
+    }
+    // Justify/align
+    const mapJust: Record<string, string> = {
+      MIN: 'justify-start',
+      CENTER: 'justify-center',
+      MAX: 'justify-end',
+      SPACE_BETWEEN: 'justify-between',
+    };
+    const mapAlign: Record<string, string> = {
+      MIN: 'items-start',
+      CENTER: 'items-center',
+      MAX: 'items-end',
+    };
+    if (frame.primaryAxisAlignItems && mapJust[frame.primaryAxisAlignItems]) {
+      classes.push(mapJust[frame.primaryAxisAlignItems]);
+    }
+    if (frame.counterAxisAlignItems && mapAlign[frame.counterAxisAlignItems]) {
+      classes.push(mapAlign[frame.counterAxisAlignItems]);
+    }
+    if ((frame as any).layoutGrow === 1) classes.push('flex-1');
+    if ((frame as any).layoutAlign === 'STRETCH') classes.push('self-stretch');
+  } else {
+    if (typeof (node as any).width === 'number') pushSizeClass(classes, 'w', (node as any).width);
+    if (typeof (node as any).height === 'number') pushSizeClass(classes, 'h', (node as any).height);
+  }
+
+  // Corner radius
+  if ('cornerRadius' in node && typeof (node as FrameNode).cornerRadius === 'number') {
+    const r = Math.round((node as FrameNode).cornerRadius as number);
+    const map: Record<number, string> = { 0: 'rounded-none', 4: 'rounded-sm', 6: 'rounded-md', 8: 'rounded-lg', 12: 'rounded-xl' };
+    classes.push(map[r] || ('rounded-[' + px(r) + ']'));
+  }
+
+  // Fills -> background or text color
+  try {
+    const paint = firstVisiblePaint((node as any).fills);
+    if (paint) {
+      const rgb = paint.color;
+      const token = nearestColorToken(rgb);
+      if (node.type === 'TEXT') classes.push('text-' + (token || 'foreground'));
+      else classes.push('bg-' + (token || 'background'));
+      if (paint.opacity != null && paint.opacity !== 1) {
+        classes.push(opacityClass(paint.opacity));
+      }
+    }
+  } catch (e) { /* ignore */ }
+
+  // Strokes -> border color/width
+  try {
+    const paint = firstVisiblePaint((node as any).strokes);
+    if (paint) {
+      const w = Math.round((node as any).strokeWeight || 1);
+      classes.push('border');
+      if (w !== 1) classes.push('border-' + twSpace(w));
+      const token = nearestColorToken(paint.color);
+      if (token) classes.push('border-' + token);
+    }
+  } catch (e) { /* ignore */ }
+
+  // Shadows (drop)
+  try {
+    const eff = ((node as any).effects || []).find(
+      (e: Effect) => e.type === 'DROP_SHADOW' && e.visible !== false,
+    );
+    const cl = mapShadow(eff);
+    if (cl) classes.push(cl);
+  } catch (e) { /* ignore */ }
+
+  // Typography for text
+  if (node.type === 'TEXT') {
+    const textNode = node as TextNode;
+    if (textNode.fontSize) classes.push('text-[' + px(textNode.fontSize as number) + ']');
+    if (textNode.lineHeight && (textNode.lineHeight as any).unit === 'PIXELS') {
+      classes.push('leading-[' + px((textNode.lineHeight as any).value) + ']');
+    }
+    if (textNode.fontName && (textNode.fontName as FontName).style && /bold/i.test((textNode.fontName as FontName).style)) {
+      classes.push('font-bold');
+    }
+    if (textNode.textAlignHorizontal) {
+      const alignMap: Record<string, string> = {
+        LEFT: 'text-left',
+        CENTER: 'text-center',
+        RIGHT: 'text-right',
+        JUSTIFIED: 'text-justify',
+      };
+      if (alignMap[textNode.textAlignHorizontal]) classes.push(alignMap[textNode.textAlignHorizontal]);
+    }
+    if (textNode.textDecoration === 'UNDERLINE') classes.push('underline');
+    if (textNode.textCase === 'UPPER') classes.push('uppercase');
+  }
+
+  if ('opacity' in node && node.opacity != null && node.opacity !== 1) {
+    classes.push(opacityClass(node.opacity));
+  }
+
+  return classes.filter(Boolean).join(' ');
+}