@linktr.ee/messaging-react 1.0.0 → 1.0.2

package/dist/index.js

@@ -21,10 +21,10 @@ const Le = de({
       weights: s,
       ...w
     } = n, {
-      color: N = "currentColor",
-      size: g,
+      color: C = "currentColor",
+      size: f,
       weight: i = "regular",
-      mirrored: C = !1,
+      mirrored: b = !1,
       ...x
     } = e.useContext(Le);
     return /* @__PURE__ */ e.createElement(
@@ -32,11 +32,11 @@ const Le = de({
       {
         ref: a,
         xmlns: "http://www.w3.org/2000/svg",
-        width: c ?? g,
-        height: c ?? g,
-        fill: o ?? N,
+        width: c ?? f,
+        height: c ?? f,
+        fill: o ?? C,
         viewBox: "0 0 256 256",
-        transform: u || C ? "scale(-1, 1)" : void 0,
+        transform: u || b ? "scale(-1, 1)" : void 0,
         ...x,
         ...w
       },
@@ -115,8 +115,8 @@ const he = de({
   customization: m = {},
   debug: u = !1
 }) => {
-  const r = (b, ...M) => {
-    u && console.log(`🔥 [MessagingProvider] ${b}`, ...M);
+  const r = (N, ...M) => {
+    u && console.log(`🔥 [MessagingProvider] ${N}`, ...M);
   };
   r("🔄 RENDER START", {
     userId: a == null ? void 0 : a.id,
@@ -125,7 +125,7 @@ const he = de({
     capabilities: Object.keys(c),
     customization: Object.keys(m)
   });
-  const [s, w] = A(null), [N, g] = A(null), [i, C] = A(!1), [x, p] = A(!1), [Z, V] = A(null), R = $(!1), v = $({ userId: a == null ? void 0 : a.id, apiKey: o, serviceConfig: l, capabilities: c, customization: m }), y = $(0);
+  const [s, w] = A(null), [C, f] = A(null), [i, b] = A(!1), [x, p] = A(!1), [Z, V] = A(null), R = $(!1), v = $({ userId: a == null ? void 0 : a.id, apiKey: o, serviceConfig: l, capabilities: c, customization: m }), y = $(0);
   y.current++, r("📊 RENDER INFO", {
     renderCount: y.current,
     currentProps: { userId: a == null ? void 0 : a.id, apiKey: (o == null ? void 0 : o.substring(0, 8)) + "..." },
@@ -137,9 +137,9 @@ const he = de({
       customizationChanged: v.current.customization !== m
     }
   }), v.current = { userId: a == null ? void 0 : a.id, apiKey: o, serviceConfig: l, capabilities: c, customization: m }, B(() => {
-    const b = y.current;
+    const N = y.current;
     if (r("🔧 SERVICE INIT EFFECT TRIGGERED", {
-      renderCount: b,
+      renderCount: N,
       apiKey: !!o,
       serviceConfig: !!l,
       dependencies: {
@@ -149,11 +149,11 @@ const he = de({
         apiKeyStable: v.current.apiKey === o
       }
     }), !o || !l) {
-      r("⚠️ SERVICE INIT SKIPPED", { renderCount: b, reason: "Missing apiKey or serviceConfig" });
+      r("⚠️ SERVICE INIT SKIPPED", { renderCount: N, reason: "Missing apiKey or serviceConfig" });
       return;
     }
     r("🚀 CREATING NEW SERVICE", {
-      renderCount: b,
+      renderCount: N,
       apiKey: (o == null ? void 0 : o.substring(0, 8)) + "...",
       serviceConfigChanged: v.current.serviceConfig !== l
     });
@@ -162,8 +162,8 @@ const he = de({
       apiKey: o,
       debug: u
     });
-    return w(M), r("✅ SERVICE SET", { renderCount: b, serviceInstance: !!M }), () => {
-      r("🧹 SERVICE CLEANUP", { renderCount: b, reason: "Effect cleanup" }), M.disconnectUser().catch(console.error);
+    return w(M), r("✅ SERVICE SET", { renderCount: N, serviceInstance: !!M }), () => {
+      r("🧹 SERVICE CLEANUP", { renderCount: N, reason: "Effect cleanup" }), M.disconnectUser().catch(console.error);
     };
   }, [o, l]);
   const F = $(null);
@@ -193,7 +193,7 @@ const he = de({
       try {
         r("📞 CALLING SERVICE.CONNECTUSER", { userId: a.id });
         const k = await s.connectUser(a);
-        g(k), C(!0), F.current = { serviceId: s, userId: a.id }, r("✅ USER CONNECTION SUCCESS", { userId: a.id, clientId: k.userID });
+        f(k), b(!0), F.current = { serviceId: s, userId: a.id }, r("✅ USER CONNECTION SUCCESS", { userId: a.id, clientId: k.userID });
       } catch (k) {
         const P = k instanceof Error ? k.message : "Connection failed";
         V(P), r("❌ USER CONNECTION ERROR", { userId: a.id, error: P });
@@ -204,7 +204,7 @@ const he = de({
   }, [s, a]), B(() => (r("🔌 CLEANUP EFFECT REGISTERED", { hasService: !!s, isConnected: i }), () => {
     s && i ? (r("🧹 CLEANUP EFFECT TRIGGERED", "Cleaning up connection on unmount"), F.current = null, s.disconnectUser().catch(console.error)) : r("🔇 CLEANUP EFFECT SKIPPED", { hasService: !!s, isConnected: i });
   }), [s, i]);
-  const f = H(async () => {
+  const g = H(async () => {
     if (r("🔄 REFRESH CONNECTION CALLED", { hasService: !!s, hasUser: !!a }), !s || !a) {
       r("⚠️ REFRESH CONNECTION SKIPPED", "Missing service or user");
       return;
@@ -212,17 +212,17 @@ const he = de({
     r("🚀 STARTING CONNECTION REFRESH", { userId: a.id }), p(!0);
     try {
       r("🔌 DISCONNECTING FOR REFRESH"), await s.disconnectUser(), r("📞 RECONNECTING FOR REFRESH");
-      const b = await s.connectUser(a);
-      g(b), C(!0), V(null), r("✅ CONNECTION REFRESH SUCCESS", { userId: a.id });
-    } catch (b) {
-      const M = b instanceof Error ? b.message : "Refresh failed";
+      const N = await s.connectUser(a);
+      f(N), b(!0), V(null), r("✅ CONNECTION REFRESH SUCCESS", { userId: a.id });
+    } catch (N) {
+      const M = N instanceof Error ? N.message : "Refresh failed";
       V(M), r("❌ CONNECTION REFRESH ERROR", { userId: a.id, error: M });
     } finally {
       p(!1), r("🔄 CONNECTION REFRESH FINISHED", { userId: a.id });
     }
   }, [s, a]), h = _.useMemo(() => (r("💫 CONTEXT VALUE MEMOIZATION", {
     hasService: !!s,
-    hasClient: !!N,
+    hasClient: !!C,
     isConnected: i,
     isLoading: x,
     hasError: !!Z,
@@ -230,46 +230,46 @@ const he = de({
     customizationKeys: Object.keys(m)
   }), {
     service: s,
-    client: N,
+    client: C,
     isConnected: i,
     isLoading: x,
     error: Z,
     capabilities: c,
     customization: m,
-    refreshConnection: f,
+    refreshConnection: g,
     debug: u
-  }), [s, N, i, x, Z, c, m, f, u]);
+  }), [s, C, i, x, Z, c, m, g, u]);
   return r("🔄 RENDER END", {
     renderCount: y.current,
-    willRenderChat: !!(N && i),
+    willRenderChat: !!(C && i),
     contextValueReady: !!h
-  }), /* @__PURE__ */ t(he.Provider, { value: h, children: N && i ? /* @__PURE__ */ t(Ae, { client: N, children: n }) : n });
+  }), /* @__PURE__ */ t(he.Provider, { value: h, children: C && i ? /* @__PURE__ */ t(Ae, { client: C, children: n }) : n });
 };
 function He(n) {
   const a = [
-    { bgColor: "bg-primary bg-opacity-20", textColor: "text-primary" },
+    { bgColor: "bg-primary/20", textColor: "text-primary" },
     // #8129D9 - purple
-    { bgColor: "bg-forest bg-opacity-20", textColor: "text-forest" },
+    { bgColor: "bg-forest/20", textColor: "text-forest" },
     // #254f1a - dark green
-    { bgColor: "bg-iris bg-opacity-20", textColor: "text-iris" },
+    { bgColor: "bg-iris/20", textColor: "text-iris" },
     // #061492 - dark blue
-    { bgColor: "bg-shade bg-opacity-20", textColor: "text-shade" },
+    { bgColor: "bg-shade/20", textColor: "text-shade" },
     // #1e2330 - dark blue-gray
-    { bgColor: "bg-dahlia bg-opacity-20", textColor: "text-dahlia" },
+    { bgColor: "bg-dahlia/20", textColor: "text-dahlia" },
     // #502274 - dark purple
-    { bgColor: "bg-orchid bg-opacity-20", textColor: "text-orchid" },
+    { bgColor: "bg-orchid/20", textColor: "text-orchid" },
     // #d717e7 - magenta
-    { bgColor: "bg-currant bg-opacity-20", textColor: "text-currant" },
+    { bgColor: "bg-currant/20", textColor: "text-currant" },
     // #780016 - dark red
-    { bgColor: "bg-apple bg-opacity-20", textColor: "text-apple" },
+    { bgColor: "bg-apple/20", textColor: "text-apple" },
     // #c41500 - red
-    { bgColor: "bg-rose bg-opacity-20", textColor: "text-rose" },
+    { bgColor: "bg-rose/20", textColor: "text-rose" },
     // #fc3e4b - pink
-    { bgColor: "bg-root bg-opacity-20", textColor: "text-root" },
+    { bgColor: "bg-root/20", textColor: "text-root" },
     // #4c2e05 - brown
-    { bgColor: "bg-poppy bg-opacity-20", textColor: "text-poppy" },
+    { bgColor: "bg-poppy/20", textColor: "text-poppy" },
     // #ff6c02 - orange
-    { bgColor: "bg-moss bg-opacity-20", textColor: "text-moss" }
+    { bgColor: "bg-moss/20", textColor: "text-moss" }
     // #70764d - olive green
   ];
   let l = 0;
@@ -315,18 +315,24 @@ const ee = ({
       )
     }
   );
-}, Se = ({ channel: n, selectedChannel: a, onChannelSelect: l, debug: o = !1, ...c }) => {
+}, Se = ({
+  channel: n,
+  selectedChannel: a,
+  onChannelSelect: l,
+  debug: o = !1,
+  ...c
+}) => {
   var p, Z, V, R, v, y, F;
   const m = (a == null ? void 0 : a.id) === (n == null ? void 0 : n.id), u = () => {
     n && l(n);
   }, s = Object.values(((p = n == null ? void 0 : n.state) == null ? void 0 : p.members) || {}).find(
-    (f) => {
-      var h, b;
-      return ((h = f.user) == null ? void 0 : h.id) && f.user.id !== ((b = n == null ? void 0 : n._client) == null ? void 0 : b.userID);
+    (g) => {
+      var h, N;
+      return ((h = g.user) == null ? void 0 : h.id) && g.user.id !== ((N = n == null ? void 0 : n._client) == null ? void 0 : N.userID);
     }
-  ), w = ((Z = s == null ? void 0 : s.user) == null ? void 0 : Z.name) || "Conversation", N = (V = s == null ? void 0 : s.user) == null ? void 0 : V.image;
+  ), w = ((Z = s == null ? void 0 : s.user) == null ? void 0 : Z.name) || "Conversation", C = (V = s == null ? void 0 : s.user) == null ? void 0 : V.image;
   w.charAt(0).toUpperCase();
-  const g = (v = (R = n == null ? void 0 : n.state) == null ? void 0 : R.messages) == null ? void 0 : v[n.state.messages.length - 1], i = (g == null ? void 0 : g.text) || "No messages yet", C = g != null && g.created_at ? new Date(g.created_at).toLocaleTimeString([], {
+  const f = (v = (R = n == null ? void 0 : n.state) == null ? void 0 : R.messages) == null ? void 0 : v[n.state.messages.length - 1], i = (f == null ? void 0 : f.text) || "No messages yet", b = f != null && f.created_at ? new Date(f.created_at).toLocaleTimeString([], {
     hour: "2-digit",
     minute: "2-digit"
   }) : "", x = ((y = n == null ? void 0 : n.state) == null ? void 0 : y.unreadCount) || 0;
@@ -335,7 +341,7 @@ const ee = ({
     isSelected: m,
     participantName: w,
     unread: x,
-    hasTimestamp: !!C
+    hasTimestamp: !!b
   }), /* @__PURE__ */ t(
     "button",
     {
@@ -344,7 +350,7 @@ const ee = ({
       className: L(
         "w-full px-4 py-3 transition-colors border-b border-sand text-left max-w-full overflow-hidden focus-ring",
         {
-          "bg-primary-alt bg-opacity-10 border-l-4 border-l-primary": m,
+          "bg-primary-alt/10 border-l-4 border-l-primary": m,
           "hover:bg-sand": !m
         }
       ),
@@ -354,7 +360,7 @@ const ee = ({
           {
             id: ((F = s == null ? void 0 : s.user) == null ? void 0 : F.id) || n.id || "unknown",
             name: w,
-            image: N,
+            image: C,
             size: 44
           }
         ),
@@ -370,7 +376,7 @@ const ee = ({
                 children: w
               }
             ),
-            C && /* @__PURE__ */ t("span", { className: "text-xs text-stone flex-shrink-0", children: C })
+            b && /* @__PURE__ */ t("span", { className: "text-xs text-stone flex-shrink-0", children: b })
           ] }),
           /* @__PURE__ */ d("div", { className: "flex items-center justify-between gap-2 min-w-0", children: [
             /* @__PURE__ */ t("p", { className: "text-xs text-stone mr-2 flex-1 line-clamp-2", children: i }),
@@ -388,7 +394,7 @@ const ee = ({
   participantLabel: c = "participants",
   className: m
 }) => {
-  var N;
+  var C;
   const u = _.useRef(0);
   u.current++;
   const { debug: r = !1 } = K();
@@ -403,13 +409,13 @@ const ee = ({
     renderCount: u.current,
     hasClient: !!s,
     clientUserId: s == null ? void 0 : s.userID,
-    clientConnected: (N = s == null ? void 0 : s.wsConnection) == null ? void 0 : N.isHealthy
+    clientConnected: (C = s == null ? void 0 : s.wsConnection) == null ? void 0 : C.isHealthy
   });
   const w = _.useMemo(() => {
-    const g = s.userID, i = g ? { type: "messaging", members: { $in: [g] }, hidden: !1 } : { type: "messaging" };
+    const f = s.userID, i = f ? { type: "messaging", members: { $in: [f] }, hidden: !1 } : { type: "messaging" };
     return r && console.log("📺 [ChannelList] 🔍 FILTERS MEMOIZED", {
       renderCount: u.current,
-      userId: g,
+      userId: f,
       filters: i
     }), i;
   }, [s.userID, r]);
@@ -437,16 +443,16 @@ const ee = ({
         filters: w,
         sort: { last_message_at: -1 },
         options: { limit: 30 },
-        Preview: (g) => {
-          var i, C;
+        Preview: (f) => {
+          var i, b;
           return r && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
-            channelId: (i = g.channel) == null ? void 0 : i.id,
+            channelId: (i = f.channel) == null ? void 0 : i.id,
             selectedChannelId: a == null ? void 0 : a.id,
-            isSelected: (a == null ? void 0 : a.id) === ((C = g.channel) == null ? void 0 : C.id)
+            isSelected: (a == null ? void 0 : a.id) === ((b = f.channel) == null ? void 0 : b.id)
           }), /* @__PURE__ */ t(
             Se,
             {
-              ...g,
+              ...f,
               selectedChannel: a,
               onChannelSelect: n,
               debug: r
@@ -547,8 +553,8 @@ const De = /* @__PURE__ */ new Map([
     "thin",
     /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M116,216a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V40a4,4,0,0,1,4-4h64a4,4,0,0,1,0,8H52V212h60A4,4,0,0,1,116,216Zm110.83-90.83-40-40a4,4,0,0,0-5.66,5.66L214.34,124H112a4,4,0,0,0,0,8H214.34l-33.17,33.17a4,4,0,0,0,5.66,5.66l40-40A4,4,0,0,0,226.83,125.17Z" }))
   ]
-]), ge = e.forwardRef((n, a) => /* @__PURE__ */ e.createElement(D, { ref: a, ...n, weights: De }));
-ge.displayName = "SignOutIcon";
+]), fe = e.forwardRef((n, a) => /* @__PURE__ */ e.createElement(D, { ref: a, ...n, weights: De }));
+fe.displayName = "SignOutIcon";
 const Oe = /* @__PURE__ */ new Map([
   [
     "bold",
@@ -601,8 +607,8 @@ const Ue = /* @__PURE__ */ new Map([
     "thin",
     /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M220,128a4,4,0,0,1-4,4H49.66l65.17,65.17a4,4,0,0,1-5.66,5.66l-72-72a4,4,0,0,1,0-5.66l72-72a4,4,0,0,1,5.66,5.66L49.66,124H216A4,4,0,0,1,220,128Z" }))
   ]
-]), fe = e.forwardRef((n, a) => /* @__PURE__ */ e.createElement(D, { ref: a, ...n, weights: Ue }));
-fe.displayName = "ArrowLeftIcon";
+]), ge = e.forwardRef((n, a) => /* @__PURE__ */ e.createElement(D, { ref: a, ...n, weights: Ue }));
+ge.displayName = "ArrowLeftIcon";
 const $e = /* @__PURE__ */ new Map([
   [
     "bold",
@@ -693,13 +699,13 @@ const Y = ({
   n && n(),
   /* @__PURE__ */ t("div", { className: "flex-1", children: /* @__PURE__ */ t(Re, { focus: !0, maxRows: 4 }) })
 ] }), Ge = ({ onBack: n, showBackButton: a, onShowInfo: l, canShowInfo: o }) => {
-  var s, w, N, g;
+  var s, w, C, f;
   const { channel: c } = Ie(), m = _.useMemo(() => Object.values(c.state.members || {}).find(
-    (C) => {
+    (b) => {
       var x;
-      return ((x = C.user) == null ? void 0 : x.id) && C.user.id !== c._client.userID;
+      return ((x = b.user) == null ? void 0 : x.id) && b.user.id !== c._client.userID;
     }
-  ), [c._client.userID, c.state.members]), u = ((s = m == null ? void 0 : m.user) == null ? void 0 : s.name) || ((w = m == null ? void 0 : m.user) == null ? void 0 : w.id) || "Unknown member", r = (N = m == null ? void 0 : m.user) == null ? void 0 : N.image;
+  ), [c._client.userID, c.state.members]), u = ((s = m == null ? void 0 : m.user) == null ? void 0 : s.name) || ((w = m == null ? void 0 : m.user) == null ? void 0 : w.id) || "Unknown member", r = (C = m == null ? void 0 : m.user) == null ? void 0 : C.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: [
       a && n && /* @__PURE__ */ t(
@@ -709,13 +715,13 @@ const Y = ({
           onClick: n,
           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 channel list",
-          children: /* @__PURE__ */ t(fe, { className: "h-5 w-5 text-stone", weight: "bold" })
+          children: /* @__PURE__ */ t(ge, { className: "h-5 w-5 text-stone", weight: "bold" })
         }
       ),
       /* @__PURE__ */ t(
         ee,
         {
-          id: ((g = m == null ? void 0 : m.user) == null ? void 0 : g.id) || c.id || "unknown",
+          id: ((f = m == null ? void 0 : m.user) == null ? void 0 : f.id) || c.id || "unknown",
           name: u,
           image: r,
           size: 40
@@ -734,7 +740,7 @@ const Y = ({
   ] });
 }, _e = ({ isOpen: n, onClose: a, participant: l, channel: o, followerStatusLabel: c, onLeaveConversation: m, onBlockParticipant: u }) => {
   var k, P, X, Q, z, q, G;
-  const { service: r, debug: s } = K(), w = $(null), [N, g] = A(!1), [i, C] = A(!1), [x, p] = A(!1);
+  const { service: r, debug: s } = K(), w = $(null), [C, f] = A(!1), [i, b] = A(!1), [x, p] = A(!1);
   B(() => {
     const I = w.current;
     I && (n ? I.showModal() : I.close());
@@ -746,7 +752,7 @@ const Y = ({
         const T = (await r.getBlockedUsers()).some(
           (E) => E.blocked_user_id === l.user.id
         );
-        g(T);
+        f(T);
       } catch (S) {
         console.error("[ChannelInfoDialog] Failed to check blocked status:", S);
       }
@@ -757,14 +763,14 @@ const Y = ({
   const V = async () => {
     var I;
     if (!i) {
-      s && console.log("[ChannelInfoDialog] Leave conversation", o.cid), C(!0);
+      s && console.log("[ChannelInfoDialog] Leave conversation", o.cid), b(!0);
       try {
         const S = ((I = o._client) == null ? void 0 : I.userID) ?? null;
         await o.hide(S, !1), m && await m(o), a();
       } catch (S) {
         console.error("[ChannelInfoDialog] Failed to leave conversation", S);
       } finally {
-        C(!1);
+        b(!1);
       }
     }
   }, R = async () => {
@@ -799,7 +805,7 @@ const Y = ({
     );
   };
   if (!l) return null;
-  const F = ((P = l.user) == null ? void 0 : P.name) || ((X = l.user) == null ? void 0 : X.id) || "Unknown member", f = (Q = l.user) == null ? void 0 : Q.image, h = (z = l.user) == null ? void 0 : z.email, b = (q = l.user) == null ? void 0 : q.username, M = h || (b ? `linktr.ee/${b}` : void 0), U = ((G = l.user) == null ? void 0 : G.id) || "unknown";
+  const F = ((P = l.user) == null ? void 0 : P.name) || ((X = l.user) == null ? void 0 : X.id) || "Unknown member", g = (Q = l.user) == null ? void 0 : Q.image, h = (z = l.user) == null ? void 0 : z.email, N = (q = l.user) == null ? void 0 : q.username, M = h || (N ? `linktr.ee/${N}` : void 0), U = ((G = l.user) == null ? void 0 : G.id) || "unknown";
   return /* @__PURE__ */ t(
     "dialog",
     {
@@ -821,7 +827,7 @@ const Y = ({
               {
                 id: U,
                 name: F,
-                image: f,
+                image: g,
                 size: 64
               }
             ),
@@ -839,12 +845,12 @@ const Y = ({
                 disabled: i,
                 "aria-busy": i,
                 children: [
-                  i ? /* @__PURE__ */ t(W, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ t(ge, { className: "h-5 w-5" }),
+                  i ? /* @__PURE__ */ t(W, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ t(fe, { className: "h-5 w-5" }),
                   /* @__PURE__ */ t("span", { children: "Leave Conversation" })
                 ]
               }
             ) }),
-            /* @__PURE__ */ t("li", { children: N ? /* @__PURE__ */ d(
+            /* @__PURE__ */ t("li", { children: C ? /* @__PURE__ */ d(
               Y,
               {
                 onClick: v,
@@ -887,12 +893,12 @@ const Y = ({
 }) => {
   const [r, s] = A(!1), w = _.useMemo(() => Object.values(n.state.members || {}).find(
     (i) => {
-      var C;
-      return ((C = i.user) == null ? void 0 : C.id) && i.user.id !== n._client.userID;
+      var b;
+      return ((b = i.user) == null ? void 0 : b.id) && i.user.id !== n._client.userID;
     }
-  ), [n._client.userID, n.state.members]), N = _.useMemo(() => {
-    const g = n.data ?? {};
-    return g.followerStatus ? String(g.followerStatus) : g.isFollower ? "Subscribed to you" : void 0;
+  ), [n._client.userID, n.state.members]), C = _.useMemo(() => {
+    const f = n.data ?? {};
+    return f.followerStatus ? String(f.followerStatus) : f.isFollower ? "Subscribed to you" : void 0;
   }, [n.data]);
   return /* @__PURE__ */ d("div", { className: L("h-full flex flex-col", u), children: [
     /* @__PURE__ */ t(Me, { channel: n, children: /* @__PURE__ */ d(pe, { children: [
@@ -920,7 +926,7 @@ const Y = ({
         onClose: () => s(!1),
         participant: w,
         channel: n,
-        followerStatusLabel: N,
+        followerStatusLabel: C,
         onLeaveConversation: c,
         onBlockParticipant: m
       }
@@ -984,8 +990,8 @@ const Xe = /* @__PURE__ */ new Map([
     "thin",
     /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M226.83,221.17l-52.7-52.7a84.1,84.1,0,1,0-5.66,5.66l52.7,52.7a4,4,0,0,0,5.66-5.66ZM36,112a76,76,0,1,1,76,76A76.08,76.08,0,0,1,36,112Z" }))
   ]
-]), be = e.forwardRef((n, a) => /* @__PURE__ */ e.createElement(D, { ref: a, ...n, weights: Xe }));
-be.displayName = "MagnifyingGlassIcon";
+]), Ne = e.forwardRef((n, a) => /* @__PURE__ */ e.createElement(D, { ref: a, ...n, weights: Xe }));
+Ne.displayName = "MagnifyingGlassIcon";
 function Qe({
   searchQuery: n,
   setSearchQuery: a,
@@ -994,7 +1000,7 @@ function Qe({
   const o = $(null);
   return /* @__PURE__ */ d("div", { className: "relative", children: [
     /* @__PURE__ */ t(
-      be,
+      Ne,
       {
         className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-stone",
         weight: "bold"
@@ -1034,7 +1040,7 @@ const qe = ({
   searchPlaceholder: m = "Search participants...",
   className: u
 }) => {
-  const { debug: r } = K(), [s, w] = A(""), [N, g] = A([]), [i, C] = A(!1), [x, p] = A(null), [Z, V] = A(null), R = $(!1);
+  const { debug: r } = K(), [s, w] = A(""), [C, f] = A([]), [i, b] = A(!1), [x, p] = A(null), [Z, V] = A(null), R = $(!1);
   B(() => {
     if (n.loading) {
       r && console.log("[ParticipantPicker] Waiting for participant source to finish loading...");
@@ -1042,38 +1048,38 @@ const qe = ({
     }
     if (R.current) return;
     (async () => {
-      r && console.log("[ParticipantPicker] Loading initial participants..."), C(!0), p(null);
+      r && console.log("[ParticipantPicker] Loading initial participants..."), b(!0), p(null);
       try {
         const h = await n.loadParticipants({
           search: "",
           // Load all participants initially
           limit: 100
         });
-        g(h.participants), R.current = !0, r && console.log("[ParticipantPicker] Participants loaded successfully:", h.participants.length);
+        f(h.participants), R.current = !0, r && console.log("[ParticipantPicker] Participants loaded successfully:", h.participants.length);
       } catch (h) {
-        const b = h instanceof Error ? h.message : "Failed to load participants";
-        p(b), console.error("[ParticipantPicker] Failed to load participants:", h);
+        const N = h instanceof Error ? h.message : "Failed to load participants";
+        p(N), console.error("[ParticipantPicker] Failed to load participants:", h);
       } finally {
-        C(!1);
+        b(!1);
       }
     })();
   }, [n.loading, r]);
-  const v = N.filter((f) => !o.has(f.id)).filter((f) => {
-    var b;
+  const v = C.filter((g) => !o.has(g.id)).filter((g) => {
+    var N;
     if (!s) return !0;
     const h = s.toLowerCase();
-    return f.name.toLowerCase().includes(h) || ((b = f.email) == null ? void 0 : b.toLowerCase().includes(h)) || !1;
-  }), y = H(async (f) => {
+    return g.name.toLowerCase().includes(h) || ((N = g.email) == null ? void 0 : N.toLowerCase().includes(h)) || !1;
+  }), y = H(async (g) => {
     if (!Z) {
-      V(f.id);
+      V(g.id);
       try {
-        await a(f);
+        await a(g);
       } catch (h) {
         console.error("[ParticipantPicker] Failed to start chat:", h), V(null);
       }
     }
-  }, [a, Z]), F = (f, h) => {
-    (f.key === "Enter" || f.key === " ") && (f.preventDefault(), y(h));
+  }, [a, Z]), F = (g, h) => {
+    (g.key === "Enter" || g.key === " ") && (g.preventDefault(), y(h));
   };
   return /* @__PURE__ */ d("div", { className: L("flex flex-col h-full", u), children: [
     /* @__PURE__ */ d("div", { className: "px-4 py-4 border-b border-sand bg-chalk", children: [
@@ -1113,38 +1119,38 @@ const qe = ({
       ] })
     ] }) }) : v.length === 0 ? /* @__PURE__ */ d("div", { className: "p-6 text-center", children: [
       /* @__PURE__ */ t("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-sand", children: /* @__PURE__ */ t(le, { className: "h-8 w-8 text-charcoal" }) }),
-      /* @__PURE__ */ t("h3", { className: "text-sm font-semibold text-charcoal mb-2", children: s ? `No ${c} found` : N.length > 0 ? `Already chatting with all ${c}` : `No ${c} yet` }),
-      /* @__PURE__ */ t("p", { className: "text-xs text-stone", children: s ? "Try a different search term" : N.length > 0 ? `You have existing conversations with all your ${c}` : `${c.charAt(0).toUpperCase() + c.slice(1)} will appear here` })
+      /* @__PURE__ */ t("h3", { className: "text-sm font-semibold text-charcoal mb-2", children: s ? `No ${c} found` : C.length > 0 ? `Already chatting with all ${c}` : `No ${c} yet` }),
+      /* @__PURE__ */ t("p", { className: "text-xs text-stone", children: s ? "Try a different search term" : C.length > 0 ? `You have existing conversations with all your ${c}` : `${c.charAt(0).toUpperCase() + c.slice(1)} will appear here` })
     ] }) : /* @__PURE__ */ d("ul", { className: "space-y-0", children: [
-      v.map((f) => {
-        const h = f.name || f.email || f.id, b = f.email && f.name ? f.email : f.phone;
+      v.map((g) => {
+        const h = g.name || g.email || g.id, N = g.email && g.name ? g.email : g.phone;
         return /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
           "button",
           {
             type: "button",
-            onClick: () => y(f),
-            onKeyDown: (M) => F(M, f),
+            onClick: () => y(g),
+            onKeyDown: (M) => F(M, 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__ */ t(
                   ee,
                   {
-                    id: f.id,
+                    id: g.id,
                     name: h,
-                    image: f.image,
+                    image: g.image,
                     size: 40
                   }
                 ),
                 /* @__PURE__ */ d("div", { className: "flex-1 min-w-0", children: [
                   /* @__PURE__ */ t("h4", { className: "text-sm font-medium text-charcoal truncate", children: h }),
-                  b && /* @__PURE__ */ t("p", { className: "text-xs text-stone truncate", children: b })
+                  N && /* @__PURE__ */ t("p", { className: "text-xs text-stone truncate", children: N })
                 ] })
               ] }),
-              /* @__PURE__ */ t("div", { className: "flex-shrink-0", children: Z === f.id ? /* @__PURE__ */ t(W, { className: "h-5 w-5 text-primary animate-spin" }) : /* @__PURE__ */ t(le, { className: "h-5 w-5 text-stone" }) })
+              /* @__PURE__ */ t("div", { className: "flex-shrink-0", children: Z === g.id ? /* @__PURE__ */ t(W, { className: "h-5 w-5 text-primary animate-spin" }) : /* @__PURE__ */ t(le, { className: "h-5 w-5 text-stone" }) })
             ] })
           }
-        ) }, f.id);
+        ) }, g.id);
       }),
       i && /* @__PURE__ */ t("li", { className: "p-4 flex justify-center", children: /* @__PURE__ */ d("div", { className: "flex items-center space-x-2", children: [
         /* @__PURE__ */ t("div", { className: "w-4 h-4 animate-spin rounded-full border-2 border-primary border-t-transparent" }),
@@ -1153,7 +1159,7 @@ const qe = ({
     ] }) })
   ] });
 }, Ye = () => K(), Je = ({ hasChannels: n, onStartConversation: a, participantLabel: l }) => /* @__PURE__ */ t("div", { className: "flex items-center justify-center h-full p-8 text-balance", children: /* @__PURE__ */ d("div", { className: "text-center max-w-sm", children: [
-  /* @__PURE__ */ t("div", { className: "w-24 h-24 bg-primary-alt bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-6", children: /* @__PURE__ */ t("span", { className: "text-4xl", children: "💬" }) }),
+  /* @__PURE__ */ t("div", { className: "w-24 h-24 bg-primary-alt/10 rounded-full flex items-center justify-center mx-auto mb-6", children: /* @__PURE__ */ t("span", { className: "text-4xl", children: "💬" }) }),
   /* @__PURE__ */ t("h2", { className: "font-semibold text-charcoal", children: "Welcome to Messages" }),
   /* @__PURE__ */ t("p", { className: "text-stone text-sm mb-6", children: n ? /* @__PURE__ */ d(oe, { children: [
     "Choose a conversation from the list or",
@@ -1171,7 +1177,10 @@ const qe = ({
     " ",
     "to begin messaging."
   ] }) })
-] }) }), ce = ({ onClick: n, children: a }) => /* @__PURE__ */ t(
+] }) }), ce = ({
+  onClick: n,
+  children: a
+}) => /* @__PURE__ */ t(
   "button",
   {
     type: "button",
@@ -1251,11 +1260,11 @@ const qe = ({
     client: r,
     isConnected: s,
     isLoading: w,
-    error: N,
-    refreshConnection: g,
+    error: C,
+    refreshConnection: f,
     debug: i
-  } = Ye(), [C, x] = A(null), [p, Z] = A(!1), [V, R] = A(!1), [v, y] = A(/* @__PURE__ */ new Set()), [F, f] = A(0), h = $(null), {
-    showStartConversation: b = !1,
+  } = Ye(), [b, x] = A(null), [p, Z] = A(!1), [V, R] = A(!1), [v, y] = A(/* @__PURE__ */ new Set()), [F, g] = A(0), h = $(null), {
+    showStartConversation: N = !1,
     participantSource: M,
     participantLabel: U = "participants"
   } = n, k = $(null), P = H(async () => {
@@ -1273,10 +1282,10 @@ const qe = ({
           { limit: 100 }
         ), j = /* @__PURE__ */ new Set();
         O.forEach((te) => {
-          const Ne = te.state.members || {};
-          Object.values(Ne).forEach((Ce) => {
+          const Ce = te.state.members || {};
+          Object.values(Ce).forEach((be) => {
             var se;
-            const ae = (se = Ce.user) == null ? void 0 : se.id;
+            const ae = (se = be.user) == null ? void 0 : se.id;
             ae && ae !== E && j.add(ae);
           });
         }), y(j), Z(O.length > 0), k.current = E, i && console.log("[MessagingShell] Channels synced successfully:", {
@@ -1298,7 +1307,7 @@ const qe = ({
     x(null);
   }, []), z = H(() => {
     var E;
-    M && (f((O) => O + 1), R(!0), (E = h.current) == null || E.showModal());
+    M && (g((O) => O + 1), R(!0), (E = h.current) == null || E.showModal());
   }, [M]), q = H(async (E) => {
     var O;
     if (u)
@@ -1326,12 +1335,12 @@ const qe = ({
     i && console.log("[MessagingShell] Leaving conversation:", E.id), x(null), k.current = null, await P();
   }, [P, i]), S = H(async (E) => {
     i && console.log("[MessagingShell] Blocking participant:", E), x(null), k.current = null, await P();
-  }, [P, i]), T = !!C;
-  return w ? /* @__PURE__ */ t("div", { className: L("h-full", l), children: /* @__PURE__ */ t(e1, {}) }) : N ? /* @__PURE__ */ t("div", { className: L("h-full", l), children: /* @__PURE__ */ t(ie, { error: N, onRetry: g }) }) : !s || !r ? /* @__PURE__ */ t("div", { className: L("h-full", l), children: /* @__PURE__ */ t(
+  }, [P, i]), T = !!b;
+  return w ? /* @__PURE__ */ t("div", { className: L("h-full", l), children: /* @__PURE__ */ t(e1, {}) }) : C ? /* @__PURE__ */ t("div", { className: L("h-full", l), children: /* @__PURE__ */ t(ie, { error: C, onRetry: f }) }) : !s || !r ? /* @__PURE__ */ t("div", { className: L("h-full", l), children: /* @__PURE__ */ t(
     ie,
     {
       error: "Not connected to messaging service",
-      onRetry: g
+      onRetry: f
     }
   ) }) : /* @__PURE__ */ d("div", { className: L("h-full bg-white overflow-hidden", l), children: [
     /* @__PURE__ */ d("div", { className: "flex h-full min-h-0", children: [
@@ -1349,8 +1358,8 @@ const qe = ({
             ke,
             {
               onChannelSelect: X,
-              selectedChannel: C || void 0,
-              showStartConversation: b && !!M,
+              selectedChannel: b || void 0,
+              showStartConversation: N && !!M,
               onStartConversation: z,
               participantLabel: U
             }
@@ -1364,22 +1373,22 @@ const qe = ({
             "hidden lg:flex": !T,
             flex: T
           }),
-          children: C ? /* @__PURE__ */ t("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ t(
+          children: b ? /* @__PURE__ */ t("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ t(
             ze,
             {
-              channel: C,
+              channel: b,
               onBack: Q,
               showBackButton: !0,
               renderMessageInputActions: o,
               onLeaveConversation: I,
               onBlockParticipant: S
             },
-            C.id
+            b.id
           ) }) : /* @__PURE__ */ t(
             Je,
             {
               hasChannels: p,
-              onStartConversation: b ? z : void 0,
+              onStartConversation: N ? z : void 0,
               participantLabel: U
             }
           )
@@ -1411,29 +1420,29 @@ const qe = ({
     )
   ] });
 }, c1 = (n, a = {}) => {
-  const { initialSearch: l = "", pageSize: o = 20 } = a, [c, m] = A([]), [u, r] = A(!1), [s, w] = A(null), [N, g] = A(l), [i, C] = A(!0), [x, p] = A(), Z = H(async (y = !1, F) => {
+  const { initialSearch: l = "", pageSize: o = 20 } = a, [c, m] = A([]), [u, r] = A(!1), [s, w] = A(null), [C, f] = A(l), [i, b] = A(!0), [x, p] = A(), Z = H(async (y = !1, F) => {
     if (u) return;
-    const f = F !== void 0 ? F : N;
+    const g = F !== void 0 ? F : C;
     r(!0), w(null);
     try {
       const h = await n.loadParticipants({
-        search: f || void 0,
+        search: g || void 0,
         limit: o,
         cursor: y ? void 0 : x
       });
       m(
-        (b) => y ? h.participants : [...b, ...h.participants]
-      ), C(h.hasMore), p(h.nextCursor);
+        (N) => y ? h.participants : [...N, ...h.participants]
+      ), b(h.hasMore), p(h.nextCursor);
     } catch (h) {
-      const b = h instanceof Error ? h.message : "Failed to load participants";
-      w(b), console.error("[useParticipants] Load error:", h);
+      const N = h instanceof Error ? h.message : "Failed to load participants";
+      w(N), console.error("[useParticipants] Load error:", h);
     } finally {
       r(!1);
     }
-  }, [n, N, x, o, u]), V = H(() => {
+  }, [n, C, x, o, u]), V = H(() => {
     i && !u && Z(!1);
   }, [i, u, Z]), R = H((y) => {
-    g(y), p(void 0), Z(!0, y);
+    f(y), p(void 0), Z(!0, y);
   }, [Z]), v = H(() => {
     p(void 0), Z(!0);
   }, [Z]);
@@ -1443,7 +1452,7 @@ const qe = ({
     participants: c,
     loading: u,
     error: s,
-    searchQuery: N,
+    searchQuery: C,
     hasMore: i,
     totalCount: n.totalCount,
     loadMore: V,