@natoe/colab 0.1.17 → 0.1.18

package/dist/index.mjs

@@ -1534,8 +1534,8 @@ function PatientHeader({
   if (patientData.bodyParts && patientData.bodyParts.length > 0) {
     metaParts.push(patientData.bodyParts.join(", "));
   }
-  const hasActions = hasDicom && onOpenDicom || onOpenCase || onOpenSettings;
-  const actions = hasActions ? /* @__PURE__ */ jsxs("div", { style: styles.actions, children: [
+  const hasPrimaryActions = hasDicom && onOpenDicom || onOpenCase;
+  const primaryActions = hasPrimaryActions ? /* @__PURE__ */ jsxs("div", { style: styles.actions, children: [
     hasDicom && onOpenDicom && /* @__PURE__ */ jsxs(
       "button",
       {
@@ -1562,22 +1562,22 @@ function PatientHeader({
           /* @__PURE__ */ jsx("span", { children: "Open" })
         ]
       }
-    ),
-    onOpenSettings && /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: onOpenSettings,
-        style: styles.settingsIconButton,
-        type: "button",
-        "aria-label": `Open channel settings (${participants.length} participants)`,
-        title: "Channel participants",
-        children: [
-          /* @__PURE__ */ jsx(PeopleIcon, { size: 18, color: COLOR.neutral600 }),
-          /* @__PURE__ */ jsx("span", { style: styles.participantCount, children: participants.length })
-        ]
-      }
     )
   ] }) : null;
+  const settingsButton = onOpenSettings ? /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: onOpenSettings,
+      style: styles.settingsIconButton,
+      type: "button",
+      "aria-label": `Open channel settings (${participants.length} participants)`,
+      title: "Channel participants",
+      children: [
+        /* @__PURE__ */ jsx(PeopleIcon, { size: 18, color: COLOR.neutral600 }),
+        /* @__PURE__ */ jsx("span", { style: styles.participantCount, children: participants.length })
+      ]
+    }
+  ) : null;
   return /* @__PURE__ */ jsxs("div", { className, style: styles.container, children: [
     !hideName && /* @__PURE__ */ jsxs("div", { style: styles.nameRow, children: [
       onBack && /* @__PURE__ */ jsx(
@@ -1592,10 +1592,16 @@ function PatientHeader({
         }
       ),
       /* @__PURE__ */ jsx("span", { style: styles.nameText, children: resolvedName }),
-      actions
+      primaryActions
+    ] }),
+    !hideName && (metaParts.length > 0 || settingsButton) && /* @__PURE__ */ jsxs("div", { style: styles.metaRow, children: [
+      metaParts.length > 0 && /* @__PURE__ */ jsx("span", { style: styles.metaText, children: metaParts.join(" \xB7 ") }),
+      settingsButton && /* @__PURE__ */ jsx("div", { style: styles.metaRowEnd, children: settingsButton })
     ] }),
-    !hideName && metaParts.length > 0 && /* @__PURE__ */ jsx("div", { style: styles.metaRow, children: /* @__PURE__ */ jsx("span", { style: styles.metaText, children: metaParts.join(" \xB7 ") }) }),
-    hideName && actions && /* @__PURE__ */ jsx("div", { style: styles.actionsOnlyRow, children: actions })
+    hideName && (primaryActions || settingsButton) && /* @__PURE__ */ jsxs("div", { style: styles.actionsOnlyRow, children: [
+      primaryActions,
+      settingsButton
+    ] })
   ] });
 }
 var styles = {
@@ -1639,15 +1645,21 @@ var styles = {
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
-  // Sub-row beneath the title — small muted meta. Aligned under the
-  // name (past the back button) so it visually anchors to the title
-  // rather than the panel edge.
+  // Sub-row beneath the title — small muted meta on the left, the
+  // channel-settings pill on the right when present. Meta text can
+  // ellipsis on narrow widths; the settings pill stays its content
+  // width and hugs the trailing edge via `metaRowEnd`.
   metaRow: {
     display: "flex",
     alignItems: "center",
+    gap: SPACE.S2,
     paddingLeft: `calc(${SIZE.controlIcon} + ${SPACE.S2} - ${SPACE.S2})`,
     minWidth: 0
   },
+  metaRowEnd: {
+    marginLeft: "auto",
+    flexShrink: 0
+  },
   // When hideName=true (popup mode), only the actions render. The
   // popup's own title bar carries the name + meta above this row, so
   // the actions land flush-left here — pinning them to the right
@@ -1848,7 +1860,6 @@ var styles3 = {
     display: "flex",
     alignItems: "center",
     gap: SPACE.S1,
-    marginTop: "2px",
     fontSize: FONT_SIZE.xs,
     opacity: 0.85
   },
@@ -2556,7 +2567,7 @@ var styles5 = {
     minWidth: 0
   },
   bubble: {
-    padding: `${SPACE.S3} ${SPACE.S4}`,
+    padding: `${SPACE.S2} ${SPACE.S4}`,
     borderRadius: "18px",
     wordBreak: "break-word",
     border: "1px solid transparent"
@@ -2603,7 +2614,7 @@ var styles5 = {
     alignItems: "center",
     justifyContent: "flex-end",
     gap: SPACE.S2,
-    marginTop: SPACE.S2,
+    marginTop: SPACE.S1,
     fontSize: "11px",
     opacity: 0.85
   },
@@ -4208,11 +4219,16 @@ function CollabPanel({
   hideOpenCase = false,
   onConversationChange,
   themeMode = "light",
+  showSettings: controlledShowSettings,
+  onSettingsChange,
   className,
   style
 }) {
   const { config } = useCollab();
-  const [showSettings, setShowSettings] = useState(false);
+  const isSettingsControlled = controlledShowSettings !== void 0 && onSettingsChange !== void 0;
+  const [internalShowSettings, setInternalShowSettings] = useState(false);
+  const showSettings = isSettingsControlled ? controlledShowSettings : internalShowSettings;
+  const updateShowSettings = isSettingsControlled ? onSettingsChange : setInternalShowSettings;
   const [toast, setToast] = useState(null);
   const messageListRef = useRef(null);
   const {
@@ -4315,7 +4331,7 @@ function CollabPanel({
         onRemoveUser: channelSettings.removeUser,
         onLeaveChannel: channelSettings.leaveChannel,
         onDeleteChannel: channelSettings.deleteChannel,
-        onClose: () => setShowSettings(false)
+        onClose: () => updateShowSettings(false)
       }
     ) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -4325,7 +4341,7 @@ function CollabPanel({
           participants,
           onOpenDicom: handleOpenDicom,
           onOpenCase: handleOpenCase,
-          onOpenSettings: () => setShowSettings(true),
+          onOpenSettings: hidePatientName ? void 0 : () => updateShowSettings(true),
           onBack,
           hideName: hidePatientName,
           displayName: conversation?.name
@@ -4468,6 +4484,7 @@ function CollabPopup({
   );
   const [isDragging, setIsDragging] = useState(false);
   const [isMinimized, setIsMinimized] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
   const [loadedConversation, setLoadedConversation] = useState(null);
   const dragOffset = useRef({ x: 0, y: 0 });
   const containerRef = useRef(null);
@@ -4591,6 +4608,20 @@ function CollabPopup({
             })()
           ] }),
           /* @__PURE__ */ jsxs("div", { style: styles13.titleActions, children: [
+            loadedConversation && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowSettings(true),
+                style: styles13.titleSettingsPill,
+                "aria-label": `Open channel settings (${loadedConversation.participants.length} participants)`,
+                title: "Channel participants",
+                children: [
+                  /* @__PURE__ */ jsx(PeopleIcon, { size: 18, color: COLOR.neutral600 }),
+                  /* @__PURE__ */ jsx("span", { style: styles13.titleParticipantCount, children: loadedConversation.participants.length })
+                ]
+              }
+            ),
             /* @__PURE__ */ jsx(
               "button",
               {
@@ -4625,7 +4656,9 @@ function CollabPopup({
             patientData,
             participantIds,
             hidePatientName: true,
-            onConversationChange: setLoadedConversation
+            onConversationChange: setLoadedConversation,
+            showSettings,
+            onSettingsChange: setShowSettings
           }
         ) })
       ]
@@ -4707,6 +4740,29 @@ var styles13 = {
     color: COLOR.neutral700,
     flexShrink: 0
   },
+  // People-icon + participant-count pill in the title-actions row.
+  // Matches the in-panel settings button's shape (icon + count) so a
+  // user moving between popup mode and standalone mode (CollabInbox
+  // compact) sees the same control language.
+  titleSettingsPill: {
+    height: "36px",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: SPACE.S2,
+    padding: `0 ${SPACE.S3}`,
+    backgroundColor: COLOR.neutral100,
+    border: `1px solid ${COLOR.neutral200}`,
+    borderRadius: RADIUS.md,
+    color: COLOR.neutral600,
+    cursor: "pointer",
+    flexShrink: 0
+  },
+  titleParticipantCount: {
+    fontSize: FONT_SIZE.sm,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.neutral700,
+    fontVariantNumeric: "tabular-nums"
+  },
   panelWrapper: {
     flex: 1,
     overflow: "hidden"