@floegence/floe-webapp-core 0.70.0 → 0.72.0

package/dist/viewport.d.ts

@@ -0,0 +1,54 @@
+/** Framework-independent visible bounds, in getBoundingClientRect CSS pixels. */
+export interface ViewportRect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    right: number;
+    bottom: number;
+}
+export interface ViewportInsets {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface ViewportSnapshot {
+    visible: ViewportRect;
+    /** Dynamic browser content size before soft-keyboard occlusion. */
+    layout: {
+        width: number;
+        height: number;
+    };
+    safeArea: ViewportInsets;
+    keyboardOpen: boolean;
+    /** Add to client coordinates when positioning a document-level fixed element. */
+    fixedOffset: {
+        left: number;
+        top: number;
+    };
+}
+export interface ViewportSource {
+    width: number;
+    height: number;
+    fixedOrigin?: {
+        left: number;
+        top: number;
+    };
+    visualViewport?: {
+        width: number;
+        height: number;
+        offsetLeft: number;
+        offsetTop: number;
+        scale?: number;
+    } | null;
+    safeArea: ViewportInsets;
+    editing: boolean;
+    touch: boolean;
+}
+export declare function resolveViewportSnapshot(source: ViewportSource): 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;
+/** Apply to one top-level application container, not nested content surfaces. */
+export declare function viewportStyle(snapshot: ViewportSnapshot): Record<string, string>;

package/dist/viewport.js

@@ -0,0 +1,90 @@
+const u = (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;
+  return {
+    visible: { left: s, top: a, width: n, height: i, right: s + n, bottom: a + i },
+    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 }
+  };
+}
+function b(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) {
+  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);
+  return g({
+    width: n.width || t.innerWidth,
+    height: n.height || 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),
+    touch: t.matchMedia?.("(any-pointer: coarse)").matches ?? !1
+  });
+}
+const d = /* @__PURE__ */ new WeakMap();
+function x(t) {
+  const e = d.get(t);
+  if (e) return e.snapshot;
+  const n = m(t);
+  try {
+    return l(t, n);
+  } finally {
+    n.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);
+      }));
+    }, f = [
+      [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;
+  }
+  n.listeners.add(e), e(n.snapshot);
+  const i = n;
+  return () => {
+    i.listeners.delete(e), i.listeners.size === 0 && i.dispose();
+  };
+}
+function V(t) {
+  const { visible: e } = 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`
+  };
+}
+export {
+  y as observeViewport,
+  x as readViewportSnapshot,
+  g as resolveViewportSnapshot,
+  V as viewportStyle
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.70.0",
+  "version": "0.72.0",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -108,6 +108,7 @@
     },
     "./progress-shimmer.css": "./dist/progress-shimmer.css",
     "./window-status.css": "./dist/window-status.css",
+    "./remote-input.css": "./dist/remote-input.css",
     "./window-status": {
       "types": "./dist/window-status.d.ts",
       "import": "./dist/window-status.js",
@@ -116,6 +117,14 @@
     "./reload-placeholder": {
       "types": "./dist/reload-placeholder.d.ts",
       "import": "./dist/reload-placeholder.js"
+    },
+    "./remote-input": {
+      "types": "./dist/remote-input.d.ts",
+      "import": "./dist/remote-input.js"
+    },
+    "./viewport": {
+      "types": "./dist/viewport.d.ts",
+      "import": "./dist/viewport.js"
     }
   },
   "files": [