@floegence/floe-webapp-core 0.89.2 → 0.90.1

package/dist/components/ui/FloatingWindow.js

@@ -1,4 +1,4 @@
-import { createComponent as l, Portal as lt, use as Q, spread as ke, mergeProps as Oe, memo as Z, insert as c, effect as w, setAttribute as Te, addEventListener as P, className as v, template as a, delegateEvents as at } from "solid-js/web";
+import { createComponent as l, Portal as lt, use as Q, spread as ke, mergeProps as Oe, memo as Z, insert as c, effect as w, setAttribute as Te, addEventListener as P, className as x, template as a, delegateEvents as at } from "solid-js/web";
 import { createSignal as y, createUniqueId as st, onCleanup as D, onMount as dt, createEffect as I, untrack as W, Show as g, batch as we } from "solid-js";
 import { cn as J } from "../../utils/cn.js";
 import { useOptionalLayout as ct } from "../../context/LayoutContext.js";
@@ -7,16 +7,16 @@ import { useMediaQuery as ft } from "../../hooks/useMediaQuery.js";
 import { Button as Le } from "./Button.js";
 import { Restore as ht, Maximize as wt, X as gt } from "../icons/index.js";
 import { startHotInteraction as mt } from "../../utils/hotInteraction.js";
-import { startPointerSession as xt } from "./pointerSession.js";
-import { resolveFloatingWindowViewport as ge, normalizeFloatingWindowRect as me, resolveFloatingWindowRect as vt } from "./floatingWindowGeometry.js";
+import { startPointerSession as vt } from "./pointerSession.js";
+import { resolveFloatingWindowViewport as ge, normalizeFloatingWindowRect as me, resolveFloatingWindowRect as xt } from "./floatingWindowGeometry.js";
 import { observeViewport as yt } from "../../viewport.js";
 import { createFloatingPresence as bt } from "./floatingPresence.js";
 import { LOCAL_INTERACTION_SURFACE_ATTR as Be } from "./localInteractionSurface.js";
 import { resolveFloatingBoundary as zt } from "./surfaceFloatingBoundary.js";
 import { SURFACE_PORTAL_LAYER_ATTR as pt, resolveSurfacePortalHost as $t } from "./dialogSurfaceScope.js";
-var _t = /* @__PURE__ */ a("<span hidden>"), St = /* @__PURE__ */ a("<h2 class=sr-only>"), Pt = /* @__PURE__ */ a('<div data-floe-floating-window-title-content=true class="flex h-full min-w-0 flex-1 items-center cursor-default"style=touch-action:pan-x>'), It = /* @__PURE__ */ a('<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">'), Rt = /* @__PURE__ */ a('<div data-floe-floating-window-footer=true class="flex items-center justify-end gap-2 p-3 border-t border-[var(--floe-line)]">'), Ct = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=n style=touch-action:none>"), At = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=s style=touch-action:none>"), Et = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=e style=touch-action:none>"), Mt = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=w style=touch-action:none>"), Ft = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=ne style=touch-action:none>"), kt = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=nw style=touch-action:none>"), Ot = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=se style=touch-action:none>"), Tt = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=sw style=touch-action:none>"), Lt = /* @__PURE__ */ a('<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 h-full flex-1 min-w-0 items-center px-3"></div><div class="flex h-full shrink-0 items-stretch"></div></div><div data-floe-floating-window-content=true class="min-h-0 flex-1 overflow-auto overscroll-contain p-3">'), Bt = /* @__PURE__ */ a('<span data-floe-floating-window-title-icon=true aria-hidden=true class="flex size-4 shrink-0 items-center justify-center">'), Dt = /* @__PURE__ */ a('<h2 class="flex min-w-0 items-center gap-2 text-xs leading-none font-medium select-none"><span class="min-w-0 truncate">');
+var _t = /* @__PURE__ */ a("<span hidden>"), St = /* @__PURE__ */ a("<h2 class=sr-only>"), Pt = /* @__PURE__ */ a('<div data-floe-floating-window-title-content=true class="flex h-full min-w-0 flex-1 items-center">'), It = /* @__PURE__ */ a('<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">'), Rt = /* @__PURE__ */ a('<div data-floe-floating-window-footer=true class="flex items-center justify-end gap-2 p-3 border-t border-[var(--floe-line)]">'), Ct = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=n style=touch-action:none>"), At = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=s style=touch-action:none>"), Et = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=e style=touch-action:none>"), Mt = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=w style=touch-action:none>"), Ft = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=ne style=touch-action:none>"), kt = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=nw style=touch-action:none>"), Ot = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=se style=touch-action:none>"), Tt = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=sw style=touch-action:none>"), Lt = /* @__PURE__ */ a('<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 h-full flex-1 min-w-0 items-center px-3"></div><div class="flex h-full shrink-0 items-stretch"></div></div><div data-floe-floating-window-content=true class="min-h-0 flex-1 overflow-auto overscroll-contain p-3">'), Bt = /* @__PURE__ */ a('<span data-floe-floating-window-title-icon=true aria-hidden=true class="flex size-4 shrink-0 items-center justify-center">'), Dt = /* @__PURE__ */ a('<h2 class="flex min-w-0 items-center gap-2 text-xs leading-none font-medium select-none"><span class="min-w-0 truncate">');
 function nn(i) {
-  const xe = () => i.resizable ?? !0, K = () => i.maximizable ?? !0, ve = () => i.draggable ?? !0, q = () => i.minSize ?? {
+  const ve = () => i.resizable ?? !0, K = () => i.maximizable ?? !0, xe = () => i.draggable ?? !0, q = () => i.minSize ?? {
     width: 200,
     height: 150
   }, H = () => i.maxSize ?? {
@@ -68,11 +68,11 @@ function nn(i) {
     y: i.defaultPosition?.y ?? 0,
     width: i.defaultSize?.width ?? 400,
     height: i.defaultSize?.height ?? 300
-  }, x = {
+  }, v = {
     ...s
   }, A;
   const _e = (e) => {
-    x = {
+    v = {
       ...e
     };
     const t = ge(R(), b());
@@ -151,7 +151,7 @@ function nn(i) {
       if (f === "drag" && u()) {
         if (Math.hypot(C.x - z.x, C.y - z.y) < 4) return;
         const e = me({
-          rect: x,
+          rect: v,
           minSize: q(),
           maxSize: H(),
           viewport: R(),
@@ -165,7 +165,7 @@ function nn(i) {
           y: z.y - r
         }, oe(!1);
       }
-      j(vt({
+      j(xt({
         mode: f,
         pointer: C,
         dragStartPos: z,
@@ -190,7 +190,7 @@ function nn(i) {
       return;
     }
     let r = me({
-      rect: x,
+      rect: v,
       minSize: q(),
       maxSize: H(),
       viewport: t,
@@ -209,10 +209,10 @@ function nn(i) {
     }
     if (ue(r), !A) {
       const o = {
-        width: x.width,
-        height: x.height
+        width: v.width,
+        height: v.height
       };
-      _e(r), Object.assign(x, o);
+      _e(r), Object.assign(v, o);
     }
   }, Ie = (e) => {
     k !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(k), k = null), e && Pe();
@@ -229,10 +229,10 @@ function nn(i) {
       if (o) {
         ue(o);
         const S = {
-          width: x.width,
-          height: x.height
+          width: v.width,
+          height: v.height
         };
-        _e(o), f === "drag" && Object.assign(x, S);
+        _e(o), f === "drag" && Object.assign(v, S);
       }
       h = null, f = null, ye(!1), be(!1);
     }), ce(!1, ""), N = void 0, o && (j(o), t && r && d?.animate && (r.x !== o.x || r.y !== o.y) && !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)) {
@@ -344,7 +344,7 @@ function nn(i) {
     T(), O()?.fixedOffset, j(h === null ? e : s);
   });
   const nt = (e) => {
-    !ve() || m() || h !== null || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"], [data-floe-floating-window-header-actions], [data-floe-floating-window-title-content]') || (e.preventDefault(), p?.cancel(), p = void 0, le = e.currentTarget instanceof HTMLElement && e.currentTarget.getBoundingClientRect().height || 32, h = e.pointerId, f = "drag", ye(!0), z = {
+    !xe() || m() || h !== null || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"], [role="tab"], [data-floe-interactive], [data-floe-floating-window-header-actions], [contenteditable="true"]') || (e.preventDefault(), p?.cancel(), p = void 0, le = e.currentTarget instanceof HTMLElement && e.currentTarget.getBoundingClientRect().height || 32, h = e.pointerId, f = "drag", ye(!0), z = {
       x: e.clientX,
       y: e.clientY
     }, F = {
@@ -354,7 +354,7 @@ function nn(i) {
       y: e.clientY
     }, ce(!0, "grabbing"), Ce(e));
   }, $ = (e) => (t) => {
-    !xe() || u() || m() || h !== null || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), t.stopPropagation(), h = t.pointerId, f = "resize", be(!0), $e = e, ze = {
+    !ve() || u() || m() || h !== null || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), t.stopPropagation(), h = t.pointerId, f = "resize", be(!0), $e = e, ze = {
       x: t.clientX,
       y: t.clientY
     }, pe = {
@@ -377,7 +377,7 @@ function nn(i) {
       k = requestAnimationFrame(Re);
     }
   }, Ce = (e) => {
-    N = xt({
+    N = vt({
       pointerEvent: e,
       // Keep click/double-click targeting on the titlebar while retaining capture.
       captureEl: f === "drag" ? se : d,
@@ -396,7 +396,7 @@ function nn(i) {
   }, Ae = () => {
     !K() || m() || (h !== null && he(!0), oe(!u()), B());
   }, ot = (e) => {
-    e.target?.closest("button, [data-floe-floating-window-header-actions], [data-floe-floating-window-title-content]") || Ae();
+    e.target?.closest('button, input, select, textarea, a, [role="button"], [role="tab"], [data-floe-interactive], [data-floe-floating-window-header-actions], [contenteditable="true"]') || Ae();
   }, rt = (e) => {
     Ke(e.target) && Je();
   }, _ = (e) => J("absolute z-10", {
@@ -589,15 +589,15 @@ function nn(i) {
             }
           }), null), c(e, l(g, {
             get when() {
-              return Z(() => !!(xe() && !u()))() && !m();
+              return Z(() => !!(ve() && !u()))() && !m();
             },
             get children() {
               return [(() => {
                 var n = Ct();
-                return P(n, "pointerdown", $("n"), !0), w(() => v(n, _("n"))), n;
+                return P(n, "pointerdown", $("n"), !0), w(() => x(n, _("n"))), n;
               })(), (() => {
                 var n = At();
-                return P(n, "pointerdown", $("s"), !0), w(() => v(n, _("s"))), n;
+                return P(n, "pointerdown", $("s"), !0), w(() => x(n, _("s"))), n;
               })(), l(g, {
                 get when() {
                   return !E();
@@ -605,27 +605,27 @@ function nn(i) {
                 get children() {
                   return [(() => {
                     var n = Et();
-                    return P(n, "pointerdown", $("e"), !0), w(() => v(n, _("e"))), n;
+                    return P(n, "pointerdown", $("e"), !0), w(() => x(n, _("e"))), n;
                   })(), (() => {
                     var n = Mt();
-                    return P(n, "pointerdown", $("w"), !0), w(() => v(n, _("w"))), n;
+                    return P(n, "pointerdown", $("w"), !0), w(() => x(n, _("w"))), n;
                   })(), (() => {
                     var n = Ft();
-                    return P(n, "pointerdown", $("ne"), !0), w(() => v(n, _("ne"))), n;
+                    return P(n, "pointerdown", $("ne"), !0), w(() => x(n, _("ne"))), n;
                   })(), (() => {
                     var n = kt();
-                    return P(n, "pointerdown", $("nw"), !0), w(() => v(n, _("nw"))), n;
+                    return P(n, "pointerdown", $("nw"), !0), w(() => x(n, _("nw"))), n;
                   })(), (() => {
                     var n = Ot();
-                    return P(n, "pointerdown", $("se"), !0), w(() => v(n, _("se"))), n;
+                    return P(n, "pointerdown", $("se"), !0), w(() => x(n, _("se"))), n;
                   })(), (() => {
                     var n = Tt();
-                    return P(n, "pointerdown", $("sw"), !0), w(() => v(n, _("sw"))), n;
+                    return P(n, "pointerdown", $("sw"), !0), w(() => x(n, _("sw"))), n;
                   })()];
                 }
               })];
             }
-          }), null), w(() => v(r, J("flex shrink-0 items-center justify-between h-8", "border-b", u() ? "rounded-none" : "rounded-t-panel", ve() && !m() && (L() ? "cursor-grabbing" : "cursor-move")))), e;
+          }), null), w(() => x(r, J("flex shrink-0 items-center justify-between h-8", "border-b", u() ? "rounded-none" : "rounded-t-panel", xe() && !m() && (L() ? "cursor-grabbing" : "cursor-move")))), e;
         }
       });
     }

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/components/ui/Tabs.d.ts

@@ -73,6 +73,8 @@ export interface TabsProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onC
     onActiveIdChange?: (id: string) => void;
     /** Callback when tab is closed */
     onClose?: (id: string) => void;
+    /** Enable pointer sorting and Alt+Shift+Left/Right. Receives the complete ordered IDs. */
+    onReorder?: (ids: string[]) => void;
     /** Callback when add button is clicked */
     onAdd?: () => void;
     /** Whether to show add button (legacy alias; overridden by features.addButton.enabled when provided) */