@linktr.ee/messaging-react 1.6.5 → 1.7.0

package/dist/index.js

@@ -1,10 +1,10 @@
-import { jsx as e, jsxs as d, Fragment as oe } from "react/jsx-runtime";
-import D from "classnames";
-import X, { createContext as we, useContext as Ee, useCallback as F, useState as E, useRef as _, useEffect as $ } from "react";
-import { StreamChatService as Ie } from "@linktr.ee/messaging-core";
-import { Chat as ye, useChatContext as Se, ChannelList as Re, Channel as ke, useChannelStateContext as me, Window as Te, MessageList as Pe, MessageInput as De } from "stream-chat-react";
-import { NotePencilIcon as Oe, XIcon as he, ArrowLeftIcon as Me, DotsThreeIcon as Fe, SpinnerGapIcon as ee, SignOutIcon as Ue, ProhibitInsetIcon as ie, FlagIcon as Le, MagnifyingGlassIcon as pe, ChatCircleDotsIcon as ce } from "@phosphor-icons/react";
-const fe = we({
+import we, { jsx as e, jsxs as d, Fragment as de } from "react/jsx-runtime";
+import _ from "classnames";
+import G, { createContext as Oe, useContext as Te, useCallback as M, useState as I, useRef as A, useEffect as $ } from "react";
+import { StreamChatService as je } from "@linktr.ee/messaging-core";
+import { Chat as Ue, useChatContext as Le, ChannelList as Be, Channel as Ae, useChannelStateContext as ye, Window as $e, MessageList as Ge, MessageInput as He } from "stream-chat-react";
+import { NotePencilIcon as qe, XIcon as Ee, ArrowLeftIcon as We, DotsThreeIcon as ze, SpinnerGapIcon as re, SignOutIcon as Ve, ProhibitInsetIcon as fe, FlagIcon as Xe, MagnifyingGlassIcon as Qe, ChatCircleDotsIcon as me } from "@phosphor-icons/react";
+const Ie = Oe({
   service: null,
   client: null,
   isConnected: !1,
@@ -15,221 +15,308 @@ const fe = we({
   refreshConnection: async () => {
   },
   debug: !1
-}), se = () => Ee(fe), ls = ({
+}), le = () => Te(Ie), Is = ({
   children: t,
   user: s,
   serviceConfig: n,
-  apiKey: o,
-  capabilities: i = {},
+  apiKey: l,
+  capabilities: a = {},
   customization: c = {},
-  debug: a = !1
+  debug: i = !1
 }) => {
-  const l = F(
-    (w, ...O) => {
-      a && console.log(`🔥 [MessagingProvider] ${w}`, ...O);
+  const r = M(
+    (y, ...F) => {
+      i && console.log(`🔥 [MessagingProvider] ${y}`, ...F);
     },
-    [a]
+    [i]
   );
-  l("🔄 RENDER START", {
+  r("🔄 RENDER START", {
     userId: s == null ? void 0 : s.id,
-    apiKey: (o == null ? void 0 : o.substring(0, 8)) + "...",
+    apiKey: (l == null ? void 0 : l.substring(0, 8)) + "...",
     serviceConfig: !!n,
-    capabilities: Object.keys(i),
+    capabilities: Object.keys(a),
     customization: Object.keys(c)
   });
-  const [r, b] = E(null), [u, g] = E(null), [m, I] = E(!1), [N, h] = E(!1), [v, S] = E(null), M = _(!1), y = _({
+  const [o, C] = I(null), [u, x] = I(null), [b, h] = I(!1), [f, m] = I(!1), [N, S] = I(null), k = A(!1), E = A({
     userId: s == null ? void 0 : s.id,
-    apiKey: o,
+    apiKey: l,
     serviceConfig: n,
-    capabilities: i,
+    capabilities: a,
     customization: c
-  }), k = _(0);
-  k.current++, l("📊 RENDER INFO", {
-    renderCount: k.current,
-    currentProps: { userId: s == null ? void 0 : s.id, apiKey: (o == null ? void 0 : o.substring(0, 8)) + "..." },
+  }), P = A(0);
+  P.current++, r("📊 RENDER INFO", {
+    renderCount: P.current,
+    currentProps: { userId: s == null ? void 0 : s.id, apiKey: (l == null ? void 0 : l.substring(0, 8)) + "..." },
     propChanges: {
-      userChanged: y.current.userId !== (s == null ? void 0 : s.id),
-      apiKeyChanged: y.current.apiKey !== o,
-      serviceConfigChanged: y.current.serviceConfig !== n,
-      capabilitiesChanged: y.current.capabilities !== i,
-      customizationChanged: y.current.customization !== c
+      userChanged: E.current.userId !== (s == null ? void 0 : s.id),
+      apiKeyChanged: E.current.apiKey !== l,
+      serviceConfigChanged: E.current.serviceConfig !== n,
+      capabilitiesChanged: E.current.capabilities !== a,
+      customizationChanged: E.current.customization !== c
     }
-  }), y.current = {
+  }), E.current = {
     userId: s == null ? void 0 : s.id,
-    apiKey: o,
+    apiKey: l,
     serviceConfig: n,
-    capabilities: i,
+    capabilities: a,
     customization: c
   }, $(() => {
-    const w = k.current;
-    if (l("🔧 SERVICE INIT EFFECT TRIGGERED", {
-      renderCount: w,
-      apiKey: !!o,
+    const y = P.current;
+    if (r("🔧 SERVICE INIT EFFECT TRIGGERED", {
+      renderCount: y,
+      apiKey: !!l,
       serviceConfig: !!n,
       dependencies: {
-        apiKey: (o == null ? void 0 : o.substring(0, 8)) + "...",
+        apiKey: (l == null ? void 0 : l.substring(0, 8)) + "...",
         serviceConfigRef: n,
-        serviceConfigStable: y.current.serviceConfig === n,
-        apiKeyStable: y.current.apiKey === o
+        serviceConfigStable: E.current.serviceConfig === n,
+        apiKeyStable: E.current.apiKey === l
       }
-    }), !o || !n) {
-      l("⚠️ SERVICE INIT SKIPPED", {
-        renderCount: w,
+    }), !l || !n) {
+      r("⚠️ SERVICE INIT SKIPPED", {
+        renderCount: y,
         reason: "Missing apiKey or serviceConfig"
       });
       return;
     }
-    l("🚀 CREATING NEW SERVICE", {
-      renderCount: w,
-      apiKey: (o == null ? void 0 : o.substring(0, 8)) + "...",
-      serviceConfigChanged: y.current.serviceConfig !== n
+    r("🚀 CREATING NEW SERVICE", {
+      renderCount: y,
+      apiKey: (l == null ? void 0 : l.substring(0, 8)) + "...",
+      serviceConfigChanged: E.current.serviceConfig !== n
     });
-    const O = new Ie({
+    const F = new je({
       ...n,
-      apiKey: o,
-      debug: a
+      apiKey: l,
+      debug: i
     });
-    return b(O), l("✅ SERVICE SET", {
-      renderCount: w,
-      serviceInstance: !!O
+    return C(F), r("✅ SERVICE SET", {
+      renderCount: y,
+      serviceInstance: !!F
     }), () => {
-      l("🧹 SERVICE CLEANUP", {
-        renderCount: w,
+      r("🧹 SERVICE CLEANUP", {
+        renderCount: y,
         reason: "Effect cleanup"
-      }), O.disconnectUser().catch(console.error);
+      }), F.disconnectUser().catch(console.error);
     };
-  }, [o, n, a, l]);
-  const T = _(null);
+  }, [l, n, i, r]);
+  const p = A(null);
   $(() => {
-    var O, L;
-    if (l("🔗 USER CONNECTION EFFECT TRIGGERED", {
-      hasService: !!r,
+    var F, T;
+    if (r("🔗 USER CONNECTION EFFECT TRIGGERED", {
+      hasService: !!o,
       hasUser: !!s,
       userId: s == null ? void 0 : s.id,
-      isConnecting: M.current,
-      isConnected: m,
-      dependencies: { service: !!r, userId: s == null ? void 0 : s.id }
-    }), !r || !s) {
-      l("⚠️ USER CONNECTION SKIPPED", "Missing service or user");
+      isConnecting: k.current,
+      isConnected: b,
+      dependencies: { service: !!o, userId: s == null ? void 0 : s.id }
+    }), !o || !s) {
+      r("⚠️ USER CONNECTION SKIPPED", "Missing service or user");
       return;
     }
-    if (M.current) {
-      l("⚠️ USER CONNECTION SKIPPED", "Already connecting");
+    if (k.current) {
+      r("⚠️ USER CONNECTION SKIPPED", "Already connecting");
       return;
     }
-    if (((O = T.current) == null ? void 0 : O.serviceId) === r && ((L = T.current) == null ? void 0 : L.userId) === s.id) {
-      l(
+    if (((F = p.current) == null ? void 0 : F.serviceId) === o && ((T = p.current) == null ? void 0 : T.userId) === s.id) {
+      r(
         "⚠️ USER CONNECTION SKIPPED",
         "Already connected this user with this service"
       );
       return;
     }
     (async () => {
-      l("🚀 STARTING USER CONNECTION", { userId: s.id }), M.current = !0, h(!0), S(null);
+      r("🚀 STARTING USER CONNECTION", { userId: s.id }), k.current = !0, m(!0), S(null);
       try {
-        l("📞 CALLING SERVICE.CONNECTUSER", { userId: s.id });
-        const p = await r.connectUser(s);
-        g(p), I(!0), T.current = { serviceId: r, userId: s.id }, l("✅ USER CONNECTION SUCCESS", {
+        r("📞 CALLING SERVICE.CONNECTUSER", { userId: s.id });
+        const j = await o.connectUser(s);
+        x(j), h(!0), p.current = { serviceId: o, userId: s.id }, r("✅ USER CONNECTION SUCCESS", {
           userId: s.id,
-          clientId: p.userID
+          clientId: j.userID
         });
-      } catch (p) {
-        const H = p instanceof Error ? p.message : "Connection failed";
-        S(H), l("❌ USER CONNECTION ERROR", {
+      } catch (j) {
+        const H = j instanceof Error ? j.message : "Connection failed";
+        S(H), r("❌ USER CONNECTION ERROR", {
           userId: s.id,
           error: H
         });
       } finally {
-        h(!1), M.current = !1, l("🔄 USER CONNECTION FINISHED", {
+        m(!1), k.current = !1, r("🔄 USER CONNECTION FINISHED", {
           userId: s.id,
-          isConnected: m
+          isConnected: b
         });
       }
     })();
-  }, [r, s, l, m]), $(() => (l("🔌 CLEANUP EFFECT REGISTERED", {
-    hasService: !!r,
-    isConnected: m
+  }, [o, s, r, b]), $(() => (r("🔌 CLEANUP EFFECT REGISTERED", {
+    hasService: !!o,
+    isConnected: b
   }), () => {
-    r && m ? (l(
+    o && b ? (r(
       "🧹 CLEANUP EFFECT TRIGGERED",
       "Cleaning up connection on unmount"
-    ), T.current = null, r.disconnectUser().catch(console.error)) : l("🔇 CLEANUP EFFECT SKIPPED", {
-      hasService: !!r,
-      isConnected: m
+    ), p.current = null, o.disconnectUser().catch(console.error)) : r("🔇 CLEANUP EFFECT SKIPPED", {
+      hasService: !!o,
+      isConnected: b
     });
-  }), [r, m, l]);
-  const f = F(async () => {
-    if (l("🔄 REFRESH CONNECTION CALLED", {
-      hasService: !!r,
+  }), [o, b, r]);
+  const g = M(async () => {
+    if (r("🔄 REFRESH CONNECTION CALLED", {
+      hasService: !!o,
       hasUser: !!s
-    }), !r || !s) {
-      l("⚠️ REFRESH CONNECTION SKIPPED", "Missing service or user");
+    }), !o || !s) {
+      r("⚠️ REFRESH CONNECTION SKIPPED", "Missing service or user");
       return;
     }
-    l("🚀 STARTING CONNECTION REFRESH", { userId: s.id }), h(!0);
+    r("🚀 STARTING CONNECTION REFRESH", { userId: s.id }), m(!0);
     try {
-      l("🔌 DISCONNECTING FOR REFRESH"), await r.disconnectUser(), l("📞 RECONNECTING FOR REFRESH");
-      const w = await r.connectUser(s);
-      g(w), I(!0), S(null), l("✅ CONNECTION REFRESH SUCCESS", { userId: s.id });
-    } catch (w) {
-      const O = w instanceof Error ? w.message : "Refresh failed";
-      S(O), l("❌ CONNECTION REFRESH ERROR", {
+      r("🔌 DISCONNECTING FOR REFRESH"), await o.disconnectUser(), r("📞 RECONNECTING FOR REFRESH");
+      const y = await o.connectUser(s);
+      x(y), h(!0), S(null), r("✅ CONNECTION REFRESH SUCCESS", { userId: s.id });
+    } catch (y) {
+      const F = y instanceof Error ? y.message : "Refresh failed";
+      S(F), r("❌ CONNECTION REFRESH ERROR", {
         userId: s.id,
-        error: O
+        error: F
       });
     } finally {
-      h(!1), l("🔄 CONNECTION REFRESH FINISHED", { userId: s.id });
+      m(!1), r("🔄 CONNECTION REFRESH FINISHED", { userId: s.id });
     }
-  }, [r, s, l]), x = X.useMemo(() => (l("💫 CONTEXT VALUE MEMOIZATION", {
-    hasService: !!r,
+  }, [o, s, r]), v = G.useMemo(() => (r("💫 CONTEXT VALUE MEMOIZATION", {
+    hasService: !!o,
     hasClient: !!u,
-    isConnected: m,
-    isLoading: N,
-    hasError: !!v,
-    capabilitiesKeys: Object.keys(i),
+    isConnected: b,
+    isLoading: f,
+    hasError: !!N,
+    capabilitiesKeys: Object.keys(a),
     customizationKeys: Object.keys(c)
   }), {
-    service: r,
+    service: o,
     client: u,
-    isConnected: m,
-    isLoading: N,
-    error: v,
-    capabilities: i,
+    isConnected: b,
+    isLoading: f,
+    error: N,
+    capabilities: a,
     customization: c,
-    refreshConnection: f,
-    debug: a
+    refreshConnection: g,
+    debug: i
   }), [
-    r,
+    o,
     u,
-    m,
-    N,
-    v,
-    i,
-    c,
+    b,
     f,
+    N,
     a,
-    l
+    c,
+    g,
+    i,
+    r
   ]);
-  return l("🔄 RENDER END", {
-    renderCount: k.current,
-    willRenderChat: !!(u && m),
-    contextValueReady: !!x
-  }), /* @__PURE__ */ e(fe.Provider, { value: x, children: u && m ? /* @__PURE__ */ e(ye, { client: u, children: t }) : t });
-}, je = () => se();
-function ne({ label: t, className: s, children: n, ...o }) {
+  return r("🔄 RENDER END", {
+    renderCount: P.current,
+    willRenderChat: !!(u && b),
+    contextValueReady: !!v
+  }), /* @__PURE__ */ e(Ie.Provider, { value: v, children: u && b ? /* @__PURE__ */ e(Ue, { client: u, children: t }) : t });
+}, Ze = () => le();
+function Se(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+var K = {}, Q = {}, ee = {}, he;
+function Je() {
+  return he || (he = 1, (function(t) {
+    var s = ee && ee.__importDefault || function(c) {
+      return c && c.__esModule ? c : { default: c };
+    };
+    Object.defineProperty(t, "__esModule", { value: !0 }), t.baseStyleClasses = void 0;
+    const n = s(G), l = s(_);
+    t.baseStyleClasses = (0, l.default)("text-sm", "h-2xl", "block", "p-md", "w-full", "rounded-sm", "bg-chalk", "text-black", "transition", "duration-75", "ease-out", "!outline-none");
+    const a = ({ className: c, onChange: i, onChangeValue: r, appearance: o = "default", ...C }, u) => {
+      const x = o === "none" ? "appearance-none" : t.baseStyleClasses, b = ({ target: { value: h, checked: f } }) => C.type === "checkbox" ? r == null ? void 0 : r(f) : r == null ? void 0 : r(h);
+      return n.default.createElement("input", {
+        ...C,
+        className: (0, l.default)(c, x),
+        onChange: i || r && b,
+        ref: u
+      });
+    };
+    t.default = n.default.forwardRef(a);
+  })(ee)), ee;
+}
+var ge;
+function Ye() {
+  if (ge) return Q;
+  ge = 1;
+  var t = Q && Q.__importDefault || function(i) {
+    return i && i.__esModule ? i : { default: i };
+  };
+  Object.defineProperty(Q, "__esModule", { value: !0 });
+  const s = we, n = t(G), l = t(_), a = t(Je()), c = ({ id: i, name: r, label: o, className: C = "", checked: u, defaultChecked: x, inactive: b, value: h, tabIndex: f, icon: m, ...N }, S) => {
+    const k = u || x, E = b || (N == null ? void 0 : N.disabled), P = ({ key: p, code: g }) => {
+      var v;
+      N.onChangeValue && (p === "Enter" || g === "Space") && ((v = N.onChangeValue) == null || v.call(N, h));
+    };
+    return (0, s.jsx)("div", { className: (0, l.default)("inline-flex", "first:ml-xs", "max-w-full"), children: (0, s.jsxs)("label", { htmlFor: i, tabIndex: f, className: (0, l.default)("w-fit", "h-10", "px-md", "rounded-lg", "inline-flex", "justify-center", "border", "hover:ring-1", "hover:ring-sand", "relative", "transition duration-75 ease-out", "max-w-full", C, {
+      "pointer-events-none": E,
+      "cursor-pointer": !E,
+      // Selected
+      "border-black": k,
+      "bg-black": k,
+      // Not selected
+      "bg-white": !k,
+      "border-sand": !k,
+      "hover:border-sand": !k
+    }), children: [(0, s.jsx)(a.default, { type: "checkbox", id: i, name: r, value: h, checked: u, defaultChecked: x, appearance: "none", className: (0, l.default)("cursor-pointer", "outline-none", "focus-visible:ring-2", "focus-visible:ring-black", "absolute", "-top-[3px]", "left-4px", "w-[calc(100%+6px)]", "h-[calc(100%+6px)]", "rounded-[48px]", "transition duration-75 ease-out"), disabled: E, onKeyDown: P, ref: S, ...N }), (0, s.jsxs)("span", { className: (0, l.default)("pointer-events-none", "select-none", "self-center", "text-sm", "flex", "mt-[1px]", "truncate", {
+      "text-pebble": E,
+      "text-white": k,
+      "text-black": !k && !E
+    }), children: [m && (0, s.jsx)("div", { className: "icon mr-xs self-center", children: m }), (0, s.jsx)("span", { className: "label", children: o || r })] })] }) });
+  };
+  return Q.default = n.default.forwardRef(c), Q;
+}
+var Z = {}, xe;
+function ke() {
+  if (xe) return Z;
+  xe = 1;
+  var t = Z && Z.__importDefault || function(a) {
+    return a && a.__esModule ? a : { default: a };
+  };
+  Object.defineProperty(Z, "__esModule", { value: !0 });
+  const s = we, n = t(G), l = ({ children: a, label: c, className: i = "" }, r) => (0, s.jsxs)("fieldset", { className: `${i} -ml-xs space-x-xs space-y-xs`, ref: r, children: [c && (0, s.jsx)("legend", { className: "mb-sm ml-sm text-sm font-semibold", children: c }), a] });
+  return Z.default = n.default.forwardRef(l), Z;
+}
+var be;
+function Ke() {
+  return be || (be = 1, (function(t) {
+    var s = K && K.__importDefault || function(a) {
+      return a && a.__esModule ? a : { default: a };
+    };
+    Object.defineProperty(t, "__esModule", { value: !0 }), t.InputSelectPillGroup = t.default = void 0;
+    var n = Ye();
+    Object.defineProperty(t, "default", { enumerable: !0, get: function() {
+      return s(n).default;
+    } });
+    var l = ke();
+    Object.defineProperty(t, "InputSelectPillGroup", { enumerable: !0, get: function() {
+      return s(l).default;
+    } });
+  })(K)), K;
+}
+var es = Ke();
+const Ne = /* @__PURE__ */ Se(es);
+var ss = ke();
+const ts = /* @__PURE__ */ Se(ss);
+function oe({ label: t, className: s, children: n, ...l }) {
   return /* @__PURE__ */ d(
     "button",
     {
       type: "button",
-      className: D(
+      className: _(
         "rounded-full p-2 transition-colors focus-ring",
         {
-          "cursor-not-allowed opacity-50": o.disabled,
-          "hover:bg-sand": !o.disabled
+          "cursor-not-allowed opacity-50": l.disabled,
+          "hover:bg-sand": !l.disabled
         },
         s
       ),
-      ...o,
+      ...l,
       children: [
         /* @__PURE__ */ e("span", { className: "sr-only", children: t }),
         n
@@ -237,7 +324,7 @@ function ne({ label: t, className: s, children: n, ...o }) {
     }
   );
 }
-const de = [
+const ve = [
   "🍎",
   // Apple
   "🍌",
@@ -265,31 +352,31 @@ const de = [
   "🍈"
   // Melon
 ];
-function Ae(t) {
+function ns(t) {
   let s = 0;
   for (let n = 0; n < t.length; n++) {
-    const o = t.charCodeAt(n);
-    s = (s << 5) - s + o, s = s & s;
+    const l = t.charCodeAt(n);
+    s = (s << 5) - s + l, s = s & s;
   }
   return Math.abs(s);
 }
-function Be(t) {
-  const n = Ae(t) % de.length;
-  return de[n];
+function rs(t) {
+  const n = ns(t) % ve.length;
+  return ve[n];
 }
-const J = ({
+const se = ({
   id: t,
   image: s,
   size: n = 40,
-  className: o
+  className: l
 }) => {
-  const i = Be(t), c = "#FBFAF9", l = n < 32 ? "text-xs" : n < 56 ? "text-sm" : "text-lg";
+  const a = rs(t), c = "#FBFAF9", r = n < 32 ? "text-xs" : n < 56 ? "text-sm" : "text-lg";
   return /* @__PURE__ */ e(
     "div",
     {
-      className: D(
+      className: _(
         "flex-shrink-0 overflow-hidden rounded-lg",
-        o
+        l
       ),
       style: { width: `${n}px`, height: `${n}px` },
       children: s ? /* @__PURE__ */ e(
@@ -303,44 +390,44 @@ const J = ({
         "div",
         {
           "aria-hidden": "true",
-          className: D(
+          className: _(
             "flex h-full w-full items-center justify-center font-semibold rounded-sm",
-            l
+            r
           ),
           style: {
             color: c,
             backgroundColor: `color-mix(in srgb, ${c} 60%, solid)`
           },
-          children: i
+          children: a
         }
       )
     }
   );
-}, _e = ({ channel: t, selectedChannel: s, onChannelSelect: n, debug: o = !1, unread: i }) => {
-  var h, v, S, M, y, k;
-  const c = (s == null ? void 0 : s.id) === (t == null ? void 0 : t.id), a = () => {
+}, ls = ({ channel: t, selectedChannel: s, onChannelSelect: n, debug: l = !1, unread: a }) => {
+  var m, N, S, k, E, P;
+  const c = (s == null ? void 0 : s.id) === (t == null ? void 0 : t.id), i = () => {
     t && n(t);
-  }, r = Object.values(((h = t == null ? void 0 : t.state) == null ? void 0 : h.members) || {}).find(
-    (T) => {
-      var f, x;
-      return ((f = T.user) == null ? void 0 : f.id) && T.user.id !== ((x = t == null ? void 0 : t._client) == null ? void 0 : x.userID);
+  }, o = Object.values(((m = t == null ? void 0 : t.state) == null ? void 0 : m.members) || {}).find(
+    (p) => {
+      var g, v;
+      return ((g = p.user) == null ? void 0 : g.id) && p.user.id !== ((v = t == null ? void 0 : t._client) == null ? void 0 : v.userID);
     }
-  ), b = ((v = r == null ? void 0 : r.user) == null ? void 0 : v.name) || "Conversation", u = (S = r == null ? void 0 : r.user) == null ? void 0 : S.image, g = (y = (M = t == null ? void 0 : t.state) == null ? void 0 : M.messages) == null ? void 0 : y[t.state.messages.length - 1], m = (g == null ? void 0 : g.text) || "No messages yet", I = g != null && g.created_at ? new Date(g.created_at).toLocaleTimeString([], {
+  ), C = ((N = o == null ? void 0 : o.user) == null ? void 0 : N.name) || "Conversation", u = (S = o == null ? void 0 : o.user) == null ? void 0 : S.image, x = (E = (k = t == null ? void 0 : t.state) == null ? void 0 : k.messages) == null ? void 0 : E[t.state.messages.length - 1], b = (x == null ? void 0 : x.text) || "No messages yet", h = x != null && x.created_at ? new Date(x.created_at).toLocaleTimeString([], {
     hour: "2-digit",
     minute: "2-digit"
-  }) : "", N = i ?? 0;
-  return o && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
+  }) : "", f = a ?? 0;
+  return l && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
     channelId: t == null ? void 0 : t.id,
     isSelected: c,
-    participantName: b,
-    unreadCount: N,
-    hasTimestamp: !!I
+    participantName: C,
+    unreadCount: f,
+    hasTimestamp: !!h
   }), /* @__PURE__ */ e(
     "button",
     {
       type: "button",
-      onClick: a,
-      className: D(
+      onClick: i,
+      className: _(
         "w-full px-4 py-3 transition-colors border-b border-sand text-left max-w-full overflow-hidden focus-ring",
         {
           "bg-primary-alt/10 border-l-4 border-l-primary": c,
@@ -349,10 +436,10 @@ const J = ({
       ),
       children: /* @__PURE__ */ d("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ e(
-          J,
+          se,
           {
-            id: ((k = r == null ? void 0 : r.user) == null ? void 0 : k.id) || t.id || "unknown",
-            name: b,
+            id: ((P = o == null ? void 0 : o.user) == null ? void 0 : P.id) || t.id || "unknown",
+            name: C,
             image: u,
             size: 44
           }
@@ -362,105 +449,137 @@ const J = ({
             /* @__PURE__ */ e(
               "h3",
               {
-                className: D(
+                className: _(
                   "text-sm font-medium truncate",
                   c ? "text-primary" : "text-charcoal"
                 ),
-                children: b
+                children: C
               }
             ),
-            I && /* @__PURE__ */ e("span", { className: "text-xs text-stone flex-shrink-0", children: I })
+            h && /* @__PURE__ */ e("span", { className: "text-xs text-stone flex-shrink-0", children: h })
           ] }),
           /* @__PURE__ */ d("div", { className: "flex items-center justify-between gap-2 min-w-0", children: [
-            /* @__PURE__ */ e("p", { className: "text-xs text-stone mr-2 flex-1 line-clamp-2", children: m }),
-            N > 0 && /* @__PURE__ */ e("span", { className: "bg-primary text-white text-xs px-2 py-0.5 rounded-full min-w-[20px] text-center flex-shrink-0", children: N > 99 ? "99+" : N })
+            /* @__PURE__ */ e("p", { className: "text-xs text-stone mr-2 flex-1 line-clamp-2", children: b }),
+            f > 0 && /* @__PURE__ */ e("span", { className: "bg-primary text-white text-xs px-2 py-0.5 rounded-full min-w-[20px] text-center flex-shrink-0", children: f > 99 ? "99+" : f })
           ] })
         ] })
       ] })
     }
   );
-}, $e = ({
+}, os = ({
   onChannelSelect: t,
   selectedChannel: s,
   showStartConversation: n = !1,
-  onStartConversation: o,
-  participantLabel: i = "participants",
+  onStartConversation: l,
+  participantLabel: a = "participants",
   className: c
 }) => {
-  var u;
-  const a = X.useRef(0);
-  a.current++;
-  const { debug: l = !1 } = se();
-  l && console.log("📺 [ChannelList] 🔄 RENDER START", {
-    renderCount: a.current,
+  var b;
+  const i = G.useRef(0);
+  i.current++;
+  const { debug: r = !1 } = le();
+  r && console.log("📺 [ChannelList] 🔄 RENDER START", {
+    renderCount: i.current,
     selectedChannelId: s == null ? void 0 : s.id,
     showStartConversation: n,
-    participantLabel: i
+    participantLabel: a
   });
-  const { client: r } = Se();
-  l && console.log("📺 [ChannelList] 📡 CHAT CONTEXT", {
-    renderCount: a.current,
-    hasClient: !!r,
-    clientUserId: r == null ? void 0 : r.userID,
-    clientConnected: (u = r == null ? void 0 : r.wsConnection) == null ? void 0 : u.isHealthy
+  const { client: o } = Le();
+  r && console.log("📺 [ChannelList] 📡 CHAT CONTEXT", {
+    renderCount: i.current,
+    hasClient: !!o,
+    clientUserId: o == null ? void 0 : o.userID,
+    clientConnected: (b = o == null ? void 0 : o.wsConnection) == null ? void 0 : b.isHealthy
   });
-  const b = X.useMemo(() => {
-    const g = r.userID, m = g ? {
-      type: "messaging",
-      members: { $in: [g] },
-      hidden: !1,
-      last_message_at: { $exists: !0 }
-    } : { type: "messaging", last_message_at: { $exists: !0 } };
-    return l && console.log("📺 [ChannelList] 🔍 FILTERS MEMOIZED", {
-      renderCount: a.current,
-      userId: g,
-      filters: m
-    }), m;
-  }, [r.userID, l]);
+  const [C, u] = I({
+    type: "messaging",
+    last_message_at: { $exists: !0 },
+    has_unread: void 0
+  }), x = G.useMemo(() => {
+    const h = o.userID, f = {
+      ...C,
+      ...h && {
+        members: { $in: [h] },
+        hidden: !1
+      }
+    };
+    return r && console.log("📺 [ChannelList] 🔍 FILTERS MEMOIZED", {
+      renderCount: i.current,
+      userId: h,
+      filters: f
+    }), f;
+  }, [o.userID, r, C]);
   return /* @__PURE__ */ d(
     "div",
     {
-      className: D(
+      className: _(
         "messaging-channel-list h-full flex flex-col min-w-0 overflow-hidden",
         c
       ),
       children: [
         /* @__PURE__ */ e("div", { className: "px-4 py-4 border-b border-sand bg-chalk", children: /* @__PURE__ */ d("div", { className: "flex items-center justify-between gap-3 min-h-10 min-w-0", children: [
-          /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-charcoal", children: "Conversations" }),
-          /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: n && o && /* @__PURE__ */ e(
-            ne,
+          /* @__PURE__ */ d("div", { children: [
+            /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-charcoal", children: "Conversations" }),
+            /* @__PURE__ */ d(ts, { children: [
+              /* @__PURE__ */ e(
+                Ne,
+                {
+                  checked: !x.has_unread,
+                  name: "All",
+                  onChange: () => u((h) => ({
+                    ...h,
+                    has_unread: void 0
+                  })),
+                  value: 0
+                  /* All */
+                }
+              ),
+              /* @__PURE__ */ e(
+                Ne,
+                {
+                  checked: x.has_unread,
+                  name: "Unread",
+                  onChange: () => u((h) => ({ ...h, has_unread: !0 })),
+                  value: 1
+                  /* Unread */
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: n && l && /* @__PURE__ */ e(
+            oe,
             {
               label: "Start a new conversation",
-              onClick: o,
+              onClick: l,
               className: "inline-flex size-10 items-center justify-center",
-              children: /* @__PURE__ */ e(Oe, { className: "h-5 w-5" })
+              children: /* @__PURE__ */ e(qe, { className: "h-5 w-5" })
             }
           ) })
         ] }) }),
-        /* @__PURE__ */ e("div", { className: "flex-1 overflow-hidden min-w-0", children: (l && console.log("📺 [ChannelList] 🎬 RENDERING STREAM CHANNEL LIST", {
-          renderCount: a.current,
-          filters: b,
-          hasClient: !!r,
-          clientUserId: r == null ? void 0 : r.userID
+        /* @__PURE__ */ e("div", { className: "flex-1 overflow-hidden min-w-0", children: (r && console.log("📺 [ChannelList] 🎬 RENDERING STREAM CHANNEL LIST", {
+          renderCount: i.current,
+          filters: x,
+          hasClient: !!o,
+          clientUserId: o == null ? void 0 : o.userID
         }), /* @__PURE__ */ e(
-          Re,
+          Be,
           {
-            filters: b,
+            filters: x,
             sort: { last_message_at: -1 },
             options: { limit: 30 },
-            Preview: (g) => {
-              var m, I;
-              return l && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
-                channelId: (m = g.channel) == null ? void 0 : m.id,
+            Preview: (h) => {
+              var f, m;
+              return r && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
+                channelId: (f = h.channel) == null ? void 0 : f.id,
                 selectedChannelId: s == null ? void 0 : s.id,
-                isSelected: (s == null ? void 0 : s.id) === ((I = g.channel) == null ? void 0 : I.id)
+                isSelected: (s == null ? void 0 : s.id) === ((m = h.channel) == null ? void 0 : m.id)
               }), /* @__PURE__ */ e(
-                _e,
+                ls,
                 {
-                  ...g,
+                  ...h,
                   selectedChannel: s,
                   onChannelSelect: t,
-                  debug: l
+                  debug: r
                 }
               );
             }
@@ -469,38 +588,41 @@ const J = ({
       ]
     }
   );
-}, K = ({
+}, ne = ({
   variant: t = "default",
   className: s,
   children: n,
-  ...o
+  ...l
 }) => /* @__PURE__ */ e(
   "button",
   {
     type: "button",
-    className: D(
+    className: _(
       "flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left text-sm transition-colors focus-ring disabled:cursor-not-allowed disabled:opacity-60",
       t === "danger" ? "text-danger hover:bg-danger/50" : "text-charcoal hover:bg-sand",
       s
     ),
-    ...o,
+    ...l,
     children: n
   }
 );
-function ge({ onClick: t }) {
-  return /* @__PURE__ */ e(ne, { label: "Close", onClick: t, className: "p-1", children: /* @__PURE__ */ e(he, { className: "h-5 w-5 text-stone", weight: "bold" }) });
+function Re({ onClick: t }) {
+  return /* @__PURE__ */ e(oe, { label: "Close", onClick: t, className: "p-1", children: /* @__PURE__ */ e(Ee, { className: "h-5 w-5 text-stone", weight: "bold" }) });
 }
-const He = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "message-input flex items-center gap-2 p-4", children: [
+const Pe = () => /* @__PURE__ */ e("div", { className: "messaging-channel-empty-state flex items-center justify-center h-full p-8 text-balance", children: /* @__PURE__ */ d("div", { className: "text-center max-w-sm", children: [
+  /* @__PURE__ */ e("h2", { className: "font-semibold text-charcoal mb-2", children: "No messages yet 👀" }),
+  /* @__PURE__ */ e("p", { className: "text-stone text-xs", children: "Share to social media to generate more conversations" })
+] }) }), as = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "message-input flex items-center gap-2 p-4", children: [
   t && t(),
-  /* @__PURE__ */ e("div", { className: "flex-1", children: /* @__PURE__ */ e(De, { focus: !0, maxRows: 4 }) })
-] }), Ge = ({ onBack: t, showBackButton: s, onShowInfo: n, canShowInfo: o }) => {
-  var r, b, u, g;
-  const { channel: i } = me(), c = X.useMemo(() => Object.values(i.state.members || {}).find(
-    (I) => {
-      var N;
-      return ((N = I.user) == null ? void 0 : N.id) && I.user.id !== i._client.userID;
+  /* @__PURE__ */ e("div", { className: "flex-1", children: /* @__PURE__ */ e(He, { focus: !0, maxRows: 4 }) })
+] }), is = ({ onBack: t, showBackButton: s, onShowInfo: n, canShowInfo: l }) => {
+  var o, C, u, x;
+  const { channel: a } = ye(), c = G.useMemo(() => Object.values(a.state.members || {}).find(
+    (h) => {
+      var f;
+      return ((f = h.user) == null ? void 0 : f.id) && h.user.id !== a._client.userID;
     }
-  ), [i._client.userID, i.state.members]), a = ((r = c == null ? void 0 : c.user) == null ? void 0 : r.name) || ((b = c == null ? void 0 : c.user) == null ? void 0 : b.id) || "Unknown member", l = (u = c == null ? void 0 : c.user) == null ? void 0 : u.image;
+  ), [a._client.userID, a.state.members]), i = ((o = c == null ? void 0 : c.user) == null ? void 0 : o.name) || ((C = c == null ? void 0 : c.user) == null ? void 0 : C.id) || "Unknown member", r = (u = c == null ? void 0 : c.user) == null ? void 0 : u.image;
   return /* @__PURE__ */ d("div", { className: "flex items-center justify-between gap-3 min-h-12", children: [
     /* @__PURE__ */ d("div", { className: "flex items-center gap-3 min-w-0", children: [
       s && t && /* @__PURE__ */ e(
@@ -510,96 +632,96 @@ const He = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
           onClick: t,
           className: "inline-flex items-center justify-center w-8 h-8 rounded-lg hover:bg-sand focus:outline-none focus:ring-2 focus:ring-primary transition-colors lg:hidden",
           "aria-label": "Back to conversations",
-          children: /* @__PURE__ */ e(Me, { className: "h-5 w-5 text-stone", weight: "bold" })
+          children: /* @__PURE__ */ e(We, { className: "h-5 w-5 text-stone", weight: "bold" })
         }
       ),
       /* @__PURE__ */ e(
-        J,
+        se,
         {
-          id: ((g = c == null ? void 0 : c.user) == null ? void 0 : g.id) || i.id || "unknown",
-          name: a,
-          image: l,
+          id: ((x = c == null ? void 0 : c.user) == null ? void 0 : x.id) || a.id || "unknown",
+          name: i,
+          image: r,
           size: 40
         }
       ),
-      /* @__PURE__ */ e("div", { className: "min-w-0", children: /* @__PURE__ */ e("h1", { className: "text-lg font-semibold text-charcoal truncate", children: a }) })
+      /* @__PURE__ */ e("div", { className: "min-w-0", children: /* @__PURE__ */ e("h1", { className: "text-lg font-semibold text-charcoal truncate", children: i }) })
     ] }),
-    o && n && /* @__PURE__ */ e(ne, { label: "Chat info", onClick: n, children: /* @__PURE__ */ e(Fe, { className: "h-6 w-6 text-charcoal", weight: "bold" }) })
+    l && n && /* @__PURE__ */ e(oe, { label: "Chat info", onClick: n, children: /* @__PURE__ */ e(ze, { className: "h-6 w-6 text-charcoal", weight: "bold" }) })
   ] });
-}, Ve = ({
+}, cs = ({
   isOpen: t,
   onClose: s,
   participant: n,
-  channel: o,
-  followerStatusLabel: i,
+  channel: l,
+  followerStatusLabel: a,
   onLeaveConversation: c,
-  onBlockParticipant: a
+  onBlockParticipant: i
 }) => {
-  var p, H, G, V, Q, W, z;
-  const { service: l, debug: r } = se(), b = _(null), [u, g] = E(!1), [m, I] = E(!1), [N, h] = E(!1);
+  var j, H, q, W, J, z, V;
+  const { service: r, debug: o } = le(), C = A(null), [u, x] = I(!1), [b, h] = I(!1), [f, m] = I(!1);
   $(() => {
-    const R = b.current;
+    const R = C.current;
     R && (t ? R.showModal() : R.close());
   }, [t]);
-  const v = F(async () => {
+  const N = M(async () => {
     var R;
-    if (!(!l || !((R = n == null ? void 0 : n.user) != null && R.id)))
+    if (!(!r || !((R = n == null ? void 0 : n.user) != null && R.id)))
       try {
-        const A = (await l.getBlockedUsers()).some(
-          (q) => {
-            var Z;
-            return q.blocked_user_id === ((Z = n == null ? void 0 : n.user) == null ? void 0 : Z.id);
+        const L = (await r.getBlockedUsers()).some(
+          (X) => {
+            var Y;
+            return X.blocked_user_id === ((Y = n == null ? void 0 : n.user) == null ? void 0 : Y.id);
           }
         );
-        g(A);
-      } catch (P) {
+        x(L);
+      } catch (D) {
         console.error(
           "[ChannelInfoDialog] Failed to check blocked status:",
-          P
+          D
         );
       }
-  }, [l, (p = n == null ? void 0 : n.user) == null ? void 0 : p.id]);
+  }, [r, (j = n == null ? void 0 : n.user) == null ? void 0 : j.id]);
   $(() => {
-    t && v();
-  }, [t, v]);
+    t && N();
+  }, [t, N]);
   const S = async () => {
     var R;
-    if (!m) {
-      r && console.log("[ChannelInfoDialog] Leave conversation", o.cid), I(!0);
+    if (!b) {
+      o && console.log("[ChannelInfoDialog] Leave conversation", l.cid), h(!0);
       try {
-        const P = ((R = o._client) == null ? void 0 : R.userID) ?? null;
-        await o.hide(P, !1), c && await c(o), s();
-      } catch (P) {
-        console.error("[ChannelInfoDialog] Failed to leave conversation", P);
+        const D = ((R = l._client) == null ? void 0 : R.userID) ?? null;
+        await l.hide(D, !1), c && await c(l), s();
+      } catch (D) {
+        console.error("[ChannelInfoDialog] Failed to leave conversation", D);
       } finally {
-        I(!1);
+        h(!1);
       }
     }
-  }, M = async () => {
-    var R, P, A;
-    if (!(N || !l)) {
-      r && console.log("[ChannelInfoDialog] Block member", (R = n == null ? void 0 : n.user) == null ? void 0 : R.id), h(!0);
+  }, k = async () => {
+    var R, D, L;
+    if (!(f || !r)) {
+      o && console.log("[ChannelInfoDialog] Block member", (R = n == null ? void 0 : n.user) == null ? void 0 : R.id), m(!0);
       try {
-        await l.blockUser((P = n == null ? void 0 : n.user) == null ? void 0 : P.id), a && await a((A = n == null ? void 0 : n.user) == null ? void 0 : A.id), s();
-      } catch (q) {
-        console.error("[ChannelInfoDialog] Failed to block member", q);
+        await r.blockUser((D = n == null ? void 0 : n.user) == null ? void 0 : D.id), i && await i((L = n == null ? void 0 : n.user) == null ? void 0 : L.id), s();
+      } catch (X) {
+        console.error("[ChannelInfoDialog] Failed to block member", X);
       } finally {
-        h(!1);
+        m(!1);
       }
     }
-  }, y = async () => {
-    var R, P, A;
-    if (!(N || !l)) {
-      r && console.log("[ChannelInfoDialog] Unblock member", (R = n == null ? void 0 : n.user) == null ? void 0 : R.id), h(!0);
+  }, E = async () => {
+    var R, D, L;
+    if (!(f || !r)) {
+      o && console.log("[ChannelInfoDialog] Unblock member", (R = n == null ? void 0 : n.user) == null ? void 0 : R.id), m(!0);
       try {
-        await l.unBlockUser((P = n == null ? void 0 : n.user) == null ? void 0 : P.id), a && await a((A = n == null ? void 0 : n.user) == null ? void 0 : A.id), s();
-      } catch (q) {
-        console.error("[ChannelInfoDialog] Failed to unblock member", q);
+        await r.unBlockUser((D = n == null ? void 0 : n.user) == null ? void 0 : D.id), i && await i((L = n == null ? void 0 : n.user) == null ? void 0 : L.id), s();
+      } catch (X) {
+        console.error("[ChannelInfoDialog] Failed to unblock member", X);
       } finally {
-        h(!1);
+        m(!1);
       }
     }
-  }, k = () => {
+  }, P = () => {
     s(), window.open(
       "https://linktr.ee/s/about/trust-center/report",
       "_blank",
@@ -607,78 +729,92 @@ const He = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
     );
   };
   if (!n) return null;
-  const T = ((H = n.user) == null ? void 0 : H.name) || ((G = n.user) == null ? void 0 : G.id) || "Unknown member", f = (V = n.user) == null ? void 0 : V.image, x = (Q = n.user) == null ? void 0 : Q.email, w = (W = n.user) == null ? void 0 : W.username, O = x || (w ? `linktr.ee/${w}` : void 0), L = ((z = n.user) == null ? void 0 : z.id) || "unknown";
+  const p = ((H = n.user) == null ? void 0 : H.name) || ((q = n.user) == null ? void 0 : q.id) || "Unknown member", g = (W = n.user) == null ? void 0 : W.image, v = (J = n.user) == null ? void 0 : J.email, y = (z = n.user) == null ? void 0 : z.username, F = v || (y ? `linktr.ee/${y}` : void 0), T = ((V = n.user) == null ? void 0 : V.id) || "unknown";
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     /* @__PURE__ */ e(
       "dialog",
       {
-        ref: b,
+        ref: C,
         className: "mes-dialog",
         onClose: s,
         onClick: (R) => {
-          R.target === b.current && s();
+          R.target === C.current && s();
         },
         children: /* @__PURE__ */ d("div", { className: "ml-auto flex h-full w-full flex-col bg-white shadow-max-elevation-light", children: [
           /* @__PURE__ */ d("div", { className: "flex items-center justify-between border-b border-sand px-4 py-3", children: [
             /* @__PURE__ */ e("h2", { className: "text-base font-semibold text-charcoal", children: "Chat info" }),
-            /* @__PURE__ */ e(ge, { onClick: s })
+            /* @__PURE__ */ e(Re, { onClick: s })
           ] }),
-          /* @__PURE__ */ d("div", { className: "flex-1 overflow-y-auto px-6 py-6", children: [
-            /* @__PURE__ */ e("div", { className: "rounded-2xl bg-chalk p-4", children: /* @__PURE__ */ d("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ d("div", { className: "flex-1 px-2 overflow-y-auto w-full", children: [
+            /* @__PURE__ */ e("div", { className: "flex flex-col items-center gap-3 self-stretch px-4 py-2 mt-6 rounded-lg border border-black/[0.04]", style: { backgroundColor: "#FBFAF9" }, children: /* @__PURE__ */ d("div", { className: "flex items-center gap-3 w-full", children: [
               /* @__PURE__ */ e(
-                J,
+                se,
                 {
-                  id: L,
-                  name: T,
-                  image: f,
-                  size: 64
+                  id: T,
+                  name: p,
+                  image: g,
+                  size: 88,
+                  className: "!rounded-full"
                 }
               ),
-              /* @__PURE__ */ d("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ e("p", { className: "truncate text-base font-semibold text-charcoal", children: T }),
-                O && /* @__PURE__ */ e("p", { className: "truncate text-sm text-stone", children: O }),
-                i && /* @__PURE__ */ e("span", { className: "mt-2 inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700", children: i })
+              /* @__PURE__ */ d("div", { className: "flex flex-col min-w-0 flex-1", children: [
+                /* @__PURE__ */ e("p", { className: "truncate text-base font-semibold text-charcoal", children: p }),
+                F && /* @__PURE__ */ e("p", { className: "truncate text-sm text-[#00000055]", children: F }),
+                a && /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: "mt-1 rounded-full text-xs font-normal w-fit",
+                    style: {
+                      padding: "4px 8px",
+                      backgroundColor: a === "Subscribed to you" ? "#DCFCE7" : "#F5F5F4",
+                      color: a === "Subscribed to you" ? "#008236" : "#78716C",
+                      lineHeight: "133.333%",
+                      letterSpacing: "0.21px"
+                    },
+                    children: a
+                  }
+                )
               ] })
             ] }) }),
             /* @__PURE__ */ d("ul", { className: "flex flex-col gap-2 mt-2", children: [
               /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(
-                K,
+                ne,
                 {
                   onClick: S,
-                  disabled: m,
-                  "aria-busy": m,
+                  disabled: b,
+                  "aria-busy": b,
                   children: [
-                    m ? /* @__PURE__ */ e(ee, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(Ue, { className: "h-5 w-5" }),
+                    b ? /* @__PURE__ */ e(re, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(Ve, { className: "h-5 w-5" }),
                     /* @__PURE__ */ e("span", { children: "Leave Conversation" })
                   ]
                 }
               ) }),
               /* @__PURE__ */ e("li", { children: u ? /* @__PURE__ */ d(
-                K,
+                ne,
                 {
-                  onClick: y,
-                  disabled: N,
-                  "aria-busy": N,
+                  onClick: E,
+                  disabled: f,
+                  "aria-busy": f,
                   children: [
-                    N ? /* @__PURE__ */ e(ee, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(ie, { className: "h-5 w-5" }),
+                    f ? /* @__PURE__ */ e(re, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(fe, { className: "h-5 w-5" }),
                     /* @__PURE__ */ e("span", { children: "Unblock" })
                   ]
                 }
               ) : /* @__PURE__ */ d(
-                K,
+                ne,
                 {
-                  onClick: M,
-                  disabled: N,
-                  "aria-busy": N,
+                  onClick: k,
+                  disabled: f,
+                  "aria-busy": f,
                   children: [
-                    N ? /* @__PURE__ */ e(ee, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(ie, { className: "h-5 w-5" }),
+                    f ? /* @__PURE__ */ e(re, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(fe, { className: "h-5 w-5" }),
                     /* @__PURE__ */ e("span", { children: "Block" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(K, { variant: "danger", onClick: k, children: [
-                /* @__PURE__ */ e(Le, { className: "h-5 w-5" }),
+              /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(ne, { variant: "danger", onClick: P, children: [
+                /* @__PURE__ */ e(Xe, { className: "h-5 w-5" }),
                 /* @__PURE__ */ e("span", { children: "Report" })
               ] }) })
             ] })
@@ -687,97 +823,100 @@ const He = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
       }
     )
   );
-}, We = ({
+}, ds = ({
   onBack: t,
   showBackButton: s,
   renderMessageInputActions: n,
-  onLeaveConversation: o,
-  onBlockParticipant: i,
-  CustomChannelEmptyState: c
+  onLeaveConversation: l,
+  onBlockParticipant: a,
+  CustomChannelEmptyState: c = Pe
 }) => {
-  var m, I;
-  const { channel: a } = me(), [l, r] = E(!1), b = (((I = (m = a == null ? void 0 : a.state) == null ? void 0 : m.messages) == null ? void 0 : I.length) ?? 0) > 0, u = X.useMemo(() => Object.values(a.state.members || {}).find(
-    (h) => {
-      var v;
-      return ((v = h.user) == null ? void 0 : v.id) && h.user.id !== a._client.userID;
+  var b, h;
+  const { channel: i } = ye(), [r, o] = I(!1), C = (((h = (b = i == null ? void 0 : i.state) == null ? void 0 : b.messages) == null ? void 0 : h.length) ?? 0) > 0, u = G.useMemo(() => Object.values(i.state.members || {}).find(
+    (m) => {
+      var N;
+      return ((N = m.user) == null ? void 0 : N.id) && m.user.id !== i._client.userID;
     }
-  ), [a._client.userID, a.state.members]), g = X.useMemo(() => {
-    const N = a.data ?? {};
-    return N.followerStatus ? String(N.followerStatus) : N.isFollower ? "Subscribed to you" : void 0;
-  }, [a.data]);
-  return /* @__PURE__ */ d(oe, { children: [
-    /* @__PURE__ */ d(Te, { children: [
+  ), [i._client.userID, i.state.members]), x = G.useMemo(() => {
+    const f = i.data ?? {};
+    if (f.followerStatus)
+      return String(f.followerStatus);
+    if (f.isFollower !== void 0)
+      return f.isFollower ? "Subscribed to you" : "Not subscribed";
+  }, [i.data]);
+  return /* @__PURE__ */ d(de, { children: [
+    /* @__PURE__ */ d($e, { children: [
       /* @__PURE__ */ e("div", { className: "border-b border-sand bg-white px-4 py-3", children: /* @__PURE__ */ e(
-        Ge,
+        is,
         {
           onBack: t,
           showBackButton: s,
-          onShowInfo: () => r(!0),
+          onShowInfo: () => o(!0),
           canShowInfo: !!u
         }
       ) }),
       /* @__PURE__ */ d("div", { className: "flex-1 overflow-hidden relative", children: [
-        /* @__PURE__ */ e(Pe, { hideDeletedMessages: !0, hideNewMessageSeparator: !1 }),
-        !b && c && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex bg-white", children: /* @__PURE__ */ e(c, {}) })
+        /* @__PURE__ */ e(Ge, { hideDeletedMessages: !0, hideNewMessageSeparator: !1 }),
+        !C && c && /* @__PURE__ */ e("div", { className: "absolute inset-0 w-full h-full bg-white", children: /* @__PURE__ */ e(c, {}) })
       ] }),
       /* @__PURE__ */ e(
-        He,
+        as,
         {
-          renderActions: () => n == null ? void 0 : n(a)
+          renderActions: () => n == null ? void 0 : n(i)
         }
       )
     ] }),
     /* @__PURE__ */ e(
-      Ve,
+      cs,
       {
-        isOpen: l,
-        onClose: () => r(!1),
+        isOpen: r,
+        onClose: () => o(!1),
         participant: u,
-        channel: a,
-        followerStatusLabel: g,
-        onLeaveConversation: o,
-        onBlockParticipant: i
+        channel: i,
+        followerStatusLabel: x,
+        onLeaveConversation: l,
+        onBlockParticipant: a
       }
     )
   ] });
-}, ze = ({
+}, us = ({
   channel: t,
   onBack: s,
   showBackButton: n = !1,
-  renderMessageInputActions: o,
-  onLeaveConversation: i,
+  renderMessageInputActions: l,
+  onLeaveConversation: a,
   onBlockParticipant: c,
-  className: a,
-  CustomChannelEmptyState: l
+  className: i,
+  CustomChannelEmptyState: r = Pe
 }) => /* @__PURE__ */ e(
   "div",
   {
-    className: D(
+    className: _(
       "messaging-channel-view h-full flex flex-col",
-      a
+      i
     ),
-    children: /* @__PURE__ */ e(ke, { channel: t, children: /* @__PURE__ */ e(
-      We,
+    children: /* @__PURE__ */ e(Ae, { channel: t, children: /* @__PURE__ */ e(
+      ds,
       {
         onBack: s,
         showBackButton: n,
-        renderMessageInputActions: o,
-        onLeaveConversation: i,
+        renderMessageInputActions: l,
+        onLeaveConversation: a,
         onBlockParticipant: c,
-        CustomChannelEmptyState: l
+        CustomChannelEmptyState: r
       }
     ) })
   }
 );
-function qe({
+function fs({
   searchQuery: t,
   setSearchQuery: s,
   placeholder: n
 }) {
-  const o = _(null);
+  const l = A(null);
   return /* @__PURE__ */ d("div", { className: "relative", children: [
     /* @__PURE__ */ e(
-      pe,
+      Qe,
       {
         className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-stone",
         weight: "bold"
@@ -786,185 +925,185 @@ function qe({
     /* @__PURE__ */ e(
       "input",
       {
-        ref: o,
+        ref: l,
         type: "text",
         placeholder: n,
         value: t,
-        onChange: (i) => s(i.target.value),
+        onChange: (a) => s(a.target.value),
         className: "w-full pl-10 pr-10 py-3 text-sm border border-sand rounded-xl focus:outline-none focus:ring-2 focus:ring-black focus:border-transparent"
       }
     ),
     t && /* @__PURE__ */ e(
-      ne,
+      oe,
       {
         label: "Clear search",
         onClick: () => {
-          var i;
-          s(""), (i = o.current) == null || i.focus();
+          var a;
+          s(""), (a = l.current) == null || a.focus();
         },
         className: "absolute right-3 top-1/2 -translate-y-1/2 p-1 text-stone hover:text-charcoal",
-        children: /* @__PURE__ */ e(he, { className: "h-4 w-4", weight: "bold" })
+        children: /* @__PURE__ */ e(Ee, { className: "h-4 w-4", weight: "bold" })
       }
     )
   ] });
 }
-const Xe = ({
+const ms = ({
   participantSource: t,
   onSelectParticipant: s,
   onClose: n,
-  existingParticipantIds: o = /* @__PURE__ */ new Set(),
-  participantLabel: i = "participants",
+  existingParticipantIds: l = /* @__PURE__ */ new Set(),
+  participantLabel: a = "participants",
   searchPlaceholder: c = "Search participants...",
-  className: a
+  className: i
 }) => {
-  const { debug: l } = se(), [r, b] = E(""), [u, g] = E([]), [m, I] = E(!1), [N, h] = E(null), [v, S] = E(
+  const { debug: r } = le(), [o, C] = I(""), [u, x] = I([]), [b, h] = I(!1), [f, m] = I(null), [N, S] = I(
     null
-  ), M = _(!1);
+  ), k = A(!1);
   $(() => {
     if (t.loading) {
-      l && console.log(
+      r && console.log(
         "[ParticipantPicker] Waiting for participant source to finish loading..."
       );
       return;
     }
-    if (M.current) return;
+    if (k.current) return;
     (async () => {
-      l && console.log("[ParticipantPicker] Loading initial participants..."), I(!0), h(null);
+      r && console.log("[ParticipantPicker] Loading initial participants..."), h(!0), m(null);
       try {
-        const x = await t.loadParticipants({
+        const v = await t.loadParticipants({
           search: "",
           // Load all participants initially
           limit: 100
         });
-        g(x.participants), M.current = !0, l && console.log(
+        x(v.participants), k.current = !0, r && console.log(
           "[ParticipantPicker] Participants loaded successfully:",
-          x.participants.length
+          v.participants.length
         );
-      } catch (x) {
-        const w = x instanceof Error ? x.message : "Failed to load participants";
-        h(w), console.error("[ParticipantPicker] Failed to load participants:", x);
+      } catch (v) {
+        const y = v instanceof Error ? v.message : "Failed to load participants";
+        m(y), console.error("[ParticipantPicker] Failed to load participants:", v);
       } finally {
-        I(!1);
+        h(!1);
       }
     })();
-  }, [t.loading, l]);
-  const y = u.filter((f) => !o.has(f.id)).filter((f) => {
-    var w;
-    if (!r) return !0;
-    const x = r.toLowerCase();
-    return f.name.toLowerCase().includes(x) || ((w = f.email) == null ? void 0 : w.toLowerCase().includes(x)) || !1;
-  }), k = F(
-    async (f) => {
-      if (!v) {
-        S(f.id);
+  }, [t.loading, r]);
+  const E = u.filter((g) => !l.has(g.id)).filter((g) => {
+    var y;
+    if (!o) return !0;
+    const v = o.toLowerCase();
+    return g.name.toLowerCase().includes(v) || ((y = g.email) == null ? void 0 : y.toLowerCase().includes(v)) || !1;
+  }), P = M(
+    async (g) => {
+      if (!N) {
+        S(g.id);
         try {
-          await s(f);
-        } catch (x) {
-          console.error("[ParticipantPicker] Failed to start chat:", x), S(null);
+          await s(g);
+        } catch (v) {
+          console.error("[ParticipantPicker] Failed to start chat:", v), S(null);
         }
       }
     },
-    [s, v]
-  ), T = (f, x) => {
-    (f.key === "Enter" || f.key === " ") && (f.preventDefault(), k(x));
+    [s, N]
+  ), p = (g, v) => {
+    (g.key === "Enter" || g.key === " ") && (g.preventDefault(), P(v));
   };
-  return /* @__PURE__ */ d("div", { className: D("flex flex-col h-full", a), children: [
+  return /* @__PURE__ */ d("div", { className: _("flex flex-col h-full", i), children: [
     /* @__PURE__ */ d("div", { className: "px-4 py-4 border-b border-sand bg-chalk", children: [
       /* @__PURE__ */ d("div", { className: "flex items-center justify-between mb-3", children: [
         /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-charcoal", children: "Start a new Conversation" }),
-        /* @__PURE__ */ e(ge, { onClick: n })
+        /* @__PURE__ */ e(Re, { onClick: n })
       ] }),
       /* @__PURE__ */ d("p", { className: "text-xs text-stone mb-3", children: [
         "Select a ",
-        i.slice(0, -1),
+        a.slice(0, -1),
         " to start messaging (",
-        y.length,
+        E.length,
         " available)",
-        t.totalCount !== void 0 && ` • ${t.totalCount} ${i} total`
+        t.totalCount !== void 0 && ` • ${t.totalCount} ${a} total`
       ] }),
       /* @__PURE__ */ e(
-        qe,
+        fs,
         {
-          searchQuery: r,
-          setSearchQuery: b,
+          searchQuery: o,
+          setSearchQuery: C,
           placeholder: c
         }
       )
     ] }),
-    N && /* @__PURE__ */ d("div", { className: "p-4 text-sm text-danger bg-danger-alt", children: [
+    f && /* @__PURE__ */ d("div", { className: "p-4 text-sm text-danger bg-danger-alt", children: [
       "Error loading ",
-      i,
+      a,
       ": ",
-      N
+      f
     ] }),
-    /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: m && y.length === 0 ? /* @__PURE__ */ e("div", { className: "h-32 flex items-center justify-center", children: /* @__PURE__ */ d("div", { className: "flex items-center space-x-2", children: [
+    /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: b && E.length === 0 ? /* @__PURE__ */ e("div", { className: "h-32 flex items-center justify-center", children: /* @__PURE__ */ d("div", { className: "flex items-center space-x-2", children: [
       /* @__PURE__ */ e("div", { className: "w-4 h-4 animate-spin rounded-full border-2 border-primary border-t-transparent" }),
       /* @__PURE__ */ d("span", { className: "text-sm text-stone", children: [
         "Loading ",
-        i,
+        a,
         "..."
       ] })
-    ] }) }) : y.length === 0 ? /* @__PURE__ */ d("div", { className: "p-6 text-center", children: [
-      /* @__PURE__ */ e("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-sand", children: /* @__PURE__ */ e(ce, { className: "h-8 w-8 text-charcoal" }) }),
-      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold text-charcoal mb-2", children: r ? `No ${i} found` : u.length > 0 ? `Already chatting with all ${i}` : `No ${i} yet` }),
-      /* @__PURE__ */ e("p", { className: "text-xs text-stone", children: r ? "Try a different search term" : u.length > 0 ? `You have existing conversations with all your ${i}` : `${i.charAt(0).toUpperCase() + i.slice(1)} will appear here` })
+    ] }) }) : E.length === 0 ? /* @__PURE__ */ d("div", { className: "p-6 text-center", children: [
+      /* @__PURE__ */ e("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-sand", children: /* @__PURE__ */ e(me, { className: "h-8 w-8 text-charcoal" }) }),
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold text-charcoal mb-2", children: o ? `No ${a} found` : u.length > 0 ? `Already chatting with all ${a}` : `No ${a} yet` }),
+      /* @__PURE__ */ e("p", { className: "text-xs text-stone", children: o ? "Try a different search term" : u.length > 0 ? `You have existing conversations with all your ${a}` : `${a.charAt(0).toUpperCase() + a.slice(1)} will appear here` })
     ] }) : /* @__PURE__ */ d("ul", { className: "space-y-0", children: [
-      y.map((f) => {
-        const x = f.name || f.email || f.id, w = f.email && f.name ? f.email : f.phone;
+      E.map((g) => {
+        const v = g.name || g.email || g.id, y = g.email && g.name ? g.email : g.phone;
         return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
           "button",
           {
             type: "button",
-            onClick: () => k(f),
-            onKeyDown: (O) => T(O, f),
+            onClick: () => P(g),
+            onKeyDown: (F) => p(F, g),
             className: "w-full px-4 py-3 hover:bg-sand transition-colors border-b border-sand text-left focus:outline-none focus:ring-2 focus:ring-black",
             children: /* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ d("div", { className: "flex items-center space-x-3 flex-1 min-w-0", children: [
                 /* @__PURE__ */ e(
-                  J,
+                  se,
                   {
-                    id: f.id,
-                    name: x,
-                    image: f.image,
+                    id: g.id,
+                    name: v,
+                    image: g.image,
                     size: 40
                   }
                 ),
                 /* @__PURE__ */ d("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ e("h4", { className: "text-sm font-medium text-charcoal truncate", children: x }),
-                  w && /* @__PURE__ */ e("p", { className: "text-xs text-stone truncate", children: w })
+                  /* @__PURE__ */ e("h4", { className: "text-sm font-medium text-charcoal truncate", children: v }),
+                  y && /* @__PURE__ */ e("p", { className: "text-xs text-stone truncate", children: y })
                 ] })
               ] }),
-              /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: v === f.id ? /* @__PURE__ */ e(ee, { className: "h-5 w-5 text-primary animate-spin" }) : /* @__PURE__ */ e(ce, { className: "h-5 w-5 text-stone" }) })
+              /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: N === g.id ? /* @__PURE__ */ e(re, { className: "h-5 w-5 text-primary animate-spin" }) : /* @__PURE__ */ e(me, { className: "h-5 w-5 text-stone" }) })
             ] })
           }
-        ) }, f.id);
+        ) }, g.id);
       }),
-      m && /* @__PURE__ */ e("li", { className: "p-4 flex justify-center", children: /* @__PURE__ */ d("div", { className: "flex items-center space-x-2", children: [
+      b && /* @__PURE__ */ e("li", { className: "p-4 flex justify-center", children: /* @__PURE__ */ d("div", { className: "flex items-center space-x-2", children: [
         /* @__PURE__ */ e("div", { className: "w-4 h-4 animate-spin rounded-full border-2 border-primary border-t-transparent" }),
         /* @__PURE__ */ e("span", { className: "text-sm text-stone", children: "Loading more..." })
       ] }) })
     ] }) })
   ] });
-}, Qe = ({ hasChannels: t, onStartConversation: s, participantLabel: n }) => /* @__PURE__ */ e("div", { className: "messaging-empty-state flex items-center justify-center h-full p-8 text-balance", children: /* @__PURE__ */ d("div", { className: "text-center max-w-sm", children: [
+}, hs = ({ hasChannels: t, onStartConversation: s, participantLabel: n }) => /* @__PURE__ */ e("div", { className: "messaging-empty-state flex items-center justify-center h-full p-8 text-balance", children: /* @__PURE__ */ d("div", { className: "text-center max-w-sm", children: [
   /* @__PURE__ */ e("div", { className: "w-24 h-24 bg-primary-alt/10 rounded-full flex items-center justify-center mx-auto mb-6", children: /* @__PURE__ */ e("span", { className: "text-4xl", children: "💬" }) }),
   /* @__PURE__ */ e("h2", { className: "font-semibold text-charcoal", children: "Welcome to Messages" }),
-  /* @__PURE__ */ e("p", { className: "text-stone text-sm mb-6", children: t ? /* @__PURE__ */ d(oe, { children: [
+  /* @__PURE__ */ e("p", { className: "text-stone text-sm mb-6", children: t ? /* @__PURE__ */ d(de, { children: [
     "Choose a conversation from the list or",
     " ",
-    s && /* @__PURE__ */ d(ue, { onClick: s, children: [
+    s && /* @__PURE__ */ d(Ce, { onClick: s, children: [
       "start a new conversation with a ",
       n.slice(0, -1),
       "."
     ] })
-  ] }) : s && /* @__PURE__ */ d(oe, { children: [
-    /* @__PURE__ */ d(ue, { onClick: s, children: [
+  ] }) : s && /* @__PURE__ */ d(de, { children: [
+    /* @__PURE__ */ d(Ce, { onClick: s, children: [
       "Start a new conversation with one of your ",
       n
     ] }),
     " ",
     "to begin messaging."
   ] }) })
-] }) }), ue = ({
+] }) }), Ce = ({
   onClick: t,
   children: s
 }) => /* @__PURE__ */ e(
@@ -975,7 +1114,7 @@ const Xe = ({
     className: "inline-flex items-center gap-1 text-sm font-medium text-primary hover:text-primary-alt focus:outline-none focus:ring-2 focus:ring-primary",
     children: s
   }
-), le = ({ message: t, onBack: s }) => /* @__PURE__ */ e("div", { className: "messaging-error-state flex items-center justify-center h-full p-8", children: /* @__PURE__ */ d("div", { className: "text-center max-w-sm", children: [
+), ce = ({ message: t, onBack: s }) => /* @__PURE__ */ e("div", { className: "messaging-error-state flex items-center justify-center h-full p-8", children: /* @__PURE__ */ d("div", { className: "text-center max-w-sm", children: [
   /* @__PURE__ */ e("div", { className: "w-24 h-24 bg-danger-alt/20 rounded-full flex items-center justify-center mx-auto mb-6", children: /* @__PURE__ */ e("span", { className: "text-4xl", children: "⚠️" }) }),
   /* @__PURE__ */ e("h2", { className: "font-semibold text-charcoal mb-2", children: "Oops!" }),
   /* @__PURE__ */ e("p", { className: "text-stone text-sm mb-6", children: t }),
@@ -988,10 +1127,10 @@ const Xe = ({
       children: "Go Back"
     }
   )
-] }) }), Ze = ({ className: t, message: s }) => /* @__PURE__ */ d(
+] }) }), gs = ({ className: t, message: s }) => /* @__PURE__ */ d(
   "div",
   {
-    className: D("flex items-center justify-center h-full", t),
+    className: _("flex items-center justify-center h-full", t),
     children: [
       /* @__PURE__ */ d("svg", { viewBox: "0 0 100 100", className: "size-8 fill-pebble", stroke: "none", children: [
         /* @__PURE__ */ e("circle", { cx: "6", cy: "50", r: "6", children: /* @__PURE__ */ e(
@@ -1031,101 +1170,101 @@ const Xe = ({
       s && /* @__PURE__ */ e("span", { className: "text-stone", children: s })
     ]
   }
-), Je = () => /* @__PURE__ */ e("div", { className: "messaging-loading-state flex items-center justify-center h-full", children: /* @__PURE__ */ d("div", { className: "flex items-center", children: [
-  /* @__PURE__ */ e(Ze, { className: "w-6 h-6" }),
+), xs = () => /* @__PURE__ */ e("div", { className: "messaging-loading-state flex items-center justify-center h-full", children: /* @__PURE__ */ d("div", { className: "flex items-center", children: [
+  /* @__PURE__ */ e(gs, { className: "w-6 h-6" }),
   /* @__PURE__ */ e("span", { className: "text-sm text-stone", children: "Loading messages" })
-] }) }), os = ({
+] }) }), Ss = ({
   capabilities: t = {},
   className: s,
   renderMessageInputActions: n,
-  onChannelSelect: o,
-  onParticipantSelect: i,
+  onChannelSelect: l,
+  onParticipantSelect: a,
   initialParticipantFilter: c,
-  initialParticipantData: a,
-  CustomChannelEmptyState: l,
-  showChannelList: r = !0
+  initialParticipantData: i,
+  CustomChannelEmptyState: r,
+  showChannelList: o = !0
 }) => {
   const {
-    service: b,
+    service: C,
     client: u,
-    isConnected: g,
-    isLoading: m,
-    error: I,
-    refreshConnection: N,
-    debug: h
-  } = je(), [v, S] = E(null), [M, y] = E(!1), [k, T] = E(!1), [f, x] = E(/* @__PURE__ */ new Set()), [w, O] = E(0), [L, p] = E(!1), [H, G] = E(null), V = _(null), {
-    showStartConversation: Q = !1,
-    participantSource: W,
-    participantLabel: z = "participants"
-  } = t, R = _(null), P = F(async () => {
-    if (!u || !g) return;
-    const C = u.userID;
-    if (C)
+    isConnected: x,
+    isLoading: b,
+    error: h,
+    refreshConnection: f,
+    debug: m
+  } = Ze(), [N, S] = I(null), [k, E] = I(!1), [P, p] = I(!1), [g, v] = I(/* @__PURE__ */ new Set()), [y, F] = I(0), [T, j] = I(!1), [H, q] = I(null), W = A(null), {
+    showStartConversation: J = !1,
+    participantSource: z,
+    participantLabel: V = "participants"
+  } = t, R = A(null), D = M(async () => {
+    if (!u || !x) return;
+    const w = u.userID;
+    if (w)
       try {
-        h && console.log("[MessagingShell] Syncing channels for user:", C);
-        const j = await u.queryChannels(
+        m && console.log("[MessagingShell] Syncing channels for user:", w);
+        const U = await u.queryChannels(
           {
             type: "messaging",
-            members: { $in: [C] }
+            members: { $in: [w] }
           },
           {},
           { limit: 100 }
-        ), U = /* @__PURE__ */ new Set();
-        j.forEach((B) => {
-          const Ce = B.state.members;
-          Object.values(Ce).forEach((ve) => {
-            var ae;
-            const re = (ae = ve.user) == null ? void 0 : ae.id;
-            re && re !== C && U.add(re);
+        ), O = /* @__PURE__ */ new Set();
+        U.forEach((B) => {
+          const Fe = B.state.members;
+          Object.values(Fe).forEach((Me) => {
+            var ue;
+            const ie = (ue = Me.user) == null ? void 0 : ue.id;
+            ie && ie !== w && O.add(ie);
           });
-        }), x(U), y(j.length > 0), R.current = C, h && console.log("[MessagingShell] Channels synced successfully:", {
-          channelCount: j.length,
-          memberCount: U.size
+        }), v(O), E(U.length > 0), R.current = w, m && console.log("[MessagingShell] Channels synced successfully:", {
+          channelCount: U.length,
+          memberCount: O.size
         });
-      } catch (j) {
-        console.error("[MessagingShell] Failed to sync channels:", j);
+      } catch (U) {
+        console.error("[MessagingShell] Failed to sync channels:", U);
       }
-  }, [u, g, h]);
+  }, [u, x, m]);
   $(() => {
-    if (!u || !g) return;
-    const C = u.userID;
-    C && R.current !== C && P();
-  }, [u, g, P]), $(() => {
-    if (!c || !u || !g) return;
+    if (!u || !x) return;
+    const w = u.userID;
+    w && R.current !== w && D();
+  }, [u, x, D]), $(() => {
+    if (!c || !u || !x) return;
     (async () => {
-      const j = u.userID;
-      if (j)
+      const U = u.userID;
+      if (U)
         try {
-          h && console.log(
+          m && console.log(
             "[MessagingShell] Loading initial conversation with:",
             c
           );
-          const U = await u.queryChannels(
+          const O = await u.queryChannels(
             {
               type: "messaging",
-              members: { $eq: [j, c] }
+              members: { $eq: [U, c] }
             },
             {},
             { limit: 1 }
           );
-          if (U.length > 0)
-            S(U[0]), p(!0), G(null), o && o(U[0]), h && console.log(
+          if (O.length > 0)
+            S(O[0]), j(!0), q(null), l && l(O[0]), m && console.log(
               "[MessagingShell] Initial conversation loaded:",
-              U[0].id
+              O[0].id
             );
-          else if (a && b) {
-            h && console.log(
+          else if (i && C) {
+            m && console.log(
               "[MessagingShell] No conversation found, creating one for:",
-              a
+              i
             );
             try {
-              const B = await b.startChannelWithParticipant({
-                id: a.id,
-                name: a.name,
-                email: a.email,
-                phone: a.phone
+              const B = await C.startChannelWithParticipant({
+                id: i.id,
+                name: i.name,
+                email: i.email,
+                phone: i.phone
               });
-              S(B), p(!0), G(null), o && o(B), h && console.log(
+              S(B), j(!0), q(null), l && l(B), m && console.log(
                 "[MessagingShell] Channel created and loaded:",
                 B.id
               );
@@ -1133,91 +1272,91 @@ const Xe = ({
               console.error(
                 "[MessagingShell] Failed to create conversation:",
                 B
-              ), G("Failed to create conversation");
+              ), q("Failed to create conversation");
             }
           } else
-            G(
+            q(
               "No conversation found with this account"
-            ), h && console.log(
+            ), m && console.log(
               "[MessagingShell] No conversation found for:",
               c
             );
-        } catch (U) {
+        } catch (O) {
           console.error(
             "[MessagingShell] Failed to load initial conversation:",
-            U
-          ), G("Failed to load conversation");
+            O
+          ), q("Failed to load conversation");
         }
     })();
   }, [
     c,
-    a,
+    i,
     u,
-    g,
-    b,
-    h,
-    o
+    x,
+    C,
+    m,
+    l
   ]);
-  const A = F(
-    (C) => {
-      S(C), o == null || o(C);
+  const L = M(
+    (w) => {
+      S(w), l == null || l(w);
     },
-    [o]
-  ), q = F(() => {
-    L || S(null);
-  }, [L]), Z = F(() => {
-    var C;
-    W && (O((j) => j + 1), T(!0), (C = V.current) == null || C.showModal());
-  }, [W]), xe = F(
-    async (C) => {
-      var j;
-      if (b)
+    [l]
+  ), X = M(() => {
+    T || S(null);
+  }, [T]), Y = M(() => {
+    var w;
+    z && (F((U) => U + 1), p(!0), (w = W.current) == null || w.showModal());
+  }, [z]), pe = M(
+    async (w) => {
+      var U;
+      if (C)
         try {
-          h && console.log(
+          m && console.log(
             "[MessagingShell] Starting conversation with:",
-            C.id
+            w.id
           );
-          const U = await b.startChannelWithParticipant({
-            id: C.id,
-            name: C.name,
-            email: C.email,
-            phone: C.phone
+          const O = await C.startChannelWithParticipant({
+            id: w.id,
+            name: w.name,
+            email: w.email,
+            phone: w.phone
           });
           try {
-            await U.show();
+            await O.show();
           } catch (B) {
             console.warn("[MessagingShell] Failed to unhide channel:", B);
           }
-          S(U), T(!1), (j = V.current) == null || j.close(), i == null || i(C);
-        } catch (U) {
-          console.error("[MessagingShell] Failed to start conversation:", U);
+          S(O), p(!1), (U = W.current) == null || U.close(), a == null || a(w);
+        } catch (O) {
+          console.error("[MessagingShell] Failed to start conversation:", O);
         }
     },
-    [b, i, h]
-  ), te = F(() => {
-    var C;
-    T(!1), (C = V.current) == null || C.close();
-  }, []), Ne = F(
-    async (C) => {
-      h && console.log("[MessagingShell] Leaving conversation:", C.id), S(null), p(!1), R.current = null, await P();
+    [C, a, m]
+  ), ae = M(() => {
+    var w;
+    p(!1), (w = W.current) == null || w.close();
+  }, []), _e = M(
+    async (w) => {
+      m && console.log("[MessagingShell] Leaving conversation:", w.id), S(null), j(!1), R.current = null, await D();
     },
-    [P, h]
-  ), be = F(
-    async (C) => {
-      h && console.log("[MessagingShell] Blocking participant:", C), S(null), p(!1), R.current = null, await P();
+    [D, m]
+  ), De = M(
+    async (w) => {
+      m && console.log("[MessagingShell] Blocking participant:", w), S(null), j(!1), R.current = null, await D();
     },
-    [P, h]
-  ), Y = !!v;
-  return m ? /* @__PURE__ */ e("div", { className: D("h-full", s), children: /* @__PURE__ */ e(Je, {}) }) : I ? /* @__PURE__ */ e("div", { className: D("h-full", s), children: /* @__PURE__ */ e(le, { message: I, onBack: N }) }) : !g || !u ? /* @__PURE__ */ e("div", { className: D("h-full", s), children: /* @__PURE__ */ e(
-    le,
+    [D, m]
+  ), te = !!N;
+  return b ? /* @__PURE__ */ e("div", { className: _("h-full", s), children: /* @__PURE__ */ e(xs, {}) }) : h ? /* @__PURE__ */ e("div", { className: _("h-full", s), children: /* @__PURE__ */ e(ce, { message: h, onBack: f }) }) : !x || !u ? /* @__PURE__ */ e("div", { className: _("h-full", s), children: /* @__PURE__ */ e(
+    ce,
     {
       message: "Not connected to messaging service",
-      onBack: N
+      onBack: f
     }
-  ) }) : H ? /* @__PURE__ */ e("div", { className: D("h-full", s), children: /* @__PURE__ */ e(le, { message: H }) }) : /* @__PURE__ */ d(
+  ) }) : H ? /* @__PURE__ */ e("div", { className: _("h-full", s), children: /* @__PURE__ */ e(ce, { message: H }) }) : /* @__PURE__ */ d(
     "div",
     {
-      className: D(
+      className: _(
         "messaging-shell h-full bg-white overflow-hidden",
         s
       ),
@@ -1226,25 +1365,25 @@ const Xe = ({
           /* @__PURE__ */ e(
             "div",
             {
-              className: D(
+              className: _(
                 "messaging-channel-list-sidebar min-h-0 min-w-0 bg-white lg:bg-chalk lg:flex lg:flex-col lg:border-r lg:border-sand",
                 {
                   // Explicitly hidden via prop or in direct conversation mode
-                  "!hidden": r === !1 || L,
+                  "!hidden": o === !1 || T,
                   // Normal mode: hide on mobile when channel selected, show on desktop
-                  "hidden lg:flex lg:w-80 lg:min-w-[280px] lg:max-w-[360px]": r !== !1 && !L && Y,
+                  "hidden lg:flex lg:w-80 lg:min-w-[280px] lg:max-w-[360px]": o !== !1 && !T && te,
                   // Normal mode: show when no channel selected
-                  "flex flex-col w-full lg:flex-1 lg:max-w-2xl": r !== !1 && !L && !Y
+                  "flex flex-col w-full lg:flex-1 lg:max-w-2xl": o !== !1 && !T && !te
                 }
               ),
               children: /* @__PURE__ */ e(
-                $e,
+                os,
                 {
-                  onChannelSelect: A,
-                  selectedChannel: v || void 0,
-                  showStartConversation: Q && !!W,
-                  onStartConversation: Z,
-                  participantLabel: z
+                  onChannelSelect: L,
+                  selectedChannel: N || void 0,
+                  showStartConversation: J && !!z,
+                  onStartConversation: Y,
+                  participantLabel: V
                 }
               )
             }
@@ -1252,70 +1391,70 @@ const Xe = ({
           /* @__PURE__ */ e(
             "div",
             {
-              className: D(
+              className: _(
                 "messaging-conversation-view flex-1 flex-col min-w-0 min-h-0",
                 {
                   // In direct conversation mode, always show (full width)
-                  flex: L || Y,
+                  flex: T || te,
                   // Normal mode: hide on mobile when no channel selected
-                  "hidden lg:flex": !L && !Y
+                  "hidden lg:flex": !T && !te
                 }
               ),
-              children: v ? /* @__PURE__ */ e("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ e(
-                ze,
+              children: N ? /* @__PURE__ */ e("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ e(
+                us,
                 {
-                  channel: v,
-                  onBack: q,
-                  showBackButton: !L,
+                  channel: N,
+                  onBack: X,
+                  showBackButton: !T,
                   renderMessageInputActions: n,
-                  onLeaveConversation: Ne,
-                  onBlockParticipant: be,
-                  CustomChannelEmptyState: l
+                  onLeaveConversation: _e,
+                  onBlockParticipant: De,
+                  CustomChannelEmptyState: r
                 },
-                v.id
+                N.id
               ) }) : /* @__PURE__ */ e(
-                Qe,
+                hs,
                 {
-                  hasChannels: M,
-                  onStartConversation: Q ? Z : void 0,
-                  participantLabel: z
+                  hasChannels: k,
+                  onStartConversation: J ? Y : void 0,
+                  participantLabel: V
                 }
               )
             }
           )
         ] }),
-        W && // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+        z && // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
         /* @__PURE__ */ e(
           "dialog",
           {
-            ref: V,
+            ref: W,
             className: "mes-dialog",
-            onClick: (C) => {
-              C.target === V.current && te();
+            onClick: (w) => {
+              w.target === W.current && ae();
             },
-            onClose: te,
+            onClose: ae,
             children: /* @__PURE__ */ e("div", { className: "h-full w-full bg-white shadow-max-elevation-light", children: /* @__PURE__ */ e(
-              Xe,
+              ms,
               {
-                participantSource: W,
-                onSelectParticipant: xe,
-                onClose: te,
-                existingParticipantIds: f,
-                participantLabel: z,
-                searchPlaceholder: `Search ${z}...`
+                participantSource: z,
+                onSelectParticipant: pe,
+                onClose: ae,
+                existingParticipantIds: g,
+                participantLabel: V,
+                searchPlaceholder: `Search ${V}...`
               },
-              w
+              y
             ) })
           }
         )
       ]
     }
   );
-}, Ye = ({
+}, bs = ({
   question: t,
   onClick: s,
   loading: n = !1,
-  className: o
+  className: l
 }) => /* @__PURE__ */ e(
   "button",
   {
@@ -1323,32 +1462,32 @@ const Xe = ({
     onClick: s,
     disabled: n,
     style: { backgroundColor: "#E6E5E3" },
-    className: D(
+    className: _(
       "w-full text-center p-4 rounded-xl text-charcoal font-medium transition-colors",
       {
         "hover:brightness-95 active:brightness-90": !n,
         "opacity-50 cursor-not-allowed": n
       },
-      o
+      l
     ),
     children: t
   }
-), as = ({
+), ks = ({
   faqs: t,
   onFaqClick: s,
   loadingFaqId: n,
-  headerText: o,
-  className: i,
+  headerText: l,
+  className: a,
   avatarImage: c,
-  avatarName: a
+  avatarName: i
 }) => {
-  const l = t.filter((r) => r.enabled).sort((r, b) => (r.order ?? 0) - (b.order ?? 0));
-  return l.length === 0 ? null : /* @__PURE__ */ e("div", { className: D("px-4 py-6", i), children: /* @__PURE__ */ d("div", { className: "flex gap-3 items-end", children: [
-    (c || a) && /* @__PURE__ */ e("div", { className: "flex-none", children: /* @__PURE__ */ e(
-      J,
+  const r = t.filter((o) => o.enabled).sort((o, C) => (o.order ?? 0) - (C.order ?? 0));
+  return r.length === 0 ? null : /* @__PURE__ */ e("div", { className: _("px-4 py-6", a), children: /* @__PURE__ */ d("div", { className: "flex gap-3 items-end", children: [
+    (c || i) && /* @__PURE__ */ e("div", { className: "flex-none", children: /* @__PURE__ */ e(
+      se,
       {
-        id: a || "account",
-        name: a || "Account",
+        id: i || "account",
+        name: i || "Account",
         image: c,
         size: 24
       }
@@ -1359,71 +1498,72 @@ const Xe = ({
         className: "flex-1 rounded-lg p-4 space-y-3",
         style: { backgroundColor: "#F1F0EE" },
         children: [
-          o && /* @__PURE__ */ e("p", { className: "text-md text-charcoal mb-4", children: o }),
-          l.map((r) => /* @__PURE__ */ e(
-            Ye,
+          l && /* @__PURE__ */ e("p", { className: "text-md text-charcoal mb-4", children: l }),
+          r.map((o) => /* @__PURE__ */ e(
+            bs,
             {
-              question: r.question,
-              onClick: () => s(r.id),
-              loading: n === r.id
+              question: o.question,
+              onClick: () => s(o.id),
+              loading: n === o.id
             },
-            r.id
+            o.id
           ))
         ]
       }
     )
   ] }) });
-}, is = (t, s = {}) => {
-  const { initialSearch: n = "", pageSize: o = 20 } = s, [i, c] = E([]), [a, l] = E(!1), [r, b] = E(null), [u, g] = E(n), [m, I] = E(!0), [N, h] = E(), v = F(async (k = !1, T) => {
-    if (a) return;
-    const f = T !== void 0 ? T : u;
-    l(!0), b(null);
+}, Rs = (t, s = {}) => {
+  const { initialSearch: n = "", pageSize: l = 20 } = s, [a, c] = I([]), [i, r] = I(!1), [o, C] = I(null), [u, x] = I(n), [b, h] = I(!0), [f, m] = I(), N = M(async (P = !1, p) => {
+    if (i) return;
+    const g = p !== void 0 ? p : u;
+    r(!0), C(null);
     try {
-      const x = await t.loadParticipants({
-        search: f || void 0,
-        limit: o,
-        cursor: k ? void 0 : N
+      const v = await t.loadParticipants({
+        search: g || void 0,
+        limit: l,
+        cursor: P ? void 0 : f
       });
       c(
-        (w) => k ? x.participants : [...w, ...x.participants]
-      ), I(x.hasMore), h(x.nextCursor);
-    } catch (x) {
-      const w = x instanceof Error ? x.message : "Failed to load participants";
-      b(w), console.error("[useParticipants] Load error:", x);
+        (y) => P ? v.participants : [...y, ...v.participants]
+      ), h(v.hasMore), m(v.nextCursor);
+    } catch (v) {
+      const y = v instanceof Error ? v.message : "Failed to load participants";
+      C(y), console.error("[useParticipants] Load error:", v);
     } finally {
-      l(!1);
+      r(!1);
     }
-  }, [t, u, N, o, a]), S = F(() => {
-    m && !a && v(!1);
-  }, [m, a, v]), M = F((k) => {
-    g(k), h(void 0), v(!0, k);
-  }, [v]), y = F(() => {
-    h(void 0), v(!0);
-  }, [v]);
+  }, [t, u, f, l, i]), S = M(() => {
+    b && !i && N(!1);
+  }, [b, i, N]), k = M((P) => {
+    x(P), m(void 0), N(!0, P);
+  }, [N]), E = M(() => {
+    m(void 0), N(!0);
+  }, [N]);
   return $(() => {
-    v(!0);
+    N(!0);
   }, [t.loadParticipants]), {
-    participants: i,
-    loading: a,
-    error: r,
+    participants: a,
+    loading: i,
+    error: o,
     searchQuery: u,
-    hasMore: m,
+    hasMore: b,
     totalCount: t.totalCount,
     loadMore: S,
-    search: M,
-    refresh: y
+    search: k,
+    refresh: E
   };
 };
 export {
-  J as Avatar,
-  $e as ChannelList,
-  ze as ChannelView,
-  as as FaqList,
-  Ye as FaqListItem,
-  ls as MessagingProvider,
-  os as MessagingShell,
-  Xe as ParticipantPicker,
-  je as useMessaging,
-  is as useParticipants
+  se as Avatar,
+  Pe as ChannelEmptyState,
+  os as ChannelList,
+  us as ChannelView,
+  ks as FaqList,
+  bs as FaqListItem,
+  Is as MessagingProvider,
+  Ss as MessagingShell,
+  ms as ParticipantPicker,
+  Ze as useMessaging,
+  Rs as useParticipants
 };
 //# sourceMappingURL=index.js.map