@biela.dev/core 1.7.1 → 1.7.3

package/dist/index.cjs

@@ -12,7 +12,11 @@ function useContainerSize(ref) {
     if (!el) return;
     const observer = new ResizeObserver(([entry]) => {
       if (!entry) return;
-      const { width, height } = entry.contentRect;
+      let { width, height } = entry.contentRect;
+      if (typeof window !== "undefined") {
+        width = Math.min(width, window.innerWidth);
+        height = Math.min(height, window.innerHeight);
+      }
       setSize((prev) => {
         if (prev.width === width && prev.height === height) return prev;
         return { width, height };
@@ -472,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",
     {
@@ -479,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,