@pablozaiden/webapp 0.6.6 → 0.6.8

package/docs/ui-guidelines.md

@@ -29,7 +29,7 @@ twice without a distinct user-facing reason.
 
 The framework owns the mobile shell breakpoint. `MOBILE_BREAKPOINT_PX` and `MOBILE_MEDIA_QUERY` are exported from `@pablozaiden/webapp/web` for application JavaScript that needs to coordinate with the shell; do not add an independent `innerWidth` threshold for shell behavior. The generated document initializes the `data-wapp-mobile` marker on the root element before the client and styles load, and `WebAppRoot` keeps it synchronized with media-query changes. Custom CSS that follows the framework mobile mode should use that marker rather than repeating a numeric media query.
 
-`WebAppRoot` follows `visualViewport` resize/scroll, window resize, orientation changes, focus boundaries, and mobile media-query changes. It schedules an immediate animation-frame sync first. Two named, bounded retries remain for mobile Safari/WebKit and Chromium behavior where focus/blur or orientation notifications can arrive before the final `visualViewport` geometry is available while the keyboard, browser chrome, or rotation is settling. The first retry catches the post-event layout pass; the final retry catches the end of that transition when no further geometry event is emitted. These retries are implementation fallbacks, not general synchronization primitives, and are cancelled with the associated animation frame and listeners when the root is unmounted.
+`WebAppRoot` follows `visualViewport` resize/scroll, window resize, orientation changes, focus boundaries, and mobile media-query changes. CSS `100dvh` is the authoritative height when the browser supports dynamic viewport units; the hook removes its inline override in that case so a temporarily limited `visualViewport` cannot pin the shell after a rotation or keyboard transition. The visual-viewport pixel value and two named, bounded retries remain only as a fallback for browsers without `100dvh`. The first retry catches the post-event layout pass; the final retry catches the end of that transition when no further geometry event is emitted. These retries are implementation fallbacks, not general synchronization primitives, and are cancelled with the associated animation frame and listeners when the root is unmounted.
 
 The framework mobile mode is separate from the narrower `640px` settings-layout rules. Do not add global touch handlers or arbitrary sleeps to reproduce either behavior; use the framework drawer controls and the existing event-driven viewport lifecycle.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pablozaiden/webapp",
-  "version": "0.6.6",
+  "version": "0.6.8",
   "description": "Opinionated Bun + React webapp framework for single-server apps",
   "license": "MIT",
   "type": "module",

package/src/web/mobile-hooks.ts

@@ -41,6 +41,8 @@ export function useMobileViewportHeight(isMobile: boolean): void {
 
     const root = document.documentElement;
     const viewport = window.visualViewport;
+    const usesDynamicViewportUnit = typeof window.CSS?.supports === "function"
+      && window.CSS.supports("height", "100dvh");
     const timers = new Set<number>();
     let frame = 0;
 
@@ -55,9 +57,13 @@ export function useMobileViewportHeight(isMobile: boolean): void {
         return;
       }
 
-      const height = Math.round(viewport?.height ?? window.innerHeight);
-      if (height > 0) {
-        root.style.setProperty("--wapp-viewport-height", `${height}px`);
+      if (usesDynamicViewportUnit) {
+        clearViewportHeight();
+      } else {
+        const height = Math.round(viewport?.height ?? window.innerHeight);
+        if (height > 0) {
+          root.style.setProperty("--wapp-viewport-height", `${height}px`);
+        }
       }
 
       const scrollingElement = document.scrollingElement;
@@ -83,7 +89,7 @@ export function useMobileViewportHeight(isMobile: boolean): void {
 
     const handleViewportTransition = () => {
       scheduleSync();
-      if (isMobile) {
+      if (isMobile && !usesDynamicViewportUnit) {
         scheduleViewportRetry(MOBILE_VIEWPORT_FIRST_SETTLE_DELAY_MS);
         scheduleViewportRetry(MOBILE_VIEWPORT_FINAL_SETTLE_DELAY_MS);
       }

package/src/web/mobile.ts

@@ -3,9 +3,10 @@ export const MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT_PX}px)`;
 export const MOBILE_STATE_ATTRIBUTE = "data-wapp-mobile";
 
 /*
- * Mobile Safari/WebKit and Chromium can report focus or orientation changes
- * before visualViewport reaches its final geometry. The first retry catches
- * the post-event layout pass; the final retry catches the end of the keyboard,
+ * These bounded retries are only used by browsers without 100dvh. Mobile
+ * Safari/WebKit and Chromium can report focus or orientation changes before
+ * visualViewport reaches its final geometry. The first retry catches the
+ * post-event layout pass; the final retry catches the end of the keyboard,
  * browser-chrome, or rotation transition when no further event is emitted.
  */
 export const MOBILE_VIEWPORT_FIRST_SETTLE_DELAY_MS = 120;

package/src/web/styles.css

@@ -85,7 +85,7 @@ html,
 body,
 #root {
   height: 100%;
-  min-height: 100%;
+  min-height: var(--wapp-viewport-height);
 }
 
 body {
@@ -899,7 +899,7 @@ textarea::placeholder {
 }
 
 .wapp-auth-screen {
-  min-height: 100vh;
+  min-height: var(--wapp-viewport-height);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -908,7 +908,7 @@ textarea::placeholder {
 }
 
 .wapp-device-screen {
-  min-height: 100vh;
+  min-height: var(--wapp-viewport-height);
   display: flex;
   align-items: center;
   justify-content: center;