@floegence/floe-webapp-core 0.26.2 → 0.26.5

package/dist/components/ui/Tabs.js

@@ -1,219 +1,259 @@
-import { createComponent as c, spread as W, mergeProps as D, insert as a, effect as b, className as g, setAttribute as k, memo as re, template as f, use as oe, delegateEvents as ne } from "solid-js/web";
-import { splitProps as F, Show as m, createSignal as y, untrack as le, createEffect as _, For as se, onCleanup as ie } from "solid-js";
+import { createComponent as u, spread as Z, mergeProps as ee, insert as c, effect as g, className as p, setStyleProperty as G, memo as J, use as K, setAttribute as C, template as h, delegateEvents as we } from "solid-js/web";
+import { splitProps as te, Show as m, createSignal as b, untrack as Q, createEffect as z, For as xe, onCleanup as Y } from "solid-js";
 import { cn as v } from "../../utils/cn.js";
-import { deferAfterPaint as C } from "../../utils/defer.js";
-import { useViewActivation as de } from "../../context/ViewActivationContext.js";
-import { X as ae, Plus as ce, ChevronRight as ue } from "../icons/index.js";
-var ve = /* @__PURE__ */ f('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m15 18-6-6 6-6">'), fe = /* @__PURE__ */ f('<button type=button aria-label="Scroll left">'), he = /* @__PURE__ */ f('<button type=button aria-label="Add new tab">'), be = /* @__PURE__ */ f('<button type=button aria-label="Scroll right">'), ge = /* @__PURE__ */ f("<div><div>"), me = /* @__PURE__ */ f("<span class=flex-shrink-0>"), pe = /* @__PURE__ */ f("<button type=button>"), we = /* @__PURE__ */ f('<div role=tab><span class="truncate max-w-32">'), xe = /* @__PURE__ */ f("<div role=tabpanel>");
-const ye = (p) => (() => {
-  var t = ve();
-  return b(() => k(t, "class", p.class)), t;
+import { deferAfterPaint as $ } from "../../utils/defer.js";
+import { useViewActivation as ye } from "../../context/ViewActivationContext.js";
+import { X as ke, Plus as $e, ChevronRight as Ce } from "../icons/index.js";
+var Se = /* @__PURE__ */ h('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m15 18-6-6 6-6">'), Ae = /* @__PURE__ */ h('<button type=button aria-label="Scroll left">'), Ie = /* @__PURE__ */ h('<div class="pointer-events-none absolute bottom-0 left-0 z-10 h-0.5 bg-primary transition-[transform,width] duration-200 ease-out will-change-transform motion-reduce:transition-none">'), ze = /* @__PURE__ */ h('<button type=button aria-label="Add new tab">'), Re = /* @__PURE__ */ h('<button type=button aria-label="Scroll right">'), Le = /* @__PURE__ */ h("<div><div>"), _e = /* @__PURE__ */ h("<span class=flex-shrink-0>"), Ue = /* @__PURE__ */ h("<button type=button>"), Ee = /* @__PURE__ */ h('<div role=tab><span class="truncate max-w-32">'), Pe = /* @__PURE__ */ h("<div role=tabpanel>");
+const Oe = (w) => (() => {
+  var t = Se();
+  return g(() => C(t, "class", w.class)), t;
 })();
-function ze(p) {
-  const [t, A] = F(p, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "showAdd", "closable", "size", "variant", "class"]);
-  let i;
-  const L = (() => {
+function Xe(w) {
+  const [t, R] = te(w, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "showAdd", "closable", "size", "variant", "class"]);
+  let d;
+  const j = (() => {
     try {
-      return de();
+      return ye();
     } catch {
       return null;
     }
-  })(), S = () => L ? L.active() : !0;
-  let I = !1;
-  const R = () => t.activeId !== void 0, N = () => t.onChange ?? t.onActiveIdChange, [U, V] = y(le(() => t.defaultActiveId ?? t.items[0]?.id ?? "")), E = () => R() ? t.activeId : U(), [X, O] = y(E());
-  _(() => {
-    O(E());
+  })(), x = () => j ? j.active() : !0;
+  let L = !1;
+  const [re, ne] = b(0), [oe, le] = b(0), [B, _] = b(!1), U = /* @__PURE__ */ new Map();
+  let E = !1;
+  const S = () => (t.variant ?? "default") === "underline", M = (r) => {
+    if (!d || !S()) return !1;
+    const o = U.get(r);
+    if (!o) return !1;
+    const s = d.getBoundingClientRect(), e = o.getBoundingClientRect(), n = e.left - s.left + d.scrollLeft, a = e.width;
+    return ne(n), le(a), _(a > 0), a > 0;
+  }, se = () => {
+    if (!S()) {
+      _(!1);
+      return;
+    }
+    M(P()) || _(!1);
+  }, A = () => {
+    E || (E = !0, $(() => {
+      E = !1, Q(() => {
+        x() && se();
+      });
+    }));
+  }, T = () => t.activeId !== void 0, ie = () => t.onChange ?? t.onActiveIdChange, [de, ae] = b(Q(() => t.defaultActiveId ?? t.items[0]?.id ?? "")), V = () => T() ? t.activeId : de(), [P, W] = b(V());
+  z(() => {
+    W(V());
+  }), z(() => {
+    x() && (t.variant, P(), A());
   });
-  const [P, q] = y(!1), [j, G] = y(!1), [T, J] = y(!1), K = () => {
-    if (!i) return;
+  const [X, ce] = b(!1), [F, ue] = b(!1), [H, fe] = b(!1), ve = () => {
+    if (!d) return;
     const {
       scrollLeft: r,
-      scrollWidth: n,
-      clientWidth: l
-    } = i, e = n > l;
-    J(e), q(r > 0), G(r + l < n - 1);
-  }, $ = () => {
-    I || (I = !0, C(() => {
-      I = !1, S() && K();
+      scrollWidth: o,
+      clientWidth: s
+    } = d, e = o > s;
+    fe(e), ce(r > 0), ue(r + s < o - 1);
+  }, I = () => {
+    L || (L = !0, $(() => {
+      L = !1, x() && ve();
     }));
-  }, Q = () => {
-    i && i.scrollBy({
+  }, he = () => {
+    d && d.scrollBy({
       left: -150,
       behavior: "smooth"
     });
-  }, Y = () => {
-    i && i.scrollBy({
+  }, be = () => {
+    d && d.scrollBy({
       left: 150,
       behavior: "smooth"
     });
   };
-  _(() => {
-    if (!i || !S()) return;
-    $();
-    const r = () => $();
-    i.addEventListener("scroll", r);
-    const n = () => $();
-    let l;
-    typeof ResizeObserver < "u" ? (l = new ResizeObserver(n), l.observe(i)) : typeof window < "u" && window.addEventListener("resize", n), ie(() => {
-      i?.removeEventListener("scroll", r), l?.disconnect(), typeof window < "u" && window.removeEventListener("resize", n);
+  z(() => {
+    if (!d || !x()) return;
+    I(), A();
+    const r = () => I();
+    d.addEventListener("scroll", r);
+    const o = () => {
+      I(), A();
+    };
+    let s;
+    typeof ResizeObserver < "u" ? (s = new ResizeObserver(o), s.observe(d)) : typeof window < "u" && window.addEventListener("resize", o), Y(() => {
+      d?.removeEventListener("scroll", r), s?.disconnect(), typeof window < "u" && window.removeEventListener("resize", o);
     });
-  }), _(() => {
-    S() && (t.items.length, $());
+  }), z(() => {
+    x() && (t.items.length, I(), A());
   });
-  const B = (r, n) => {
-    if (n) return;
-    const l = N();
-    if (O(r), R() || V(r), l) {
+  const D = (r, o) => {
+    if (o) return;
+    const s = ie();
+    if (W(r), S() && M(r), T() || ae(r), s) {
       const e = r;
-      C(() => l(e));
+      $(() => s(e));
     }
-  }, Z = (r, n) => {
+  }, ge = (r, o) => {
     r.stopPropagation();
-    const l = t.onClose;
-    if (!l) return;
-    const e = n;
-    C(() => l(e));
-  }, z = {
+    const s = t.onClose;
+    if (!s) return;
+    const e = o;
+    $(() => s(e));
+  }, O = {
     sm: "h-7 px-2 text-[11px]",
     md: "h-8 px-3 text-xs"
-  }, ee = (r, n) => {
-    const l = "inline-flex items-center gap-1.5 font-medium transition-colors duration-150 whitespace-nowrap", e = n ? "cursor-not-allowed opacity-50" : "cursor-pointer";
+  }, me = (r, o) => {
+    const s = "inline-flex items-center gap-1.5 font-medium transition-colors duration-150 whitespace-nowrap", e = o ? "cursor-not-allowed opacity-50" : "cursor-pointer";
     return {
-      default: v(l, e, z[t.size ?? "md"], "rounded-t border-b-2", r ? "border-primary text-foreground bg-background" : "border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50", n && "hover:bg-transparent hover:text-muted-foreground"),
-      card: v(l, e, z[t.size ?? "md"], "rounded-t border border-b-0", r ? "border-border bg-background text-foreground -mb-px z-10" : "border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50", n && "hover:bg-transparent hover:text-muted-foreground"),
-      underline: v(l, e, z[t.size ?? "md"], "border-b-2 -mb-px", r ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground/50", n && "hover:border-transparent hover:text-muted-foreground")
+      default: v(s, e, O[t.size ?? "md"], "rounded-t border-b-2", r ? "border-primary text-foreground bg-background" : "border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50", o && "hover:bg-transparent hover:text-muted-foreground"),
+      card: v(s, e, O[t.size ?? "md"], "rounded-t border border-b-0", r ? "border-border bg-background text-foreground -mb-px z-10" : "border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50", o && "hover:bg-transparent hover:text-muted-foreground"),
+      underline: v(s, e, O[t.size ?? "md"], "border-b-2 -mb-px", r ? B() ? "border-transparent text-foreground" : "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground/50", o && "hover:border-transparent hover:text-muted-foreground")
     }[t.variant ?? "default"];
-  }, te = {
+  }, pe = {
     default: "border-b border-border",
     card: "border-b border-border",
     underline: "border-b border-border"
   };
   return (() => {
-    var r = ge(), n = r.firstChild;
-    W(r, D({
+    var r = Le(), o = r.firstChild;
+    Z(r, ee({
       get class() {
-        return v("relative flex items-center gap-0.5", te[t.variant ?? "default"], t.class);
+        return v("relative flex items-center gap-0.5", pe[t.variant ?? "default"], t.class);
       }
-    }, A), !1, !0), a(r, c(m, {
+    }, R), !1, !0), c(r, u(m, {
       get when() {
-        return T();
+        return H();
       },
       get children() {
-        var e = fe();
-        return e.$$click = Q, a(e, c(ye, {
+        var e = Ae();
+        return e.$$click = he, c(e, u(Oe, {
           class: "w-4 h-4"
-        })), b((s) => {
-          var h = !P(), d = v("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", P() ? "text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-100" : "opacity-0 pointer-events-none");
-          return h !== s.e && (e.disabled = s.e = h), d !== s.t && g(e, s.t = d), s;
+        })), g((n) => {
+          var a = !X(), i = v("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", X() ? "text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-100" : "opacity-0 pointer-events-none");
+          return a !== n.e && (e.disabled = n.e = a), i !== n.t && p(e, n.t = i), n;
+        }, {
+          e: void 0,
+          t: void 0
+        }), e;
+      }
+    }), o);
+    var s = d;
+    return typeof s == "function" ? K(s, o) : d = o, c(o, u(m, {
+      get when() {
+        return J(() => !!S())() && B();
+      },
+      get children() {
+        var e = Ie();
+        return g((n) => {
+          var a = `translate3d(${re()}px, 0, 0)`, i = `${oe()}px`;
+          return a !== n.e && G(e, "transform", n.e = a), i !== n.t && G(e, "width", n.t = i), n;
         }, {
           e: void 0,
           t: void 0
         }), e;
       }
-    }), n);
-    var l = i;
-    return typeof l == "function" ? oe(l, n) : i = n, a(n, c(se, {
+    }), null), c(o, u(xe, {
       get each() {
         return t.items;
       },
       children: (e) => {
-        const s = () => e.id === X(), h = () => e.closable ?? t.closable ?? !1;
+        const n = () => e.id === P(), a = () => e.closable ?? t.closable ?? !1;
         return (() => {
-          var d = we(), M = d.firstChild;
-          return d.$$keydown = (o) => {
-            (o.key === "Enter" || o.key === " ") && (o.preventDefault(), B(e.id, e.disabled));
-          }, d.$$click = () => B(e.id, e.disabled), a(d, c(m, {
+          var i = Ee(), N = i.firstChild;
+          return i.$$keydown = (l) => {
+            (l.key === "Enter" || l.key === " ") && (l.preventDefault(), D(e.id, e.disabled));
+          }, i.$$click = () => D(e.id, e.disabled), K((l) => {
+            U.set(e.id, l), Y(() => U.delete(e.id));
+          }, i), c(i, u(m, {
             get when() {
               return e.icon;
             },
             get children() {
-              var o = me();
-              return a(o, () => e.icon), o;
+              var l = _e();
+              return c(l, () => e.icon), l;
             }
-          }), M), a(M, () => e.label), a(d, c(m, {
+          }), N), c(N, () => e.label), c(i, u(m, {
             get when() {
-              return re(() => !!h())() && !e.disabled;
+              return J(() => !!a())() && !e.disabled;
             },
             get children() {
-              var o = pe();
-              return o.$$click = (u) => Z(u, e.id), a(o, c(ae, {
+              var l = Ue();
+              return l.$$click = (f) => ge(f, e.id), c(l, u(ke, {
                 class: "w-3 h-3"
-              })), b((u) => {
-                var w = v("flex-shrink-0 flex items-center justify-center", "w-5 h-5 rounded cursor-pointer", "bg-transparent text-muted-foreground", "hover:bg-red-500 hover:text-white", "transition-colors duration-150", "ml-1.5"), x = `Close ${e.label}`;
-                return w !== u.e && g(o, u.e = w), x !== u.t && k(o, "aria-label", u.t = x), u;
+              })), g((f) => {
+                var y = v("flex-shrink-0 flex items-center justify-center", "w-5 h-5 rounded cursor-pointer", "bg-transparent text-muted-foreground", "hover:bg-red-500 hover:text-white", "transition-colors duration-150", "ml-1.5"), k = `Close ${e.label}`;
+                return y !== f.e && p(l, f.e = y), k !== f.t && C(l, "aria-label", f.t = k), f;
               }, {
                 e: void 0,
                 t: void 0
-              }), o;
+              }), l;
             }
-          }), null), b((o) => {
-            var u = ee(s(), e.disabled), w = s(), x = e.disabled, H = e.disabled ? -1 : 0;
-            return u !== o.e && g(d, o.e = u), w !== o.t && k(d, "aria-selected", o.t = w), x !== o.a && k(d, "aria-disabled", o.a = x), H !== o.o && k(d, "tabindex", o.o = H), o;
+          }), null), g((l) => {
+            var f = me(n(), e.disabled), y = n(), k = e.disabled, q = e.disabled ? -1 : 0;
+            return f !== l.e && p(i, l.e = f), y !== l.t && C(i, "aria-selected", l.t = y), k !== l.a && C(i, "aria-disabled", l.a = k), q !== l.o && C(i, "tabindex", l.o = q), l;
           }, {
             e: void 0,
             t: void 0,
             a: void 0,
             o: void 0
-          }), d;
+          }), i;
         })();
       }
-    })), a(r, c(m, {
+    }), null), c(r, u(m, {
       get when() {
         return t.showAdd;
       },
       get children() {
-        var e = he();
+        var e = ze();
         return e.$$click = () => {
-          const s = t.onAdd;
-          s && C(() => s());
-        }, a(e, c(ce, {
+          const n = t.onAdd;
+          n && $(() => n());
+        }, c(e, u($e, {
           get class() {
             return t.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4";
           }
-        })), b(() => g(e, v("flex-shrink-0 flex items-center justify-center", "rounded hover:bg-muted/80 cursor-pointer", "text-muted-foreground hover:text-foreground", "transition-colors duration-150", t.size === "sm" ? "w-6 h-6" : "w-7 h-7"))), e;
+        })), g(() => p(e, v("flex-shrink-0 flex items-center justify-center", "rounded hover:bg-muted/80 cursor-pointer", "text-muted-foreground hover:text-foreground", "transition-colors duration-150", t.size === "sm" ? "w-6 h-6" : "w-7 h-7"))), e;
       }
-    }), null), a(r, c(m, {
+    }), null), c(r, u(m, {
       get when() {
-        return T();
+        return H();
       },
       get children() {
-        var e = be();
-        return e.$$click = Y, a(e, c(ue, {
+        var e = Re();
+        return e.$$click = be, c(e, u(Ce, {
           class: "w-4 h-4"
-        })), b((s) => {
-          var h = !j(), d = v("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", j() ? "text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-100" : "opacity-0 pointer-events-none");
-          return h !== s.e && (e.disabled = s.e = h), d !== s.t && g(e, s.t = d), s;
+        })), g((n) => {
+          var a = !F(), i = v("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", F() ? "text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-100" : "opacity-0 pointer-events-none");
+          return a !== n.e && (e.disabled = n.e = a), i !== n.t && p(e, n.t = i), n;
         }, {
           e: void 0,
           t: void 0
         }), e;
       }
-    }), null), b(() => g(n, v(
-      "flex-1 flex items-end gap-0.5 overflow-x-auto",
+    }), null), g(() => p(o, v(
+      "relative flex-1 flex items-end gap-0.5 overflow-x-auto",
       "scrollbar-none",
       // Hide scrollbar for all browsers
       "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
     ))), r;
   })();
 }
-function _e(p) {
-  const [t, A] = F(p, ["active", "keepMounted", "class", "children"]);
-  return c(m, {
+function Fe(w) {
+  const [t, R] = te(w, ["active", "keepMounted", "class", "children"]);
+  return u(m, {
     get when() {
       return t.keepMounted || t.active;
     },
     get children() {
-      var i = xe();
-      return W(i, D({
+      var d = Pe();
+      return Z(d, ee({
         get class() {
           return v(!t.active && t.keepMounted && "hidden", t.class);
         }
-      }, A), !1, !0), a(i, () => t.children), i;
+      }, R), !1, !0), c(d, () => t.children), d;
     }
   });
 }
-ne(["click", "keydown"]);
+we(["click", "keydown"]);
 export {
-  _e as TabPanel,
-  ze as Tabs
+  Fe as TabPanel,
+  Xe as Tabs
 };

package/dist/hooks/useDeckDrag.js

@@ -1,77 +1,77 @@
-import { createEffect as B, onCleanup as G } from "solid-js";
+import { createEffect as q, onCleanup as G } from "solid-js";
 import { useDeck as z } from "../context/DeckContext.js";
-import { applyDragDelta as R } from "../utils/gridLayout.js";
-import { getGridConfigFromElement as N } from "../components/deck/DeckGrid.js";
-import { lockBodyStyle as O } from "../utils/bodyStyleLock.js";
-function V() {
+import { applyDragDelta as N } from "../utils/gridLayout.js";
+import { getGridConfigFromElement as O } from "../components/deck/DeckGrid.js";
+import { lockBodyStyle as U } from "../utils/bodyStyleLock.js";
+function Z() {
   const p = z();
-  let c = null, m = 0, f = 0, L = 0, g = 0, l = 0, P = 0, A = 0, F = 0, a = null, v = null, T = null, y = null, n = null, I = 0, k = 0, w = null;
+  let c = null, m = 0, f = 0, L = 0, g = 0, i = 0, P = 0, A = 0, F = 0, a = null, v = null, T = null, y = null, n = null, b = null, k = 0, C = 0, w = null;
   const M = (t) => {
     if (!t) {
       y?.(), y = null;
       return;
     }
-    y?.(), y = O({ cursor: "grabbing", "user-select": "none" });
-  }, C = () => {
-    c !== null && (a !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(a), a = null), c = null, v = null, T = null, n = null, w = null, M(!1), p.endDrag(!0));
-  }, X = () => {
+    y?.(), y = U({ cursor: "grabbing", "user-select": "none" });
+  }, H = () => {
+    c !== null && (a !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(a), a = null), c = null, v = null, T = null, n = null, b = null, w = null, M(!1), p.endDrag(!0));
+  }, Y = () => {
     if (!n) return;
-    const t = n.getBoundingClientRect(), e = 48, d = 24, s = l - t.top, o = t.bottom - l;
+    const t = b ?? n.getBoundingClientRect(), e = 48, d = 24, s = i - t.top, o = t.bottom - i;
     let r = 0;
     if (s < e ? r = -Math.ceil((e - s) / e * d) : o < e && (r = Math.ceil((e - o) / e * d)), r === 0) return;
-    const i = n.scrollTop, h = Math.max(0, Math.min(i + r, n.scrollHeight - n.clientHeight));
-    h !== i && (n.scrollTop = h);
-  }, Y = () => {
+    const l = n.scrollTop, h = Math.max(0, Math.min(l + r, n.scrollHeight - n.clientHeight));
+    h !== l && (n.scrollTop = h);
+  }, B = () => {
     if (a !== null || typeof requestAnimationFrame > "u") return;
     const t = () => {
       if (c === null) {
         a = null;
         return;
       }
-      x(), a = requestAnimationFrame(t);
+      X(), a = requestAnimationFrame(t);
     };
     a = requestAnimationFrame(t);
-  }, H = (t) => {
+  }, S = (t) => {
     const e = t.target;
     if (e.closest('button, input, select, textarea, [role="button"], a') || e.closest("[data-widget-resize-handle]")) return;
     const o = e.closest("[data-widget-drag-handle]");
     if (!o || t.pointerType === "mouse" && t.button !== 0) return;
     const r = o.dataset.widgetDragHandle;
     if (!r) return;
-    const i = o.closest(".deck-grid");
-    if (!i) return;
-    t.preventDefault(), t.stopPropagation(), c = t.pointerId, m = t.clientX, f = t.clientY, g = m, l = f, P = m, A = f, v = r, T = o, n = i, L = i.scrollTop, F = L, M(!0);
-    const u = p.activeLayout()?.widgets.find((b) => b.id === r);
+    const l = o.closest(".deck-grid");
+    if (!l) return;
+    t.preventDefault(), t.stopPropagation(), c = t.pointerId, m = t.clientX, f = t.clientY, g = m, i = f, P = m, A = f, v = r, T = o, n = l, b = l.getBoundingClientRect(), L = l.scrollTop, F = L, M(!0);
+    const u = p.activeLayout()?.widgets.find((I) => I.id === r);
     w = u ? { ...u.position } : null;
-    const E = window.getComputedStyle(i);
-    I = parseFloat(E.paddingLeft) || 0, k = parseFloat(E.paddingRight) || 0, p.startDrag(r, m, f), o.setPointerCapture(t.pointerId), Y();
-  }, S = (t) => {
-    c !== t.pointerId || !v || (g = t.clientX, l = t.clientY, typeof requestAnimationFrame > "u" && x());
-  }, x = () => {
+    const E = window.getComputedStyle(l);
+    k = parseFloat(E.paddingLeft) || 0, C = parseFloat(E.paddingRight) || 0, p.startDrag(r, m, f), o.setPointerCapture(t.pointerId), B();
+  }, x = (t) => {
+    c !== t.pointerId || !v || (g = t.clientX, i = t.clientY, typeof requestAnimationFrame > "u" && X());
+  }, X = () => {
     if (!v || !n || !w) return;
-    X();
+    Y();
     const t = n.scrollTop;
-    if (g === P && l === A && t === F) return;
-    P = g, A = l, F = t;
-    const e = g - m, d = l - f + (t - L), { cols: s, rowHeight: o, gap: r } = N(n), i = n.clientWidth - I - k, h = r * (s - 1), u = (i - h) / s;
+    if (g === P && i === A && t === F) return;
+    P = g, A = i, F = t;
+    const e = g - m, d = i - f + (t - L), { cols: s, rowHeight: o, gap: r } = O(n), l = n.clientWidth - k - C, h = r * (s - 1), u = (l - h) / s;
     if (!Number.isFinite(u) || u <= 0) return;
-    const E = o + r, b = Math.round(e / u), W = Math.round(d / E), q = R(w, b, W, s);
-    p.updateDrag(q, { x: e, y: d });
+    const E = o + r, I = Math.round(e / u), R = Math.round(d / E), W = N(w, I, R, s);
+    p.updateDrag(W, { x: e, y: d });
   }, D = (t) => {
     if (c === t.pointerId) {
       try {
         T?.releasePointerCapture(t.pointerId);
       } catch {
       }
-      C();
+      H();
     }
   };
-  B(() => {
-    p.editMode() && (typeof document > "u" || (document.addEventListener("pointerdown", H, !0), document.addEventListener("pointermove", S, !0), document.addEventListener("pointerup", D, !0), document.addEventListener("pointercancel", D, !0), G(() => {
-      C(), document.removeEventListener("pointerdown", H, !0), document.removeEventListener("pointermove", S, !0), document.removeEventListener("pointerup", D, !0), document.removeEventListener("pointercancel", D, !0);
+  q(() => {
+    p.editMode() && (typeof document > "u" || (document.addEventListener("pointerdown", S, !0), document.addEventListener("pointermove", x, !0), document.addEventListener("pointerup", D, !0), document.addEventListener("pointercancel", D, !0), G(() => {
+      H(), document.removeEventListener("pointerdown", S, !0), document.removeEventListener("pointermove", x, !0), document.removeEventListener("pointerup", D, !0), document.removeEventListener("pointercancel", D, !0);
     })));
   });
 }
 export {
-  V as useDeckDrag
+  Z as useDeckDrag
 };