@floegence/floe-webapp-core 0.36.8 → 0.36.10

package/dist/hooks/useDeckDrag.d.ts

@@ -1,6 +1,7 @@
 /**
- * Hook to set up drag handling for deck widgets
- * Listens for pointer events on elements with data-widget-drag-handle attribute
- * Only active when edit mode is enabled
+ * Hook to set up drag handling for deck widgets.
+ * The drag handle is discovered lazily from `pointerdown`, then the active
+ * pointer session is promoted to a document-level controller so release always
+ * tears down correctly even when the pointer crosses other surfaces.
  */
 export declare function useDeckDrag(): void;

package/dist/hooks/useDeckDrag.js

@@ -1,81 +1,51 @@
-import { createEffect as G, onCleanup as z } from "solid-js";
-import { useDeck as B } from "../context/DeckContext.js";
-import { applyDragDelta as U } from "../utils/gridLayout.js";
-import { getGridConfigFromElement as N } from "../components/deck/DeckGrid.js";
-import { startHotInteraction as O } from "../utils/hotInteraction.js";
-function Z() {
-  const h = B();
-  let c = null, p = 0, m = 0, L = 0, f = 0, l = 0, P = 0, I = 0, A = 0, a = null, v = null, F = null, w = null, n = null, T = null, H = 0, k = 0, y = null;
-  const C = (t) => {
-    if (!t) {
-      w?.(), w = null;
-      return;
-    }
-    w?.(), w = O({
+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";
+function L() {
+  const o = h();
+  let i = null, l = null, r = null;
+  const s = (e) => {
+    i?.stop({ commit: e }), i = null, l = null, r = null;
+  }, u = (e) => {
+    const a = e.target;
+    if (!a || a.closest('button, input, select, textarea, [role="button"], a') || a.closest("[data-widget-resize-handle]") || e.pointerType === "mouse" && e.button !== 0) return;
+    const d = a.closest("[data-widget-drag-handle]");
+    if (!d) return;
+    const n = d.dataset.widgetDragHandle;
+    if (!n) return;
+    const c = d.closest(".deck-grid");
+    if (!c) return;
+    const g = o.activeLayout()?.widgets.find((t) => t.id === n);
+    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({
       kind: "drag",
+      widgetId: n,
+      gridEl: c,
+      captureEl: d,
+      pointerEvent: e,
       cursor: "grabbing",
-      lockUserSelect: !0
-    });
-  }, M = () => {
-    c !== null && (a !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(a), a = null), c = null, v = null, F = null, n = null, T = null, y = null, C(!1), h.endDrag(!0));
-  }, Y = () => {
-    if (!n) return;
-    const t = T ?? n.getBoundingClientRect(), e = 48, d = 24, s = l - t.top, o = t.bottom - l;
-    let r = 0;
-    if (s < e ? r = -Math.ceil((e - s) / e * d) : o < e && (r = Math.ceil((e - o) / e * d)), r === 0) return;
-    const i = n.scrollTop, g = Math.max(0, Math.min(i + r, n.scrollHeight - n.clientHeight));
-    g !== i && (n.scrollTop = g);
-  }, R = () => {
-    if (a !== null || typeof requestAnimationFrame > "u") return;
-    const t = () => {
-      if (c === null) {
-        a = null;
-        return;
+      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);
+        o.updateDrag(w, {
+          deltaX: t.deltaX,
+          deltaY: t.deltaY
+        });
+      },
+      onEnd: ({ commit: t }) => {
+        i = null, l = null, r = null, o.endDrag(t);
       }
-      X(), a = requestAnimationFrame(t);
-    };
-    a = requestAnimationFrame(t);
-  }, S = (t) => {
-    const e = t.target;
-    if (e.closest('button, input, select, textarea, [role="button"], a') || e.closest("[data-widget-resize-handle]")) return;
-    const o = e.closest("[data-widget-drag-handle]");
-    if (!o || t.pointerType === "mouse" && t.button !== 0) return;
-    const r = o.dataset.widgetDragHandle;
-    if (!r) return;
-    const i = o.closest(".deck-grid");
-    if (!i) return;
-    t.preventDefault(), t.stopPropagation(), c = t.pointerId, p = t.clientX, m = t.clientY, f = p, l = m, P = p, I = m, v = r, F = o, n = i, T = i.getBoundingClientRect(), L = i.scrollTop, A = L, C(!0);
-    const u = h.activeLayout()?.widgets.find((b) => b.id === r);
-    y = u ? { ...u.position } : null;
-    const E = window.getComputedStyle(i);
-    H = parseFloat(E.paddingLeft) || 0, k = parseFloat(E.paddingRight) || 0, h.startDrag(r, p, m), o.setPointerCapture(t.pointerId), R();
-  }, x = (t) => {
-    c !== t.pointerId || !v || (f = t.clientX, l = t.clientY, typeof requestAnimationFrame > "u" && X());
-  }, X = () => {
-    if (!v || !n || !y) return;
-    Y();
-    const t = n.scrollTop;
-    if (f === P && l === I && t === A) return;
-    P = f, I = l, A = t;
-    const e = f - p, d = l - m + (t - L), { cols: s, rowHeight: o, gap: r } = N(n), i = n.clientWidth - H - k, g = r * (s - 1), u = (i - g) / s;
-    if (!Number.isFinite(u) || u <= 0) return;
-    const E = o + r, b = Math.round(e / u), W = Math.round(d / E), q = U(y, b, W, s);
-    h.updateDrag(q, { x: e, y: d });
-  }, D = (t) => {
-    if (c === t.pointerId) {
-      try {
-        F?.releasePointerCapture(t.pointerId);
-      } catch {
-      }
-      M();
-    }
+    }));
   };
-  G(() => {
-    typeof document > "u" || (document.addEventListener("pointerdown", S, !0), document.addEventListener("pointermove", x, !0), document.addEventListener("pointerup", D, !0), document.addEventListener("pointercancel", D, !0), z(() => {
-      M(), document.removeEventListener("pointerdown", S, !0), document.removeEventListener("pointermove", x, !0), document.removeEventListener("pointerup", D, !0), document.removeEventListener("pointercancel", D, !0);
+  m(() => {
+    typeof document > "u" || (document.addEventListener("pointerdown", u, !0), E(() => {
+      s(!1), document.removeEventListener("pointerdown", u, !0);
     }));
   });
 }
 export {
-  Z as useDeckDrag
+  L as useDeckDrag
 };

package/dist/index.js

@@ -4,7 +4,7 @@ import { floeColorTokenCategories as d, floeDesignTokens as g, floeFontFamilyTok
 import { CommandProvider as h, createCommandService as P, useCommand as R } from "./context/CommandContext.js";
 import { ComponentRegistryProvider as I, createComponentRegistry as S, hasComponentRegistryContext as b, useComponentContextFactory as O, useComponentRegistry as A, useOptionalComponentRegistry as E } from "./context/ComponentRegistry.js";
 import { DEFAULT_FLOE_CONFIG as B, FloeConfigProvider as N, useFloeConfig as _, useResolvedFloeConfig as w } from "./context/FloeConfigContext.js";
-import { DeckProvider as G, createDeckService as M, useDeck as V } from "./context/DeckContext.js";
+import { DeckProvider as W, createDeckService as M, useDeck as V } from "./context/DeckContext.js";
 import { FLOE_GEOMETRY_SURFACE_ATTR as z, FLOE_HOT_INTERACTION_ATTR as H, startHotInteraction as U } from "./utils/hotInteraction.js";
 import { FileBrowserDragProvider as Y, hasFileBrowserDragContext as j, useFileBrowserDrag as q } from "./context/FileBrowserDragContext.js";
 import { LayoutProvider as X, createLayoutService as Z, useLayout as $ } from "./context/LayoutContext.js";
@@ -14,27 +14,27 @@ import { ViewActivationProvider as le, useViewActivation as fe } from "./context
 import { WidgetRegistryProvider as ge, createWidgetRegistry as Te, useWidgetRegistry as ue } from "./context/WidgetRegistry.js";
 import { WidgetStateProvider as ce, useCurrentWidgetId as Ce, useWidgetState as ye, useWidgetStateContext as ve } from "./context/WidgetStateContext.js";
 import { applyDragDelta as ke, applyResizeDelta as he, getGridCellSize as Pe, pixelDeltaToGridDelta as Re, positionToGridArea as De, snapToGrid as Ie } from "./utils/gridLayout.js";
-import { checkCollision as be, constrainPosition as Oe, findFreePosition as Ae, hasCollision as Ee } from "./utils/gridCollision.js";
-import { cn as Be } from "./utils/cn.js";
-import { createSimpleContext as _e } from "./context/createSimpleContext.js";
-import { deferAfterPaint as We, deferNonBlocking as Ge } from "./utils/defer.js";
-import { duration as Ve, easing as Ke, fadeIn as ze, listContainer as He, listItem as Ue, panelResize as Qe, popIn as Ye, scaleIn as je, sidebarVariants as qe, slideInFromBottom as Je, slideInFromLeft as Xe, slideInFromRight as Ze, slideInFromTop as $e, springConfig as eo } from "./utils/animations.js";
-import { formatKeybind as ro, isMacLikePlatform as to, isPrimaryModKeyPressed as io, matchKeybind as so, parseKeybind as no } from "./utils/keybind.js";
-import { isTypingElement as mo, shouldIgnoreHotkeys as po } from "./utils/dom.js";
-import { lockBodyStyle as fo } from "./utils/bodyStyleLock.js";
-import { registerCommandContributions as To, useCommandContributions as uo } from "./hooks/useCommandContributions.js";
-import { useDebounce as co } from "./hooks/useDebounce.js";
-import { useDeckDrag as yo } from "./hooks/useDeckDrag.js";
-import { useFileBrowserDropTarget as Fo, useFileBrowserItemDrag as ko } from "./hooks/useFileBrowserDrag.js";
-import { useKeybind as Po } from "./hooks/useKeybind.js";
-import { useMediaQuery as Do } from "./hooks/useMediaQuery.js";
-import { usePersisted as So } from "./hooks/usePersisted.js";
-import { useResizeObserver as Oo } from "./hooks/useResizeObserver.js";
+import { checkCollision as be, constrainPosition as Oe, findFreePosition as Ae, hasCollision as Ee, sameGridPosition as Le } from "./utils/gridCollision.js";
+import { cn as Ne } from "./utils/cn.js";
+import { createSimpleContext as we } from "./context/createSimpleContext.js";
+import { deferAfterPaint as We, deferNonBlocking as Me } from "./utils/defer.js";
+import { duration as Ke, easing as ze, fadeIn as He, listContainer as Ue, listItem as Qe, panelResize as Ye, popIn as je, scaleIn as qe, sidebarVariants as Je, slideInFromBottom as Xe, slideInFromLeft as Ze, slideInFromRight as $e, slideInFromTop as eo, springConfig as oo } from "./utils/animations.js";
+import { formatKeybind as to, isMacLikePlatform as io, isPrimaryModKeyPressed as so, matchKeybind as no, parseKeybind as ao } from "./utils/keybind.js";
+import { isTypingElement as po, shouldIgnoreHotkeys as lo } from "./utils/dom.js";
+import { lockBodyStyle as go } from "./utils/bodyStyleLock.js";
+import { registerCommandContributions as uo, useCommandContributions as xo } from "./hooks/useCommandContributions.js";
+import { useDebounce as Co } from "./hooks/useDebounce.js";
+import { useDeckDrag as vo } from "./hooks/useDeckDrag.js";
+import { useFileBrowserDropTarget as ko, useFileBrowserItemDrag as ho } from "./hooks/useFileBrowserDrag.js";
+import { useKeybind as Ro } from "./hooks/useKeybind.js";
+import { useMediaQuery as Io } from "./hooks/useMediaQuery.js";
+import { usePersisted as bo } from "./hooks/usePersisted.js";
+import { useResizeObserver as Ao } from "./hooks/useResizeObserver.js";
 export {
   h as CommandProvider,
   I as ComponentRegistryProvider,
   B as DEFAULT_FLOE_CONFIG,
-  G as DeckProvider,
+  W as DeckProvider,
   z as FLOE_GEOMETRY_SURFACE_ATTR,
   H as FLOE_HOT_INTERACTION_ATTR,
   Y as FileBrowserDragProvider,
@@ -52,21 +52,21 @@ export {
   i as applyTheme,
   s as builtInThemes,
   be as checkCollision,
-  Be as cn,
+  Ne as cn,
   Oe as constrainPosition,
   P as createCommandService,
   S as createComponentRegistry,
   M as createDeckService,
   Z as createLayoutService,
   te as createNotificationService,
-  _e as createSimpleContext,
+  we as createSimpleContext,
   ae as createThemeService,
   Te as createWidgetRegistry,
   We as deferAfterPaint,
-  Ge as deferNonBlocking,
-  Ve as duration,
-  Ke as easing,
-  ze as fadeIn,
+  Me as deferNonBlocking,
+  Ke as duration,
+  ze as easing,
+  He as fadeIn,
   Ae as findFreePosition,
   d as floeColorTokenCategories,
   g as floeDesignTokens,
@@ -77,59 +77,60 @@ export {
   C as floeSpacingTokens,
   y as floeThemeColorVariables,
   v as floeTypographyTokens,
-  ro as formatKeybind,
+  to as formatKeybind,
   F as getFloeColorTokenValue,
   Pe as getGridCellSize,
   n as getSystemTheme,
   Ee as hasCollision,
   b as hasComponentRegistryContext,
   j as hasFileBrowserDragContext,
-  to as isMacLikePlatform,
-  io as isPrimaryModKeyPressed,
-  mo as isTypingElement,
-  He as listContainer,
-  Ue as listItem,
-  fo as lockBodyStyle,
-  so as matchKeybind,
+  io as isMacLikePlatform,
+  so as isPrimaryModKeyPressed,
+  po as isTypingElement,
+  Ue as listContainer,
+  Qe as listItem,
+  go as lockBodyStyle,
+  no as matchKeybind,
   a as mergeThemeTokenMaps,
-  Qe as panelResize,
-  no as parseKeybind,
+  Ye as panelResize,
+  ao as parseKeybind,
   Re as pixelDeltaToGridDelta,
-  Ye as popIn,
+  je as popIn,
   De as positionToGridArea,
-  To as registerCommandContributions,
+  uo as registerCommandContributions,
   m as resolveThemeTokenOverrides,
   p as resolveThemeTokens,
-  je as scaleIn,
-  po as shouldIgnoreHotkeys,
-  qe as sidebarVariants,
-  Je as slideInFromBottom,
-  Xe as slideInFromLeft,
-  Ze as slideInFromRight,
-  $e as slideInFromTop,
+  Le as sameGridPosition,
+  qe as scaleIn,
+  lo as shouldIgnoreHotkeys,
+  Je as sidebarVariants,
+  Xe as slideInFromBottom,
+  Ze as slideInFromLeft,
+  $e as slideInFromRight,
+  eo as slideInFromTop,
   Ie as snapToGrid,
-  eo as springConfig,
+  oo as springConfig,
   U as startHotInteraction,
   l as syncThemeTokenOverrides,
   R as useCommand,
-  uo as useCommandContributions,
+  xo as useCommandContributions,
   O as useComponentContextFactory,
   A as useComponentRegistry,
   Ce as useCurrentWidgetId,
-  co as useDebounce,
+  Co as useDebounce,
   V as useDeck,
-  yo as useDeckDrag,
+  vo as useDeckDrag,
   q as useFileBrowserDrag,
-  Fo as useFileBrowserDropTarget,
-  ko as useFileBrowserItemDrag,
+  ko as useFileBrowserDropTarget,
+  ho as useFileBrowserItemDrag,
   _ as useFloeConfig,
-  Po as useKeybind,
+  Ro as useKeybind,
   $ as useLayout,
-  Do as useMediaQuery,
+  Io as useMediaQuery,
   ie as useNotification,
   E as useOptionalComponentRegistry,
-  So as usePersisted,
-  Oo as useResizeObserver,
+  bo as usePersisted,
+  Ao as useResizeObserver,
   w as useResolvedFloeConfig,
   me as useTheme,
   fe as useViewActivation,