@floegence/floe-webapp-core 0.86.60 → 0.86.62

package/dist/components/layout/MobileNavigationPanel.js

@@ -1,49 +1,49 @@
-import { createComponent as g, use as T, setAttribute as a, insert as f, effect as S, memo as j, className as M, template as h, delegateEvents as q } from "solid-js/web";
-import { createUniqueId as A, createEffect as _, onCleanup as E, createMemo as F, Show as B, untrack as K } from "solid-js";
+import { createComponent as h, use as j, setAttribute as a, insert as f, effect as S, memo as q, className as _, template as b, delegateEvents as A } from "solid-js/web";
+import { createUniqueId as D, createEffect as E, onCleanup as F, createMemo as M, Show as B, untrack as K } from "solid-js";
 import { useOverlayMask as O } from "../../hooks/useOverlayMask.js";
 import { createFloatingPresence as z } from "../ui/floatingPresence.js";
-import { cn as D } from "../../utils/cn.js";
+import { cn as I } from "../../utils/cn.js";
 import { deferAfterPaint as L } from "../../utils/defer.js";
 import { X as R } from "../icons/index.js";
-var U = /* @__PURE__ */ h('<header class="flex shrink-0 items-center gap-2 border-b px-4 py-2"><h2 class="min-w-0 flex-1 text-base font-semibold"></h2><button type=button data-floe-autofocus class="flex h-11 w-11 shrink-0 items-center justify-center rounded-md hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">'), W = /* @__PURE__ */ h('<div data-floe-mobile-navigation-overlay class="absolute inset-0 z-50 overflow-hidden p-2"><div class="absolute inset-0 floe-floating-presence floe-floating-backdrop floe-bottom-drawer-backdrop"data-floe-mobile-navigation-backdrop></div><div class="relative pointer-events-none flex h-full min-h-0 items-end justify-center"><div role=dialog tabindex=-1 data-floe-mobile-navigation-panel data-floe-surface=floating data-floe-surface-portal-layer=true style="max-height:min(680px, 86%);border-radius:24px"><div>'), X = /* @__PURE__ */ h("<h2 class=sr-only>");
+var U = /* @__PURE__ */ b('<header class="flex shrink-0 items-center gap-2 border-b px-4 py-2"><h2 class="min-w-0 flex-1 text-base font-semibold"></h2><button type=button data-floe-autofocus class="flex h-11 w-11 shrink-0 items-center justify-center rounded-control hover:bg-[var(--floe-state-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">'), W = /* @__PURE__ */ b('<div data-floe-mobile-navigation-overlay class="absolute inset-0 z-50 overflow-hidden p-2"><div class="absolute inset-0 floe-floating-presence floe-floating-backdrop floe-bottom-drawer-backdrop"data-floe-mobile-navigation-backdrop></div><div class="relative pointer-events-none flex h-full min-h-0 items-end justify-center"><div role=dialog tabindex=-1 data-floe-mobile-navigation-panel data-floe-surface=floating data-floe-surface-portal-layer=true style="max-height:min(680px, 86%);border-radius:24px"><div>'), X = /* @__PURE__ */ b("<h2 class=sr-only>");
 function p(t) {
-  const v = `mobile-navigation-${A()}`, r = z({
+  const v = `mobile-navigation-${D()}`, r = z({
     open: () => t.open,
-    exitDurationMs: 180
+    element: () => o
   });
-  let i, d = null;
+  let o, d = null;
   const m = () => {
     d = t.trigger ?? null, t.onOpenChange(!1);
   };
-  _(() => {
+  E(() => {
     const n = r.mounted();
     if (t.onPresenceChange?.(n), !n && d) {
-      const l = d;
-      d = null, l.isConnected && !l.closest("[hidden], [inert]") && l.focus({
+      const i = d;
+      d = null, i.isConnected && !i.closest("[hidden], [inert]") && i.focus({
         preventScroll: !0
       });
     }
-  }), E(() => t.onPresenceChange?.(!1));
-  const I = F(() => t.open ? t.id : null);
-  _(() => {
-    const n = I();
+  }), F(() => t.onPresenceChange?.(!1));
+  const N = M(() => t.open ? t.id : null);
+  E(() => {
+    const n = N();
     if (n === null) return;
     d = null;
-    let l = !0;
-    E(() => {
-      l = !1;
+    let i = !0;
+    F(() => {
+      i = !1;
     }), L(() => K(() => {
-      if (!l || !t.open || t.id !== n || !i?.isConnected) return;
-      const u = i.ownerDocument.activeElement;
-      u && i.contains(u) || (i.querySelector("[data-floe-autofocus]") ?? i).focus({
+      if (!i || !t.open || t.id !== n || !o?.isConnected) return;
+      const u = o.ownerDocument.activeElement;
+      u && o.contains(u) || (o.querySelector("[data-floe-autofocus]") ?? o).focus({
         preventScroll: !0
       });
     }));
   }), O({
     open: r.mounted,
-    root: () => i,
-    focusRoots: () => [i, t.navigation()].filter((n) => !!n),
-    containsTarget: (n) => n instanceof Node && !!(i?.contains(n) || t.navigation()?.contains(n)),
+    root: () => o,
+    focusRoots: () => [o, t.navigation()].filter((n) => !!n),
+    containsTarget: (n) => n instanceof Node && !!(o?.contains(n) || t.navigation()?.contains(n)),
     onClose: m,
     lockBodyScroll: !1,
     trapFocus: !0,
@@ -53,18 +53,18 @@ function p(t) {
     autoFocus: !1,
     restoreFocus: !1
   });
-  const N = F(() => t.children);
-  return g(B, {
+  const T = M(() => t.children);
+  return h(B, {
     get when() {
       return r.mounted();
     },
     get children() {
-      var n = W(), l = n.firstChild, u = l.nextSibling, o = u.firstChild, b = o.firstChild;
-      l.$$click = () => {
+      var n = W(), i = n.firstChild, u = i.nextSibling, l = u.firstChild, g = l.firstChild;
+      i.$$click = () => {
         t.open && m();
-      }, o.$$keydown = (e) => t.onKeyDown?.(e);
-      var x = i;
-      return typeof x == "function" ? T(x, o) : i = o, a(o, "aria-labelledby", v), f(o, g(B, {
+      }, l.$$keydown = (e) => t.onKeyDown?.(e);
+      var x = o;
+      return typeof x == "function" ? j(x, l) : o = l, a(l, "aria-labelledby", v), f(l, h(B, {
         get when() {
           return t.header === void 0;
         },
@@ -72,17 +72,17 @@ function p(t) {
           return [(() => {
             var e = X();
             return a(e, "id", v), f(e, () => t.title), e;
-          })(), j(() => t.header)];
+          })(), q(() => t.header)];
         },
         get children() {
           var e = U(), s = e.firstChild, c = s.nextSibling;
-          return a(s, "id", v), f(s, () => t.title), c.$$click = m, f(c, g(R, {
+          return a(s, "id", v), f(s, () => t.title), c.$$click = m, f(c, h(R, {
             class: "h-5 w-5"
           })), S(() => a(c, "aria-label", t.closeLabel ?? "Close")), e;
         }
-      }), b), f(b, N), S((e) => {
-        var s = r.state(), c = r.state(), y = t.id, w = r.state(), k = r.exiting(), C = r.exiting() ? "true" : void 0, $ = D("pointer-events-auto relative flex min-h-0 w-full max-w-[640px] flex-col border border-border bg-card text-card-foreground shadow-xl floe-floating-presence floe-bottom-drawer-panel", t.class), P = D("flex min-h-0 flex-col overflow-auto overscroll-contain", t.contentClass);
-        return s !== e.e && a(n, "data-floating-presence", e.e = s), c !== e.t && a(l, "data-floating-presence", e.t = c), y !== e.a && a(o, "id", e.a = y), w !== e.o && a(o, "data-floating-presence", e.o = w), k !== e.i && (o.inert = e.i = k), C !== e.n && a(o, "aria-hidden", e.n = C), $ !== e.s && M(o, e.s = $), P !== e.h && M(b, e.h = P), e;
+      }), g), f(g, T), S((e) => {
+        var s = r.state(), c = r.state(), y = t.id, w = r.state(), k = r.exiting(), C = r.exiting() ? "true" : void 0, $ = I("pointer-events-auto relative flex min-h-0 w-full max-w-[640px] flex-col border border-[var(--floe-line)] bg-card text-card-foreground shadow-[var(--floe-elevation-float-strong)] floe-floating-presence floe-bottom-drawer-panel", t.class), P = I("flex min-h-0 flex-col overflow-auto overscroll-contain", t.contentClass);
+        return s !== e.e && a(n, "data-floating-presence", e.e = s), c !== e.t && a(i, "data-floating-presence", e.t = c), y !== e.a && a(l, "id", e.a = y), w !== e.o && a(l, "data-floating-presence", e.o = w), k !== e.i && (l.inert = e.i = k), C !== e.n && a(l, "aria-hidden", e.n = C), $ !== e.s && _(l, e.s = $), P !== e.h && _(g, e.h = P), e;
       }, {
         e: void 0,
         t: void 0,
@@ -96,7 +96,7 @@ function p(t) {
     }
   });
 }
-q(["click", "keydown"]);
+A(["click", "keydown"]);
 export {
   p as MobileNavigationPanel
 };

package/dist/components/layout/MobileTabBar.js

@@ -1,62 +1,62 @@
-import { use as R, insert as u, createComponent as d, effect as _, className as C, setAttribute as s, template as v, Dynamic as j, memo as q, delegateEvents as B } from "solid-js/web";
+import { use as R, insert as f, createComponent as d, effect as _, className as y, setAttribute as v, template as m, Dynamic as j, memo as q, delegateEvents as B } from "solid-js/web";
 import { createSignal as E, onMount as z, onCleanup as D, Show as S, For as F } from "solid-js";
 import { cn as A } from "../../utils/cn.js";
 import { deferNonBlocking as W } from "../../utils/defer.js";
-var H = /* @__PURE__ */ v('<div class="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-background to-transparent z-10 pointer-events-none">'), N = /* @__PURE__ */ v('<div class="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent z-10 pointer-events-none">'), T = /* @__PURE__ */ v('<div data-floe-mobile-navigation-actions class="flex shrink-0 border-l border-border">'), P = /* @__PURE__ */ v('<nav data-floe-shell-slot=mobile-tab-bar style=border-top-color:var(--bottom-bar-border)><div class="relative flex h-14"><div class="relative min-w-0 flex-1"><div class="h-full flex items-center overflow-x-auto scrollbar-hide snap-x snap-mandatory"role=tablist aria-orientation=horizontal style=-webkit-overflow-scrolling:touch>'), U = /* @__PURE__ */ v("<span>"), V = /* @__PURE__ */ v('<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-primary rounded-t">'), G = /* @__PURE__ */ v("<button type=button><div></div><span>");
+var H = /* @__PURE__ */ m('<div class="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-background to-transparent z-10 pointer-events-none">'), N = /* @__PURE__ */ m('<div class="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent z-10 pointer-events-none">'), T = /* @__PURE__ */ m('<div data-floe-mobile-navigation-actions class="flex shrink-0 border-l border-[var(--floe-line)]">'), P = /* @__PURE__ */ m('<nav data-floe-shell-slot=mobile-tab-bar style=border-top-color:var(--bottom-bar-border)><div class="relative flex h-14"><div class="relative min-w-0 flex-1"><div class="h-full flex items-center overflow-x-auto scrollbar-hide snap-x snap-mandatory"role=tablist aria-orientation=horizontal style=-webkit-overflow-scrolling:touch>'), U = /* @__PURE__ */ m("<span>"), V = /* @__PURE__ */ m('<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-primary rounded-t">'), G = /* @__PURE__ */ m("<button type=button><div></div><span>");
 function Y(e) {
-  let r;
+  let a;
   const [$, b] = E(!1), [i, h] = E(!1);
-  let f = null;
+  let u = null;
   const g = () => {
-    r && (b(r.scrollLeft > 0), h(r.scrollLeft < r.scrollWidth - r.clientWidth - 1));
+    a && (b(a.scrollLeft > 0), h(a.scrollLeft < a.scrollWidth - a.clientWidth - 1));
   }, t = () => {
-    if (f === null) {
+    if (u === null) {
       if (typeof requestAnimationFrame > "u") {
         g();
         return;
       }
-      f = requestAnimationFrame(() => {
-        f = null, g();
+      u = requestAnimationFrame(() => {
+        u = null, g();
       });
     }
   }, o = () => e.items, I = (l) => {
-    const a = o()[l];
-    if (a) {
-      if (a.onClick) {
-        W(() => a.onClick());
+    const r = o()[l];
+    if (r) {
+      if (r.onClick) {
+        W(() => r.onClick());
         return;
       }
-      e.onSelect(a.id);
+      e.onSelect(r.id);
     }
   };
   return z(() => {
     g();
-    const l = e.items.findIndex((a) => a.id === e.activeId);
-    if (l > 0 && r) {
-      const a = r.scrollWidth / e.items.length;
-      r.scrollLeft = Math.max(0, a * l - r.clientWidth / 2 + a / 2);
+    const l = e.items.findIndex((r) => r.id === e.activeId);
+    if (l > 0 && a) {
+      const r = a.scrollWidth / e.items.length;
+      a.scrollLeft = Math.max(0, r * l - a.clientWidth / 2 + r / 2);
     }
   }), D(() => {
-    f !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(f), f = null);
+    u !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(u), u = null);
   }), (() => {
-    var l = P(), a = l.firstChild, x = a.firstChild, m = x.firstChild, w = e.ref;
-    typeof w == "function" ? R(w, l) : e.ref = l, u(x, d(S, {
+    var l = P(), r = l.firstChild, x = r.firstChild, s = x.firstChild, w = e.ref;
+    typeof w == "function" ? R(w, l) : e.ref = l, f(x, d(S, {
       get when() {
         return $();
       },
       get children() {
         return H();
       }
-    }), m), u(x, d(S, {
+    }), s), f(x, d(S, {
       get when() {
         return i();
       },
       get children() {
         return N();
       }
-    }), m), m.addEventListener("scroll", t);
-    var y = r;
-    return typeof y == "function" ? R(y, m) : r = m, u(m, d(F, {
+    }), s), s.addEventListener("scroll", t);
+    var C = a;
+    return typeof C == "function" ? R(C, s) : a = s, f(s, d(F, {
       get each() {
         return e.items;
       },
@@ -78,13 +78,13 @@ function Y(e) {
         },
         onKeyboardSelect: (k) => I(k)
       })
-    })), u(a, d(S, {
+    })), f(r, d(S, {
       get when() {
         return e.actions?.length;
       },
       get children() {
         var n = T();
-        return u(n, d(F, {
+        return f(n, d(F, {
           get each() {
             return e.actions;
           },
@@ -104,10 +104,10 @@ function Y(e) {
       var c = e.hidden, k = A(
         // Same safe-area rule as TopBar: keep the visual bar height stable, and
         // add safe-area padding on an outer wrapper (avoid squeezing content).
-        "relative shrink-0 bg-background border-t border-border safe-bottom safe-left safe-right",
+        "relative shrink-0 bg-background border-t border-[var(--floe-line)] safe-bottom safe-left safe-right",
         e.class
       ), L = e.ariaLabel;
-      return c !== n.e && (l.hidden = n.e = c), k !== n.t && C(l, n.t = k), L !== n.a && s(l, "aria-label", n.a = L), n;
+      return c !== n.e && (l.hidden = n.e = c), k !== n.t && y(l, n.t = k), L !== n.a && v(l, "aria-label", n.a = L), n;
     }, {
       e: void 0,
       t: void 0,
@@ -116,12 +116,12 @@ function Y(e) {
   })();
 }
 function M(e) {
-  let r;
+  let a;
   const $ = () => typeof e.item.ariaExpanded == "function" ? e.item.ariaExpanded() : e.item.ariaExpanded;
-  z(() => e.item.buttonRef?.(r ?? null)), D(() => e.item.buttonRef?.(null));
+  z(() => e.item.buttonRef?.(a ?? null)), D(() => e.item.buttonRef?.(null));
   const b = () => typeof e.item.badge == "function" ? e.item.badge() : e.item.badge;
   return (() => {
-    var i = G(), h = i.firstChild, f = h.nextSibling;
+    var i = G(), h = i.firstChild, u = h.nextSibling;
     i.$$keydown = (t) => {
       if (e.action) return;
       let o = null;
@@ -145,24 +145,24 @@ function M(e) {
       }
       t.preventDefault(), e.onKeyboardSelect(o);
     }, i.$$click = () => e.onClick();
-    var g = r;
-    return typeof g == "function" ? R(g, i) : r = i, u(h, d(j, {
+    var g = a;
+    return typeof g == "function" ? R(g, i) : a = i, f(h, d(j, {
       get component() {
         return e.item.icon;
       },
       class: "w-6 h-6"
-    }), null), u(h, d(S, {
+    }), null), f(h, d(S, {
       get when() {
         return b();
       },
       get children() {
         var t = U();
-        return u(t, (() => {
+        return f(t, (() => {
           var o = q(() => typeof b() == "number" && b() > 99);
           return () => o() ? "99+" : b();
-        })()), _(() => C(t, A("absolute -top-1 -right-2 min-w-4 h-4 px-1", "flex items-center justify-center", "text-[10px] font-medium rounded-full", "bg-primary text-primary-foreground"))), t;
+        })()), _(() => y(t, A("absolute -top-1 -right-2 min-w-4 h-4 px-1", "flex items-center justify-center", "text-caption font-medium rounded-full", "bg-primary text-primary-foreground"))), t;
       }
-    }), null), u(f, () => e.item.label), u(i, d(S, {
+    }), null), f(u, () => e.item.label), f(i, d(S, {
       get when() {
         return e.isActive;
       },
@@ -170,8 +170,8 @@ function M(e) {
         return V();
       }
     }), null), _((t) => {
-      var o = A("relative flex-shrink-0 flex flex-col items-center justify-center", "min-w-16 h-full px-4 snap-center", "transition-[color] duration-150", "focus:outline-none focus-visible:bg-muted", e.action && "w-16 px-1", $() && "bg-muted text-foreground", e.isActive ? "text-primary" : "text-muted-foreground active:text-foreground"), I = e.item.label, l = e.action ? void 0 : e.isActive, a = $(), x = e.item.ariaControls, m = e.item.ariaHasPopup, w = e.action ? void 0 : "tab", y = e.action || e.isActive ? 0 : -1, n = A("relative transition-transform duration-150", e.isActive && "scale-110"), c = A("mt-1 text-[10px] font-medium truncate max-w-full", e.isActive && "font-semibold");
-      return o !== t.e && C(i, t.e = o), I !== t.t && s(i, "aria-label", t.t = I), l !== t.a && s(i, "aria-selected", t.a = l), a !== t.o && s(i, "aria-expanded", t.o = a), x !== t.i && s(i, "aria-controls", t.i = x), m !== t.n && s(i, "aria-haspopup", t.n = m), w !== t.s && s(i, "role", t.s = w), y !== t.h && s(i, "tabindex", t.h = y), n !== t.r && C(h, t.r = n), c !== t.d && C(f, t.d = c), t;
+      var o = A("relative flex-shrink-0 flex flex-col items-center justify-center", "min-w-16 h-full px-4 snap-center", "transition-[color,background-color] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "hover:bg-[var(--floe-state-hover)] focus:outline-none focus-visible:bg-[var(--floe-state-press)]", e.action && "w-16 px-1", $() && "bg-[var(--floe-state-selected)] text-foreground", e.isActive ? "text-[var(--floe-accent-ink)]" : "text-[var(--floe-ink-soft)] active:text-foreground"), I = e.item.label, l = e.action ? void 0 : e.isActive, r = $(), x = e.item.ariaControls, s = e.item.ariaHasPopup, w = e.action ? void 0 : "tab", C = e.action || e.isActive ? 0 : -1, n = A("relative transition-transform duration-[var(--floe-duration-fast)]", e.isActive && "scale-110"), c = A("mt-1 text-caption font-medium truncate max-w-full", e.isActive && "font-semibold");
+      return o !== t.e && y(i, t.e = o), I !== t.t && v(i, "aria-label", t.t = I), l !== t.a && v(i, "aria-selected", t.a = l), r !== t.o && v(i, "aria-expanded", t.o = r), x !== t.i && v(i, "aria-controls", t.i = x), s !== t.n && v(i, "aria-haspopup", t.n = s), w !== t.s && v(i, "role", t.s = w), C !== t.h && v(i, "tabindex", t.h = C), n !== t.r && y(h, t.r = n), c !== t.d && y(u, t.d = c), t;
     }, {
       e: void 0,
       t: void 0,

package/dist/components/layout/Panel.js

@@ -1,33 +1,33 @@
-import { insert as t, effect as n, className as l, memo as u, template as a } from "solid-js/web";
+import { insert as r, effect as n, className as l, memo as u, template as a } from "solid-js/web";
 import "solid-js";
 import { cn as i } from "../../utils/cn.js";
-var o = /* @__PURE__ */ a("<div>"), m = /* @__PURE__ */ a("<div><span class=truncate>"), s = /* @__PURE__ */ a('<div class="flex items-center gap-1 ml-2">');
-function $(r) {
+var f = /* @__PURE__ */ a("<div>"), m = /* @__PURE__ */ a("<div><span class=truncate>"), s = /* @__PURE__ */ a('<div class="flex items-center gap-1 ml-2">');
+function $(t) {
   return (() => {
-    var e = o();
-    return t(e, () => r.children), n(() => l(e, i("flex flex-col h-full overflow-hidden", "bg-card text-card-foreground", r.class))), e;
+    var e = f();
+    return r(e, () => t.children), n(() => l(e, i("flex flex-col h-full overflow-hidden", "bg-card text-card-foreground", t.class))), e;
   })();
 }
-function h(r) {
+function h(t) {
   return (() => {
-    var e = m(), d = e.firstChild;
-    return t(d, () => r.children), t(e, (() => {
-      var f = u(() => !!r.actions);
-      return () => f() && (() => {
+    var e = m(), o = e.firstChild;
+    return r(o, () => t.children), r(e, (() => {
+      var d = u(() => !!t.actions);
+      return () => d() && (() => {
         var c = s();
-        return t(c, () => r.actions), c;
+        return r(c, () => t.actions), c;
       })();
-    })(), null), n(() => l(e, i("flex items-center justify-between px-3 py-1.5", "border-b border-border", "text-xs font-medium tracking-tight", r.class))), e;
+    })(), null), n(() => l(e, i("flex items-center justify-between px-3 py-1.5", "border-b border-[var(--floe-line)]", "text-xs font-medium tracking-tight", t.class))), e;
   })();
 }
-function b(r) {
+function g(t) {
   return (() => {
-    var e = o();
-    return t(e, () => r.children), n(() => l(e, i("flex-1 overflow-auto", !r.noPadding && "p-3", r.class))), e;
+    var e = f();
+    return r(e, () => t.children), n(() => l(e, i("flex-1 overflow-auto", !t.noPadding && "p-3", t.class))), e;
   })();
 }
 export {
   $ as Panel,
-  b as PanelContent,
+  g as PanelContent,
   h as PanelHeader
 };

package/dist/components/layout/ResizeHandle.js

@@ -1,12 +1,12 @@
 import { effect as D, className as f, setAttribute as A, template as C, use as S, delegateEvents as k } from "solid-js/web";
 import { createSignal as F, onCleanup as H } from "solid-js";
-import { cn as g } from "../../utils/cn.js";
+import { cn as v } from "../../utils/cn.js";
 import { startHotInteraction as E } from "../../utils/hotInteraction.js";
 var q = /* @__PURE__ */ C("<div role=separator style=touch-action:none><div></div><div>");
 function N(e) {
   const [a, p] = F(!1);
-  let n = 0, o = 0, s = null, u, l = null, c = null;
-  const v = (t) => {
+  let r = 0, n = 0, s = null, u, l = null, c = null;
+  const g = (t) => {
     if (!t) {
       c?.(), c = null;
       return;
@@ -16,24 +16,24 @@ function N(e) {
       cursor: e.direction === "horizontal" ? "col-resize" : "row-resize",
       lockUserSelect: !0
     });
-  }, m = () => {
+  }, h = () => {
     if (!a()) return;
     l !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(l), l = null);
-    const t = o - n;
-    t !== 0 && (e.onResize(t), n = o), p(!1), s = null, v(!1), e.onResizeEnd?.();
-  }, h = (t) => e.direction === "horizontal" ? t.clientX : t.clientY, x = (t) => {
-    t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), s = t.pointerId, p(!0), n = h(t), o = n, v(!0), e.onResizeStart?.(), u?.setPointerCapture(t.pointerId));
+    const t = n - r;
+    t !== 0 && (e.onResize(t), r = n), p(!1), s = null, g(!1), e.onResizeEnd?.();
+  }, m = (t) => e.direction === "horizontal" ? t.clientX : t.clientY, P = (t) => {
+    t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), s = t.pointerId, p(!0), r = m(t), n = r, g(!0), e.onResizeStart?.(), u?.setPointerCapture(t.pointerId));
   }, R = (t) => {
-    if (!(!a() || s !== t.pointerId) && (o = h(t), l === null)) {
+    if (!(!a() || s !== t.pointerId) && (n = m(t), l === null)) {
       if (typeof requestAnimationFrame > "u") {
-        const i = o - n;
-        i !== 0 && (e.onResize(i), n = o);
+        const i = n - r;
+        i !== 0 && (e.onResize(i), r = n);
         return;
       }
       l = requestAnimationFrame(() => {
         if (l = null, !a()) return;
-        const i = o - n;
-        i !== 0 && (e.onResize(i), n = o);
+        const i = n - r;
+        i !== 0 && (e.onResize(i), r = n);
       });
     }
   }, y = (t) => {
@@ -42,18 +42,18 @@ function N(e) {
         u?.releasePointerCapture(t.pointerId);
       } catch {
       }
-      m();
+      h();
     }
   };
-  H(() => m());
+  H(() => h());
   const d = () => e.direction === "horizontal";
   return (() => {
     var t = q(), i = t.firstChild, $ = i.nextSibling;
-    t.addEventListener("pointercancel", y), t.$$pointerup = y, t.$$pointermove = R, t.$$pointerdown = x;
+    t.addEventListener("pointercancel", y), t.$$pointerup = y, t.$$pointermove = R, t.$$pointerdown = P;
     var z = u;
-    return typeof z == "function" ? S(z, t) : u = t, D((r) => {
-      var b = g("absolute z-20 group", d() ? "top-0 right-0 w-1 h-full cursor-col-resize hover:w-1.5 transition-[background-color,width] duration-100" : "left-0 top-0 h-1 w-full cursor-row-resize hover:h-1.5 transition-[background-color,height] duration-100", a() && "bg-primary", !a() && "hover:bg-primary/50", e.class), w = d() ? "vertical" : "horizontal", I = g("absolute pointer-events-none", d() ? "top-0 bottom-0 left-1/2 w-px -translate-x-1/2" : "left-0 right-0 top-1/2 h-px -translate-y-1/2", a() && "bg-primary opacity-100", !a() && "bg-primary/50 opacity-0 group-hover:opacity-100"), P = g("absolute opacity-0 group-hover:opacity-100 transition-opacity duration-150", d() ? "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-0.5 h-8 rounded-full bg-muted-foreground/30" : "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-0.5 w-8 rounded-full bg-muted-foreground/30");
-      return b !== r.e && f(t, r.e = b), w !== r.t && A(t, "aria-orientation", r.t = w), I !== r.a && f(i, r.a = I), P !== r.o && f($, r.o = P), r;
+    return typeof z == "function" ? S(z, t) : u = t, D((o) => {
+      var b = v("absolute z-20 group", d() ? "top-0 right-0 w-1 h-full cursor-col-resize hover:w-1.5 transition-[background-color,width] duration-[var(--floe-duration-fast)]" : "left-0 top-0 h-1 w-full cursor-row-resize hover:h-1.5 transition-[background-color,height] duration-[var(--floe-duration-fast)]", a() && "bg-primary", !a() && "hover:bg-[var(--floe-accent-line)]", e.class), w = d() ? "vertical" : "horizontal", I = v("absolute pointer-events-none", d() ? "top-0 bottom-0 left-1/2 w-px -translate-x-1/2" : "left-0 right-0 top-1/2 h-px -translate-y-1/2", a() && "bg-primary opacity-100", !a() && "bg-primary/50 opacity-0 group-hover:opacity-100"), x = v("absolute opacity-0 group-hover:opacity-100 transition-opacity duration-[var(--floe-duration-fast)]", d() ? "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-px h-8 rounded-full bg-[var(--floe-control-edge)]" : "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-px w-8 rounded-full bg-[var(--floe-control-edge)]");
+      return b !== o.e && f(t, o.e = b), w !== o.t && A(t, "aria-orientation", o.t = w), I !== o.a && f(i, o.a = I), x !== o.o && f($, o.o = x), o;
     }, {
       e: void 0,
       t: void 0,