@floegence/floe-webapp-core 0.74.0 → 0.75.0

package/dist/reload-placeholder.js

@@ -1,6 +1,6 @@
 function P(h) {
   const s = document, $ = 48e3, b = 240, A = () => h.scopeStorageKey ? sessionStorage.getItem(h.scopeStorageKey) ?? "" : "", g = (o) => typeof o == "string" && o.length <= 120 && !/[;{}<>\\]|url\(|var\(/i.test(o) && CSS.supports("color", o);
-  let l, a, C = "", d;
+  let l, c, C = "", d;
   try {
     const o = sessionStorage.getItem(h.storageKey), e = o && o.length <= $ ? JSON.parse(o) : void 0;
     e?.version === 1 && e.scope === A() && e.width === innerWidth && e.height === innerHeight && g(e.background) && Array.isArray(e.scroll) && e.scroll.length <= 12 && e.scroll.every((r) => Array.isArray(r) && r.length === 3 && /^[a-z0-9-]{1,48}$/.test(r[0]) && r.slice(1).every((i) => typeof i == "number" && Number.isFinite(i) && i >= 0 && i <= 1e7)) && Array.isArray(e.boxes) && e.boxes.length > 0 && e.boxes.length <= b && e.boxes.every((r) => Array.isArray(r) && r.length === 7 && r.slice(0, 5).every((i) => typeof i == "number" && Number.isFinite(i) && i >= 0 && i <= 2e4) && g(r[5]) && g(r[6])) && (d = e);
@@ -17,19 +17,19 @@ function P(h) {
         pointerEvents: "none",
         contain: "strict"
       });
-      for (const [o, e, r, i, x, m, w] of d.boxes) {
-        const p = s.createElement("div");
-        Object.assign(p.style, {
+      for (const [o, e, r, i, m, x, w] of d.boxes) {
+        const f = s.createElement("div");
+        Object.assign(f.style, {
           position: "absolute",
           left: `${o}px`,
           top: `${e}px`,
           width: `${r}px`,
           height: `${i}px`,
-          borderRadius: `${x}px`,
-          backgroundColor: m,
+          borderRadius: `${m}px`,
+          backgroundColor: x,
           border: `1px solid ${w}`,
           boxSizing: "border-box"
-        }), l.append(p);
+        }), l.append(f);
       }
       s.body.append(l);
     }
@@ -45,53 +45,55 @@ function P(h) {
     }
     d = void 0, l?.remove(), l = void 0;
   }, N = () => {
-    a = void 0, y();
+    c = void 0, y();
     try {
       sessionStorage.removeItem(h.storageKey);
     } catch {
     }
   }, O = () => {
-    if (!a?.isConnected || l) return;
+    if (!c?.isConnected || l) return;
     const o = [], e = getComputedStyle(s.body).backgroundColor;
     if (!g(e)) return;
     const r = (n) => {
-      const t = n.getBoundingClientRect(), c = getComputedStyle(n);
-      return t.width && t.height && t.bottom > 0 && t.right > 0 && t.top < innerHeight && t.left < innerWidth && c.visibility === "visible" ? t : null;
-    }, i = (n, t, c = "transparent", u = 3) => {
-      if (o.length >= b || !g(t) || !g(c)) return;
-      const f = Math.max(0, n.x), R = Math.max(0, n.y), k = Math.min(innerWidth, n.right) - f, E = Math.min(innerHeight, n.bottom) - R;
-      k <= 0 || E <= 0 || o.push([f, R, k, E, Math.max(0, Math.min(u, 100)), t, c]);
+      const t = n.getBoundingClientRect(), a = getComputedStyle(n);
+      return t.width && t.height && t.bottom > 0 && t.right > 0 && t.top < innerHeight && t.left < innerWidth && a.visibility === "visible" ? t : null;
+    }, i = (n, t, a = "transparent", u = 3) => {
+      if (o.length >= b || !g(t) || !g(a)) return;
+      const p = Math.max(0, n.x), R = Math.max(0, n.y), k = Math.min(innerWidth, n.right) - p, E = Math.min(innerHeight, n.bottom) - R;
+      k <= 0 || E <= 0 || o.push([p, R, k, E, Math.max(0, Math.min(u, 100)), t, a]);
     };
-    for (const n of a.querySelectorAll(C)) {
+    for (const n of c.querySelectorAll(C)) {
+      if (n.closest("[data-floe-reload-omit]")) continue;
       const t = r(n);
       if (!t) continue;
-      const c = getComputedStyle(n);
-      i(t, c.backgroundColor, c.borderTopStyle === "none" ? "transparent" : c.borderTopColor, parseFloat(c.borderRadius) || 0);
+      const a = getComputedStyle(n);
+      i(t, a.backgroundColor, a.borderTopStyle === "none" ? "transparent" : a.borderTopColor, parseFloat(a.borderRadius) || 0);
     }
-    const x = getComputedStyle(a).color, m = g(x) ? `color-mix(in srgb, ${x} 9%, ${e})` : "#d4d4d4";
-    for (const n of a.querySelectorAll("img,svg,input,textarea,canvas,video")) {
+    const m = getComputedStyle(c).color, x = g(m) ? `color-mix(in srgb, ${m} 9%, ${e})` : "#d4d4d4";
+    for (const n of c.querySelectorAll("img,svg,input,textarea,canvas,video")) {
+      if (n.closest("[data-floe-reload-omit]")) continue;
       const t = r(n);
-      t && i(t, m, "transparent", Math.min(t.height / 4, 8));
+      t && i(t, x, "transparent", Math.min(t.height / 4, 8));
     }
-    const w = s.createTreeWalker(a, NodeFilter.SHOW_TEXT), p = s.createRange();
+    const w = s.createTreeWalker(c, NodeFilter.SHOW_TEXT), f = s.createRange();
     let S, T = 0;
     for (; (S = w.nextNode()) && o.length < b && T++ < 12e3; ) {
       const n = S.parentElement;
-      if (!(!n || n.closest('script,style,textarea,svg,[aria-hidden="true"]') || !r(n))) {
-        p.selectNodeContents(S);
-        for (const t of p.getClientRects())
-          t.width < 2 || i(new DOMRect(t.x, t.y + t.height * 0.22, t.width, t.height * 0.56), m);
+      if (!(!n || n.closest('script,style,textarea,svg,[aria-hidden="true"],[data-floe-reload-omit]') || !r(n))) {
+        f.selectNodeContents(S);
+        for (const t of f.getClientRects())
+          t.width < 2 || i(new DOMRect(t.x, t.y + t.height * 0.22, t.width, t.height * 0.56), x);
       }
     }
     if (o.length)
       try {
         const n = [];
-        for (const u of a.querySelectorAll("[data-floe-reload-scroll]")) {
-          const f = u.getAttribute("data-floe-reload-scroll");
-          /^[a-z0-9-]{1,48}$/.test(f) && n.length < 12 && r(u) && n.push([f, u.scrollLeft, u.scrollTop]);
+        for (const u of c.querySelectorAll("[data-floe-reload-scroll]")) {
+          const p = u.getAttribute("data-floe-reload-scroll");
+          /^[a-z0-9-]{1,48}$/.test(p) && n.length < 12 && r(u) && n.push([p, u.scrollLeft, u.scrollTop]);
         }
-        const t = { version: 1, scope: A(), width: innerWidth, height: innerHeight, background: e, boxes: o, scroll: n }, c = JSON.stringify(t);
-        c.length <= $ && sessionStorage.setItem(h.storageKey, c);
+        const t = { version: 1, scope: A(), width: innerWidth, height: innerHeight, background: e, boxes: o, scroll: n }, a = JSON.stringify(t);
+        a.length <= $ && sessionStorage.setItem(h.storageKey, a);
       } catch {
       }
   };
@@ -104,7 +106,7 @@ function P(h) {
     },
     finish: y,
     arm(o, e) {
-      a = o, C = e;
+      c = o, C = e;
     },
     clear: N
   }, window.addEventListener("pagehide", O), window.addEventListener("resize", y, { once: !0 }), window.addEventListener("pageshow", (o) => {

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.74.0",
+  "version": "0.75.0",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",