@biela.dev/core 1.7.1 → 1.7.3

package/dist/index.d.cts

@@ -91,6 +91,10 @@ interface ContainerSize {
  * Observes an element's content box dimensions via ResizeObserver.
  * Foundation of adaptive scaling — same mechanism as Xcode's window resize detection.
  * Uses the actual canvas div, not the window, so it's panel-independent.
+ *
+ * Safety: clamps reported size to the visual viewport so that a mis-sized
+ * parent (e.g. height: auto or height: 100% with no fixed ancestor) can never
+ * cause the device frame to render larger than the screen.
  */
 declare function useContainerSize(ref: RefObject<HTMLElement | null>): ContainerSize;
 

package/dist/index.d.ts

@@ -91,6 +91,10 @@ interface ContainerSize {
  * Observes an element's content box dimensions via ResizeObserver.
  * Foundation of adaptive scaling — same mechanism as Xcode's window resize detection.
  * Uses the actual canvas div, not the window, so it's panel-independent.
+ *
+ * Safety: clamps reported size to the visual viewport so that a mis-sized
+ * parent (e.g. height: auto or height: 100% with no fixed ancestor) can never
+ * cause the device frame to render larger than the screen.
  */
 declare function useContainerSize(ref: RefObject<HTMLElement | null>): ContainerSize;
 

package/dist/index.js

@@ -10,7 +10,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 };
@@ -470,6 +474,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__ */ jsx(
     "div",
     {
@@ -477,7 +506,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,