@feedvalue/core 0.1.14 → 0.1.15

package/dist/index.d.cts

@@ -573,6 +573,7 @@ declare class FeedValue implements FeedValueInstance {
     private modal;
     private overlay;
     private stylesInjected;
+    private viewportResizeCleanup;
     private autoCloseTimeout;
     private isDestroyed;
     /**
@@ -714,8 +715,15 @@ declare class FeedValue implements FeedValueInstance {
      */
     private getModalPositionStyles;
     /**
-     * SVG icons for trigger button (matching widget-bundle exactly)
+     * Smooth viewport resize compensation for mobile browser toolbar show/hide.
+     *
+     * When Chrome/Safari's bottom toolbar appears or disappears, the layout viewport
+     * resizes and position:fixed elements jump. This detects toolbar-sized height
+     * changes and applies an inverse CSS translate to cancel the jump, then animates
+     * back to the natural position. Uses the `translate` CSS property (separate from
+     * `transform`) to avoid conflicting with the hover transform on the trigger.
      */
+    private setupViewportCompensation;
     /**
      * SVG icons for trigger button - must match Lucide icons used in frontend-web
      * chat = MessageCircle, message = MessageSquare, feedback = MessagesSquare,

package/dist/index.d.ts

@@ -573,6 +573,7 @@ declare class FeedValue implements FeedValueInstance {
     private modal;
     private overlay;
     private stylesInjected;
+    private viewportResizeCleanup;
     private autoCloseTimeout;
     private isDestroyed;
     /**
@@ -714,8 +715,15 @@ declare class FeedValue implements FeedValueInstance {
      */
     private getModalPositionStyles;
     /**
-     * SVG icons for trigger button (matching widget-bundle exactly)
+     * Smooth viewport resize compensation for mobile browser toolbar show/hide.
+     *
+     * When Chrome/Safari's bottom toolbar appears or disappears, the layout viewport
+     * resizes and position:fixed elements jump. This detects toolbar-sized height
+     * changes and applies an inverse CSS translate to cancel the jump, then animates
+     * back to the natural position. Uses the `translate` CSS property (separate from
+     * `transform`) to avoid conflicting with the hover transform on the trigger.
      */
+    private setupViewportCompensation;
     /**
      * SVG icons for trigger button - must match Lucide icons used in frontend-web
      * chat = MessageCircle, message = MessageSquare, feedback = MessagesSquare,

package/dist/index.js

@@ -615,6 +615,8 @@ var _FeedValue = class _FeedValue {
     __publicField(this, "modal", null);
     __publicField(this, "overlay", null);
     __publicField(this, "stylesInjected", false);
+    // Viewport resize compensation cleanup
+    __publicField(this, "viewportResizeCleanup", null);
     // Auto-close timeout reference (for cleanup on destroy)
     __publicField(this, "autoCloseTimeout", null);
     // Destroyed flag - guards async continuations (fixes React StrictMode race condition)
@@ -753,6 +755,8 @@ var _FeedValue = class _FeedValue {
       clearTimeout(this.autoCloseTimeout);
       this.autoCloseTimeout = null;
     }
+    this.viewportResizeCleanup?.();
+    this.viewportResizeCleanup = null;
     this.triggerButton?.remove();
     this.modal?.remove();
     this.overlay?.remove();
@@ -1176,6 +1180,7 @@ var _FeedValue = class _FeedValue {
     }
     this.renderTrigger();
     this.renderModal();
+    this.setupViewportCompensation();
   }
   /**
    * Sanitize CSS to block potentially dangerous patterns
@@ -1388,7 +1393,7 @@ var _FeedValue = class _FeedValue {
   getPositionStyles(position) {
     switch (position) {
       case "bottom-left":
-        return "bottom: 20px; left: 20px;";
+        return "bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 20px;";
       case "top-right":
         return "top: 20px; right: 20px;";
       case "top-left":
@@ -1397,7 +1402,7 @@ var _FeedValue = class _FeedValue {
         return "top: 50%; left: 50%; transform: translate(-50%, -50%);";
       case "bottom-right":
       default:
-        return "bottom: 20px; right: 20px;";
+        return "bottom: calc(20px + env(safe-area-inset-bottom, 0px)); right: 20px;";
     }
   }
   /**
@@ -1406,9 +1411,9 @@ var _FeedValue = class _FeedValue {
   getModalPositionStyles(position) {
     switch (position) {
       case "bottom-left":
-        return "bottom: 20px; left: 20px;";
+        return "bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 20px;";
       case "bottom-right":
-        return "bottom: 20px; right: 20px;";
+        return "bottom: calc(20px + env(safe-area-inset-bottom, 0px)); right: 20px;";
       case "top-right":
         return "top: 20px; right: 20px;";
       case "top-left":
@@ -1418,6 +1423,37 @@ var _FeedValue = class _FeedValue {
         return "top: 50%; left: 50%; transform: translate(-50%, -50%);";
     }
   }
+  /**
+   * Smooth viewport resize compensation for mobile browser toolbar show/hide.
+   *
+   * When Chrome/Safari's bottom toolbar appears or disappears, the layout viewport
+   * resizes and position:fixed elements jump. This detects toolbar-sized height
+   * changes and applies an inverse CSS translate to cancel the jump, then animates
+   * back to the natural position. Uses the `translate` CSS property (separate from
+   * `transform`) to avoid conflicting with the hover transform on the trigger.
+   */
+  setupViewportCompensation() {
+    if (typeof window === "undefined") return;
+    let lastHeight = window.innerHeight;
+    const handleResize = () => {
+      const newHeight = window.innerHeight;
+      const delta = newHeight - lastHeight;
+      lastHeight = newHeight;
+      if (Math.abs(delta) <= 5 || Math.abs(delta) >= 120) return;
+      const elements = [this.triggerButton, this.modal].filter(Boolean);
+      for (const el of elements) {
+        el.style.transition = "none";
+        el.style.translate = `0 ${delta}px`;
+        void el.offsetHeight;
+        el.style.transition = "translate 0.3s ease-out";
+        el.style.translate = "0 0";
+      }
+    };
+    window.addEventListener("resize", handleResize, { passive: true });
+    this.viewportResizeCleanup = () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }
   /**
    * Parse SVG string to DOM element safely using DOMParser
    */
@@ -1618,9 +1654,6 @@ var _FeedValue = class _FeedValue {
     }
   }
 };
-/**
- * SVG icons for trigger button (matching widget-bundle exactly)
- */
 /**
  * SVG icons for trigger button - must match Lucide icons used in frontend-web
  * chat = MessageCircle, message = MessageSquare, feedback = MessagesSquare,