@biela.dev/core 1.7.5 → 1.7.7

package/dist/index.d.cts

@@ -90,11 +90,14 @@ 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.
+ * Safety features:
+ * 1. Clamps reported size to the visual viewport so a mis-sized parent
+ *    can never cause the device frame to render larger than the screen.
+ * 2. When the element has 0 height (common AI-generated code mistake:
+ *    height: auto or height: 100% without explicit ancestor height),
+ *    uses a viewport-based fallback so the device still renders.
+ * 3. Listens for window resize to stay in sync.
  */
 declare function useContainerSize(ref: RefObject<HTMLElement | null>): ContainerSize;
 

package/dist/index.d.ts

@@ -90,11 +90,14 @@ 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.
+ * Safety features:
+ * 1. Clamps reported size to the visual viewport so a mis-sized parent
+ *    can never cause the device frame to render larger than the screen.
+ * 2. When the element has 0 height (common AI-generated code mistake:
+ *    height: auto or height: 100% without explicit ancestor height),
+ *    uses a viewport-based fallback so the device still renders.
+ * 3. Listens for window resize to stay in sync.
  */
 declare function useContainerSize(ref: RefObject<HTMLElement | null>): ContainerSize;
 

package/dist/index.js

@@ -8,10 +8,17 @@ function useContainerSize(ref) {
   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);
       }
@@ -19,9 +26,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;
 }
@@ -630,9 +643,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",
@@ -689,10 +701,11 @@ function DeviceFrame({
                       children: /* @__PURE__ */ jsx(DeviceErrorBoundary, { children })
                     }
                   ),
-                  DeviceSVGComponent && /* @__PURE__ */ jsx("div", { ref: frameOverlayRef, children: /* @__PURE__ */ jsx(
-                    DeviceSVGComponent,
+                  DeviceSVGComponent && /* @__PURE__ */ jsxs(
+                    "div",
                     {
-                      colorScheme,
+                      ref: frameOverlayRef,
+                      className: "bielaframe-svg-overlay",
                       style: {
                         position: "absolute",
                         top: 0,
@@ -700,10 +713,24 @@ function DeviceFrame({
                         width: frameTotalW,
                         height: frameTotalH,
                         pointerEvents: "none",
-                        zIndex: 10
-                      }
+                        zIndex: 10,
+                        overflow: "hidden"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `.bielaframe-svg-overlay svg { width: 100% !important; height: 100% !important; }` } }),
+                        /* @__PURE__ */ jsx(
+                          DeviceSVGComponent,
+                          {
+                            colorScheme,
+                            style: {
+                              width: "100%",
+                              height: "100%"
+                            }
+                          }
+                        )
+                      ]
                     }
-                  ) }),
+                  ),
                   showSafeAreaOverlay && /* @__PURE__ */ jsx(
                     "div",
                     {