@natoe/colab 0.1.17 → 0.1.18

package/dist/index.d.mts

@@ -286,6 +286,15 @@ interface CollabPanelProps {
      * MessageInput, PinnedMessagesBar, etc.) inherits them via cascade.
      */
     themeMode?: 'light' | 'dark';
+    /**
+     * Controlled channel-settings overlay. When both `showSettings` and
+     * `onSettingsChange` are provided, the parent (e.g. CollabPopup
+     * rendering a settings button in its title bar) owns the open/closed
+     * state. When omitted, CollabPanel falls back to its own internal
+     * state and surfaces a button via PatientHeader.
+     */
+    showSettings?: boolean;
+    onSettingsChange?: (open: boolean) => void;
     /** Custom class name for the outer container */
     className?: string;
     /** Custom inline styles for the outer container */
@@ -295,7 +304,7 @@ interface CollabPanelProps {
  * Full collaboration panel: patient header + pinned bar + message thread + input.
  * Supports reply, pin/unpin, and (optionally) seen-by indicators.
  */
-declare function CollabPanel({ orderId, patientData, participantIds, showSeenBy, onBack, hidePatientName, hideOpenCase, onConversationChange, themeMode, className, style, }: CollabPanelProps): react_jsx_runtime.JSX.Element;
+declare function CollabPanel({ orderId, patientData, participantIds, showSeenBy, onBack, hidePatientName, hideOpenCase, onConversationChange, themeMode, showSettings: controlledShowSettings, onSettingsChange, className, style, }: CollabPanelProps): react_jsx_runtime.JSX.Element;
 
 interface CollabPopupProps {
     /** Order ID for this conversation */

package/dist/index.d.ts

@@ -286,6 +286,15 @@ interface CollabPanelProps {
      * MessageInput, PinnedMessagesBar, etc.) inherits them via cascade.
      */
     themeMode?: 'light' | 'dark';
+    /**
+     * Controlled channel-settings overlay. When both `showSettings` and
+     * `onSettingsChange` are provided, the parent (e.g. CollabPopup
+     * rendering a settings button in its title bar) owns the open/closed
+     * state. When omitted, CollabPanel falls back to its own internal
+     * state and surfaces a button via PatientHeader.
+     */
+    showSettings?: boolean;
+    onSettingsChange?: (open: boolean) => void;
     /** Custom class name for the outer container */
     className?: string;
     /** Custom inline styles for the outer container */
@@ -295,7 +304,7 @@ interface CollabPanelProps {
  * Full collaboration panel: patient header + pinned bar + message thread + input.
  * Supports reply, pin/unpin, and (optionally) seen-by indicators.
  */
-declare function CollabPanel({ orderId, patientData, participantIds, showSeenBy, onBack, hidePatientName, hideOpenCase, onConversationChange, themeMode, className, style, }: CollabPanelProps): react_jsx_runtime.JSX.Element;
+declare function CollabPanel({ orderId, patientData, participantIds, showSeenBy, onBack, hidePatientName, hideOpenCase, onConversationChange, themeMode, showSettings: controlledShowSettings, onSettingsChange, className, style, }: CollabPanelProps): react_jsx_runtime.JSX.Element;
 
 interface CollabPopupProps {
     /** Order ID for this conversation */

package/dist/index.js

@@ -1540,8 +1540,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__ */ jsxRuntime.jsxs("div", { style: styles.actions, children: [
+  const hasPrimaryActions = hasDicom && onOpenDicom || onOpenCase;
+  const primaryActions = hasPrimaryActions ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.actions, children: [
     hasDicom && onOpenDicom && /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -1568,22 +1568,22 @@ function PatientHeader({
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Open" })
         ]
       }
-    ),
-    onOpenSettings && /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        onClick: onOpenSettings,
-        style: styles.settingsIconButton,
-        type: "button",
-        "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 })
-        ]
-      }
     )
   ] }) : null;
+  const settingsButton = onOpenSettings ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick: onOpenSettings,
+      style: styles.settingsIconButton,
+      type: "button",
+      "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 })
+      ]
+    }
+  ) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: styles.container, children: [
     !hideName && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.nameRow, children: [
       onBack && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1598,10 +1598,16 @@ function PatientHeader({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles.nameText, children: resolvedName }),
-      actions
+      primaryActions
+    ] }),
+    !hideName && (metaParts.length > 0 || settingsButton) && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.metaRow, children: [
+      metaParts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles.metaText, children: metaParts.join(" \xB7 ") }),
+      settingsButton && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.metaRowEnd, children: settingsButton })
     ] }),
-    !hideName && metaParts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.metaRow, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles.metaText, children: metaParts.join(" \xB7 ") }) }),
-    hideName && actions && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.actionsOnlyRow, children: actions })
+    hideName && (primaryActions || settingsButton) && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.actionsOnlyRow, children: [
+      primaryActions,
+      settingsButton
+    ] })
   ] });
 }
 var styles = {
@@ -1645,15 +1651,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
@@ -1854,7 +1866,6 @@ var styles3 = {
     display: "flex",
     alignItems: "center",
     gap: SPACE.S1,
-    marginTop: "2px",
     fontSize: FONT_SIZE.xs,
     opacity: 0.85
   },
@@ -2562,7 +2573,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"
@@ -2609,7 +2620,7 @@ var styles5 = {
     alignItems: "center",
     justifyContent: "flex-end",
     gap: SPACE.S2,
-    marginTop: SPACE.S2,
+    marginTop: SPACE.S1,
     fontSize: "11px",
     opacity: 0.85
   },
@@ -4214,11 +4225,16 @@ function CollabPanel({
   hideOpenCase = false,
   onConversationChange,
   themeMode = "light",
+  showSettings: controlledShowSettings,
+  onSettingsChange,
   className,
   style
 }) {
   const { config } = useCollab();
-  const [showSettings, setShowSettings] = React4.useState(false);
+  const isSettingsControlled = controlledShowSettings !== void 0 && onSettingsChange !== void 0;
+  const [internalShowSettings, setInternalShowSettings] = React4.useState(false);
+  const showSettings = isSettingsControlled ? controlledShowSettings : internalShowSettings;
+  const updateShowSettings = isSettingsControlled ? onSettingsChange : setInternalShowSettings;
   const [toast, setToast] = React4.useState(null);
   const messageListRef = React4.useRef(null);
   const {
@@ -4321,7 +4337,7 @@ function CollabPanel({
         onRemoveUser: channelSettings.removeUser,
         onLeaveChannel: channelSettings.leaveChannel,
         onDeleteChannel: channelSettings.deleteChannel,
-        onClose: () => setShowSettings(false)
+        onClose: () => updateShowSettings(false)
       }
     ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -4331,7 +4347,7 @@ function CollabPanel({
           participants,
           onOpenDicom: handleOpenDicom,
           onOpenCase: handleOpenCase,
-          onOpenSettings: () => setShowSettings(true),
+          onOpenSettings: hidePatientName ? void 0 : () => updateShowSettings(true),
           onBack,
           hideName: hidePatientName,
           displayName: conversation?.name
@@ -4474,6 +4490,7 @@ function CollabPopup({
   );
   const [isDragging, setIsDragging] = React4.useState(false);
   const [isMinimized, setIsMinimized] = React4.useState(false);
+  const [showSettings, setShowSettings] = React4.useState(false);
   const [loadedConversation, setLoadedConversation] = React4.useState(null);
   const dragOffset = React4.useRef({ x: 0, y: 0 });
   const containerRef = React4.useRef(null);
@@ -4597,6 +4614,20 @@ function CollabPopup({
             })()
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles13.titleActions, children: [
+            loadedConversation && /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowSettings(true),
+                style: styles13.titleSettingsPill,
+                "aria-label": `Open channel settings (${loadedConversation.participants.length} participants)`,
+                title: "Channel participants",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(PeopleIcon, { size: 18, color: COLOR.neutral600 }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles13.titleParticipantCount, children: loadedConversation.participants.length })
+                ]
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
@@ -4631,7 +4662,9 @@ function CollabPopup({
             patientData,
             participantIds,
             hidePatientName: true,
-            onConversationChange: setLoadedConversation
+            onConversationChange: setLoadedConversation,
+            showSettings,
+            onSettingsChange: setShowSettings
           }
         ) })
       ]
@@ -4713,6 +4746,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"