@floegence/floe-webapp-core 0.75.0 → 0.77.0

package/dist/components/ui/Settings.js

@@ -1,25 +1,34 @@
-import { insert as n, createComponent as s, effect as v, className as b, setAttribute as h, spread as f, mergeProps as $, template as c } from "solid-js/web";
-import { Show as d, splitProps as w, For as m } from "solid-js";
+import { insert as e, createComponent as s, effect as v, className as b, setAttribute as h, spread as f, mergeProps as $, template as o } from "solid-js/web";
+import { Show as d, children as N, splitProps as w, For as m } from "solid-js";
 import { cn as u } from "../../utils/cn.js";
-var x = /* @__PURE__ */ c("<div><aside class=floe-settings-layout__sidebar></aside><div class=floe-settings-layout__mobile></div><div class=floe-settings-layout__content>"), k = /* @__PURE__ */ c("<div class=floe-settings-navigation__search>"), N = /* @__PURE__ */ c("<nav class=floe-settings-navigation><div class=floe-settings-navigation__groups>"), L = /* @__PURE__ */ c("<div class=floe-settings-navigation__group><div class=floe-settings-navigation__label>"), P = /* @__PURE__ */ c("<button><span>"), A = /* @__PURE__ */ c("<h1>"), C = /* @__PURE__ */ c("<p>"), F = /* @__PURE__ */ c("<div class=floe-settings-section__actions>"), R = /* @__PURE__ */ c("<section><header class=floe-settings-section__header><div class=floe-settings-section__heading><div class=floe-settings-section__title></div></div></header><div class=floe-settings-section__body>"), j = /* @__PURE__ */ c("<h2>"), q = /* @__PURE__ */ c("<div>"), z = /* @__PURE__ */ c("<div class=floe-setting-row__control>"), B = /* @__PURE__ */ c("<div class=floe-setting-row__body>"), D = /* @__PURE__ */ c("<div><div class=floe-setting-row__main><div class=floe-setting-row__label><div><div class=floe-setting-row__title>");
-function I(t) {
+var k = /* @__PURE__ */ o("<div class=floe-settings-layout__mobile>"), x = /* @__PURE__ */ o("<div><aside class=floe-settings-layout__sidebar></aside><div class=floe-settings-layout__content>"), A = /* @__PURE__ */ o("<div class=floe-settings-navigation__search>"), L = /* @__PURE__ */ o("<nav class=floe-settings-navigation><div class=floe-settings-navigation__groups>"), P = /* @__PURE__ */ o("<div class=floe-settings-navigation__group><div class=floe-settings-navigation__label>"), F = /* @__PURE__ */ o("<button><span>"), R = /* @__PURE__ */ o("<h1>"), C = /* @__PURE__ */ o("<p>"), j = /* @__PURE__ */ o("<div class=floe-settings-section__actions>"), q = /* @__PURE__ */ o("<section><header class=floe-settings-section__header><div class=floe-settings-section__heading><div class=floe-settings-section__title></div></div></header><div class=floe-settings-section__body>"), z = /* @__PURE__ */ o("<h2>"), B = /* @__PURE__ */ o("<div>"), D = /* @__PURE__ */ o("<div class=floe-setting-row__control>"), E = /* @__PURE__ */ o("<div class=floe-setting-row__body>"), G = /* @__PURE__ */ o("<div><div class=floe-setting-row__main><div class=floe-setting-row__label><div><div class=floe-setting-row__title>");
+function K(t) {
+  const n = N(() => t.mobileNavigation);
   return (() => {
-    var e = x(), o = e.firstChild, i = o.nextSibling, a = i.nextSibling;
-    return n(o, () => t.sidebar), n(i, () => t.mobileNavigation), n(a, () => t.children), v(() => b(e, u("floe-settings-layout", t.class))), e;
+    var c = x(), i = c.firstChild, a = i.nextSibling;
+    return e(i, () => t.sidebar), e(c, s(d, {
+      get when() {
+        return n.toArray().some((g) => g != null && typeof g != "boolean" && g !== "");
+      },
+      get children() {
+        var g = k();
+        return e(g, n), g;
+      }
+    }), a), e(a, () => t.children), v(() => b(c, u("floe-settings-layout", t.class))), c;
   })();
 }
-function J(t) {
+function M(t) {
   return (() => {
-    var e = N(), o = e.firstChild;
-    return n(e, s(d, {
+    var n = L(), c = n.firstChild;
+    return e(n, s(d, {
       get when() {
         return t.search;
       },
       get children() {
-        var i = k();
-        return n(i, () => t.search), i;
+        var i = A();
+        return e(i, () => t.search), i;
       }
-    }), o), n(o, s(d, {
+    }), c), e(c, s(d, {
       get when() {
         return t.groups.some((i) => i.items.length);
       },
@@ -36,14 +45,14 @@ function J(t) {
               return i.items.length;
             },
             get children() {
-              var a = L(), _ = a.firstChild;
-              return n(_, () => i.label), n(a, s(m, {
+              var a = P(), g = a.firstChild;
+              return e(g, () => i.label), e(a, s(m, {
                 get each() {
                   return i.items;
                 },
                 children: (l) => (() => {
-                  var g = P(), r = g.firstChild;
-                  return f(g, $(() => l.attributes, {
+                  var _ = F(), r = _.firstChild;
+                  return f(_, $(() => l.attributes, {
                     type: "button",
                     get class() {
                       return u("floe-settings-navigation__item", l.attributes?.class);
@@ -52,132 +61,132 @@ function J(t) {
                       return t.value === l.id ? "page" : void 0;
                     },
                     onClick: () => t.onChange(l.id)
-                  }), !1, !0), n(g, s(d, {
+                  }), !1, !0), e(_, s(d, {
                     get when() {
                       return l.icon;
                     },
-                    children: (S) => {
-                      const y = S();
-                      return s(y, {
+                    children: (y) => {
+                      const S = y();
+                      return s(S, {
                         class: "floe-settings-navigation__icon"
                       });
                     }
-                  }), r), n(r, () => l.label), g;
+                  }), r), e(r, () => l.label), _;
                 })()
               }), null), v(() => h(a, "data-settings-group", i.id)), a;
             }
           })
         });
       }
-    })), v(() => h(e, "aria-label", t.label)), e;
+    })), v(() => h(n, "aria-label", t.label)), n;
   })();
 }
-function K(t) {
-  const [e, o] = w(t, ["title", "description", "badge", "actions", "variant", "class", "children"]);
+function O(t) {
+  const [n, c] = w(t, ["title", "description", "badge", "actions", "variant", "class", "children"]);
   return (() => {
-    var i = R(), a = i.firstChild, _ = a.firstChild, l = _.firstChild, g = a.nextSibling;
-    return f(i, $(o, {
+    var i = q(), a = i.firstChild, g = a.firstChild, l = g.firstChild, _ = a.nextSibling;
+    return f(i, $(c, {
       get class() {
-        return u("floe-settings-section", e.class);
+        return u("floe-settings-section", n.class);
       },
       get "data-settings-variant"() {
-        return e.variant ?? "section";
+        return n.variant ?? "section";
       }
-    }), !1, !0), n(l, s(d, {
+    }), !1, !0), e(l, s(d, {
       get when() {
-        return e.variant === "page";
+        return n.variant === "page";
       },
       get fallback() {
         return (() => {
-          var r = j();
-          return n(r, () => e.title), r;
+          var r = z();
+          return e(r, () => n.title), r;
         })();
       },
       get children() {
-        var r = A();
-        return n(r, () => e.title), r;
+        var r = R();
+        return e(r, () => n.title), r;
       }
-    }), null), n(l, () => e.badge, null), n(_, s(d, {
+    }), null), e(l, () => n.badge, null), e(g, s(d, {
       get when() {
-        return e.description;
+        return n.description;
       },
       get children() {
         var r = C();
-        return n(r, () => e.description), r;
+        return e(r, () => n.description), r;
       }
-    }), null), n(a, s(d, {
+    }), null), e(a, s(d, {
       get when() {
-        return e.actions;
+        return n.actions;
       },
       get children() {
-        var r = F();
-        return n(r, () => e.actions), r;
+        var r = j();
+        return e(r, () => n.actions), r;
       }
-    }), null), n(g, () => e.children), i;
+    }), null), e(_, () => n.children), i;
   })();
 }
-function M(t) {
-  const [e, o] = w(t, ["class", "children"]);
+function Q(t) {
+  const [n, c] = w(t, ["class", "children"]);
   return (() => {
-    var i = q();
-    return f(i, $(o, {
+    var i = B();
+    return f(i, $(c, {
       get class() {
-        return u("floe-settings-list", e.class);
+        return u("floe-settings-list", n.class);
       },
       "data-floe-surface": "card"
-    }), !1, !0), n(i, () => e.children), i;
+    }), !1, !0), e(i, () => n.children), i;
   })();
 }
-function O(t) {
+function T(t) {
   return (() => {
-    var e = D(), o = e.firstChild, i = o.firstChild, a = i.firstChild, _ = a.firstChild;
-    return n(i, s(d, {
+    var n = G(), c = n.firstChild, i = c.firstChild, a = i.firstChild, g = a.firstChild;
+    return e(i, s(d, {
       get when() {
         return t.icon;
       },
       children: (l) => {
-        const g = l();
-        return s(g, {
+        const _ = l();
+        return s(_, {
           class: "floe-setting-row__icon"
         });
       }
-    }), a), n(_, () => t.title), n(a, s(d, {
+    }), a), e(g, () => t.title), e(a, s(d, {
       get when() {
         return t.description;
       },
       get children() {
         var l = C();
-        return n(l, () => t.description), l;
+        return e(l, () => t.description), l;
       }
-    }), null), n(o, s(d, {
+    }), null), e(c, s(d, {
       get when() {
         return t.control;
       },
       get children() {
-        var l = z();
-        return n(l, () => t.control), l;
+        var l = D();
+        return e(l, () => t.control), l;
       }
-    }), null), n(e, s(d, {
+    }), null), e(n, s(d, {
       get when() {
         return t.children;
       },
       get children() {
-        var l = B();
-        return n(l, () => t.children), l;
+        var l = E();
+        return e(l, () => t.children), l;
       }
     }), null), v((l) => {
-      var g = u("floe-setting-row", t.class), r = t.tone ?? "default";
-      return g !== l.e && b(e, l.e = g), r !== l.t && h(e, "data-tone", l.t = r), l;
+      var _ = u("floe-setting-row", t.class), r = t.tone ?? "default";
+      return _ !== l.e && b(n, l.e = _), r !== l.t && h(n, "data-tone", l.t = r), l;
     }, {
       e: void 0,
       t: void 0
-    }), e;
+    }), n;
   })();
 }
 export {
-  O as SettingRow,
-  I as SettingsLayout,
-  M as SettingsList,
-  J as SettingsNavigation,
-  K as SettingsSection
+  T as SettingRow,
+  K as SettingsLayout,
+  Q as SettingsList,
+  M as SettingsNavigation,
+  O as SettingsSection
 };

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, T = l.ownerDocument, c = T.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 I(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) && (I(!0, e, t, n, i), I(!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), I(!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) && I(!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) && I(!0, n, t, e.button, Math.max(1, e.detail, i ? 2 : 1));
+    }
+    B(e.pointerId), 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(), I(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" && I(!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()]) I(!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(T, "pointerup", (e) => {
+    o?.id !== e.pointerId && S(e.pointerId);
+  }), d(T, "pointercancel", (e) => S(e.pointerId)), d(T, "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(T, "visibilitychange", () => {
+    T.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
+};