Present show-dialog canvases as bottom sheets and side sheets

showLayoutDialog pushes a LayoutPresentationRoute that presents the
canvas per ShowDialogAction.presentation:
- dialog: centered at its design size, now scaling and fading in
  (0.96 to 1, 320 ms easeOutCubic).
- bottomSheet: full width at the bottom, top corners radius 10, a 40x4
  grab handle 8 px from the top, as tall as the canvas (its content when
  it shrink-wraps) up to maxHeightFactor of the screen; slides up.
- sideSheet: full height on the right, sheetWidth (or the canvas's
  design width) wide, with a shadow; slides in from the right.
The barrier color, barrier dismissal, route params and Navigate back
results work as before. A new CanvasSizing.fillWidth sizes the bottom
sheet's canvas. What a show-dialog's canvas passes back on Navigate back
becomes the chain's result for the actions after it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: claude

lib/src/functions/functions_repository.dart

@@ -12,7 +12,7 @@ import 'package:url_launcher/url_launcher.dart';
 
 import '../../codelessly_sdk.dart';
 import '../logging/stat_tracker.dart';
-import '../ui/codelessly_dialog_widget.dart';
+import '../ui/layout_presentation_route.dart';
 import 'action_chain.dart';
 import 'app_auth.dart';
 import 'cloud_files.dart';
@@ -560,18 +560,27 @@ class FunctionsRepository {
     }
   }
 
+  /// Shows [action]'s canvas. What its "Navigate back" passes back, e.g. the
+  /// values of a form in a sheet, is the `${result}` of the actions after it.
   static Future<void> showDialogAction(
     BuildContext context,
     ShowDialogAction action,
   ) async {
-    await showLayoutDialog(
+    final Object? result = await showLayoutDialog(
       context,
       canvasId: action.destinationId,
       params: action.params,
       barrierDismissible: action.barrierDismissible,
       barrierColor: action.barrierColor?.toFlutterColor(),
       showCloseButton: action.showCloseButton,
+      presentation: action.presentation,
+      sheetWidth: action.sheetWidth,
+      maxHeightFactor: action.maxHeightFactor,
+      showDragHandle: action.showDragHandle,
     );
+    if (result case final Map values when values.isNotEmpty) {
+      ActionChain.setResult(values);
+    }
   }
 
   /// The id of the published layout that holds the canvas [canvasId], if any.
@@ -580,16 +589,21 @@ class FunctionsRepository {
           .firstWhereOrNull((layout) => layout.canvasIds.contains(canvasId))
           ?.id;
 
-  /// Shows the canvas [canvasId] as a dialog and completes with what it was
-  /// closed with: the params of the "Navigate back" action that closed it, or
-  /// null when it was dismissed.
+  /// Shows the canvas [canvasId] as a dialog, a bottom sheet or a side sheet
+  /// (see [presentation]) and completes with what it was closed with: the
+  /// params of the "Navigate back" action that closed it, or null when it was
+  /// dismissed.
   static Future<Object?> showLayoutDialog(
     BuildContext context, {
     required String canvasId,
     Map<String, dynamic> params = const {},
     bool barrierDismissible = true,
     Color? barrierColor,
     bool showCloseButton = false,
+    DialogPresentation presentation = DialogPresentation.dialog,
+    double? sheetWidth,
+    double maxHeightFactor = 0.92,
+    bool showDragHandle = true,
   }) async {
     final ScopedValues scopedValues = ActionChain.scopedValuesOf(context);
     final parsedParams = substituteVariablesInMap(params, scopedValues);
@@ -632,18 +646,29 @@ class FunctionsRepository {
     // A chain triggered in the dialog can finish on this layout after the
     // dialog closes (e.g. Navigate back, then a toast).
     final List<BuildContext> openerHosts = ActionChainOpener.hostsFor(context);
-    final Object? result = await showDialog<Object?>(
-      context: context,
-      useRootNavigator: false,
-      barrierDismissible: barrierDismissible,
-      barrierColor: barrierColor,
-      routeSettings: RouteSettings(arguments: parsedParams),
-      builder: (context) => ActionChainOpener(
-        openerHosts: openerHosts,
-        child: CodelesslyDialogWidget(
-          showCloseButton: showCloseButton,
-          builder: (context) =>
-              CodelesslyWidget(codelessly: codelessly, layoutID: layoutId),
+    final BaseNode? canvas = codelessly
+        .dataManager
+        .publishModel
+        ?.layouts[layoutId]
+        ?.canvases[canvasId]?[canvasId];
+    final Object? result = await Navigator.of(context).push<Object?>(
+      LayoutPresentationRoute<Object?>(
+        context: context,
+        presentation: presentation,
+        barrierDismissible: barrierDismissible,
+        barrierColor:
+            barrierColor ??
+            Theme.of(context).dialogTheme.barrierColor ??
+            Colors.black54,
+        showCloseButton: showCloseButton,
+        sheetWidth: sheetWidth,
+        designWidth: canvas?.basicBoxLocal.width,
+        maxHeightFactor: maxHeightFactor,
+        showDragHandle: showDragHandle,
+        settings: RouteSettings(arguments: parsedParams),
+        builder: (context) => ActionChainOpener(
+          openerHosts: openerHosts,
+          child: CodelesslyWidget(codelessly: codelessly, layoutID: layoutId),
         ),
       ),
     );

lib/src/transformers/node_transformers/passive_canvas_transformer.dart

@@ -440,6 +440,11 @@ enum CanvasSizing {
   /// given. Used where the host only centers the layout and lets it choose
   /// its size, such as a dialog.
   design,
+
+  /// The canvas fills the width it is given and keeps its design height (or
+  /// its content's), within the height it is given. Used by a bottom sheet,
+  /// which spans the screen and is as tall as its canvas.
+  fillWidth,
 }
 
 /// Sets the [CanvasSizing] of the canvases below it. Without one, canvases
@@ -514,8 +519,11 @@ class CanvasViewport extends StatelessWidget {
         node.verticalFit == SizeFit.shrinkWrap &&
         node.scaleMode == ScaleMode.responsive &&
         !node.isAScaffold;
-    if (sizing == CanvasSizing.design) {
-      final double width = constraints.constrainWidth(node.basicBoxLocal.width);
+    if (sizing != CanvasSizing.fill) {
+      final double width =
+          sizing == CanvasSizing.fillWidth && constraints.hasBoundedWidth
+          ? constraints.maxWidth
+          : constraints.constrainWidth(node.basicBoxLocal.width);
       if (contentHeight) return (width: width, height: null);
       final double height = node.scaleMode == ScaleMode.autoScale
           ? autoScaleHeight(node, width)