@floegence/floe-webapp-core 0.77.0 → 0.77.2

package/dist/components/layout/MobileTabBar.d.ts

@@ -1,5 +1,6 @@
 import { type Component } from 'solid-js';
-export interface MobileTabBarItem {
+import type { ActivityBarItem } from './ActivityBar';
+export interface MobileTabBarItem extends Pick<ActivityBarItem, 'buttonRef' | 'ariaExpanded' | 'ariaControls' | 'ariaHasPopup'> {
     id: string;
     icon: Component<{
         class?: string;

package/dist/components/layout/MobileTabBar.js

@@ -1,160 +1,168 @@
-import { insert as c, createComponent as d, effect as $, className as v, setAttribute as A, template as b, Dynamic as W, memo as M, use as R, delegateEvents as z } from "solid-js/web";
-import { createSignal as L, onMount as D, onCleanup as E, Show as S, For as j } from "solid-js";
-import { cn as g } from "../../utils/cn.js";
-import { deferNonBlocking as _ } from "../../utils/defer.js";
-var q = /* @__PURE__ */ b('<div class="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-background to-transparent z-10 pointer-events-none">'), B = /* @__PURE__ */ b('<div class="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent z-10 pointer-events-none">'), K = /* @__PURE__ */ b('<nav data-floe-shell-slot=mobile-tab-bar style=border-top-color:var(--bottom-bar-border)><div class="relative h-14"><div class="h-full flex items-center overflow-x-auto scrollbar-hide snap-x snap-mandatory"role=tablist aria-orientation=horizontal style=-webkit-overflow-scrolling:touch>'), N = /* @__PURE__ */ b("<span>"), T = /* @__PURE__ */ b('<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-primary rounded-t">'), H = /* @__PURE__ */ b("<button type=button role=tab><div></div><span>");
-function P(e) {
-  let i;
-  const [a, u] = L(!1), [h, t] = L(!1);
-  let n = null;
-  const s = () => {
-    i && (u(i.scrollLeft > 0), t(i.scrollLeft < i.scrollWidth - i.clientWidth - 1));
-  }, x = () => {
-    if (n === null) {
+import { insert as m, createComponent as v, effect as L, className as w, setAttribute as f, template as x, use as E, Dynamic as _, memo as z, delegateEvents as D } from "solid-js/web";
+import { createSignal as $, onMount as F, onCleanup as W, Show as S, For as j } from "solid-js";
+import { cn as y } from "../../utils/cn.js";
+import { deferNonBlocking as R } from "../../utils/defer.js";
+var q = /* @__PURE__ */ x('<div class="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-background to-transparent z-10 pointer-events-none">'), B = /* @__PURE__ */ x('<div class="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent z-10 pointer-events-none">'), H = /* @__PURE__ */ x('<nav data-floe-shell-slot=mobile-tab-bar style=border-top-color:var(--bottom-bar-border)><div class="relative h-14"><div class="h-full flex items-center overflow-x-auto scrollbar-hide snap-x snap-mandatory"role=tablist aria-orientation=horizontal style=-webkit-overflow-scrolling:touch>'), K = /* @__PURE__ */ x("<span>"), N = /* @__PURE__ */ x('<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-primary rounded-t">'), T = /* @__PURE__ */ x("<button type=button role=tab><div></div><span>");
+function O(e) {
+  let l;
+  const [I, b] = $(!1), [n, h] = $(!1);
+  let c = null;
+  const g = () => {
+    l && (b(l.scrollLeft > 0), h(l.scrollLeft < l.scrollWidth - l.clientWidth - 1));
+  }, t = () => {
+    if (c === null) {
       if (typeof requestAnimationFrame > "u") {
-        s();
+        g();
         return;
       }
-      n = requestAnimationFrame(() => {
-        n = null, s();
+      c = requestAnimationFrame(() => {
+        c = null, g();
       });
     }
-  }, k = () => e.items, w = (r) => {
-    const l = k()[r];
-    if (l) {
-      if (l.onClick) {
-        _(() => l.onClick());
+  }, o = () => e.items, C = (a) => {
+    const i = o()[a];
+    if (i) {
+      if (i.onClick) {
+        R(() => i.onClick());
         return;
       }
-      e.onSelect(l.id);
+      e.onSelect(i.id);
     }
   };
-  return D(() => {
-    s();
-    const r = e.items.findIndex((l) => l.id === e.activeId);
-    if (r > 0 && i) {
-      const l = i.scrollWidth / e.items.length;
-      i.scrollLeft = Math.max(0, l * r - i.clientWidth / 2 + l / 2);
+  return F(() => {
+    g();
+    const a = e.items.findIndex((i) => i.id === e.activeId);
+    if (a > 0 && l) {
+      const i = l.scrollWidth / e.items.length;
+      l.scrollLeft = Math.max(0, i * a - l.clientWidth / 2 + i / 2);
     }
-  }), E(() => {
-    n !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(n), n = null);
+  }), W(() => {
+    c !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(c), c = null);
   }), (() => {
-    var r = K(), l = r.firstChild, m = l.firstChild;
-    c(l, d(S, {
+    var a = H(), i = a.firstChild, d = i.firstChild;
+    m(i, v(S, {
       get when() {
-        return a();
+        return I();
       },
       get children() {
         return q();
       }
-    }), m), c(l, d(S, {
+    }), d), m(i, v(S, {
       get when() {
-        return h();
+        return n();
       },
       get children() {
         return B();
       }
-    }), m), m.addEventListener("scroll", x);
-    var I = i;
-    return typeof I == "function" ? R(I, m) : i = m, c(m, d(j, {
+    }), d), d.addEventListener("scroll", t);
+    var k = l;
+    return typeof k == "function" ? E(k, d) : l = d, m(d, v(j, {
       get each() {
         return e.items;
       },
-      children: (o, y) => d(U, {
-        item: o,
+      children: (r, s) => v(P, {
+        item: r,
         get isActive() {
-          return e.activeId === o.id;
+          return e.activeId === r.id;
         },
         get index() {
-          return y();
+          return s();
         },
         get itemCount() {
           return e.items.length;
         },
         onClick: () => {
           "vibrate" in navigator && navigator.vibrate(10);
-          const f = o.onClick, C = e.onSelect, F = o.id;
-          o.onClick ? _(() => f()) : C(F);
+          const u = r.onClick, A = e.onSelect, M = r.id;
+          r.onClick ? R(() => u()) : A(M);
         },
-        onKeyboardSelect: (f) => w(f)
+        onKeyboardSelect: (u) => C(u)
       })
-    })), $((o) => {
-      var y = e.hidden, f = g(
+    })), L((r) => {
+      var s = e.hidden, u = y(
         // Same safe-area rule as TopBar: keep the visual bar height stable, and
         // add safe-area padding on an outer wrapper (avoid squeezing content).
         "relative shrink-0 bg-background border-t border-border safe-bottom safe-left safe-right",
         e.class
-      ), C = e.ariaLabel;
-      return y !== o.e && (r.hidden = o.e = y), f !== o.t && v(r, o.t = f), C !== o.a && A(r, "aria-label", o.a = C), o;
+      ), A = e.ariaLabel;
+      return s !== r.e && (a.hidden = r.e = s), u !== r.t && w(a, r.t = u), A !== r.a && f(a, "aria-label", r.a = A), r;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
-    }), r;
+    }), a;
   })();
 }
-function U(e) {
-  const i = () => typeof e.item.badge == "function" ? e.item.badge() : e.item.badge;
+function P(e) {
+  let l;
+  const I = () => typeof e.item.ariaExpanded == "function" ? e.item.ariaExpanded() : e.item.ariaExpanded;
+  F(() => e.item.buttonRef?.(l ?? null)), W(() => e.item.buttonRef?.(null));
+  const b = () => typeof e.item.badge == "function" ? e.item.badge() : e.item.badge;
   return (() => {
-    var a = H(), u = a.firstChild, h = u.nextSibling;
-    return a.$$keydown = (t) => {
-      let n = null;
+    var n = T(), h = n.firstChild, c = h.nextSibling;
+    n.$$keydown = (t) => {
+      let o = null;
       switch (t.key) {
         case "ArrowRight":
         case "ArrowDown":
-          n = (e.index + 1) % e.itemCount;
+          o = (e.index + 1) % e.itemCount;
           break;
         case "ArrowLeft":
         case "ArrowUp":
-          n = (e.index - 1 + e.itemCount) % e.itemCount;
+          o = (e.index - 1 + e.itemCount) % e.itemCount;
           break;
         case "Home":
-          n = 0;
+          o = 0;
           break;
         case "End":
-          n = e.itemCount - 1;
+          o = e.itemCount - 1;
           break;
         default:
           return;
       }
-      t.preventDefault(), e.onKeyboardSelect(n);
-    }, a.$$click = () => e.onClick(), c(u, d(W, {
+      t.preventDefault(), e.onKeyboardSelect(o);
+    }, n.$$click = () => e.onClick();
+    var g = l;
+    return typeof g == "function" ? E(g, n) : l = n, m(h, v(_, {
       get component() {
         return e.item.icon;
       },
       class: "w-6 h-6"
-    }), null), c(u, d(S, {
+    }), null), m(h, v(S, {
       get when() {
-        return i();
+        return b();
       },
       get children() {
-        var t = N();
-        return c(t, (() => {
-          var n = M(() => typeof i() == "number" && i() > 99);
-          return () => n() ? "99+" : i();
-        })()), $(() => v(t, g("absolute -top-1 -right-2 min-w-4 h-4 px-1", "flex items-center justify-center", "text-[10px] font-medium rounded-full", "bg-primary text-primary-foreground"))), t;
+        var t = K();
+        return m(t, (() => {
+          var o = z(() => typeof b() == "number" && b() > 99);
+          return () => o() ? "99+" : b();
+        })()), L(() => w(t, y("absolute -top-1 -right-2 min-w-4 h-4 px-1", "flex items-center justify-center", "text-[10px] font-medium rounded-full", "bg-primary text-primary-foreground"))), t;
       }
-    }), null), c(h, () => e.item.label), c(a, d(S, {
+    }), null), m(c, () => e.item.label), m(n, v(S, {
       get when() {
         return e.isActive;
       },
       get children() {
-        return T();
+        return N();
       }
-    }), null), $((t) => {
-      var n = g("relative flex-shrink-0 flex flex-col items-center justify-center", "min-w-16 h-full px-4 snap-center", "transition-[color] duration-150", "focus:outline-none focus-visible:bg-muted", e.isActive ? "text-primary" : "text-muted-foreground active:text-foreground"), s = e.item.label, x = e.isActive, k = e.isActive ? 0 : -1, w = g("relative transition-transform duration-150", e.isActive && "scale-110"), r = g("mt-1 text-[10px] font-medium truncate max-w-full", e.isActive && "font-semibold");
-      return n !== t.e && v(a, t.e = n), s !== t.t && A(a, "aria-label", t.t = s), x !== t.a && A(a, "aria-selected", t.a = x), k !== t.o && A(a, "tabindex", t.o = k), w !== t.i && v(u, t.i = w), r !== t.n && v(h, t.n = r), t;
+    }), null), L((t) => {
+      var o = y("relative flex-shrink-0 flex flex-col items-center justify-center", "min-w-16 h-full px-4 snap-center", "transition-[color] duration-150", "focus:outline-none focus-visible:bg-muted", e.isActive ? "text-primary" : "text-muted-foreground active:text-foreground"), C = e.item.label, a = e.isActive, i = I(), d = e.item.ariaControls, k = e.item.ariaHasPopup, r = e.isActive ? 0 : -1, s = y("relative transition-transform duration-150", e.isActive && "scale-110"), u = y("mt-1 text-[10px] font-medium truncate max-w-full", e.isActive && "font-semibold");
+      return o !== t.e && w(n, t.e = o), C !== t.t && f(n, "aria-label", t.t = C), a !== t.a && f(n, "aria-selected", t.a = a), i !== t.o && f(n, "aria-expanded", t.o = i), d !== t.i && f(n, "aria-controls", t.i = d), k !== t.n && f(n, "aria-haspopup", t.n = k), r !== t.s && f(n, "tabindex", t.s = r), s !== t.h && w(h, t.h = s), u !== t.r && w(c, t.r = u), t;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
       i: void 0,
-      n: void 0
-    }), a;
+      n: void 0,
+      s: void 0,
+      h: void 0,
+      r: void 0
+    }), n;
   })();
 }
-z(["click", "keydown"]);
+D(["click", "keydown"]);
 export {
-  P as MobileTabBar
+  O as MobileTabBar
 };

package/dist/remote-pointer.js

@@ -1,5 +1,5 @@
 function U(a) {
-  const { surface: l } = a, T = l.ownerDocument, c = T.defaultView;
+  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) => ({
@@ -43,7 +43,7 @@ function U(a) {
       y = i;
     }
   }
-  function I(e, t, n, i, s = 1) {
+  function T(e, t, n, i, s = 1) {
     const m = h.get(i);
     if (!e && !m) return;
     e || h.delete(i);
@@ -55,14 +55,14 @@ function U(a) {
     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));
+    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), I(!1, n.command, n.target, t);
+      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);
   }
@@ -79,7 +79,7 @@ function U(a) {
     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 (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;
@@ -113,9 +113,9 @@ function U(a) {
       }
       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));
+      K(n, t) && T(!0, n, t, e.button, Math.max(1, e.detail, i ? 2 : 1));
     }
-    B(e.pointerId), e.preventDefault();
+    B(e.pointerId), e.pointerType === "touch" && e.preventDefault();
   }), d(l, "pointermove", (e) => {
     if (e.pointerType === "touch") {
       _(e);
@@ -132,7 +132,7 @@ function U(a) {
       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));
+        m !== h.has(i) && (k(), T(m, n, t, i));
       }
     }
     E({ ...n, kind: "move" }, t);
@@ -146,12 +146,12 @@ function U(a) {
         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));
+        } 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()]) I(!1, v(e), t.target, i, n && "clicks" in n ? n.clicks : 1);
+        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);
@@ -159,9 +159,9 @@ function U(a) {
     r(), S(e.pointerId);
   }), d(l, "lostpointercapture", (e) => {
     L.has(e.pointerId) && (r(), S(e.pointerId));
-  }), d(T, "pointerup", (e) => {
+  }), d(I, "pointerup", (e) => {
     o?.id !== e.pointerId && S(e.pointerId);
-  }), d(T, "pointercancel", (e) => S(e.pointerId)), d(T, "pointerdown", (e) => {
+  }), 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);
@@ -175,8 +175,8 @@ function U(a) {
       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();
+  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(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.77.0",
+  "version": "0.77.2",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",