Formulas join lists (concat, list + list); icons can be bound to an icon name

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

Author: claude

lib/src/transformers/node_transformers/passive_icon_transformer.dart

@@ -35,15 +35,25 @@ class PassiveIconWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final ScopedValues scopedValues = ScopedValues.of(context);
     final ColorRGBA? iconColor =
         PropertyValueDelegate.getPropertyValue<ColorRGBA>(
           node,
           'iconColor',
-          scopedValues: ScopedValues.of(context),
+          scopedValues: scopedValues,
         );
-    final MultiSourceIconModel icon = iconColor == null
-        ? node.properties.icon
-        : node.properties.icon.copyWith(color: iconColor);
+    // An `icon` binding names the icon to show, e.g. a list item's.
+    MultiSourceIconModel icon = iconWithName(
+      node.properties.icon,
+      node.variables['icon'] == null
+          ? null
+          : PropertyValueDelegate.getPropertyValue<String>(
+              node,
+              'icon',
+              scopedValues: scopedValues,
+            ),
+    );
+    if (iconColor != null) icon = icon.copyWith(color: iconColor);
     return retrieveIconWidget(icon, node.basicBoxLocal.width) ??
         SizedBox(
           width: node.basicBoxLocal.width,

lib/src/transformers/transformer_functions.dart

@@ -351,6 +351,34 @@ String? getSliderLabel(SliderNode node, double value) {
   return node.properties.label.replaceAll('\${value}', valueString);
 }
 
+/// [base] showing the Material icon named [name] instead, for an icon bound
+/// to data. [name] is a Flutter `Icons` name such as `kitchen` or
+/// `kitchen_outlined`: an `_outlined`, `_rounded` or `_sharp` suffix picks
+/// the style. The icon is drawn from its SVG by name, so no codepoint is
+/// needed. Returns [base] for an empty or malformed name.
+MultiSourceIconModel iconWithName(MultiSourceIconModel base, String? name) {
+  final String key = (name ?? '').trim().toLowerCase();
+  if (!RegExp(r'^[a-z0-9_]+$').hasMatch(key)) return base;
+  MaterialIconStyle style = MaterialIconStyle.filled;
+  String iconName = key;
+  for (final (String suffix, MaterialIconStyle suffixStyle) in const [
+    ('_outlined', MaterialIconStyle.outlined),
+    ('_rounded', MaterialIconStyle.rounded),
+    ('_sharp', MaterialIconStyle.sharp),
+  ]) {
+    if (key.endsWith(suffix)) {
+      style = suffixStyle;
+      iconName = key.substring(0, key.length - suffix.length);
+      break;
+    }
+  }
+  return base.copyWith(
+    type: IconTypeEnum.icon,
+    icon: MaterialIcon(codepoint: 0, name: iconName, style: style),
+    forceIcon: true,
+  );
+}
+
 Widget? retrieveIconWidget(
   MultiSourceIconModel icon, [
   double? size,

lib/src/utils/formula.dart

@@ -290,6 +290,11 @@ class FormulaEvaluator {
     FormulaFunctionDoc('take', 'take(list, count)', 'take(alerts, 3)'),
     FormulaFunctionDoc('skip', 'skip(list, count)', 'skip(alerts, 3)'),
     FormulaFunctionDoc('keys', 'keys(map)', 'keys(snoozed) → [r_black]'),
+    FormulaFunctionDoc(
+      'concat',
+      'concat(list, list or value, ...)',
+      'concat(take(history, 23), [soc]); history + [soc] does the same',
+    ),
     FormulaFunctionDoc(
       'alpha',
       'alpha(color, opacity)',
@@ -907,6 +912,10 @@ final Map<String, _Function> _functions = {
   'alpha': (a) => _alpha(_arg(a, 0), _num(_arg(a, 1))),
   'take': (a) => _values(_arg(a, 0), null).take(_intArg(_arg(a, 1))).toList(),
   'skip': (a) => _values(_arg(a, 0), null).skip(_intArg(_arg(a, 1))).toList(),
+  'concat': (a) => [
+    for (final Object? item in a)
+      if (item is Iterable) ...item else item,
+  ],
   'keys': (a) => switch (_arg(a, 0)) {
     final Map m => [for (final key in m.keys) '$key'],
     _ => <Object?>[],
@@ -1099,6 +1108,8 @@ class _Binary extends _Node {
     final Object? b = right.eval(resolve);
     switch (op) {
       case '+':
+        // Lists join, and a list plus a value appends it.
+        if (a is Iterable) return [...a, if (b is Iterable) ...b else b];
         final num? na = a is String ? null : _toNum(a);
         final num? nb = b is String ? null : _toNum(b);
         if (na != null && nb != null) return _tidy(na + nb);

test/formula_test.dart

@@ -72,6 +72,11 @@ void main() {
       expect(eval("alpha('red', 1)"), null);
       expect(eval('take([1, 2, 3, 4], 3)'), [1, 2, 3]);
       expect(eval('take([1], 3)'), [1]);
+      expect(eval('concat([1, 2], [3], 4)'), [1, 2, 3, 4]);
+      expect(eval('concat(take([1, 2, 3], 2), [9])'), [1, 2, 9]);
+      expect(eval('[1, 2] + [3]'), [1, 2, 3]);
+      expect(eval('[1, 2] + 3'), [1, 2, 3]);
+      expect(eval("'a' + 'b'"), 'ab');
       expect(eval('skip([1, 2, 3], 1)'), [2, 3]);
       expect(eval("keys(object('a', 1, 'b', 2))"), ['a', 'b']);
       expect(eval('keys(qty)'), isEmpty);

test/icon_binding_test.dart

@@ -0,0 +1,30 @@
+import 'package:codelessly_api/codelessly_api.dart';
+import 'package:codelessly_sdk/codelessly_sdk.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  const MultiSourceIconModel base = MultiSourceIconModel.icon(
+    icon: MaterialIcon(codepoint: 0xe5e0, name: 'speed', style: MaterialIconStyle.filled),
+  );
+
+  test('a bound name picks the icon and its style', () {
+    final MaterialIcon icon =
+        iconWithName(base, 'kitchen_outlined').icon! as MaterialIcon;
+    expect(icon.name, 'kitchen');
+    expect(icon.style, MaterialIconStyle.outlined);
+    expect(icon.toSvgUrl(),
+        'https://fonts.gstatic.com/s/i/materialiconsoutlined/kitchen/v1/24px.svg');
+
+    final MaterialIcon filled = iconWithName(base, 'Air').icon! as MaterialIcon;
+    expect(filled.name, 'air');
+    expect(filled.style, MaterialIconStyle.filled);
+    expect((iconWithName(base, 'power_rounded').icon! as MaterialIcon).style,
+        MaterialIconStyle.rounded);
+  });
+
+  test('an empty or malformed name keeps the designed icon', () {
+    expect(iconWithName(base, null), same(base));
+    expect(iconWithName(base, '  '), same(base));
+    expect(iconWithName(base, r'${item.icon}'), same(base));
+  });
+}