@biela.dev/core 1.7.4 → 1.7.6

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",