RowColumnNode: spacing, wrap and runSpacing

spacing is the gap between children on the main axis, wrap makes children
flow onto new runs when they don't fit, and runSpacing is the gap between
runs. All default to off (0, false, 0) and are left out of the JSON at
their defaults, so existing documents don't change.

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

Author: claude

lib/src/api/nodes/row_column_node.dart

@@ -1,5 +1,6 @@
 import 'package:json_annotation/json_annotation.dart';
 
+import '../field_access.dart';
 import '../mixins.dart';
 import '../models/models.dart';
 
@@ -24,6 +25,22 @@ class RowColumnNode extends ParentNode
   @override
   set scrollDirection(AxisC value) {}
 
+  /// The gap between consecutive children along the main axis, in logical
+  /// pixels. Corresponds to [Flex.spacing] in Flutter, or [Wrap.spacing] when
+  /// [wrap] is true.
+  double spacing;
+
+  /// Whether children that don't fit along the main axis flow onto new runs,
+  /// like Flutter's [Wrap], instead of overflowing in a single line.
+  ///
+  /// Expanded and flexible children can't flex inside a wrap; they keep their
+  /// design size along the main axis.
+  bool wrap;
+
+  /// The gap between runs along the cross axis when [wrap] is true.
+  /// Corresponds to [Wrap.runSpacing] in Flutter.
+  double runSpacing;
+
   /// Creates a [RowColumnNode] with the given data.
   RowColumnNode({
     required super.id,
@@ -34,6 +51,9 @@ class RowColumnNode extends ParentNode
     required RowColumnType rowColumnType,
     MainAxisAlignmentC mainAxisAlignment = MainAxisAlignmentC.center,
     CrossAxisAlignmentC crossAxisAlignment = CrossAxisAlignmentC.center,
+    this.spacing = 0,
+    this.wrap = false,
+    this.runSpacing = 0,
     super.retainedOuterBoxLocal,
     super.visible,
     super.enabled,
@@ -101,6 +121,35 @@ class RowColumnNode extends ParentNode
     );
   }
 
+  @override
+  FieldsMap generateFields() => {
+    ...super.generateFields(),
+    'spacing': NumFieldAccess<double>(
+      'Gap',
+      'Gap between children along the main axis.',
+      () => spacing,
+      (value) => spacing = value,
+      defaultValue: () => 0,
+      requiresLayout: true,
+    ),
+    'wrap': BoolFieldAccess(
+      'Wrap',
+      'Whether children flow onto new runs when they don\'t fit.',
+      () => wrap,
+      (value) => wrap = value,
+      defaultValue: () => false,
+      requiresLayout: true,
+    ),
+    'runSpacing': NumFieldAccess<double>(
+      'Run Gap',
+      'Gap between runs along the cross axis when wrapping.',
+      () => runSpacing,
+      (value) => runSpacing = value,
+      defaultValue: () => 0,
+      requiresLayout: true,
+    ),
+  };
+
   /// Creates a [RowColumnNode] from a JSON data.
   factory RowColumnNode.fromJson(Map json) => _$RowColumnNodeFromJson(json);
 

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

@@ -0,0 +1,75 @@
+import 'dart:convert';
+
+import 'package:codelessly_api/codelessly_api.dart';
+import 'package:test/test.dart';
+
+RowColumnNode _row({double spacing = 0, bool wrap = false, double run = 0}) =>
+    RowColumnNode(
+      id: 'row',
+      name: 'Row',
+      basicBoxLocal: NodeBox(0, 0, 200, 40),
+      children: ['a', 'b'],
+      rowColumnType: RowColumnType.row,
+      spacing: spacing,
+      wrap: wrap,
+      runSpacing: run,
+    );
+
+Map _roundTrip(Map json) => jsonDecode(jsonEncode(json)) as Map;
+
+void main() {
+  group('RowColumnNode spacing / wrap', () {
+    test('defaults are zero gap, no wrap', () {
+      final node = _row();
+      expect(node.spacing, 0);
+      expect(node.wrap, isFalse);
+      expect(node.runSpacing, 0);
+    });
+
+    test('defaults are omitted from JSON', () {
+      final json = _row().toJson();
+      expect(json.containsKey('spacing'), isFalse);
+      expect(json.containsKey('wrap'), isFalse);
+      expect(json.containsKey('runSpacing'), isFalse);
+    });
+
+    test('missing keys decode to defaults', () {
+      final json = _roundTrip(_row().toJson());
+      final node = RowColumnNode.fromJson(json);
+      expect(node.spacing, 0);
+      expect(node.wrap, isFalse);
+      expect(node.runSpacing, 0);
+    });
+
+    test('non-default values round-trip', () {
+      final json = _roundTrip(_row(spacing: 14, wrap: true, run: 6).toJson());
+      expect(json['spacing'], 14);
+      expect(json['wrap'], true);
+      expect(json['runSpacing'], 6);
+      final node = RowColumnNode.fromJson(json);
+      expect(node.spacing, 14);
+      expect(node.wrap, isTrue);
+      expect(node.runSpacing, 6);
+    });
+
+    test('integer JSON values decode as doubles', () {
+      final json = _roundTrip(_row().toJson())
+        ..['spacing'] = 8
+        ..['runSpacing'] = 3;
+      final node = RowColumnNode.fromJson(json);
+      expect(node.spacing, 8.0);
+      expect(node.runSpacing, 3.0);
+    });
+
+    test('field access edits the new fields', () {
+      final node = _row();
+      final fields = node.generateFields();
+      fields['spacing']!.setValue(12.0);
+      fields['wrap']!.setValue(true);
+      fields['runSpacing']!.setValue(4.0);
+      expect(node.spacing, 12);
+      expect(node.wrap, isTrue);
+      expect(node.runSpacing, 4);
+    });
+  });
+}