@floegence/floe-webapp-core 0.52.7 → 0.52.8

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;

package/dist/components/ui/surfaceFloatingPanelGeometry.js

@@ -0,0 +1,78 @@
+const u = 8;
+function h(t, n) {
+  const e = Number(t);
+  return Number.isFinite(e) && e >= 0 ? e : n;
+}
+function M(t, n = {}) {
+  const e = Math.max(0, t.width), o = Math.max(0, t.height), i = Math.min(h(n.left, 0), e), a = Math.min(h(n.top, 0), o), c = Math.min(h(n.right, 0), Math.max(0, e - i)), r = Math.min(h(n.bottom, 0), Math.max(0, o - a));
+  return {
+    ...t,
+    left: t.left + i,
+    top: t.top + a,
+    width: Math.max(0, e - i - c),
+    height: Math.max(0, o - a - r)
+  };
+}
+function s(t) {
+  return h(t, 8);
+}
+function f(t) {
+  const n = Number(t);
+  return Number.isFinite(n) && n >= 0 ? n : 1 / 0;
+}
+function l(t, n, e, o) {
+  const i = Math.max(0, Number.isFinite(n) ? n : 0), a = Math.max(0, Number.isFinite(e) ? e : 0), c = Math.min(o, i / 2), r = t + c, m = Math.max(r, t + i - a - c);
+  return { min: r, max: m, room: Math.max(0, m - r) };
+}
+function F(t, n = 8) {
+  const e = s(n);
+  return {
+    x: l(t.left, t.width, t.panelWidth, e),
+    y: l(t.top, t.height, t.panelHeight, e)
+  };
+}
+function N(t, n) {
+  return {
+    x: t.x.min + n.x * t.x.room,
+    y: t.y.min + n.y * t.y.room
+  };
+}
+function x(t, n) {
+  return Math.max(n.min, Math.min(n.max, t));
+}
+function S(t, n, e = 1 / 0) {
+  const o = f(e), i = [
+    {
+      edge: "left",
+      distance: Math.max(0, t.x - n.x.min),
+      position: { x: n.x.min, y: x(t.y, n.y) }
+    },
+    {
+      edge: "right",
+      distance: Math.max(0, n.x.max - t.x),
+      position: { x: n.x.max, y: x(t.y, n.y) }
+    },
+    {
+      edge: "top",
+      distance: Math.max(0, t.y - n.y.min),
+      position: { x: x(t.x, n.x), y: n.y.min }
+    },
+    {
+      edge: "bottom",
+      distance: Math.max(0, n.y.max - t.y),
+      position: { x: x(t.x, n.x), y: n.y.max }
+    }
+  ];
+  i.sort((c, r) => c.distance - r.distance);
+  const a = i[0];
+  return !a || a.distance > o ? null : { edge: a.edge, position: a.position };
+}
+export {
+  u as DEFAULT_SURFACE_FLOATING_PANEL_INSET,
+  M as insetSurfaceFloatingPanelGeometry,
+  F as resolveSurfaceFloatingPanelBounds,
+  s as resolveSurfaceFloatingPanelInset,
+  N as resolveSurfaceFloatingPanelPosition,
+  S as resolveSurfaceFloatingPanelSnap,
+  f as resolveSurfaceFloatingPanelSnapThreshold
+};