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

package/src/layout/index.ts

@@ -0,0 +1,24 @@
+export * from './layout-parser';
+// Direct access to the free parsing API + IR types — preferred for
+// new code (the LayoutParser class re-exported above remains for
+// existing consumers).
+export {
+  parseToIR,
+  parseLayoutMode,
+  parseGap,
+  parsePadding,
+  parseSpacing,
+  parseSizing,
+  parseAlignment,
+  parseFlexChildren,
+  parseWrap,
+  resolveSpacing,
+  makeEmptyIR,
+} from './parser';
+export type { LayoutIR, SizingMode } from './parser';
+export * from './width-solver';
+export * from './deferred-layout';
+export * from './layout-utils';
+export * from './size-utils';
+export * from './ring-utils';
+export * from './text-resize-decision';

package/src/layout/layout-parser.ts

@@ -0,0 +1,375 @@
+/**
+ * LayoutParser — IR → Figma Auto-layout application.
+ *
+ * Pipeline: Tailwind utilities → LayoutIR → Figma Auto-layout.
+ *
+ * The PARSING side (Tailwind → IR) lives under `./parser/`, with one
+ * file per Tailwind axis (layout-mode, spacing, sizing, alignment,
+ * flex). Each is independently regression-tested. The orchestrator
+ * `parseToIR(classes)` is exported from `./parser/index.ts`.
+ *
+ * This file owns the APPLICATION side (IR → Figma frame) — i.e.
+ * `applyToFrame` (container) and `applyChildProperties` (per-child
+ * layoutGrow / layoutAlign / etc). `LayoutParser.parseToIR` is kept
+ * here as a thin delegate so existing consumers don't need to migrate
+ * their call sites; new code should `import { parseToIR } from './parser'`.
+ *
+ * (The class is still named `LayoutParser` for backward-compat with
+ * its consumers in `width-solver.ts` / `ui-builder.ts`. A future
+ * cleanup pass could rename it / this file to `LayoutApplier` /
+ * `layout-applier.ts` to match the current responsibility, but that's
+ * mostly cosmetic and would touch every call site.)
+ */
+
+import { parseToIR as parseToIRImpl } from './parser';
+import type { LayoutIR, SizingMode } from './parser/ir';
+export type { LayoutIR, SizingMode };
+
+const FRAME_CROSS_ALIGN = new WeakMap<FrameNode, LayoutIR['crossAlign']>();
+const FRAME_FROM_BLOCK_FLOW = new WeakMap<FrameNode, boolean>();
+// Block-flow parents that carry `text-align: center` (or right). CSS centers
+// inline content inside such a container — `text-center` on a div centers
+// inline-flex pills / inline-block buttons inside, even though they're not
+// flex parents. Without this signal, `applyChildProperties` defaults the
+// child to MIN cross-align and pills end up left-aligned.
+const FRAME_INLINE_ALIGN = new WeakMap<FrameNode, 'CENTER' | 'MAX' | 'MIN'>();
+
+/**
+ * Record a flex/grid parent's cross-axis intent (STRETCH | MIN | CENTER | MAX | BASELINE).
+ * `applyChildProperties` reads this to emulate CSS `align-items: stretch` — the default
+ * for flex/grid containers — since Figma has no parent-level STRETCH value.
+ * Call whenever a frame's layoutMode or counterAxisAlignItems is set outside LayoutParser
+ * (notably from `applySemanticUtilitiesToFrame` / `applyCssDeclarationsToFrame`).
+ */
+export function setFrameCrossAlign(
+  frame: FrameNode,
+  align: NonNullable<LayoutIR['crossAlign']>
+): void {
+  FRAME_CROSS_ALIGN.set(frame, align);
+}
+
+/**
+ * Mark a frame as coming from block-flow (a regular `<div>` / `<section>`
+ * promoted to a VERTICAL auto-layout container, vs. a true flex/grid
+ * parent). Used by `applyChildProperties` to differentiate CSS semantics:
+ * block-flow parents emulate `align-items: stretch` for block children but
+ * leave inline children alone; real flex parents stretch all children
+ * (including inline-flex) per CSS spec.
+ */
+export function setFrameFromBlockFlow(frame: FrameNode, fromBlockFlow: boolean): void {
+  FRAME_FROM_BLOCK_FLOW.set(frame, fromBlockFlow);
+}
+
+/**
+ * Record a block-flow parent's `text-align` so `applyChildProperties` can
+ * center / right-align inline-display children inside (CSS centers inline
+ * content via the parent's text-align). Without this, an inline-flex pill
+ * inside `<div class="text-center">` ends up left-aligned because the
+ * plugin defaults the child's counterAxisAlignSelf to MIN.
+ */
+export function setFrameInlineAlign(frame: FrameNode, align: 'CENTER' | 'MAX' | 'MIN'): void {
+  FRAME_INLINE_ALIGN.set(frame, align);
+}
+
+export class LayoutParser {
+  /**
+   * Parse Tailwind classes into a LayoutIR. Thin delegate to
+   * `parseToIR` in `./parser` — kept on the class for backward-
+   * compatibility with the two existing call sites
+   * (`width-solver.ts`, `ui-builder.ts`). New code should import
+   * the free function directly.
+   */
+  static parseToIR(classes: string[]): LayoutIR {
+    return parseToIRImpl(classes);
+  }
+
+  /**
+   * 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;
+    // Keep original Tailwind cross-axis intent available for child layout resolution.
+    FRAME_CROSS_ALIGN.set(frame, ir.crossAlign);
+    // Track whether this frame came from a non-flex/non-grid source (block flow).
+    FRAME_FROM_BLOCK_FLOW.set(frame, ir.layoutMode === 'NONE');
+
+    // 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
+      }
+    }
+
+    // Min-height / Min-width floors. Figma's auto-layout exposes these
+    // as native properties on FrameNode; `layoutMode` here is always
+    // HORIZONTAL or VERTICAL (the NONE case was rewritten to VERTICAL
+    // above), so the auto-layout property is safe to set. Resize too in
+    // case the frame hasn't grown yet.
+    if (ir.minHeight !== undefined && ir.minHeight > 0) {
+      try {
+        if ('minHeight' in frame) {
+          (frame as { minHeight: number }).minHeight = ir.minHeight;
+        }
+        if (frame.height < ir.minHeight) {
+          frame.resize(frame.width, ir.minHeight);
+        }
+      } catch (_e) { /* ignore */ }
+    }
+    if (ir.minWidth !== undefined && ir.minWidth > 0) {
+      try {
+        if ('minWidth' in frame) {
+          (frame as { minWidth: number }).minWidth = ir.minWidth;
+        }
+        if (frame.width < ir.minWidth) {
+          frame.resize(ir.minWidth, frame.height);
+        }
+      } catch (_e) { /* ignore */ }
+    }
+
+    // Apply wrap if supported
+    if (ir.wrap && 'layoutWrap' in frame) {
+      frame.layoutWrap = 'WRAP';
+      if (ir.gapY !== undefined && 'counterAxisSpacing' in frame) {
+        frame.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.layoutGrow;
+      child.layoutGrow = 0;
+      if (prevGrow > 0 && 'primaryAxisSizingMode' in child && 'layoutMode' in child) {
+        const childLayout = child.layoutMode;
+        if (childLayout === 'VERTICAL' || childLayout === 'HORIZONTAL') {
+          // Undo the FILL mode Figma internally set when the child was appended with layoutGrow>0.
+          child.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.layoutGrow = ir.grow;
+      } else {
+        child.layoutGrow = 0;
+      }
+    }
+    // shrink-0 explicitly pins layoutGrow = 0 so a viewport-anchored parent
+    // distributes remaining space only to real grow siblings.
+    if (ir.shrinkZero && 'layoutGrow' in child) {
+      child.layoutGrow = 0;
+    }
+
+    // Apply self alignment
+    if (ir.selfAlign !== undefined) {
+      if (ir.selfAlign === 'STRETCH') {
+        if ('layoutAlign' in child) child.layoutAlign = 'STRETCH';
+      } else if ('counterAxisAlignSelf' in child) {
+        // MIN / CENTER / MAX: use counterAxisAlignSelf (layoutAlign = MIN/CENTER/MAX is deprecated)
+        try { child.counterAxisAlignSelf = ir.selfAlign; } catch (_err) { /* ignore */ }
+      }
+    }
+
+    // CSS flex/grid default is `align-items: stretch` when no explicit items-* is provided.
+    // Figma has no parent-level STRETCH value, so emulate it by stretching children in
+    // vertical auto-layout containers unless the child explicitly sets a fixed width.
+    //
+    // CSS distinguishes two cases for inline-display children:
+    //   (a) Inline-display child in a BLOCK-FLOW parent (plugin treats as VERTICAL
+    //       auto-layout for convenience, but CSS-wise it's inline flow): the child
+    //       hugs content like any other inline element. NEVER stretch. This is the
+    //       recurring "pill renders full width" bug — see how-it-works / round-trip
+    //       pills, scanner/inline-flex-regression.ts positive control.
+    //   (b) Inline-display child in a real FLEX parent (`flex flex-col` etc.):
+    //       CSS treats it as a flex item, and `align-items: stretch` (the CSS
+    //       default) applies — child stretches. This is the dialog footer at base
+    //       breakpoint: `<DialogFooter className="flex flex-col-reverse">` with
+    //       inline-flex buttons that should stretch to full width on mobile.
+    // So the inline-display skip applies ONLY to the block-flow MIN branch.
+    const parentCrossAlign = FRAME_CROSS_ALIGN.get(parent);
+    const parentFromBlockFlow = FRAME_FROM_BLOCK_FLOW.get(parent) === true;
+    const isOutOfFlowChild = childClasses.includes('absolute') || childClasses.includes('fixed');
+    const childHasInlineDisplay = this.hasInlineDisplay(childClasses);
+    const fromBlockFlowMinBranch = parentFromBlockFlow && parentCrossAlign === 'MIN';
+    const fromFlexStretchBranch = parentCrossAlign === 'STRETCH' && !parentFromBlockFlow;
+    const parentWantsStretch =
+      fromFlexStretchBranch
+      || (fromBlockFlowMinBranch && !childHasInlineDisplay);
+    const shouldImplicitStretch = parentLayout === 'VERTICAL'
+      && parentWantsStretch
+      && ir.selfAlign === undefined
+      && !isOutOfFlowChild;
+    if (shouldImplicitStretch && 'layoutAlign' in child && !this.hasNonAutoWidthConstraint(childClasses)) {
+      child.layoutAlign = 'STRETCH';
+    }
+
+    // CSS `text-align` on a block container centers/aligns inline content
+    // INSIDE it — that includes inline-flex pills, inline-block buttons,
+    // and inline text. The plugin emulates this for inline-display flex
+    // children: when the block-flow parent recorded a non-MIN inline
+    // alignment, set the child's counterAxisAlignSelf so it sits at that
+    // horizontal position (CENTER for `text-center`, MAX for `text-right`).
+    // Doesn't apply to block-level children — they take full parent width
+    // via the implicit-stretch path above and their OWN textAlign handles
+    // text rendering inside.
+    if (
+      parentLayout === 'VERTICAL'
+      && childHasInlineDisplay
+      && parentFromBlockFlow
+      && ir.selfAlign === undefined
+      && !isOutOfFlowChild
+    ) {
+      const inlineAlign = FRAME_INLINE_ALIGN.get(parent);
+      if (inlineAlign && inlineAlign !== 'MIN' && 'counterAxisAlignSelf' in child) {
+        // Override the parent's `counterAxisAlignItems` for this child.
+        // `layoutAlign` only accepts 'INHERIT' | 'STRETCH' in current Figma;
+        // 'MIN' / 'CENTER' / 'MAX' are removed and trigger console warnings
+        // ("CENTER is no longer a supported value for layoutAlign").
+        try { child.counterAxisAlignSelf = inlineAlign; } catch (_e) { /* 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.layoutGrow = 1;
+        }
+      } else if (parentLayout === 'VERTICAL') {
+        // In vertical parent, w-full means stretch along counter axis
+        if ('layoutAlign' in child) {
+          child.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.layoutGrow = 1;
+        }
+      } else if (parentLayout === 'HORIZONTAL') {
+        // In horizontal parent, h-full means stretch along counter axis
+        if ('layoutAlign' in child) {
+          child.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.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.layoutGrow = ir.heightFraction;
+      }
+    }
+  }
+
+  // ===========================================================================
+  // Parsing helpers — every parser now lives under `./parser/`. Only
+  // class-level utilities (hasNonAutoWidthConstraint / hasInlineDisplay)
+  // remain here because they are used by `applyChildProperties` (the
+  // IR → Figma frame side, out of scope for the parser split).
+  // ===========================================================================
+
+  private static hasNonAutoWidthConstraint(classes: string[]): boolean {
+    for (const cls of classes) {
+      if (cls.startsWith('min-w-') || cls.startsWith('max-w-')) return true;
+      if (!cls.startsWith('w-')) continue;
+      if (cls === 'w-auto' || cls === 'w-full') continue;
+      return true;
+    }
+    return false;
+  }
+
+  private static hasInlineDisplay(classes: string[]): boolean {
+    for (const cls of classes) {
+      if (cls === 'inline' || cls === 'inline-block' || cls === 'inline-flex' || cls === 'inline-grid') {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  // parseSizing now lives in `parser/sizing.ts` and is imported above.
+
+  // parseChildProperties (grow/shrink) and parseWrap now live in
+  // `parser/flex.ts` and are imported above.
+
+}

package/src/{layout-utils.ts → layout/layout-utils.ts}

@@ -1,7 +1,5 @@
-import { applyFullWidthIfPossible, applyGridColumnsIfPossible, getGridColumnsNode, hasGridColumnsNode, getColSpanNode } from './tailwind';
-import { getBaseClass } from './width-solver';
-
-declare const figma: any;
+import { applyAspectRatioIfPossible, applyFullWidthIfPossible, applyRingIfPossible, applyGridColumnsIfPossible, getGridColumnsNode, hasGridColumnsNode, getColSpanNode, markFullWidthNode } from './deferred-layout';
+import { getBaseClass } from '../tailwind';
 
 export type LayoutWrapContext = {
   maxWidth?: number;
@@ -45,6 +43,8 @@ function reflowFullWidthInSubtree(parent: FrameNode): void {
 
   for (const child of parent.children) {
     applyFullWidthIfPossible(child, parent, options);
+    applyRingIfPossible(child, parent);
+    applyAspectRatioIfPossible(child);
     if ('layoutMode' in child) {
       const childFrame = child as FrameNode;
       if (hasGridColumnsNode(childFrame)) {
@@ -75,7 +75,7 @@ function stretchGridRowHeights(frame: FrameNode, colsOverride?: number): void {
   if (!cols || cols <= 0) return;
   const flowChildren: SceneNode[] = [];
   for (const child of frame.children) {
-    if ((child as any).layoutPositioning === 'ABSOLUTE') continue;
+    if ('layoutPositioning' in child && child.layoutPositioning === 'ABSOLUTE') continue;
     if (!('resize' in child)) continue;
     flowChildren.push(child);
   }
@@ -89,7 +89,8 @@ function stretchGridRowHeights(frame: FrameNode, colsOverride?: number): void {
     const span = Math.min(getColSpanNode(flowChildren[i]), cols);
     const rowIndex = Math.floor(slotIndex / cols);
     rowIndices.push(rowIndex);
-    const height = (flowChildren[i] as any).height;
+    const child = flowChildren[i];
+    const height = 'height' in child ? child.height : NaN;
     if (Number.isFinite(height)) {
       const current = rowHeights[rowIndex];
       if (current == null || height > current) rowHeights[rowIndex] = height;
@@ -101,7 +102,8 @@ function stretchGridRowHeights(frame: FrameNode, colsOverride?: number): void {
     const rowIndex = rowIndices[i];
     const targetHeight = rowHeights[rowIndex];
     if (!Number.isFinite(targetHeight) || targetHeight <= 0) continue;
-    const child = flowChildren[i] as any;
+    const child = flowChildren[i];
+    if (!('resize' in child) || !('width' in child)) continue;
     try {
       child.resize(child.width, targetHeight);
       if ('layoutMode' in child) {
@@ -137,19 +139,23 @@ export function maybeWrapMxAuto(
   wrapper.fills = [];
   wrapper.strokes = [];
   wrapper.clipsContent = false;
-  if ('layoutAlign' in wrapper) (wrapper as any).layoutAlign = 'STRETCH';
-  wrapper.appendChild(node);
-  if (typeof context.maxWidth === 'number' && context.maxWidth > 0 && 'resize' in wrapper) {
+  if ('layoutAlign' in wrapper) wrapper.layoutAlign = 'STRETCH';
+  // Guard against downstream layout passes leaving this wrapper in HUG width.
+  // If parent content width is known at creation time, pin wrapper width now.
+  const parentContentWidth = context.maxWidth;
+  if (typeof parentContentWidth === 'number' && Number.isFinite(parentContentWidth) && parentContentWidth > 0) {
     try {
-      if ((wrapper as any).width < context.maxWidth) {
-        (wrapper as any).resize(context.maxWidth, (wrapper as any).height);
-        if ('primaryAxisSizingMode' in wrapper) {
-          (wrapper as any).primaryAxisSizingMode = 'FIXED';
-        }
-      }
+      wrapper.resize(parentContentWidth, Math.max(1, wrapper.height));
+      wrapper.primaryAxisSizingMode = 'FIXED';
+      if ('layoutSizingHorizontal' in wrapper) wrapper.layoutSizingHorizontal = 'FIXED';
     } catch (_err) {
-      // ignore resize errors
+      // ignore
     }
   }
+  if ('counterAxisAlignSelf' in wrapper) {
+    try { wrapper.counterAxisAlignSelf = 'AUTO'; } catch (_err) { /* ignore */ }
+  }
+  markFullWidthNode(wrapper);
+  wrapper.appendChild(node);
   return wrapper;
 }

package/src/layout/parser/alignment.ts

@@ -0,0 +1,54 @@
+/**
+ * Tailwind alignment utilities → LayoutIR.
+ *
+ * Owns:
+ *   - Container alignment: justify-* (mainAlign) and items-* (crossAlign)
+ *   - Self alignment (a child-on-parent override): self-start / self-center
+ *     / self-end / self-stretch / self-auto
+ *
+ * The grow / shrink utilities (flex-1, grow, shrink-0, etc.) are flex-
+ * specific child behaviour and stay with the upcoming flex parser in
+ * Phase 5 — not here.
+ *
+ * Behaviour preserved 1:1 from the original `parseAlignment` static
+ * method on `LayoutParser` and the self-* portion of `parseChildProperties`.
+ * Locked in by the alignment regression test.
+ */
+
+import type { LayoutIR } from './ir';
+
+/**
+ * Parse container + self alignment utilities into the IR.
+ *
+ * Note: when the IR has a flex layoutMode set, the default crossAlign
+ * is STRETCH (CSS default for flex containers). That default is applied
+ * here when no explicit `items-*` overrides it. `LayoutParser.parseToIR`
+ * sets `ir.layoutMode` BEFORE calling this function, so the check below
+ * sees the right value.
+ */
+export function parseAlignment(classes: string[], ir: LayoutIR): void {
+  if (ir.layoutMode !== 'NONE') {
+    ir.crossAlign = 'STRETCH';
+  }
+  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';
+
+    // Self alignment (overrides crossAlign for this child only)
+    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;
+  }
+}

package/src/layout/parser/flex.ts

@@ -0,0 +1,59 @@
+/**
+ * Tailwind flex-related utilities → LayoutIR.
+ *
+ * Owns the two flex-specific groups that don't fit elsewhere:
+ *   1. Flex-child grow / shrink: flex-1, flex-grow, grow,
+ *      flex-grow-0, grow-0, shrink-0, flex-shrink-0
+ *   2. Flex-wrap: flex-wrap, flex-wrap-reverse
+ *
+ * NOT handled here (each lives in its own module):
+ *   - flex / flex-col / flex-row / inline-flex (layoutMode detection,
+ *     handled by `parseLayoutMode` in `layout-parser.ts` because it's
+ *     coupled to grid detection — both produce HORIZONTAL/VERTICAL/NONE)
+ *   - justify-* / items-* / self-* (alignment.ts)
+ *   - gap-* / space-x-* / space-y-* (spacing.ts)
+ *
+ * Behaviour preserved 1:1 from the original `parseChildProperties` and
+ * `parseWrap` static methods on `LayoutParser`. Locked in by the flex
+ * regression test.
+ */
+
+import type { LayoutIR } from './ir';
+
+/**
+ * Parse flex-child grow / shrink utilities into `ir.grow` / `ir.shrinkZero`.
+ *
+ * Flex grow / shrink semantics in Figma's auto-layout model:
+ *   - `flex-1` / `flex-grow` / `grow` → grow = 1 (claim remaining space)
+ *   - `flex-grow-0` / `grow-0` → grow = 0 (don't claim space)
+ *   - `shrink-0` / `flex-shrink-0` → shrinkZero = true (force layoutGrow = 0
+ *     even when the parent has remaining space; otherwise viewport-anchored
+ *     parents would distribute leftover space across non-shrink siblings)
+ */
+export function parseFlexChildren(classes: string[], ir: LayoutIR): void {
+  for (const cls of classes) {
+    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;
+    }
+    if (cls === 'shrink-0' || cls === 'flex-shrink-0') {
+      ir.shrinkZero = true;
+      continue;
+    }
+  }
+}
+
+/**
+ * Parse flex-wrap utilities into `ir.wrap`.
+ * `flex-wrap-reverse` is treated as `flex-wrap` — Figma auto-layout has
+ * no reverse-wrap option, so we collapse the intent to plain wrap.
+ */
+export function parseWrap(classes: string[], ir: LayoutIR): void {
+  if (classes.includes('flex-wrap') || classes.includes('flex-wrap-reverse')) {
+    ir.wrap = true;
+  }
+}

package/src/layout/parser/index.ts

@@ -0,0 +1,65 @@
+/**
+ * Layout parser — Tailwind class lists → LayoutIR.
+ *
+ * This barrel is the canonical entry point for parsing. Sub-parsers
+ * live one file each in this folder (one Tailwind axis per file):
+ *
+ *   - layout-mode.ts → ir.layoutMode (flex/grid/none + direction)
+ *   - spacing.ts → ir.gap / paddingT/R/B/L (gap-*, p-*, space-*-*)
+ *   - sizing.ts → ir.widthMode/heightMode/fixedWidth/heightFraction/...
+ *   - alignment.ts → ir.mainAlign / crossAlign / selfAlign
+ *   - flex.ts → ir.grow / shrinkZero / wrap
+ *
+ * Each sub-parser is independently regression-tested under
+ * `scanner/layout-*-regression.ts`.
+ *
+ * The IR-to-Figma APPLICATION side (`applyToFrame`, `applyChildProperties`)
+ * lives on `LayoutParser` in `../layout-parser.ts`. That file is named
+ * for the original LayoutParser class; it keeps `LayoutParser.parseToIR`
+ * as a thin delegate to `parseToIR` here so existing consumers don't
+ * need to migrate their call sites.
+ */
+
+import { LayoutIR, makeEmptyIR } from './ir';
+import { parseLayoutMode } from './layout-mode';
+import { parseGap, parsePadding } from './spacing';
+import { parseSizing } from './sizing';
+import { parseAlignment } from './alignment';
+import { parseFlexChildren, parseWrap } from './flex';
+
+/**
+ * Parse a Tailwind class list into a LayoutIR. Pure function — no
+ * Figma runtime needed, no I/O, no shared state. The orchestrator
+ * sequences sub-parsers; class-order semantics are preserved
+ * (later utilities override earlier ones, so responsive variants
+ * resolved at a breakpoint produce the right precedence).
+ */
+export function parseToIR(classes: string[]): LayoutIR {
+  const ir = makeEmptyIR();
+
+  // Pass 1: layout mode (flex/grid detection — sets ir.layoutMode).
+  // Must run before parseAlignment, which applies an implicit STRETCH
+  // crossAlign default when layoutMode is set.
+  ir.layoutMode = parseLayoutMode(classes);
+
+  // Pass 2: per-axis parsers, each writing its own subset of IR fields.
+  parseGap(classes, ir);
+  parsePadding(classes, ir);
+  parseAlignment(classes, ir);
+  parseSizing(classes, ir);
+  parseFlexChildren(classes, ir);
+  parseWrap(classes, ir);
+
+  return ir;
+}
+
+// Re-exports — give consumers a single import surface for IR types
+// AND each individual sub-parser (handy for tests + future uses).
+export type { LayoutIR, SizingMode } from './ir';
+export { makeEmptyIR } from './ir';
+export { parseLayoutMode } from './layout-mode';
+export { parseGap, parsePadding, parseSpacing } from './spacing';
+export { parseSizing } from './sizing';
+export { parseAlignment } from './alignment';
+export { parseFlexChildren, parseWrap } from './flex';
+export { resolveSpacing } from './spacing-scale';