chore: stabilize screenshots

scripts/generate-screenshots.sh

@@ -87,6 +87,7 @@ render() {
       def favicon_path(address):
         ($favicon_dir + "/" + (address | split("@") | last | ascii_downcase) + ".png");
       .theme_mode = $theme
+      | .["MotionSettings.enabled"] = false
       | .workspace_layout = $workspace_layout
       | .screenshot_theme_preset = $theme_preset
       | .active_view = $active_view
@@ -188,11 +189,13 @@ render() {
   # screenshot deterministic without replacing editable SVG sources.
   SLINT_SCALE_FACTOR=2 slint-viewer \
     --style "$style" \
+    --size "${width}x${height}" \
     --load-data "$data_file" \
     --screenshot "$temporary_dir/$output_name-warmup.png" \
     "$temporary_ui"
   SLINT_SCALE_FACTOR=2 slint-viewer \
     --style "$style" \
+    --size "${width}x${height}" \
     --load-data "$data_file" \
     --screenshot "$output_dir/$output_name.png" \
     "$temporary_ui"

ui/app.slint

@@ -11,7 +11,7 @@ import "../resources/fonts/google-sans-flex/GoogleSansFlex-VariableFont_GRAD,RON
 
 import { Palette } from "std-widgets.slint";
 import { TypeScale } from "typography.slint";
-export { AppTheme, ThemeUtilities } from "design-system.slint";
+export { AppTheme, MotionSettings, ThemeUtilities } from "design-system.slint";
 import { AppTheme, LayoutMetrics } from "design-system.slint";
 import { Button } from "components/button.slint";
 import { AccountRow, CalendarDay, CalendarEventRow, CalendarSourceRow, CalendarWeekDay, ComposeAttachment, ComposeContact, ComposeEditorTile, ContactSidebarRow, ContactRow, EmailLink, EmailRow, EmailTemplateRow, EmailTile, LocalizedMessage, MailProfileRow, SidebarRow, MailLabelRow, StorageUsageRow, ThreadMessageRow } from "models.slint";

ui/components/workspace-layout.slint

@@ -1,5 +1,5 @@
 import { HorizontalBox } from "std-widgets.slint";
-import { AppTheme, LayoutMetrics } from "../design-system.slint";
+import { AppTheme, LayoutMetrics, MotionSettings } from "../design-system.slint";
 import { TypeScale } from "../typography.slint";
 import { LineEdit, ToolbarIconButton } from "controls.slint";
 
@@ -18,7 +18,8 @@ export component WorkspaceFrame inherits Rectangle {
     in property <length> available-height;
 
     private property <length> base-x: root.compact ? 0px : LayoutMetrics.product-rail-width;
-    private property <float> reveal-progress: 0;
+    private property <float> animated-reveal-progress: 0;
+    private property <float> reveal-progress: MotionSettings.enabled ? root.animated-reveal-progress : 1;
     private property <bool> reveal-pending: true;
 
     x: root.base-x + (1 - root.reveal-progress) * 14px;
@@ -33,15 +34,15 @@ export component WorkspaceFrame inherits Rectangle {
     // provides a native view-transition feel while its data model hydrates.
     Timer {
         interval: 16ms;
-        running: root.reveal-pending;
+        running: MotionSettings.enabled && root.reveal-pending;
         triggered => {
             root.reveal-pending = false;
-            root.reveal-progress = 1;
+            root.animated-reveal-progress = 1;
         }
     }
-    animate x { duration: 240ms; easing: spring(0); }
-    animate height { duration: 220ms; easing: spring(0); }
-    animate opacity { duration: 180ms; easing: ease-out; }
+    animate x { duration: 240ms; easing: spring(0); enabled: MotionSettings.enabled; }
+    animate height { duration: 220ms; easing: spring(0); enabled: MotionSettings.enabled; }
+    animate opacity { duration: 180ms; easing: ease-out; enabled: MotionSettings.enabled; }
 
     @children
 }

ui/components/workspace-list.slint

@@ -1,4 +1,5 @@
 import { LoadingSkeletonBlock } from "loading-skeleton.slint";
+import { MotionSettings } from "../design-system.slint";
 
 // Shared motion contract for retained item lists. Only semantic navigation
 // (a new scope or a completed replacement load) restarts the reveal. Model
@@ -13,14 +14,20 @@ export component WorkspaceListTransition inherits Rectangle {
     in property <string> scope-key: "";
     in property <bool> loading: false;
 
-    private property <float> reveal-progress: 1;
+    private property <float> animated-reveal-progress: 1;
+    private property <float> reveal-progress: MotionSettings.enabled ? root.animated-reveal-progress : 1;
     private property <bool> reveal-pending: false;
 
     clip: true;
 
     function restart() {
-        root.reveal-progress = 0;
-        root.reveal-pending = true;
+        if MotionSettings.enabled {
+            root.animated-reveal-progress = 0;
+            root.reveal-pending = true;
+        } else {
+            root.animated-reveal-progress = 1;
+            root.reveal-pending = false;
+        }
     }
 
     changed scope-key => { root.restart(); }
@@ -28,10 +35,10 @@ export component WorkspaceListTransition inherits Rectangle {
 
     Timer {
         interval: 16ms;
-        running: root.reveal-pending;
+        running: MotionSettings.enabled && root.reveal-pending;
         triggered => {
             root.reveal-pending = false;
-            root.reveal-progress = 1;
+            root.animated-reveal-progress = 1;
         }
     }
 
@@ -45,12 +52,12 @@ export component WorkspaceListTransition inherits Rectangle {
         animate x {
             duration: 220ms;
             easing: spring(0);
-            enabled: root.reveal-progress > 0;
+            enabled: MotionSettings.enabled && root.reveal-progress > 0;
         }
         animate opacity {
             duration: 180ms;
             easing: ease-out;
-            enabled: root.reveal-progress > 0;
+            enabled: MotionSettings.enabled && root.reveal-progress > 0;
         }
 
         @children

ui/design-system.slint

@@ -32,6 +32,13 @@ export global LayoutMetrics {
     out property <length> corner-radius: 8px;
 }
 
+// Runtime motion stays enabled by default. Deterministic renderers such as the
+// README screenshot generator can opt out so they capture the settled state
+// without changing the motion users see in the application.
+export global MotionSettings {
+    in-out property <bool> enabled: true;
+}
+
 // Mail actions and their matching sidebar destinations share one semantic
 // icon palette. These colors stay stable across themes so the same action is
 // recognizable wherever it appears.

ui/views/mail-reading-pane.slint

@@ -10,7 +10,7 @@ import { EmailLinkContextArea } from "../components/email-link-context-area.slin
 import { LoadingSkeletonBlock } from "../components/loading-skeleton.slint";
 import { RenderingInfoDialog } from "../dialogs/rendering-info-dialog.slint";
 import { TypeScale } from "../typography.slint";
-import { AppTheme, LayoutMetrics, MailIconPalette } from "../design-system.slint";
+import { AppTheme, LayoutMetrics, MailIconPalette, MotionSettings } from "../design-system.slint";
 
 component ReaderControl inherits ToolbarIconButton {
     tooltip-above: true;
@@ -459,12 +459,18 @@ export component MailReadingPane inherits Rectangle {
 
     private property <bool> viewport-pending: false;
     private property <int> transition-message-id: EmailReader.message-id;
-    private property <float> content-reveal: 1;
+    private property <float> animated-content-reveal: 1;
+    private property <float> content-reveal: MotionSettings.enabled ? root.animated-content-reveal : 1;
     private property <bool> content-reveal-pending: false;
 
     function restart-content-reveal() {
-        root.content-reveal = 0;
-        root.content-reveal-pending = true;
+        if MotionSettings.enabled {
+            root.animated-content-reveal = 0;
+            root.content-reveal-pending = true;
+        } else {
+            root.animated-content-reveal = 1;
+            root.content-reveal-pending = false;
+        }
     }
 
     changed transition-message-id => { root.restart-content-reveal(); }
@@ -493,10 +499,10 @@ export component MailReadingPane inherits Rectangle {
     } }
     Timer {
         interval: 16ms;
-        running: root.content-reveal-pending;
+        running: MotionSettings.enabled && root.content-reveal-pending;
         triggered => {
             root.content-reveal-pending = false;
-            root.content-reveal = 1;
+            root.animated-content-reveal = 1;
         }
     }
     private property <bool> selecting: false;
@@ -908,7 +914,7 @@ export component MailReadingPane inherits Rectangle {
                         animate opacity {
                             duration: 190ms;
                             easing: ease-out;
-                            enabled: root.content-reveal > 0;
+                            enabled: MotionSettings.enabled && root.content-reveal > 0;
                         }
 
                         Text {