screen corners

Modules/MainScreen/Backgrounds/AllBackgrounds.qml

@@ -146,6 +146,15 @@ Item {
     //   panel: root.windowRoot.trayDropdownPanel
     //   shapeContainer: backgroundsShape
     // }
+
+
+    /**
+     *  Screen Corners
+     */
+    ScreenCornersBackground {
+      shapeContainer: backgroundsShape
+      bar: root.bar
+    }
   }
 
   // Unified shadow system  (one MultiEffect for all backgrounds)

Modules/MainScreen/Backgrounds/BarBackground.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Shapes
 import qs.Commons
+import qs.Modules.MainScreen.Backgrounds
 
 
 /**
@@ -32,19 +33,10 @@ ShapePath {
   readonly property point barMappedPos: bar ? Qt.point(bar.x, bar.y) : Qt.point(0, 0)
 
   // Flatten corners if bar is too small (handle null bar)
-  readonly property bool shouldFlatten: bar ? (bar.width < radius * 2 || bar.height < radius * 2) : false
-  readonly property real effectiveRadius: shouldFlatten ? (bar ? Math.min(bar.width / 2, bar.height / 2) : 0) : radius
+  readonly property bool shouldFlatten: bar ? ShapeCornerHelper.shouldFlatten(bar.width, bar.height, radius) : false
+  readonly property real effectiveRadius: shouldFlatten ? (bar ? ShapeCornerHelper.getFlattenedRadius(Math.min(bar.width, bar.height), radius) : 0) : radius
 
-  // Helper functions (inlined from ShapeCornerHelper)
-  function getMultX(cornerState) {
-    return cornerState === 1 ? -1 : 1
-  }
-  function getMultY(cornerState) {
-    return cornerState === 2 ? -1 : 1
-  }
-  function getArcDirection(multX, multY) {
-    return ((multX < 0) !== (multY < 0)) ? PathArc.Counterclockwise : PathArc.Clockwise
-  }
+  // Helper function for getting corner radius based on state
   function getCornerRadius(cornerState) {
     // State -1 = no radius (flat corner)
     if (cornerState === -1)
@@ -54,20 +46,20 @@ ShapePath {
   }
 
   // Per-corner multipliers and radii based on bar's corner states (handle null bar)
-  readonly property real tlMultX: bar ? getMultX(bar.topLeftCornerState) : 1
-  readonly property real tlMultY: bar ? getMultY(bar.topLeftCornerState) : 1
+  readonly property real tlMultX: bar ? ShapeCornerHelper.getMultX(bar.topLeftCornerState) : 1
+  readonly property real tlMultY: bar ? ShapeCornerHelper.getMultY(bar.topLeftCornerState) : 1
   readonly property real tlRadius: bar ? getCornerRadius(bar.topLeftCornerState) : 0
 
-  readonly property real trMultX: bar ? getMultX(bar.topRightCornerState) : 1
-  readonly property real trMultY: bar ? getMultY(bar.topRightCornerState) : 1
+  readonly property real trMultX: bar ? ShapeCornerHelper.getMultX(bar.topRightCornerState) : 1
+  readonly property real trMultY: bar ? ShapeCornerHelper.getMultY(bar.topRightCornerState) : 1
   readonly property real trRadius: bar ? getCornerRadius(bar.topRightCornerState) : 0
 
-  readonly property real brMultX: bar ? getMultX(bar.bottomRightCornerState) : 1
-  readonly property real brMultY: bar ? getMultY(bar.bottomRightCornerState) : 1
+  readonly property real brMultX: bar ? ShapeCornerHelper.getMultX(bar.bottomRightCornerState) : 1
+  readonly property real brMultY: bar ? ShapeCornerHelper.getMultY(bar.bottomRightCornerState) : 1
   readonly property real brRadius: bar ? getCornerRadius(bar.bottomRightCornerState) : 0
 
-  readonly property real blMultX: bar ? getMultX(bar.bottomLeftCornerState) : 1
-  readonly property real blMultY: bar ? getMultY(bar.bottomLeftCornerState) : 1
+  readonly property real blMultX: bar ? ShapeCornerHelper.getMultX(bar.bottomLeftCornerState) : 1
+  readonly property real blMultY: bar ? ShapeCornerHelper.getMultY(bar.bottomLeftCornerState) : 1
   readonly property real blRadius: bar ? getCornerRadius(bar.bottomLeftCornerState) : 0
 
   // ShapePath configuration
@@ -102,7 +94,7 @@ ShapePath {
     relativeY: root.trRadius * root.trMultY
     radiusX: root.trRadius
     radiusY: root.trRadius
-    direction: root.getArcDirection(root.trMultX, root.trMultY)
+    direction: ShapeCornerHelper.getArcDirection(root.trMultX, root.trMultY)
   }
 
   // Right edge (moving down)
@@ -117,7 +109,7 @@ ShapePath {
     relativeY: root.brRadius * root.brMultY
     radiusX: root.brRadius
     radiusY: root.brRadius
-    direction: root.getArcDirection(root.brMultX, root.brMultY)
+    direction: ShapeCornerHelper.getArcDirection(root.brMultX, root.brMultY)
   }
 
   // Bottom edge (moving left)
@@ -132,7 +124,7 @@ ShapePath {
     relativeY: -root.blRadius * root.blMultY
     radiusX: root.blRadius
     radiusY: root.blRadius
-    direction: root.getArcDirection(root.blMultX, root.blMultY)
+    direction: ShapeCornerHelper.getArcDirection(root.blMultX, root.blMultY)
   }
 
   // Left edge (moving up) - closes the path back to start
@@ -147,6 +139,6 @@ ShapePath {
     relativeY: -root.tlRadius * root.tlMultY
     radiusX: root.tlRadius
     radiusY: root.tlRadius
-    direction: root.getArcDirection(root.tlMultX, root.tlMultY)
+    direction: ShapeCornerHelper.getArcDirection(root.tlMultX, root.tlMultY)
   }
 }

Modules/MainScreen/Backgrounds/PanelBackground.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Shapes
 import qs.Commons
+import qs.Modules.MainScreen.Backgrounds
 
 
 /**
@@ -38,19 +39,10 @@ ShapePath {
   readonly property real panelHeight: panelBg ? panelBg.height : 0
 
   // Flatten corners if panel is too small
-  readonly property bool shouldFlatten: panelBg ? (panelWidth < radius * 2 || panelHeight < radius * 2) : false
-  readonly property real effectiveRadius: shouldFlatten ? Math.min(panelWidth / 2, panelHeight / 2) : radius
+  readonly property bool shouldFlatten: panelBg ? ShapeCornerHelper.shouldFlatten(panelWidth, panelHeight, radius) : false
+  readonly property real effectiveRadius: shouldFlatten ? ShapeCornerHelper.getFlattenedRadius(Math.min(panelWidth, panelHeight), radius) : radius
 
-  // Helper functions (inlined from ShapeCornerHelper)
-  function getMultX(cornerState) {
-    return cornerState === 1 ? -1 : 1
-  }
-  function getMultY(cornerState) {
-    return cornerState === 2 ? -1 : 1
-  }
-  function getArcDirection(multX, multY) {
-    return ((multX < 0) !== (multY < 0)) ? PathArc.Counterclockwise : PathArc.Clockwise
-  }
+  // Helper function for getting corner radius based on state
   function getCornerRadius(cornerState) {
     // State -1 = no radius (flat corner)
     if (cornerState === -1)
@@ -60,20 +52,20 @@ ShapePath {
   }
 
   // Per-corner multipliers and radii based on panelBg's corner states
-  readonly property real tlMultX: panelBg ? getMultX(panelBg.topLeftCornerState) : 1
-  readonly property real tlMultY: panelBg ? getMultY(panelBg.topLeftCornerState) : 1
+  readonly property real tlMultX: panelBg ? ShapeCornerHelper.getMultX(panelBg.topLeftCornerState) : 1
+  readonly property real tlMultY: panelBg ? ShapeCornerHelper.getMultY(panelBg.topLeftCornerState) : 1
   readonly property real tlRadius: panelBg ? getCornerRadius(panelBg.topLeftCornerState) : 0
 
-  readonly property real trMultX: panelBg ? getMultX(panelBg.topRightCornerState) : 1
-  readonly property real trMultY: panelBg ? getMultY(panelBg.topRightCornerState) : 1
+  readonly property real trMultX: panelBg ? ShapeCornerHelper.getMultX(panelBg.topRightCornerState) : 1
+  readonly property real trMultY: panelBg ? ShapeCornerHelper.getMultY(panelBg.topRightCornerState) : 1
   readonly property real trRadius: panelBg ? getCornerRadius(panelBg.topRightCornerState) : 0
 
-  readonly property real brMultX: panelBg ? getMultX(panelBg.bottomRightCornerState) : 1
-  readonly property real brMultY: panelBg ? getMultY(panelBg.bottomRightCornerState) : 1
+  readonly property real brMultX: panelBg ? ShapeCornerHelper.getMultX(panelBg.bottomRightCornerState) : 1
+  readonly property real brMultY: panelBg ? ShapeCornerHelper.getMultY(panelBg.bottomRightCornerState) : 1
   readonly property real brRadius: panelBg ? getCornerRadius(panelBg.bottomRightCornerState) : 0
 
-  readonly property real blMultX: panelBg ? getMultX(panelBg.bottomLeftCornerState) : 1
-  readonly property real blMultY: panelBg ? getMultY(panelBg.bottomLeftCornerState) : 1
+  readonly property real blMultX: panelBg ? ShapeCornerHelper.getMultX(panelBg.bottomLeftCornerState) : 1
+  readonly property real blMultY: panelBg ? ShapeCornerHelper.getMultY(panelBg.bottomLeftCornerState) : 1
   readonly property real blRadius: panelBg ? getCornerRadius(panelBg.bottomLeftCornerState) : 0
 
   // DEBUG: Log panel state changes
@@ -124,7 +116,7 @@ ShapePath {
     relativeY: root.trRadius * root.trMultY
     radiusX: root.trRadius
     radiusY: root.trRadius
-    direction: root.getArcDirection(root.trMultX, root.trMultY)
+    direction: ShapeCornerHelper.getArcDirection(root.trMultX, root.trMultY)
   }
 
   // Right edge (moving down)
@@ -139,7 +131,7 @@ ShapePath {
     relativeY: root.brRadius * root.brMultY
     radiusX: root.brRadius
     radiusY: root.brRadius
-    direction: root.getArcDirection(root.brMultX, root.brMultY)
+    direction: ShapeCornerHelper.getArcDirection(root.brMultX, root.brMultY)
   }
 
   // Bottom edge (moving left)
@@ -154,7 +146,7 @@ ShapePath {
     relativeY: -root.blRadius * root.blMultY
     radiusX: root.blRadius
     radiusY: root.blRadius
-    direction: root.getArcDirection(root.blMultX, root.blMultY)
+    direction: ShapeCornerHelper.getArcDirection(root.blMultX, root.blMultY)
   }
 
   // Left edge (moving up) - closes the path back to start
@@ -169,6 +161,6 @@ ShapePath {
     relativeY: -root.tlRadius * root.tlMultY
     radiusX: root.tlRadius
     radiusY: root.tlRadius
-    direction: root.getArcDirection(root.tlMultX, root.tlMultY)
+    direction: ShapeCornerHelper.getArcDirection(root.tlMultX, root.tlMultY)
   }
 }

Modules/MainScreen/Backgrounds/ScreenCornersBackground.qml

@@ -0,0 +1,219 @@
+import QtQuick
+import QtQuick.Shapes
+import qs.Commons
+import qs.Services
+import qs.Modules.MainScreen.Backgrounds
+
+
+/**
+ * ScreenCornersBackground - ShapePath component for rendering screen corners
+ *
+ * Renders concave corners at the screen edges to create a rounded screen effect.
+ * Uses the unified shadow system - this ShapePath is a child of the AllBackgrounds Shape container.
+ */
+ShapePath {
+  id: root
+
+  // Required reference to AllBackgrounds shapeContainer
+  required property var shapeContainer
+
+  // Required reference to the bar
+  required property var bar
+
+  // Corner configuration
+  readonly property color cornerColor: Settings.data.general.forceBlackScreenCorners ? Color.black : Qt.alpha(Color.mSurface, Settings.data.bar.backgroundOpacity)
+  readonly property real cornerRadius: Style.screenRadius
+  readonly property real cornerSize: Style.screenRadius
+
+  // Helper properties for margin calculations
+  readonly property bool barOnThisMonitor: BarService.isVisible && Settings.data.bar.backgroundOpacity > 0
+  readonly property real barMargin: !Settings.data.bar.floating && barOnThisMonitor ? Style.barHeight : 0
+
+  // Determine margins based on bar position
+  readonly property real topMargin: Settings.data.bar.position === "top" ? barMargin : 0
+  readonly property real bottomMargin: Settings.data.bar.position === "bottom" ? barMargin : 0
+  readonly property real leftMargin: Settings.data.bar.position === "left" ? barMargin : 0
+  readonly property real rightMargin: Settings.data.bar.position === "right" ? barMargin : 0
+
+  // Screen dimensions
+  readonly property real screenWidth: shapeContainer ? shapeContainer.width : 0
+  readonly property real screenHeight: shapeContainer ? shapeContainer.height : 0
+
+  // Only show screen corners if enabled and appropriate conditions are met
+  readonly property bool shouldShow: Settings.data.general.showScreenCorners && (!Settings.data.ui.panelsAttachedToBar || Settings.data.bar.backgroundOpacity >= 1 || Settings.data.bar.floating)
+
+  // ShapePath configuration
+  strokeWidth: -1 // No stroke, fill only
+  fillColor: shouldShow ? cornerColor : Color.transparent
+
+  // Smooth color animation
+  Behavior on fillColor {
+    ColorAnimation {
+      duration: Style.animationFast
+    }
+  }
+
+  // ========== PATH DEFINITION ==========
+  // Draws 4 separate corner squares at screen edges
+  // Each corner square has a concave arc on the inner diagonal
+
+  // ========== TOP-LEFT CORNER ==========
+  // Arc is at the bottom-right of this square (inner diagonal)
+  // Start at top-left screen corner
+  startX: leftMargin
+  startY: topMargin
+
+  // Top edge (moving right)
+  PathLine {
+    relativeX: cornerSize
+    relativeY: 0
+  }
+
+  // Right edge (moving down toward arc)
+  PathLine {
+    relativeX: 0
+    relativeY: cornerSize - cornerRadius
+  }
+
+  // Concave arc (bottom-right corner of square, curving inward toward screen center)
+  PathArc {
+    relativeX: -cornerRadius
+    relativeY: cornerRadius
+    radiusX: cornerRadius
+    radiusY: cornerRadius
+    direction: PathArc.Counterclockwise
+  }
+
+  // Bottom edge (moving left)
+  PathLine {
+    relativeX: -(cornerSize - cornerRadius)
+    relativeY: 0
+  }
+
+  // Left edge (moving up) - closes back to start
+  PathLine {
+    relativeX: 0
+    relativeY: -cornerSize
+  }
+
+  // ========== TOP-RIGHT CORNER ==========
+  // Arc is at the bottom-left of this square (inner diagonal)
+  PathMove {
+    x: screenWidth - rightMargin - cornerSize
+    y: topMargin
+  }
+
+  // Top edge (moving right)
+  PathLine {
+    relativeX: cornerSize
+    relativeY: 0
+  }
+
+  // Right edge (moving down)
+  PathLine {
+    relativeX: 0
+    relativeY: cornerSize
+  }
+
+  // Bottom edge (moving left toward arc)
+  PathLine {
+    relativeX: -(cornerSize - cornerRadius)
+    relativeY: 0
+  }
+
+  // Concave arc (bottom-left corner of square, curving inward toward screen center)
+  PathArc {
+    relativeX: -cornerRadius
+    relativeY: -cornerRadius
+    radiusX: cornerRadius
+    radiusY: cornerRadius
+    direction: PathArc.Counterclockwise
+  }
+
+  // Left edge (moving up) - closes back to start
+  PathLine {
+    relativeX: 0
+    relativeY: -(cornerSize - cornerRadius)
+  }
+
+  // ========== BOTTOM-LEFT CORNER ==========
+  // Arc is at the top-right of this square (inner diagonal)
+  PathMove {
+    x: leftMargin
+    y: screenHeight - bottomMargin - cornerSize
+  }
+
+  // Top edge (moving right toward arc)
+  PathLine {
+    relativeX: cornerSize - cornerRadius
+    relativeY: 0
+  }
+
+  // Concave arc (top-right corner of square, curving inward toward screen center)
+  PathArc {
+    relativeX: cornerRadius
+    relativeY: cornerRadius
+    radiusX: cornerRadius
+    radiusY: cornerRadius
+    direction: PathArc.Counterclockwise
+  }
+
+  // Right edge (moving down)
+  PathLine {
+    relativeX: 0
+    relativeY: cornerSize - cornerRadius
+  }
+
+  // Bottom edge (moving left)
+  PathLine {
+    relativeX: -cornerSize
+    relativeY: 0
+  }
+
+  // Left edge (moving up) - closes back to start
+  PathLine {
+    relativeX: 0
+    relativeY: -cornerSize
+  }
+
+  // ========== BOTTOM-RIGHT CORNER ==========
+  // Arc is at the top-left of this square (inner diagonal)
+  // Start at bottom-right of square (different from other corners!)
+  PathMove {
+    x: screenWidth - rightMargin
+    y: screenHeight - bottomMargin
+  }
+
+  // Bottom edge (moving left)
+  PathLine {
+    relativeX: -cornerSize
+    relativeY: 0
+  }
+
+  // Left edge (moving up toward arc)
+  PathLine {
+    relativeX: 0
+    relativeY: -(cornerSize - cornerRadius)
+  }
+
+  // Concave arc (top-left corner of square, curving inward toward screen center)
+  PathArc {
+    relativeX: cornerRadius
+    relativeY: -cornerRadius
+    radiusX: cornerRadius
+    radiusY: cornerRadius
+    direction: PathArc.Counterclockwise
+  }
+
+  // Top edge (moving right)
+  PathLine {
+    relativeX: cornerSize - cornerRadius
+    relativeY: 0
+  }
+
+  // Right edge (moving down) - closes back to start
+  PathLine {
+    relativeX: 0
+    relativeY: cornerSize
+  }
+}

Modules/MainScreen/Backgrounds/ShapeCornerHelper.qml

@@ -0,0 +1,81 @@
+pragma Singleton
+
+import QtQuick
+import QtQuick.Shapes
+import Quickshell
+
+
+/**
+ * ShapeCornerHelper - Utility singleton for shape corner calculations
+ *
+ * Uses 4-state per-corner system for flexible corner rendering:
+ * - State -1: No radius (flat/square corner)
+ * - State 0: Normal (inner curve)
+ * - State 1: Horizontal inversion (outer curve on X-axis)
+ * - State 2: Vertical inversion (outer curve on Y-axis)
+ *
+ * The key technique: Using PathArc direction control (Clockwise vs Counterclockwise)
+ * combined with multipliers to create both inner and outer corner curves.
+ */
+Singleton {
+  id: root
+
+
+  /**
+   * Get X-axis multiplier for a corner state
+   * State 1 (horizontal invert) returns -1, others return 1
+   */
+  function getMultX(cornerState) {
+    return cornerState === 1 ? -1 : 1
+  }
+
+
+  /**
+   * Get Y-axis multiplier for a corner state
+   * State 2 (vertical invert) returns -1, others return 1
+   */
+  function getMultY(cornerState) {
+    return cornerState === 2 ? -1 : 1
+  }
+
+
+  /**
+   * Get PathArc direction for a corner based on its multipliers
+   * Uses XOR logic: if X inverted differs from Y inverted, use Counterclockwise
+   * This creates the outer curve effect for inverted corners
+   */
+  function getArcDirection(multX, multY) {
+    return ((multX < 0) !== (multY < 0)) ? PathArc.Counterclockwise : PathArc.Clockwise
+  }
+
+
+  /**
+   * Convenience function to get arc direction directly from corner state
+   */
+  function getArcDirectionFromState(cornerState) {
+    const multX = getMultX(cornerState)
+    const multY = getMultY(cornerState)
+    return getArcDirection(multX, multY)
+  }
+
+
+  /**
+   * Get the "flattening" radius when shape dimensions are too small
+   * Prevents visual artifacts when radius exceeds dimensions
+   */
+  function getFlattenedRadius(dimension, requestedRadius) {
+    if (dimension < requestedRadius * 2) {
+      return dimension / 2
+    }
+    return requestedRadius
+  }
+
+
+  /**
+   * Check if a shape should use flattened corners
+   * Returns true if width or height is too small for the requested radius
+   */
+  function shouldFlatten(width, height, radius) {
+    return width < radius * 2 || height < radius * 2
+  }
+}