@floegence/floe-webapp-core 0.89.1 → 0.90.0

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/SurfaceAnchoredLayer.js

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