@floegence/floe-webapp-core 0.36.8 → 0.36.10

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,13 +6,9 @@ export interface DeckCellProps {
     position: GridPosition;
     isDragging?: boolean;
     isResizing?: boolean;
-    /** Pixel offset for smooth drag following */
-    pixelOffset?: {
-        x: number;
-        y: number;
-    };
+    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,28 +1,19 @@
-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 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 { 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 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) => {
+    r.updateWidgetState(e.widget.id, i, t);
+  }, o = () => a()?.component;
   return (() => {
-    var t = _();
-    return u(t, n(M, {
+    var i = P();
+    return s(i, g(I, {
       get widget() {
         return e.widget;
       },
@@ -36,28 +27,28 @@ function q(e) {
         return e.isResizing;
       },
       get children() {
-        return n(b, {
+        return g(C, {
           get when() {
-            return s();
+            return o();
           },
           get fallback() {
-            return n(I, {
+            return g(_, {
               get type() {
-                return o();
+                return d();
               }
             });
           },
           get children() {
-            return n(k, {
+            return g(M, {
               get widgetId() {
                 return e.widget.id;
               },
-              state: w,
-              onStateChange: h,
+              state: h,
+              onStateChange: v,
               get children() {
-                return n(D, {
+                return g(D, {
                   get component() {
-                    return s();
+                    return o();
                   },
                   get widgetId() {
                     return e.widget.id;
@@ -74,34 +65,34 @@ function q(e) {
           }
         });
       }
-    })), x((r) => {
-      var c = C(
+    })), 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-xl z-50 ring-2 ring-primary scale-[1.02]",
+        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 = {
-        "grid-area": m(),
-        ...v()
+      ), y = e.dragOverlayStyle ?? {
+        "grid-area": w()
       };
-      return c !== r.e && W(t, r.e = c), r.t = S(t, y, r.t), r;
+      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
-    }), 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(), n = r.firstChild;
+    return n.firstChild, s(n, () => e.type, null), r;
   })();
 }
 export {
-  q as DeckCell
+  B 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,102 +1,105 @@
-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();
-  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) => ({
+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 { 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 { 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();
+  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) => ({
     type: t.type,
     name: t.name,
     icon: t.icon
-  }))), $ = (t) => {
-    if (I.isMobile() || _() || t.target?.closest(".deck-cell") || !a) return;
+  }))), U = (t) => {
+    if (H.isMobile() || j() || 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
-    } = 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({
+    } = 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({
       x: t.clientX,
       y: t.clientY,
-      col: U,
-      row: q
+      col: rt,
+      row: nt
     });
-  }, B = (t) => {
-    const r = w();
-    R(null), r && p.addWidget(t, {
+  }, Z = (t) => {
+    const r = y();
+    C(null), r && m.addWidget(t, {
       col: r.col,
       row: r.row
     });
-  }, X = d(() => {
-    const t = f();
+  }, q = d(() => {
+    const t = x();
     if (!t) return !0;
-    const r = p.activeLayout();
-    return r ? !dt(t.currentPosition, r.widgets, t.widgetId) : !0;
-  }), Y = d(() => {
-    const t = P();
-    if (t.length === 0) return u;
-    let r = u;
-    for (const n of t) {
-      const e = n.position.row + n.position.rowSpan;
+    const r = m.activeLayout();
+    return r ? !ft(t.currentPosition, r.widgets, t.widgetId) : !0;
+  }), J = d(() => {
+    const t = z();
+    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;
-  }), C = d(() => {
-    let t = Y();
-    const r = f();
+  }), P = d(() => {
+    let t = J();
+    const r = x();
     if (r) {
       const e = r.currentPosition.row + r.currentPosition.rowSpan;
       e > t && (t = e);
     }
-    const n = M();
-    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);
-  }), b = d(() => {
+    return Math.max(g, t);
+  }), k = d(() => {
     const t = S();
-    if (t <= 0) return k;
-    const n = (t - L * 2 - (u - 1) * x) / u;
-    return Math.max(k, n);
+    if (t <= 0) return F;
+    const o = (t - O * 2 - (g - 1) * p) / g;
+    return Math.max(F, o);
   });
-  rt(() => {
-    if (!a || typeof ResizeObserver > "u") return;
-    const t = new ResizeObserver((r) => {
-      for (const n of r)
-        D(n.contentRect.height);
+  st(() => {
+    const t = () => {
+      n && (I(n.clientHeight), X(T(n)));
+    };
+    if (t(), !n || typeof ResizeObserver > "u") return;
+    const r = new ResizeObserver((o) => {
+      for (const e of o)
+        I(e.contentRect.height);
+      t();
     });
-    t.observe(a), D(a.clientHeight), ot(() => t.disconnect());
+    r.observe(n), lt(() => r.disconnect());
   });
-  const j = d(() => C() > u ? !0 : S() <= 0 ? !1 : u * b() + (u - 1) * x + L * 2 > S() + 1);
+  const Q = d(() => P() > g ? !0 : S() <= 0 ? !1 : g * k() + (g - 1) * p + O * 2 > S() + 1);
   return (() => {
-    var t = mt(), r = t.firstChild;
-    t.$$contextmenu = $;
-    var n = a;
-    return typeof n == "function" ? tt(n, t) : a = t, h(t, m(G, {
+    var t = kt(), r = t.firstChild;
+    t.$$contextmenu = U;
+    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, {
       get when() {
-        return z();
+        return _();
       },
       get children() {
-        var e = ft();
-        return F((o) => {
-          var s = `1 / ${C() + 1}`, c = `${b() + x}px`, l = [
+        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 = [
             // 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 +109,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(", "), a = [
             // Fine
             "var(--deck-grid-unit-x) var(--deck-grid-unit-y)",
             "var(--deck-grid-unit-x) var(--deck-grid-unit-y)",
@@ -117,7 +120,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 !== 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,
@@ -125,37 +128,49 @@ function Dt(g) {
           o: void 0
         }), e;
       }
-    }), null), h(t, m(G, {
+    }), null), b(t, h(L, {
       get when() {
-        return f();
+        return x();
       },
-      children: (e) => m(pt, {
+      children: (e) => h(xt, {
         get position() {
           return e().currentPosition;
         },
         get isValid() {
-          return X();
+          return q();
         }
       })
-    }), null), h(t, m(nt, {
+    }), null), b(t, h(ct, {
       get each() {
-        return P();
+        return z();
       },
       children: (e) => {
-        const o = d(() => {
-          const i = f();
-          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;
+        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 = Y();
+          if (!w || w.widgetId !== e.id) return;
+          const f = B();
+          if (!f) return;
+          const v = wt(a.originalPosition, f);
+          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-origin": "center center",
+            "will-change": "transform"
+          };
         });
-        return m(ut, {
+        return h(vt, {
           widget: e,
           get position() {
-            return o();
+            return i();
           },
           get isDragging() {
             return s();
@@ -163,36 +178,36 @@ function Dt(g) {
           get isResizing() {
             return c();
           },
-          get pixelOffset() {
+          get dragOverlayStyle() {
             return l();
           }
         });
       }
-    }), null), h(t, () => g.children, null), h(t, m(gt, {
+    }), null), b(t, () => $.children, null), b(t, h(ht, {
       get open() {
-        return w() !== null;
+        return y() !== null;
       },
       get x() {
-        return w()?.x ?? 0;
+        return y()?.x ?? 0;
       },
       get y() {
-        return w()?.y ?? 0;
+        return y()?.y ?? 0;
       },
       get items() {
-        return E();
+        return V();
       },
-      onSelect: B,
-      onDismiss: () => R(null)
-    }), null), F((e) => {
-      var o = it(
+      onSelect: Z,
+      onDismiss: () => C(null)
+    }), null), E((e) => {
+      var i = dt(
         "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",
+        Q() ? "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;
+        _() && "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;
     }, {
       e: void 0,
       t: void 0,
@@ -201,24 +216,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"]);
+at(["contextmenu"]);
 export {
-  Pt as DECK_GRID_CONFIG,
-  Dt as DeckGrid,
-  ht as getGridConfigFromElement
+  Tt 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.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;