@biela.dev/core 1.7.2 → 1.7.4

package/dist/index.cjs

@@ -476,6 +476,31 @@ function registerCustomDeviceSVG(deviceId, svgString, frame, cropViewBox, screen
     });
     processedSVG = bodySVG.replace(defsPlaceholder, defsContent);
   }
+  let correctedFrame = frame;
+  if (screenRect && screenRect.width > 0 && screenRect.height > 0) {
+    const finalVBMatch = processedSVG.match(/viewBox\s*=\s*["']([^"']+)["']/i);
+    if (finalVBMatch) {
+      const vbParts = finalVBMatch[1].split(/[\s,]+/).map(Number);
+      if (vbParts.length >= 4) {
+        const vbW = vbParts[2];
+        const vbH = vbParts[3];
+        if (vbW > 0 && vbH > 0) {
+          const sx = frame.screenWidth / screenRect.width;
+          const sy = frame.screenHeight / screenRect.height;
+          const s = Math.min(sx, sy);
+          correctedFrame = {
+            ...frame,
+            bezelLeft: Math.round(screenRect.x * s),
+            bezelTop: Math.round(screenRect.y * s),
+            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)
+          };
+        }
+      }
+    }
+  }
   const CustomSVGComponent = ({ style }) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -483,7 +508,7 @@ function registerCustomDeviceSVG(deviceId, svgString, frame, cropViewBox, screen
       dangerouslySetInnerHTML: { __html: processedSVG }
     }
   );
-  SVG_REGISTRY[deviceId] = { component: CustomSVGComponent, frame };
+  SVG_REGISTRY[deviceId] = { component: CustomSVGComponent, frame: correctedFrame };
 }
 function DeviceFrame({
   device: deviceProp,
@@ -608,6 +633,8 @@ function DeviceFrame({
       style: {
         width: "100%",
         height: "100%",
+        minHeight: 0,
+        maxHeight: "100%",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",