inkbridge 0.1.0-beta.2 → 0.1.0-beta.21

package/src/layout-parser.ts

@@ -1,667 +0,0 @@
-/**
- * LayoutParser - Tailwind → Figma Auto-layout mapping
- *
- * Approach: Tailwind utilities → Layout IR → Figma Auto-layout
- *
- * The IR captures:
- * - layoutMode: NONE | HORIZONTAL | VERTICAL
- * - wrap: boolean
- * - gap: number
- * - padding: t/r/b/l
- * - mainAlign: MIN | CENTER | MAX | SPACE_BETWEEN
- * - crossAlign: MIN | CENTER | MAX | STRETCH
- * - sizing: FIXED | HUG | FILL (resolved per-axis based on parent context)
- */
-
-declare const figma: any;
-
-// Tailwind spacing scale (in px)
-// Based on official Tailwind CSS v3 documentation
-// 1rem = 16px, values use 0.25rem (4px) base unit
-const SPACING_SCALE: Record<string, number> = {
-  'px': 1, // Special 1px value
-  '0': 0,
-  '0.5': 2, // 0.125rem
-  '1': 4,
-  '1.5': 6,
-  '2': 8,
-  '2.5': 10,
-  '3': 12,
-  '3.5': 14,
-  '4': 16,
-  '5': 20,
-  '6': 24,
-  '7': 28,
-  '8': 32,
-  '9': 36,
-  '10': 40,
-  '11': 44,
-  '12': 48,
-  '14': 56,
-  '16': 64,
-  '20': 80,
-  '24': 96,
-  '28': 112,
-  '32': 128,
-  '36': 144,
-  '40': 160,
-  '44': 176,
-  '48': 192,
-  '52': 208,
-  '56': 224,
-  '60': 240,
-  '64': 256,
-  '72': 288,
-  '80': 320,
-  '96': 384,
-};
-
-// Tailwind fractional width/height utilities
-// These map to percentages in CSS, handled as proportional grow in Figma
-const FRACTIONAL_SIZES: Record<string, number> = {
-  // Halves
-  '1/2': 0.5,
-  // Thirds
-  '1/3': 1 / 3,
-  '2/3': 2 / 3,
-  // Quarters
-  '1/4': 0.25,
-  '2/4': 0.5,
-  '3/4': 0.75,
-  // Fifths
-  '1/5': 0.2,
-  '2/5': 0.4,
-  '3/5': 0.6,
-  '4/5': 0.8,
-  // Sixths
-  '1/6': 1 / 6,
-  '2/6': 2 / 6,
-  '3/6': 0.5,
-  '4/6': 4 / 6,
-  '5/6': 5 / 6,
-  // Twelfths
-  '1/12': 1 / 12,
-  '2/12': 2 / 12,
-  '3/12': 0.25,
-  '4/12': 4 / 12,
-  '5/12': 5 / 12,
-  '6/12': 0.5,
-  '7/12': 7 / 12,
-  '8/12': 8 / 12,
-  '9/12': 0.75,
-  '10/12': 10 / 12,
-  '11/12': 11 / 12,
-  // Full
-  'full': 1.0,
-};
-
-/**
- * Sizing mode for a dimension
- * - FIXED: explicit size (w-20, h-10)
- * - HUG: shrink to content (default for text, no size class)
- * - FILL: expand to fill available space (flex-1, w-full in flex parent)
- */
-export type SizingMode = 'FIXED' | 'HUG' | 'FILL';
-
-/**
- * Intermediate Representation for layout
- * This captures the Tailwind intent before applying to Figma
- */
-export interface LayoutIR {
-  // Container properties
-  layoutMode: 'HORIZONTAL' | 'VERTICAL' | 'NONE';
-  wrap: boolean;
-  gap: number;
-  gapX?: number;
-  gapY?: number;
-
-  // Padding
-  paddingTop: number;
-  paddingRight: number;
-  paddingBottom: number;
-  paddingLeft: number;
-
-  // Alignment (for containers)
-  mainAlign: 'MIN' | 'CENTER' | 'MAX' | 'SPACE_BETWEEN';
-  crossAlign: 'MIN' | 'CENTER' | 'MAX' | 'STRETCH' | 'BASELINE';
-
-  // Sizing (resolved based on context)
-  widthMode: SizingMode;
-  heightMode: SizingMode;
-  fixedWidth?: number;
-  fixedHeight?: number;
-  widthFraction?: number; // 0.0-1.0 for fractional widths (w-1/2, w-1/3, etc.)
-  heightFraction?: number; // 0.0-1.0 for fractional heights
-
-  // Child-specific (applied when this node is a child of a flex parent)
-  grow: number; // 0 = don't grow, 1 = grow
-  selfAlign?: 'MIN' | 'CENTER' | 'MAX' | 'STRETCH';
-}
-
-export class LayoutParser {
-  /**
-   * Parse Tailwind classes into a Layout IR
-   */
-  static parseToIR(classes: string[]): LayoutIR {
-    const ir: LayoutIR = {
-      layoutMode: 'NONE',
-      wrap: false,
-      gap: 0,
-      paddingTop: 0,
-      paddingRight: 0,
-      paddingBottom: 0,
-      paddingLeft: 0,
-      mainAlign: 'MIN',
-      crossAlign: 'MIN',
-      widthMode: 'HUG',
-      heightMode: 'HUG',
-      grow: 0,
-    };
-
-    // Pass 1: Determine layout mode
-    ir.layoutMode = this.parseLayoutMode(classes);
-
-    // Pass 2: Parse all properties
-    this.parseGap(classes, ir);
-    this.parsePadding(classes, ir);
-    this.parseAlignment(classes, ir);
-    this.parseSizing(classes, ir);
-    this.parseChildProperties(classes, ir);
-    this.parseWrap(classes, ir);
-
-    return ir;
-  }
-
-  /**
-   * Apply IR to a Figma frame (container properties)
-   */
-  static applyToFrame(frame: FrameNode, ir: LayoutIR): void {
-    // Set layout mode - default to VERTICAL for standard document flow
-    const layoutMode = ir.layoutMode !== 'NONE' ? ir.layoutMode : 'VERTICAL';
-    frame.layoutMode = layoutMode;
-
-    // Set base sizing modes to AUTO (hug content)
-    frame.primaryAxisSizingMode = 'AUTO';
-    frame.counterAxisSizingMode = 'AUTO';
-
-    // Apply alignment
-    frame.primaryAxisAlignItems = ir.mainAlign;
-    frame.counterAxisAlignItems = ir.crossAlign === 'STRETCH' ? 'MIN' : ir.crossAlign;
-
-    // Apply gap
-    frame.itemSpacing = ir.gap;
-
-    // Apply padding
-    frame.paddingTop = ir.paddingTop;
-    frame.paddingRight = ir.paddingRight;
-    frame.paddingBottom = ir.paddingBottom;
-    frame.paddingLeft = ir.paddingLeft;
-
-    // Apply fixed dimensions if specified
-    if (ir.widthMode === 'FIXED' && ir.fixedWidth !== undefined) {
-      try {
-        frame.resize(ir.fixedWidth, frame.height);
-        // Width is fixed - set appropriate axis sizing
-        if (layoutMode === 'HORIZONTAL') {
-          frame.primaryAxisSizingMode = 'FIXED';
-        } else {
-          frame.counterAxisSizingMode = 'FIXED';
-        }
-      } catch (_e) {
-        // Ignore resize errors
-      }
-    }
-
-    if (ir.heightMode === 'FIXED' && ir.fixedHeight !== undefined) {
-      try {
-        frame.resize(frame.width, ir.fixedHeight);
-        // Height is fixed - set appropriate axis sizing
-        if (layoutMode === 'VERTICAL') {
-          frame.primaryAxisSizingMode = 'FIXED';
-        } else {
-          frame.counterAxisSizingMode = 'FIXED';
-        }
-      } catch (_e) {
-        // Ignore resize errors
-      }
-    }
-
-    // Apply wrap if supported
-    if (ir.wrap && 'layoutWrap' in frame) {
-      (frame as any).layoutWrap = 'WRAP';
-      if (ir.gapY !== undefined && 'counterAxisSpacing' in frame) {
-        (frame as any).counterAxisSpacing = ir.gapY;
-      }
-    }
-  }
-
-  /**
-   * Apply child properties based on parent context
-   * MUST be called after child is appended to parent
-   */
-  static applyChildProperties(
-    child: SceneNode,
-    childClasses: string[],
-    parent: FrameNode
-  ): void {
-    const ir = this.parseToIR(childClasses);
-    const parentLayout = parent.layoutMode;
-
-    // Skip if parent has no auto-layout
-    if (parentLayout === 'NONE') return;
-
-    // Guardrail: in HUG/AUTO parents, Figma's layoutGrow can collapse children.
-    // When a child with layoutGrow=1 is appended to an AUTO parent, Figma immediately
-    // resizes it to fill (= 1px minimum). Reset BOTH layoutGrow AND primaryAxisSizingMode
-    // so Figma re-expands the child to hug its content again.
-    if ('layoutGrow' in child && parent.primaryAxisSizingMode !== 'FIXED') {
-      const prevGrow = (child as any).layoutGrow as number;
-      (child as any).layoutGrow = 0;
-      if (prevGrow > 0 && 'primaryAxisSizingMode' in child && 'layoutMode' in child) {
-        const childLayout = (child as any).layoutMode;
-        if (childLayout === 'VERTICAL' || childLayout === 'HORIZONTAL') {
-          // Undo the FILL mode Figma internally set when the child was appended with layoutGrow>0.
-          (child as any).primaryAxisSizingMode = 'AUTO';
-        }
-      }
-    }
-
-    // Apply grow (flex-1)
-    // layoutGrow only makes sense when the parent has a FIXED primary axis size.
-    // If the parent is AUTO-sized, layoutGrow collapses the child to height/width=0 in Figma.
-    // Reset any layoutGrow that may have been set earlier (e.g. by applyTailwindStylesToFrame).
-    if (ir.grow > 0 && 'layoutGrow' in child) {
-      if (parent.primaryAxisSizingMode === 'FIXED') {
-        (child as any).layoutGrow = ir.grow;
-      } else {
-        (child as any).layoutGrow = 0;
-      }
-    }
-
-    // Apply self alignment
-    if (ir.selfAlign !== undefined) {
-      if (ir.selfAlign === 'STRETCH') {
-        if ('layoutAlign' in child) (child as any).layoutAlign = 'STRETCH';
-      } else {
-        // MIN / CENTER / MAX: use counterAxisAlignSelf (layoutAlign = MIN/CENTER/MAX is deprecated)
-        try { (child as any).counterAxisAlignSelf = ir.selfAlign; } catch (_err) { /* ignore */ }
-      }
-    }
-
-    // Handle w-full based on parent layout direction
-    if (childClasses.includes('w-full')) {
-      if (parentLayout === 'HORIZONTAL') {
-        // In horizontal parent, w-full means grow along primary axis
-        if ('layoutGrow' in child) {
-          (child as any).layoutGrow = 1;
-        }
-      } else if (parentLayout === 'VERTICAL') {
-        // In vertical parent, w-full means stretch along counter axis
-        if ('layoutAlign' in child) {
-          (child as any).layoutAlign = 'STRETCH';
-        }
-      }
-    }
-
-    // Handle h-full based on parent layout direction
-    if (childClasses.includes('h-full')) {
-      if (parentLayout === 'VERTICAL') {
-        // In vertical parent, h-full only makes sense when parent has a fixed height
-        if ('layoutGrow' in child && parent.primaryAxisSizingMode === 'FIXED') {
-          (child as any).layoutGrow = 1;
-        }
-      } else if (parentLayout === 'HORIZONTAL') {
-        // In horizontal parent, h-full means stretch along counter axis
-        if ('layoutAlign' in child) {
-          (child as any).layoutAlign = 'STRETCH';
-        }
-      }
-    }
-
-    // Handle fractional widths (w-1/2, w-1/3, etc.)
-    // In horizontal parent, use layoutGrow to distribute space proportionally
-    if (ir.widthFraction !== undefined && parentLayout === 'HORIZONTAL') {
-      if ('layoutGrow' in child) {
-        // Use fraction as layoutGrow value (scaled to work with other siblings)
-        // This gives proportional distribution when combined with other fractional widths
-        (child as any).layoutGrow = ir.widthFraction;
-      }
-    }
-
-    // Handle fractional heights (h-1/2, h-1/3, etc.) in vertical parent
-    if (ir.heightFraction !== undefined && parentLayout === 'VERTICAL') {
-      if ('layoutGrow' in child) {
-        (child as any).layoutGrow = ir.heightFraction;
-      }
-    }
-  }
-
-  // ===========================================================================
-  // Parsing helpers
-  // ===========================================================================
-
-  private static parseLayoutMode(classes: string[]): 'HORIZONTAL' | 'VERTICAL' | 'NONE' {
-    // Keep class-order semantics so later responsive utilities override base ones.
-    // Example: "flex flex-col sm:flex-row" becomes ["flex","flex-col","flex-row"] at sm.
-    let mode: 'HORIZONTAL' | 'VERTICAL' | 'NONE' = 'NONE';
-    for (const cls of classes) {
-      if (cls === 'flex' || cls === 'inline-flex') {
-        mode = 'HORIZONTAL'; // flex defaults to row
-        continue;
-      }
-      if (cls === 'grid' || cls === 'inline-grid') {
-        // grid without grid-cols-N is a single-column layout (like flex-col)
-        // grid WITH grid-cols-N wraps horizontally — handled separately by markGridColumnsNode
-        const hasColumns = classes.some(c => /^grid-cols-\d+$/.test(c));
-        mode = hasColumns ? 'HORIZONTAL' : 'VERTICAL';
-        continue;
-      }
-      if (cls === 'flex-col' || cls === 'flex-col-reverse') {
-        mode = 'VERTICAL';
-        continue;
-      }
-      if (cls === 'flex-row' || cls === 'flex-row-reverse') {
-        mode = 'HORIZONTAL';
-      }
-    }
-    return mode;
-  }
-
-  private static parseGap(classes: string[], ir: LayoutIR): void {
-    for (const cls of classes) {
-      // gap-* (both axes)
-      const gapMatch = cls.match(/^gap-(\d+(?:\.\d+)?|\[.+\])$/);
-      if (gapMatch) {
-        const val = this.resolveSpacing(gapMatch[1]);
-        ir.gap = val;
-        ir.gapX = val;
-        ir.gapY = val;
-        continue;
-      }
-
-      // gap-x-* (horizontal gap)
-      const gapXMatch = cls.match(/^gap-x-(\d+(?:\.\d+)?|\[.+\])$/);
-      if (gapXMatch) {
-        ir.gapX = this.resolveSpacing(gapXMatch[1]);
-        // Use gap-x for horizontal layout primary spacing
-        if (ir.layoutMode === 'HORIZONTAL') {
-          ir.gap = ir.gapX;
-        }
-        continue;
-      }
-
-      // gap-y-* (vertical gap)
-      const gapYMatch = cls.match(/^gap-y-(\d+(?:\.\d+)?|\[.+\])$/);
-      if (gapYMatch) {
-        ir.gapY = this.resolveSpacing(gapYMatch[1]);
-        // Use gap-y for vertical layout primary spacing
-        if (ir.layoutMode === 'VERTICAL') {
-          ir.gap = ir.gapY;
-        }
-        continue;
-      }
-
-      // space-x-* → convert to gap (Tailwind uses child margins, but for Figma use gap)
-      const spaceXMatch = cls.match(/^space-x-(\d+(?:\.\d+)?|\[.+\])$/);
-      if (spaceXMatch && ir.layoutMode === 'HORIZONTAL') {
-        ir.gap = this.resolveSpacing(spaceXMatch[1]);
-        continue;
-      }
-
-      // space-y-* → convert to gap
-      const spaceYMatch = cls.match(/^space-y-(\d+(?:\.\d+)?|\[.+\])$/);
-      if (spaceYMatch && ir.layoutMode === 'VERTICAL') {
-        ir.gap = this.resolveSpacing(spaceYMatch[1]);
-        continue;
-      }
-    }
-  }
-
-  private static parsePadding(classes: string[], ir: LayoutIR): void {
-    for (const cls of classes) {
-      // p-* (all sides)
-      const pMatch = cls.match(/^p-(\d+(?:\.\d+)?|\[.+\])$/);
-      if (pMatch) {
-        const val = this.resolveSpacing(pMatch[1]);
-        ir.paddingTop = val;
-        ir.paddingRight = val;
-        ir.paddingBottom = val;
-        ir.paddingLeft = val;
-        continue;
-      }
-
-      // px-* (horizontal)
-      const pxMatch = cls.match(/^px-(\d+(?:\.\d+)?|\[.+\])$/);
-      if (pxMatch) {
-        const val = this.resolveSpacing(pxMatch[1]);
-        ir.paddingLeft = val;
-        ir.paddingRight = val;
-        continue;
-      }
-
-      // py-* (vertical)
-      const pyMatch = cls.match(/^py-(\d+(?:\.\d+)?|\[.+\])$/);
-      if (pyMatch) {
-        const val = this.resolveSpacing(pyMatch[1]);
-        ir.paddingTop = val;
-        ir.paddingBottom = val;
-        continue;
-      }
-
-      // Individual padding
-      const ptMatch = cls.match(/^pt-(\d+(?:\.\d+)?|\[.+\])$/);
-      if (ptMatch) {
-        ir.paddingTop = this.resolveSpacing(ptMatch[1]);
-        continue;
-      }
-      const prMatch = cls.match(/^pr-(\d+(?:\.\d+)?|\[.+\])$/);
-      if (prMatch) {
-        ir.paddingRight = this.resolveSpacing(prMatch[1]);
-        continue;
-      }
-      const pbMatch = cls.match(/^pb-(\d+(?:\.\d+)?|\[.+\])$/);
-      if (pbMatch) {
-        ir.paddingBottom = this.resolveSpacing(pbMatch[1]);
-        continue;
-      }
-      const plMatch = cls.match(/^pl-(\d+(?:\.\d+)?|\[.+\])$/);
-      if (plMatch) {
-        ir.paddingLeft = this.resolveSpacing(plMatch[1]);
-        continue;
-      }
-    }
-  }
-
-  private static parseAlignment(classes: string[], ir: LayoutIR): void {
-    for (const cls of classes) {
-      // Primary axis (justify-*)
-      if (cls === 'justify-start') ir.mainAlign = 'MIN';
-      else if (cls === 'justify-center') ir.mainAlign = 'CENTER';
-      else if (cls === 'justify-end') ir.mainAlign = 'MAX';
-      else if (cls === 'justify-between') ir.mainAlign = 'SPACE_BETWEEN';
-
-      // Counter axis (items-*)
-      if (cls === 'items-start') ir.crossAlign = 'MIN';
-      else if (cls === 'items-center') ir.crossAlign = 'CENTER';
-      else if (cls === 'items-end') ir.crossAlign = 'MAX';
-      else if (cls === 'items-stretch') ir.crossAlign = 'STRETCH';
-      else if (cls === 'items-baseline') ir.crossAlign = 'BASELINE';
-    }
-  }
-
-  private static parseSizing(classes: string[], ir: LayoutIR): void {
-    for (const cls of classes) {
-      // Fixed width: w-20 (scale), w-[100px] (arbitrary)
-      const wScaleMatch = cls.match(/^w-(\d+(?:\.\d+)?)$/);
-      if (wScaleMatch) {
-        const val = this.resolveSpacing(wScaleMatch[1]);
-        if (val > 0) {
-          ir.widthMode = 'FIXED';
-          ir.fixedWidth = val;
-        }
-        continue;
-      }
-
-      const wArbitraryMatch = cls.match(/^w-\[(\d+(?:\.\d+)?)(px|rem|em)?\]$/);
-      if (wArbitraryMatch) {
-        let val = parseFloat(wArbitraryMatch[1]);
-        const unit = wArbitraryMatch[2] || 'px';
-        if (unit === 'rem' || unit === 'em') val *= 16;
-        ir.widthMode = 'FIXED';
-        ir.fixedWidth = val;
-        continue;
-      }
-
-      // Fractional width: w-1/2, w-1/3, w-2/3, etc.
-      const wFractionMatch = cls.match(/^w-(\d+\/\d+)$/);
-      if (wFractionMatch) {
-        const fraction = FRACTIONAL_SIZES[wFractionMatch[1]];
-        if (fraction !== undefined) {
-          ir.widthMode = 'FILL';
-          ir.widthFraction = fraction;
-        }
-        continue;
-      }
-
-      // Fixed height: h-20 (scale), h-[100px] (arbitrary)
-      const hScaleMatch = cls.match(/^h-(\d+(?:\.\d+)?)$/);
-      if (hScaleMatch) {
-        const val = this.resolveSpacing(hScaleMatch[1]);
-        if (val > 0) {
-          ir.heightMode = 'FIXED';
-          ir.fixedHeight = val;
-        }
-        continue;
-      }
-
-      const hArbitraryMatch = cls.match(/^h-\[(\d+(?:\.\d+)?)(px|rem|em)?\]$/);
-      if (hArbitraryMatch) {
-        let val = parseFloat(hArbitraryMatch[1]);
-        const unit = hArbitraryMatch[2] || 'px';
-        if (unit === 'rem' || unit === 'em') val *= 16;
-        ir.heightMode = 'FIXED';
-        ir.fixedHeight = val;
-        continue;
-      }
-
-      // Fractional height: h-1/2, h-1/3, h-2/3, etc.
-      const hFractionMatch = cls.match(/^h-(\d+\/\d+)$/);
-      if (hFractionMatch) {
-        const fraction = FRACTIONAL_SIZES[hFractionMatch[1]];
-        if (fraction !== undefined) {
-          ir.heightMode = 'FILL';
-          ir.heightFraction = fraction;
-        }
-        continue;
-      }
-
-      // Size (both dimensions): size-20
-      const sizeMatch = cls.match(/^size-(\d+(?:\.\d+)?)$/);
-      if (sizeMatch) {
-        const val = this.resolveSpacing(sizeMatch[1]);
-        if (val > 0) {
-          ir.widthMode = 'FIXED';
-          ir.heightMode = 'FIXED';
-          ir.fixedWidth = val;
-          ir.fixedHeight = val;
-        }
-        continue;
-      }
-
-      // Fill width (determined by parent context in applyChildProperties)
-      // Just mark the intent here
-      if (cls === 'w-full') {
-        ir.widthMode = 'FILL';
-      }
-      if (cls === 'h-full') {
-        ir.heightMode = 'FILL';
-      }
-
-      // Max-width with fixed value
-      const maxWMatch = cls.match(/^max-w-(\d+(?:\.\d+)?)$/);
-      if (maxWMatch) {
-        const val = this.resolveSpacing(maxWMatch[1]);
-        if (val > 0) {
-          // Treat max-w as a fixed width constraint for Figma
-          ir.widthMode = 'FIXED';
-          ir.fixedWidth = val;
-        }
-        continue;
-      }
-
-      // Named max-width (max-w-xl, max-w-2xl, etc.)
-      const maxWNamedMatch = cls.match(/^max-w-(xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|full|prose|screen-sm|screen-md|screen-lg|screen-xl|screen-2xl)$/);
-      if (maxWNamedMatch) {
-        const maxWidths: Record<string, number> = {
-          'xs': 320, 'sm': 384, 'md': 448, 'lg': 512, 'xl': 576,
-          '2xl': 672, '3xl': 768, '4xl': 896, '5xl': 1024, '6xl': 1152, '7xl': 1280,
-          'prose': 640,
-          'screen-sm': 640, 'screen-md': 768, 'screen-lg': 1024, 'screen-xl': 1280, 'screen-2xl': 1536,
-        };
-        const val = maxWidths[maxWNamedMatch[1]];
-        if (val) {
-          ir.widthMode = 'FIXED';
-          ir.fixedWidth = val;
-        }
-        continue;
-      }
-    }
-  }
-
-  private static parseChildProperties(classes: string[], ir: LayoutIR): void {
-    for (const cls of classes) {
-      // Grow: flex-1, flex-grow, grow
-      if (cls === 'flex-1' || cls === 'flex-grow' || cls === 'grow') {
-        ir.grow = 1;
-        continue;
-      }
-      if (cls === 'flex-grow-0' || cls === 'grow-0') {
-        ir.grow = 0;
-        continue;
-      }
-
-      // Self alignment
-      if (cls === 'self-start') ir.selfAlign = 'MIN';
-      else if (cls === 'self-center') ir.selfAlign = 'CENTER';
-      else if (cls === 'self-end') ir.selfAlign = 'MAX';
-      else if (cls === 'self-stretch') ir.selfAlign = 'STRETCH';
-      else if (cls === 'self-auto') ir.selfAlign = undefined;
-    }
-  }
-
-  private static parseWrap(classes: string[], ir: LayoutIR): void {
-    if (classes.includes('flex-wrap') || classes.includes('flex-wrap-reverse')) {
-      ir.wrap = true;
-    }
-  }
-
-  /**
-   * Resolve a Tailwind spacing value to pixels
-   */
-  private static resolveSpacing(value: string): number {
-    // Arbitrary value [Xpx]
-    if (value.startsWith('[') && value.endsWith(']')) {
-      const inner = value.slice(1, -1);
-      const match = inner.match(/^(\d+(?:\.\d+)?)(px|rem|em)?$/);
-      if (match) {
-        let num = parseFloat(match[1]);
-        const unit = match[2] || 'px';
-        if (unit === 'rem' || unit === 'em') num *= 16;
-        return num;
-      }
-    }
-
-    // Scale value
-    if (SPACING_SCALE[value] !== undefined) {
-      return SPACING_SCALE[value];
-    }
-
-    // Parse as number and multiply by 4 (Tailwind default)
-    const num = parseFloat(value);
-    if (!isNaN(num)) {
-      return num * 4;
-    }
-
-    return 0;
-  }
-}