@biela.dev/core 1.7.12 → 1.7.14

package/dist/index.cjs

@@ -478,11 +478,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;
@@ -508,7 +522,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
           };
         }
       }
@@ -708,10 +726,11 @@ 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)",
+                        zIndex: 12,
                         ...cssVarStyle
                       },
                       children: /* @__PURE__ */ jsxRuntime.jsx(DeviceErrorBoundary, { children })
@@ -896,6 +915,8 @@ registerDeviceSVG("iphone-se-3", devices.IPhoneSE3SVG, devices.IPHONE_SE_3_FRAME
 registerDeviceSVG("galaxy-s25-ultra", devices.GalaxyS25UltraSVG, devices.GALAXY_S25_ULTRA_FRAME);
 registerDeviceSVG("galaxy-s25", devices.GalaxyS25SVG, devices.GALAXY_S25_FRAME);
 registerDeviceSVG("galaxy-s25-edge", devices.GalaxyS25EdgeSVG, devices.GALAXY_S25_EDGE_FRAME);
+registerDeviceSVG("galaxy-z-fold-7", devices.GalaxyZFold7SVG, devices.GALAXY_Z_FOLD_7_FRAME);
+registerDeviceSVG("galaxy-z-fold-7-open", devices.GalaxyZFold7OpenSVG, devices.GALAXY_Z_FOLD_7_OPEN_FRAME);
 registerDeviceSVG("pixel-9-pro-xl", devices.Pixel9ProXLSVG, devices.PIXEL_9_PRO_XL_FRAME);
 registerDeviceSVG("pixel-9-pro", devices.Pixel9ProSVG, devices.PIXEL_9_PRO_FRAME);
 getCustomSVGStore().applyAll();
@@ -993,6 +1014,21 @@ function useOrientation(initial = "portrait") {
     setOrientation
   };
 }
+function useFoldState(baseDeviceId, initial = "folded") {
+  const [foldState, setFoldState] = react.useState(initial);
+  const toggle = react.useCallback(
+    () => setFoldState((s) => s === "folded" ? "open" : "folded"),
+    []
+  );
+  const deviceId = foldState === "open" ? `${baseDeviceId}-open` : baseDeviceId;
+  return {
+    foldState,
+    isOpen: foldState === "open",
+    deviceId,
+    toggle,
+    setFoldState
+  };
+}
 function DeviceCompare({
   deviceA,
   deviceB,
@@ -1491,6 +1527,7 @@ exports.snapToStep = snapToStep;
 exports.useAdaptiveScale = useAdaptiveScale;
 exports.useContainerSize = useContainerSize;
 exports.useDeviceContract = useDeviceContract;
+exports.useFoldState = useFoldState;
 exports.useOrientation = useOrientation;
 exports.useScreenPower = useScreenPower;
 exports.useVolumeControl = useVolumeControl;