@floegence/floe-webapp-core 0.36.10 → 0.36.11

package/dist/components/deck/DeckCell.js

@@ -1,14 +1,14 @@
 import { insert as s, createComponent as g, Dynamic as D, effect as W, setAttribute as b, className as S, style as k, template as m } from "solid-js/web";
-import { createMemo as l, Show as C } 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 { createMemo as l, Show as z } from "solid-js";
+import { cn as C } from "../../utils/cn.js";
+import { useDeck as R } from "../../context/DeckContext.js";
+import { useWidgetRegistry as x } from "../../context/WidgetRegistry.js";
 import { WidgetStateProvider as M } from "../../context/WidgetStateContext.js";
 import { positionToGridArea as A } from "../../utils/gridLayout.js";
 import { WidgetFrame as I } from "./WidgetFrame.js";
 var P = /* @__PURE__ */ m("<div data-floe-dialog-surface-host=true data-floe-geometry-surface=deck-widget>"), T = /* @__PURE__ */ m('<div class="h-full flex items-center justify-center text-muted-foreground text-xs"><span>Widget: ');
 function B(e) {
-  const r = z(), n = R(), f = () => r.editMode(), d = () => e.widget.type, a = l(() => n.getWidget(d())), w = l(() => A(e.position)), h = () => r.getWidgetState(e.widget.id), v = (i, t) => {
+  const r = R(), n = x(), f = () => r.editMode(), d = () => e.widget.type, a = l(() => n.getWidget(d())), w = l(() => A(e.position)), h = () => r.getWidgetState(e.widget.id), v = (i, t) => {
     r.updateWidgetState(e.widget.id, i, t);
   }, o = () => a()?.component;
   return (() => {
@@ -27,7 +27,7 @@ function B(e) {
         return e.isResizing;
       },
       get children() {
-        return g(C, {
+        return g(z, {
           get when() {
             return o();
           },
@@ -66,17 +66,7 @@ function B(e) {
         });
       }
     })), W((t) => {
-      var c = e.widget.id, u = x(
-        "deck-cell relative rounded-md overflow-hidden group",
-        "bg-card border border-border",
-        // Smooth transition when not dragging (for snap-back animation)
-        !e.isDragging && "transition-transform duration-200 ease-out",
-        e.isDragging && "shadow-2xl z-50 ring-2 ring-primary/70",
-        e.isResizing && "shadow-lg z-50 ring-2 ring-primary",
-        !e.isDragging && !e.isResizing && "hover:ring-1 hover:ring-primary/50",
-        "select-none",
-        e.isDragging && "cursor-grabbing"
-      ), y = e.dragOverlayStyle ?? {
+      var c = e.widget.id, u = C("deck-cell relative rounded-md overflow-hidden group", "bg-card border border-border", !e.isDragging && !e.isResizing && "transition-shadow duration-150 ease-out", e.isDragging && "shadow-2xl z-50 ring-2 ring-primary/70", e.isResizing && "shadow-lg z-50 ring-2 ring-primary", !e.isDragging && !e.isResizing && "hover:ring-1 hover:ring-primary/50", "select-none", e.isDragging && "cursor-grabbing"), y = e.dragOverlayStyle ?? {
         "grid-area": w()
       };
       return c !== t.e && b(i, "data-floe-deck-widget-id", t.e = c), u !== t.t && S(i, t.t = u), t.a = k(i, y, t.a), t;

package/dist/components/deck/DeckGrid.js

@@ -1,54 +1,54 @@
-import { setStyleProperty as u, setAttribute as D, insert as b, createComponent as h, effect as E, className as ot, template as W, use as it, delegateEvents as at } from "solid-js/web";
-import { createSignal as G, createMemo as d, onMount as st, Show as L, For as ct, onCleanup as lt } from "solid-js";
+import { setStyleProperty as u, setAttribute as M, insert as y, createComponent as h, effect as T, className as ot, template as N, use as it, delegateEvents as at } from "solid-js/web";
+import { createSignal as I, createMemo as d, onMount as st, Show as F, For as ct, onCleanup as lt } from "solid-js";
 import { cn as dt } from "../../utils/cn.js";
 import { useDeck as ut } from "../../context/DeckContext.js";
 import { useLayout as gt } from "../../context/LayoutContext.js";
-import { useResolvedFloeConfig as mt } from "../../context/FloeConfigContext.js";
-import { useWidgetRegistry as pt } from "../../context/WidgetRegistry.js";
+import { useResolvedFloeConfig as pt } from "../../context/FloeConfigContext.js";
+import { useWidgetRegistry as mt } from "../../context/WidgetRegistry.js";
 import { hasCollision as ft } from "../../utils/gridCollision.js";
 import { DeckCell as vt } from "./DeckCell.js";
 import { DeckContextMenu as ht } from "./DeckContextMenu.js";
 import { DropZonePreview as xt } from "./DropZonePreview.js";
-import { DECK_DEFAULT_ROWS as g, DECK_MIN_ROW_HEIGHT as F, DECK_GAP as p, DECK_PADDING as O, DECK_GRID_COLS as M, positionToDeckPixelRect as wt, getGridConfigFromElement as bt, measureDeckGridSurface as T } from "./deckGridMetrics.js";
-import { DECK_GRID_CONFIG as Tt } from "./deckGridMetrics.js";
-var yt = /* @__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">'), kt = /* @__PURE__ */ W('<div style=scrollbar-gutter:stable><div class=pointer-events-none aria-hidden=true style="grid-column:1 / -1">');
-const Dt = (M - 1) * p;
-function Lt($) {
-  const m = ut(), H = gt(), A = pt(), K = mt();
+import { DECK_DEFAULT_ROWS as g, DECK_MIN_ROW_HEIGHT as W, DECK_GAP as f, DECK_PADDING as A, DECK_GRID_COLS as S, positionToDeckPixelRect as wt, positionDeltaToDeckPixelOffset as yt, getGridConfigFromElement as bt, measureDeckGridSurface as K } from "./deckGridMetrics.js";
+import { DECK_GRID_CONFIG as Wt } from "./deckGridMetrics.js";
+var kt = /* @__PURE__ */ N('<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">'), Dt = /* @__PURE__ */ N('<div style=scrollbar-gutter:stable><div class=pointer-events-none aria-hidden=true style="grid-column:1 / -1">');
+const Mt = (S - 1) * f;
+function Lt(z) {
+  const p = ut(), O = gt(), X = mt(), Y = pt();
   let n;
-  const [S, I] = G(0), [N, X] = G(null), [y, C] = G(null), z = () => m.activeLayout()?.widgets ?? [], x = () => m.dragState(), Y = () => m.dragMotion(), R = () => m.resizeState(), B = () => N() ?? (n ? T(n) : null), _ = () => !H.isMobile(), j = () => (K.config.deck.presetsMode ?? "mutable") === "immutable" && !!m.activeLayout()?.isPreset, V = d(() => Array.from(A.widgets().values()).map((t) => ({
+  const [C, _] = I(0), [B, j] = I(null), [b, P] = I(null), E = () => p.activeLayout()?.widgets ?? [], x = () => p.dragState(), V = () => p.dragMotion(), R = () => p.resizeState(), U = () => B() ?? (n ? K(n) : null), L = () => !O.isMobile(), Z = () => (Y.config.deck.presetsMode ?? "mutable") === "immutable" && !!p.activeLayout()?.isPreset, q = d(() => Array.from(X.widgets().values()).map((t) => ({
     type: t.type,
     name: t.name,
     icon: t.icon
-  }))), U = (t) => {
-    if (H.isMobile() || j() || t.target?.closest(".deck-cell") || !n) return;
+  }))), J = (t) => {
+    if (O.isMobile() || Z() || t.target?.closest(".deck-cell") || !n) return;
     t.preventDefault();
     const o = n.getBoundingClientRect(), {
       cols: e,
       rowHeight: i,
       gap: s
-    } = bt(n), c = window.getComputedStyle(n), l = parseFloat(c.paddingLeft) || 0, a = parseFloat(c.paddingTop) || 0, f = (n.clientWidth - l - (parseFloat(c.paddingRight) || 0) - s * (e - 1)) / e, v = i + s;
-    if (!Number.isFinite(f) || f <= 0) return;
-    const tt = t.clientX - o.left + n.scrollLeft - l, et = t.clientY - o.top + n.scrollTop - a, rt = Math.max(0, Math.min(e - 1, Math.floor(tt / (f + s)))), nt = Math.max(0, Math.floor(et / v));
-    C({
+    } = bt(n), c = window.getComputedStyle(n), l = parseFloat(c.paddingLeft) || 0, a = parseFloat(c.paddingTop) || 0, m = (n.clientWidth - l - (parseFloat(c.paddingRight) || 0) - s * (e - 1)) / e, v = i + s;
+    if (!Number.isFinite(m) || m <= 0) return;
+    const D = t.clientX - o.left + n.scrollLeft - l, $ = t.clientY - o.top + n.scrollTop - a, H = Math.max(0, Math.min(e - 1, Math.floor(D / (m + s)))), nt = Math.max(0, Math.floor($ / v));
+    P({
       x: t.clientX,
       y: t.clientY,
-      col: rt,
+      col: H,
       row: nt
     });
-  }, Z = (t) => {
-    const r = y();
-    C(null), r && m.addWidget(t, {
+  }, Q = (t) => {
+    const r = b();
+    P(null), r && p.addWidget(t, {
       col: r.col,
       row: r.row
     });
-  }, q = d(() => {
+  }, tt = d(() => {
     const t = x();
     if (!t) return !0;
-    const r = m.activeLayout();
+    const r = p.activeLayout();
     return r ? !ft(t.currentPosition, r.widgets, t.widgetId) : !0;
-  }), J = d(() => {
-    const t = z();
+  }), et = d(() => {
+    const t = E();
     if (t.length === 0) return g;
     let r = g;
     for (const o of t) {
@@ -56,8 +56,8 @@ function Lt($) {
       e > r && (r = e);
     }
     return r;
-  }), P = d(() => {
-    let t = J();
+  }), G = d(() => {
+    let t = et();
     const r = x();
     if (r) {
       const e = r.currentPosition.row + r.currentPosition.rowSpan;
@@ -70,36 +70,36 @@ function Lt($) {
     }
     return Math.max(g, t);
   }), k = d(() => {
-    const t = S();
-    if (t <= 0) return F;
-    const o = (t - O * 2 - (g - 1) * p) / g;
-    return Math.max(F, o);
+    const t = C();
+    if (t <= 0) return W;
+    const o = (t - A * 2 - (g - 1) * f) / g;
+    return Math.max(W, o);
   });
   st(() => {
     const t = () => {
-      n && (I(n.clientHeight), X(T(n)));
+      n && (_(n.clientHeight), j(K(n)));
     };
     if (t(), !n || typeof ResizeObserver > "u") return;
     const r = new ResizeObserver((o) => {
       for (const e of o)
-        I(e.contentRect.height);
+        _(e.contentRect.height);
       t();
     });
     r.observe(n), lt(() => r.disconnect());
   });
-  const Q = d(() => P() > g ? !0 : S() <= 0 ? !1 : g * k() + (g - 1) * p + O * 2 > S() + 1);
+  const rt = d(() => G() > g ? !0 : C() <= 0 ? !1 : g * k() + (g - 1) * f + A * 2 > C() + 1);
   return (() => {
-    var t = kt(), r = t.firstChild;
-    t.$$contextmenu = U;
+    var t = Dt(), r = t.firstChild;
+    t.$$contextmenu = J;
     var o = n;
-    return typeof o == "function" ? it(o, t) : n = t, u(t, "grid-template-columns", `repeat(${M}, 1fr)`), u(t, "gap", `${p}px`), D(t, "data-grid-cols", M), D(t, "data-gap", p), D(t, "data-default-rows", g), b(t, h(L, {
+    return typeof o == "function" ? it(o, t) : n = t, u(t, "grid-template-columns", `repeat(${S}, 1fr)`), u(t, "gap", `${f}px`), M(t, "data-grid-cols", S), M(t, "data-gap", f), M(t, "data-default-rows", g), y(t, h(F, {
       get when() {
-        return _();
+        return L();
       },
       get children() {
-        var e = yt();
-        return u(e, "--deck-grid-unit-x", `calc((100% - ${Dt}px) / ${M} + ${p}px)`), E((i) => {
-          var s = `1 / ${P() + 1}`, c = `${k() + p}px`, l = [
+        var e = kt();
+        return u(e, "--deck-grid-unit-x", `calc((100% - ${Mt}px) / ${S} + ${f}px)`), T((i) => {
+          var s = `1 / ${G() + 1}`, c = `${k() + f}px`, l = [
             // 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)",
@@ -128,7 +128,7 @@ function Lt($) {
           o: void 0
         }), e;
       }
-    }), null), b(t, h(L, {
+    }), null), y(t, h(F, {
       get when() {
         return x();
       },
@@ -137,12 +137,12 @@ function Lt($) {
           return e().currentPosition;
         },
         get isValid() {
-          return q();
+          return tt();
         }
       })
-    }), null), b(t, h(ct, {
+    }), null), y(t, h(ct, {
       get each() {
-        return z();
+        return E();
       },
       children: (e) => {
         const i = d(() => {
@@ -151,18 +151,18 @@ function Lt($) {
         }), s = d(() => x()?.widgetId === e.id), c = d(() => R()?.widgetId === e.id), l = d(() => {
           const a = x();
           if (!a || a.widgetId !== e.id) return;
-          const w = Y();
+          const w = V();
           if (!w || w.widgetId !== e.id) return;
-          const f = B();
-          if (!f) return;
-          const v = wt(a.originalPosition, f);
+          const m = U();
+          if (!m) return;
+          const v = wt(a.currentPosition, m), D = yt(a.originalPosition, a.currentPosition, m), $ = w.deltaX - D.x, H = w.deltaY - D.y;
           return {
             position: "absolute",
             left: `${v.left}px`,
             top: `${v.top}px`,
             width: `${v.width}px`,
             height: `${v.height}px`,
-            transform: `translate3d(${w.deltaX}px, ${w.deltaY}px, 0) scale(0.992)`,
+            transform: `translate3d(${$}px, ${H}px, 0) scale(0.992)`,
             "transform-origin": "center center",
             "will-change": "transform"
           };
@@ -183,31 +183,31 @@ function Lt($) {
           }
         });
       }
-    }), null), b(t, () => $.children, null), b(t, h(ht, {
+    }), null), y(t, () => z.children, null), y(t, h(ht, {
       get open() {
-        return y() !== null;
+        return b() !== null;
       },
       get x() {
-        return y()?.x ?? 0;
+        return b()?.x ?? 0;
       },
       get y() {
-        return y()?.y ?? 0;
+        return b()?.y ?? 0;
       },
       get items() {
-        return V();
+        return q();
       },
-      onSelect: Z,
-      onDismiss: () => C(null)
-    }), null), E((e) => {
+      onSelect: Q,
+      onDismiss: () => P(null)
+    }), null), T((e) => {
       var i = dt(
         "deck-grid relative w-full h-full overflow-x-hidden",
         // Only enable vertical scroll when content exceeds 24 rows
-        Q() ? "overflow-y-scroll" : "overflow-y-hidden",
+        rt() ? "overflow-y-scroll" : "overflow-y-hidden",
         "grid p-1",
-        _() && "bg-muted/20",
-        $.class
-      ), s = `${k()}px`, c = k(), l = `1 / ${P() + 1}`;
-      return i !== e.e && ot(t, e.e = i), s !== e.t && u(t, "grid-auto-rows", e.t = s), c !== e.a && D(t, "data-row-height", e.a = c), l !== e.o && u(r, "grid-row", e.o = l), e;
+        L() && "bg-muted/20",
+        z.class
+      ), s = `${k()}px`, c = k(), l = `1 / ${G() + 1}`;
+      return i !== e.e && ot(t, e.e = i), s !== e.t && u(t, "grid-auto-rows", e.t = s), c !== e.a && M(t, "data-row-height", e.a = c), l !== e.o && u(r, "grid-row", e.o = l), e;
     }, {
       e: void 0,
       t: void 0,
@@ -218,7 +218,7 @@ function Lt($) {
 }
 at(["contextmenu"]);
 export {
-  Tt as DECK_GRID_CONFIG,
+  Wt as DECK_GRID_CONFIG,
   Lt as DeckGrid,
   bt as getGridConfigFromElement
 };

package/dist/components/deck/WidgetResizeHandle.js

@@ -2,10 +2,10 @@ import { effect as m, className as h, setAttribute as p, template as b, use as v
 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 = {
+import { applyResizeDelta as P } from "../../utils/gridLayout.js";
+import { startDeckPointerSession as k } from "./deckPointerSession.js";
+var C = /* @__PURE__ */ b("<div style=touch-action:none>");
+const M = {
   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",
@@ -24,45 +24,45 @@ const P = {
   se: "nwse-resize",
   sw: "nesw-resize"
 };
-function G(t) {
+function W(t) {
   const s = y(), [u, d] = R(!1);
-  let c, o = null;
+  let l, n = null;
   const a = (e) => {
-    o?.stop({
+    n?.stop({
       commit: e
-    }), o = null;
+    }), n = null;
   }, g = (e) => {
     if (e.pointerType === "mouse" && e.button !== 0) return;
     e.preventDefault(), e.stopPropagation();
-    const n = e.currentTarget?.closest(".deck-grid");
-    if (!n) return;
+    const o = e.currentTarget?.closest(".deck-grid");
+    if (!o) 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({
+    !r || r.widgetId !== t.widget.id || r.edge !== t.edge || (d(!0), n = k({
       kind: "resize",
       widgetId: t.widget.id,
-      gridEl: n,
-      captureEl: c,
+      gridEl: o,
+      captureEl: l,
       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);
+        const c = Math.round(i.deltaX / i.colPitch), z = Math.round(i.deltaY / i.rowPitch), w = s.getWidgetMinConstraints(t.widget.type), f = P(t.widget.position, t.edge, c, z, w.minColSpan, w.minRowSpan, i.cols);
         s.updateResize(f);
       },
       onEnd: ({
         commit: i
       }) => {
-        o = null, d(!1), s.endResize(i);
+        n = null, d(!1), s.endResize(i);
       }
     }));
   };
   return S(() => a(!1)), (() => {
-    var e = M();
+    var e = C();
     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;
+    var o = l;
+    return typeof o == "function" ? v(o, e) : l = e, m((r) => {
+      var i = D("absolute z-30", M[t.edge], "hover:bg-primary/30 transition-colors", u() && "bg-primary/50"), c = t.edge;
+      return i !== r.e && h(e, r.e = i), c !== r.t && p(e, "data-widget-resize-handle", r.t = c), r;
     }, {
       e: void 0,
       t: void 0
@@ -71,5 +71,5 @@ function G(t) {
 }
 E(["pointerdown"]);
 export {
-  G as WidgetResizeHandle
+  W as WidgetResizeHandle
 };

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

@@ -26,6 +26,10 @@ export interface DeckGridPixelRect {
     width: number;
     height: number;
 }
+export interface DeckGridPixelOffset {
+    x: number;
+    y: number;
+}
 export declare const DECK_GRID_CONFIG: {
     readonly cols: 24;
     readonly defaultRows: 24;
@@ -38,4 +42,7 @@ export declare function measureDeckGrid(gridEl: HTMLElement, options?: {
     paddingRight?: number;
 }): DeckGridMeasurements | null;
 export declare function measureDeckGridSurface(gridEl: HTMLElement): DeckGridSurfaceMeasurements | null;
+export declare function getDeckGridColPitch(measurements: Pick<DeckGridMeasurements, 'cellWidth' | 'gap'>): number;
+export declare function getDeckGridRowPitch(measurements: Pick<DeckGridMeasurements, 'cellHeight'>): number;
 export declare function positionToDeckPixelRect(position: GridPosition, measurements: DeckGridSurfaceMeasurements): DeckGridPixelRect;
+export declare function positionDeltaToDeckPixelOffset(from: GridPosition, to: GridPosition, measurements: DeckGridSurfaceMeasurements): DeckGridPixelOffset;

package/dist/components/deck/deckGridMetrics.js

@@ -1,10 +1,10 @@
-const l = 24, r = 24, D = 4, _ = 20, h = 4, s = {
+const D = 24, _ = 24, h = 4, s = 20, f = 4, C = {
   cols: 24,
   defaultRows: 24,
   gap: 4,
   rowHeight: 20
 };
-function g(t) {
+function r(t) {
   return {
     cols: parseInt(t.dataset.gridCols || String(24), 10),
     rowHeight: parseFloat(t.dataset.rowHeight || String(20)),
@@ -12,41 +12,56 @@ function g(t) {
     defaultRows: parseInt(t.dataset.defaultRows || String(24), 10)
   };
 }
-function p(t, n) {
-  const o = g(t), a = n?.paddingLeft ?? 0, d = n?.paddingRight ?? 0, c = t.clientWidth - a - d, e = o.gap * (o.cols - 1), i = (c - e) / o.cols;
-  return !Number.isFinite(i) || i <= 0 ? null : {
+function l(t, n) {
+  const o = r(t), e = n?.paddingLeft ?? 0, c = n?.paddingRight ?? 0, i = t.clientWidth - e - c, a = o.gap * (o.cols - 1), d = (i - a) / o.cols;
+  return !Number.isFinite(d) || d <= 0 ? null : {
     ...o,
-    cellWidth: i,
+    cellWidth: d,
     cellHeight: o.rowHeight + o.gap
   };
 }
-function C(t) {
-  const n = t.ownerDocument.defaultView?.getComputedStyle(t) ?? getComputedStyle(t), o = parseFloat(n.paddingLeft) || 0, a = parseFloat(n.paddingRight) || 0, d = parseFloat(n.paddingTop) || 0, c = parseFloat(n.paddingBottom) || 0, e = p(t, { paddingLeft: o, paddingRight: a });
-  return e ? {
-    ...e,
+function u(t) {
+  const n = t.ownerDocument.defaultView?.getComputedStyle(t) ?? getComputedStyle(t), o = parseFloat(n.paddingLeft) || 0, e = parseFloat(n.paddingRight) || 0, c = parseFloat(n.paddingTop) || 0, i = parseFloat(n.paddingBottom) || 0, a = l(t, { paddingLeft: o, paddingRight: e });
+  return a ? {
+    ...a,
     paddingLeft: o,
-    paddingRight: a,
-    paddingTop: d,
-    paddingBottom: c
+    paddingRight: e,
+    paddingTop: c,
+    paddingBottom: i
   } : null;
 }
-function f(t, n) {
+function g(t) {
+  return t.cellWidth + t.gap;
+}
+function p(t) {
+  return t.cellHeight;
+}
+function R(t, n) {
   return {
-    left: n.paddingLeft + t.col * (n.cellWidth + n.gap),
-    top: n.paddingTop + t.row * (n.rowHeight + n.gap),
+    left: n.paddingLeft + t.col * g(n),
+    top: n.paddingTop + t.row * p(n),
     width: t.colSpan * n.cellWidth + Math.max(0, t.colSpan - 1) * n.gap,
     height: t.rowSpan * n.rowHeight + Math.max(0, t.rowSpan - 1) * n.gap
   };
 }
+function G(t, n, o) {
+  return {
+    x: (n.col - t.col) * g(o),
+    y: (n.row - t.row) * p(o)
+  };
+}
 export {
-  r as DECK_DEFAULT_ROWS,
-  D as DECK_GAP,
-  l as DECK_GRID_COLS,
-  s as DECK_GRID_CONFIG,
-  _ as DECK_MIN_ROW_HEIGHT,
-  h as DECK_PADDING,
-  g as getGridConfigFromElement,
-  p as measureDeckGrid,
-  C as measureDeckGridSurface,
-  f as positionToDeckPixelRect
+  _ as DECK_DEFAULT_ROWS,
+  h as DECK_GAP,
+  D as DECK_GRID_COLS,
+  C as DECK_GRID_CONFIG,
+  s as DECK_MIN_ROW_HEIGHT,
+  f as DECK_PADDING,
+  g as getDeckGridColPitch,
+  p as getDeckGridRowPitch,
+  r as getGridConfigFromElement,
+  l as measureDeckGrid,
+  u as measureDeckGridSurface,
+  G as positionDeltaToDeckPixelOffset,
+  R as positionToDeckPixelRect
 };

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

@@ -27,6 +27,8 @@ export interface DeckPointerSessionFrame {
     gap: number;
     cellWidth: number;
     cellHeight: number;
+    colPitch: number;
+    rowPitch: number;
 }
 export interface StartDeckPointerSessionOptions {
     kind: HotInteractionKind;

package/dist/components/deck/deckPointerSession.js

@@ -1,5 +1,5 @@
-import { startHotInteraction as X } from "../../utils/hotInteraction.js";
-import { measureDeckGrid as h } from "./deckGridMetrics.js";
+import { startHotInteraction as Y } from "../../utils/hotInteraction.js";
+import { measureDeckGrid as P } from "./deckGridMetrics.js";
 function C(e) {
   const d = e.lastClientY - e.gridRect.top, t = e.gridRect.bottom - e.lastClientY;
   let n = 0;
@@ -12,23 +12,25 @@ function v(e) {
   if (e.lastClientX === e.lastAppliedClientX && e.lastClientY === e.lastAppliedClientY && i === e.lastAppliedScrollTop)
     return null;
   e.lastAppliedClientX = e.lastClientX, e.lastAppliedClientY = e.lastClientY, e.lastAppliedScrollTop = i;
-  const l = h(e.gridEl, {
+  const r = P(e.gridEl, {
     paddingLeft: e.gridPaddingLeft,
     paddingRight: e.gridPaddingRight
   });
-  return l ? {
+  return r ? {
     snapshot: e,
     deltaX: e.lastClientX - e.startClientX,
     deltaY: e.lastClientY - e.startClientY + (i - e.startScrollTop),
-    cols: l.cols,
-    rowHeight: l.rowHeight,
-    gap: l.gap,
-    cellWidth: l.cellWidth,
-    cellHeight: l.cellHeight
+    cols: r.cols,
+    rowHeight: r.rowHeight,
+    gap: r.gap,
+    cellWidth: r.cellWidth,
+    cellHeight: r.cellHeight,
+    colPitch: r.cellWidth + r.gap,
+    rowPitch: r.cellHeight
   } : null;
 }
 function L(e) {
-  const i = e.gridEl.ownerDocument, l = i.defaultView ?? window, d = l.getComputedStyle(e.gridEl), t = {
+  const i = e.gridEl.ownerDocument, r = i.defaultView ?? window, d = r.getComputedStyle(e.gridEl), t = {
     pointerId: e.pointerEvent.pointerId,
     kind: e.kind,
     widgetId: e.widgetId,
@@ -45,7 +47,7 @@ function L(e) {
     lastAppliedClientY: e.pointerEvent.clientY,
     lastAppliedScrollTop: e.gridEl.scrollTop,
     rafId: null,
-    stopHotInteraction: X({
+    stopHotInteraction: Y({
       kind: e.kind,
       cursor: e.cursor,
       lockUserSelect: !0
@@ -54,15 +56,15 @@ function L(e) {
   let n = !0;
   const a = () => {
     if (t.rafId = null, !n) return;
-    const r = C(t), c = v(t);
-    c && e.onMove(c), n && r && o();
+    const l = C(t), c = v(t);
+    c && e.onMove(c), n && l && o();
   }, o = () => {
     if (!(!n || t.rafId !== null)) {
-      if (typeof l.requestAnimationFrame != "function") {
+      if (typeof r.requestAnimationFrame != "function") {
         a();
         return;
       }
-      t.rafId = l.requestAnimationFrame(a);
+      t.rafId = r.requestAnimationFrame(a);
     }
   }, I = () => {
     if (!(!e.captureEl || typeof e.captureEl.releasePointerCapture != "function"))
@@ -70,30 +72,35 @@ function L(e) {
         e.captureEl.releasePointerCapture(t.pointerId);
       } catch {
       }
-  }, Y = () => {
+  }, h = () => {
     i.removeEventListener("pointermove", g, !0), i.removeEventListener("pointerup", p, !0), i.removeEventListener("pointercancel", m, !0), e.captureEl?.removeEventListener("lostpointercapture", s);
-  }, u = (r) => {
+  }, u = (l) => {
     if (!n) return;
-    const c = r?.event;
+    const c = l?.event;
     if (!(c && c.pointerId !== t.pointerId)) {
-      if (c && (t.lastClientX = c.clientX, t.lastClientY = c.clientY), n = !1, t.rafId !== null && typeof l.cancelAnimationFrame == "function" && (l.cancelAnimationFrame(t.rafId), t.rafId = null), r?.commit !== !1) {
+      if (c && (t.lastClientX = c.clientX, t.lastClientY = c.clientY), n = !1, t.rafId !== null && typeof r.cancelAnimationFrame == "function" && (r.cancelAnimationFrame(t.rafId), t.rafId = null), l?.commit !== !1) {
         C(t);
         const E = v(t);
         E && e.onMove(E);
       }
-      Y(), I(), t.stopHotInteraction?.(), t.stopHotInteraction = null, e.onEnd({
-        commit: r?.commit !== !1,
-        snapshot: t
-      });
+      h(), I();
+      try {
+        e.onEnd({
+          commit: l?.commit !== !1,
+          snapshot: t
+        });
+      } finally {
+        t.stopHotInteraction?.(), t.stopHotInteraction = null;
+      }
     }
-  }, f = (r) => {
-    !n || r.pointerId !== t.pointerId || (t.lastClientX = r.clientX, t.lastClientY = r.clientY, o());
-  }, g = (r) => {
-    f(r);
-  }, p = (r) => {
-    u({ event: r });
-  }, m = (r) => {
-    u({ event: r, commit: !1 });
+  }, f = (l) => {
+    !n || l.pointerId !== t.pointerId || (t.lastClientX = l.clientX, t.lastClientY = l.clientY, o());
+  }, g = (l) => {
+    f(l);
+  }, p = (l) => {
+    u({ event: l });
+  }, m = (l) => {
+    u({ event: l, commit: !1 });
   }, s = () => {
     u();
   };

package/dist/hooks/useDeckDrag.js

@@ -1,7 +1,7 @@
 import { createEffect as m, onCleanup as E } from "solid-js";
 import { useDeck as h } from "../context/DeckContext.js";
-import { applyDragDelta as k } from "../utils/gridLayout.js";
-import { startDeckPointerSession as y } from "../components/deck/deckPointerSession.js";
+import { applyDragDelta as P } from "../utils/gridLayout.js";
+import { startDeckPointerSession as k } from "../components/deck/deckPointerSession.js";
 function L() {
   const o = h();
   let i = null, l = null, r = null;
@@ -20,7 +20,7 @@ function L() {
     if (!g) return;
     e.preventDefault(), e.stopPropagation(), s(!1), o.startDrag(n, e.clientX, e.clientY);
     const p = o.dragState();
-    !p || p.widgetId !== n || (l = n, r = { ...g.position }, i = y({
+    !p || p.widgetId !== n || (l = n, r = { ...g.position }, i = k({
       kind: "drag",
       widgetId: n,
       gridEl: c,
@@ -29,7 +29,7 @@ function L() {
       cursor: "grabbing",
       onMove: (t) => {
         if (!l || !r) return;
-        const f = Math.round(t.deltaX / t.cellWidth), D = Math.round(t.deltaY / t.cellHeight), w = k(r, f, D, t.cols);
+        const f = Math.round(t.deltaX / t.colPitch), D = Math.round(t.deltaY / t.rowPitch), w = P(r, f, D, t.cols);
         o.updateDrag(w, {
           deltaX: t.deltaX,
           deltaY: t.deltaY

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.36.10",
+  "version": "0.36.11",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",