@floegence/floe-webapp-core 0.90.0 → 0.90.1

package/dist/components/ui/Popover.js

@@ -1,47 +1,47 @@
-import { setAttribute as g, insert as v, memo as S, createComponent as E, Portal as H, spread as T, mergeProps as z, effect as q, template as O, use as R, delegateEvents as j } from "solid-js/web";
-import { createSignal as C, createMemo as N, createEffect as U, onCleanup as K, Show as W } from "solid-js";
-import { cn as D } from "../../utils/cn.js";
-import { calculateMenuPosition as G } from "./menuUtils.js";
-import { LOCAL_INTERACTION_SURFACE_ATTR as J } from "./localInteractionSurface.js";
-import { createFloatingPresence as Q } from "./floatingPresence.js";
-import { useOverlayMask as V } from "../../hooks/useOverlayMask.js";
-import { resolveSurfacePortalHost as X, projectSurfacePortalPosition as Y, isSurfacePortalMode as Z, resolveSurfacePortalMount as ee, resolveSurfacePortalBoundaryRect as te } from "./dialogSurfaceScope.js";
-var oe = /* @__PURE__ */ O("<div data-floe-popover-panel role=dialog aria-modal=false data-floe-surface=floating>"), ne = /* @__PURE__ */ O('<div class="relative inline-flex"><div class=inline-flex data-floe-popover-trigger>');
-let re = 0;
-function ge(t) {
-  const h = () => t.open !== void 0, [_, k] = C(t.defaultOpen ?? !1), c = () => h() ? !!t.open : _(), i = (o) => {
+import { setAttribute as f, insert as v, memo as C, createComponent as E, Portal as q, use as O, spread as z, mergeProps as j, effect as N, template as k, delegateEvents as U } from "solid-js/web";
+import { createSignal as h, createMemo as K, createEffect as W, onCleanup as D, Show as G } from "solid-js";
+import { cn as J } from "../../utils/cn.js";
+import { calculateMenuPosition as Q } from "./menuUtils.js";
+import { LOCAL_INTERACTION_SURFACE_ATTR as V } from "./localInteractionSurface.js";
+import { createFloatingPresence as X } from "./floatingPresence.js";
+import { useOverlayMask as Y } from "../../hooks/useOverlayMask.js";
+import { resolveSurfacePortalHost as Z, projectSurfacePortalPosition as ee, isSurfacePortalMode as te, resolveSurfacePortalMount as oe, resolveSurfacePortalBoundaryRect as ne } from "./dialogSurfaceScope.js";
+var re = /* @__PURE__ */ k("<div data-floe-popover-panel role=dialog aria-modal=false data-floe-surface=floating>"), ae = /* @__PURE__ */ k('<div class="relative inline-flex"><div class=inline-flex data-floe-popover-trigger>');
+let ie = 0;
+function pe(t) {
+  const b = () => t.open !== void 0, [B, _] = h(t.defaultOpen ?? !1), c = () => b() ? !!t.open : B(), s = (o) => {
     const e = o !== c();
-    h() || k(o), e && t.onOpenChange?.(o);
-  }, r = Q({
+    b() || _(o), e && t.onOpenChange?.(o);
+  }, a = X({
     open: c,
-    element: () => l
-  }), [w, m] = C({
+    element: () => i
+  }), [w, g] = h({
     x: -9999,
     y: -9999
-  });
-  let a, l;
-  const p = `floe-popover-${re += 1}`, b = `${p}-panel`, u = N(() => r.mounted() ? X({
-    owner: a
+  }), [A, y] = h("bottom");
+  let r, i;
+  const m = `floe-popover-${ie += 1}`, x = `${m}-panel`, u = K(() => a.mounted() ? Z({
+    owner: r
   }) : {
     host: null,
     boundaryHost: null,
     mountHost: null,
     mode: "global"
-  }), A = () => ee(u()), y = () => Z(u()), B = () => te(u()), x = (o) => Y(o, u()), $ = () => (t.placement ?? "bottom-start").startsWith("top") ? "top" : "bottom", F = () => (t.placement ?? "bottom-start").slice($() === "top" ? 5 : 7), I = () => i(!1), L = () => {
-    i(!1), a?.querySelector('button, input, [tabindex="0"]')?.focus({
+  }), F = () => oe(u()), S = () => te(u()), I = () => ne(u()), P = (o) => ee(o, u()), R = () => (t.placement ?? "bottom-start").startsWith("top") ? "top" : "bottom", L = () => (t.placement ?? "bottom-start").slice(R() === "top" ? 5 : 7), M = () => s(!1), H = () => {
+    s(!1), r?.querySelector('button, input, [tabindex="0"]')?.focus({
       preventScroll: !0
     });
   };
-  V({
-    open: r.mounted,
-    root: () => l,
+  Y({
+    open: a.mounted,
+    root: () => i,
     containsTarget: (o) => {
       const e = o instanceof Element ? o : document.activeElement;
-      return l?.contains(e ?? null) || e?.closest(`[data-floe-popover="${p}"]`) ? !0 : !!a?.contains(e ?? null);
+      return i?.contains(e ?? null) || e?.closest(`[data-floe-popover="${m}"]`) ? !0 : !!r?.contains(e ?? null);
     },
-    onClose: L,
-    onInteractOutside: () => i(!1),
-    onEscapeOutside: () => i(!1),
+    onClose: H,
+    onInteractOutside: () => s(!1),
+    onEscapeOutside: () => s(!1),
     lockBodyScroll: !1,
     trapFocus: !1,
     autoFocus: !1,
@@ -50,104 +50,111 @@ function ge(t) {
     closeOnEscape: () => t.closeOnEscape === !1 ? !1 : "inside",
     escapeKeyPhase: "bubble"
   });
-  const P = () => {
-    if (!a || !l) return;
-    const o = G(a.getBoundingClientRect(), l.getBoundingClientRect(), F(), B());
-    if ($() === "top") {
-      const e = a.getBoundingClientRect(), d = l.getBoundingClientRect();
-      m({
+  const p = () => {
+    if (!r || !i) return;
+    const o = Q(r.getBoundingClientRect(), i.getBoundingClientRect(), L(), I());
+    if (R() === "top") {
+      const e = r.getBoundingClientRect(), d = i.getBoundingClientRect();
+      y("top"), g({
         x: o.x,
         y: e.top - d.height - 6
       });
       return;
     }
-    m(o);
+    y(o.y < r.getBoundingClientRect().top ? "top" : "bottom"), g(o);
   };
-  U(() => {
-    if (!r.mounted()) {
-      m({
+  W(() => {
+    if (!a.mounted()) {
+      g({
         x: -9999,
         y: -9999
       });
       return;
     }
-    const o = requestAnimationFrame(P), e = () => P();
-    window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), K(() => {
+    const o = requestAnimationFrame(p), e = () => p();
+    window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), D(() => {
       cancelAnimationFrame(o), window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
     });
   });
-  const M = {
+  const T = {
     "aria-haspopup": "dialog",
     get "aria-expanded"() {
       return c();
     },
     get "aria-controls"() {
-      return r.mounted() ? b : void 0;
+      return a.mounted() ? x : void 0;
     }
   };
   return (() => {
-    var o = ne(), e = o.firstChild;
-    g(o, "data-floe-popover", p), e.$$keydown = (n) => {
-      n.key === "Escape" && c() && (n.stopPropagation(), i(!1));
-    }, e.$$click = () => i(!c());
-    var d = a;
-    return typeof d == "function" ? R(d, e) : a = e, v(e, (() => {
-      var n = S(() => typeof t.trigger == "function");
-      return () => n() ? t.trigger(M) : t.trigger;
-    })()), v(o, E(W, {
+    var o = ae(), e = o.firstChild;
+    f(o, "data-floe-popover", m), e.$$keydown = (n) => {
+      n.key === "Escape" && c() && (n.stopPropagation(), s(!1));
+    }, e.$$click = () => s(!c());
+    var d = r;
+    return typeof d == "function" ? O(d, e) : r = e, v(e, (() => {
+      var n = C(() => typeof t.trigger == "function");
+      return () => n() ? t.trigger(T) : t.trigger;
+    })()), v(o, E(G, {
       get when() {
-        return r.mounted();
+        return a.mounted();
       },
       get children() {
-        return E(H, {
+        return E(q, {
           get mount() {
-            return A();
+            return F();
           },
           get children() {
-            var n = oe(), s = l;
-            return typeof s == "function" ? R(s, n) : l = n, g(n, "id", b), T(n, z({
+            var n = re();
+            return O((l) => {
+              i = l, queueMicrotask(() => {
+                l.isConnected && p();
+              });
+            }, n), f(n, "id", x), z(n, j({
               get class() {
-                return D(y() ? "absolute z-20" : "fixed z-50", "bg-popover text-popover-foreground", "rounded-panel border border-[var(--floe-line)]", "shadow-[var(--floe-window-shadow)]", "floe-floating-presence floe-floating-menu", t.class);
+                return J(S() ? "absolute z-20" : "fixed z-50", "bg-popover text-popover-foreground", "rounded-panel border border-[var(--floe-line)]", "shadow-[var(--floe-window-shadow)]", "floe-floating-presence floe-floating-menu", t.class);
               },
               get "data-floating-presence"() {
-                return r.state();
+                return a.state();
+              },
+              get "data-floating-side"() {
+                return A();
               },
               get "aria-hidden"() {
-                return r.exiting() ? "true" : void 0;
+                return a.exiting() ? "true" : void 0;
               },
               get inert() {
-                return r.exiting();
+                return a.exiting();
               },
               get "aria-label"() {
                 return t.ariaLabel;
               },
               get style() {
                 return {
-                  left: `${x(w()).x}px`,
-                  top: `${x(w()).y}px`,
+                  left: `${P(w()).x}px`,
+                  top: `${P(w()).y}px`,
                   "min-width": t.width ? `${t.width}px` : void 0,
                   "max-width": "min(calc(100vw - 24px), 420px)"
                 };
               }
             }, () => ({
-              [J]: y() ? "true" : void 0
+              [V]: S() ? "true" : void 0
             })), !1, !0), v(n, (() => {
-              var f = S(() => typeof t.children == "function");
-              return () => f() ? t.children(I) : t.children;
+              var l = C(() => typeof t.children == "function");
+              return () => l() ? t.children(M) : t.children;
             })()), n;
           }
         });
       }
-    }), null), q((n) => {
-      var s = t.triggerInputSurface ? "true" : void 0, f = t.triggerInputSurface ? "inset" : void 0;
-      return s !== n.e && g(e, "data-floe-input-surface", n.e = s), f !== n.t && g(e, "data-floe-surface", n.t = f), n;
+    }), null), N((n) => {
+      var l = t.triggerInputSurface ? "true" : void 0, $ = t.triggerInputSurface ? "inset" : void 0;
+      return l !== n.e && f(e, "data-floe-input-surface", n.e = l), $ !== n.t && f(e, "data-floe-surface", n.t = $), n;
     }, {
       e: void 0,
       t: void 0
     }), o;
   })();
 }
-j(["click", "keydown"]);
+U(["click", "keydown"]);
 export {
-  ge as Popover
+  pe as Popover
 };

package/dist/components/ui/SurfaceAnchoredLayer.js

@@ -1,63 +1,63 @@
-import { createComponent as F, mergeProps as J, memo as K } from "solid-js/web";
-import { splitProps as N, createSignal as f, createEffect as M, onCleanup as R, onMount as Q, Show as U } from "solid-js";
-import { SurfaceFloatingLayer as X } from "./SurfaceFloatingLayer.js";
-import { resolveFloatingBoundary as Z } from "./surfaceFloatingBoundary.js";
-import { observeViewport as _ } from "../../viewport.js";
+import { createComponent as C, mergeProps as J, memo as K } from "solid-js/web";
+import { splitProps as N, createSignal as f, createEffect as M, onCleanup as R, onMount as Q, Show as U, untrack as X } from "solid-js";
+import { SurfaceFloatingLayer as Z } from "./SurfaceFloatingLayer.js";
+import { resolveFloatingBoundary as _ } from "./surfaceFloatingBoundary.js";
+import { observeViewport as ee } from "../../viewport.js";
 import { resolveSurfacePortalHost as E } from "./dialogSurfaceScope.js";
-function ae(L) {
-  const [o, C] = N(L, ["anchor", "revision", "topOffset", "reservedSpace", "placement", "gap", "children", "class", "style", "layerRef", "onAnchorDisconnect"]), [O, H] = f(!1), [$, B] = f({
+function se(L) {
+  const [o, H] = N(L, ["anchor", "revision", "topOffset", "reservedSpace", "placement", "gap", "children", "class", "style", "layerRef", "onAnchorDisconnect"]), [A, $] = f(!1), [k, q] = f({
     x: 0,
     y: 0
-  }), [V, Y] = f("above"), [P, v] = f(!1), [q, D] = f(480), [S, k] = f();
-  let d, w = !1;
-  const [z, T] = f({
+  }), [B, V] = f("above"), [F, v] = f(!1), [Y, D] = f(480), [O, T] = f();
+  let m, w = !1;
+  const [P, W] = f({
     x: 0,
     y: 0
-  }), [W, j] = f(0), G = () => {
-    d = void 0;
-    const n = o.anchor, l = S();
+  }), [j, G] = f(0), S = () => {
+    m = void 0;
+    const n = o.anchor, l = O();
     if (!n || !l) return;
     if (!n.isConnected) {
       v(!1), w || o.onAnchorDisconnect?.(), w = !0;
       return;
     }
     w = !1;
-    const t = Z(E({
+    const t = _(E({
       owner: n
     }));
     if (!t) {
       v(!1);
       return;
     }
-    const e = n.getBoundingClientRect(), s = o.reservedSpace, m = t.top + (window.matchMedia("(max-width:760px)").matches ? s?.narrowTop ?? s?.top ?? 12 : s?.top ?? 12);
-    D(Math.max(120, t.width - 24)), j(Math.max(0, t.bottom - (s?.bottom ?? 12) - m));
+    const e = n.getBoundingClientRect(), s = o.reservedSpace, d = t.top + (window.matchMedia("(max-width:760px)").matches ? s?.narrowTop ?? s?.top ?? 12 : s?.top ?? 12);
+    D(Math.max(120, t.width - 24)), G(Math.max(0, t.bottom - (s?.bottom ?? 12) - d));
     const r = l.getBoundingClientRect(), I = (Math.max(t.left, e.left) + Math.min(t.right, e.right)) / 2;
     let p = Math.max(t.left + 12, Math.min(I - r.width / 2, t.right - r.width - 12));
-    const x = e.top - (o.topOffset ?? 0), i = Math.max(0, o.gap ?? 12), g = x - r.height - i, y = Math.max(m, t.bottom - (s?.bottom ?? 12) - r.height), u = (b) => Math.max(m, Math.min(b, y));
-    let c = g, a = "above";
+    const x = e.top - (o.topOffset ?? 0), i = Math.max(0, o.gap ?? 12), u = x - r.height - i, y = Math.max(d, t.bottom - (s?.bottom ?? 12) - r.height), g = (b) => Math.max(d, Math.min(b, y));
+    let c = u, a = "above";
     if (o.placement === "right" || o.placement === "left") {
-      const b = e.right + i + r.width <= t.right - 12, A = e.left - i - r.width >= t.left + 12;
-      a = o.placement, a === "right" && !b && A ? a = "left" : a === "left" && !A && b && (a = "right"), p = Math.max(t.left + 12, Math.min(a === "right" ? e.right + i : e.left - r.width - i, t.right - r.width - 12)), c = u(e.top + e.height / 2 - r.height / 2);
-    } else g < m ? e.bottom + i <= y ? (c = e.bottom + i, a = "below") : g >= t.top + 12 ? a = "above" : e.bottom + r.height + i <= t.bottom - 12 ? (c = e.bottom + i, a = "below") : e.right + r.width + i + 12 <= t.right ? (p = e.right + i, c = u(x), a = "right") : e.left - r.width - i - 12 >= t.left ? (p = e.left - r.width - i, c = u(x), a = "left") : (c = u(g), a = "edge") : c = Math.min(c, y);
-    T({
+      const b = e.right + i + r.width <= t.right - 12, z = e.left - i - r.width >= t.left + 12;
+      a = o.placement, a === "right" && !b && z ? a = "left" : a === "left" && !z && b && (a = "right"), p = Math.max(t.left + 12, Math.min(a === "right" ? e.right + i : e.left - r.width - i, t.right - r.width - 12)), c = g(e.top + e.height / 2 - r.height / 2);
+    } else u < d ? e.bottom + i <= y ? (c = e.bottom + i, a = "below") : u >= t.top + 12 ? a = "above" : e.bottom + r.height + i <= t.bottom - 12 ? (c = e.bottom + i, a = "below") : e.right + r.width + i + 12 <= t.right ? (p = e.right + i, c = g(x), a = "right") : e.left - r.width - i - 12 >= t.left ? (p = e.left - r.width - i, c = g(x), a = "left") : (c = g(u), a = "edge") : c = Math.min(c, y);
+    W({
       x: Math.max(18, Math.min(e.left + e.width / 2 - p, Math.max(18, r.width - 18))),
       y: Math.max(18, Math.min(e.top + e.height / 2 - c, Math.max(18, r.height - 18)))
-    }), Y(a), B({
+    }), V(a), q({
       x: Math.round(p),
       y: Math.round(c)
     }), v(e.right > t.left && e.left < t.right && e.bottom > t.top && e.top < t.bottom);
   }, h = () => {
-    d === void 0 && typeof requestAnimationFrame == "function" && (d = requestAnimationFrame(G));
+    m === void 0 && typeof requestAnimationFrame == "function" && (m = requestAnimationFrame(S));
   };
   return M(() => {
     o.anchor, o.revision, o.topOffset, o.reservedSpace, o.placement, o.gap, h();
   }), M(() => {
-    const n = S();
+    const n = O();
     if (!n || typeof ResizeObserver > "u") return;
     const l = new ResizeObserver(h);
     l.observe(n), R(() => l.disconnect());
-  }), Q(() => H(!0)), M(() => {
-    if (!O()) return;
+  }), Q(() => $(!0)), M(() => {
+    if (!A()) return;
     const n = o.anchor, l = typeof ResizeObserver == "function" ? new ResizeObserver(h) : void 0, t = E({
       owner: n
     }).boundaryHost;
@@ -74,46 +74,48 @@ function ae(L) {
       childList: !0
     }), s !== t); )
       s = s.parentElement;
-    const m = _(window, h);
+    const d = ee(window, h);
     window.addEventListener("scroll", h, !0), h(), R(() => {
-      l?.disconnect(), e.disconnect(), m(), window.removeEventListener("scroll", h, !0);
+      l?.disconnect(), e.disconnect(), d(), window.removeEventListener("scroll", h, !0);
     });
   }), R(() => {
-    d !== void 0 && cancelAnimationFrame(d);
-  }), F(U, {
+    m !== void 0 && cancelAnimationFrame(m);
+  }), C(U, {
     get when() {
-      return K(() => !!O())() && o.anchor;
+      return K(() => !!A())() && o.anchor;
     },
     get children() {
-      return F(X, J(C, {
+      return C(Z, J(H, {
         get owner() {
           return o.anchor;
         },
         get position() {
-          return $();
+          return k();
         },
         get class() {
           return o.class;
         },
         get "data-placement"() {
-          return V();
+          return B();
         },
         get inert() {
-          return !P();
+          return !F();
         },
         get style() {
           return {
             ...o.style,
-            "--floe-anchored-layer-anchor-x": `${z().x}px`,
-            "--floe-anchored-layer-anchor-y": `${z().y}px`,
-            "--floe-anchored-layer-max-height": `${W()}px`,
-            visibility: P() ? "visible" : "hidden",
-            "max-width": `${q()}px`,
+            "--floe-anchored-layer-anchor-x": `${P().x}px`,
+            "--floe-anchored-layer-anchor-y": `${P().y}px`,
+            "--floe-anchored-layer-max-height": `${j()}px`,
+            visibility: F() ? "visible" : "hidden",
+            "max-width": `${Y()}px`,
             "z-index": o.style?.["z-index"] ?? 60
           };
         },
         layerRef: (n) => {
-          k(n), o.layerRef?.(n), h();
+          T(n), o.layerRef?.(n), queueMicrotask(() => X(() => {
+            n.isConnected && (m !== void 0 && cancelAnimationFrame(m), S());
+          }));
         },
         get children() {
           return o.children;
@@ -123,5 +125,5 @@ function ae(L) {
   });
 }
 export {
-  ae as SurfaceAnchoredLayer
+  se as SurfaceAnchoredLayer
 };

package/dist/floe.css

@@ -480,6 +480,9 @@
    * which costs memory and rasterisation on every window, menu and dialog that
    * merely sits on screen. Only the two transitions need it. */
   .floe-floating-presence[data-floating-presence='entering'] {
+    /* Placement may resolve after the initial size read. Set its starting pose
+     * immediately; only the subsequent open state should transition. */
+    transition: none;
     opacity: 0;
     --floe-floating-presence-x: var(--floe-floating-enter-x);
     --floe-floating-presence-y: var(--floe-floating-enter-y);
@@ -591,6 +594,46 @@
     --floe-floating-origin: left top;
   }
 
+  /* The positioning owner supplies the resolved side, including collision flips.
+   * Keep motion on the child so measuring the anchor layer never reads a scale. */
+  [data-floe-surface-floating-layer][data-placement='above'] > .floe-floating-menu,
+  .floe-floating-menu[data-floating-side='top'] {
+    --floe-floating-enter-y: 0.375rem;
+    --floe-floating-exit-y: 0.125rem;
+    --floe-floating-origin: var(--floe-anchored-layer-anchor-x, 50%) bottom;
+  }
+
+  [data-floe-surface-floating-layer][data-placement='below'] > .floe-floating-menu,
+  .floe-floating-menu[data-floating-side='bottom'] {
+    --floe-floating-origin: var(--floe-anchored-layer-anchor-x, 50%) top;
+  }
+
+  [data-floe-surface-floating-layer][data-placement='right'] > .floe-floating-menu,
+  .floe-floating-menu[data-floating-side='right'] {
+    --floe-floating-enter-x: -0.375rem;
+    --floe-floating-exit-x: -0.125rem;
+    --floe-floating-enter-y: 0;
+    --floe-floating-exit-y: 0;
+    --floe-floating-origin: left var(--floe-anchored-layer-anchor-y, 50%);
+  }
+
+  [data-floe-surface-floating-layer][data-placement='left'] > .floe-floating-menu,
+  .floe-floating-menu[data-floating-side='left'] {
+    --floe-floating-enter-x: 0.375rem;
+    --floe-floating-exit-x: 0.125rem;
+    --floe-floating-enter-y: 0;
+    --floe-floating-exit-y: 0;
+    --floe-floating-origin: right var(--floe-anchored-layer-anchor-y, 50%);
+  }
+
+  /* A fully clamped panel has no reliable opening side. Fade it in place. */
+  [data-floe-surface-floating-layer][data-placement='edge'] > .floe-floating-menu {
+    --floe-floating-enter-y: 0;
+    --floe-floating-exit-y: 0;
+    --floe-floating-enter-scale: 1;
+    --floe-floating-exit-scale: 1;
+  }
+
   .floe-floating-tooltip {
     --floe-floating-enter-duration: 140ms;
     --floe-floating-exit-duration: 90ms;