@floegence/floe-webapp-core 0.36.9 → 0.36.11

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

@@ -1,3 +1,4 @@
+import { type JSX } from 'solid-js';
 import { type DeckWidget } from '../../context/DeckContext';
 import type { GridPosition } from '../../utils/gridCollision';
 export interface DeckCellProps {
@@ -5,8 +6,9 @@ export interface DeckCellProps {
     position: GridPosition;
     isDragging?: boolean;
     isResizing?: boolean;
+    dragOverlayStyle?: JSX.CSSProperties;
 }
 /**
  * Widget cell wrapper positioned via CSS grid-area
  */
-export declare function DeckCell(props: DeckCellProps): import("solid-js").JSX.Element;
+export declare function DeckCell(props: DeckCellProps): JSX.Element;

package/dist/components/deck/DeckCell.js

@@ -1,24 +1,24 @@
-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 { 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 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 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) => {
+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 = 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);
-  }, a = () => o()?.component;
+  }, o = () => a()?.component;
   return (() => {
-    var i = I();
-    return m(i, n(P, {
+    var i = P();
+    return s(i, g(I, {
       get widget() {
         return e.widget;
       },
       get widgetDef() {
-        return o();
+        return a();
       },
       get isDragging() {
         return e.isDragging;
@@ -27,28 +27,28 @@ function H(e) {
         return e.isResizing;
       },
       get children() {
-        return n(k, {
+        return g(z, {
           get when() {
-            return a();
+            return o();
           },
           get fallback() {
-            return n(_, {
+            return g(_, {
               get type() {
                 return d();
               }
             });
           },
           get children() {
-            return n(M, {
+            return g(M, {
               get widgetId() {
                 return e.widget.id;
               },
-              state: v,
-              onStateChange: y,
+              state: h,
+              onStateChange: v,
               get children() {
-                return n(D, {
+                return g(D, {
                   get component() {
-                    return a();
+                    return o();
                   },
                   get widgetId() {
                     return e.widget.id;
@@ -57,7 +57,7 @@ function H(e) {
                     return e.widget.config;
                   },
                   get isEditMode() {
-                    return w();
+                    return f();
                   }
                 });
               }
@@ -66,18 +66,10 @@ function H(e) {
         });
       }
     })), 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)
-        !e.isDragging && "transition-transform duration-200 ease-out",
-        e.isDragging && "shadow-xl z-50 ring-2 ring-primary scale-[1.02]",
-        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"
-      ), 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;
+      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;
     }, {
       e: void 0,
       t: void 0,
@@ -87,10 +79,10 @@ function H(e) {
 }
 function _(e) {
   return (() => {
-    var r = T(), g = r.firstChild;
-    return g.firstChild, m(g, () => e.type, null), r;
+    var r = T(), n = r.firstChild;
+    return n.firstChild, s(n, () => e.type, null), r;
   })();
 }
 export {
-  H as DeckCell
+  B as DeckCell
 };

package/dist/components/deck/DeckGrid.js

@@ -1,101 +1,105 @@
-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 [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) => ({
+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 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 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 [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
-  }))), K = (t) => {
-    if (P.isMobile() || A() || t.target?.closest(".deck-cell") || !a) return;
+  }))), J = (t) => {
+    if (O.isMobile() || Z() || t.target?.closest(".deck-cell") || !n) return;
     t.preventDefault();
-    const n = a.getBoundingClientRect(), {
+    const o = n.getBoundingClientRect(), {
       cols: e,
-      rowHeight: o,
+      rowHeight: i,
       gap: s
-    } = 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({
+    } = 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: Z,
-      row: q
+      col: H,
+      row: nt
     });
-  }, N = (t) => {
-    const r = x();
-    D(null), r && p.addWidget(t, {
+  }, Q = (t) => {
+    const r = b();
+    P(null), r && p.addWidget(t, {
       col: r.col,
       row: r.row
     });
-  }, B = d(() => {
-    const t = v();
+  }, tt = d(() => {
+    const t = x();
     if (!t) return !0;
     const r = p.activeLayout();
-    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) {
-      const e = n.position.row + n.position.rowSpan;
+    return r ? !ft(t.currentPosition, r.widgets, t.widgetId) : !0;
+  }), et = d(() => {
+    const t = E();
+    if (t.length === 0) return g;
+    let r = g;
+    for (const o of t) {
+      const e = o.position.row + o.position.rowSpan;
       e > r && (r = e);
     }
     return r;
-  }), S = d(() => {
-    let t = X();
-    const r = v();
+  }), G = d(() => {
+    let t = et();
+    const r = x();
     if (r) {
       const e = r.currentPosition.row + r.currentPosition.rowSpan;
       e > t && (t = e);
     }
-    const n = C();
-    if (n) {
-      const e = n.currentPosition.row + n.currentPosition.rowSpan;
+    const o = R();
+    if (o) {
+      const e = o.currentPosition.row + o.currentPosition.rowSpan;
       e > t && (t = e);
     }
-    return Math.max(u, t);
-  }), w = d(() => {
-    const t = k();
-    if (t <= 0) return L;
-    const n = (t - F * 2 - (u - 1) * m) / u;
-    return Math.max(L, n);
+    return Math.max(g, t);
+  }), k = d(() => {
+    const t = C();
+    if (t <= 0) return W;
+    const o = (t - A * 2 - (g - 1) * f) / g;
+    return Math.max(W, o);
   });
-  et(() => {
-    if (!a || typeof ResizeObserver > "u") return;
-    const t = new ResizeObserver((r) => {
-      for (const n of r)
-        H(n.contentRect.height);
+  st(() => {
+    const t = () => {
+      n && (_(n.clientHeight), j(K(n)));
+    };
+    if (t(), !n || typeof ResizeObserver > "u") return;
+    const r = new ResizeObserver((o) => {
+      for (const e of o)
+        _(e.contentRect.height);
+      t();
     });
-    t.observe(a), H(a.clientHeight), nt(() => t.disconnect());
+    r.observe(n), lt(() => r.disconnect());
   });
-  const Y = d(() => S() > u ? !0 : k() <= 0 ? !1 : u * w() + (u - 1) * m + F * 2 > k() + 1);
+  const rt = d(() => G() > g ? !0 : C() <= 0 ? !1 : g * k() + (g - 1) * f + A * 2 > C() + 1);
   return (() => {
-    var t = ft(), r = t.firstChild;
-    t.$$contextmenu = K;
-    var n = a;
-    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, {
+    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(${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 z();
+        return L();
       },
       get children() {
-        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 = [
+        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)",
@@ -105,7 +109,7 @@ function It(R) {
             // 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(", "), g = [
+          ].join(", "), a = [
             // Fine
             "var(--deck-grid-unit-x) var(--deck-grid-unit-y)",
             "var(--deck-grid-unit-x) var(--deck-grid-unit-y)",
@@ -116,7 +120,7 @@ function It(R) {
             "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 && 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;
+          return s !== i.e && u(e, "grid-row", i.e = s), c !== i.t && u(e, "--deck-grid-unit-y", i.t = c), l !== i.a && u(e, "background-image", i.a = l), a !== i.o && u(e, "background-size", i.o = a), i;
         }, {
           e: void 0,
           t: void 0,
@@ -124,68 +128,86 @@ function It(R) {
           o: void 0
         }), e;
       }
-    }), null), h(t, f(E, {
+    }), null), y(t, h(F, {
       get when() {
-        return v();
+        return x();
       },
-      children: (e) => f(gt, {
+      children: (e) => h(xt, {
         get position() {
           return e().currentPosition;
         },
         get isValid() {
-          return B();
+          return tt();
         }
       })
-    }), null), h(t, f(rt, {
+    }), null), y(t, h(ct, {
       get each() {
-        return I();
+        return E();
       },
       children: (e) => {
-        const o = d(() => {
-          const i = v();
-          if (i && i.widgetId === e.id)
-            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, {
+        const i = d(() => {
+          const a = R();
+          return a && a.widgetId === e.id ? a.currentPosition : e.position;
+        }), 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 = V();
+          if (!w || w.widgetId !== e.id) return;
+          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(${$}px, ${H}px, 0) scale(0.992)`,
+            "transform-origin": "center center",
+            "will-change": "transform"
+          };
+        });
+        return h(vt, {
           widget: e,
           get position() {
-            return o();
+            return i();
           },
           get isDragging() {
             return s();
           },
           get isResizing() {
             return c();
+          },
+          get dragOverlayStyle() {
+            return l();
           }
         });
       }
-    }), null), h(t, () => R.children, null), h(t, f(ut, {
+    }), null), y(t, () => z.children, null), y(t, h(ht, {
       get open() {
-        return x() !== null;
+        return b() !== null;
       },
       get x() {
-        return x()?.x ?? 0;
+        return b()?.x ?? 0;
       },
       get y() {
-        return x()?.y ?? 0;
+        return b()?.y ?? 0;
       },
       get items() {
-        return O();
+        return q();
       },
-      onSelect: N,
-      onDismiss: () => D(null)
-    }), null), G((e) => {
-      var o = ot(
+      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
-        Y() ? "overflow-y-scroll" : "overflow-y-hidden",
+        rt() ? "overflow-y-scroll" : "overflow-y-hidden",
         "grid p-1",
-        z() && "bg-muted/20",
-        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;
+        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,
@@ -194,9 +216,9 @@ function It(R) {
     }), t;
   })();
 }
-tt(["contextmenu"]);
+at(["contextmenu"]);
 export {
-  _t as DECK_GRID_CONFIG,
-  It as DeckGrid,
-  mt as getGridConfigFromElement
+  Wt as DECK_GRID_CONFIG,
+  Lt as DeckGrid,
+  bt as getGridConfigFromElement
 };

package/dist/components/deck/DropZonePreview.js

@@ -1,25 +1,25 @@
-import { effect as m, className as c, setStyleProperty as i, template as b } from "solid-js/web";
-import { cn as f } from "../../utils/cn.js";
-import { positionToGridArea as g } from "../../utils/gridLayout.js";
-var u = /* @__PURE__ */ b('<div><div class="absolute inset-0 rounded-md">');
-function V(o) {
-  const v = () => g(o.position), a = () => o.isValid !== !1 ? "--info" : "--error";
+import { effect as g, className as c, setStyleProperty as n, template as f } from "solid-js/web";
+import { cn as m } from "../../utils/cn.js";
+import { positionToGridArea as b } from "../../utils/gridLayout.js";
+var u = /* @__PURE__ */ f('<div data-floe-deck-drop-preview=true><div class="absolute inset-0 rounded-md">');
+function w(i) {
+  const v = () => b(i.position), o = () => i.isValid !== !1 ? "--info" : "--error";
   return (() => {
     var e = u(), l = e.firstChild;
-    return m((r) => {
-      var n = f(
-        "pointer-events-none rounded-md relative",
+    return g((r) => {
+      var a = m(
+        "pointer-events-none rounded-md relative z-20",
         "border-2 border-dashed",
-        o.isValid !== !1 ? "border-info/50 bg-info/10" : "border-error/50 bg-error/10",
+        i.isValid !== !1 ? "border-info/60 bg-info/10 ring-1 ring-inset ring-info/25" : "border-error/60 bg-error/10 ring-1 ring-inset ring-error/25",
         // Subtle animation
         "animate-in fade-in duration-150"
-      ), t = v(), d = `0 4px 16px color-mix(in srgb, var(${a()}) 18%, transparent)`, s = `linear-gradient(
+      ), t = v(), d = `0 4px 16px color-mix(in srgb, var(${o()}) 18%, transparent)`, s = `linear-gradient(
             135deg,
-            color-mix(in srgb, var(${a()}) 18%, transparent) 0%,
+            color-mix(in srgb, var(${o()}) 18%, transparent) 0%,
             transparent 55%,
-            color-mix(in srgb, var(${a()}) 10%, var(--card)) 100%
+            color-mix(in srgb, var(${o()}) 10%, var(--card)) 100%
           )`;
-      return n !== r.e && c(e, r.e = n), t !== r.t && i(e, "grid-area", r.t = t), d !== r.a && i(e, "box-shadow", r.a = d), s !== r.o && i(l, "background", r.o = s), r;
+      return a !== r.e && c(e, r.e = a), t !== r.t && n(e, "grid-area", r.t = t), d !== r.a && n(e, "box-shadow", r.a = d), s !== r.o && n(l, "background", r.o = s), r;
     }, {
       e: void 0,
       t: void 0,
@@ -29,5 +29,5 @@ function V(o) {
   })();
 }
 export {
-  V as DropZonePreview
+  w as DropZonePreview
 };

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

@@ -1,3 +1,4 @@
+import type { GridPosition } from '../../utils/gridCollision';
 export declare const DECK_GRID_COLS = 24;
 export declare const DECK_DEFAULT_ROWS = 24;
 export declare const DECK_GAP = 4;
@@ -13,6 +14,22 @@ export interface DeckGridMeasurements extends DeckGridConfig {
     cellWidth: number;
     cellHeight: number;
 }
+export interface DeckGridSurfaceMeasurements extends DeckGridMeasurements {
+    paddingLeft: number;
+    paddingRight: number;
+    paddingTop: number;
+    paddingBottom: number;
+}
+export interface DeckGridPixelRect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+export interface DeckGridPixelOffset {
+    x: number;
+    y: number;
+}
 export declare const DECK_GRID_CONFIG: {
     readonly cols: 24;
     readonly defaultRows: 24;
@@ -24,3 +41,8 @@ export declare function measureDeckGrid(gridEl: HTMLElement, options?: {
     paddingLeft?: number;
     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;