@floegence/floe-webapp-core 0.52.7 → 0.52.9

package/dist/components/layout/BottomBarCompanion.d.ts

@@ -10,6 +10,8 @@ export interface BottomBarCompanionProps {
     id: string;
     label: string;
     children?: JSX.Element;
+    /** Preferred expanded width in pixels; defaults to the anchor width and respects maxWidth. */
+    expandedWidth?: number;
     maxWidth?: number;
     maxHeight?: number;
     viewportPadding?: number;

package/dist/components/layout/BottomBarCompanion.js

@@ -1,14 +1,14 @@
-import { createComponent as Z, Portal as ce, use as $, insert as le, effect as ue, setAttribute as R, className as p, style as de, memo as fe, template as me } from "solid-js/web";
-import { createSignal as N, createEffect as k, untrack as G, onCleanup as U, Show as he } from "solid-js";
-import { cn as ee } from "../../utils/cn.js";
+import { createComponent as p, Portal as ce, use as ee, insert as le, effect as ue, setAttribute as V, className as te, style as de, memo as fe, template as me } from "solid-js/web";
+import { createSignal as x, createEffect as G, untrack as U, onCleanup as _, Show as he } from "solid-js";
+import { cn as ne } from "../../utils/cn.js";
 var ve = /* @__PURE__ */ me("<section role=region data-floe-bottom-bar-companion=true><div data-floe-bottom-bar-companion-content=true>");
-const we = 544, be = 544, ge = 12, z = {
+const we = 544, be = 544, ge = 12, q = {
   top: "--floe-bottom-bar-companion-safe-area-top",
   right: "--floe-bottom-bar-companion-safe-area-right",
   bottom: "--floe-bottom-bar-companion-safe-area-bottom",
   left: "--floe-bottom-bar-companion-safe-area-left"
 };
-function te(e, a) {
+function X(e, a) {
   const l = Number(e);
   return Number.isFinite(l) && l > 0 ? l : a;
 }
@@ -16,7 +16,7 @@ function Ce(e, a) {
   const l = Number(e);
   return Number.isFinite(l) && l >= 0 ? l : a;
 }
-function ne(e) {
+function oe(e) {
   if (!e?.isConnected) return null;
   const a = e.getBoundingClientRect();
   return !Number.isFinite(a.left) || !Number.isFinite(a.top) || a.width <= 0 || a.height <= 0 ? null : {
@@ -26,7 +26,7 @@ function ne(e) {
     height: a.height
   };
 }
-function B(e, a) {
+function k(e, a) {
   const l = e.ownerDocument.defaultView;
   if (!l) return 0;
   const m = Number.parseFloat(l.getComputedStyle(e).getPropertyValue(a));
@@ -34,19 +34,19 @@ function B(e, a) {
 }
 function Fe(e) {
   return {
-    top: B(e, z.top),
-    right: B(e, z.right),
-    bottom: B(e, z.bottom),
-    left: B(e, z.left)
+    top: k(e, q.top),
+    right: k(e, q.right),
+    bottom: k(e, q.bottom),
+    left: k(e, q.left)
   };
 }
-function ye(e, a, l, m, C) {
-  const F = a.ownerDocument.defaultView, y = F?.visualViewport, v = y?.offsetLeft ?? 0, D = y?.offsetTop ?? 0, q = y?.width ?? F?.innerWidth ?? e.left + e.width, H = y?.height ?? F?.innerHeight ?? e.top + e.height, E = Fe(a), W = v + E.left + C, w = v + q - E.right - C, b = D + E.top + C, h = D + H - E.bottom - C, g = Math.max(0, w - W), d = Math.min(e.width, l, g), P = e.left + (e.width - d) / 2, M = Math.max(W, Math.min(P, w - d)), L = Math.min(e.top + e.height, h), V = Math.max(e.height, L - b), x = Math.min(m, V);
+function ye(e, a, l, m, R, F) {
+  const E = a.ownerDocument.defaultView, f = E?.visualViewport, A = f?.offsetLeft ?? 0, z = f?.offsetTop ?? 0, N = f?.width ?? E?.innerWidth ?? e.left + e.width, H = f?.height ?? E?.innerHeight ?? e.top + e.height, P = Fe(a), b = A + P.left + F, h = A + N - P.right - F, v = z + P.top + F, g = z + H - P.bottom, w = Math.max(0, h - b), C = Math.min(l, m, w), L = e.left + (e.width - C) / 2, M = Math.max(b, Math.min(L, h - C)), D = Math.min(e.top + e.height, g), S = Math.max(e.height, D - v), B = Math.min(R, S);
   return {
     left: M,
-    top: L - x,
-    width: d,
-    height: x
+    top: D - B,
+    width: C,
+    height: B
   };
 }
 function Ee(e, a) {
@@ -61,157 +61,157 @@ function Ae(e) {
   } : {};
 }
 function Me(e) {
-  const [a, l] = N(null), [m, C] = N(!1), [F, y] = N(!1), [v, D] = N(null), [q, H] = N(null), [E, W] = N("collapsed");
-  let w = null, b = 0, h = 0, g = null, d = null, P = null, M = !1, L = !1;
-  const V = (i) => {
-    E() !== i && (W(i), e.onPhaseChange?.(i));
-  }, x = () => a()?.ownerDocument.defaultView ?? e.anchor?.ownerDocument.defaultView ?? null, oe = () => x()?.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? !1, _ = (i) => {
+  const [a, l] = x(null), [m, R] = x(!1), [F, E] = x(!1), [f, A] = x(null), [z, N] = x(null), [H, P] = x("collapsed");
+  let b = null, h = 0, v = 0, g = null, w = null, C = null, L = !1, M = !1;
+  const D = (i) => {
+    H() !== i && (P(i), e.onPhaseChange?.(i));
+  }, S = () => a()?.ownerDocument.defaultView ?? e.anchor?.ownerDocument.defaultView ?? null, B = () => S()?.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? !1, K = (i) => {
     const t = e.mount, r = e.anchor, n = !!(t?.isConnected && i && r?.ownerDocument === t.ownerDocument);
     n && l(t);
     const c = a();
     if (c) {
-      C(c.isConnected);
+      R(c.isConnected);
       const o = !!(n && c === t);
-      return y(o), {
+      return E(o), {
         mount: c,
         ready: o
       };
     }
-    return C(!1), y(!1), {
+    return R(!1), E(!1), {
       mount: null,
       ready: !1
     };
   }, ie = (i) => {
-    const t = ne(e.anchor);
-    t && H(t);
+    const t = oe(e.anchor);
+    t && N(t);
     const {
       mount: r,
       ready: n
-    } = _(t), c = t ?? q();
-    return !c || !r || !n ? null : i ? ye(c, r, te(e.maxWidth, we), te(e.maxHeight, be), Ce(e.viewportPadding, ge)) : c;
-  }, X = () => {
-    b && g && g.cancelAnimationFrame(b), h && d && d.cancelAnimationFrame(h), b = 0, h = 0, g = null, d = null, P = null;
-  }, K = (i, t) => {
+    } = K(t), c = t ?? z();
+    return !c || !r || !n ? null : i ? ye(c, r, X(e.expandedWidth, c.width), X(e.maxWidth, we), X(e.maxHeight, be), Ce(e.viewportPadding, ge)) : c;
+  }, j = () => {
+    h && g && g.cancelAnimationFrame(h), v && w && w.cancelAnimationFrame(v), h = 0, v = 0, g = null, w = null, C = null;
+  }, J = (i, t) => {
     const r = ie(i);
     if (!r) return;
-    const n = v(), c = i ? "expanded" : "collapsed";
-    if (!t || oe() || Ee(n, r)) {
-      D(r), P = null, V(c);
+    const n = f(), c = i ? "expanded" : "collapsed";
+    if (!t || B() || Ee(n, r)) {
+      A(r), C = null, D(c);
       return;
     }
-    P = ["height", "width", "top", "left"].find((u) => n?.[u] !== r[u]) ?? null, V(i ? "expanding" : "collapsing");
-    const o = x();
+    C = ["height", "width", "top", "left"].find((u) => n?.[u] !== r[u]) ?? null, D(i ? "expanding" : "collapsing");
+    const o = S();
     if (!o) {
-      D(r), V(c);
+      A(r), D(c);
       return;
     }
-    h = o.requestAnimationFrame(() => {
-      h = 0, d = null, D(r);
-    }), d = o;
-  }, j = (i, t) => {
-    const r = x();
+    v = o.requestAnimationFrame(() => {
+      v = 0, w = null, A(r);
+    }), w = o;
+  }, Q = (i, t) => {
+    const r = S();
     if (!r) {
-      K(t, i);
+      J(t, i);
       return;
     }
-    b && g && g.cancelAnimationFrame(b), h && d && d.cancelAnimationFrame(h), h = 0, d = null, b = r.requestAnimationFrame(() => {
-      b = 0, g = null, G(() => K(t, i));
+    h && g && g.cancelAnimationFrame(h), v && w && w.cancelAnimationFrame(v), v = 0, w = null, h = r.requestAnimationFrame(() => {
+      h = 0, g = null, U(() => J(t, i));
     }), g = r;
   };
-  k(() => {
+  G(() => {
     const i = e.retained, t = e.visible, r = e.open;
-    if (e.anchor, e.mount, e.maxWidth, e.maxHeight, e.viewportPadding, !i) {
-      X(), l(null), C(!1), y(!1), D(null), H(null), w = null, e.surfaceRef?.(null), e.contentHostRef?.(null), M = !1, L = r;
+    if (e.anchor, e.mount, e.expandedWidth, e.maxWidth, e.maxHeight, e.viewportPadding, !i) {
+      j(), l(null), R(!1), E(!1), A(null), N(null), b = null, e.surfaceRef?.(null), e.contentHostRef?.(null), L = !1, M = r;
       return;
     }
-    const n = ne(e.anchor);
-    if (n && H(n), _(n), !t) {
-      M = !1, L = r;
+    const n = oe(e.anchor);
+    if (n && N(n), K(n), !t) {
+      L = !1, M = r;
       return;
     }
-    const c = !M, o = L !== r;
-    M = !0, L = r, j(!c && o, r);
-  }), k(() => {
+    const c = !L, o = M !== r;
+    L = !0, M = r, Q(!c && o, r);
+  }), G(() => {
     if (!e.retained) return;
     const i = e.anchor, t = a(), r = e.mount, n = /* @__PURE__ */ new Set(), c = /* @__PURE__ */ new Set();
     for (const s of [i, t, r]) {
       if (!s) continue;
       n.add(s.ownerDocument);
-      const f = s.ownerDocument.defaultView;
-      f && c.add(f);
+      const d = s.ownerDocument.defaultView;
+      d && c.add(d);
     }
     if (c.size === 0 || n.size === 0) return;
-    const o = () => j(!1, G(() => e.open)), u = [];
+    const o = () => Q(!1, U(() => e.open)), u = [];
     for (const s of /* @__PURE__ */ new Set([i, t, r])) {
-      const f = s?.ownerDocument.defaultView;
-      if (!s || !f || typeof f.ResizeObserver != "function") continue;
-      const A = new f.ResizeObserver(o);
-      A.observe(s), u.push(A);
+      const d = s?.ownerDocument.defaultView;
+      if (!s || !d || typeof d.ResizeObserver != "function") continue;
+      const y = new d.ResizeObserver(o);
+      y.observe(s), u.push(y);
     }
-    let S = i?.isConnected ?? !1, T = t?.isConnected ?? !1, I = r?.isConnected ?? !1;
+    let T = i?.isConnected ?? !1, W = t?.isConnected ?? !1, I = r?.isConnected ?? !1;
     const O = [];
     for (const s of n) {
-      const f = s.defaultView;
-      if (!f || typeof f.MutationObserver != "function" || !s.documentElement) continue;
-      const A = new f.MutationObserver(() => {
-        const J = i?.isConnected ?? !1, Q = t?.isConnected ?? !1, Y = r?.isConnected ?? !1;
-        S === J && T === Q && I === Y || (S = J, T = Q, I = Y, G(o));
+      const d = s.defaultView;
+      if (!d || typeof d.MutationObserver != "function" || !s.documentElement) continue;
+      const y = new d.MutationObserver(() => {
+        const Y = i?.isConnected ?? !1, Z = t?.isConnected ?? !1, $ = r?.isConnected ?? !1;
+        T === Y && W === Z && I === $ || (T = Y, W = Z, I = $, U(o));
       });
-      A.observe(s.documentElement, {
+      y.observe(s.documentElement, {
         childList: !0,
         subtree: !0
-      }), O.push(A);
+      }), O.push(y);
     }
     for (const s of c)
       s.addEventListener("resize", o), s.visualViewport?.addEventListener("resize", o), s.visualViewport?.addEventListener("scroll", o);
-    U(() => {
+    _(() => {
       for (const s of u) s.disconnect();
       for (const s of O) s.disconnect();
       for (const s of c)
         s.removeEventListener("resize", o), s.visualViewport?.removeEventListener("resize", o), s.visualViewport?.removeEventListener("scroll", o);
     });
-  }), k(() => {
-    if (!e.retained || !e.visible || !e.open || !m() || !F() || !v()) return;
+  }), G(() => {
+    if (!e.retained || !e.visible || !e.open || !m() || !F() || !f()) return;
     const t = a()?.ownerDocument;
     if (!t) return;
     const r = (o) => {
       const u = typeof o.composedPath == "function" ? o.composedPath() : [];
-      return w && u.includes(w) || e.anchor && u.includes(e.anchor) ? !0 : e.isOwnedInteraction?.(o) ?? !1;
+      return b && u.includes(b) || e.anchor && u.includes(e.anchor) ? !0 : e.isOwnedInteraction?.(o) ?? !1;
     }, n = (o) => {
       r(o) || e.onDismiss?.("outside-pointer");
     }, c = (o) => {
       if (o.key !== "Escape" || o.defaultPrevented || o.isComposing || o.keyCode === 229) return;
       const u = t.activeElement;
-      !w?.contains(u) && !e.isOwnedInteraction?.(o) || (o.preventDefault(), e.onDismiss?.("escape"));
+      !b?.contains(u) && !e.isOwnedInteraction?.(o) || (o.preventDefault(), e.onDismiss?.("escape"));
     };
-    t.addEventListener("pointerdown", n, !0), t.addEventListener("keydown", c), U(() => {
+    t.addEventListener("pointerdown", n, !0), t.addEventListener("keydown", c), _(() => {
       t.removeEventListener("pointerdown", n, !0), t.removeEventListener("keydown", c);
     });
-  }), U(() => {
-    X(), e.surfaceRef?.(null), e.contentHostRef?.(null);
+  }), _(() => {
+    j(), e.surfaceRef?.(null), e.contentHostRef?.(null);
   });
   const re = (i) => {
-    w = i, e.surfaceRef?.(i);
+    b = i, e.surfaceRef?.(i);
   }, ae = (i) => {
     e.contentHostRef?.(i);
   }, se = (i) => {
-    if (i.target !== w || i.propertyName !== P) return;
+    if (i.target !== b || i.propertyName !== C) return;
     const t = e.open ? "expanding" : "collapsing";
-    E() === t && (P = null, V(e.open ? "expanded" : "collapsed"));
+    H() === t && (C = null, D(e.open ? "expanded" : "collapsed"));
   };
-  return Z(he, {
+  return p(he, {
     get when() {
       return fe(() => !!e.retained)() && a();
     },
-    children: (i) => Z(ce, {
+    children: (i) => p(ce, {
       get mount() {
         return i();
       },
       get children() {
         var t = ve(), r = t.firstChild;
-        return t.addEventListener("transitionend", se), $((n) => re(n), t), $((n) => ae(n), r), le(r, () => e.children), ue((n) => {
-          var c = e.id, o = e.label, u = !e.visible || !m() || !F() || !v() ? "true" : void 0, S = !e.visible || !m() || !F() || !v(), T = ee("floe-bottom-bar-companion", e.class), I = E(), O = e.visible && m() && F() ? "visible" : "hidden", s = v() ? "true" : "false", f = Ae(v()), A = ee("floe-bottom-bar-companion__content", e.contentClass);
-          return c !== n.e && R(t, "id", n.e = c), o !== n.t && R(t, "aria-label", n.t = o), u !== n.a && R(t, "aria-hidden", n.a = u), S !== n.o && (t.inert = n.o = S), T !== n.i && p(t, n.i = T), I !== n.n && R(t, "data-companion-phase", n.n = I), O !== n.s && R(t, "data-companion-visibility", n.s = O), s !== n.h && R(t, "data-companion-frame-ready", n.h = s), n.r = de(t, f, n.r), A !== n.d && p(r, n.d = A), n;
+        return t.addEventListener("transitionend", se), ee((n) => re(n), t), ee((n) => ae(n), r), le(r, () => e.children), ue((n) => {
+          var c = e.id, o = e.label, u = !e.visible || !m() || !F() || !f() ? "true" : void 0, T = !e.visible || !m() || !F() || !f(), W = ne("floe-bottom-bar-companion", e.class), I = H(), O = e.visible && m() && F() ? "visible" : "hidden", s = f() ? "true" : "false", d = Ae(f()), y = ne("floe-bottom-bar-companion__content", e.contentClass);
+          return c !== n.e && V(t, "id", n.e = c), o !== n.t && V(t, "aria-label", n.t = o), u !== n.a && V(t, "aria-hidden", n.a = u), T !== n.o && (t.inert = n.o = T), W !== n.i && te(t, n.i = W), I !== n.n && V(t, "data-companion-phase", n.n = I), O !== n.s && V(t, "data-companion-visibility", n.s = O), s !== n.h && V(t, "data-companion-frame-ready", n.h = s), n.r = de(t, d, n.r), y !== n.d && te(r, n.d = y), n;
         }, {
           e: void 0,
           t: void 0,

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

@@ -1,14 +1,27 @@
 import { type JSX } from 'solid-js';
 import { type SurfaceFloatingLayerProps } from './SurfaceFloatingLayer';
+import { type SurfaceFloatingPanelBoundaryInsets, type SurfaceFloatingPanelPosition } from './surfaceFloatingPanelGeometry';
 export type SurfaceFloatingPanelHandleProps = Pick<JSX.ButtonHTMLAttributes<HTMLButtonElement>, 'onPointerDown' | 'onKeyDown' | 'style'> & {
     'oncapture:click': JSX.EventHandler<HTMLButtonElement, MouseEvent>;
 };
 export interface SurfaceFloatingPanelProps extends Omit<SurfaceFloatingLayerProps, 'position' | 'estimatedSize' | 'clamp' | 'children' | 'layerRef'> {
     /** Spread these props on a dedicated grip or collapsed launcher button. */
     children: (handle: SurfaceFloatingPanelHandleProps) => JSX.Element;
+    /** Non-interactive client/CSS viewport pixel insets, such as app chrome or a composer. */
+    boundaryInsets?: SurfaceFloatingPanelBoundaryInsets;
+    /** Snap the panel to the nearest safe boundary edge after a committed pointer drag. */
+    snapToEdge?: boolean;
+    /** Maximum client/CSS viewport pixel distance that enables snapping. Defaults to Infinity. */
+    snapThreshold?: number;
+    /** Client/CSS viewport pixel gap between the panel and its safe boundary. Defaults to 8px. */
+    snapInset?: number;
+    /** Called with client/CSS viewport coordinates after a committed position change. */
+    onPositionChange?: (position: SurfaceFloatingPanelPosition) => void;
 }
 /** A draggable, bottom-end anchored panel using the shared surface portal boundary.
  * Content owns its dimensions and collapsed presentation; the panel preserves its
  * relative placement as either changes. Drag handles never intercept content input.
+ * Geometry stays in client/CSS viewport coordinates; projected surfaces are converted
+ * only when the shared floating layer renders.
  */
 export declare function SurfaceFloatingPanel(props: SurfaceFloatingPanelProps): JSX.Element;

package/dist/components/ui/SurfaceFloatingPanel.js

@@ -1,17 +1,18 @@
-import { memo as A, createComponent as $, mergeProps as W, template as k, use as E } from "solid-js/web";
-import { splitProps as R, createSignal as y, createMemo as _, onMount as B, onCleanup as K } from "solid-js";
-import { SurfaceFloatingLayer as L } from "./SurfaceFloatingLayer.js";
-import { readSurfaceSafeArea as j, resolveFloatingBoundary as q } from "./surfaceFloatingBoundary.js";
-import { startPointerSession as G } from "./pointerSession.js";
-import { resolveSurfacePortalHost as I, resolveSurfacePortalScale as O } from "./dialogSurfaceScope.js";
-var T = /* @__PURE__ */ k("<span hidden>");
-function Z(X) {
-  const [l, Y] = R(X, ["children", "owner", "boundary", "style"]);
-  let m, d, p, h = !1;
-  const v = j(), [C, D] = y(!1), [w, x] = y({
+import { memo as X, createComponent as K, mergeProps as L, template as j, use as q } from "solid-js/web";
+import { splitProps as N, createSignal as b, createMemo as Y, onMount as O, onCleanup as U } from "solid-js";
+import { SurfaceFloatingLayer as V } from "./SurfaceFloatingLayer.js";
+import { readSurfaceSafeArea as z, resolveFloatingBoundary as J } from "./surfaceFloatingBoundary.js";
+import { startPointerSession as Q } from "./pointerSession.js";
+import { resolveSurfaceFloatingPanelBounds as Z, resolveSurfaceFloatingPanelPosition as ee, resolveSurfaceFloatingPanelInset as te, insetSurfaceFloatingPanelGeometry as ne, resolveSurfaceFloatingPanelSnap as oe, resolveSurfaceFloatingPanelSnapThreshold as re } from "./surfaceFloatingPanelGeometry.js";
+import { resolveSurfacePortalHost as ae, resolveSurfacePortalScale as ie } from "./dialogSurfaceScope.js";
+var se = /* @__PURE__ */ j("<span hidden>");
+function he($) {
+  const [a, E] = N($, ["children", "owner", "boundary", "style", "snapToEdge", "boundaryInsets", "snapThreshold", "snapInset", "onPositionChange"]);
+  let P, r, f, h = !1, p, c = null;
+  const B = z(), [G, R] = b(!1), [A, F] = b({
     x: 1,
     y: 1
-  }), [a, F] = y({
+  }), [u, W] = b({
     left: 0,
     top: 0,
     width: 0,
@@ -20,117 +21,136 @@ function Z(X) {
     panelHeight: 0,
     scaleX: 1,
     scaleY: 1
-  }), P = () => l.owner ?? m, f = () => {
-    if (!d) return;
-    const t = I({
-      owner: P()
-    }), e = q(t, l.boundary, v), o = O(t), n = d.getBoundingClientRect(), i = {
-      left: e?.left ?? 0,
-      top: e?.top ?? 0,
-      width: e?.width ?? 0,
-      height: e?.height ?? 0,
-      panelWidth: n.width,
-      panelHeight: n.height,
-      scaleX: o.x,
-      scaleY: o.y
+  }), x = () => a.owner ?? P, v = () => te(a.snapInset), S = Y(() => Z(u(), v())), k = () => x()?.ownerDocument.defaultView?.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 0 : 180, T = () => {
+    if (!r) return;
+    const e = ae({
+      owner: x()
+    }), t = J(e, a.boundary, B), n = ie(e), i = r.getBoundingClientRect(), o = {
+      ...ne({
+        left: t?.left ?? 0,
+        top: t?.top ?? 0,
+        width: t?.width ?? 0,
+        height: t?.height ?? 0,
+        panelWidth: i.width,
+        panelHeight: i.height
+      }, a.boundaryInsets),
+      scaleX: n.x,
+      scaleY: n.y
     };
-    F((r) => Object.keys(i).every((c) => i[c] === r[c]) ? r : i);
-  }, g = _(() => {
-    const t = a(), e = w();
-    return {
-      x: t.left + 8 + e.x * Math.max(0, t.width - t.panelWidth - 16),
-      y: t.top + 8 + e.y * Math.max(0, t.height - t.panelHeight - 16)
-    };
-  }), M = (t, e) => {
-    const o = a(), n = (i, r) => r > 0 ? Math.max(0, Math.min(1, i / r)) : 0;
-    x({
-      x: n(t - o.left - 8, o.width - o.panelWidth - 16),
-      y: n(e - o.top - 8, o.height - o.panelHeight - 16)
+    W((m) => Object.keys(o).every((s) => o[s] === m[s]) ? m : o);
+  }, l = Y(() => ee(S(), A())), y = (e, t) => {
+    const n = S(), i = (g, o) => o.room > 0 ? Math.max(0, Math.min(1, g / o.room)) : 0;
+    F({
+      x: i(e - n.x.min, n.x),
+      y: i(t - n.y.min, n.y)
     });
-  }, H = {
+  }, d = (e = l()) => {
+    a.onPositionChange?.(e);
+  }, M = () => {
+    p !== void 0 && (clearTimeout(p), p = void 0), r && c !== null && (r.style.transition = c, c = null);
+  }, C = () => {
+    const e = p !== void 0 ? r?.getBoundingClientRect() : void 0;
+    M(), T(), e && y(e.left, e.top);
+  }, H = () => {
+    const e = oe(l(), S(), re(a.snapThreshold));
+    if (!e) {
+      d(l());
+      return;
+    }
+    const t = l();
+    if (t.x === e.position.x && t.y === e.position.y) {
+      d(t);
+      return;
+    }
+    M();
+    const n = k();
+    r && (c = r.style.transition, r.style.transition = n ? `left ${n}ms ease-out, top ${n}ms ease-out` : "none"), y(e.position.x, e.position.y), d(e.position), p = setTimeout(() => {
+      r && c !== null && (r.style.transition = c), c = null, p = void 0;
+    }, n);
+  }, _ = {
     style: {
       "touch-action": "none",
       "user-select": "none"
     },
-    onPointerDown: (t) => {
-      if (t.button !== 0 || p) return;
-      t.stopPropagation(), f();
-      const e = w(), o = g(), n = t.clientX, i = t.clientY;
+    onPointerDown: (e) => {
+      if (e.button !== 0 || f) return;
+      e.stopPropagation(), C();
+      const t = A(), n = l(), i = e.clientX, g = e.clientY;
       h = !1;
-      let r = !1;
-      const c = (s, u) => {
-        const S = s - n, b = u - i;
-        r ||= Math.hypot(S, b) >= 4, r && M(o.x + S, o.y + b);
+      let o = !1;
+      const m = (s, w) => {
+        const D = s - i, I = w - g;
+        o ||= Math.hypot(D, I) >= 4, o && y(n.x + D, n.y + I);
       };
-      p = G({
-        pointerEvent: t,
-        captureEl: t.currentTarget,
+      f = Q({
+        pointerEvent: e,
+        captureEl: e.currentTarget,
         onMove: (s) => {
-          s.preventDefault(), c(s.clientX, s.clientY);
+          s.preventDefault(), m(s.clientX, s.clientY);
         },
         onEnd: ({
           commit: s,
-          snapshot: u
+          snapshot: w
         }) => {
-          s ? c(u.latestClientX, u.latestClientY) : x(e), h = r, p = void 0;
+          s ? (m(w.latestClientX, w.latestClientY), o && a.snapToEdge ? H() : o && d(l())) : F(t), h = o, f = void 0;
         }
       });
     },
-    "oncapture:click": (t) => {
-      h && t.detail !== 0 && (t.preventDefault(), t.stopImmediatePropagation()), h = !1;
+    "oncapture:click": (e) => {
+      h && e.detail !== 0 && (e.preventDefault(), e.stopImmediatePropagation()), h = !1;
     },
-    onKeyDown: (t) => {
-      const e = {
+    onKeyDown: (e) => {
+      const t = {
         ArrowLeft: [-1, 0],
         ArrowRight: [1, 0],
         ArrowUp: [0, -1],
         ArrowDown: [0, 1]
-      }[t.key];
-      if (!e) return;
-      t.preventDefault(), t.stopPropagation(), f();
-      const o = g(), n = t.shiftKey ? 40 : 10;
-      M(o.x + e[0] * n, o.y + e[1] * n);
+      }[e.key];
+      if (!t) return;
+      e.preventDefault(), e.stopPropagation(), C();
+      const n = l(), i = e.shiftKey ? 40 : 10;
+      y(n.x + t[0] * i, n.y + t[1] * i), d(l());
     }
   };
-  return B(() => {
-    D(!0);
-    let t = 0;
-    const e = () => {
-      f(), t = requestAnimationFrame(e);
+  return O(() => {
+    R(!0);
+    let e = 0;
+    const t = () => {
+      T(), e = requestAnimationFrame(t);
     };
-    e(), K(() => {
-      cancelAnimationFrame(t), p?.stop();
+    t(), U(() => {
+      cancelAnimationFrame(e), M(), f?.stop();
     });
   }), [(() => {
-    var t = T(), e = m;
-    return typeof e == "function" ? E(e, t) : m = t, t;
-  })(), A(() => A(() => !!C())() && $(L, W(Y, {
+    var e = se(), t = P;
+    return typeof t == "function" ? q(t, e) : P = e, e;
+  })(), X(() => X(() => !!G())() && K(V, L(E, {
     get owner() {
-      return P();
+      return x();
     },
     get boundary() {
-      return l.boundary;
+      return a.boundary;
     },
     get position() {
-      return g();
+      return l();
     },
     clamp: !1,
-    layerRef: (t) => {
-      d = t;
+    layerRef: (e) => {
+      r = e;
     },
     get style() {
       return {
-        ...l.style,
-        "max-width": `${Math.max(0, a().width - 16) / a().scaleX}px`,
-        "max-height": `${Math.max(0, a().height - 16) / a().scaleY}px`,
-        visibility: a().width <= 16 || a().height <= 16 ? "hidden" : void 0
+        ...a.style,
+        "max-width": `${Math.max(0, u().width - v() * 2) / Math.max(0.01, u().scaleX)}px`,
+        "max-height": `${Math.max(0, u().height - v() * 2) / Math.max(0.01, u().scaleY)}px`,
+        visibility: u().width <= 16 || u().height <= 16 ? "hidden" : void 0
       };
     },
     get children() {
-      return l.children(H);
+      return a.children(_);
     }
   })))];
 }
 export {
-  Z as SurfaceFloatingPanel
+  he as SurfaceFloatingPanel
 };

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

@@ -5,7 +5,8 @@ export { Input, Textarea, NumberInput, AffixInput, type InputProps, type InputSi
 export { Dialog, ConfirmDialog, type DialogProps, type ConfirmDialogProps } from './Dialog';
 export { DialogPlacementProvider, type DialogPlacementMode, type DialogPlacementProviderProps, } from './DialogPlacementContext';
 export { FloatingWindow, type FloatingWindowProps } from './FloatingWindow';
-export { SurfaceFloatingPanel, type SurfaceFloatingPanelProps, type SurfaceFloatingPanelHandleProps } from './SurfaceFloatingPanel';
+export { SurfaceFloatingPanel, type SurfaceFloatingPanelProps, type SurfaceFloatingPanelHandleProps, } from './SurfaceFloatingPanel';
+export type { SurfaceFloatingPanelBoundaryInsets, SurfaceFloatingPanelPosition, } from './surfaceFloatingPanelGeometry';
 export { createFloatingPresence, type FloatingPresence, type FloatingPresenceOptions, type FloatingPresenceState, } from './floatingPresence';
 export { MENU_ITEM_SELECTOR, focusMenuItem, getMenuItems, handleMenuKeyboardNavigation, moveMenuFocus, type MenuDismissReason, type MenuFocusMode, type MenuItemNavigationOptions, type MenuKeyboardNavigationOptions, } from './menuUtils';
 export { resolveFloatingWindowViewport, type FloatingWindowRect, type FloatingWindowViewport, type FloatingWindowViewportInsets, } from './floatingWindowGeometry';

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

@@ -0,0 +1,39 @@
+export type SurfaceFloatingPanelPosition = Readonly<{
+    x: number;
+    y: number;
+}>;
+export type SurfaceFloatingPanelGeometry = Readonly<{
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    panelWidth: number;
+    panelHeight: number;
+}>;
+export type SurfaceFloatingPanelBoundaryInsets = Readonly<{
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}>;
+export type SurfaceFloatingPanelAxis = Readonly<{
+    min: number;
+    max: number;
+    room: number;
+}>;
+export type SurfaceFloatingPanelBounds = Readonly<{
+    x: SurfaceFloatingPanelAxis;
+    y: SurfaceFloatingPanelAxis;
+}>;
+export type SurfaceFloatingPanelSnapEdge = 'left' | 'right' | 'top' | 'bottom';
+export type SurfaceFloatingPanelSnap = Readonly<{
+    edge: SurfaceFloatingPanelSnapEdge;
+    position: SurfaceFloatingPanelPosition;
+}>;
+export declare const DEFAULT_SURFACE_FLOATING_PANEL_INSET = 8;
+export declare function insetSurfaceFloatingPanelGeometry(geometry: SurfaceFloatingPanelGeometry, insets?: SurfaceFloatingPanelBoundaryInsets): SurfaceFloatingPanelGeometry;
+export declare function resolveSurfaceFloatingPanelInset(value: unknown): number;
+export declare function resolveSurfaceFloatingPanelSnapThreshold(value: unknown): number;
+export declare function resolveSurfaceFloatingPanelBounds(geometry: SurfaceFloatingPanelGeometry, inset?: number): SurfaceFloatingPanelBounds;
+export declare function resolveSurfaceFloatingPanelPosition(bounds: SurfaceFloatingPanelBounds, placement: SurfaceFloatingPanelPosition): SurfaceFloatingPanelPosition;
+export declare function resolveSurfaceFloatingPanelSnap(position: SurfaceFloatingPanelPosition, bounds: SurfaceFloatingPanelBounds, threshold?: number): SurfaceFloatingPanelSnap | null;