fix: correct counter axis logic in getDirection function

[lordke]

Problem Description

The getDirection function has incorrect logic for the counter axis. Currently, the counter axis returns the same direction as the primary axis, which is incorrect in flexbox layout systems.

Fix Details

This PR corrects the counter axis logic:

• When mode is "row": primary axis is horizontal, counter axis should be vertical
• When mode is "column": primary axis is vertical, counter axis should be horizontal

Files Changed

• src/transformers/layout.ts: Fixed the return values for counter axis in getDirection function

Before/After Comparison

Before (incorrect):

case "counter":
  switch (mode) {
    case "row":
      return "horizontal"; // Wrong: should be vertical
    case "column":
      return "vertical";   // Wrong: should be horizontal
  }

After (correct):

case "counter":
  switch (mode) {
    case "row":
      return "vertical";   // Correct: cross axis of row is vertical
    case "column":
      return "horizontal"; // Correct: cross axis of column is horizontal
  }

[GLips]

Nice find @lordke—this definitely seems like a bug to me.

Can you put together a public Figma design that demonstrates the issue? Would love to test the output before and after the fix before I merge it.

[GLips]

Hey @lordke, just wanted to follow up on the above—like I said this does seem like a bug to me, but I put together some tests and haven't been able to identify the specific issue. All my designs seem to be output correctly in HTML when translated through the MCP.

Do you have a broken design you can share?