@biela.dev/devices 1.6.2 → 1.6.4

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import { D as DeviceMeta, a as DeviceLayoutData, b as DeviceLayoutContract, S as SafeAreaInsets, C as ContentRect, H as HardwareOverlayType, O as OverlayRect, R as RegisteredDevice } from './contract-types-Cw1rmF3b.cjs';
 export { c as DeviceCSSVariables, d as DeviceFrameInfo, e as SVGCropRect, f as SVGScreenRect } from './contract-types-Cw1rmF3b.cjs';
-export { IPHONE_16E_FRAME, IPHONE_16E_LAYOUT, IPHONE_16E_META, IPHONE_16_FRAME, IPHONE_16_LAYOUT, IPHONE_16_META, IPHONE_17_PRO_FRAME, IPHONE_17_PRO_LAYOUT, IPHONE_17_PRO_MAX_FRAME, IPHONE_17_PRO_MAX_LAYOUT, IPHONE_17_PRO_MAX_META, IPHONE_17_PRO_MAX_SCREEN_RECT, IPHONE_17_PRO_META, IPHONE_17_PRO_SCREEN_RECT, IPHONE_AIR_FRAME, IPHONE_AIR_LAYOUT, IPHONE_AIR_META, IPHONE_SE_3_FRAME, IPHONE_SE_3_LAYOUT, IPHONE_SE_3_META, IPhone16SVG, IPhone16eSVG, IPhone17ProMaxSVG, IPhone17ProSVG, IPhoneAirSVG, IPhoneSE3SVG } from './ios/index.cjs';
-export { GALAXY_S25_EDGE_FRAME, GALAXY_S25_EDGE_LAYOUT, GALAXY_S25_EDGE_META, GALAXY_S25_FRAME, GALAXY_S25_LAYOUT, GALAXY_S25_META, GALAXY_S25_ULTRA_FRAME, GALAXY_S25_ULTRA_LAYOUT, GALAXY_S25_ULTRA_META, GalaxyS25EdgeSVG, GalaxyS25SVG, GalaxyS25UltraSVG, PIXEL_9_PRO_FRAME, PIXEL_9_PRO_LAYOUT, PIXEL_9_PRO_META, PIXEL_9_PRO_XL_FRAME, PIXEL_9_PRO_XL_LAYOUT, PIXEL_9_PRO_XL_META, Pixel9ProSVG, Pixel9ProXLSVG } from './android/index.cjs';
+export { IPHONE_16E_FRAME, IPHONE_16E_LAYOUT, IPHONE_16E_META, IPHONE_16_FRAME, IPHONE_16_LAYOUT, IPHONE_16_META, IPHONE_16_SCREEN_RECT, IPHONE_17_PRO_FRAME, IPHONE_17_PRO_LAYOUT, IPHONE_17_PRO_MAX_FRAME, IPHONE_17_PRO_MAX_LAYOUT, IPHONE_17_PRO_MAX_META, IPHONE_17_PRO_MAX_SCREEN_RECT, IPHONE_17_PRO_META, IPHONE_17_PRO_SCREEN_RECT, IPHONE_AIR_FRAME, IPHONE_AIR_LAYOUT, IPHONE_AIR_META, IPHONE_SE_3_FRAME, IPHONE_SE_3_LAYOUT, IPHONE_SE_3_META, IPhone16SVG, IPhone16eSVG, IPhone17ProMaxSVG, IPhone17ProSVG, IPhoneAirSVG, IPhoneSE3SVG } from './ios/index.cjs';
+export { GALAXY_S25_EDGE_FRAME, GALAXY_S25_EDGE_LAYOUT, GALAXY_S25_EDGE_META, GALAXY_S25_FRAME, GALAXY_S25_LAYOUT, GALAXY_S25_META, GALAXY_S25_SCREEN_RECT, GALAXY_S25_ULTRA_FRAME, GALAXY_S25_ULTRA_LAYOUT, GALAXY_S25_ULTRA_META, GALAXY_S25_ULTRA_SCREEN_RECT, GalaxyS25EdgeSVG, GalaxyS25SVG, GalaxyS25UltraSVG, PIXEL_9_PRO_FRAME, PIXEL_9_PRO_LAYOUT, PIXEL_9_PRO_META, PIXEL_9_PRO_XL_FRAME, PIXEL_9_PRO_XL_LAYOUT, PIXEL_9_PRO_XL_META, Pixel9ProSVG, Pixel9ProXLSVG } from './android/index.cjs';
 import 'react/jsx-runtime';
 
 /**

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { D as DeviceMeta, a as DeviceLayoutData, b as DeviceLayoutContract, S as SafeAreaInsets, C as ContentRect, H as HardwareOverlayType, O as OverlayRect, R as RegisteredDevice } from './contract-types-Cw1rmF3b.js';
 export { c as DeviceCSSVariables, d as DeviceFrameInfo, e as SVGCropRect, f as SVGScreenRect } from './contract-types-Cw1rmF3b.js';
-export { IPHONE_16E_FRAME, IPHONE_16E_LAYOUT, IPHONE_16E_META, IPHONE_16_FRAME, IPHONE_16_LAYOUT, IPHONE_16_META, IPHONE_17_PRO_FRAME, IPHONE_17_PRO_LAYOUT, IPHONE_17_PRO_MAX_FRAME, IPHONE_17_PRO_MAX_LAYOUT, IPHONE_17_PRO_MAX_META, IPHONE_17_PRO_MAX_SCREEN_RECT, IPHONE_17_PRO_META, IPHONE_17_PRO_SCREEN_RECT, IPHONE_AIR_FRAME, IPHONE_AIR_LAYOUT, IPHONE_AIR_META, IPHONE_SE_3_FRAME, IPHONE_SE_3_LAYOUT, IPHONE_SE_3_META, IPhone16SVG, IPhone16eSVG, IPhone17ProMaxSVG, IPhone17ProSVG, IPhoneAirSVG, IPhoneSE3SVG } from './ios/index.js';
-export { GALAXY_S25_EDGE_FRAME, GALAXY_S25_EDGE_LAYOUT, GALAXY_S25_EDGE_META, GALAXY_S25_FRAME, GALAXY_S25_LAYOUT, GALAXY_S25_META, GALAXY_S25_ULTRA_FRAME, GALAXY_S25_ULTRA_LAYOUT, GALAXY_S25_ULTRA_META, GalaxyS25EdgeSVG, GalaxyS25SVG, GalaxyS25UltraSVG, PIXEL_9_PRO_FRAME, PIXEL_9_PRO_LAYOUT, PIXEL_9_PRO_META, PIXEL_9_PRO_XL_FRAME, PIXEL_9_PRO_XL_LAYOUT, PIXEL_9_PRO_XL_META, Pixel9ProSVG, Pixel9ProXLSVG } from './android/index.js';
+export { IPHONE_16E_FRAME, IPHONE_16E_LAYOUT, IPHONE_16E_META, IPHONE_16_FRAME, IPHONE_16_LAYOUT, IPHONE_16_META, IPHONE_16_SCREEN_RECT, IPHONE_17_PRO_FRAME, IPHONE_17_PRO_LAYOUT, IPHONE_17_PRO_MAX_FRAME, IPHONE_17_PRO_MAX_LAYOUT, IPHONE_17_PRO_MAX_META, IPHONE_17_PRO_MAX_SCREEN_RECT, IPHONE_17_PRO_META, IPHONE_17_PRO_SCREEN_RECT, IPHONE_AIR_FRAME, IPHONE_AIR_LAYOUT, IPHONE_AIR_META, IPHONE_SE_3_FRAME, IPHONE_SE_3_LAYOUT, IPHONE_SE_3_META, IPhone16SVG, IPhone16eSVG, IPhone17ProMaxSVG, IPhone17ProSVG, IPhoneAirSVG, IPhoneSE3SVG } from './ios/index.js';
+export { GALAXY_S25_EDGE_FRAME, GALAXY_S25_EDGE_LAYOUT, GALAXY_S25_EDGE_META, GALAXY_S25_FRAME, GALAXY_S25_LAYOUT, GALAXY_S25_META, GALAXY_S25_SCREEN_RECT, GALAXY_S25_ULTRA_FRAME, GALAXY_S25_ULTRA_LAYOUT, GALAXY_S25_ULTRA_META, GALAXY_S25_ULTRA_SCREEN_RECT, GalaxyS25EdgeSVG, GalaxyS25SVG, GalaxyS25UltraSVG, PIXEL_9_PRO_FRAME, PIXEL_9_PRO_LAYOUT, PIXEL_9_PRO_META, PIXEL_9_PRO_XL_FRAME, PIXEL_9_PRO_XL_LAYOUT, PIXEL_9_PRO_XL_META, Pixel9ProSVG, Pixel9ProXLSVG } from './android/index.js';
 import 'react/jsx-runtime';
 
 /**

package/dist/index.js

@@ -1,7 +1,7 @@
-import { PIXEL_9_PRO_META, PIXEL_9_PRO_XL_META, GALAXY_S25_EDGE_META, GALAXY_S25_META, GALAXY_S25_ULTRA_META, PIXEL_9_PRO_LAYOUT, PIXEL_9_PRO_XL_LAYOUT, GALAXY_S25_EDGE_LAYOUT, GALAXY_S25_LAYOUT, GALAXY_S25_ULTRA_LAYOUT } from './chunk-76PRN3YN.js';
-export { GALAXY_S25_EDGE_FRAME, GALAXY_S25_EDGE_LAYOUT, GALAXY_S25_EDGE_META, GALAXY_S25_FRAME, GALAXY_S25_LAYOUT, GALAXY_S25_META, GALAXY_S25_ULTRA_FRAME, GALAXY_S25_ULTRA_LAYOUT, GALAXY_S25_ULTRA_META, GalaxyS25EdgeSVG, GalaxyS25SVG, GalaxyS25UltraSVG, PIXEL_9_PRO_FRAME, PIXEL_9_PRO_LAYOUT, PIXEL_9_PRO_META, PIXEL_9_PRO_XL_FRAME, PIXEL_9_PRO_XL_LAYOUT, PIXEL_9_PRO_XL_META, Pixel9ProSVG, Pixel9ProXLSVG } from './chunk-76PRN3YN.js';
-import { IPHONE_SE_3_META, IPHONE_16E_META, IPHONE_16_META, IPHONE_AIR_META, IPHONE_17_PRO_META, IPHONE_17_PRO_MAX_META, IPHONE_SE_3_LAYOUT, IPHONE_16E_LAYOUT, IPHONE_16_LAYOUT, IPHONE_AIR_LAYOUT, IPHONE_17_PRO_LAYOUT, IPHONE_17_PRO_MAX_LAYOUT } from './chunk-E2ICKMKH.js';
-export { IPHONE_16E_FRAME, IPHONE_16E_LAYOUT, IPHONE_16E_META, IPHONE_16_FRAME, IPHONE_16_LAYOUT, IPHONE_16_META, IPHONE_17_PRO_FRAME, IPHONE_17_PRO_LAYOUT, IPHONE_17_PRO_MAX_FRAME, IPHONE_17_PRO_MAX_LAYOUT, IPHONE_17_PRO_MAX_META, IPHONE_17_PRO_MAX_SCREEN_RECT, IPHONE_17_PRO_META, IPHONE_17_PRO_SCREEN_RECT, IPHONE_AIR_FRAME, IPHONE_AIR_LAYOUT, IPHONE_AIR_META, IPHONE_SE_3_FRAME, IPHONE_SE_3_LAYOUT, IPHONE_SE_3_META, IPhone16SVG, IPhone16eSVG, IPhone17ProMaxSVG, IPhone17ProSVG, IPhoneAirSVG, IPhoneSE3SVG } from './chunk-E2ICKMKH.js';
+import { PIXEL_9_PRO_META, PIXEL_9_PRO_XL_META, GALAXY_S25_EDGE_META, GALAXY_S25_META, GALAXY_S25_ULTRA_META, PIXEL_9_PRO_LAYOUT, PIXEL_9_PRO_XL_LAYOUT, GALAXY_S25_EDGE_LAYOUT, GALAXY_S25_LAYOUT, GALAXY_S25_ULTRA_LAYOUT } from './chunk-OQKEZGAT.js';
+export { GALAXY_S25_EDGE_FRAME, GALAXY_S25_EDGE_LAYOUT, GALAXY_S25_EDGE_META, GALAXY_S25_FRAME, GALAXY_S25_LAYOUT, GALAXY_S25_META, GALAXY_S25_SCREEN_RECT, GALAXY_S25_ULTRA_FRAME, GALAXY_S25_ULTRA_LAYOUT, GALAXY_S25_ULTRA_META, GALAXY_S25_ULTRA_SCREEN_RECT, GalaxyS25EdgeSVG, GalaxyS25SVG, GalaxyS25UltraSVG, PIXEL_9_PRO_FRAME, PIXEL_9_PRO_LAYOUT, PIXEL_9_PRO_META, PIXEL_9_PRO_XL_FRAME, PIXEL_9_PRO_XL_LAYOUT, PIXEL_9_PRO_XL_META, Pixel9ProSVG, Pixel9ProXLSVG } from './chunk-OQKEZGAT.js';
+import { IPHONE_SE_3_META, IPHONE_16E_META, IPHONE_16_META, IPHONE_AIR_META, IPHONE_17_PRO_META, IPHONE_17_PRO_MAX_META, IPHONE_SE_3_LAYOUT, IPHONE_16E_LAYOUT, IPHONE_16_LAYOUT, IPHONE_AIR_LAYOUT, IPHONE_17_PRO_LAYOUT, IPHONE_17_PRO_MAX_LAYOUT } from './chunk-DLT4UL35.js';
+export { IPHONE_16E_FRAME, IPHONE_16E_LAYOUT, IPHONE_16E_META, IPHONE_16_FRAME, IPHONE_16_LAYOUT, IPHONE_16_META, IPHONE_16_SCREEN_RECT, IPHONE_17_PRO_FRAME, IPHONE_17_PRO_LAYOUT, IPHONE_17_PRO_MAX_FRAME, IPHONE_17_PRO_MAX_LAYOUT, IPHONE_17_PRO_MAX_META, IPHONE_17_PRO_MAX_SCREEN_RECT, IPHONE_17_PRO_META, IPHONE_17_PRO_SCREEN_RECT, IPHONE_AIR_FRAME, IPHONE_AIR_LAYOUT, IPHONE_AIR_META, IPHONE_SE_3_FRAME, IPHONE_SE_3_LAYOUT, IPHONE_SE_3_META, IPhone16SVG, IPhone16eSVG, IPhone17ProMaxSVG, IPhone17ProSVG, IPhoneAirSVG, IPhoneSE3SVG } from './chunk-DLT4UL35.js';
 
 // src/custom/device-registry.ts
 var STORAGE_KEY = "bielaframe-custom-devices";
@@ -713,6 +713,12 @@ function analyzeSVGGeometry(svgString) {
       id: null
     };
   }
+  if (screenRect) {
+    const maskScreen = findMaskBasedScreen(svgString, screenRect);
+    if (maskScreen) {
+      screenRect = maskScreen;
+    }
+  }
   const islandRect = findDynamicIsland(rects, screenRect);
   const sideButtons = findSideButtons(rects, phoneBody);
   const zones = [];
@@ -782,10 +788,10 @@ function findScreenArea(rects, phoneBody, svgW, svgH) {
     const area = r.width * r.height;
     if (area < bodyArea * 0.5) return false;
     if (area >= bodyArea * 0.98) return false;
-    if (r.rx < 10) return false;
+    if (!phoneBody && r.rx < 10) return false;
     if (!r.fill || r.fill === "none") return false;
     if (r.fill.startsWith("url(")) return false;
-    if (isDarkFill(r.fill)) return false;
+    if (isPureBlackFill(r.fill)) return false;
     return true;
   }).sort((a, b) => b.width * b.height - a.width * a.height);
   return fallbackCandidates[0] ?? null;
@@ -894,6 +900,55 @@ function classifySideButtons(sideButtons, phoneBody) {
   }
   return classified;
 }
+function findMaskBasedScreen(svgString, detectedScreen, _svgW, _svgH) {
+  const maskRegex = /<mask\b[^>]*>([\s\S]*?)<\/mask>/gi;
+  let maskMatch;
+  const candidates = [];
+  while ((maskMatch = maskRegex.exec(svgString)) !== null) {
+    const maskBody = maskMatch[1];
+    const pathRegex = /<path\b([^>]*?)\/>/gi;
+    let pathMatch;
+    while ((pathMatch = pathRegex.exec(maskBody)) !== null) {
+      const attrs = pathMatch[1];
+      const d = getAttrValue(attrs, "d");
+      if (!d) continue;
+      const bb = subpathBBox(d);
+      if (!bb || bb.w < 10 || bb.h < 10) continue;
+      if (bb.h < bb.w * 1.3) continue;
+      const overlapX = Math.max(0, Math.min(bb.x + bb.w, detectedScreen.x + detectedScreen.width) - Math.max(bb.x, detectedScreen.x));
+      const overlapY = Math.max(0, Math.min(bb.y + bb.h, detectedScreen.y + detectedScreen.height) - Math.max(bb.y, detectedScreen.y));
+      const overlapArea = overlapX * overlapY;
+      const detectedArea = detectedScreen.width * detectedScreen.height;
+      if (overlapArea < detectedArea * 0.8) continue;
+      const mMatch = d.match(/M\s*(-?[\d.]+)[\s,]+(-?[\d.]+)/i);
+      let rx = 0;
+      if (mMatch) {
+        const mx = parseFloat(mMatch[1]);
+        const my = parseFloat(mMatch[2]);
+        const rxFromY = Math.abs(my - bb.y);
+        const rxFromX = Math.abs(mx - bb.x);
+        rx = Math.max(rxFromY, rxFromX);
+        if (rx < 5) rx = 0;
+      }
+      candidates.push({
+        x: bb.x,
+        y: bb.y,
+        width: bb.w,
+        height: bb.h,
+        rx,
+        fill: "mask-path",
+        id: null
+      });
+    }
+  }
+  if (candidates.length === 0) return null;
+  candidates.sort((a, b) => {
+    const aDiff = Math.abs(a.width * a.height - detectedScreen.width * detectedScreen.height);
+    const bDiff = Math.abs(b.width * b.height - detectedScreen.width * detectedScreen.height);
+    return aDiff - bDiff;
+  });
+  return candidates[0];
+}
 function findPathCutoutScreen(svgString, svgW, svgH) {
   const svgArea = svgW * svgH;
   const pathRegex = /<path\b([^>]*?)\/>/gi;
@@ -1057,6 +1112,20 @@ function isLightFill(fill) {
   }
   return false;
 }
+function isPureBlackFill(fill) {
+  if (!fill) return false;
+  const f = fill.toLowerCase().trim();
+  if (f === "black" || f === "#000" || f === "#000000") return true;
+  if (f === "rgb(0,0,0)" || f === "rgb(0, 0, 0)") return true;
+  const hex6 = f.match(/^#([0-9a-f]{6})$/);
+  if (hex6) {
+    const r = parseInt(hex6[1].slice(0, 2), 16);
+    const g = parseInt(hex6[1].slice(2, 4), 16);
+    const b = parseInt(hex6[1].slice(4, 6), 16);
+    return r < 10 && g < 10 && b < 10;
+  }
+  return false;
+}
 function isDarkFill(fill) {
   if (!fill) return false;
   const f = fill.toLowerCase().trim();
@@ -1141,6 +1210,14 @@ function countOccurrences(str, substr) {
 function applyTransformToRect(attrs, x, y, width, height) {
   const transformAttr = getAttrValue(attrs, "transform");
   if (!transformAttr) return { x, y, width, height };
+  const translateMatch = transformAttr.match(
+    /translate\(\s*(-?[\d.]+)[\s,]+(-?[\d.]+)\s*\)/
+  );
+  if (translateMatch) {
+    const tx = parseFloat(translateMatch[1]);
+    const ty = parseFloat(translateMatch[2]);
+    return { x: x + tx, y: y + ty, width, height };
+  }
   const matrixMatch = transformAttr.match(
     /matrix\(\s*(-?[\d.]+)\s+(-?[\d.]+)\s+(-?[\d.]+)\s+(-?[\d.]+)\s+(-?[\d.]+)\s+(-?[\d.]+)\s*\)/
   );