@natoe/colab 0.1.13 → 0.1.14

package/dist/index.js

@@ -66,6 +66,13 @@ function toCamelKey(key) {
 var CollabSocket = class {
   constructor() {
     this.socket = null;
+    /**
+     * Conversation channels keyed by id. Each entry is reference-counted so
+     * multiple surfaces (e.g. inline chat + expanded panel mounted at once
+     * for the same conversation) can coexist without one's `leaveConversation`
+     * tearing the channel out from under the other. See `joinConversation`
+     * and the returned `ChannelSubscription.release`.
+     */
     this.channels = /* @__PURE__ */ new Map();
     this.presences = /* @__PURE__ */ new Map();
     this.userChannel = null;
@@ -136,59 +143,85 @@ var CollabSocket = class {
   onUnreadCountUpdate(callback) {
     this.onUnreadUpdate = callback;
   }
-  /** Join a conversation channel and subscribe to events */
+  /**
+   * Join a conversation channel and subscribe to events.
+   *
+   * Reference-counted: multiple callers can join the same conversation
+   * (e.g. inline preview + expanded panel mounted side-by-side). Each
+   * call binds its own listeners and gets back a `ChannelSubscription`.
+   * The underlying channel only `.leave()`s the server when the LAST
+   * subscriber calls `release()`.
+   */
   joinConversation(conversationId, callbacks) {
     if (!this.socket) return null;
-    if (this.channels.has(conversationId)) {
-      return this.channels.get(conversationId);
+    let entry = this.channels.get(conversationId);
+    if (!entry) {
+      const channel2 = this.socket.channel(`conversation:${conversationId}`, {});
+      channel2.join().receive("ok", () => {
+      }).receive("error", (reason) => {
+        this.config?.onError?.({
+          code: "CHANNEL_JOIN_ERROR",
+          message: `Failed to join conversation ${conversationId}`,
+          details: reason
+        });
+      });
+      entry = { channel: channel2, subscribers: 0, presence: null };
+      this.channels.set(conversationId, entry);
     }
-    const channel = this.socket.channel(`conversation:${conversationId}`, {});
+    const channel = entry.channel;
+    const refs = [];
+    const bind = (event, fn) => {
+      const ref = channel.on(event, fn);
+      refs.push({ event, ref });
+    };
     if (callbacks.onMessage) {
-      channel.on(EVENTS.MESSAGE_NEW, (payload) => {
+      bind(EVENTS.MESSAGE_NEW, (payload) => {
         callbacks.onMessage(snakeToCamel(payload));
       });
     }
     if (callbacks.onTyping) {
-      channel.on(EVENTS.USER_TYPING, (payload) => {
+      bind(EVENTS.USER_TYPING, (payload) => {
         callbacks.onTyping(snakeToCamel(payload));
       });
     }
     if (callbacks.onUserJoined) {
-      channel.on(EVENTS.USER_JOINED, (payload) => {
+      bind(EVENTS.USER_JOINED, (payload) => {
         callbacks.onUserJoined(snakeToCamel(payload));
       });
     }
     if (callbacks.onUserLeft) {
-      channel.on(EVENTS.USER_LEFT, (payload) => {
+      bind(EVENTS.USER_LEFT, (payload) => {
         callbacks.onUserLeft(snakeToCamel(payload));
       });
     }
     if (callbacks.onChannelUpdated) {
-      channel.on(EVENTS.CHANNEL_UPDATED, (payload) => {
+      bind(EVENTS.CHANNEL_UPDATED, (payload) => {
         callbacks.onChannelUpdated(snakeToCamel(payload));
       });
     }
     if (callbacks.onChannelDeleted) {
-      channel.on(EVENTS.CHANNEL_DELETED, () => {
+      bind(EVENTS.CHANNEL_DELETED, () => {
         callbacks.onChannelDeleted();
       });
     }
     if (callbacks.onMessageRead) {
-      channel.on(EVENTS.MESSAGE_READ, (payload) => {
-        callbacks.onMessageRead(snakeToCamel(payload));
+      bind(EVENTS.MESSAGE_READ, (payload) => {
+        callbacks.onMessageRead(
+          snakeToCamel(payload)
+        );
       });
     }
     if (callbacks.onMessagePinned) {
-      channel.on(EVENTS.MESSAGE_PINNED, (payload) => {
+      bind(EVENTS.MESSAGE_PINNED, (payload) => {
         callbacks.onMessagePinned(snakeToCamel(payload));
       });
     }
     if (callbacks.onMessageUnpinned) {
-      channel.on(EVENTS.MESSAGE_UNPINNED, (payload) => {
+      bind(EVENTS.MESSAGE_UNPINNED, (payload) => {
         callbacks.onMessageUnpinned(snakeToCamel(payload));
       });
     }
-    if (callbacks.onPresence) {
+    if (callbacks.onPresence && !entry.presence) {
       const presence = new phoenix.Presence(channel);
       presence.onSync(() => {
         const online = {};
@@ -197,27 +230,45 @@ var CollabSocket = class {
         });
         callbacks.onPresence(online);
       });
+      entry.presence = presence;
       this.presences.set(conversationId, presence);
     }
-    channel.join().receive("ok", () => {
-    }).receive("error", (reason) => {
-      this.config?.onError?.({
-        code: "CHANNEL_JOIN_ERROR",
-        message: `Failed to join conversation ${conversationId}`,
-        details: reason
-      });
-    });
-    this.channels.set(conversationId, channel);
-    return channel;
+    entry.subscribers += 1;
+    let released = false;
+    const release = () => {
+      if (released) return;
+      released = true;
+      const current = this.channels.get(conversationId);
+      if (!current) return;
+      for (const { event, ref } of refs) {
+        current.channel.off(event, ref);
+      }
+      current.subscribers -= 1;
+      if (current.subscribers <= 0) {
+        current.channel.leave();
+        this.channels.delete(conversationId);
+        this.presences.delete(conversationId);
+      }
+    };
+    return { channel, release };
   }
-  /** Leave a conversation channel */
-  leaveConversation(conversationId) {
-    const channel = this.channels.get(conversationId);
-    if (channel) {
-      channel.leave();
-      this.channels.delete(conversationId);
-      this.presences.delete(conversationId);
-    }
+  /**
+   * @deprecated Use the `release()` method returned by `joinConversation()`.
+   * Kept as a no-op so older callers don't throw — but it cannot identify
+   * which subscriber should leave, so it silently does nothing. Any code
+   * still calling this will leak listeners and prevent the channel from
+   * ever being torn down. Migrate to the subscription handle.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  leaveConversation(_conversationId) {
+  }
+  /**
+   * Look up the underlying Phoenix Channel for a conversation, if any
+   * subscriber is still holding it. All send/push paths go through this
+   * helper so the refcounted entry shape is contained to joinConversation.
+   */
+  getChannel(conversationId) {
+    return this.channels.get(conversationId)?.channel ?? null;
   }
   /** Send a message to a conversation.
    *
@@ -229,7 +280,7 @@ var CollabSocket = class {
    */
   sendMessage(conversationId, payload) {
     return new Promise((resolve, reject) => {
-      const channel = this.channels.get(conversationId);
+      const channel = this.getChannel(conversationId);
       if (!channel) {
         reject({ code: "NOT_JOINED", message: "Not joined to this conversation" });
         return;
@@ -252,7 +303,7 @@ var CollabSocket = class {
   }
   /** Broadcast typing indicator */
   sendTyping(conversationId, isTyping) {
-    const channel = this.channels.get(conversationId);
+    const channel = this.getChannel(conversationId);
     channel?.push(EVENTS.USER_TYPING, {
       userId: this.config?.userId,
       userName: this.config?.userName,
@@ -261,7 +312,7 @@ var CollabSocket = class {
   }
   /** Mark messages as read */
   markAsRead(conversationId, messageId) {
-    const channel = this.channels.get(conversationId);
+    const channel = this.getChannel(conversationId);
     channel?.push(EVENTS.MESSAGE_READ, {
       messageId,
       userId: this.config?.userId
@@ -295,7 +346,7 @@ var CollabSocket = class {
   /** Generic push with promise wrapper */
   channelPush(conversationId, event, payload) {
     return new Promise((resolve, reject) => {
-      const channel = this.channels.get(conversationId);
+      const channel = this.getChannel(conversationId);
       if (!channel) {
         reject({ code: "NOT_JOINED", message: "Not joined to this conversation" });
         return;
@@ -312,7 +363,7 @@ var CollabSocket = class {
   }
   /** Disconnect socket and leave all channels */
   disconnect() {
-    this.channels.forEach((channel) => channel.leave());
+    this.channels.forEach((entry) => entry.channel.leave());
     this.channels.clear();
     this.presences.clear();
     this.userChannel?.leave();
@@ -367,7 +418,21 @@ var THEME_VAR = {
   dangerBg: "--natoe-colab-danger-bg",
   dangerBorder: "--natoe-colab-danger-border",
   dangerFg: "--natoe-colab-danger-fg",
-  fontStack: "--natoe-colab-font-stack"
+  fontStack: "--natoe-colab-font-stack",
+  // Neutral surface palette — promoted to CSS vars so consumers (e.g.
+  // CollabPanel themeMode='dark') can flip the whole grayscale at a subtree
+  // level without re-themeing every component.
+  white: "--natoe-colab-white",
+  neutral50: "--natoe-colab-neutral-50",
+  neutral100: "--natoe-colab-neutral-100",
+  neutral200: "--natoe-colab-neutral-200",
+  neutral300: "--natoe-colab-neutral-300",
+  neutral400: "--natoe-colab-neutral-400",
+  neutral500: "--natoe-colab-neutral-500",
+  neutral600: "--natoe-colab-neutral-600",
+  neutral700: "--natoe-colab-neutral-700",
+  neutral800: "--natoe-colab-neutral-800",
+  neutral900: "--natoe-colab-neutral-900"
 };
 var THEME_DEFAULTS = {
   primary: "#2563eb",
@@ -380,18 +445,9 @@ var THEME_DEFAULTS = {
   dangerBg: "#fef2f2",
   dangerBorder: "#fecaca",
   dangerFg: "#b91c1c",
-  fontStack: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
-};
-var cssVar = (name, fallback) => `var(${name}, ${fallback})`;
-var COLOR = {
-  // Brand — themeable
-  primary: cssVar(THEME_VAR.primary, THEME_DEFAULTS.primary),
-  primaryHover: cssVar(THEME_VAR.primaryHover, THEME_DEFAULTS.primaryHover),
-  /** Tinted surface for chips/cards on brand-coloured states. */
-  primaryBg: cssVar(THEME_VAR.primaryBg, THEME_DEFAULTS.primaryBg),
-  primaryFg: cssVar(THEME_VAR.primaryFg, THEME_DEFAULTS.primaryFg),
-  // Neutral grayscale — not themeable, taken from Tailwind's zinc-leaning
-  // slate to match the package's existing tonal balance.
+  fontStack: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  // Neutral grayscale — these defaults are the same hex literals the
+  // package shipped with; they're now overridable per-subtree.
   white: "#ffffff",
   neutral50: "#f9fafb",
   neutral100: "#f3f4f6",
@@ -402,7 +458,32 @@ var COLOR = {
   neutral600: "#4b5563",
   neutral700: "#374151",
   neutral800: "#1f2937",
-  neutral900: "#111827",
+  neutral900: "#111827"
+};
+var cssVar = (name, fallback) => `var(${name}, ${fallback})`;
+var COLOR = {
+  // Brand — themeable
+  primary: cssVar(THEME_VAR.primary, THEME_DEFAULTS.primary),
+  primaryHover: cssVar(THEME_VAR.primaryHover, THEME_DEFAULTS.primaryHover),
+  /** Tinted surface for chips/cards on brand-coloured states. */
+  primaryBg: cssVar(THEME_VAR.primaryBg, THEME_DEFAULTS.primaryBg),
+  primaryFg: cssVar(THEME_VAR.primaryFg, THEME_DEFAULTS.primaryFg),
+  // Neutral grayscale — themeable via CSS variables. Light-mode defaults
+  // taken from Tailwind's zinc-leaning slate to match the package's
+  // existing tonal balance; a host can override the entire palette by
+  // setting --natoe-colab-* values on any ancestor element (used by
+  // CollabPanel themeMode='dark' for the viewer's left-panel surface).
+  white: cssVar(THEME_VAR.white, THEME_DEFAULTS.white),
+  neutral50: cssVar(THEME_VAR.neutral50, THEME_DEFAULTS.neutral50),
+  neutral100: cssVar(THEME_VAR.neutral100, THEME_DEFAULTS.neutral100),
+  neutral200: cssVar(THEME_VAR.neutral200, THEME_DEFAULTS.neutral200),
+  neutral300: cssVar(THEME_VAR.neutral300, THEME_DEFAULTS.neutral300),
+  neutral400: cssVar(THEME_VAR.neutral400, THEME_DEFAULTS.neutral400),
+  neutral500: cssVar(THEME_VAR.neutral500, THEME_DEFAULTS.neutral500),
+  neutral600: cssVar(THEME_VAR.neutral600, THEME_DEFAULTS.neutral600),
+  neutral700: cssVar(THEME_VAR.neutral700, THEME_DEFAULTS.neutral700),
+  neutral800: cssVar(THEME_VAR.neutral800, THEME_DEFAULTS.neutral800),
+  neutral900: cssVar(THEME_VAR.neutral900, THEME_DEFAULTS.neutral900),
   slate800: "#1e293b",
   // Semantic — themeable
   success: cssVar(THEME_VAR.success, THEME_DEFAULTS.success),
@@ -781,6 +862,7 @@ function useConversation({
   const [isConnected, setIsConnected] = React4.useState(false);
   const [replyTo, setReplyTo] = React4.useState(null);
   const joinedConversationId = React4.useRef(null);
+  const channelSubscription = React4.useRef(null);
   const typingTimers = React4.useRef(/* @__PURE__ */ new Map());
   const ensureConversationInFlight = React4.useRef(null);
   const markedReadIdsRef = React4.useRef(/* @__PURE__ */ new Set());
@@ -794,7 +876,9 @@ function useConversation({
   const joinChannel = React4.useCallback(
     (conv) => {
       if (joinedConversationId.current === conv.id) return;
-      socket.joinConversation(conv.id, {
+      channelSubscription.current?.release();
+      channelSubscription.current = null;
+      const subscription = socket.joinConversation(conv.id, {
         // Dedupe by id so an optimistic message (added client-side on send)
         // doesn't double up when the server's broadcast arrives.
         onMessage: (msg) => setMessages((prev) => {
@@ -844,6 +928,8 @@ function useConversation({
         onChannelDeleted: () => {
           setConversation(null);
           setMessages([]);
+          channelSubscription.current?.release();
+          channelSubscription.current = null;
           joinedConversationId.current = null;
           setIsConnected(false);
         },
@@ -869,6 +955,7 @@ function useConversation({
           );
         }
       });
+      channelSubscription.current = subscription;
       joinedConversationId.current = conv.id;
       setIsConnected(true);
     },
@@ -929,10 +1016,9 @@ function useConversation({
     init();
     return () => {
       cancelled = true;
-      if (joinedConversationId.current) {
-        socket.leaveConversation(joinedConversationId.current);
-        joinedConversationId.current = null;
-      }
+      channelSubscription.current?.release();
+      channelSubscription.current = null;
+      joinedConversationId.current = null;
       typingTimers.current.forEach((timer) => clearTimeout(timer));
       typingTimers.current.clear();
       markedReadIdsRef.current.clear();
@@ -1348,17 +1434,26 @@ function DicomIcon({ size = 18, color = "currentColor" }) {
     }
   );
 }
-function SettingsIcon({ size = 18, color = "currentColor" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+function PeopleIcon({ size = 18, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
       height: size,
       viewBox: "0 0 24 24",
-      fill: color,
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" })
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "7", r: "4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
+      ]
     }
   );
 }
@@ -1383,6 +1478,7 @@ function resolveDisplayName(patientData, displayName) {
 }
 function PatientHeader({
   patientData,
+  participants,
   onOpenDicom,
   onOpenSettings,
   onBack,
@@ -1448,15 +1544,18 @@ function PatientHeader({
             ]
           }
         ),
-        onOpenSettings && /* @__PURE__ */ jsxRuntime.jsx(
+        onOpenSettings && /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             onClick: onOpenSettings,
             style: styles.settingsIconButton,
             type: "button",
-            "aria-label": "Open channel settings",
-            title: "Settings",
-            children: /* @__PURE__ */ jsxRuntime.jsx(SettingsIcon, { size: 18, color: COLOR.neutral600 })
+            "aria-label": `Open channel settings (${participants.length} participants)`,
+            title: "Channel participants",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(PeopleIcon, { size: 18, color: COLOR.neutral600 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles.participantCount, children: participants.length })
+            ]
           }
         )
       ] })
@@ -1564,20 +1663,28 @@ var styles = {
     borderRadius: RADIUS.lg,
     cursor: "pointer"
   },
-  // Settings is icon-only (40x40 tile) since it's a secondary action
-  // and View DICOM already carries a label.
+  // Channel-info button: people icon + participant count. Click opens the
+  // channel settings overlay (kept on the same handler as before so hosts
+  // don't have to re-wire — the affordance just looks like a "members"
+  // pill now instead of a gear).
   settingsIconButton: {
-    width: SIZE.control,
-    height: SIZE.control,
+    minHeight: SIZE.control,
     display: "inline-flex",
     alignItems: "center",
-    justifyContent: "center",
+    gap: SPACE.S2,
+    padding: `0 ${SPACE.S3}`,
     backgroundColor: COLOR.white,
     border: `1px solid ${COLOR.neutral200}`,
     borderRadius: RADIUS.lg,
     color: COLOR.neutral600,
     cursor: "pointer",
     flexShrink: 0
+  },
+  participantCount: {
+    fontSize: FONT_SIZE.sm,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.neutral700,
+    fontVariantNumeric: "tabular-nums"
   }
 };
 function ReplyQuoteBlock({
@@ -3998,6 +4105,20 @@ var styles12 = {
   }
 };
 ensureGlobalStyles();
+var DARK_THEME_OVERRIDES = {
+  ["--natoe-colab-white"]: "#0b0b0c",
+  ["--natoe-colab-neutral-50"]: "#18181c",
+  ["--natoe-colab-neutral-100"]: "#1f1f23",
+  ["--natoe-colab-neutral-200"]: "#2a2a2e",
+  ["--natoe-colab-neutral-300"]: "#3f3f44",
+  ["--natoe-colab-neutral-400"]: "#6b7280",
+  ["--natoe-colab-neutral-500"]: "#9ca3af",
+  ["--natoe-colab-neutral-600"]: "#cbd5e1",
+  ["--natoe-colab-neutral-700"]: "#e5e7eb",
+  ["--natoe-colab-neutral-800"]: "#f3f4f6",
+  ["--natoe-colab-neutral-900"]: "#ffffff",
+  ["--natoe-colab-primary-bg"]: "rgba(37, 99, 235, 0.18)"
+};
 function CollabPanel({
   orderId,
   patientData,
@@ -4006,6 +4127,7 @@ function CollabPanel({
   onBack,
   hidePatientName = false,
   onConversationChange,
+  themeMode = "light",
   className,
   style
 }) {
@@ -4081,16 +4203,21 @@ function CollabPanel({
     }
   };
   const pinDisabled = pinnedMessages.length >= MAX_PINNED_MESSAGES;
+  const containerStyle = {
+    ...panelStyles.container,
+    ...themeMode === "dark" ? DARK_THEME_OVERRIDES : {},
+    ...style
+  };
   if (error) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: [ROOT_CLASS, className].filter(Boolean).join(" "), style: { ...panelStyles.container, ...style }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: panelStyles.errorState, children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: [ROOT_CLASS, className].filter(Boolean).join(" "), style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: panelStyles.errorState, children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { style: panelStyles.errorTitle, children: "Unable to load conversation" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { style: panelStyles.errorMessage, children: error })
     ] }) });
   }
   if (isLoading && !conversation) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: [ROOT_CLASS, className].filter(Boolean).join(" "), style: { ...panelStyles.container, ...style }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: panelStyles.loadingState, children: "Loading conversation..." }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: [ROOT_CLASS, className].filter(Boolean).join(" "), style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: panelStyles.loadingState, children: "Loading conversation..." }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...panelStyles.container, ...style }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [ROOT_CLASS, className].filter(Boolean).join(" "), style: containerStyle, children: [
     showSettings && conversation ? /* @__PURE__ */ jsxRuntime.jsx(
       ChannelSettings,
       {
@@ -4526,6 +4653,7 @@ function useInlineCollab({
   const elementRef = React4.useRef(null);
   const observerRef = React4.useRef(null);
   const subscribedConversationIdRef = React4.useRef(null);
+  const channelSubscriptionRef = React4.useRef(null);
   const trimToLimit = React4.useCallback(
     (msgs) => msgs.length > messageLimit ? msgs.slice(msgs.length - messageLimit) : msgs,
     [messageLimit]
@@ -4563,7 +4691,9 @@ function useInlineCollab({
   const subscribe = React4.useCallback(
     (conversationId) => {
       if (subscribedConversationIdRef.current === conversationId) return;
-      socket.joinConversation(conversationId, {
+      channelSubscriptionRef.current?.release();
+      channelSubscriptionRef.current = null;
+      const subscription = socket.joinConversation(conversationId, {
         onMessage: (msg) => {
           setMessages((prev) => trimToLimit([...prev, msg]));
           if (msg.senderId !== config.userId) {
@@ -4579,19 +4709,18 @@ function useInlineCollab({
           setParticipants((prev) => prev.filter((p) => p.userId !== participant.userId));
         }
       });
+      channelSubscriptionRef.current = subscription;
       subscribedConversationIdRef.current = conversationId;
       setIsSubscribed(true);
     },
     [socket, trimToLimit, config.userId]
   );
   const unsubscribe = React4.useCallback(() => {
-    const convId = subscribedConversationIdRef.current;
-    if (convId) {
-      socket.leaveConversation(convId);
-      subscribedConversationIdRef.current = null;
-      setIsSubscribed(false);
-    }
-  }, [socket]);
+    channelSubscriptionRef.current?.release();
+    channelSubscriptionRef.current = null;
+    subscribedConversationIdRef.current = null;
+    setIsSubscribed(false);
+  }, []);
   const containerRef = React4.useCallback(
     (element) => {
       if (observerRef.current) {
@@ -4733,16 +4862,52 @@ function useInlineCollab({
   };
 }
 ensureGlobalStyles();
+function palette(mode) {
+  if (mode === "dark") {
+    return {
+      bg: "transparent",
+      border: "transparent",
+      previewBorder: "#1f1f23",
+      senderName: "#f3f4f6",
+      messageText: "#cbd5e1",
+      systemText: "#6b7280",
+      inputBg: "#18181c",
+      inputBorder: "#2a2a2e",
+      inputText: "#e5e7eb",
+      audioBg: "rgba(37, 99, 235, 0.18)",
+      audioFg: "#93c5fd",
+      expandBorder: "#2a2a2e",
+      expandColor: "#9ca3af"
+    };
+  }
+  return {
+    bg: COLOR.white,
+    border: COLOR.neutral200,
+    previewBorder: COLOR.neutral100,
+    senderName: COLOR.neutral700,
+    messageText: COLOR.neutral600,
+    systemText: COLOR.neutral400,
+    inputBg: "transparent",
+    inputBorder: COLOR.neutral200,
+    inputText: COLOR.neutral900,
+    audioBg: COLOR.primaryBg,
+    audioFg: COLOR.primary,
+    expandBorder: COLOR.neutral200,
+    expandColor: COLOR.neutral500
+  };
+}
 function CollabInline({
   orderId,
   patientData,
   participantIds,
   onExpand,
-  messageLimit = 5,
+  messageLimit = 1,
   placeholder = "Type a message about this case...",
+  mode = "light",
   className,
   style
 }) {
+  const pal = palette(mode);
   const {
     hasConversation,
     messages,
@@ -4754,11 +4919,17 @@ function CollabInline({
     sendAudioMessage,
     containerRef
   } = useInlineCollab({ orderId, patientData, participantIds, messageLimit });
+  const containerStyle = {
+    ...styles14.container,
+    backgroundColor: pal.bg,
+    borderColor: pal.border,
+    ...style
+  };
   if (isLoading && !hasConversation) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: [ROOT_CLASS, className].filter(Boolean).join(" "), style: { ...styles14.container, ...style }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles14.loadingState, children: "Loading..." }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: [ROOT_CLASS, className].filter(Boolean).join(" "), style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles14.loadingState, children: "Loading..." }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: [ROOT_CLASS, className].filter(Boolean).join(" "), style: { ...styles14.container, ...style }, children: [
-    hasConversation && messages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles14.preview, children: messages.slice(-messageLimit).map((message) => /* @__PURE__ */ jsxRuntime.jsx(InlineMessageRow, { message }, message.id)) }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: [ROOT_CLASS, className].filter(Boolean).join(" "), style: containerStyle, children: [
+    hasConversation && messages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...styles14.preview, borderBottomColor: pal.previewBorder }, children: messages.slice(-messageLimit).map((message) => /* @__PURE__ */ jsxRuntime.jsx(InlineMessageRow, { message, pal }, message.id)) }),
     error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles14.error, children: error }),
     /* @__PURE__ */ jsxRuntime.jsx(
       InlineInputBar,
@@ -4769,33 +4940,34 @@ function CollabInline({
         unreadCount: hasConversation ? unreadCount : 0,
         isLive: isSubscribed,
         showExpand: hasConversation && !!onExpand,
-        onExpand
+        onExpand,
+        pal
       }
     )
   ] });
 }
-function InlineMessageRow({ message }) {
+function InlineMessageRow({ message, pal }) {
   if (message.type === "system") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles14.systemRow, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles14.systemText, children: message.body }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles14.systemRow, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.systemText, color: pal.systemText }, children: message.body }) });
   }
   if (message.type === "audio" && message.mediaUrl) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles14.messageRow, children: [
       /* @__PURE__ */ jsxRuntime.jsx(RoleDot, { role: message.senderRole }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: styles14.senderName, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { ...styles14.senderName, color: pal.senderName }, children: [
         message.senderName,
         ":"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(InlineAudioPlayer, { url: message.mediaUrl, duration: message.mediaDuration })
+      /* @__PURE__ */ jsxRuntime.jsx(InlineAudioPlayer, { url: message.mediaUrl, duration: message.mediaDuration, pal })
     ] });
   }
   const preview = renderMessagePreview(message);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles14.messageRow, children: [
     /* @__PURE__ */ jsxRuntime.jsx(RoleDot, { role: message.senderRole }),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { style: styles14.senderName, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { ...styles14.senderName, color: pal.senderName }, children: [
       message.senderName,
       ":"
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles14.messageText, children: preview })
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.messageText, color: pal.messageText }, children: preview })
   ] });
 }
 function RoleDot({ role }) {
@@ -4811,7 +4983,11 @@ function RoleDot({ role }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.roleDot, backgroundColor: colors[role] } });
 }
-function InlineAudioPlayer({ url, duration }) {
+function InlineAudioPlayer({
+  url,
+  duration,
+  pal
+}) {
   const audioRef = React4.useRef(null);
   const [isPlaying, setIsPlaying] = React4.useState(false);
   const [currentTime, setCurrentTime] = React4.useState(0);
@@ -4853,7 +5029,7 @@ function InlineAudioPlayer({ url, duration }) {
   const total = duration ?? 0;
   const remaining = Math.max(0, total - Math.floor(currentTime));
   const displayTime = isPlaying ? remaining : total;
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { style: styles14.audioPlayer, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { ...styles14.audioPlayer, backgroundColor: pal.audioBg, borderColor: pal.audioBg }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -4865,15 +5041,15 @@ function InlineAudioPlayer({ url, duration }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("span", { style: styles14.audioWaveform, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "40%" } }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "80%" } }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "60%" } }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "90%" } }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "50%" } }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "70%" } }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "40%" } })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "40%", backgroundColor: pal.audioFg } }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "80%", backgroundColor: pal.audioFg } }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "60%", backgroundColor: pal.audioFg } }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "90%", backgroundColor: pal.audioFg } }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "50%", backgroundColor: pal.audioFg } }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "70%", backgroundColor: pal.audioFg } }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.waveBar, height: "40%", backgroundColor: pal.audioFg } })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles14.audioDuration, children: formatDuration2(displayTime) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles14.audioDuration, color: pal.audioFg }, children: formatDuration2(displayTime) }),
     /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, src: url, preload: "metadata" })
   ] });
 }
@@ -4903,7 +5079,8 @@ function InlineInputBar({
   unreadCount,
   isLive,
   showExpand,
-  onExpand
+  onExpand,
+  pal
 }) {
   const [text, setText] = React4.useState("");
   const [isSending, setIsSending] = React4.useState(false);
@@ -4940,7 +5117,12 @@ function InlineInputBar({
         onKeyDown: handleKeyDown,
         placeholder,
         disabled: isSending,
-        style: styles14.input
+        style: {
+          ...styles14.input,
+          backgroundColor: pal.inputBg,
+          borderColor: pal.inputBorder,
+          color: pal.inputText
+        }
       }
     ),
     unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles14.unreadBadge, title: `${unreadCount} unread`, children: unreadCount > 99 ? "99+" : unreadCount }),
@@ -4960,7 +5142,11 @@ function InlineInputBar({
       "button",
       {
         onClick: onExpand,
-        style: styles14.expandButton,
+        style: {
+          ...styles14.expandButton,
+          borderColor: pal.expandBorder,
+          color: pal.expandColor
+        },
         title: "Expand to full chat",
         type: "button",
         children: "\u26F6"
@@ -5507,8 +5693,11 @@ function ConversationList({
   onSelect,
   className
 }) {
+  const { totalUnread } = useCollab();
   const [query, setQuery] = React4.useState("");
-  const [filter, setFilter] = React4.useState("all");
+  const [filter, setFilter] = React4.useState(
+    () => totalUnread > 0 ? "unread" : "all"
+  );
   const [searchFocused, setSearchFocused] = React4.useState(false);
   const unreadCount = React4.useMemo(
     () => conversations.filter((c) => c.unreadCount > 0).length,