@floegence/floe-webapp-core 0.36.9 → 0.36.11

package/dist/components/deck/deckGridMetrics.js

@@ -1,10 +1,10 @@
-const c = 24, r = 24, g = 4, C = 20, d = 4, E = {
+const D = 24, _ = 24, h = 4, s = 20, f = 4, C = {
   cols: 24,
   defaultRows: 24,
   gap: 4,
   rowHeight: 20
 };
-function D(t) {
+function r(t) {
   return {
     cols: parseInt(t.dataset.gridCols || String(24), 10),
     rowHeight: parseFloat(t.dataset.rowHeight || String(20)),
@@ -12,21 +12,56 @@ function D(t) {
     defaultRows: parseInt(t.dataset.defaultRows || String(24), 10)
   };
 }
-function G(t, o) {
-  const n = D(t), s = o?.paddingLeft ?? 0, a = o?.paddingRight ?? 0, i = t.clientWidth - s - a, _ = n.gap * (n.cols - 1), e = (i - _) / n.cols;
-  return !Number.isFinite(e) || e <= 0 ? null : {
-    ...n,
-    cellWidth: e,
-    cellHeight: n.rowHeight + n.gap
+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: d,
+    cellHeight: o.rowHeight + o.gap
+  };
+}
+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: e,
+    paddingTop: c,
+    paddingBottom: i
+  } : null;
+}
+function g(t) {
+  return t.cellWidth + t.gap;
+}
+function p(t) {
+  return t.cellHeight;
+}
+function R(t, n) {
+  return {
+    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,
-  g as DECK_GAP,
-  c as DECK_GRID_COLS,
-  E as DECK_GRID_CONFIG,
-  C as DECK_MIN_ROW_HEIGHT,
-  d as DECK_PADDING,
-  D as getGridConfigFromElement,
-  G as measureDeckGrid
+  _ 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/context/DeckContext.d.ts

@@ -33,6 +33,15 @@ export interface DragState {
     startX: number;
     startY: number;
 }
+/**
+ * High-frequency visual motion for an active drag session.
+ * This never participates in collision checks or final commit.
+ */
+export interface DragMotionState {
+    widgetId: string;
+    deltaX: number;
+    deltaY: number;
+}
 /**
  * Resize state for a widget being resized
  */
@@ -68,8 +77,12 @@ export interface DeckContextValue {
     /** Get widget state accessor for a specific widget */
     getWidgetState: (widgetId: string) => Record<string, unknown>;
     dragState: Accessor<DragState | null>;
+    dragMotion: Accessor<DragMotionState | null>;
     startDrag: (widgetId: string, startX: number, startY: number) => void;
-    updateDrag: (currentPosition: GridPosition) => void;
+    updateDrag: (currentPosition: GridPosition, motion: {
+        deltaX: number;
+        deltaY: number;
+    }) => void;
     endDrag: (commit: boolean) => void;
     resizeState: Accessor<ResizeState | null>;
     startResize: (widgetId: string, edge: ResizeState['edge'], startX: number, startY: number) => void;