@floegence/floe-webapp-core 0.76.0 → 0.77.1

package/dist/remote-pointer.css

@@ -0,0 +1,16 @@
+/* Apply only to remote pixels, never local chrome or the editable IME element. */
+[data-floe-remote-pointer] {
+  touch-action: pinch-zoom;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+}
+.floe-remote-pointer-hold {
+  position: fixed;
+  width: 28px;
+  height: 28px;
+  margin: -14px;
+  border: 2px solid var(--ring, #808080);
+  border-radius: 50%;
+  pointer-events: none;
+}

package/dist/remote-pointer.d.ts

@@ -0,0 +1,47 @@
+/** Viewport CSS coordinates and browser modifiers, independent of image density. */
+export interface RemotePointerPosition {
+    clientX: number;
+    clientY: number;
+    shiftKey: boolean;
+    ctrlKey: boolean;
+    altKey: boolean;
+    metaKey: boolean;
+    pointerType: string;
+}
+export type RemotePointerCommand = RemotePointerPosition & ({
+    kind: 'move';
+} | {
+    kind: 'down' | 'up';
+    button: number;
+    clicks: number;
+} | {
+    kind: 'scroll';
+    dx: number;
+    dy: number;
+});
+export interface RemotePointerOptions<T> {
+    /** Stable owner; resolveTarget excludes local chrome and unpainted content. */
+    surface: HTMLElement;
+    resolveTarget(event: MouseEvent): T | null;
+    isTargetValid(target: T): boolean;
+    sendPointer(command: RemotePointerCommand, target: T): void | boolean;
+    /** Clear platform scroll remainder; never release keyboard input here. */
+    release(target: T): void;
+    /** Called before a deliberate button press, never for touch scrolling. */
+    onActivate?(position: RemotePointerPosition, target: T): void;
+    onHoldChange?(position: (RemotePointerPosition & {
+        target: T;
+    }) | null): void;
+}
+export interface RemotePointerController {
+    /** Preserve ordering before the consumer delivers a later key/text command. */
+    flush(): void;
+    reset(): void;
+    dispose(): void;
+}
+/**
+ * Own remote content pointer events once. Mark its content elements with
+ * data-floe-remote-pointer and load remote-pointer.css before interaction.
+ * Keyboard, local window decorations and transport remain separate owners.
+ */
+export declare function createRemotePointer<T>(options: RemotePointerOptions<T>): RemotePointerController;

package/dist/remote-pointer.js

@@ -0,0 +1,198 @@
+function U(a) {
+  const { surface: l } = a, I = l.ownerDocument, c = I.defaultView;
+  if (!c) throw new Error("Remote pointer requires an attached document");
+  let o = null, f = null, u = null, p = null, y = 0, z = 0, M = !1, x = !1, D = 0, b = !1;
+  const g = /* @__PURE__ */ new Set(), L = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Map(), C = [], w = (e) => !x && a.isTargetValid(e), O = (e, t) => Math.hypot(e.clientX - t.clientX, e.clientY - t.clientY), v = (e) => ({
+    clientX: e.clientX,
+    clientY: e.clientY,
+    shiftKey: e.shiftKey,
+    ctrlKey: e.ctrlKey,
+    altKey: e.altKey,
+    metaKey: e.metaKey,
+    pointerType: "pointerType" in e ? String(e.pointerType) : "mouse"
+  });
+  function d(e, t, n, i = !1) {
+    const s = n;
+    e.addEventListener(t, s, { capture: i, passive: !1 }), C.push(() => e.removeEventListener(t, s, i));
+  }
+  function P(e, t) {
+    const n = w(t) && a.sendPointer(e, t) !== !1;
+    if (n && e.kind === "move")
+      for (const i of h.values()) i.target === t && (i.command = { ...i.command, ...v(e) });
+    return n;
+  }
+  function H() {
+    c.clearTimeout(z), z = 0, M && (M = !1, a.onHoldChange?.(null));
+  }
+  function X(e) {
+    L.delete(e), l.hasPointerCapture?.(e) && l.releasePointerCapture(e);
+  }
+  function B(e) {
+    l.setPointerCapture?.(e), L.add(e);
+  }
+  function k() {
+    y && c.cancelAnimationFrame(y), y = 0;
+    const e = f;
+    f = null, e && !P(e.command, e.target) && r();
+  }
+  function E(e, t) {
+    if (f && (f.target !== t || f.command.kind !== e.kind) && k(), !!w(t) && (e.kind === "scroll" && f?.command.kind === "scroll" && (e = { ...e, dx: f.command.dx + e.dx, dy: f.command.dy + e.dy }), f = { target: t, command: e }, !y)) {
+      const n = D, i = c.requestAnimationFrame(() => {
+        n === D && y === i && k();
+      });
+      y = i;
+    }
+  }
+  function T(e, t, n, i, s = 1) {
+    const m = h.get(i);
+    if (!e && !m) return;
+    e || h.delete(i);
+    const A = { ...t, kind: e ? "down" : "up", button: i, clicks: s };
+    P(A, n) && e && h.set(i, { target: n, command: A });
+  }
+  function K(e, t) {
+    const n = D;
+    return a.onActivate?.(e, t), n === D && w(t);
+  }
+  function Y(e, t, n, i = 1) {
+    K(e, t) && (T(!0, e, t, n, i), T(!1, e, t, n, i));
+  }
+  function r() {
+    D++, H(), y && c.cancelAnimationFrame(y), y = 0;
+    const e = /* @__PURE__ */ new Set();
+    o && e.add(o.target), f && e.add(f.target), u !== null && e.add(u), f = null, o = null, u = null, p = null, b = g.size > 0;
+    for (const [t, n] of h)
+      e.add(n.target), T(!1, n.command, n.target, t);
+    for (const t of e) a.release(t);
+    for (const t of [...L]) X(t);
+  }
+  function S(e) {
+    g.delete(e), X(e), g.size || (b = !1);
+  }
+  function _(e) {
+    const t = o;
+    if (!t || t.id !== e.pointerId) return;
+    if (!w(t.target)) {
+      r();
+      return;
+    }
+    const n = v(e);
+    if ((t.mode === "pending" || t.mode === "hold") && O(t.origin, n) > 8) {
+      const i = t.mode === "hold";
+      if (H(), p = null, t.mode = i ? "drag" : "scroll", i && K(t.origin, t.target) && T(!0, t.origin, t.target, 0), o !== t) return;
+    }
+    if (t.mode === "scroll") {
+      const i = t.last, s = i.clientX - n.clientX, m = i.clientY - n.clientY;
+      (s || m) && E({ ...t.origin, kind: "scroll", dx: s, dy: m }, t.target), t.last = n;
+    } else t.mode === "drag" && (E({ ...n, kind: "move" }, t.target), t.last = n);
+  }
+  d(l, "pointerdown", (e) => {
+    const t = a.resolveTarget(e);
+    if (t === null || !w(t)) return;
+    const n = v(e);
+    if (e.pointerType === "touch") {
+      if (g.add(e.pointerId), g.size > 1 || b) {
+        r();
+        return;
+      }
+      (o || h.size) && r(), k(), u !== null && (a.release(u), u = null), b = !1, o = { id: e.pointerId, target: t, origin: n, last: n, mode: "pending" };
+      const i = o;
+      z = c.setTimeout(() => {
+        if (z = 0, o === i) {
+          if (!w(t)) {
+            r();
+            return;
+          }
+          i.mode = "hold", M = !0, a.onHoldChange?.({ ...n, target: t });
+        }
+      }, 450);
+    } else {
+      if (g.size) {
+        r();
+        return;
+      }
+      o && (o.id !== e.pointerId || o.target !== t) && r(), k(), u !== null && (a.release(u), u = null), o = { id: e.pointerId, target: t, origin: n, last: n, mode: "direct" };
+      const i = e.button === 0 && p?.target === t && c.performance.now() - p.time <= 350 && O(p.position, n) <= 16;
+      K(n, t) && T(!0, n, t, e.button, Math.max(1, e.detail, i ? 2 : 1));
+    }
+    B(e.pointerId), e.pointerType === "touch" && e.preventDefault();
+  }), d(l, "pointermove", (e) => {
+    if (e.pointerType === "touch") {
+      _(e);
+      return;
+    }
+    if (b || g.size) return;
+    const t = o?.target ?? a.resolveTarget(e);
+    if (t === null || !w(t)) {
+      o && r();
+      return;
+    }
+    const n = v(e);
+    if (o) {
+      o.last = n;
+      for (const [i, s] of [[0, 1], [1, 4], [2, 2], [3, 8], [4, 16]]) {
+        const m = !!(e.buttons & s);
+        m !== h.has(i) && (k(), T(m, n, t, i));
+      }
+    }
+    E({ ...n, kind: "move" }, t);
+  }), d(l, "pointerup", (e) => {
+    const t = o;
+    if (t?.id === e.pointerId && !b)
+      if (!w(t.target)) r();
+      else if (e.pointerType === "touch") {
+        _(e), H();
+        const n = v(e);
+        if (t.mode === "pending") {
+          const i = c.performance.now(), s = p?.target === t.target && i - p.time <= 350 && O(p.position, n) <= 16;
+          Y(n, t.target, 0, s ? 2 : 1), p = s ? null : { target: t.target, position: n, time: i };
+        } else t.mode === "hold" ? (p = null, Y(n, t.target, 2)) : (k(), t.mode === "drag" && T(!1, n, t.target, 0));
+        a.release(t.target), o = null;
+      } else {
+        f?.command.kind === "move" && (f.command = { ...v(e), kind: "move" }), k();
+        const n = h.get(e.button)?.command;
+        for (const i of [...h.keys()]) T(!1, v(e), t.target, i, n && "clicks" in n ? n.clicks : 1);
+        p = e.button === 0 && n && "clicks" in n && n.clicks === 1 && O(t.origin, v(e)) <= 8 ? { target: t.target, position: v(e), time: c.performance.now() } : null, h.size || (o = null);
+      }
+    (!o || o.id !== e.pointerId) && S(e.pointerId);
+  }), d(l, "pointercancel", (e) => {
+    r(), S(e.pointerId);
+  }), d(l, "lostpointercapture", (e) => {
+    L.has(e.pointerId) && (r(), S(e.pointerId));
+  }), d(I, "pointerup", (e) => {
+    o?.id !== e.pointerId && S(e.pointerId);
+  }), d(I, "pointercancel", (e) => S(e.pointerId)), d(I, "pointerdown", (e) => {
+    o && (e.pointerType === "touch" && e.pointerId !== o.id ? (g.add(e.pointerId), r()) : l.contains(e.target) || r());
+  }, !0), d(l, "wheel", (e) => {
+    const t = a.resolveTarget(e);
+    if (t === null || !w(t) || (e.preventDefault(), o || g.size)) return;
+    p = null, u !== null && u !== t && (k(), a.release(u)), u = t;
+    const n = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? l.clientWidth || c.innerWidth : 1, i = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? l.clientHeight || c.innerHeight : 1, s = e.deltaX * n, m = e.deltaY * i;
+    Number.isFinite(s) && Number.isFinite(m) && (s || m) && E({ ...v(e), kind: "scroll", dx: s, dy: m }, t);
+  });
+  for (const e of ["mousedown", "mouseup", "click", "dblclick", "contextmenu", "dragstart", "selectstart"])
+    d(l, e, (t) => {
+      a.resolveTarget(t) !== null && t.preventDefault();
+    });
+  for (const e of ["blur", "pagehide", "resize", "orientationchange"]) d(c, e, r);
+  if (d(I, "visibilitychange", () => {
+    I.hidden && r();
+  }), d(c, "scroll", r, !0), c.visualViewport && (d(c.visualViewport, "resize", r), d(c.visualViewport, "scroll", r)), typeof ResizeObserver < "u") {
+    let e = `${l.clientWidth}:${l.clientHeight}`;
+    const t = new ResizeObserver(() => {
+      const n = `${l.clientWidth}:${l.clientHeight}`;
+      n !== e && (e = n, r());
+    });
+    t.observe(l), C.push(() => t.disconnect());
+  }
+  return { flush: k, reset: r, dispose() {
+    if (!x) {
+      r(), x = !0;
+      for (const e of C) e();
+      g.clear();
+    }
+  } };
+}
+export {
+  U as createRemotePointer
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.76.0",
+  "version": "0.77.1",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -125,7 +125,12 @@
     "./viewport": {
       "types": "./dist/viewport.d.ts",
       "import": "./dist/viewport.js"
-    }
+    },
+    "./remote-pointer": {
+      "types": "./dist/remote-pointer.d.ts",
+      "import": "./dist/remote-pointer.js"
+    },
+    "./remote-pointer.css": "./dist/remote-pointer.css"
   },
   "files": [
     "dist",