initial experiment

Author: andrewkolos

examples/simple_chat/lib/main.dart

@@ -145,7 +145,24 @@ ${GenUiPromptFragments.basicChat}''';
     };
 
     return Scaffold(
-      appBar: AppBar(title: Text(title)),
+      appBar: AppBar(
+        title: Text(title),
+        actions: [
+          Row(
+            children: [
+              const Text('Padding'),
+              Switch(
+                value: DebugFlags.enableLeafPadding,
+                onChanged: (value) {
+                  setState(() {
+                    DebugFlags.enableLeafPadding = value;
+                  });
+                },
+              ),
+            ],
+          ),
+        ],
+      ),
       body: SafeArea(
         child: Column(
           children: [

packages/genui/lib/genui.dart

@@ -10,6 +10,7 @@
 library;
 
 export 'src/catalog/core_catalog.dart';
+export 'src/catalog/core_widgets/widget_helpers.dart';
 export 'src/content_generator.dart';
 export 'src/conversation/gen_ui_conversation.dart';
 export 'src/core/genui_configuration.dart';

packages/genui/lib/src/catalog/core_widgets/button.dart

@@ -7,6 +7,7 @@
 import 'package:flutter/material.dart';
 import 'package:json_schema_builder/json_schema_builder.dart';
 
+import 'widget_helpers.dart';
 import '../../core/widget_utilities.dart';
 import '../../model/a2ui_schemas.dart';
 import '../../model/catalog_item.dart';
@@ -87,6 +88,7 @@ final button = CatalogItem(
         foregroundColor: primary
             ? colorScheme.onPrimary
             : colorScheme.onSurface,
+        padding: DebugFlags.enableLeafPadding ? EdgeInsets.zero : null,
       ).copyWith(textStyle: WidgetStatePropertyAll(textStyle)),
       onPressed: () {
         final JsonMap resolvedContext = resolveContext(

packages/genui/lib/src/catalog/core_widgets/card.dart

@@ -5,6 +5,7 @@
 import 'package:flutter/material.dart';
 import 'package:json_schema_builder/json_schema_builder.dart';
 
+import 'widget_helpers.dart';
 import '../../model/a2ui_schemas.dart';
 import '../../model/catalog_item.dart';
 import '../../primitives/simple_items.dart';
@@ -37,10 +38,12 @@ final card = CatalogItem(
     final cardData = _CardData.fromMap(itemContext.data as JsonMap);
     return Card(
       color: Theme.of(itemContext.buildContext).colorScheme.surface,
-      child: Padding(
-        padding: const EdgeInsets.all(8.0),
-        child: itemContext.buildChild(cardData.child),
-      ),
+      child: DebugFlags.enableLeafPadding
+          ? itemContext.buildChild(cardData.child)
+          : Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: itemContext.buildChild(cardData.child),
+            ),
     );
   },
   exampleData: [

packages/genui/lib/src/catalog/core_widgets/image.dart

@@ -5,6 +5,7 @@
 import 'package:flutter/material.dart';
 import 'package:json_schema_builder/json_schema_builder.dart';
 
+import 'widget_helpers.dart';
 import '../../core/widget_utilities.dart';
 import '../../model/a2ui_schemas.dart';
 import '../../model/catalog_item.dart';
@@ -127,6 +128,13 @@ CatalogItem _imageCatalogItem({
             _ => 150.0,
           };
 
+          if (DebugFlags.enableLeafPadding) {
+            return Padding(
+              padding: kDefaultLeafComponentPadding,
+              child: SizedBox(width: size, height: size, child: child),
+            );
+          }
+
           return SizedBox(width: size, height: size, child: child);
         },
       );

packages/genui/lib/src/catalog/core_widgets/text.dart

@@ -6,6 +6,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_markdown_plus/flutter_markdown_plus.dart';
 import 'package:json_schema_builder/json_schema_builder.dart';
 
+import 'widget_helpers.dart';
 import '../../core/widget_utilities.dart';
 import '../../model/a2ui_schemas.dart';
 import '../../model/catalog_item.dart';
@@ -90,6 +91,26 @@ final text = CatalogItem(
           _ => 0.0,
         };
 
+        if (DebugFlags.enableLeafPadding) {
+          final EdgeInsets padding = switch (usageHint) {
+            'h1' || 'h2' || 'h3' => kDefaultLeafComponentPadding.copyWith(
+              top: 24.0,
+              bottom: 12.0,
+            ),
+            _ => kDefaultLeafComponentPadding,
+          };
+
+          return Padding(
+            padding: padding,
+            child: MarkdownBody(
+              data: currentValue ?? '',
+              styleSheet: MarkdownStyleSheet.fromTheme(
+                Theme.of(context),
+              ).copyWith(p: baseStyle),
+            ),
+          );
+        }
+
         return Padding(
           padding: EdgeInsets.symmetric(vertical: verticalPadding),
           child: MarkdownBody(

packages/genui/lib/src/catalog/core_widgets/text_field.dart

@@ -5,6 +5,7 @@
 import 'package:flutter/material.dart';
 import 'package:json_schema_builder/json_schema_builder.dart';
 
+import 'widget_helpers.dart';
 import '../../core/widget_utilities.dart';
 import '../../model/a2ui_schemas.dart';
 import '../../model/catalog_item.dart';
@@ -180,7 +181,7 @@ final textField = CatalogItem(
         return ValueListenableBuilder(
           valueListenable: labelNotifier,
           builder: (context, label, child) {
-            return _TextField(
+            final textFieldWidget = _TextField(
               initialValue: currentValue ?? '',
               label: label,
               textFieldType: textFieldData.textFieldType,
@@ -211,6 +212,14 @@ final textField = CatalogItem(
                 );
               },
             );
+
+            if (DebugFlags.enableLeafPadding) {
+              return Padding(
+                padding: kDefaultLeafComponentPadding,
+                child: textFieldWidget,
+              );
+            }
+            return textFieldWidget;
           },
         );
       },

packages/genui/lib/src/catalog/core_widgets/widget_helpers.dart

@@ -10,6 +10,15 @@ import '../../model/ui_models.dart';
 import '../../primitives/logging.dart';
 import '../../primitives/simple_items.dart';
 
+const EdgeInsets kDefaultLeafComponentPadding = EdgeInsets.symmetric(
+  horizontal: 16.0,
+  vertical: 12.0,
+);
+
+class DebugFlags {
+  static bool enableLeafPadding = true;
+}
+
 /// Builder function for creating a widget from a template and a list of data.
 ///
 /// This is used by [ComponentChildrenBuilder] when children are defined by a