fix(layout): suppress computed gap values when using SPACE_BETWEEN (#341)

When primaryAxisAlignItems or counterAxisAlignContent is SPACE_BETWEEN,
Figma computes gaps dynamically but the API still returns stale spacing
values. Suppress these and also add missing counterAxisSpacing support
for wrapped flex layouts.

Closes #169

Author: GLips

src/tests/layout-alignment.test.ts

@@ -72,6 +72,85 @@ describe("layout alignment", () => {
     });
   });
 
+  describe("gap suppression with SPACE_BETWEEN", () => {
+    test("primary: itemSpacing suppressed when SPACE_BETWEEN", () => {
+      const node = makeFrame({
+        primaryAxisAlignItems: "SPACE_BETWEEN",
+        itemSpacing: 10,
+      });
+      expect(buildSimplifiedLayout(node).gap).toBeUndefined();
+    });
+
+    test("primary: itemSpacing preserved for other alignment modes", () => {
+      const node = makeFrame({
+        primaryAxisAlignItems: "MIN",
+        itemSpacing: 10,
+      });
+      expect(buildSimplifiedLayout(node).gap).toBe("10px");
+    });
+
+    test("counter: counterAxisSpacing suppressed when SPACE_BETWEEN", () => {
+      const node = makeFrame({
+        layoutWrap: "WRAP",
+        counterAxisAlignContent: "SPACE_BETWEEN",
+        counterAxisSpacing: 24,
+        primaryAxisAlignItems: "SPACE_BETWEEN",
+        itemSpacing: 10,
+      });
+      expect(buildSimplifiedLayout(node).gap).toBeUndefined();
+    });
+
+    test("counter: counterAxisSpacing preserved when AUTO", () => {
+      const node = makeFrame({
+        layoutWrap: "WRAP",
+        counterAxisAlignContent: "AUTO",
+        counterAxisSpacing: 24,
+        itemSpacing: 10,
+      });
+      expect(buildSimplifiedLayout(node).gap).toBe("24px 10px");
+    });
+
+    test("wrapped row: both gaps emit CSS shorthand (row-gap column-gap)", () => {
+      const node = makeFrame({
+        layoutMode: "HORIZONTAL",
+        layoutWrap: "WRAP",
+        itemSpacing: 10,
+        counterAxisSpacing: 24,
+      });
+      // row layout: counterAxisSpacing=row-gap, itemSpacing=column-gap
+      expect(buildSimplifiedLayout(node).gap).toBe("24px 10px");
+    });
+
+    test("wrapped column: both gaps emit CSS shorthand (row-gap column-gap)", () => {
+      const node = makeFrame({
+        layoutMode: "VERTICAL",
+        layoutWrap: "WRAP",
+        itemSpacing: 10,
+        counterAxisSpacing: 24,
+      });
+      // column layout: itemSpacing=row-gap, counterAxisSpacing=column-gap
+      expect(buildSimplifiedLayout(node).gap).toBe("10px 24px");
+    });
+
+    test("wrapped: equal gaps collapse to single value", () => {
+      const node = makeFrame({
+        layoutWrap: "WRAP",
+        itemSpacing: 16,
+        counterAxisSpacing: 16,
+      });
+      expect(buildSimplifiedLayout(node).gap).toBe("16px");
+    });
+
+    test("counterAxisSpacing ignored for non-wrapped layouts", () => {
+      const node = makeFrame({
+        layoutWrap: "NO_WRAP",
+        itemSpacing: 10,
+        counterAxisSpacing: 24,
+      });
+      expect(buildSimplifiedLayout(node).gap).toBe("10px");
+    });
+  });
+
   describe("alignItems stretch detection", () => {
     test("row: all children fill cross axis → stretch", () => {
       const node = makeFrame({

src/transformers/layout.ts

@@ -103,6 +103,28 @@ function convertSelfAlign(align?: HasLayoutTrait["layoutAlign"]) {
   }
 }
 
+// SPACE_BETWEEN computes gaps dynamically — the API returns stale spacing
+// values, but Figma's UI shows "Auto". Suppress the affected axis.
+function buildGap(n: HasFramePropertiesTrait, mode: "row" | "column"): string | undefined {
+  const primaryGap = n.primaryAxisAlignItems === "SPACE_BETWEEN" ? undefined : n.itemSpacing;
+  const counterGap =
+    n.layoutWrap !== "WRAP" || n.counterAxisAlignContent === "SPACE_BETWEEN"
+      ? undefined
+      : n.counterAxisSpacing;
+
+  // Map Figma's primary/counter axes to CSS's row/column axes
+  const rowGap = mode === "row" ? counterGap : primaryGap;
+  const colGap = mode === "row" ? primaryGap : counterGap;
+
+  return gapShorthand(rowGap, colGap);
+}
+
+function gapShorthand(row?: number, col?: number): string | undefined {
+  if (!row && !col) return undefined;
+  if (row && col) return row === col ? `${row}px` : `${row}px ${col}px`;
+  return `${(row ?? col)!}px`;
+}
+
 // interpret sizing
 function convertSizing(
   s?: HasLayoutTrait["layoutSizingHorizontal"] | HasLayoutTrait["layoutSizingVertical"],
@@ -146,7 +168,7 @@ function buildSimplifiedFrameValues(n: FigmaDocumentNode): SimplifiedLayout | {
 
   // Only include wrap if it's set to WRAP, since flex layouts don't default to wrapping
   frameValues.wrap = n.layoutWrap === "WRAP" ? true : undefined;
-  frameValues.gap = n.itemSpacing ? `${n.itemSpacing ?? 0}px` : undefined;
+  frameValues.gap = buildGap(n, frameValues.mode);
   // gather padding
   if (n.paddingTop || n.paddingBottom || n.paddingLeft || n.paddingRight) {
     frameValues.padding = generateCSSShorthand({