@floegence/floe-webapp-core 0.71.0 → 0.72.0

package/dist/components/ui/SurfaceFloatingLayer.js

@@ -1,12 +1,13 @@
-import { createComponent as m, Portal as y, use as S, spread as v, mergeProps as h, insert as P, template as R } from "solid-js/web";
-import { splitProps as g, createMemo as n } from "solid-js";
-import { cn as A } from "../../utils/cn.js";
-import { LOCAL_INTERACTION_SURFACE_ATTR as _ } from "./localInteractionSurface.js";
-import { clampMenuPosition as b } from "./menuUtils.js";
-import { readSurfaceSafeArea as T, resolveFloatingBoundary as z } from "./surfaceFloatingBoundary.js";
-import { resolveSurfacePortalHost as C, SURFACE_FLOATING_LAYER_ATTR as w, resolveSurfacePortalMount as x, resolveSurfacePortalBoundaryRect as F, isSurfacePortalMode as L, projectSurfacePortalPosition as M } from "./dialogSurfaceScope.js";
-var $ = /* @__PURE__ */ R("<div>");
-function B() {
+import { createComponent as S, Portal as v, use as h, spread as g, mergeProps as A, insert as P, template as R } from "solid-js/web";
+import { observeViewport as w } from "../../viewport.js";
+import { splitProps as _, createSignal as b, onMount as x, onCleanup as C, createMemo as s } from "solid-js";
+import { cn as T } from "../../utils/cn.js";
+import { LOCAL_INTERACTION_SURFACE_ATTR as z } from "./localInteractionSurface.js";
+import { clampMenuPosition as M } from "./menuUtils.js";
+import { readSurfaceSafeArea as F, resolveFloatingBoundary as L } from "./surfaceFloatingBoundary.js";
+import { resolveSurfacePortalHost as $, SURFACE_FLOATING_LAYER_ATTR as E, resolveSurfacePortalMount as O, isSurfacePortalMode as B, projectSurfacePortalPosition as I } from "./dialogSurfaceScope.js";
+var N = /* @__PURE__ */ R("<div>");
+function j() {
   return {
     left: 0,
     top: 0,
@@ -16,42 +17,50 @@ function B() {
     height: 0
   };
 }
-function G(l) {
-  const [e, c] = g(l, ["position", "owner", "boundary", "estimatedSize", "clamp", "class", "style", "children", "layerRef"]), o = n(() => C({
+function J(c) {
+  const [e, f] = _(c, ["position", "owner", "boundary", "estimatedSize", "clamp", "class", "style", "children", "layerRef"]), [a, p] = b();
+  x(() => C(w(window, p)));
+  const r = s(() => $({
     owner: e.owner ?? null
-  })), i = () => L(o()), u = n(() => (e.position, T())), r = () => e.boundary === void 0 ? F(o()) : z(o(), e.boundary, u()) ?? B(), d = () => e.clamp !== !1 && !!e.estimatedSize, f = n(() => {
+  })), n = () => B(r()), u = s(() => (e.position, a()?.safeArea ?? F())), i = () => L(r(), e.boundary, u()) ?? j(), m = () => e.clamp !== !1 && !!e.estimatedSize, d = s(() => {
     const t = e.position;
-    return !d() || !e.estimatedSize ? t : b(t, e.estimatedSize, r());
-  }), a = () => M(f(), o()), p = () => ({
+    return !m() || !e.estimatedSize ? t : M(t, e.estimatedSize, i());
+  }), l = () => {
+    const t = I(d(), r()), o = a()?.fixedOffset;
+    return n() || !o ? t : {
+      x: t.x + o.left,
+      y: t.y + o.top
+    };
+  }, y = () => ({
     ...e.style ?? {},
-    ...e.boundary !== void 0 && (r().width <= 16 || r().height <= 16) ? {
+    ...e.boundary !== void 0 && (i().width <= 16 || i().height <= 16) ? {
       visibility: "hidden",
       "pointer-events": "none"
     } : {},
-    left: `${a().x}px`,
-    top: `${a().y}px`
+    left: `${l().x}px`,
+    top: `${l().y}px`
   });
-  return m(y, {
+  return S(v, {
     get mount() {
-      return x(o());
+      return O(r());
     },
     get children() {
-      var t = $(), s = e.layerRef;
-      return typeof s == "function" ? S(s, t) : e.layerRef = t, v(t, h(c, {
+      var t = N(), o = e.layerRef;
+      return typeof o == "function" ? h(o, t) : e.layerRef = t, g(t, A(f, {
         get class() {
-          return A(i() ? "absolute z-20" : "fixed z-50", e.class);
+          return T(n() ? "absolute z-20" : "fixed z-50", e.class);
         },
         get style() {
-          return p();
+          return y();
         }
       }, {
-        [w]: "true"
+        [E]: "true"
       }, () => ({
-        [_]: i() ? "true" : void 0
+        [z]: n() ? "true" : void 0
       })), !1, !0), P(t, () => e.children), t;
     }
   });
 }
 export {
-  G as SurfaceFloatingLayer
+  J as SurfaceFloatingLayer
 };

package/dist/components/ui/surfaceFloatingBoundary.js

@@ -1,53 +1,44 @@
-import { resolveMobileKeyboardViewportMetrics as l } from "./mobileKeyboardViewport.js";
-import { isSurfacePortalMode as d, resolveSurfacePortalBoundaryRect as p } from "./dialogSurfaceScope.js";
-function m(...e) {
-  const t = Math.max(...e.map((r) => r.left)), i = Math.max(...e.map((r) => r.top)), o = Math.max(t, Math.min(...e.map((r) => r.right))), a = Math.max(i, Math.min(...e.map((r) => r.bottom)));
-  return { left: t, top: i, right: o, bottom: a, width: o - t, height: a - i };
+import { readViewportSnapshot as f } from "../../viewport.js";
+import { isSurfacePortalMode as l, resolveSurfacePortalBoundaryRect as h } from "./dialogSurfaceScope.js";
+function m(...i) {
+  const e = Math.max(...i.map((t) => t.left)), n = Math.max(...i.map((t) => t.top)), o = Math.max(e, Math.min(...i.map((t) => t.right))), r = Math.max(n, Math.min(...i.map((t) => t.bottom)));
+  return { left: e, top: n, right: o, bottom: r, width: o - e, height: r - n };
 }
-function s() {
-  if (typeof document > "u") return { top: 0, right: 0, bottom: 0, left: 0 };
-  const e = document.createElement("div");
-  e.style.cssText = "position:fixed;visibility:hidden;pointer-events:none;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)", document.documentElement.append(e);
-  const t = getComputedStyle(e), i = (a) => Math.max(0, Number.parseFloat(a) || 0), o = {
-    top: i(t.paddingTop),
-    right: i(t.paddingRight),
-    bottom: i(t.paddingBottom),
-    left: i(t.paddingLeft)
-  };
-  return e.remove(), o;
+function p() {
+  return typeof window > "u" ? { top: 0, right: 0, bottom: 0, left: 0 } : f(window).safeArea;
 }
-function c(e, t, i = { top: 0, right: 0, bottom: 0, left: 0 }) {
-  if (t === null || typeof window > "u" || e.mode === "surface" && !d(e)) return null;
-  const o = l(window), a = window.innerHeight - o.bottomPx - o.heightPx, r = {
-    left: o.leftPx + i.left,
-    top: a + i.top,
-    right: o.leftPx + o.widthPx - i.right,
-    bottom: a + o.heightPx - i.bottom,
-    width: o.widthPx,
-    height: o.heightPx
+function c(i, e, n = { top: 0, right: 0, bottom: 0, left: 0 }) {
+  if (e === null || typeof window > "u" || i.mode === "surface" && !l(i)) return null;
+  const { visible: o } = f(window), r = {
+    left: o.left + n.left,
+    top: o.top + n.top,
+    right: o.right - n.right,
+    bottom: o.bottom - n.bottom,
+    width: o.width,
+    height: o.height
   };
-  let n;
-  if (t instanceof HTMLElement) {
-    if (!t.isConnected || t.closest('[inert], [hidden], [aria-hidden="true"]'))
+  let t;
+  if (e instanceof HTMLElement) {
+    if (!e.isConnected || e.closest('[inert], [hidden], [aria-hidden="true"]'))
       return null;
-    n = t.getBoundingClientRect();
+    t = e.getBoundingClientRect();
   } else
-    n = t;
-  return n && ![
-    n.left,
-    n.top,
-    n.right,
-    n.bottom,
-    n.width,
-    n.height
+    t = e;
+  return t && ![
+    t.left,
+    t.top,
+    t.right,
+    t.bottom,
+    t.width,
+    t.height
   ].every(Number.isFinite) ? null : m(
     r,
-    p(e),
-    ...n ? [n] : []
+    ...l(i) ? [h(i)] : [],
+    ...t ? [t] : []
   );
 }
 export {
   m as intersectSurfaceRects,
-  s as readSurfaceSafeArea,
+  p as readSurfaceSafeArea,
   c as resolveFloatingBoundary
 };

package/dist/floe.css

@@ -707,10 +707,6 @@
   pointer-events: auto;
   transform-origin: bottom center;
   transition:
-    left 360ms cubic-bezier(0.22, 0.8, 0.24, 1),
-    top 360ms cubic-bezier(0.22, 0.8, 0.24, 1),
-    width 360ms cubic-bezier(0.22, 0.8, 0.24, 1),
-    height 360ms cubic-bezier(0.22, 0.8, 0.24, 1),
     border-radius 200ms ease,
     border-color 180ms ease,
     opacity 120ms ease;
@@ -728,6 +724,12 @@
 .floe-bottom-bar-companion[data-companion-phase='expanding'],
 .floe-bottom-bar-companion[data-companion-phase='collapsing'] {
   will-change: left, top, width, height;
+  transition:
+    left 360ms cubic-bezier(0.22, 0.8, 0.24, 1),
+    top 360ms cubic-bezier(0.22, 0.8, 0.24, 1),
+    width 360ms cubic-bezier(0.22, 0.8, 0.24, 1),
+    height 360ms cubic-bezier(0.22, 0.8, 0.24, 1),
+    border-radius 200ms ease, border-color 180ms ease, opacity 120ms ease;
 }
 
 .floe-bottom-bar-companion[data-companion-visibility='hidden'],