@biela.dev/core 1.7.12 → 1.7.13

package/dist/lite.js

@@ -566,11 +566,25 @@ function registerCustomDeviceSVG(deviceId, svgString, frame, cropViewBox, screen
     let bodySVG = defsMatch ? processedSVG.replace(defsContent, defsPlaceholder) : processedSVG;
     bodySVG = bodySVG.replace(/<rect\b([^>]*?)\/?>/gi, (fullMatch, attrs) => {
       if (/\bmask\s*=/i.test(fullMatch)) return fullMatch;
-      const xVal = parseFloat(attrs.match(/\bx\s*=\s*["']?(-?\d+\.?\d*)["']?/i)?.[1] ?? "0");
-      const yVal = parseFloat(attrs.match(/\by\s*=\s*["']?(-?\d+\.?\d*)["']?/i)?.[1] ?? "0");
+      let xVal = parseFloat(attrs.match(/\bx\s*=\s*["']?(-?\d+\.?\d*)["']?/i)?.[1] ?? "0");
+      let yVal = parseFloat(attrs.match(/\by\s*=\s*["']?(-?\d+\.?\d*)["']?/i)?.[1] ?? "0");
       const wVal = parseFloat(attrs.match(/\bwidth\s*=\s*["']?(\d+\.?\d*)["']?/i)?.[1] ?? "0");
       const hVal = parseFloat(attrs.match(/\bheight\s*=\s*["']?(\d+\.?\d*)["']?/i)?.[1] ?? "0");
-      if (wVal > 0 && hVal > 0 && xVal <= sx + 2 && yVal <= sy + 2 && xVal + wVal >= sx + sw - 2 && yVal + hVal >= sy + sh - 2) {
+      if (wVal <= 0 || hVal <= 0) return fullMatch;
+      const translateMatch = attrs.match(/transform\s*=\s*["'][^"']*translate\(\s*(-?[\d.]+)[\s,]+(-?[\d.]+)/i);
+      if (translateMatch) {
+        xVal += parseFloat(translateMatch[1]);
+        yVal += parseFloat(translateMatch[2]);
+      }
+      const fullyCovering = xVal <= sx + 2 && yVal <= sy + 2 && xVal + wVal >= sx + sw - 2 && yVal + hVal >= sy + sh - 2;
+      const overlapLeft = Math.max(xVal, sx);
+      const overlapTop = Math.max(yVal, sy);
+      const overlapRight = Math.min(xVal + wVal, sx + sw);
+      const overlapBottom = Math.min(yVal + hVal, sy + sh);
+      const overlapArea = Math.max(0, overlapRight - overlapLeft) * Math.max(0, overlapBottom - overlapTop);
+      const screenArea = sw * sh;
+      const significantOverlap = overlapArea > screenArea * 0.15 && wVal * hVal > screenArea * 0.25;
+      if (fullyCovering || significantOverlap) {
         return fullMatch.replace(/(\/?>)$/, ` mask="url(#${maskId})"$1`);
       }
       return fullMatch;
@@ -596,7 +610,11 @@ function registerCustomDeviceSVG(deviceId, svgString, frame, cropViewBox, screen
             bezelRight: Math.round((vbW - screenRect.x - screenRect.width) * s),
             bezelBottom: Math.round((vbH - screenRect.y - screenRect.height) * s),
             totalWidth: Math.round(vbW * s),
-            totalHeight: Math.round(vbH * s)
+            totalHeight: Math.round(vbH * s),
+            // Derive screen corner radius from the SVG's screen rect rx,
+            // scaled to CSS pixels, so the content clipPath matches the
+            // SVG mask hole exactly (no corner gap mismatch).
+            screenRadius: screenRect.rx ? Math.round(screenRect.rx * s) : frame.screenRadius
           };
         }
       }
@@ -796,7 +814,7 @@ function DeviceFrame({
                         top: frameBezelTop,
                         width: deviceMeta.screen.width,
                         height: deviceMeta.screen.height,
-                        clipPath: `inset(0 round ${contract.screen.cornerRadius}px)`,
+                        clipPath: `inset(0 round ${frameInfo?.screenRadius ?? contract.screen.cornerRadius}px)`,
                         overflow: "hidden",
                         backfaceVisibility: "hidden",
                         transform: "translateZ(0)",