@floegence/floe-webapp-core 0.73.0 → 0.74.2

package/dist/viewport.d.ts

@@ -22,11 +22,13 @@ export interface ViewportSnapshot {
     };
     safeArea: ViewportInsets;
     keyboardOpen: boolean;
-    /** Add to client coordinates when positioning a document-level fixed element. */
+    /** Add to client coordinates before dividing by fixedScale for document-level fixed CSS. */
     fixedOffset: {
         left: number;
         top: number;
     };
+    /** Effective CSS zoom inherited by a document-body portal. Client bounds stay unscaled. */
+    fixedScale: number;
 }
 export interface ViewportSource {
     width: number;
@@ -35,6 +37,7 @@ export interface ViewportSource {
         left: number;
         top: number;
     };
+    fixedScale?: number;
     visualViewport?: {
         width: number;
         height: number;

package/dist/viewport.js

@@ -1,90 +1,95 @@
-const u = (t, e) => Number.isFinite(t) && Number(t) > 0 ? Number(t) : Math.max(0, e);
+const p = (t, e) => Number.isFinite(t) && Number(t) > 0 ? Number(t) : Math.max(0, e);
 function g(t) {
-  const e = t.visualViewport, n = u(e?.width, t.width), i = u(e?.height, t.height), o = t.fixedOrigin ?? { left: 0, top: 0 }, s = Math.max(0, e?.offsetLeft || 0) + o.left, a = Math.max(0, e?.offsetTop || 0) + o.top, r = t.touch && t.editing && Math.abs((e?.scale ?? 1) - 1) < 0.01 && t.height - i > 100;
+  const e = t.visualViewport, o = p(e?.width, t.width), s = p(e?.height, t.height), n = t.fixedOrigin ?? { left: 0, top: 0 }, r = Math.max(0, e?.offsetLeft || 0) + n.left, a = Math.max(0, e?.offsetTop || 0) + n.top, i = t.touch && t.editing && Math.abs((e?.scale ?? 1) - 1) < 0.01 && t.height - s > 100;
   return {
-    visible: { left: s, top: a, width: n, height: i, right: s + n, bottom: a + i },
+    visible: { left: r, top: a, width: o, height: s, right: r + o, bottom: a + s },
     layout: { width: t.width, height: t.height },
-    safeArea: { ...t.safeArea, bottom: r ? 0 : t.safeArea.bottom },
-    keyboardOpen: r,
-    fixedOffset: { left: -o.left, top: -o.top }
+    safeArea: { ...t.safeArea, bottom: i ? 0 : t.safeArea.bottom },
+    keyboardOpen: i,
+    fixedOffset: { left: -n.left, top: -n.top },
+    fixedScale: p(t.fixedScale, 1)
   };
 }
-function b(t) {
+function x(t) {
   let e = t.activeElement;
   for (; e?.shadowRoot?.activeElement; ) e = e.shadowRoot.activeElement;
   return !e || e.matches('[disabled], [readonly], [inputmode="none"]') ? !1 : e.matches('textarea, input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');
 }
-function m(t) {
+function b(t) {
   const e = t.document.createElement("div");
   return e.setAttribute("aria-hidden", "true"), e.style.cssText = "position:fixed;top:0;left:0;width:100%;height:100dvh;visibility:hidden;pointer-events:none;box-sizing:border-box;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)", t.document.documentElement.append(e), e;
 }
-function l(t, e) {
-  const n = e.getBoundingClientRect(), i = t.getComputedStyle(e), o = (s) => Math.max(0, Number.parseFloat(s) || 0);
+function u(t, e) {
+  const o = e.getBoundingClientRect(), s = t.getComputedStyle(e), n = (i) => Math.max(0, Number.parseFloat(i) || 0), r = (i) => i ? p(Number.parseFloat(t.getComputedStyle(i).zoom), 1) : 1, a = r(t.document.documentElement);
   return g({
-    width: n.width || t.innerWidth,
-    height: n.height || t.innerHeight,
+    width: o.width || t.innerWidth,
+    height: o.height / a || t.innerHeight,
     visualViewport: t.visualViewport,
-    fixedOrigin: { left: n.left, top: n.top },
-    safeArea: { top: o(i.paddingTop), right: o(i.paddingRight), bottom: o(i.paddingBottom), left: o(i.paddingLeft) },
-    editing: b(t.document),
+    fixedOrigin: { left: o.left, top: o.top },
+    fixedScale: a * r(t.document.body),
+    safeArea: { top: n(s.paddingTop), right: n(s.paddingRight), bottom: n(s.paddingBottom), left: n(s.paddingLeft) },
+    editing: x(t.document),
     touch: t.matchMedia?.("(any-pointer: coarse)").matches ?? !1
   });
 }
-const d = /* @__PURE__ */ new WeakMap();
-function x(t) {
-  const e = d.get(t);
+const c = /* @__PURE__ */ new WeakMap();
+function y(t) {
+  const e = c.get(t);
   if (e) return e.snapshot;
-  const n = m(t);
+  const o = b(t);
   try {
-    return l(t, n);
+    return u(t, o);
   } finally {
-    n.remove();
+    o.remove();
   }
 }
-function y(t, e) {
-  let n = d.get(t);
-  if (!n) {
-    const o = m(t);
-    let s = 0;
-    const a = /* @__PURE__ */ new Set(), r = { snapshot: l(t, o), listeners: a, dispose: () => {
-    } }, c = () => {
-      s || (s = t.requestAnimationFrame(() => {
-        s = 0, r.snapshot = l(t, o);
-        for (const p of a) p(r.snapshot);
+function S(t, e) {
+  let o = c.get(t);
+  if (!o) {
+    const n = b(t);
+    let r = 0;
+    const a = /* @__PURE__ */ new Set(), i = { snapshot: u(t, n), listeners: a, dispose: () => {
+    } }, f = () => {
+      r || (r = t.requestAnimationFrame(() => {
+        r = 0, i.snapshot = u(t, n);
+        for (const d of a) d(i.snapshot);
       }));
-    }, f = [
+    }, l = [
       [t, "resize"],
       [t, "scroll"],
       [t, "orientationchange"],
       [t.document, "focusin"],
       [t.document, "focusout"]
     ];
-    t.visualViewport && f.push([t.visualViewport, "resize"], [t.visualViewport, "scroll"]);
-    for (const [p, h] of f) p.addEventListener(h, c);
-    r.dispose = () => {
-      for (const [p, h] of f) p.removeEventListener(h, c);
-      s && t.cancelAnimationFrame(s), o.remove(), d.delete(t);
-    }, d.set(t, r), n = r;
+    t.visualViewport && l.push([t.visualViewport, "resize"], [t.visualViewport, "scroll"]);
+    for (const [d, h] of l) d.addEventListener(h, f);
+    const m = new MutationObserver(f);
+    for (const d of [t.document.documentElement, t.document.body])
+      d && m.observe(d, { attributes: !0, attributeFilter: ["class", "style"] });
+    i.dispose = () => {
+      for (const [d, h] of l) d.removeEventListener(h, f);
+      m.disconnect(), r && t.cancelAnimationFrame(r), n.remove(), c.delete(t);
+    }, c.set(t, i), o = i;
   }
-  n.listeners.add(e), e(n.snapshot);
-  const i = n;
+  o.listeners.add(e), e(o.snapshot);
+  const s = o;
   return () => {
-    i.listeners.delete(e), i.listeners.size === 0 && i.dispose();
+    s.listeners.delete(e), s.listeners.size === 0 && s.dispose();
   };
 }
-function V(t) {
-  const { visible: e } = t;
+function E(t) {
+  const { visible: e, fixedScale: o } = t;
   return {
     position: "fixed",
-    left: `${e.left + t.fixedOffset.left}px`,
-    top: `${e.top + t.fixedOffset.top}px`,
-    width: `${e.width}px`,
-    height: `${e.height}px`
+    left: `${(e.left + t.fixedOffset.left) / o}px`,
+    top: `${(e.top + t.fixedOffset.top) / o}px`,
+    width: `${e.width / o}px`,
+    height: `${e.height / o}px`
   };
 }
 export {
-  y as observeViewport,
-  x as readViewportSnapshot,
+  S as observeViewport,
+  y as readViewportSnapshot,
   g as resolveViewportSnapshot,
-  V as viewportStyle
+  E as viewportStyle
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.73.0",
+  "version": "0.74.2",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",