@floegence/floe-webapp-core 0.86.54 → 0.86.55

package/dist/components/ui/SurfaceAnchoredLayer.d.ts

@@ -1,5 +1,5 @@
 import { type JSX } from 'solid-js';
-export interface SurfaceAnchoredLayerProps {
+export interface SurfaceAnchoredLayerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'style' | 'ref'> {
     anchor: HTMLElement | undefined;
     /** Changes when the anchor moves through a transform; no idle polling is used. */
     revision?: unknown;
@@ -11,8 +11,14 @@ export interface SurfaceAnchoredLayerProps {
         narrowTop?: number;
         bottom: number;
     };
+    /** Auto places object tools above/below; side panels prefer the requested side and flip when needed. */
+    placement?: 'auto' | 'right' | 'left';
+    gap?: number;
     children: JSX.Element;
     class?: string;
+    style?: JSX.CSSProperties;
+    layerRef?: (element: HTMLDivElement) => void;
+    onAnchorDisconnect?: () => void;
 }
 /** Object-attached tools remain in screen pixels within the owning surface. */
 export declare function SurfaceAnchoredLayer(props: SurfaceAnchoredLayerProps): JSX.Element;

package/dist/components/ui/SurfaceAnchoredLayer.js

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

package/package.json

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