@floegence/floe-webapp-core 0.52.5 → 0.52.7

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

@@ -7,6 +7,8 @@ export interface FloatingWindowProps {
     onOpenChange: (open: boolean) => void;
     /** Window title */
     title?: string;
+    /** Compact actions at the right of the title bar, before the window controls. */
+    headerActions?: JSX.Element;
     /** Window content */
     children: JSX.Element;
     /** Optional footer content */

package/dist/components/ui/FloatingWindow.js

@@ -1,53 +1,53 @@
-import { createComponent as a, Portal as Te, spread as ce, mergeProps as fe, memo as we, insert as g, effect as c, setAttribute as De, addEventListener as m, className as f, template as u, use as We, delegateEvents as Oe } from "solid-js/web";
-import { createUniqueId as He, createSignal as p, onCleanup as L, onMount as Ye, createEffect as b, Show as S, batch as Ne, untrack as Xe } from "solid-js";
-import { cn as M } from "../../utils/cn.js";
-import { useLayout as Ue } from "../../context/LayoutContext.js";
-import { Button as he } from "./Button.js";
-import { Restore as qe, Maximize as Be, X as Ge } from "../icons/index.js";
-import { startHotInteraction as je } from "../../utils/hotInteraction.js";
-import { startPointerSession as Ve } from "./pointerSession.js";
-import { resolveFloatingWindowViewport as ge, normalizeFloatingWindowRect as me, resolveFloatingWindowRect as Ze } from "./floatingWindowGeometry.js";
-import { createFloatingPresence as Je } from "./floatingPresence.js";
+import { createComponent as a, Portal as De, spread as ce, mergeProps as fe, memo as he, insert as c, effect as f, setAttribute as We, addEventListener as m, className as h, template as d, use as Oe, delegateEvents as He } from "solid-js/web";
+import { createUniqueId as Ye, createSignal as p, onCleanup as L, onMount as Ne, createEffect as $, Show as x, batch as Xe, untrack as Ue } from "solid-js";
+import { cn as k } from "../../utils/cn.js";
+import { useLayout as qe } from "../../context/LayoutContext.js";
+import { Button as we } from "./Button.js";
+import { Restore as Be, Maximize as Ge, X as je } from "../icons/index.js";
+import { startHotInteraction as Ve } from "../../utils/hotInteraction.js";
+import { startPointerSession as Ze } from "./pointerSession.js";
+import { resolveFloatingWindowViewport as ge, normalizeFloatingWindowRect as me, resolveFloatingWindowRect as Je } from "./floatingWindowGeometry.js";
+import { createFloatingPresence as Ke } from "./floatingPresence.js";
 import { LOCAL_INTERACTION_SURFACE_ATTR as ve } from "./localInteractionSurface.js";
-import { SURFACE_PORTAL_LAYER_ATTR as Ke, SURFACE_FLOATING_LAYER_ATTR as Qe } from "./dialogSurfaceScope.js";
-var et = /* @__PURE__ */ u('<h2 class="text-xs leading-none font-medium truncate select-none">'), tt = /* @__PURE__ */ u('<div data-floe-floating-window-footer=true class="flex items-center justify-end gap-2 p-3 border-t border-border">'), nt = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=n style=touch-action:none>"), it = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=s style=touch-action:none>"), ot = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=e style=touch-action:none>"), rt = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=w style=touch-action:none>"), lt = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=ne style=touch-action:none>"), st = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=nw style=touch-action:none>"), at = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=se style=touch-action:none>"), dt = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=sw style=touch-action:none>"), ut = /* @__PURE__ */ u('<div data-floe-geometry-surface=floating-window><div data-floe-dialog-surface-host=true><div data-floe-floating-window-titlebar=true style=touch-action:none><div class="flex-1 min-w-0 px-2"></div><div class="flex h-full shrink-0 items-stretch"></div></div><div data-floe-floating-window-content=true class="flex-1 overflow-auto p-3">');
+import { SURFACE_PORTAL_LAYER_ATTR as Qe, SURFACE_FLOATING_LAYER_ATTR as et } from "./dialogSurfaceScope.js";
+var tt = /* @__PURE__ */ d('<h2 class="text-xs leading-none font-medium truncate select-none">'), nt = /* @__PURE__ */ d('<div data-floe-floating-window-header-actions=true class="flex shrink-0 cursor-default items-center gap-1"><span aria-hidden=true class="mx-2 h-4 w-px shrink-0 bg-border">'), it = /* @__PURE__ */ d('<div data-floe-floating-window-footer=true class="flex items-center justify-end gap-2 p-3 border-t border-border">'), ot = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=n style=touch-action:none>"), rt = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=s style=touch-action:none>"), lt = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=e style=touch-action:none>"), at = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=w style=touch-action:none>"), st = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=ne style=touch-action:none>"), dt = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=nw style=touch-action:none>"), ut = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=se style=touch-action:none>"), ct = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=sw style=touch-action:none>"), ft = /* @__PURE__ */ d('<div data-floe-geometry-surface=floating-window><div data-floe-dialog-surface-host=true><div data-floe-floating-window-titlebar=true style=touch-action:none><div class="flex-1 min-w-0 px-2"></div><div class="flex h-full shrink-0 items-stretch"></div></div><div data-floe-floating-window-content=true class="flex-1 overflow-auto p-3">');
 function St(i) {
-  const B = () => i.resizable ?? !0, G = () => i.draggable ?? !0, k = () => i.minSize ?? {
+  const G = () => i.resizable ?? !0, j = () => i.draggable ?? !0, M = () => i.minSize ?? {
     width: 200,
     height: 150
   }, T = () => i.maxSize ?? {
     width: 1 / 0,
     height: 1 / 0
-  }, x = () => i.viewportInsets ?? {}, pe = () => i.zIndex ?? 100, xe = He(), ze = Ue(), $ = () => ze.isMobile(), D = 16, j = () => `floating-window-${xe}-title`, [W, ye] = p(i.defaultPosition ?? {
+  }, z = () => i.viewportInsets ?? {}, pe = () => i.zIndex ?? 100, xe = Ye(), ze = qe(), _ = () => ze.isMobile(), D = 16, V = () => `floating-window-${xe}-title`, [W, ye] = p(i.defaultPosition ?? {
     x: 0,
     y: 0
   }), [O, be] = p(i.defaultSize ?? {
     width: 400,
     height: 300
-  }), [d, V] = p(!1), [R, Z] = p(!1), [E, J] = p(!1), [Se, H] = p(!1), _ = Je({
+  }), [u, Z] = p(!1), [R, J] = p(!1), [E, K] = p(!1), [$e, H] = p(!1), S = Ke({
     open: () => i.open,
     exitDurationMs: 120
-  }), [$e, _e] = p(null);
-  let K = {
+  }), [_e, Se] = p(null);
+  let Q = {
     x: 0,
     y: 0
-  }, Q = {
+  }, ee = {
     x: 0,
     y: 0,
     width: 0,
     height: 0
-  }, ee = {
+  }, te = {
     x: 0,
     y: 0
-  }, te = {
+  }, ne = {
     x: 0,
     y: 0,
     width: 0,
     height: 0
-  }, ne = "se", l, s = null, C, v = null, I = {
+  }, ie = "se", l, s = null, A, v = null, I = {
     x: 0,
     y: 0
-  }, z = null, A = null, Y = !1, y = {
+  }, y = null, C = null, Y = !1, b = {
     x: i.defaultPosition?.x ?? 0,
     y: i.defaultPosition?.y ?? 0,
     width: i.defaultSize?.width ?? 400,
@@ -64,16 +64,16 @@ function St(i) {
     sw: "nesw-resize"
   }, N = (e, t) => {
     if (!e) {
-      A?.(), A = null;
+      C?.(), C = null;
       return;
     }
-    A?.(), A = je({
+    C?.(), C = Ve({
       kind: v === "resize" ? "resize" : "drag",
       cursor: t,
       lockUserSelect: !0
     });
-  }, ie = (e) => {
-    y = e, l && (l.style.transform = `translate3d(${e.x}px, ${e.y}px, 0)`, l.style.width = `${e.width}px`, l.style.height = `${e.height}px`);
+  }, oe = (e) => {
+    b = e, l && (l.style.transform = `translate3d(${e.x}px, ${e.y}px, 0)`, l.style.width = `${e.width}px`, l.style.height = `${e.height}px`);
   }, X = () => {
     const e = W(), t = O();
     return {
@@ -83,7 +83,7 @@ function St(i) {
       height: t.height
     };
   }, P = (e) => {
-    y = e, ye((t) => t.x === e.x && t.y === e.y ? t : {
+    b = e, ye((t) => t.x === e.x && t.y === e.y ? t : {
       x: e.x,
       y: e.y
     }), be((t) => t.width === e.width && t.height === e.height ? t : {
@@ -101,9 +101,9 @@ function St(i) {
     const t = e instanceof Element ? e : null;
     return t ? t.closest('button, input, select, textarea, a, [role="button"], [tabindex]:not([tabindex="-1"])') === null : !0;
   }, U = (e) => !!l && e instanceof Node && l.contains(e), Ee = (e) => {
-    const r = (e instanceof Element ? e : null)?.closest('[role="menu"]')?.closest(`[${Qe}="true"]`);
+    const r = (e instanceof Element ? e : null)?.closest('[role="menu"]')?.closest(`[${et}="true"]`);
     return !!(r && l?.contains(r));
-  }, Ce = () => {
+  }, Ae = () => {
     if (!l) return null;
     const e = l.getBoundingClientRect();
     return {
@@ -112,23 +112,23 @@ function St(i) {
       width: e.width,
       height: e.height
     };
-  }, oe = () => {
-    i.open && (s === null || v === null || typeof window > "u" || ie(Ze({
+  }, re = () => {
+    i.open && (s === null || v === null || typeof window > "u" || oe(Je({
       mode: v,
       pointer: I,
-      dragStartPos: K,
-      dragStartRect: Q,
-      resizeStartPos: ee,
-      resizeStartRect: te,
-      resizeHandle: ne,
-      minSize: k(),
+      dragStartPos: Q,
+      dragStartRect: ee,
+      resizeStartPos: te,
+      resizeStartRect: ne,
+      resizeHandle: ie,
+      minSize: M(),
       maxSize: T(),
       viewport: {
         width: window.innerWidth,
         height: window.innerHeight
       },
-      viewportInsets: x(),
-      mobile: $(),
+      viewportInsets: z(),
+      mobile: _(),
       mobilePadding: D
     })));
   }, F = (e) => {
@@ -137,32 +137,32 @@ function St(i) {
       width: window.innerWidth,
       height: window.innerHeight
     };
-    if (d()) {
-      P(ge(t, x()));
+    if (u()) {
+      P(ge(t, z()));
       return;
     }
     P(me({
       rect: X(),
-      minSize: k(),
+      minSize: M(),
       maxSize: T(),
       viewport: t,
-      viewportInsets: x(),
-      mobile: $(),
+      viewportInsets: z(),
+      mobile: _(),
       mobilePadding: D,
       center: e?.center ?? !1
     }));
-  }, re = (e) => {
-    z !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(z), z = null), e && oe();
-    const t = e ? Ce() ?? y : null;
-    Ne(() => {
-      t && P(t), s = null, v = null, Z(!1), J(!1);
-    }), N(!1, ""), C = void 0;
+  }, le = (e) => {
+    y !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(y), y = null), e && re();
+    const t = e ? Ae() ?? b : null;
+    Xe(() => {
+      t && P(t), s = null, v = null, J(!1), K(!1);
+    }), N(!1, ""), A = void 0;
   }, q = (e = !1) => {
-    C ? C.stop({
+    A ? A.stop({
       commit: e
-    }) : re(e);
+    }) : le(e);
   };
-  L(() => q(!1)), Ye(() => {
+  L(() => q(!1)), Ne(() => {
     i.open || F({
       center: !i.defaultPosition
     });
@@ -172,9 +172,9 @@ function St(i) {
       });
     };
     window.addEventListener("resize", e), L(() => window.removeEventListener("resize", e));
-  }), b(() => {
+  }), $(() => {
     if (!i.open) return;
-    $();
+    _();
     const e = !Y && !i.defaultPosition, t = () => {
       F({
         center: e
@@ -185,11 +185,11 @@ function St(i) {
       return;
     }
     requestAnimationFrame(t);
-  }), b(() => {
-    !i.open || !Y || s !== null || (x(), Xe(() => F({
+  }), $(() => {
+    !i.open || !Y || s !== null || (z(), Ue(() => F({
       center: !1
     })));
-  }), b(() => {
+  }), $(() => {
     if (!i.open) return;
     const e = (t) => {
       if (t.key !== "Escape") return;
@@ -197,13 +197,13 @@ function St(i) {
       !U(t.target) && !U(o) || Ee(t.target) || (t.preventDefault(), typeof t.stopImmediatePropagation == "function" ? t.stopImmediatePropagation() : t.stopPropagation(), i.onOpenChange(!1));
     };
     document.addEventListener("keydown", e, !0), L(() => document.removeEventListener("keydown", e, !0));
-  }), b(() => {
+  }), $(() => {
     if (!i.open) {
       H(!1), q(!1);
       return;
     }
     H(!0);
-  }), b(() => {
+  }), $(() => {
     if (!i.open) return;
     const e = (r) => {
       H(U(r));
@@ -215,46 +215,46 @@ function St(i) {
     document.addEventListener("pointerdown", t), document.addEventListener("focusin", o), L(() => {
       document.removeEventListener("pointerdown", t), document.removeEventListener("focusin", o);
     });
-  }), b(() => {
+  }), $(() => {
     if (!i.open) return;
     const e = X();
-    s === null ? ie(e) : y = e;
+    s === null ? oe(e) : b = e;
   });
-  const Ae = (e) => {
-    !G() || d() || s !== null || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"]') || (e.preventDefault(), s = e.pointerId, v = "drag", Z(!0), K = {
+  const Ce = (e) => {
+    !j() || u() || s !== null || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"], [data-floe-floating-window-header-actions]') || (e.preventDefault(), s = e.pointerId, v = "drag", J(!0), Q = {
       x: e.clientX,
       y: e.clientY
-    }, Q = {
-      ...y
+    }, ee = {
+      ...b
     }, I = {
       x: e.clientX,
       y: e.clientY
     }, N(!0, "grabbing"), se(e));
   }, w = (e) => (t) => {
-    !B() || d() || s !== null || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), t.stopPropagation(), s = t.pointerId, v = "resize", J(!0), ne = e, ee = {
+    !G() || u() || s !== null || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), t.stopPropagation(), s = t.pointerId, v = "resize", K(!0), ie = e, te = {
       x: t.clientX,
       y: t.clientY
-    }, te = {
-      ...y
+    }, ne = {
+      ...b
     }, I = {
       x: t.clientX,
       y: t.clientY
     }, N(!0, Ie[e]), se(t));
-  }, le = () => {
-    z = null, oe();
+  }, ae = () => {
+    y = null, re();
   }, Fe = (e) => {
     if (!(s === null || e.pointerId !== s) && v !== null && (I = {
       x: e.clientX,
       y: e.clientY
-    }, z === null)) {
+    }, y === null)) {
       if (typeof requestAnimationFrame > "u") {
-        le();
+        ae();
         return;
       }
-      z = requestAnimationFrame(le);
+      y = requestAnimationFrame(ae);
     }
   }, se = (e) => {
-    C = Ve({
+    A = Ze({
       pointerEvent: e,
       captureEl: l,
       onMove: Fe,
@@ -266,12 +266,12 @@ function St(i) {
         I = {
           x: r.latestClientX,
           y: r.latestClientY
-        }, re(t || o === "pointer_cancel");
+        }, le(t || o === "pointer_cancel");
       }
     });
-  }, ae = () => {
-    if (s !== null && q(!0), d()) {
-      const t = $e();
+  }, de = () => {
+    if (s !== null && q(!0), u()) {
+      const t = _e();
       t && P(me({
         rect: {
           x: t.position.x,
@@ -279,21 +279,21 @@ function St(i) {
           width: t.size.width,
           height: t.size.height
         },
-        minSize: k(),
+        minSize: M(),
         maxSize: T(),
         viewport: {
           width: window.innerWidth,
           height: window.innerHeight
         },
-        viewportInsets: x(),
-        mobile: $(),
+        viewportInsets: z(),
+        mobile: _(),
         mobilePadding: D,
         center: !1
-      })), V(!1);
+      })), Z(!1);
       return;
     }
     const e = X();
-    _e({
+    Se({
       position: {
         x: e.x,
         y: e.y
@@ -305,12 +305,12 @@ function St(i) {
     }), P(ge({
       width: window.innerWidth,
       height: window.innerHeight
-    }, x())), V(!0);
+    }, z())), Z(!0);
   }, Le = (e) => {
-    e.target?.closest("button") || ae();
-  }, Me = (e) => {
+    e.target?.closest("button, [data-floe-floating-window-header-actions]") || de();
+  }, ke = (e) => {
     Re(e.target) && Pe();
-  }, h = (e) => M("absolute z-10", {
+  }, g = (e) => k("absolute z-10", {
     n: "cursor-ns-resize top-0 left-2 right-2 h-1",
     s: "cursor-ns-resize bottom-0 left-2 right-2 h-1",
     e: "cursor-ew-resize right-0 top-2 bottom-2 w-1",
@@ -320,26 +320,26 @@ function St(i) {
     se: "cursor-nwse-resize bottom-0 right-0 w-2 h-2",
     sw: "cursor-nesw-resize bottom-0 left-0 w-2 h-2"
   }[e]);
-  return a(S, {
+  return a(x, {
     get when() {
-      return _.mounted();
+      return S.mounted();
     },
     get children() {
-      return a(Te, {
+      return a(De, {
         get children() {
-          var e = ut(), t = e.firstChild, o = t.firstChild, r = o.firstChild, de = r.nextSibling, ke = o.nextSibling, ue = l;
-          return typeof ue == "function" ? We(ue, e) : l = e, ce(e, fe({
+          var e = ft(), t = e.firstChild, o = t.firstChild, r = o.firstChild, B = r.nextSibling, Me = o.nextSibling, ue = l;
+          return typeof ue == "function" ? Oe(ue, e) : l = e, ce(e, fe({
             get "data-floating-presence"() {
-              return _.state();
+              return S.state();
             },
             get "aria-hidden"() {
-              return _.exiting() ? "true" : void 0;
+              return S.exiting() ? "true" : void 0;
             }
           }, {
             [ve]: "true"
           }, {
             get class() {
-              return M("fixed left-0 top-0 z-[100] flex flex-col", (R() || E()) && "select-none", _.exiting() && "pointer-events-none");
+              return k("fixed left-0 top-0 z-[100] flex flex-col", (R() || E()) && "select-none", S.exiting() && "pointer-events-none");
             },
             get style() {
               return {
@@ -352,12 +352,12 @@ function St(i) {
             },
             role: "dialog",
             get "aria-labelledby"() {
-              return we(() => !!i.title)() ? j() : void 0;
+              return he(() => !!i.title)() ? V() : void 0;
             },
             tabIndex: -1,
-            onPointerDown: Me
+            onPointerDown: ke
           }), !1, !0), ce(t, fe({
-            [Ke]: "true"
+            [Qe]: "true"
           }, {
             "data-floe-floating-window-surface": "true",
             "data-floe-surface": "floating",
@@ -365,59 +365,67 @@ function St(i) {
               return R() || E() ? "true" : void 0;
             },
             get "data-floe-floating-window-state"() {
-              return Se() ? "active" : "inactive";
+              return $e() ? "active" : "inactive";
             }
           }, {
             [ve]: "true"
           }, {
             get class() {
-              return M("relative flex h-full w-full flex-col overflow-hidden", "text-card-foreground rounded-md", "border", "floe-floating-presence floe-floating-window-motion", (R() || E()) && "floe-floating-presence--suspended", d() && "rounded-none", i.class);
+              return k("relative flex h-full w-full flex-col overflow-hidden", "text-card-foreground rounded-md", "border", "floe-floating-presence floe-floating-window-motion", (R() || E()) && "floe-floating-presence--suspended", u() && "rounded-none", i.class);
             },
             get style() {
               return {
-                "border-radius": d() ? "0" : "10px"
+                "border-radius": u() ? "0" : "10px"
               };
             },
             get "data-floating-presence"() {
-              return _.state();
+              return S.state();
             }
-          }), !1, !0), o.$$dblclick = Le, o.$$pointerdown = Ae, g(r, a(S, {
+          }), !1, !0), o.$$dblclick = Le, o.$$pointerdown = Ce, c(r, a(x, {
             get when() {
               return i.title;
             },
             get children() {
-              var n = et();
-              return g(n, () => i.title), c(() => De(n, "id", j())), n;
+              var n = tt();
+              return c(n, () => i.title), f(() => We(n, "id", V())), n;
+            }
+          })), c(o, a(x, {
+            get when() {
+              return i.headerActions;
+            },
+            get children() {
+              var n = nt(), Te = n.firstChild;
+              return c(n, () => i.headerActions, Te), n;
             }
-          })), g(de, a(he, {
+          }), B), c(B, a(we, {
             variant: "ghost",
             size: "icon",
             "data-floe-floating-window-control": "maximize",
             class: "h-full w-9 shrink-0 rounded-none border-0 px-0 active:scale-100",
             onClick: (n) => {
-              n.stopPropagation(), ae();
+              n.stopPropagation(), de();
             },
             get "aria-label"() {
-              return d() ? "Restore" : "Maximize";
+              return u() ? "Restore" : "Maximize";
             },
             get children() {
-              return a(S, {
+              return a(x, {
                 get when() {
-                  return d();
+                  return u();
                 },
                 get fallback() {
-                  return a(Be, {
+                  return a(Ge, {
                     class: "w-3 h-3"
                   });
                 },
                 get children() {
-                  return a(qe, {
+                  return a(Be, {
                     class: "w-3 h-3"
                   });
                 }
               });
             }
-          }), null), g(de, a(he, {
+          }), null), c(B, a(we, {
             variant: "ghost-destructive",
             size: "icon",
             "data-floe-floating-window-control": "close",
@@ -427,63 +435,63 @@ function St(i) {
             },
             "aria-label": "Close",
             get children() {
-              return a(Ge, {
+              return a(je, {
                 class: "w-3.5 h-3.5"
               });
             }
-          }), null), g(ke, () => i.children), g(t, a(S, {
+          }), null), c(Me, () => i.children), c(t, a(x, {
             get when() {
               return i.footer;
             },
             get children() {
-              var n = tt();
-              return g(n, () => i.footer), n;
+              var n = it();
+              return c(n, () => i.footer), n;
             }
-          }), null), g(t, a(S, {
+          }), null), c(t, a(x, {
             get when() {
-              return we(() => !!B())() && !d();
+              return he(() => !!G())() && !u();
             },
             get children() {
               return [(() => {
-                var n = nt();
-                return m(n, "pointerdown", w("n"), !0), c(() => f(n, h("n"))), n;
+                var n = ot();
+                return m(n, "pointerdown", w("n"), !0), f(() => h(n, g("n"))), n;
               })(), (() => {
-                var n = it();
-                return m(n, "pointerdown", w("s"), !0), c(() => f(n, h("s"))), n;
-              })(), a(S, {
+                var n = rt();
+                return m(n, "pointerdown", w("s"), !0), f(() => h(n, g("s"))), n;
+              })(), a(x, {
                 get when() {
-                  return !$();
+                  return !_();
                 },
                 get children() {
                   return [(() => {
-                    var n = ot();
-                    return m(n, "pointerdown", w("e"), !0), c(() => f(n, h("e"))), n;
-                  })(), (() => {
-                    var n = rt();
-                    return m(n, "pointerdown", w("w"), !0), c(() => f(n, h("w"))), n;
-                  })(), (() => {
                     var n = lt();
-                    return m(n, "pointerdown", w("ne"), !0), c(() => f(n, h("ne"))), n;
-                  })(), (() => {
-                    var n = st();
-                    return m(n, "pointerdown", w("nw"), !0), c(() => f(n, h("nw"))), n;
+                    return m(n, "pointerdown", w("e"), !0), f(() => h(n, g("e"))), n;
                   })(), (() => {
                     var n = at();
-                    return m(n, "pointerdown", w("se"), !0), c(() => f(n, h("se"))), n;
+                    return m(n, "pointerdown", w("w"), !0), f(() => h(n, g("w"))), n;
+                  })(), (() => {
+                    var n = st();
+                    return m(n, "pointerdown", w("ne"), !0), f(() => h(n, g("ne"))), n;
                   })(), (() => {
                     var n = dt();
-                    return m(n, "pointerdown", w("sw"), !0), c(() => f(n, h("sw"))), n;
+                    return m(n, "pointerdown", w("nw"), !0), f(() => h(n, g("nw"))), n;
+                  })(), (() => {
+                    var n = ut();
+                    return m(n, "pointerdown", w("se"), !0), f(() => h(n, g("se"))), n;
+                  })(), (() => {
+                    var n = ct();
+                    return m(n, "pointerdown", w("sw"), !0), f(() => h(n, g("sw"))), n;
                   })()];
                 }
               })];
             }
-          }), null), c(() => f(o, M("flex shrink-0 items-center justify-between h-8", "border-b", d() ? "rounded-none" : "rounded-t-md", G() && !d() && "cursor-move"))), e;
+          }), null), f(() => h(o, k("flex shrink-0 items-center justify-between h-8", "border-b", u() ? "rounded-none" : "rounded-t-md", j() && !u() && "cursor-move"))), e;
         }
       });
     }
   });
 }
-Oe(["pointerdown", "dblclick"]);
+He(["pointerdown", "dblclick"]);
 export {
   St as FloatingWindow
 };

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

@@ -0,0 +1,14 @@
+import { type JSX } from 'solid-js';
+import { type SurfaceFloatingLayerProps } from './SurfaceFloatingLayer';
+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;
+}
+/** 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.
+ */
+export declare function SurfaceFloatingPanel(props: SurfaceFloatingPanelProps): JSX.Element;