Add support for CSS conic-gradient 'from <angle>' syntax (slint-ui#9830)

* Add support for CSS conic-gradient 'from <angle>' syntax

Implement rotation support for conic gradients by adding the 'from <angle>'
syntax, which rotates the entire gradient by the specified angle.

- Add `from_angle` field to ConicGradient expression
- Parse 'from <angle>' syntax in compiler (defaults to 0deg when omitted)
- Normalize angles to 0-1 range (0.0 = 0°, 1.0 = 360°)
- Add `ConicGradientBrush::rotated_stops()` method that:
  * Applies rotation by adding from_angle to each stop position
  * Adds boundary stops at 0.0 and 1.0 with interpolated colors
  * Handles stops outside [0, 1] range for boundary interpolation
- Update all renderers (Skia, FemtoVG, Qt, Software) to use rotated_stops()

The rotation is applied at render time by the rotated_stops() method,
which ensures all renderers consistently handle the gradient rotation.

* Add screenshot to rotated conic gradient docs example

Wraps the rotated conic gradient example in CodeSnippetMD to automatically
generate and display a visual screenshot of the gradient rotation effect.
This makes it easier for users to understand how the 'from' parameter rotates
the gradient.

* Make ConicGradientBrush fields private

The from_angle and stops fields don't need to be pub since:
- Rust code in the same module can access them without pub
- C++ FFI access works through cbindgen-generated struct (C++ struct members are public by default)

* Optimize ConicGradientBrush::rotated_stops to avoid allocations

- Changed return type from Vec to SharedVector
- When from_angle is zero, returns a clone of internal SharedVector
  (only increments reference count instead of allocating new Vec)
- Removed break from duplicate position separation loop to handle
  all duplicate pairs, not just the first one
- Updated documentation to match actual implementation

* Remove automatic sorting in ConicGradientBrush::new() to match CSS spec

- CSS conic-gradient does not automatically sort color stops
- Stops are processed in the order specified by the user
- Changed boundary stop interpolation logic to use max_by/min_by
  instead of relying on sorted order
- This allows CSS-style hard transitions when stops are out of order

* Move conic gradient rotation processing to construction time

Major changes:
- ConicGradientBrush::new() now applies rotation and boundary stop
  processing immediately, instead of deferring to rotated_stops()
- Removed rotated_stops() method - backends now use stops() directly
- Changed to LinearGradientBrush pattern: store angle in first dummy stop
- Added angle() method to retrieve the stored angle
- Maintained #[repr(transparent)] by removing from_angle field
- All backends updated: rotated_stops() -> stops()
  - Qt backend
  - Skia renderer
  - femtovg renderer
  - Software renderer

C++ API changes:
- Added FFI function slint_conic_gradient_new() for C++ to call Rust's new()
- Updated make_conic_gradient() to call FFI function instead of manually
  constructing SharedVector
- Ensures C++-created gradients get full rotation processing

Benefits:
- Eliminates per-frame rotation calculations
- Reduces memory usage (no from_angle field)
- Consistent with LinearGradientBrush design
- C++ and Rust APIs now produce identical results

* Change ConicGradientBrush::new() from_angle parameter to use degrees

- Changed from_angle parameter from normalized form (0.0-1.0) to degrees
- Matches LinearGradientBrush API convention (angle in degrees)
- Updated internal conversion: from_angle / 360.0 for normalization
- Stores angle as-is in degrees in the first dummy stop
- FFI function slint_conic_gradient_new() passes degrees directly

Example usage:
  ConicGradientBrush::new(90.0, stops)  // 90 degrees
  LinearGradientBrush::new(90.0, stops) // 90 degrees (consistent)

* Fix ConicGradient color transformation methods to preserve angle

Changed brighter(), darker(), transparentize(), and with_alpha() methods
to clone and modify the gradient in-place instead of calling new().

- Clones the existing gradient (preserves angle and rotation)
- Modifies only color stops (skips first stop which contains angle)
- Avoids re-running expensive rotation processing
- Maintains the original angle information

Before: ConicGradientBrush::new(0.0, ...) // Lost angle information
After:  Clone + modify colors in-place     // Preserves angle

* Use premultiplied alpha interpolation for conic gradient colors

- Changed interpolate_color() to use premultiplied RGBA interpolation
- Updated signature to match Color::mix convention (&Color, factor)
- Added documentation explaining why we can't use Color::mix() here
  (Sass algorithm vs CSS gradient color interpolation)
- Reference: https://www.w3.org/TR/css-images-4/#color-interpolation

This ensures correct visual interpolation of semi-transparent colors
in gradient boundaries, following CSS gradient specification.

* Run rustfmt on conic gradient code

* Fix ConicGradientBrush edge cases and add comprehensive tests

- Handle stops that are all below 0.0 or all above 1.0
- Add default transparent gradient when no valid stops remain
- Add 7 unit tests covering basic functionality and edge cases

* Apply clippy suggestion: use retain() instead of filter().collect()

* Fix radial-gradient parsing to allow empty gradients

Allow @radial-gradient(circle) without color stops, fixing syntax test
regression from commit 820ae2b.

The previous logic required a comma after 'circle', but it should only
error if there's something that is NOT a comma.

* Fix conic-gradient syntax test error markers

Update error markers to match actual compiler error positions.
The 'from 2' case produces two errors:
- One at the @conic-gradient expression level
- One at the literal '2' position

Auto-updated using SLINT_SYNTAX_TEST_UPDATE=1.

* Refactor ConicGradientBrush epsilon adjustment and update tests

- Move epsilon adjustment for first stop into rotation block
  (only needed when rotation is applied)
- Update property_view test to reflect boundary stops added by
  ConicGradientBrush::new()

* Update conic-gradient screenshot reference image

Update the reference screenshot to match the current rendering output.
The small pixel differences (1% different pixels, max color diff 3.46)
are due to minor rounding differences in the conic gradient implementation.

* Fix ConicGradientBrush C++ FFI to avoid C-linkage return type error

Refactored ConicGradientBrush construction to match LinearGradientBrush
pattern, fixing macOS Clang error about returning C++ types from extern "C"
functions.

Changes:
- Rust: Split ConicGradientBrush::new into simple construction + separate
  normalize_stops() and apply_rotation() methods
- Rust: Added FFI functions slint_conic_gradient_normalize_stops() and
  slint_conic_gradient_apply_rotation() that take pointers (no return value)
- C++: Construct SharedVector directly in make_conic_gradient(), then call
  Rust functions via pointer (matching LinearGradientBrush pattern)
- Optimized both methods to only copy when changes are needed

This resolves the macOS Clang error:
"'slint_conic_gradient_new' has C-linkage specified, but returns incomplete
type 'ConicGradientBrush' which could be incompatible with C"

The new approach maintains ABI compatibility while keeping complex gradient
processing logic in Rust.

* Fix C++ header generation to avoid GradientStop redefinition error

Resolves the macOS CI compilation error where GradientStop and
ConicGradientBrush were being defined in multiple headers
(slint_color_internal.h, slint_image_internal.h, and slint_brush_internal.h).

Changes:
- cbindgen.rs: Add ConicGradientBrush and FFI functions to slint_brush_internal.h include list
- cbindgen.rs: Add GradientStop, ConicGradientBrush, and FFI functions to exclude list for other headers
- slint_color.h: Add forward declaration for ConicGradientBrush
- slint_color.h: Add friend declaration for ConicGradientBrush to allow access to Color::inner

Root cause: After adding extern "C" functions in graphics/brush.rs,
cbindgen automatically detects and tries to include them in all headers
that use graphics/brush.rs as a source. The exclude list + filter logic
ensures these types only appear in slint_brush_internal.h.

This fixes the C++ compilation errors:
- "redefinition of 'GradientStop'"
- "ConicGradientBrush does not name a type"
- "Color::inner is private within this context"

* Prepare ConicGradientBrush FFI for Rust 2024 edition

Update FFI functions to use the new `#[unsafe(no_mangle)]` attribute
syntax and safe function signatures in preparation for Rust 2024 edition.

- Add `#![allow(unsafe_code)]` to graphics module for `#[unsafe(no_mangle)]`
- Add `#[cfg(feature = "ffi")]` to conditionally compile FFI functions
- Change from raw pointers to safe references (&mut)
- Remove manual null checks and unsafe blocks

Author: task-jp

api/cpp/cbindgen.rs

@@ -518,7 +518,8 @@ fn gen_corelib(
             "#include \"slint_sharedvector.h\"\n#include \"slint_point.h\"",
         ),
         (
-            vec!["Brush", "LinearGradient", "GradientStop", "RadialGradient"],
+            vec!["Brush", "LinearGradient", "GradientStop", "RadialGradient", "ConicGradientBrush",
+                 "slint_conic_gradient_normalize_stops", "slint_conic_gradient_apply_rotation"],
             "slint_brush_internal.h",
             "",
         ),
@@ -578,6 +579,10 @@ fn gen_corelib(
             "slint_windowrc_is_minimized",
             "slint_windowrc_is_maximized",
             "slint_windowrc_take_snapshot",
+            "GradientStop",
+            "ConicGradientBrush",
+            "slint_conic_gradient_normalize_stops",
+            "slint_conic_gradient_apply_rotation",
         ]
         .into_iter()
         .chain(config.export.exclude.iter().map(|s| s.as_str()))

api/cpp/include/slint_brush.h

@@ -105,18 +105,22 @@ class ConicGradientBrush
 public:
     /// Constructs an empty conic gradient with no color stops.
     ConicGradientBrush() = default;
-    /// Constructs a new conic gradient. The color stops will be
-    /// constructed from the stops array pointed to be \a firstStop, with the length \a stopCount.
-    ConicGradientBrush(const GradientStop *firstStop, int stopCount)
-        : inner(make_conic_gradient(firstStop, stopCount))
+    /// Constructs a new conic gradient with the specified starting \a angle. The color stops will
+    /// be constructed from the stops array pointed to be \a firstStop, with the length \a
+    /// stopCount.
+    ConicGradientBrush(float angle, const GradientStop *firstStop, int stopCount)
+        : inner(make_conic_gradient(angle, firstStop, stopCount))
     {
     }
 
+    /// Returns the conic gradient's starting angle (rotation) in degrees.
+    float angle() const { return inner[0].position; }
+
     /// Returns the number of gradient stops.
-    int stopCount() const { return int(inner.size()); }
+    int stopCount() const { return int(inner.size()) - 1; }
 
     /// Returns a pointer to the first gradient stop; undefined if the gradient has not stops.
-    const GradientStop *stopsBegin() const { return inner.begin(); }
+    const GradientStop *stopsBegin() const { return inner.begin() + 1; }
     /// Returns a pointer past the last gradient stop. The returned pointer cannot be dereferenced,
     /// it can only be used for comparison.
     const GradientStop *stopsEnd() const { return inner.end(); }
@@ -127,11 +131,22 @@ class ConicGradientBrush
     friend class slint::Brush;
 
     static SharedVector<private_api::GradientStop>
-    make_conic_gradient(const GradientStop *firstStop, int stopCount)
+    make_conic_gradient(float angle, const GradientStop *firstStop, int stopCount)
     {
         SharedVector<private_api::GradientStop> gradient;
+        // The gradient's first stop is a fake stop to store the angle (same pattern as
+        // LinearGradient)
+        gradient.push_back({ Color::from_argb_encoded(0).inner, angle });
         for (int i = 0; i < stopCount; ++i, ++firstStop)
             gradient.push_back(*firstStop);
+
+        // Normalize stops to [0, 1] range with proper boundary stops
+        cbindgen_private::types::slint_conic_gradient_normalize_stops(&gradient);
+
+        // Apply rotation if angle is non-zero
+        if (angle != 0.0f) {
+            cbindgen_private::types::slint_conic_gradient_apply_rotation(&gradient, angle);
+        }
         return gradient;
     }
 };
@@ -223,8 +238,8 @@ Color Brush::color() const
         }
         break;
     case Tag::ConicGradient:
-        if (data.conic_gradient._0.size() > 0) {
-            result.inner = data.conic_gradient._0[0].color;
+        if (data.conic_gradient._0.size() > 1) {
+            result.inner = data.conic_gradient._0[1].color;
         }
         break;
     }
@@ -252,7 +267,7 @@ inline Brush Brush::brighter(float factor) const
         }
         break;
     case Tag::ConicGradient:
-        for (std::size_t i = 0; i < data.conic_gradient._0.size(); ++i) {
+        for (std::size_t i = 1; i < data.conic_gradient._0.size(); ++i) {
             cbindgen_private::types::slint_color_brighter(&data.conic_gradient._0[i].color, factor,
                                                           &result.data.conic_gradient._0[i].color);
         }
@@ -282,7 +297,7 @@ inline Brush Brush::darker(float factor) const
         }
         break;
     case Tag::ConicGradient:
-        for (std::size_t i = 0; i < data.conic_gradient._0.size(); ++i) {
+        for (std::size_t i = 1; i < data.conic_gradient._0.size(); ++i) {
             cbindgen_private::types::slint_color_darker(&data.conic_gradient._0[i].color, factor,
                                                         &result.data.conic_gradient._0[i].color);
         }
@@ -314,7 +329,7 @@ inline Brush Brush::transparentize(float factor) const
         }
         break;
     case Tag::ConicGradient:
-        for (std::size_t i = 0; i < data.conic_gradient._0.size(); ++i) {
+        for (std::size_t i = 1; i < data.conic_gradient._0.size(); ++i) {
             cbindgen_private::types::slint_color_transparentize(
                     &data.conic_gradient._0[i].color, factor,
                     &result.data.conic_gradient._0[i].color);
@@ -347,7 +362,7 @@ inline Brush Brush::with_alpha(float alpha) const
         }
         break;
     case Tag::ConicGradient:
-        for (std::size_t i = 0; i < data.conic_gradient._0.size(); ++i) {
+        for (std::size_t i = 1; i < data.conic_gradient._0.size(); ++i) {
             cbindgen_private::types::slint_color_with_alpha(
                     &data.conic_gradient._0[i].color, alpha,
                     &result.data.conic_gradient._0[i].color);

api/cpp/include/slint_color.h

@@ -9,6 +9,7 @@ namespace slint {
 
 namespace private_api {
 class LinearGradientBrush;
+class ConicGradientBrush;
 }
 
 class Color;
@@ -214,6 +215,7 @@ class Color
 private:
     cbindgen_private::types::Color inner;
     friend class private_api::LinearGradientBrush;
+    friend class private_api::ConicGradientBrush;
     friend class Brush;
 };
 

docs/astro/src/content/docs/reference/colors-and-brushes.mdx

@@ -167,12 +167,16 @@ export component Example inherits Window {
 Conic gradients are gradients where the color transitions rotate around a center point (like the angle on a color wheel).
 To describe a conic gradient, use the `@conic-gradient` macro with the following signature:
 
-### @conic-gradient(color angle, color angle, ...)
+### @conic-gradient([from angle,] color angle, color angle, ...)
 
 The conic gradient is described by a series of color stops, each consisting of a color and an angle.
 The angle specifies where the color is placed along the circular sweep (0deg to 360deg).
 Colors are interpolated between the stops along the circular path.
 
+The optional `from` parameter specifies the starting angle of the gradient rotation.
+If omitted, the gradient starts at 0deg (pointing upward). For example, `from 90deg` rotates
+the entire gradient 90 degrees clockwise.
+
 Example:
 
 <CodeSnippetMD imagePath="/src/assets/generated/gradients-conic.png" scale="3" imageWidth="200" imageHeight="200" imageAlt='Conic Gradient Example'>
@@ -189,6 +193,22 @@ export component Example inherits Window {
 
 This creates a color wheel effect with red at the top (0deg/360deg), green at 120 degrees, and blue at 240 degrees.
 
+You can also rotate the gradient using the `from` parameter:
+
+<CodeSnippetMD imagePath="/src/assets/generated/gradients-conic-rotated.png" scale="3" imageWidth="200" imageHeight="200" imageAlt='Rotated Conic Gradient Example'>
+```slint
+export component Example inherits Window {
+    preferred-width: 100px;
+    preferred-height: 100px;
+    Rectangle {
+        background: @conic-gradient(from 90deg, #f00 0deg, #0f0 120deg, #00f 240deg, #f00 360deg);
+    }
+}
+```
+</CodeSnippetMD>
+
+This rotates the same color wheel 90 degrees clockwise, so red starts at the right (90deg) instead of the top.
+
 :::note[Known Limitation]
 Negative angles cannot be used directly in conic gradients (e.g., `#ff0000 -90deg`).
 Instead, use one of these workarounds:

internal/compiler/expression_tree.rs

@@ -739,6 +739,8 @@ pub enum Expression {
     },
 
     ConicGradient {
+        /// The starting angle (rotation) of the gradient, corresponding to CSS `from <angle>`
+        from_angle: Box<Expression>,
         /// First expression in the tuple is a color, second expression is the stop angle
         stops: Vec<(Expression, Expression)>,
     },
@@ -974,7 +976,8 @@ impl Expression {
                     visitor(s);
                 }
             }
-            Expression::ConicGradient { stops } => {
+            Expression::ConicGradient { from_angle, stops } => {
+                visitor(from_angle);
                 for (c, s) in stops {
                     visitor(c);
                     visitor(s);
@@ -1077,7 +1080,8 @@ impl Expression {
                     visitor(s);
                 }
             }
-            Expression::ConicGradient { stops } => {
+            Expression::ConicGradient { from_angle, stops } => {
+                visitor(from_angle);
                 for (c, s) in stops {
                     visitor(c);
                     visitor(s);
@@ -1174,8 +1178,9 @@ impl Expression {
             Expression::RadialGradient { stops } => {
                 stops.iter().all(|(c, s)| c.is_constant(ga) && s.is_constant(ga))
             }
-            Expression::ConicGradient { stops } => {
-                stops.iter().all(|(c, s)| c.is_constant(ga) && s.is_constant(ga))
+            Expression::ConicGradient { from_angle, stops } => {
+                from_angle.is_constant(ga)
+                    && stops.iter().all(|(c, s)| c.is_constant(ga) && s.is_constant(ga))
             }
             Expression::EnumerationValue(_) => true,
             Expression::ReturnStatement(expr) => {
@@ -1827,14 +1832,11 @@ pub fn pretty_print(f: &mut dyn std::fmt::Write, expression: &Expression) -> std
             }
             write!(f, ")")
         }
-        Expression::ConicGradient { stops } => {
-            write!(f, "@conic-gradient(")?;
-            let mut first = true;
+        Expression::ConicGradient { from_angle, stops } => {
+            write!(f, "@conic-gradient(from ")?;
+            pretty_print(f, from_angle)?;
             for (c, s) in stops {
-                if !first {
-                    write!(f, ", ")?;
-                }
-                first = false;
+                write!(f, ", ")?;
                 pretty_print(f, c)?;
                 write!(f, " ")?;
                 pretty_print(f, s)?;

internal/compiler/generator/cpp.rs

@@ -3508,7 +3508,7 @@ fn compile_expression(expr: &llr::Expression, ctx: &EvaluationContext) -> String
                 stops_it.join(", "), angle, stops.len()
             )
         }
-        Expression::RadialGradient{ stops} => {
+        Expression::RadialGradient{ stops } => {
             let mut stops_it = stops.iter().map(|(color, stop)| {
                 let color = compile_expression(color, ctx);
                 let position = compile_expression(stop, ctx);
@@ -3519,15 +3519,16 @@ fn compile_expression(expr: &llr::Expression, ctx: &EvaluationContext) -> String
                 stops_it.join(", "), stops.len()
             )
         }
-        Expression::ConicGradient{ stops} => {
+        Expression::ConicGradient{ from_angle, stops } => {
+            let from_angle = compile_expression(from_angle, ctx);
             let mut stops_it = stops.iter().map(|(color, stop)| {
                 let color = compile_expression(color, ctx);
                 let position = compile_expression(stop, ctx);
                 format!("slint::private_api::GradientStop{{ {color}, float({position}), }}")
             });
             format!(
-                "[&] {{ const slint::private_api::GradientStop stops[] = {{ {} }}; return slint::Brush(slint::private_api::ConicGradientBrush(stops, {})); }}()",
-                stops_it.join(", "), stops.len()
+                "[&] {{ const slint::private_api::GradientStop stops[] = {{ {} }}; return slint::Brush(slint::private_api::ConicGradientBrush(float({}), stops, {})); }}()",
+                stops_it.join(", "), from_angle, stops.len()
             )
         }
         Expression::EnumerationValue(value) => {

internal/compiler/generator/rust.rs

@@ -2671,14 +2671,15 @@ fn compile_expression(expr: &Expression, ctx: &EvaluationContext) -> TokenStream
                 sp::RadialGradientBrush::new_circle([#(#stops),*])
             ))
         }
-        Expression::ConicGradient { stops } => {
+        Expression::ConicGradient { from_angle, stops } => {
+            let from_angle = compile_expression(from_angle, ctx);
             let stops = stops.iter().map(|(color, stop)| {
                 let color = compile_expression(color, ctx);
                 let position = compile_expression(stop, ctx);
                 quote!(sp::GradientStop{ color: #color, position: #position as _ })
             });
             quote!(slint::Brush::ConicGradient(
-                sp::ConicGradientBrush::new([#(#stops),*])
+                sp::ConicGradientBrush::new(#from_angle as _, [#(#stops),*])
             ))
         }
         Expression::EnumerationValue(value) => {

internal/compiler/llr/expression.rs

@@ -159,6 +159,8 @@ pub enum Expression {
     },
 
     ConicGradient {
+        /// The starting angle (rotation) of the gradient, corresponding to CSS `from <angle>`
+        from_angle: Box<Expression>,
         /// First expression in the tuple is a color, second expression is the stop position (normalized angle 0-1)
         stops: Vec<(Expression, Expression)>,
     },
@@ -390,7 +392,8 @@ macro_rules! visit_impl {
                     $visitor(b);
                 }
             }
-            Expression::ConicGradient { stops } => {
+            Expression::ConicGradient { from_angle, stops } => {
+                $visitor(from_angle);
                 for (a, b) in stops {
                     $visitor(a);
                     $visitor(b);

internal/compiler/llr/lower_expression.rs

@@ -228,7 +228,8 @@ pub fn lower_expression(
                 .map(|(a, b)| (lower_expression(a, ctx), lower_expression(b, ctx)))
                 .collect::<_>(),
         },
-        tree_Expression::ConicGradient { stops } => llr_Expression::ConicGradient {
+        tree_Expression::ConicGradient { from_angle, stops } => llr_Expression::ConicGradient {
+            from_angle: Box::new(lower_expression(from_angle, ctx)),
             stops: stops
                 .iter()
                 .map(|(a, b)| (lower_expression(a, ctx), lower_expression(b, ctx)))

internal/compiler/llr/pretty_print.rs

@@ -385,9 +385,10 @@ impl<'a, T> Display for DisplayExpression<'a, T> {
                 "@radial-gradient(circle, {})",
                 stops.iter().map(|(e1, e2)| format!("{} {}", e(e1), e(e2))).join(", ")
             ),
-            Expression::ConicGradient { stops } => write!(
+            Expression::ConicGradient { from_angle, stops } => write!(
                 f,
-                "@conic-gradient({})",
+                "@conic-gradient(from {}, {})",
+                e(from_angle),
                 stops.iter().map(|(e1, e2)| format!("{} {}", e(e1), e(e2))).join(", ")
             ),
             Expression::EnumerationValue(x) => write!(f, "{x}"),