ShowDialogAction: bottom sheet and side sheet presentations, dialog alignment and insets

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

Author: claude

lib/src/api/models/action/show_dialog_action.dart

@@ -6,7 +6,24 @@ import '../models.dart';
 
 part 'show_dialog_action.g.dart';
 
-/// An action that navigates to a new page.
+/// Where a [ShowDialogAction] puts its canvas.
+enum DialogPresentation {
+  /// A dialog at the canvas's design size: centered, or placed by
+  /// [ShowDialogAction.alignment] and [ShowDialogAction.insets].
+  dialog,
+
+  /// A modal sheet across the bottom of the screen, as wide as the screen and
+  /// as tall as the canvas (at most 88% of the screen). The canvas draws the
+  /// sheet's surface, such as rounded top corners and a grab handle.
+  bottomSheet,
+
+  /// A modal sheet along the right edge, as wide as the canvas and as tall
+  /// as the screen less [ShowDialogAction.insets].
+  sideSheet,
+}
+
+/// An action that shows a canvas over the current one: as a dialog, a bottom
+/// sheet or a side sheet.
 @JsonSerializable()
 class ShowDialogAction extends ActionModel with Equatable, SerializableMixin {
   /// Destination canvas node's ID.
@@ -24,13 +41,26 @@ class ShowDialogAction extends ActionModel with Equatable, SerializableMixin {
   /// Whether to show a close button on the dialog.
   final bool showCloseButton;
 
+  /// How the canvas is shown.
+  final DialogPresentation presentation;
+
+  /// Where a dialog sits on the screen, e.g. bottom left for a popover next
+  /// to a sidebar. Null centers it. Ignored by sheets.
+  final AlignmentModel? alignment;
+
+  /// Space kept between the canvas and the screen edges it is aligned to.
+  final EdgeInsetsModel insets;
+
   /// Creates a new [ShowDialogAction].
   ShowDialogAction({
     required this.destinationId,
     Map<String, String>? params,
     this.barrierColor = ColorRGBA.black54,
     this.barrierDismissible = true,
     this.showCloseButton = false,
+    this.presentation = DialogPresentation.dialog,
+    this.alignment,
+    this.insets = EdgeInsetsModel.zero,
     super.nonBlocking,
     super.enabled,
   }) : params = {...params ?? {}},
@@ -43,6 +73,9 @@ class ShowDialogAction extends ActionModel with Equatable, SerializableMixin {
     barrierDismissible,
     barrierColor,
     showCloseButton,
+    presentation,
+    alignment,
+    insets,
   ];
 
   /// Duplicates this [ShowDialogAction] with given data overrides.
@@ -52,12 +85,18 @@ class ShowDialogAction extends ActionModel with Equatable, SerializableMixin {
     bool? barrierDismissible,
     ColorRGBA? barrierColor,
     bool? showCloseButton,
+    DialogPresentation? presentation,
+    AlignmentModel? alignment,
+    EdgeInsetsModel? insets,
   }) => ShowDialogAction(
     destinationId: destinationId ?? this.destinationId,
     params: {...this.params, ...params ?? {}},
     barrierDismissible: barrierDismissible ?? this.barrierDismissible,
     barrierColor: barrierColor ?? this.barrierColor,
     showCloseButton: showCloseButton ?? this.showCloseButton,
+    presentation: presentation ?? this.presentation,
+    alignment: alignment ?? this.alignment,
+    insets: insets ?? this.insets,
   );
 
   /// Creates a new [ShowDialogAction] instance from a JSON data.

lib/src/api/models/action/show_dialog_action.g.dart

@@ -0,0 +1,63 @@
+import 'package:codelessly_api/codelessly_api.dart';
+import 'package:test/test.dart';
+
+void main() {
+  test('a plain dialog keeps its old JSON', () {
+    final ActionModel action = ActionModel.fromJson({
+      'type': 'showDialog',
+      'destinationId': 'c1',
+    });
+    expect(action, isA<ShowDialogAction>());
+    final ShowDialogAction dialog = action as ShowDialogAction;
+    expect(dialog.presentation, DialogPresentation.dialog);
+    expect(dialog.alignment, isNull);
+    expect(dialog.insets, EdgeInsetsModel.zero);
+    expect(dialog.toJson(), {
+      'type': 'showDialog',
+      'destinationId': 'c1',
+      'params': <String, dynamic>{},
+    });
+  });
+
+  test('sheets and placed dialogs round-trip', () {
+    for (final Map<String, dynamic> json in <Map<String, dynamic>>[
+      {
+        'type': 'showDialog',
+        'destinationId': 'session',
+        'params': {'id': r'${item.id}'},
+        'presentation': 'bottomSheet',
+      },
+      {
+        'type': 'showDialog',
+        'destinationId': 'session',
+        'params': <String, dynamic>{},
+        'presentation': 'sideSheet',
+        'insets': 10,
+      },
+      {
+        'type': 'showDialog',
+        'destinationId': 'settings',
+        'params': <String, dynamic>{},
+        'alignment': {
+          'data': [-1, 1],
+        },
+        'insets': [96, 0, 0, 16],
+      },
+    ]) {
+      final ShowDialogAction action =
+          ActionModel.fromJson(json) as ShowDialogAction;
+      expect(ActionModel.fromJson(action.toJson()), action, reason: '$json');
+    }
+    final ShowDialogAction popover = ActionModel.fromJson({
+      'type': 'showDialog',
+      'destinationId': 'settings',
+      'alignment': {
+        'data': [-1, 1],
+      },
+      'insets': [96, 0, 0, 16],
+    }) as ShowDialogAction;
+    expect(popover.alignment, AlignmentModel.bottomLeft);
+    expect(popover.insets.l, 96);
+    expect(popover.insets.b, 16);
+  });
+}