Formula functions, wrapping lists, style bindings, per-row list previews

- Formulas: padLeft/padRight, substring, replace, split, indexOf, matches,
  slug, seconds/duration, slice/take/skip/reverse/findIndex, index params
  in lambdas, multi-key sortBy and sortByDesc, object literals with
  merge/set, money decimals, luminance.
- Lists can wrap their items onto further lines.
- StyleBindings: effects, stroke weight, icon, font weight and corner
  radius follow variables and formulas, on the canvas and at runtime.
- Bindings inside a list row read that row's item on the design canvas.

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

Author: claude

lib/src/transformers/node_transformers/passive_button_transformer.dart

@@ -131,7 +131,8 @@ class PassiveButtonWidget extends StatelessWidget {
       final List<TextSpan> spans = buttonLabelTemplateOf(node)
           .splitMap(
             variableSyntaxIdentifierRegex,
-            onMatch: (match) => VariableSpan(variable: match[0]!, node: node),
+            onMatch: (match) =>
+                VariableSpan(variable: match[0]!, node: node, context: context),
             onNonMatch: (text) => TextSpan(text: text),
           )
           .toList();

lib/src/transformers/node_transformers/passive_list_view_transformer.dart

@@ -75,21 +75,59 @@ class PassiveListViewWidget extends StatelessWidget {
   }
 
   /// Sizes the list by [ViewportLayout] around [builder].
+  ///
+  /// A wrapping list is sized by [WrapNodeBox] instead, and the flag given
+  /// to [builder] says whether its runs scroll along the cross axis.
   Widget box(ViewportContentBuilder builder, {required bool canShrinkWrap}) =>
-      ViewportNodeBox(
-        node: node,
+      node.properties.isWrapping
+      ? WrapNodeBox(node: node, builder: builder)
+      : ViewportNodeBox(
+          node: node,
+          scrollDirection: node.scrollDirection,
+          canShrinkWrap: canShrinkWrap,
+          builder: builder,
+        );
+
+  /// Builds one item, placed as the editor lays it out; see [ListItemBox].
+  /// The item of a wrapping list keeps its own size; see [WrapItemBox].
+  Widget buildItem(BaseNode item, BuildContext context) {
+    final Widget child = manager.buildWidgetByID(
+      item.id,
+      context,
+      settings: settings,
+    );
+    if (node.properties.isWrapping) {
+      return WrapItemBox(
+        item: item,
         scrollDirection: node.scrollDirection,
-        canShrinkWrap: canShrinkWrap,
-        builder: builder,
+        itemExtent: node.properties.itemExtent,
+        child: child,
       );
+    }
+    return ListItemBox(
+      item: item,
+      scrollDirection: node.scrollDirection,
+      itemExtent: node.properties.itemExtent,
+      child: child,
+    );
+  }
 
-  /// Builds one item, placed as the editor lays it out; see [ListItemBox].
-  Widget buildItem(BaseNode item, BuildContext context) => ListItemBox(
-    item: item,
-    scrollDirection: node.scrollDirection,
-    itemExtent: node.properties.itemExtent,
-    child: manager.buildWidgetByID(item.id, context, settings: settings),
-  );
+  /// The items of a wrapping list; [scrolls] comes from [WrapNodeBox].
+  Widget wrapped(bool scrolls, int itemCount, IndexedWidgetBuilder builder) =>
+      WrappedItems(
+        itemCount: itemCount,
+        itemBuilder: builder,
+        direction: node.scrollDirection.flutterAxis,
+        spacing: node.properties.wrapSpacing,
+        runSpacing: node.properties.wrapRunSpacing,
+        alignment: node.properties.wrapAlignment.flutterWrapAlignment,
+        padding: node.padding.flutterEdgeInsets,
+        scrolls: scrolls,
+        physics: node.physics.flutterScrollPhysics(false),
+        keyboardDismissBehavior:
+            node.keyboardDismissBehavior.flutterKeyboardDismissBehavior,
+        clipBehavior: node.clipsContent ? Clip.hardEdge : Clip.none,
+      );
 
   @override
   Widget build(BuildContext context) {
@@ -170,6 +208,23 @@ class PassiveListViewWidget extends StatelessWidget {
             final List<QueryDocumentSnapshot<Map>> docs = snapshot.docs;
             final itemCount = docs.length;
 
+            // A wrapping list shows the loaded page, without paging on.
+            if (node.properties.isWrapping) {
+              return wrapped(shrinkWrap, itemCount, (context, index) {
+                final doc = docs[index];
+                return IndexedItemProvider(
+                  key: ValueKey(index),
+                  item: IndexedItem(index, {'id': doc.id, ...doc.data()}),
+                  child: Builder(
+                    builder: (context) => KeyedSubtree(
+                      key: ValueKey(index),
+                      child: buildItem(item, context),
+                    ),
+                  ),
+                );
+              });
+            }
+
             // Item Count always exists.
             return ListViewBuilder(
               primary: node.primary,
@@ -294,6 +349,15 @@ class PassiveListViewWidget extends StatelessWidget {
       );
     }
 
+    // A wrapping list flows its items onto further lines, all of them built,
+    // so an endless one shows nothing.
+    if (node.properties.isWrapping) {
+      return box(
+        canShrinkWrap: true,
+        (context, scrolls) => wrapped(scrolls, itemCount ?? 0, itemBuilder),
+      );
+    }
+
     // An endless list with items of free extent ends after a viewport's
     // worth of items that take no space, so they cannot be built without
     // limit; see [EndlessList]. A fixed item extent is bounded by Flutter.
@@ -455,7 +519,6 @@ class ListViewItemSeparator extends StatelessWidget {
   }
 }
 
-
 /// The items of a stacked list: drawn on top of each other in the list's
 /// box, each at its top center, the first item on top.
 class StackedItems extends StatelessWidget {
@@ -493,3 +556,93 @@ class StackedItems extends StatelessWidget {
     ],
   );
 }
+
+/// The items of a wrapping list: laid out by a [Wrap] along [direction],
+/// flowing onto further lines (runs) when a line is full, each item at its
+/// own size.
+///
+/// With [scrolls], the runs scroll along the cross axis when they don't fit
+/// the box; otherwise the box grows with them.
+class WrappedItems extends StatelessWidget {
+  /// Creates a [WrappedItems].
+  const WrappedItems({
+    super.key,
+    required this.itemCount,
+    required this.itemBuilder,
+    this.direction = Axis.horizontal,
+    this.spacing = 0,
+    this.runSpacing = 0,
+    this.alignment = WrapAlignment.start,
+    this.padding = EdgeInsets.zero,
+    this.scrolls = false,
+    this.physics,
+    this.keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
+    this.clipBehavior = Clip.none,
+  });
+
+  /// How many items.
+  final int itemCount;
+
+  /// Builds an item.
+  final IndexedWidgetBuilder itemBuilder;
+
+  /// The wrap direction: the list's scroll direction.
+  final Axis direction;
+
+  /// The gap between two items of a line.
+  final double spacing;
+
+  /// The gap between two lines.
+  final double runSpacing;
+
+  /// How the items of a line are placed along it.
+  final WrapAlignment alignment;
+
+  /// The list's padding, around the runs.
+  final EdgeInsets padding;
+
+  /// Whether the runs scroll along the cross axis.
+  final bool scrolls;
+
+  /// The physics of that scroll.
+  final ScrollPhysics? physics;
+
+  /// See [ScrollView.keyboardDismissBehavior].
+  final ScrollViewKeyboardDismissBehavior keyboardDismissBehavior;
+
+  /// Whether the runs are clipped to the box.
+  final Clip clipBehavior;
+
+  @override
+  Widget build(BuildContext context) {
+    final Widget wrap = Wrap(
+      direction: direction,
+      spacing: spacing,
+      runSpacing: runSpacing,
+      alignment: alignment,
+      children: [
+        for (int index = 0; index < itemCount; index++)
+          itemBuilder(context, index),
+      ],
+    );
+    if (scrolls) {
+      return DraggableScrollConfiguration(
+        child: SingleChildScrollView(
+          primary: false,
+          scrollDirection: direction == Axis.horizontal
+              ? Axis.vertical
+              : Axis.horizontal,
+          padding: padding,
+          physics: physics,
+          keyboardDismissBehavior: keyboardDismissBehavior,
+          clipBehavior: clipBehavior,
+          child: wrap,
+        ),
+      );
+    }
+    final Widget padded = Padding(padding: padding, child: wrap);
+    return clipBehavior == Clip.none
+        ? padded
+        : ClipRect(clipBehavior: clipBehavior, child: padded);
+  }
+}

lib/src/transformers/passive_transformer_manager.dart

@@ -128,7 +128,8 @@ class PassiveNodeTransformerManager extends WidgetNodeTransformerManager {
   /// Returns [node] with the style properties that conditions, bound
   /// variables or formulas, or set value actions give it at runtime: `fill`
   /// (a text's color for text nodes), `stroke`, `opacity`, `width` and
-  /// `height`. Returns [node] itself when
+  /// `height`, and the properties of [StyleBindings] (effects, stroke
+  /// weight, corner radius, font weight, icon). Returns [node] itself when
   /// nothing changes it.
   BaseNode applyStyleOverrides(BuildContext context, BaseNode node) {
     final ScopedValues scopedValues = ScopedValues.of(context);
@@ -191,6 +192,9 @@ class PassiveNodeTransformerManager extends WidgetNodeTransformerManager {
       ).toJson();
     }
 
+    // Effects, stroke weight, corner radius, font weight and icon.
+    StyleBindings.addTo(patch, node, scopedValues: scopedValues);
+
     if (patch.isEmpty) return node;
     final BaseNode? styled = NodeJsonConverter().fromJson({
       ...node.toJson(),

lib/src/transformers/transformers.dart

@@ -14,6 +14,7 @@ export 'utils/node_geometry.dart';
 export 'utils/property_value_delegate.dart';
 export 'utils/scoped_values.dart';
 export 'utils/stroke_painter.dart';
+export 'utils/style_bindings.dart';
 export 'utils/text_utils.dart';
 export 'utils/variable_span.dart';
 export 'utils/viewport_sizing.dart';