@biela.dev/core 1.7.5 → 1.7.7

package/dist/lite.cjs

@@ -76,10 +76,17 @@ function useContainerSize(ref) {
   react.useEffect(() => {
     const el = ref.current;
     if (!el) return;
-    const observer = new ResizeObserver(([entry]) => {
-      if (!entry) return;
-      let { width, height } = entry.contentRect;
+    const update = () => {
+      const rect = el.getBoundingClientRect();
+      let width = rect.width;
+      let height = rect.height;
       if (typeof window !== "undefined") {
+        if (height <= 0) {
+          height = Math.max(200, window.innerHeight - Math.max(0, rect.top));
+        }
+        if (width <= 0) {
+          width = window.innerWidth;
+        }
         width = Math.min(width, window.innerWidth);
         height = Math.min(height, window.innerHeight);
       }
@@ -87,9 +94,15 @@ function useContainerSize(ref) {
         if (prev.width === width && prev.height === height) return prev;
         return { width, height };
       });
-    });
+    };
+    const observer = new ResizeObserver(() => update());
     observer.observe(el);
-    return () => observer.disconnect();
+    update();
+    window.addEventListener("resize", update);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", update);
+    };
   }, [ref]);
   return size;
 }
@@ -722,9 +735,8 @@ function DeviceFrame({
       className: "bielaframe-sentinel",
       style: {
         width: "100%",
-        height: "100%",
+        height: containerH > 0 ? containerH : "100%",
         minHeight: 0,
-        maxHeight: "100%",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
@@ -781,10 +793,11 @@ function DeviceFrame({
                       children: /* @__PURE__ */ jsxRuntime.jsx(DeviceErrorBoundary, { children })
                     }
                   ),
-                  DeviceSVGComponent && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: frameOverlayRef, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    DeviceSVGComponent,
+                  DeviceSVGComponent && /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
                     {
-                      colorScheme,
+                      ref: frameOverlayRef,
+                      className: "bielaframe-svg-overlay",
                       style: {
                         position: "absolute",
                         top: 0,
@@ -792,10 +805,24 @@ function DeviceFrame({
                         width: frameTotalW,
                         height: frameTotalH,
                         pointerEvents: "none",
-                        zIndex: 10
-                      }
+                        zIndex: 10,
+                        overflow: "hidden"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: `.bielaframe-svg-overlay svg { width: 100% !important; height: 100% !important; }` } }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          DeviceSVGComponent,
+                          {
+                            colorScheme,
+                            style: {
+                              width: "100%",
+                              height: "100%"
+                            }
+                          }
+                        )
+                      ]
                     }
-                  ) }),
+                  ),
                   showSafeAreaOverlay && /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {