From 7ff01c541baad046c0ccf7293265902730fdf953 Mon Sep 17 00:00:00 2001
From: Zyie <24736175+Zyie@users.noreply.github.com>
Date: Thu, 18 Sep 2025 14:51:38 +0100
Subject: [PATCH 1/2] fix: mask size when overflow is active and box sizing is
 content-box

Addresses border rendering issues when using different box-sizing
settings, ensuring accurate display of borders and content.
---
 .github/CODEOWNERS                |  2 +-
 package.json                      |  2 +-
 src/components/LayoutContainer.ts | 42 +++++++++++++++++++++++--------
 3 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 4ec466f6..d76c1bba 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1 +1 @@
-* @Zyie @GoodBoyDigital @cyberdex
+* @Zyie
diff --git a/package.json b/package.json
index a9d690d9..1eb088a2 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "pretest:unit": "tsx tests/scripts/generate-story-imports.ts",
     "test:unit": "vitest run",
     "test:unit:watch": "vitest --browser.headless=false",
-    "watch": "xs watch",
+    "watch": "vite build --watch",
     "prepare": "husky"
   },
   "lint-staged": {
diff --git a/src/components/LayoutContainer.ts b/src/components/LayoutContainer.ts
index 6b67b152..5a68c491 100644
--- a/src/components/LayoutContainer.ts
+++ b/src/components/LayoutContainer.ts
@@ -214,15 +214,25 @@ export class LayoutContainer extends Container {
      * @param height - Container height
      * @param radius - Border radius
      */
-    protected _updateMask(width: number, height: number, radius: number = 0) {
+    protected _updateMask(
+        width: number,
+        height: number,
+        radius: number = 0,
+        borderWidth: number = 0,
+        isContentBox: boolean = false,
+    ) {
+        // Account for border width if box-sizing is content-box. In content-box mode the computed
+        // layout width/height excludes the border, so the visible (masked) area should include it.
+        const maskX = isContentBox ? -borderWidth : 0;
+        const maskY = isContentBox ? -borderWidth : 0;
+        const maskWidth = isContentBox ? width + borderWidth * 2 : width;
+        const maskHeight = isContentBox ? height + borderWidth * 2 : height;
+
+        // Draw a single rounded rect used as the clip mask.
         this._mask.clear();
-        this._mask.roundRect(0, 0, width, height, radius);
-        this._mask.fill(0x0000ff);
-        this._mask.roundRect(1, 1, width - 2, height - 2, radius);
-        this._mask.cut();
-        this._mask.roundRect(1, 1, width - 2, height - 2, radius);
-        this._mask.fill(0x00ff00);
-        this._mask.cut();
+        this._mask.roundRect(0, 0, maskWidth, maskHeight, radius);
+        this._mask.position.set(maskX, maskY);
+        this._mask.fill(0xffffff);
     }
 
     protected _updateBackground(computedLayout: ComputedLayout) {
@@ -254,7 +264,11 @@ export class LayoutContainer extends Container {
      * @protected
      */
     protected _drawBackground(computedLayout: ComputedLayout) {
-        const borderWidth = this.layout!.yoga.getBorder(Edge.All);
+        let borderWidth = this.layout!.yoga.getBorder(Edge.All);
+
+        if (isNaN(borderWidth) || borderWidth < 0) {
+            borderWidth = 0;
+        }
         const boxSizing = this.layout!.yoga.getBoxSizing();
         const alignment = boxSizing === BoxSizing.BorderBox ? 1 : 0;
 
@@ -274,8 +288,14 @@ export class LayoutContainer extends Container {
         const overflow = this.layout?.style.overflow;
 
         if (overflow !== 'visible') {
-            this._updateMask(computedLayout.width, computedLayout.height, layoutStyles.borderRadius ?? 0);
-            this.setMask({ mask: this._mask });
+            this._updateMask(
+                computedLayout.width,
+                computedLayout.height,
+                layoutStyles.borderRadius ?? 0,
+                borderWidth,
+                boxSizing === BoxSizing.ContentBox,
+            );
+            // this.setMask({ mask: this._mask });
             // the max value is actually the difference between the container size and the content size and the stroke
             const borderOffset = boxSizing === BoxSizing.BorderBox ? borderWidth : 0;
 

From 1c9a72efb601c3fc13b11b48dd06cda80122203e Mon Sep 17 00:00:00 2001
From: Zyie <24736175+Zyie@users.noreply.github.com>
Date: Thu, 18 Sep 2025 15:26:50 +0100
Subject: [PATCH 2/2] fix mask

---
 src/components/LayoutContainer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LayoutContainer.ts b/src/components/LayoutContainer.ts
index 5a68c491..b1305910 100644
--- a/src/components/LayoutContainer.ts
+++ b/src/components/LayoutContainer.ts
@@ -295,7 +295,7 @@ export class LayoutContainer extends Container {
                 borderWidth,
                 boxSizing === BoxSizing.ContentBox,
             );
-            // this.setMask({ mask: this._mask });
+            this.setMask({ mask: this._mask });
             // the max value is actually the difference between the container size and the content size and the stroke
             const borderOffset = boxSizing === BoxSizing.BorderBox ? borderWidth : 0;