@floegence/floe-webapp-core 0.36.8 → 0.36.9

package/dist/components/deck/DeckCell.d.ts

@@ -5,11 +5,6 @@ export interface DeckCellProps {
     position: GridPosition;
     isDragging?: boolean;
     isResizing?: boolean;
-    /** Pixel offset for smooth drag following */
-    pixelOffset?: {
-        x: number;
-        y: number;
-    };
 }
 /**
  * Widget cell wrapper positioned via CSS grid-area

package/dist/components/deck/DeckCell.js

@@ -1,33 +1,24 @@
-import { insert as u, createComponent as n, Dynamic as D, effect as x, className as W, style as S, template as l } from "solid-js/web";
-import { createMemo as d, Show as b } from "solid-js";
-import { cn as C } from "../../utils/cn.js";
+import { insert as m, createComponent as n, Dynamic as D, effect as W, setAttribute as b, className as S, setStyleProperty as C, template as f } from "solid-js/web";
+import { createMemo as l, Show as k } from "solid-js";
+import { cn as x } from "../../utils/cn.js";
 import { useDeck as z } from "../../context/DeckContext.js";
 import { useWidgetRegistry as R } from "../../context/WidgetRegistry.js";
-import { WidgetStateProvider as k } from "../../context/WidgetStateContext.js";
-import { positionToGridArea as $ } from "../../utils/gridLayout.js";
-import { WidgetFrame as M } from "./WidgetFrame.js";
-var _ = /* @__PURE__ */ l("<div data-floe-dialog-surface-host=true>"), A = /* @__PURE__ */ l('<div class="h-full flex items-center justify-center text-muted-foreground text-xs"><span>Widget: ');
-function q(e) {
-  const i = z(), g = R(), f = () => i.editMode(), o = () => e.widget.type, a = d(() => g.getWidget(o())), m = d(() => $(e.position)), w = () => i.getWidgetState(e.widget.id), h = (t, r) => {
-    i.updateWidgetState(e.widget.id, t, r);
-  }, s = () => a()?.component, v = d(() => {
-    if (!e.isDragging || !e.pixelOffset) return {};
-    const {
-      x: t,
-      y: r
-    } = e.pixelOffset;
-    return t === 0 && r === 0 ? {} : {
-      transform: `translate(${t}px, ${r}px)`
-    };
-  });
+import { WidgetStateProvider as M } from "../../context/WidgetStateContext.js";
+import { positionToGridArea as A } from "../../utils/gridLayout.js";
+import { WidgetFrame as P } from "./WidgetFrame.js";
+var I = /* @__PURE__ */ f("<div data-floe-dialog-surface-host=true>"), T = /* @__PURE__ */ f('<div class="h-full flex items-center justify-center text-muted-foreground text-xs"><span>Widget: ');
+function H(e) {
+  const r = z(), g = R(), w = () => r.editMode(), d = () => e.widget.type, o = l(() => g.getWidget(d())), h = l(() => A(e.position)), v = () => r.getWidgetState(e.widget.id), y = (i, t) => {
+    r.updateWidgetState(e.widget.id, i, t);
+  }, a = () => o()?.component;
   return (() => {
-    var t = _();
-    return u(t, n(M, {
+    var i = I();
+    return m(i, n(P, {
       get widget() {
         return e.widget;
       },
       get widgetDef() {
-        return a();
+        return o();
       },
       get isDragging() {
         return e.isDragging;
@@ -36,28 +27,28 @@ function q(e) {
         return e.isResizing;
       },
       get children() {
-        return n(b, {
+        return n(k, {
           get when() {
-            return s();
+            return a();
           },
           get fallback() {
-            return n(I, {
+            return n(_, {
               get type() {
-                return o();
+                return d();
               }
             });
           },
           get children() {
-            return n(k, {
+            return n(M, {
               get widgetId() {
                 return e.widget.id;
               },
-              state: w,
-              onStateChange: h,
+              state: v,
+              onStateChange: y,
               get children() {
                 return n(D, {
                   get component() {
-                    return s();
+                    return a();
                   },
                   get widgetId() {
                     return e.widget.id;
@@ -66,7 +57,7 @@ function q(e) {
                     return e.widget.config;
                   },
                   get isEditMode() {
-                    return f();
+                    return w();
                   }
                 });
               }
@@ -74,8 +65,8 @@ function q(e) {
           }
         });
       }
-    })), x((r) => {
-      var c = C(
+    })), W((t) => {
+      var c = e.widget.id, s = x(
         "deck-cell relative rounded-md overflow-hidden group",
         "bg-card border border-border",
         // Smooth transition when not dragging (for snap-back animation)
@@ -85,23 +76,21 @@ function q(e) {
         !e.isDragging && !e.isResizing && "hover:ring-1 hover:ring-primary/50",
         "select-none",
         e.isDragging && "cursor-grabbing"
-      ), y = {
-        "grid-area": m(),
-        ...v()
-      };
-      return c !== r.e && W(t, r.e = c), r.t = S(t, y, r.t), r;
+      ), u = h();
+      return c !== t.e && b(i, "data-floe-deck-widget-id", t.e = c), s !== t.t && S(i, t.t = s), u !== t.a && C(i, "grid-area", t.a = u), t;
     }, {
       e: void 0,
-      t: void 0
-    }), t;
+      t: void 0,
+      a: void 0
+    }), i;
   })();
 }
-function I(e) {
+function _(e) {
   return (() => {
-    var i = A(), g = i.firstChild;
-    return g.firstChild, u(g, () => e.type, null), i;
+    var r = T(), g = r.firstChild;
+    return g.firstChild, m(g, () => e.type, null), r;
   })();
 }
 export {
-  q as DeckCell
+  H as DeckCell
 };

package/dist/components/deck/DeckGrid.d.ts

@@ -1,4 +1,5 @@
 import { type JSX } from 'solid-js';
+import { DECK_GRID_CONFIG, getGridConfigFromElement } from './deckGridMetrics';
 export interface DeckGridProps {
     class?: string;
     children?: JSX.Element;
@@ -12,19 +13,4 @@ export interface DeckGridProps {
  * 3. Row height is calculated dynamically based on container height
  */
 export declare function DeckGrid(props: DeckGridProps): JSX.Element;
-export declare const DECK_GRID_CONFIG: {
-    cols: number;
-    defaultRows: number;
-    gap: number;
-    rowHeight: number;
-};
-/**
- * Get grid configuration from the DOM element
- * Use this for accurate row height during drag/resize operations
- */
-export declare function getGridConfigFromElement(gridEl: HTMLElement): {
-    cols: number;
-    rowHeight: number;
-    gap: number;
-    defaultRows: number;
-};
+export { DECK_GRID_CONFIG, getGridConfigFromElement };

package/dist/components/deck/DeckGrid.js

@@ -1,55 +1,54 @@
-import { insert as h, createComponent as m, effect as F, setStyleProperty as v, className as J, setAttribute as Q, template as W, use as tt, delegateEvents as et } from "solid-js/web";
-import { createSignal as O, createMemo as d, onMount as rt, Show as G, For as nt, onCleanup as ot } from "solid-js";
-import { cn as it } from "../../utils/cn.js";
-import { useDeck as at } from "../../context/DeckContext.js";
-import { useLayout as st } from "../../context/LayoutContext.js";
-import { useResolvedFloeConfig as ct } from "../../context/FloeConfigContext.js";
-import { useWidgetRegistry as lt } from "../../context/WidgetRegistry.js";
-import { hasCollision as dt } from "../../utils/gridCollision.js";
-import { DeckCell as ut } from "./DeckCell.js";
-import { DeckContextMenu as gt } from "./DeckContextMenu.js";
-import { DropZonePreview as pt } from "./DropZonePreview.js";
-var ft = /* @__PURE__ */ W('<div class="pointer-events-none z-0"style="grid-column:1 / -1;--deck-grid-unit-x:calc((100% - 92px) / 24 + 4px);background-position:0 0, 0 0, 0 0, 0 0, 0 0, 0 0">'), mt = /* @__PURE__ */ W('<div data-grid-cols=24 data-gap=4 data-default-rows=24 style="scrollbar-gutter:stable;grid-template-columns:repeat(24, 1fr);gap:4px"><div class=pointer-events-none aria-hidden=true style="grid-column:1 / -1">');
-const T = 24, u = 24, x = 4, k = 20, L = 4, vt = {
-  x: 0,
-  y: 0
-};
-function Dt(g) {
-  const p = at(), I = st(), A = lt(), N = ct();
+import { setStyleProperty as l, setAttribute as b, insert as h, createComponent as f, effect as G, className as J, template as W, use as Q, delegateEvents as tt } from "solid-js/web";
+import { createSignal as _, createMemo as d, onMount as et, Show as E, For as rt, onCleanup as nt } from "solid-js";
+import { cn as ot } from "../../utils/cn.js";
+import { useDeck as it } from "../../context/DeckContext.js";
+import { useLayout as at } from "../../context/LayoutContext.js";
+import { useResolvedFloeConfig as st } from "../../context/FloeConfigContext.js";
+import { useWidgetRegistry as ct } from "../../context/WidgetRegistry.js";
+import { hasCollision as lt } from "../../utils/gridCollision.js";
+import { DeckCell as dt } from "./DeckCell.js";
+import { DeckContextMenu as ut } from "./DeckContextMenu.js";
+import { DropZonePreview as gt } from "./DropZonePreview.js";
+import { DECK_DEFAULT_ROWS as u, DECK_MIN_ROW_HEIGHT as L, DECK_GAP as m, DECK_PADDING as F, DECK_GRID_COLS as y, getGridConfigFromElement as mt } from "./deckGridMetrics.js";
+import { DECK_GRID_CONFIG as _t } from "./deckGridMetrics.js";
+var pt = /* @__PURE__ */ W('<div class="pointer-events-none z-0"style="grid-column:1 / -1;background-position:0 0, 0 0, 0 0, 0 0, 0 0, 0 0">'), ft = /* @__PURE__ */ W('<div style=scrollbar-gutter:stable><div class=pointer-events-none aria-hidden=true style="grid-column:1 / -1">');
+const vt = (y - 1) * m;
+function It(R) {
+  const p = it(), P = at(), $ = ct(), T = st();
   let a;
-  const [S, D] = O(0), [w, R] = O(null), P = () => p.activeLayout()?.widgets ?? [], f = () => p.dragState(), M = () => p.resizeState(), z = () => !I.isMobile(), _ = () => (N.config.deck.presetsMode ?? "mutable") === "immutable" && !!p.activeLayout()?.isPreset, E = d(() => Array.from(A.widgets().values()).map((t) => ({
+  const [k, H] = _(0), [x, D] = _(null), I = () => p.activeLayout()?.widgets ?? [], v = () => p.dragState(), C = () => p.resizeState(), z = () => !P.isMobile(), A = () => (T.config.deck.presetsMode ?? "mutable") === "immutable" && !!p.activeLayout()?.isPreset, O = d(() => Array.from($.widgets().values()).map((t) => ({
     type: t.type,
     name: t.name,
     icon: t.icon
-  }))), $ = (t) => {
-    if (I.isMobile() || _() || t.target?.closest(".deck-cell") || !a) return;
+  }))), K = (t) => {
+    if (P.isMobile() || A() || t.target?.closest(".deck-cell") || !a) return;
     t.preventDefault();
     const n = a.getBoundingClientRect(), {
       cols: e,
       rowHeight: o,
       gap: s
-    } = ht(a), c = window.getComputedStyle(a), l = parseFloat(c.paddingLeft) || 0, i = parseFloat(c.paddingTop) || 0, H = (a.clientWidth - l - (parseFloat(c.paddingRight) || 0) - s * (e - 1)) / e, V = o + s;
-    if (!Number.isFinite(H) || H <= 0) return;
-    const Z = t.clientX - n.left + a.scrollLeft - l, K = t.clientY - n.top + a.scrollTop - i, U = Math.max(0, Math.min(e - 1, Math.floor(Z / (H + s)))), q = Math.max(0, Math.floor(K / V));
-    R({
+    } = mt(a), c = window.getComputedStyle(a), i = parseFloat(c.paddingLeft) || 0, g = parseFloat(c.paddingTop) || 0, M = (a.clientWidth - i - (parseFloat(c.paddingRight) || 0) - s * (e - 1)) / e, j = o + s;
+    if (!Number.isFinite(M) || M <= 0) return;
+    const V = t.clientX - n.left + a.scrollLeft - i, U = t.clientY - n.top + a.scrollTop - g, Z = Math.max(0, Math.min(e - 1, Math.floor(V / (M + s)))), q = Math.max(0, Math.floor(U / j));
+    D({
       x: t.clientX,
       y: t.clientY,
-      col: U,
+      col: Z,
       row: q
     });
-  }, B = (t) => {
-    const r = w();
-    R(null), r && p.addWidget(t, {
+  }, N = (t) => {
+    const r = x();
+    D(null), r && p.addWidget(t, {
       col: r.col,
       row: r.row
     });
-  }, X = d(() => {
-    const t = f();
+  }, B = d(() => {
+    const t = v();
     if (!t) return !0;
     const r = p.activeLayout();
-    return r ? !dt(t.currentPosition, r.widgets, t.widgetId) : !0;
-  }), Y = d(() => {
-    const t = P();
+    return r ? !lt(t.currentPosition, r.widgets, t.widgetId) : !0;
+  }), X = d(() => {
+    const t = I();
     if (t.length === 0) return u;
     let r = u;
     for (const n of t) {
@@ -57,46 +56,46 @@ function Dt(g) {
       e > r && (r = e);
     }
     return r;
-  }), C = d(() => {
-    let t = Y();
-    const r = f();
+  }), S = d(() => {
+    let t = X();
+    const r = v();
     if (r) {
       const e = r.currentPosition.row + r.currentPosition.rowSpan;
       e > t && (t = e);
     }
-    const n = M();
+    const n = C();
     if (n) {
       const e = n.currentPosition.row + n.currentPosition.rowSpan;
       e > t && (t = e);
     }
     return Math.max(u, t);
-  }), b = d(() => {
-    const t = S();
-    if (t <= 0) return k;
-    const n = (t - L * 2 - (u - 1) * x) / u;
-    return Math.max(k, n);
+  }), w = d(() => {
+    const t = k();
+    if (t <= 0) return L;
+    const n = (t - F * 2 - (u - 1) * m) / u;
+    return Math.max(L, n);
   });
-  rt(() => {
+  et(() => {
     if (!a || typeof ResizeObserver > "u") return;
     const t = new ResizeObserver((r) => {
       for (const n of r)
-        D(n.contentRect.height);
+        H(n.contentRect.height);
     });
-    t.observe(a), D(a.clientHeight), ot(() => t.disconnect());
+    t.observe(a), H(a.clientHeight), nt(() => t.disconnect());
   });
-  const j = d(() => C() > u ? !0 : S() <= 0 ? !1 : u * b() + (u - 1) * x + L * 2 > S() + 1);
+  const Y = d(() => S() > u ? !0 : k() <= 0 ? !1 : u * w() + (u - 1) * m + F * 2 > k() + 1);
   return (() => {
-    var t = mt(), r = t.firstChild;
-    t.$$contextmenu = $;
+    var t = ft(), r = t.firstChild;
+    t.$$contextmenu = K;
     var n = a;
-    return typeof n == "function" ? tt(n, t) : a = t, h(t, m(G, {
+    return typeof n == "function" ? Q(n, t) : a = t, l(t, "grid-template-columns", `repeat(${y}, 1fr)`), l(t, "gap", `${m}px`), b(t, "data-grid-cols", y), b(t, "data-gap", m), b(t, "data-default-rows", u), h(t, f(E, {
       get when() {
         return z();
       },
       get children() {
-        var e = ft();
-        return F((o) => {
-          var s = `1 / ${C() + 1}`, c = `${b() + x}px`, l = [
+        var e = pt();
+        return l(e, "--deck-grid-unit-x", `calc((100% - ${vt}px) / ${y} + ${m}px)`), G((o) => {
+          var s = `1 / ${S() + 1}`, c = `${w() + m}px`, i = [
             // Fine
             "linear-gradient(to right, color-mix(in srgb, var(--border) 35%, transparent) 1px, transparent 1px)",
             "linear-gradient(to bottom, color-mix(in srgb, var(--border) 35%, transparent) 1px, transparent 1px)",
@@ -106,7 +105,7 @@ function Dt(g) {
             // Major (12)
             "linear-gradient(to right, color-mix(in srgb, var(--border) 75%, transparent) 2px, transparent 2px)",
             "linear-gradient(to bottom, color-mix(in srgb, var(--border) 75%, transparent) 2px, transparent 2px)"
-          ].join(", "), i = [
+          ].join(", "), g = [
             // Fine
             "var(--deck-grid-unit-x) var(--deck-grid-unit-y)",
             "var(--deck-grid-unit-x) var(--deck-grid-unit-y)",
@@ -117,7 +116,7 @@ function Dt(g) {
             "calc(var(--deck-grid-unit-x) * 12) calc(var(--deck-grid-unit-y) * 12)",
             "calc(var(--deck-grid-unit-x) * 12) calc(var(--deck-grid-unit-y) * 12)"
           ].join(", ");
-          return s !== o.e && v(e, "grid-row", o.e = s), c !== o.t && v(e, "--deck-grid-unit-y", o.t = c), l !== o.a && v(e, "background-image", o.a = l), i !== o.o && v(e, "background-size", o.o = i), o;
+          return s !== o.e && l(e, "grid-row", o.e = s), c !== o.t && l(e, "--deck-grid-unit-y", o.t = c), i !== o.a && l(e, "background-image", o.a = i), g !== o.o && l(e, "background-size", o.o = g), o;
         }, {
           e: void 0,
           t: void 0,
@@ -125,34 +124,31 @@ function Dt(g) {
           o: void 0
         }), e;
       }
-    }), null), h(t, m(G, {
+    }), null), h(t, f(E, {
       get when() {
-        return f();
+        return v();
       },
-      children: (e) => m(pt, {
+      children: (e) => f(gt, {
         get position() {
           return e().currentPosition;
         },
         get isValid() {
-          return X();
+          return B();
         }
       })
-    }), null), h(t, m(nt, {
+    }), null), h(t, f(rt, {
       get each() {
-        return P();
+        return I();
       },
       children: (e) => {
         const o = d(() => {
-          const i = f();
+          const i = v();
           if (i && i.widgetId === e.id)
-            return e.position;
-          const y = M();
-          return y && y.widgetId === e.id ? y.currentPosition : e.position;
-        }), s = d(() => f()?.widgetId === e.id), c = d(() => M()?.widgetId === e.id), l = d(() => {
-          const i = f();
-          return i && i.widgetId === e.id ? i.pixelOffset : vt;
-        });
-        return m(ut, {
+            return i.currentPosition;
+          const g = C();
+          return g && g.widgetId === e.id ? g.currentPosition : e.position;
+        }), s = d(() => v()?.widgetId === e.id), c = d(() => C()?.widgetId === e.id);
+        return f(dt, {
           widget: e,
           get position() {
             return o();
@@ -162,37 +158,34 @@ function Dt(g) {
           },
           get isResizing() {
             return c();
-          },
-          get pixelOffset() {
-            return l();
           }
         });
       }
-    }), null), h(t, () => g.children, null), h(t, m(gt, {
+    }), null), h(t, () => R.children, null), h(t, f(ut, {
       get open() {
-        return w() !== null;
+        return x() !== null;
       },
       get x() {
-        return w()?.x ?? 0;
+        return x()?.x ?? 0;
       },
       get y() {
-        return w()?.y ?? 0;
+        return x()?.y ?? 0;
       },
       get items() {
-        return E();
+        return O();
       },
-      onSelect: B,
-      onDismiss: () => R(null)
-    }), null), F((e) => {
-      var o = it(
+      onSelect: N,
+      onDismiss: () => D(null)
+    }), null), G((e) => {
+      var o = ot(
         "deck-grid relative w-full h-full overflow-x-hidden",
         // Only enable vertical scroll when content exceeds 24 rows
-        j() ? "overflow-y-scroll" : "overflow-y-hidden",
+        Y() ? "overflow-y-scroll" : "overflow-y-hidden",
         "grid p-1",
         z() && "bg-muted/20",
-        g.class
-      ), s = `${b()}px`, c = b(), l = `1 / ${C() + 1}`;
-      return o !== e.e && J(t, e.e = o), s !== e.t && v(t, "grid-auto-rows", e.t = s), c !== e.a && Q(t, "data-row-height", e.a = c), l !== e.o && v(r, "grid-row", e.o = l), e;
+        R.class
+      ), s = `${w()}px`, c = w(), i = `1 / ${S() + 1}`;
+      return o !== e.e && J(t, e.e = o), s !== e.t && l(t, "grid-auto-rows", e.t = s), c !== e.a && b(t, "data-row-height", e.a = c), i !== e.o && l(r, "grid-row", e.o = i), e;
     }, {
       e: void 0,
       t: void 0,
@@ -201,24 +194,9 @@ function Dt(g) {
     }), t;
   })();
 }
-const Pt = {
-  cols: T,
-  defaultRows: u,
-  gap: x,
-  // Deprecated: use getGridConfig() or read from data-row-height attribute instead
-  rowHeight: k
-};
-function ht(g) {
-  return {
-    cols: parseInt(g.dataset.gridCols || String(T), 10),
-    rowHeight: parseFloat(g.dataset.rowHeight || String(k)),
-    gap: parseInt(g.dataset.gap || String(x), 10),
-    defaultRows: parseInt(g.dataset.defaultRows || String(u), 10)
-  };
-}
-et(["contextmenu"]);
+tt(["contextmenu"]);
 export {
-  Pt as DECK_GRID_CONFIG,
-  Dt as DeckGrid,
-  ht as getGridConfigFromElement
+  _t as DECK_GRID_CONFIG,
+  It as DeckGrid,
+  mt as getGridConfigFromElement
 };

package/dist/components/deck/WidgetResizeHandle.d.ts

@@ -4,6 +4,8 @@ export interface WidgetResizeHandleProps {
     edge: ResizeState['edge'];
 }
 /**
- * Resize handle for a specific edge of a widget
+ * Resize handle for a specific edge of a widget.
+ * The active pointer session is owned by the shared Deck pointer-session helper,
+ * so pointer release remains reliable even when the cursor crosses other widgets.
  */
 export declare function WidgetResizeHandle(props: WidgetResizeHandleProps): import("solid-js").JSX.Element;

package/dist/components/deck/WidgetResizeHandle.js

@@ -1,12 +1,11 @@
-import { effect as L, className as B, setAttribute as U, template as _, use as N, delegateEvents as O } from "solid-js/web";
-import { createSignal as j, onCleanup as J } from "solid-js";
-import { cn as K } from "../../utils/cn.js";
-import { useDeck as Q } from "../../context/DeckContext.js";
-import { applyResizeDelta as V } from "../../utils/gridLayout.js";
-import { getGridConfigFromElement as Z } from "./DeckGrid.js";
-import { startHotInteraction as ee } from "../../utils/hotInteraction.js";
-var te = /* @__PURE__ */ _("<div style=touch-action:none>");
-const ne = {
+import { effect as m, className as h, setAttribute as p, template as b, use as v, delegateEvents as E } from "solid-js/web";
+import { createSignal as R, onCleanup as S } from "solid-js";
+import { cn as D } from "../../utils/cn.js";
+import { useDeck as y } from "../../context/DeckContext.js";
+import { applyResizeDelta as k } from "../../utils/gridLayout.js";
+import { startDeckPointerSession as C } from "./deckPointerSession.js";
+var M = /* @__PURE__ */ b("<div style=touch-action:none>");
+const P = {
   n: "top-0 left-2 right-2 h-2 cursor-ns-resize",
   s: "bottom-0 left-2 right-2 h-2 cursor-ns-resize",
   e: "right-0 top-2 bottom-2 w-2 cursor-ew-resize",
@@ -15,7 +14,7 @@ const ne = {
   nw: "top-0 left-0 w-4 h-4 cursor-nwse-resize",
   se: "bottom-0 right-0 w-4 h-4 cursor-nwse-resize",
   sw: "bottom-0 left-0 w-4 h-4 cursor-nesw-resize"
-}, re = {
+}, A = {
   n: "ns-resize",
   s: "ns-resize",
   e: "ew-resize",
@@ -25,85 +24,52 @@ const ne = {
   se: "nwse-resize",
   sw: "nesw-resize"
 };
-function ue(i) {
-  const f = Q(), [m, C] = j(!1);
-  let g, h = null, d = 0, u = 0, y = 0, p = 0, s = 0, R = 0, b = 0, S = 0, l = null, w = null, r = null, A = null, P = 0, F = 0;
-  const I = (e) => {
-    if (!e) {
-      w?.(), w = null;
-      return;
-    }
-    w?.(), w = ee({
-      kind: "resize",
-      cursor: re[i.edge],
-      lockUserSelect: !0
-    });
-  }, E = () => {
-    m() && (l !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(l), l = null), C(!1), h = null, r = null, A = null, I(!1), f.endResize(!0));
-  }, H = () => {
-    if (!r) return;
-    const e = A ?? r.getBoundingClientRect(), t = 48, n = 24, o = s - e.top, a = e.bottom - s;
-    let c = 0;
-    if (o < t ? c = -Math.ceil((t - o) / t * n) : a < t && (c = Math.ceil((t - a) / t * n)), c === 0) return;
-    const z = r.scrollTop, v = Math.max(0, Math.min(z + c, r.scrollHeight - r.clientHeight));
-    v !== z && (r.scrollTop = v);
-  }, Y = () => {
-    if (l !== null || typeof requestAnimationFrame > "u") return;
-    const e = () => {
-      if (!m()) {
-        l = null;
-        return;
-      }
-      D(), l = requestAnimationFrame(e);
-    };
-    l = requestAnimationFrame(e);
-  }, $ = (e) => {
+function G(t) {
+  const s = y(), [u, d] = R(!1);
+  let c, o = null;
+  const a = (e) => {
+    o?.stop({
+      commit: e
+    }), o = null;
+  }, g = (e) => {
     if (e.pointerType === "mouse" && e.button !== 0) return;
     e.preventDefault(), e.stopPropagation();
-    const t = e.currentTarget?.closest(".deck-grid");
-    if (!t) return;
-    h = e.pointerId, d = e.clientX, u = e.clientY, p = d, s = u, R = d, b = u, C(!0), I(!0), r = t, A = t.getBoundingClientRect(), y = t.scrollTop, S = y;
-    const n = window.getComputedStyle(t);
-    P = parseFloat(n.paddingLeft) || 0, F = parseFloat(n.paddingRight) || 0, f.startResize(i.widget.id, i.edge, d, u), g?.setPointerCapture(e.pointerId), Y();
-  }, G = (e) => {
-    !m() || h !== e.pointerId || (p = e.clientX, s = e.clientY, typeof requestAnimationFrame > "u" && D());
-  }, D = () => {
-    if (!r) return;
-    H();
-    const e = r.scrollTop;
-    if (p === R && s === b && e === S) return;
-    R = p, b = s, S = e;
-    const t = p - d, n = s - u + (e - y), {
-      cols: o,
-      rowHeight: a,
-      gap: c
-    } = Z(r), z = r.clientWidth - P - F, v = c * (o - 1), T = (z - v) / o;
-    if (!Number.isFinite(T) || T <= 0) return;
-    const W = a + c, X = Math.round(t / T), q = Math.round(n / W), k = f.getWidgetMinConstraints(i.widget.type), x = V(i.widget.position, i.edge, X, q, k.minColSpan, k.minRowSpan, o);
-    f.updateResize(x);
-  }, M = (e) => {
-    if (h === e.pointerId) {
-      try {
-        g?.releasePointerCapture(e.pointerId);
-      } catch {
+    const n = e.currentTarget?.closest(".deck-grid");
+    if (!n) return;
+    a(!1), s.startResize(t.widget.id, t.edge, e.clientX, e.clientY);
+    const r = s.resizeState();
+    !r || r.widgetId !== t.widget.id || r.edge !== t.edge || (d(!0), o = C({
+      kind: "resize",
+      widgetId: t.widget.id,
+      gridEl: n,
+      captureEl: c,
+      pointerEvent: e,
+      cursor: A[t.edge],
+      onMove: (i) => {
+        const l = Math.round(i.deltaX / i.cellWidth), z = Math.round(i.deltaY / i.cellHeight), w = s.getWidgetMinConstraints(t.widget.type), f = k(t.widget.position, t.edge, l, z, w.minColSpan, w.minRowSpan, i.cols);
+        s.updateResize(f);
+      },
+      onEnd: ({
+        commit: i
+      }) => {
+        o = null, d(!1), s.endResize(i);
       }
-      E();
-    }
+    }));
   };
-  return J(() => E()), (() => {
-    var e = te();
-    e.addEventListener("pointercancel", M), e.$$pointerup = M, e.$$pointermove = G, e.$$pointerdown = $;
-    var t = g;
-    return typeof t == "function" ? N(t, e) : g = e, L((n) => {
-      var o = K("absolute z-30", ne[i.edge], "hover:bg-primary/30 transition-colors", m() && "bg-primary/50"), a = i.edge;
-      return o !== n.e && B(e, n.e = o), a !== n.t && U(e, "data-widget-resize-handle", n.t = a), n;
+  return S(() => a(!1)), (() => {
+    var e = M();
+    e.$$pointerdown = g;
+    var n = c;
+    return typeof n == "function" ? v(n, e) : c = e, m((r) => {
+      var i = D("absolute z-30", P[t.edge], "hover:bg-primary/30 transition-colors", u() && "bg-primary/50"), l = t.edge;
+      return i !== r.e && h(e, r.e = i), l !== r.t && p(e, "data-widget-resize-handle", r.t = l), r;
     }, {
       e: void 0,
       t: void 0
     }), e;
   })();
 }
-O(["pointerdown", "pointermove", "pointerup"]);
+E(["pointerdown"]);
 export {
-  ue as WidgetResizeHandle
+  G as WidgetResizeHandle
 };