Add spacing to row/column nodes

RowColumnMixin.spacing (default 0) is the gap between consecutive
children along the main axis, like Flutter's Row/Column spacing and
Figma auto-layout item spacing. RowColumnNode takes it in its
constructor and exposes it as a layout field. JSON omits it when 0 and
JSON without it loads as 0 for every RowColumnMixin node.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UErtKMSFkZWHUh8DrQMcZW

Author: claude

lib/src/api/mixins.dart

@@ -1109,6 +1109,16 @@ mixin RowColumnMixin on BaseNode {
   /// for details on available alignments.
   late CrossAxisAlignmentC crossAxisAlignment;
 
+  /// The gap between consecutive children along the main axis, in logical
+  /// pixels. Corresponds to the `spacing` property of [Row] and [Column] in
+  /// Flutter and to item spacing in Figma auto-layout.
+  ///
+  /// Unlike margins, the spacing is subtracted from the main axis extent
+  /// before free space is distributed to flexible children, so expanded
+  /// children with equal flex receive equal sizes.
+  @JsonKey(defaultValue: 0.0)
+  double spacing = 0;
+
   /// Returns the main axis based on whether this is a row or column.
   AxisC get mainAxis =>
       (rowColumnType == RowColumnType.row) ? AxisC.horizontal : AxisC.vertical;
@@ -1122,10 +1132,12 @@ mixin RowColumnMixin on BaseNode {
     required RowColumnType rowColumnType,
     required MainAxisAlignmentC mainAxisAlignment,
     required CrossAxisAlignmentC crossAxisAlignment,
+    double spacing = 0,
   }) {
     this.rowColumnType = rowColumnType;
     this.mainAxisAlignment = mainAxisAlignment;
     this.crossAxisAlignment = crossAxisAlignment;
+    this.spacing = spacing;
   }
 
   @override

lib/src/api/nodes/accordion_node.g.dart

@@ -1,5 +1,6 @@
 import 'package:json_annotation/json_annotation.dart';
 
+import '../field_access.dart';
 import '../mixins.dart';
 import '../models/models.dart';
 
@@ -34,6 +35,7 @@ class RowColumnNode extends ParentNode
     required RowColumnType rowColumnType,
     MainAxisAlignmentC mainAxisAlignment = MainAxisAlignmentC.center,
     CrossAxisAlignmentC crossAxisAlignment = CrossAxisAlignmentC.center,
+    double spacing = 0,
     super.retainedOuterBoxLocal,
     super.visible,
     super.enabled,
@@ -86,6 +88,7 @@ class RowColumnNode extends ParentNode
       rowColumnType: rowColumnType,
       mainAxisAlignment: mainAxisAlignment,
       crossAxisAlignment: crossAxisAlignment,
+      spacing: spacing,
     );
 
     setScrollableMixin(
@@ -101,6 +104,20 @@ class RowColumnNode extends ParentNode
     );
   }
 
+  @override
+  FieldsMap generateFields() => {
+    ...super.generateFields(),
+    'spacing': NumFieldAccess<double>(
+      'Spacing',
+      'Gap between consecutive children along the main axis.',
+      () => spacing,
+      (value) => spacing = value,
+      defaultValue: () => 0,
+      min: 0,
+      requiresLayout: true,
+    ),
+  };
+
   /// Creates a [RowColumnNode] from a JSON data.
   factory RowColumnNode.fromJson(Map json) => _$RowColumnNodeFromJson(json);
 

lib/src/api/nodes/auto_placeholder_node.g.dart

@@ -0,0 +1,62 @@
+import 'dart:convert';
+
+import 'package:codelessly_api/codelessly_api.dart';
+import 'package:test/test.dart';
+
+RowColumnNode _row({double spacing = 0}) => RowColumnNode(
+  id: 'row',
+  name: 'Row',
+  basicBoxLocal: NodeBox(0, 0, 1072, 100),
+  children: const ['a', 'b', 'c'],
+  rowColumnType: RowColumnType.row,
+  spacing: spacing,
+);
+
+void main() {
+  group('RowColumnNode.spacing', () {
+    test('defaults to 0 and is omitted from JSON', () {
+      final node = _row();
+      expect(node.spacing, 0);
+      expect(node.toJson().containsKey('spacing'), isFalse);
+    });
+
+    test('round-trips a non-zero spacing', () {
+      final json = jsonDecode(jsonEncode(_row(spacing: 20).toJson())) as Map;
+      expect(json['spacing'], 20);
+      final decoded = RowColumnNode.fromJson(json);
+      expect(decoded.spacing, 20);
+      expect(decoded.toJson()['spacing'], 20);
+    });
+
+    test('loads JSON written without spacing', () {
+      final json = _row().toJson()..remove('spacing');
+      expect(RowColumnNode.fromJson(json).spacing, 0);
+    });
+
+    test('accepts integer spacing in JSON', () {
+      final json = _row().toJson()..['spacing'] = 12;
+      expect(RowColumnNode.fromJson(json).spacing, 12.0);
+    });
+
+    test('is exposed as a layout field', () {
+      final node = _row(spacing: 8);
+      final field = node.fields['spacing']!;
+      expect(field.getValue(), 8);
+      expect(field.requiresLayout, isTrue);
+      field.setValue(16.0);
+      expect(node.spacing, 16);
+    });
+
+    test('other RowColumnMixin nodes load old JSON without spacing', () {
+      final placeholder = AutoPlaceholderNode(
+        id: 'placeholder',
+        name: 'Placeholder',
+        basicBoxLocal: NodeBox(0, 0, 100, 100),
+        children: const [],
+      );
+      final json = placeholder.toJson();
+      expect(json.containsKey('spacing'), isFalse);
+      expect(AutoPlaceholderNode.fromJson(json).spacing, 0);
+    });
+  });
+}