@floegence/floe-webapp-core 0.36.8 → 0.36.10

package/dist/components/deck/WidgetResizeHandle.js

@@ -1,12 +1,11 @@
-import { effect as L, className as B, setAttribute as U, template as _, use as N, delegateEvents as O } from "solid-js/web";
-import { createSignal as j, onCleanup as J } from "solid-js";
-import { cn as K } from "../../utils/cn.js";
-import { useDeck as Q } from "../../context/DeckContext.js";
-import { applyResizeDelta as V } from "../../utils/gridLayout.js";
-import { getGridConfigFromElement as Z } from "./DeckGrid.js";
-import { startHotInteraction as ee } from "../../utils/hotInteraction.js";
-var te = /* @__PURE__ */ _("<div style=touch-action:none>");
-const ne = {
+import { effect as m, className as h, setAttribute as p, template as b, use as v, delegateEvents as E } from "solid-js/web";
+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 = {
   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",
@@ -15,7 +14,7 @@ const ne = {
   nw: "top-0 left-0 w-4 h-4 cursor-nwse-resize",
   se: "bottom-0 right-0 w-4 h-4 cursor-nwse-resize",
   sw: "bottom-0 left-0 w-4 h-4 cursor-nesw-resize"
-}, re = {
+}, A = {
   n: "ns-resize",
   s: "ns-resize",
   e: "ew-resize",
@@ -25,85 +24,52 @@ const ne = {
   se: "nwse-resize",
   sw: "nesw-resize"
 };
-function ue(i) {
-  const f = Q(), [m, C] = j(!1);
-  let g, h = null, d = 0, u = 0, y = 0, p = 0, s = 0, R = 0, b = 0, S = 0, l = null, w = null, r = null, A = null, P = 0, F = 0;
-  const I = (e) => {
-    if (!e) {
-      w?.(), w = null;
-      return;
-    }
-    w?.(), w = ee({
-      kind: "resize",
-      cursor: re[i.edge],
-      lockUserSelect: !0
-    });
-  }, E = () => {
-    m() && (l !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(l), l = null), C(!1), h = null, r = null, A = null, I(!1), f.endResize(!0));
-  }, H = () => {
-    if (!r) return;
-    const e = A ?? r.getBoundingClientRect(), t = 48, n = 24, o = s - e.top, a = e.bottom - s;
-    let c = 0;
-    if (o < t ? c = -Math.ceil((t - o) / t * n) : a < t && (c = Math.ceil((t - a) / t * n)), c === 0) return;
-    const z = r.scrollTop, v = Math.max(0, Math.min(z + c, r.scrollHeight - r.clientHeight));
-    v !== z && (r.scrollTop = v);
-  }, Y = () => {
-    if (l !== null || typeof requestAnimationFrame > "u") return;
-    const e = () => {
-      if (!m()) {
-        l = null;
-        return;
-      }
-      D(), l = requestAnimationFrame(e);
-    };
-    l = requestAnimationFrame(e);
-  }, $ = (e) => {
+function G(t) {
+  const s = y(), [u, d] = R(!1);
+  let c, o = null;
+  const a = (e) => {
+    o?.stop({
+      commit: e
+    }), o = null;
+  }, g = (e) => {
     if (e.pointerType === "mouse" && e.button !== 0) return;
     e.preventDefault(), e.stopPropagation();
-    const t = e.currentTarget?.closest(".deck-grid");
-    if (!t) return;
-    h = e.pointerId, d = e.clientX, u = e.clientY, p = d, s = u, R = d, b = u, C(!0), I(!0), r = t, A = t.getBoundingClientRect(), y = t.scrollTop, S = y;
-    const n = window.getComputedStyle(t);
-    P = parseFloat(n.paddingLeft) || 0, F = parseFloat(n.paddingRight) || 0, f.startResize(i.widget.id, i.edge, d, u), g?.setPointerCapture(e.pointerId), Y();
-  }, G = (e) => {
-    !m() || h !== e.pointerId || (p = e.clientX, s = e.clientY, typeof requestAnimationFrame > "u" && D());
-  }, D = () => {
-    if (!r) return;
-    H();
-    const e = r.scrollTop;
-    if (p === R && s === b && e === S) return;
-    R = p, b = s, S = e;
-    const t = p - d, n = s - u + (e - y), {
-      cols: o,
-      rowHeight: a,
-      gap: c
-    } = Z(r), z = r.clientWidth - P - F, v = c * (o - 1), T = (z - v) / o;
-    if (!Number.isFinite(T) || T <= 0) return;
-    const W = a + c, X = Math.round(t / T), q = Math.round(n / W), k = f.getWidgetMinConstraints(i.widget.type), x = V(i.widget.position, i.edge, X, q, k.minColSpan, k.minRowSpan, o);
-    f.updateResize(x);
-  }, M = (e) => {
-    if (h === e.pointerId) {
-      try {
-        g?.releasePointerCapture(e.pointerId);
-      } catch {
+    const n = e.currentTarget?.closest(".deck-grid");
+    if (!n) 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({
+      kind: "resize",
+      widgetId: t.widget.id,
+      gridEl: n,
+      captureEl: c,
+      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);
+        s.updateResize(f);
+      },
+      onEnd: ({
+        commit: i
+      }) => {
+        o = null, d(!1), s.endResize(i);
       }
-      E();
-    }
+    }));
   };
-  return J(() => E()), (() => {
-    var e = te();
-    e.addEventListener("pointercancel", M), e.$$pointerup = M, e.$$pointermove = G, e.$$pointerdown = $;
-    var t = g;
-    return typeof t == "function" ? N(t, e) : g = e, L((n) => {
-      var o = K("absolute z-30", ne[i.edge], "hover:bg-primary/30 transition-colors", m() && "bg-primary/50"), a = i.edge;
-      return o !== n.e && B(e, n.e = o), a !== n.t && U(e, "data-widget-resize-handle", n.t = a), n;
+  return S(() => a(!1)), (() => {
+    var e = M();
+    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;
     }, {
       e: void 0,
       t: void 0
     }), e;
   })();
 }
-O(["pointerdown", "pointermove", "pointerup"]);
+E(["pointerdown"]);
 export {
-  ue as WidgetResizeHandle
+  G as WidgetResizeHandle
 };

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

@@ -0,0 +1,41 @@
+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;
+export declare const DECK_MIN_ROW_HEIGHT = 20;
+export declare const DECK_PADDING = 4;
+export interface DeckGridConfig {
+    cols: number;
+    rowHeight: number;
+    gap: number;
+    defaultRows: number;
+}
+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 declare const DECK_GRID_CONFIG: {
+    readonly cols: 24;
+    readonly defaultRows: 24;
+    readonly gap: 4;
+    readonly rowHeight: 20;
+};
+export declare function getGridConfigFromElement(gridEl: HTMLElement): DeckGridConfig;
+export declare function measureDeckGrid(gridEl: HTMLElement, options?: {
+    paddingLeft?: number;
+    paddingRight?: number;
+}): DeckGridMeasurements | null;
+export declare function measureDeckGridSurface(gridEl: HTMLElement): DeckGridSurfaceMeasurements | null;
+export declare function positionToDeckPixelRect(position: GridPosition, measurements: DeckGridSurfaceMeasurements): DeckGridPixelRect;

package/dist/components/deck/deckGridMetrics.js

@@ -0,0 +1,52 @@
+const l = 24, r = 24, D = 4, _ = 20, h = 4, s = {
+  cols: 24,
+  defaultRows: 24,
+  gap: 4,
+  rowHeight: 20
+};
+function g(t) {
+  return {
+    cols: parseInt(t.dataset.gridCols || String(24), 10),
+    rowHeight: parseFloat(t.dataset.rowHeight || String(20)),
+    gap: parseInt(t.dataset.gap || String(4), 10),
+    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 : {
+    ...o,
+    cellWidth: i,
+    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,
+    paddingLeft: o,
+    paddingRight: a,
+    paddingTop: d,
+    paddingBottom: c
+  } : null;
+}
+function f(t, n) {
+  return {
+    left: n.paddingLeft + t.col * (n.cellWidth + n.gap),
+    top: n.paddingTop + t.row * (n.rowHeight + n.gap),
+    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
+  };
+}
+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
+};

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

@@ -0,0 +1,52 @@
+import { type HotInteractionKind } from '../../utils/hotInteraction';
+export interface DeckPointerSessionSnapshot {
+    pointerId: number;
+    kind: HotInteractionKind;
+    widgetId: string;
+    gridEl: HTMLElement;
+    gridRect: DOMRect;
+    gridPaddingLeft: number;
+    gridPaddingRight: number;
+    startClientX: number;
+    startClientY: number;
+    startScrollTop: number;
+    lastClientX: number;
+    lastClientY: number;
+    lastAppliedClientX: number;
+    lastAppliedClientY: number;
+    lastAppliedScrollTop: number;
+    rafId: number | null;
+    stopHotInteraction: (() => void) | null;
+}
+export interface DeckPointerSessionFrame {
+    snapshot: DeckPointerSessionSnapshot;
+    deltaX: number;
+    deltaY: number;
+    cols: number;
+    rowHeight: number;
+    gap: number;
+    cellWidth: number;
+    cellHeight: number;
+}
+export interface StartDeckPointerSessionOptions {
+    kind: HotInteractionKind;
+    widgetId: string;
+    gridEl: HTMLElement;
+    captureEl?: HTMLElement | null;
+    pointerEvent: PointerEvent;
+    cursor: string;
+    onMove: (frame: DeckPointerSessionFrame) => void;
+    onEnd: (options: {
+        commit: boolean;
+        snapshot: DeckPointerSessionSnapshot;
+    }) => void;
+}
+export interface DeckPointerSessionController {
+    snapshot: () => DeckPointerSessionSnapshot;
+    updatePointer: (event: Pick<PointerEvent, 'pointerId' | 'clientX' | 'clientY'>) => void;
+    stop: (options?: {
+        commit?: boolean;
+        event?: Pick<PointerEvent, 'pointerId' | 'clientX' | 'clientY'>;
+    }) => void;
+}
+export declare function startDeckPointerSession(options: StartDeckPointerSessionOptions): DeckPointerSessionController;

package/dist/components/deck/deckPointerSession.js

@@ -0,0 +1,113 @@
+import { startHotInteraction as X } from "../../utils/hotInteraction.js";
+import { measureDeckGrid as h } from "./deckGridMetrics.js";
+function C(e) {
+  const d = e.lastClientY - e.gridRect.top, t = e.gridRect.bottom - e.lastClientY;
+  let n = 0;
+  if (d < 48 ? n = -Math.ceil((48 - d) / 48 * 24) : t < 48 && (n = Math.ceil((48 - t) / 48 * 24)), n === 0) return !1;
+  const a = e.gridEl.scrollTop, o = Math.max(0, Math.min(a + n, e.gridEl.scrollHeight - e.gridEl.clientHeight));
+  return o === a ? !1 : (e.gridEl.scrollTop = o, !0);
+}
+function v(e) {
+  const i = e.gridEl.scrollTop;
+  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, {
+    paddingLeft: e.gridPaddingLeft,
+    paddingRight: e.gridPaddingRight
+  });
+  return l ? {
+    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
+  } : null;
+}
+function L(e) {
+  const i = e.gridEl.ownerDocument, l = i.defaultView ?? window, d = l.getComputedStyle(e.gridEl), t = {
+    pointerId: e.pointerEvent.pointerId,
+    kind: e.kind,
+    widgetId: e.widgetId,
+    gridEl: e.gridEl,
+    gridRect: e.gridEl.getBoundingClientRect(),
+    gridPaddingLeft: parseFloat(d.paddingLeft) || 0,
+    gridPaddingRight: parseFloat(d.paddingRight) || 0,
+    startClientX: e.pointerEvent.clientX,
+    startClientY: e.pointerEvent.clientY,
+    startScrollTop: e.gridEl.scrollTop,
+    lastClientX: e.pointerEvent.clientX,
+    lastClientY: e.pointerEvent.clientY,
+    lastAppliedClientX: e.pointerEvent.clientX,
+    lastAppliedClientY: e.pointerEvent.clientY,
+    lastAppliedScrollTop: e.gridEl.scrollTop,
+    rafId: null,
+    stopHotInteraction: X({
+      kind: e.kind,
+      cursor: e.cursor,
+      lockUserSelect: !0
+    })
+  };
+  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();
+  }, o = () => {
+    if (!(!n || t.rafId !== null)) {
+      if (typeof l.requestAnimationFrame != "function") {
+        a();
+        return;
+      }
+      t.rafId = l.requestAnimationFrame(a);
+    }
+  }, I = () => {
+    if (!(!e.captureEl || typeof e.captureEl.releasePointerCapture != "function"))
+      try {
+        e.captureEl.releasePointerCapture(t.pointerId);
+      } catch {
+      }
+  }, Y = () => {
+    i.removeEventListener("pointermove", g, !0), i.removeEventListener("pointerup", p, !0), i.removeEventListener("pointercancel", m, !0), e.captureEl?.removeEventListener("lostpointercapture", s);
+  }, u = (r) => {
+    if (!n) return;
+    const c = r?.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) {
+        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
+      });
+    }
+  }, 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 });
+  }, s = () => {
+    u();
+  };
+  if (i.addEventListener("pointermove", g, !0), i.addEventListener("pointerup", p, !0), i.addEventListener("pointercancel", m, !0), e.captureEl?.addEventListener("lostpointercapture", s), e.captureEl && typeof e.captureEl.setPointerCapture == "function")
+    try {
+      e.captureEl.setPointerCapture(t.pointerId);
+    } catch {
+    }
+  return {
+    snapshot: () => t,
+    updatePointer: f,
+    stop: u
+  };
+}
+export {
+  L as startDeckPointerSession
+};

package/dist/context/DeckContext.d.ts

@@ -30,14 +30,18 @@ export interface DragState {
     widgetId: string;
     originalPosition: GridPosition;
     currentPosition: GridPosition;
-    /** Pixel offset for smooth visual following */
-    pixelOffset: {
-        x: number;
-        y: number;
-    };
     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
  */
@@ -73,10 +77,11 @@ 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, pixelOffset: {
-        x: number;
-        y: number;
+    updateDrag: (currentPosition: GridPosition, motion: {
+        deltaX: number;
+        deltaY: number;
     }) => void;
     endDrag: (commit: boolean) => void;
     resizeState: Accessor<ResizeState | null>;