@floegence/floe-webapp-core 0.71.0 → 0.73.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/floatingWindowGeometry.d.ts

@@ -35,7 +35,10 @@ interface ResolveFloatingWindowRectOptions {
     resizeHandle: FloatingWindowResizeHandle;
     minSize: Size;
     maxSize: Size;
-    viewport: Size;
+    viewport: Size & {
+        x?: number;
+        y?: number;
+    };
     viewportInsets?: FloatingWindowViewportInsets;
     mobile: boolean;
     mobilePadding: number;
@@ -44,13 +47,19 @@ interface NormalizeFloatingWindowRectOptions {
     rect: FloatingWindowRect;
     minSize: Size;
     maxSize: Size;
-    viewport: Size;
+    viewport: Size & {
+        x?: number;
+        y?: number;
+    };
     viewportInsets?: FloatingWindowViewportInsets;
     mobile: boolean;
     mobilePadding: number;
     center?: boolean;
 }
-export declare function resolveFloatingWindowViewport(viewport: Size, insets?: FloatingWindowViewportInsets): FloatingWindowViewport;
+export declare function resolveFloatingWindowViewport(viewport: Size & {
+    x?: number;
+    y?: number;
+}, insets?: FloatingWindowViewportInsets): FloatingWindowViewport;
 export declare function resolveFloatingWindowRect(options: ResolveFloatingWindowRectOptions): FloatingWindowRect;
 export declare function normalizeFloatingWindowRect(options: NormalizeFloatingWindowRectOptions): FloatingWindowRect;
 export {};

package/dist/components/ui/floatingWindowGeometry.js

@@ -1,37 +1,37 @@
-function x(e, i, m) {
-  return Math.max(i, Math.min(m, e));
+function x(n, i, m) {
+  return Math.max(i, Math.min(m, n));
 }
-function l(e, i, m) {
-  const s = Math.max(0, m), o = Math.min(e, s), c = Math.max(o, Math.min(i, s));
+function l(n, i, m) {
+  const s = Math.max(0, m), o = Math.min(n, s), c = Math.max(o, Math.min(i, s));
   return { min: o, max: c };
 }
-function z(e) {
-  const i = Number(e);
+function v(n) {
+  const i = Number(n);
   return Number.isFinite(i) && i > 0 ? i : 0;
 }
-function X(e, i = {}) {
-  const m = Math.max(0, e.width), s = Math.max(0, e.height), o = Math.min(z(i.left), m), c = Math.min(z(i.top), s), n = Math.min(z(i.right), Math.max(0, m - o)), d = Math.min(z(i.bottom), Math.max(0, s - c));
+function X(n, i = {}) {
+  const m = Math.max(0, n.width), s = Math.max(0, n.height), o = Math.min(v(i.left), m), c = Math.min(v(i.top), s), e = Math.min(v(i.right), Math.max(0, m - o)), d = Math.min(v(i.bottom), Math.max(0, s - c));
   return {
-    x: o,
-    y: c,
-    width: Math.max(0, m - o - n),
+    x: (n.x ?? 0) + o,
+    y: (n.y ?? 0) + c,
+    width: Math.max(0, m - o - e),
     height: Math.max(0, s - c - d)
   };
 }
-function Y(e) {
-  return e.x + e.width;
+function Y(n) {
+  return n.x + n.width;
 }
-function H(e) {
-  return e.y + e.height;
+function H(n) {
+  return n.y + n.height;
 }
-function I(e) {
+function I(n) {
   const {
     mode: i,
     pointer: m,
     dragStartPos: s,
     dragStartRect: o,
     resizeStartPos: c,
-    resizeStartRect: n,
+    resizeStartRect: e,
     resizeHandle: d,
     minSize: r,
     maxSize: t,
@@ -39,55 +39,55 @@ function I(e) {
     viewportInsets: S,
     mobile: y,
     mobilePadding: f
-  } = e, a = X(R, S), g = Y(a), w = H(a), u = m.x - (i === "drag" ? s.x : c.x), p = m.y - (i === "drag" ? s.y : c.y);
+  } = n, a = X(R, S), g = Y(a), M = H(a), u = m.x - (i === "drag" ? s.x : c.x), p = m.y - (i === "drag" ? s.y : c.y);
   if (i === "drag") {
-    const h = Math.max(a.x, g - o.width), M = Math.max(a.y, w - o.height);
+    const h = Math.max(a.x, g - o.width), w = Math.max(a.y, M - o.height);
     return {
       ...o,
       x: x(y ? a.x + f : o.x + u, a.x, h),
-      y: x(o.y + p, a.y, M)
+      y: x(o.y + p, a.y, w)
     };
   }
-  let b = n.width, v = n.height, W = n.x, F = n.y;
+  let b = e.width, z = e.height, W = e.x, F = e.y;
   if (!y && d.includes("e")) {
-    const h = l(r.width, t.width, g - n.x);
-    b = x(n.width + u, h.min, h.max);
+    const h = l(r.width, t.width, g - e.x);
+    b = x(e.width + u, h.min, h.max);
   }
   if (!y && d.includes("w")) {
-    const h = n.x + n.width, M = l(r.width, t.width, h - a.x), B = h - M.max, P = Math.max(B, h - M.min);
-    W = x(n.x + u, B, P), b = Math.max(0, h - W);
+    const h = e.x + e.width, w = l(r.width, t.width, h - a.x), B = h - w.max, P = Math.max(B, h - w.min);
+    W = x(e.x + u, B, P), b = Math.max(0, h - W);
   }
   if (d.includes("s")) {
-    const h = l(r.height, t.height, w - n.y);
-    v = x(n.height + p, h.min, h.max);
+    const h = l(r.height, t.height, M - e.y);
+    z = x(e.height + p, h.min, h.max);
   }
   if (d.includes("n")) {
-    const h = n.y + n.height, M = l(r.height, t.height, h - a.y), B = h - M.max, P = Math.max(B, h - M.min);
-    F = x(n.y + p, B, P), v = Math.max(0, h - F);
+    const h = e.y + e.height, w = l(r.height, t.height, h - a.y), B = h - w.max, P = Math.max(B, h - w.min);
+    F = x(e.y + p, B, P), z = Math.max(0, h - F);
   }
   return {
     x: x(W, a.x, Math.max(a.x, g - b)),
-    y: x(F, a.y, Math.max(a.y, w - v)),
+    y: x(F, a.y, Math.max(a.y, M - z)),
     width: b,
-    height: v
+    height: z
   };
 }
-function V(e) {
+function V(n) {
   const {
     rect: i,
     minSize: m,
     maxSize: s,
     viewport: o,
     viewportInsets: c,
-    mobile: n,
+    mobile: e,
     mobilePadding: d,
     center: r = !1
-  } = e, t = X(o, c), R = Y(t), S = H(t), y = n ? Math.max(0, t.width - d * 2) : t.width, f = l(m.width, s.width, y), a = l(m.height, s.height, t.height), g = n ? f.max : x(i.width, f.min, f.max), w = x(i.height, a.min, a.max), u = Math.max(t.x, R - g), p = Math.max(t.y, S - w);
+  } = n, t = X(o, c), R = Y(t), S = H(t), y = e ? Math.max(0, t.width - d * 2) : t.width, f = l(m.width, s.width, y), a = l(m.height, s.height, t.height), g = e ? f.max : x(i.width, f.min, f.max), M = x(i.height, a.min, a.max), u = Math.max(t.x, R - g), p = Math.max(t.y, S - M);
   return {
-    x: n ? x(t.x + d, t.x, u) : r ? Math.max(t.x, Math.round(t.x + (t.width - g) / 2)) : x(i.x, t.x, u),
-    y: r ? Math.max(t.y, Math.round(t.y + (t.height - w) / 2)) : x(i.y, t.y, p),
+    x: e ? x(t.x + d, t.x, u) : r ? Math.max(t.x, Math.round(t.x + (t.width - g) / 2)) : x(i.x, t.x, u),
+    y: r ? Math.max(t.y, Math.round(t.y + (t.height - M) / 2)) : x(i.y, t.y, p),
     width: g,
-    height: w
+    height: M
   };
 }
 export {

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

@@ -455,10 +455,29 @@
     --floe-floating-exit-scale: 1;
   }
 
+  .floe-side-drawer-overlay {
+    --floe-dialog-gap-y: 0px;
+    --floe-dialog-gap-x: 0px;
+    padding: 0;
+  }
+
+  .floe-side-drawer-panel {
+    height: 100%;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    --floe-floating-enter-x: min(8rem, 18vw);
+    --floe-floating-exit-x: min(6rem, 14vw);
+    --floe-floating-enter-y: 0;
+    --floe-floating-exit-y: 0;
+    --floe-floating-enter-scale: 1;
+    --floe-floating-exit-scale: 1;
+    --floe-floating-origin: right center;
+  }
+
   .floe-bottom-drawer-overlay {
-    padding: max(1.25rem, env(safe-area-inset-top, 0px))
-      max(1.5rem, env(safe-area-inset-right, 0px)) max(1.25rem, env(safe-area-inset-bottom, 0px))
-      max(1.5rem, env(safe-area-inset-left, 0px));
+    --floe-dialog-gap-y: 1.25rem;
+    --floe-dialog-gap-x: 1.5rem;
+    padding: var(--floe-dialog-gap-y) var(--floe-dialog-gap-x);
   }
 
   .floe-bottom-drawer-backdrop {
@@ -480,9 +499,8 @@
 
   @media (max-width: 639px) {
     .floe-bottom-drawer-overlay {
-      padding: max(0.75rem, env(safe-area-inset-top, 0px))
-        max(0.75rem, env(safe-area-inset-right, 0px)) max(0.75rem, env(safe-area-inset-bottom, 0px))
-        max(0.75rem, env(safe-area-inset-left, 0px));
+      --floe-dialog-gap-y: 0.75rem;
+      --floe-dialog-gap-x: 0.75rem;
     }
   }
 
@@ -707,10 +725,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 +742,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'],