@floegence/floe-webapp-core 0.78.9 → 0.78.10

package/dist/components/layout/AppViewport.js

@@ -1,34 +1,53 @@
-import { insert as d, effect as u, className as f, setAttribute as p, style as m, template as w, use as h } from "solid-js/web";
-import { createSignal as V, onMount as b, onCleanup as s, untrack as y } from "solid-js";
-import { viewportStyle as g, observeViewport as E } from "../../viewport.js";
-var L = /* @__PURE__ */ w("<div data-floe-app-viewport style=position:fixed;inset:0;overflow:hidden;min-height:0>");
-function A(o) {
-  const [i, v] = V();
-  let n;
-  return b(() => {
-    const e = n?.ownerDocument.defaultView;
+import { insert as d, effect as f, className as m, setAttribute as p, style as w, template as h, use as V } from "solid-js/web";
+import { createSignal as b, onMount as y, onCleanup as l, untrack as E } from "solid-js";
+import { viewportStyle as g, observeViewport as L } from "../../viewport.js";
+import { isKeyboardEditingElement as M } from "../../utils/focus.js";
+var x = /* @__PURE__ */ h("<div data-floe-app-viewport style=position:fixed;inset:0;overflow:hidden;min-height:0>");
+function A(s) {
+  const [a, c] = b();
+  let i;
+  const u = () => {
+    const e = a();
+    if (!e) return {
+      height: "100dvh"
+    };
+    const r = g(e), t = i?.ownerDocument.defaultView?.visualViewport?.scale ?? 1;
+    return Math.abs(t - 1) < 0.01 ? {
+      ...r,
+      left: "0px",
+      top: "0px"
+    } : r;
+  };
+  return y(() => {
+    const e = i?.ownerDocument.defaultView;
     if (!e) return;
-    const r = () => {
+    const r = (o) => {
+      if (o.button !== 0 || o.defaultPrevented || !e.matchMedia("(any-pointer: coarse)").matches || Math.abs((e.visualViewport?.scale ?? 1) - 1) >= 0.01) return;
+      const n = o.target;
+      !(n instanceof Element) || !M(n) || n.matches(":focus") || n.closest("[inert]") || n.focus({
+        preventScroll: !0
+      });
+    };
+    e.document.addEventListener("mousedown", r);
+    const t = () => {
       Math.abs((e.visualViewport?.scale ?? 1) - 1) >= 0.01 || (e.scrollX || e.scrollY) && e.scrollTo({
         left: 0,
         top: 0,
         behavior: "instant"
       });
     };
-    e.addEventListener("scroll", r), e.visualViewport?.addEventListener("resize", r), r(), s(() => {
-      e.removeEventListener("scroll", r), e.visualViewport?.removeEventListener("resize", r);
-    }), s(E(e, (t) => {
-      v(t), y(() => o.onViewportChange?.(t));
+    e.addEventListener("scroll", t), e.visualViewport?.addEventListener("resize", t), t(), l(() => {
+      e.document.removeEventListener("mousedown", r), e.removeEventListener("scroll", t), e.visualViewport?.removeEventListener("resize", t);
+    }), l(L(e, (o) => {
+      c(o), E(() => s.onViewportChange?.(o));
     }));
   }), (() => {
-    var e = L(), r = n;
-    return typeof r == "function" ? h(r, e) : n = e, d(e, () => o.children), u((t) => {
-      var a = o.class, l = i()?.keyboardOpen || void 0, c = {
-        ...i() ? g(i()) : {
-          height: "100dvh"
-        }
+    var e = x(), r = i;
+    return typeof r == "function" ? V(r, e) : i = e, d(e, () => s.children), f((t) => {
+      var o = s.class, n = a()?.keyboardOpen || void 0, v = {
+        ...u()
       };
-      return a !== t.e && f(e, t.e = a), l !== t.t && p(e, "data-keyboard-open", t.t = l), t.a = m(e, c, t.a), t;
+      return o !== t.e && m(e, t.e = o), n !== t.t && p(e, "data-keyboard-open", t.t = n), t.a = w(e, v, t.a), t;
     }, {
       e: void 0,
       t: void 0,

package/dist/utils/focus.d.ts

@@ -1,2 +1,4 @@
+/** Native editors that can request a software keyboard. */
+export declare function isKeyboardEditingElement(element: Element | null): element is HTMLElement;
 export declare function getFirstFocusableElement(root: ParentNode): HTMLElement | null;
 export declare function getFocusableElements(root: ParentNode): HTMLElement[];

package/dist/utils/focus.js

@@ -7,19 +7,23 @@ const o = [
   '[tabindex]:not([tabindex="-1"])',
   '[contenteditable="true"]'
 ].join(",");
-function i(t) {
+function u(t) {
+  return !t || typeof t.focus != "function" || t.matches(':disabled, [readonly], [inputmode="none"]') ? !1 : t.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 l(t) {
   if (typeof HTMLElement > "u") return null;
   const e = t.querySelector(o);
   return e instanceof HTMLElement ? e : null;
 }
-function u(t) {
+function r(t) {
   if (typeof HTMLElement > "u") return [];
-  const e = [], l = t.querySelectorAll(o);
-  for (const n of l)
+  const e = [], i = t.querySelectorAll(o);
+  for (const n of i)
     n instanceof HTMLElement && e.push(n);
   return e;
 }
 export {
-  i as getFirstFocusableElement,
-  u as getFocusableElements
+  l as getFirstFocusableElement,
+  r as getFocusableElements,
+  u as isKeyboardEditingElement
 };

package/dist/viewport.d.ts

@@ -49,7 +49,7 @@ export interface ViewportSource {
     editing: boolean;
     touch: boolean;
 }
-export declare function resolveViewportSnapshot(source: ViewportSource): ViewportSnapshot;
+export declare function resolveViewportSnapshot(source: ViewportSource, previous?: ViewportSnapshot): ViewportSnapshot;
 export declare function readViewportSnapshot(view: Window): ViewportSnapshot;
 /** One event-driven measurement owner per Window; releasing the last subscription removes it. */
 export declare function observeViewport(view: Window, listener: (snapshot: ViewportSnapshot) => void): () => void;

package/dist/viewport.js

@@ -1,83 +1,97 @@
+import { isKeyboardEditingElement as S } from "./utils/focus.js";
 const p = (t, e) => Number.isFinite(t) && Number(t) > 0 ? Number(t) : Math.max(0, e);
-function g(t) {
-  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;
+function V(t, e) {
+  const o = t.visualViewport, a = p(o?.width, t.width), c = Math.abs((o?.scale ?? 1) - 1) < 0.01, r = e?.layout.width === t.width && e.layout.height === t.height, i = p(o?.height, r ? e.visible.height : t.height), s = t.fixedOrigin ?? { left: 0, top: 0 }, h = Math.max(0, (o?.offsetLeft || 0) + s.left), d = Math.max(0, (o?.offsetTop || 0) + s.top), f = t.touch && (t.editing || r && e.keyboardOpen) && c && t.height - i > 100;
   return {
-    visible: { left: r, top: a, width: o, height: s, right: r + o, bottom: a + s },
+    visible: { left: h, top: d, width: a, height: i, right: h + a, bottom: d + i },
     layout: { width: t.width, height: t.height },
-    safeArea: { ...t.safeArea, bottom: i ? 0 : t.safeArea.bottom },
-    keyboardOpen: i,
-    fixedOffset: { left: -n.left, top: -n.top },
+    safeArea: { ...t.safeArea, bottom: f ? 0 : t.safeArea.bottom },
+    keyboardOpen: f,
+    fixedOffset: { left: -s.left, top: -s.top },
     fixedScale: p(t.fixedScale, 1)
   };
 }
-function x(t) {
+function v(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"]');
+  return S(e);
 }
-function b(t) {
+function E(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 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: o.width || t.innerWidth,
-    height: o.height / a || t.innerHeight,
+function b(t, e, o) {
+  const a = e.getBoundingClientRect(), c = t.getComputedStyle(e), r = (h) => Math.max(0, Number.parseFloat(h) || 0), i = (h) => h ? p(Number.parseFloat(t.getComputedStyle(h).zoom), 1) : 1, s = i(t.document.documentElement);
+  return V({
+    width: a.width || t.innerWidth,
+    height: a.height / s || t.innerHeight,
     visualViewport: t.visualViewport,
-    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),
+    fixedOrigin: { left: a.left, top: a.top },
+    fixedScale: s * i(t.document.body),
+    safeArea: { top: r(c.paddingTop), right: r(c.paddingRight), bottom: r(c.paddingBottom), left: r(c.paddingLeft) },
+    editing: v(t.document),
     touch: t.matchMedia?.("(any-pointer: coarse)").matches ?? !1
-  });
+  }, o);
 }
-const c = /* @__PURE__ */ new WeakMap();
-function y(t) {
-  const e = c.get(t);
+const m = /* @__PURE__ */ new WeakMap();
+function A(t) {
+  const e = m.get(t);
   if (e) return e.snapshot;
-  const o = b(t);
+  const o = E(t);
   try {
-    return u(t, o);
+    return b(t, o);
   } finally {
     o.remove();
   }
 }
-function S(t, e) {
-  let o = c.get(t);
+function F(t, e) {
+  let o = m.get(t);
   if (!o) {
-    const n = b(t);
-    let r = 0;
-    const a = /* @__PURE__ */ new Set(), i = { snapshot: u(t, n), listeners: a, dispose: () => {
+    const c = E(t);
+    let r = 0, i = 0, s;
+    const h = /* @__PURE__ */ new Set(), d = { snapshot: b(t, c), listeners: h, dispose: () => {
     } }, f = () => {
       r || (r = t.requestAnimationFrame(() => {
-        r = 0, i.snapshot = u(t, n);
-        for (const d of a) d(i.snapshot);
+        r = 0;
+        for (const n of h) n(d.snapshot);
       }));
-    }, l = [
+    }, x = () => {
+      i && t.clearTimeout(i), i = 0, s = void 0;
+    }, u = () => {
+      const n = b(t, c, d.snapshot), l = d.snapshot;
+      if (n.keyboardOpen && l.keyboardOpen && n.layout.width === l.layout.width && n.layout.height === l.layout.height && n.visible.height < l.visible.height) {
+        const O = s?.visible.height === n.visible.height;
+        if (s = n, O) return;
+        i && t.clearTimeout(i), i = t.setTimeout(() => {
+          i = 0, s && (d.snapshot = s, s = void 0, f());
+        }, 100);
+        return;
+      }
+      x(), d.snapshot = n, f();
+    }, g = [
       [t, "resize"],
       [t, "scroll"],
       [t, "orientationchange"],
       [t.document, "focusin"],
       [t.document, "focusout"]
     ];
-    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;
+    t.visualViewport && g.push([t.visualViewport, "resize"], [t.visualViewport, "scroll"]);
+    for (const [n, l] of g) n.addEventListener(l, u);
+    const y = new MutationObserver(u);
+    for (const n of [t.document.documentElement, t.document.body])
+      n && y.observe(n, { attributes: !0, attributeFilter: ["class", "style"] });
+    d.dispose = () => {
+      for (const [n, l] of g) n.removeEventListener(l, u);
+      y.disconnect(), r && t.cancelAnimationFrame(r), x(), c.remove(), m.delete(t);
+    }, m.set(t, d), o = d;
   }
   o.listeners.add(e), e(o.snapshot);
-  const s = o;
+  const a = o;
   return () => {
-    s.listeners.delete(e), s.listeners.size === 0 && s.dispose();
+    a.listeners.delete(e), a.listeners.size === 0 && a.dispose();
   };
 }
-function E(t) {
+function T(t) {
   const { visible: e, fixedScale: o } = t;
   return {
     position: "fixed",
@@ -88,8 +102,8 @@ function E(t) {
   };
 }
 export {
-  S as observeViewport,
-  y as readViewportSnapshot,
-  g as resolveViewportSnapshot,
-  E as viewportStyle
+  F as observeViewport,
+  A as readViewportSnapshot,
+  V as resolveViewportSnapshot,
+  T as viewportStyle
 };

package/package.json

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