@natoe/colab 0.1.2 → 0.1.3

package/dist/index.js

@@ -1159,7 +1159,7 @@ var styles = {
   },
   patientName: {
     fontWeight: 600,
-    fontSize: "15px",
+    fontSize: "17px",
     color: "#111827"
   },
   secondaryRow: {
@@ -1169,8 +1169,8 @@ var styles = {
     alignItems: "center"
   },
   secondary: {
-    fontSize: "12px",
-    color: "#6b7280"
+    fontSize: "13px",
+    color: "#4b5563"
   },
   actions: {
     display: "flex",
@@ -1178,8 +1178,9 @@ var styles = {
     marginTop: "8px"
   },
   dicomButton: {
-    padding: "6px 12px",
-    fontSize: "13px",
+    minHeight: "40px",
+    padding: "8px 16px",
+    fontSize: "14px",
     fontWeight: 500,
     color: "#ffffff",
     backgroundColor: "#2563eb",
@@ -1188,8 +1189,9 @@ var styles = {
     cursor: "pointer"
   },
   settingsButton: {
-    padding: "6px 12px",
-    fontSize: "13px",
+    minHeight: "40px",
+    padding: "8px 16px",
+    fontSize: "14px",
     fontWeight: 500,
     color: "#374151",
     backgroundColor: "#ffffff",
@@ -1430,6 +1432,40 @@ var styles4 = {
     cursor: "pointer"
   }
 };
+function FileIcon({ size = 18, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z" })
+    }
+  );
+}
+function PinIcon({ size = 14, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 9V4l1 0c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1l1 0v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z" })
+    }
+  );
+}
+var ROLE_LABELS = {
+  radiologist: "Radiologist",
+  lab: "Imaging Center",
+  physician: "Physician",
+  admin: "Admin"
+};
 function MessageBubble({
   message,
   isOwn,
@@ -1469,7 +1505,10 @@ function MessageBubble({
               ...isOwn ? styles5.ownBubble : styles5.otherBubble
             },
             children: [
-              message.isPinned && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles5.pinnedBadge, children: "\u{1F4CC} Pinned" }),
+              message.isPinned && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles5.pinnedBadge, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(PinIcon, { size: 12 }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Pinned" })
+              ] }),
               message.replyToSnapshot && /* @__PURE__ */ jsxRuntime.jsx(
                 ReplyQuoteBlock,
                 {
@@ -1564,7 +1603,7 @@ function ImageContent({ mediaUrl, fileName }) {
 function FileContent({ mediaUrl, fileName }) {
   if (!mediaUrl) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("a", { href: mediaUrl, target: "_blank", rel: "noopener noreferrer", style: styles5.fileLink, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles5.fileIcon, children: "\u{1F4C4}" }),
+    /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { size: 20 }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles5.fileName, children: fileName || "Download file" })
   ] });
 }
@@ -1602,7 +1641,7 @@ function RoleBadge({ role }) {
     physician: "#059669",
     admin: "#dc2626"
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles5.roleBadge, backgroundColor: `${colors[role]}15`, color: colors[role] }, children: role });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles5.roleBadge, backgroundColor: `${colors[role]}15`, color: colors[role] }, children: ROLE_LABELS[role] ?? role });
 }
 function formatTime(iso) {
   try {
@@ -1631,7 +1670,7 @@ var styles5 = {
     maxWidth: "75%"
   },
   bubble: {
-    padding: "8px 12px",
+    padding: "10px 14px",
     borderRadius: "12px",
     wordBreak: "break-word"
   },
@@ -1646,11 +1685,13 @@ var styles5 = {
     borderBottomLeftRadius: "4px"
   },
   pinnedBadge: {
-    display: "inline-block",
-    fontSize: "10px",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "4px",
+    fontSize: "12px",
     fontWeight: 600,
     marginBottom: "4px",
-    opacity: 0.7
+    color: "#6b7280"
   },
   senderRow: {
     display: "flex",
@@ -1659,24 +1700,25 @@ var styles5 = {
     marginBottom: "4px"
   },
   senderName: {
-    fontSize: "12px",
+    fontSize: "13px",
     fontWeight: 600,
     color: "#374151"
   },
   roleBadge: {
-    fontSize: "10px",
-    fontWeight: 500,
-    padding: "1px 6px",
+    fontSize: "11px",
+    fontWeight: 600,
+    padding: "2px 8px",
     borderRadius: "4px"
   },
   textBody: {
     margin: 0,
-    fontSize: "14px",
-    lineHeight: "1.4"
+    fontSize: "15px",
+    lineHeight: "1.45"
   },
   timestamp: {
-    fontSize: "10px",
-    opacity: 0.7,
+    fontSize: "12px",
+    color: "inherit",
+    opacity: 0.8,
     marginTop: "4px",
     textAlign: "right"
   },
@@ -1715,9 +1757,6 @@ var styles5 = {
     color: "inherit",
     padding: "6px 0"
   },
-  fileIcon: {
-    fontSize: "18px"
-  },
   fileName: {
     fontSize: "13px",
     textDecoration: "underline"
@@ -1752,13 +1791,13 @@ var styles5 = {
     justifyContent: "center",
     alignItems: "center",
     gap: "8px",
-    padding: "4px 16px",
-    fontSize: "12px",
-    color: "#9ca3af"
+    padding: "6px 16px",
+    fontSize: "13px",
+    color: "#6b7280"
   },
   systemTime: {
-    fontSize: "10px",
-    color: "#d1d5db"
+    fontSize: "12px",
+    color: "#9ca3af"
   }
 };
 
@@ -1971,18 +2010,19 @@ var styles6 = {
   loadingMore: {
     textAlign: "center",
     padding: "12px",
-    fontSize: "13px",
-    color: "#9ca3af"
+    fontSize: "14px",
+    color: "#6b7280"
   },
   loadMoreButton: {
     display: "block",
     margin: "0 auto 12px",
-    padding: "6px 16px",
-    fontSize: "12px",
-    color: "#6b7280",
+    minHeight: "36px",
+    padding: "8px 18px",
+    fontSize: "13px",
+    color: "#374151",
     backgroundColor: "transparent",
-    border: "1px solid #e5e7eb",
-    borderRadius: "16px",
+    border: "1px solid #d1d5db",
+    borderRadius: "18px",
     cursor: "pointer"
   },
   empty: {
@@ -1991,21 +2031,22 @@ var styles6 = {
     alignItems: "center",
     justifyContent: "center",
     padding: "48px 16px",
-    color: "#9ca3af"
+    color: "#6b7280"
   },
   emptyTitle: {
-    fontSize: "15px",
-    fontWeight: 500,
+    fontSize: "16px",
+    fontWeight: 600,
+    color: "#374151",
     margin: "0 0 4px"
   },
   emptySubtitle: {
-    fontSize: "13px",
+    fontSize: "14px",
     margin: 0
   },
   typingIndicator: {
     padding: "4px 16px 8px",
-    fontSize: "12px",
-    color: "#9ca3af",
+    fontSize: "13px",
+    color: "#6b7280",
     fontStyle: "italic"
   },
   dayDivider: {
@@ -2015,12 +2056,11 @@ var styles6 = {
   },
   dayDividerPill: {
     display: "inline-block",
-    padding: "4px 12px",
-    fontSize: "12px",
+    padding: "5px 14px",
+    fontSize: "13px",
     fontWeight: 500,
-    color: "#475569",
-    backgroundColor: "#f1f5f9",
-    border: "1px solid #e2e8f0",
+    color: "#334155",
+    backgroundColor: "#e2e8f0",
     borderRadius: "12px",
     letterSpacing: "0.2px"
   }
@@ -2117,6 +2157,48 @@ var styles7 = {
     flexShrink: 0
   }
 };
+function AttachIcon({ size = 20, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" })
+    }
+  );
+}
+function SendIcon({ size = 20, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" })
+    }
+  );
+}
+function CloseIcon({ size = 18, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+    }
+  );
+}
 function MessageInput({
   onSendText,
   // MIC DISABLED — onSendAudio still accepted but unused.
@@ -2205,7 +2287,19 @@ function MessageInput({
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: styles8.container, children: [
     replyTo && onCancelReply && /* @__PURE__ */ jsxRuntime.jsx(ReplyPreview, { message: replyTo, onCancel: onCancelReply }),
-    fileError && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles8.error, children: fileError }),
+    fileError && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles8.error, role: "alert", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles8.errorText, children: fileError }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setFileError(null),
+          "aria-label": "Dismiss error",
+          style: styles8.errorDismiss,
+          children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size: 16 })
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles8.inputBar, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
@@ -2213,9 +2307,10 @@ function MessageInput({
           onClick: () => fileInputRef.current?.click(),
           disabled: disabled || isSending,
           style: styles8.iconButton,
+          "aria-label": "Attach file",
           title: "Attach file",
           type: "button",
-          children: "\u{1F4CE}"
+          children: /* @__PURE__ */ jsxRuntime.jsx(AttachIcon, { size: 22, color: "#374151" })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -2248,12 +2343,14 @@ function MessageInput({
         {
           onClick: handleSendText,
           disabled: disabled || isSending || !text.trim(),
+          "aria-label": "Send message",
+          title: "Send message",
           style: {
             ...styles8.sendButton,
             opacity: text.trim() ? 1 : 0.4
           },
           type: "button",
-          children: "\u27A4"
+          children: /* @__PURE__ */ jsxRuntime.jsx(SendIcon, { size: 20, color: "#ffffff" })
         }
       )
     ] })
@@ -2265,24 +2362,45 @@ var styles8 = {
     backgroundColor: "#ffffff"
   },
   error: {
-    padding: "6px 16px",
-    fontSize: "12px",
-    color: "#dc2626",
-    backgroundColor: "#fef2f2"
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "8px",
+    padding: "8px 12px 8px 16px",
+    fontSize: "13px",
+    color: "#b91c1c",
+    backgroundColor: "#fef2f2",
+    borderTop: "1px solid #fecaca"
+  },
+  errorText: {
+    flex: 1,
+    minWidth: 0
+  },
+  errorDismiss: {
+    width: "28px",
+    height: "28px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "transparent",
+    border: "none",
+    color: "#b91c1c",
+    borderRadius: "4px",
+    cursor: "pointer",
+    flexShrink: 0
   },
   inputBar: {
     display: "flex",
     alignItems: "flex-end",
-    gap: "4px",
-    padding: "8px 12px"
+    gap: "6px",
+    padding: "10px 12px"
   },
   iconButton: {
-    width: "36px",
-    height: "36px",
+    width: "44px",
+    height: "44px",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: "18px",
     backgroundColor: "transparent",
     border: "none",
     borderRadius: "50%",
@@ -2291,23 +2409,23 @@ var styles8 = {
   },
   textarea: {
     flex: 1,
-    padding: "8px 12px",
-    fontSize: "14px",
-    lineHeight: "1.4",
-    border: "1px solid #e5e7eb",
-    borderRadius: "20px",
+    padding: "10px 14px",
+    fontSize: "15px",
+    lineHeight: "1.45",
+    border: "1px solid #d1d5db",
+    borderRadius: "22px",
     resize: "none",
     outline: "none",
     fontFamily: "inherit",
-    maxHeight: "120px"
+    maxHeight: "120px",
+    minHeight: "44px"
   },
   sendButton: {
-    width: "36px",
-    height: "36px",
+    width: "44px",
+    height: "44px",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: "18px",
     backgroundColor: "#2563eb",
     color: "#ffffff",
     border: "none",
@@ -3098,6 +3216,34 @@ var panelStyles = {
     margin: 0
   }
 };
+function MinimizeIcon({ size = 18, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 19h12v2H6z" })
+    }
+  );
+}
+function ExpandIcon({ size = 18, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4h16v16H4V4zm2 4v10h12V8H6z" })
+    }
+  );
+}
 function CollabPopup({
   orderId,
   patientData,
@@ -3146,7 +3292,7 @@ function CollabPopup({
     const handleMouseMove = (e) => {
       setPosition({
         x: Math.max(0, Math.min(e.clientX - dragOffset.current.x, window.innerWidth - width)),
-        y: Math.max(0, Math.min(e.clientY - dragOffset.current.y, window.innerHeight - (isMinimized ? 48 : height)))
+        y: Math.max(0, Math.min(e.clientY - dragOffset.current.y, window.innerHeight - (isMinimized ? 52 : height)))
       });
     };
     const handleMouseUp = () => {
@@ -3170,7 +3316,7 @@ function CollabPopup({
         left: position.x,
         top: position.y,
         width,
-        height: isMinimized ? 48 : height,
+        height: isMinimized ? 52 : height,
         cursor: isDragging ? "grabbing" : "default"
       },
       onMouseDown: handleMouseDown,
@@ -3183,12 +3329,23 @@ function CollabPopup({
               {
                 onClick: () => setIsMinimized(!isMinimized),
                 style: styles12.titleButton,
+                "aria-label": isMinimized ? "Expand chat" : "Minimize chat",
                 title: isMinimized ? "Expand" : "Minimize",
                 type: "button",
-                children: isMinimized ? "\u25A2" : "\u2014"
+                children: isMinimized ? /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, { size: 16, color: "#cbd5e1" }) : /* @__PURE__ */ jsxRuntime.jsx(MinimizeIcon, { size: 16, color: "#cbd5e1" })
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onClose, style: styles12.titleButton, title: "Close", type: "button", children: "\u2715" })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: onClose,
+                style: styles12.titleButton,
+                "aria-label": "Close chat",
+                title: "Close",
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size: 16, color: "#cbd5e1" })
+              }
+            )
           ] })
         ] }),
         !isMinimized && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles12.panelWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(CollabPanel, { orderId, patientData, participantIds }) })
@@ -3213,15 +3370,15 @@ var styles12 = {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
-    padding: "0 12px",
-    height: "48px",
+    padding: "0 8px 0 14px",
+    height: "52px",
     backgroundColor: "#1e293b",
     cursor: "grab",
     userSelect: "none",
     flexShrink: 0
   },
   titleText: {
-    fontSize: "13px",
+    fontSize: "15px",
     fontWeight: 500,
     color: "#ffffff",
     overflow: "hidden",
@@ -3234,17 +3391,16 @@ var styles12 = {
     flexShrink: 0
   },
   titleButton: {
-    width: "28px",
-    height: "28px",
+    width: "40px",
+    height: "40px",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "transparent",
     border: "none",
-    borderRadius: "4px",
+    borderRadius: "6px",
     cursor: "pointer",
-    fontSize: "13px",
-    color: "#94a3b8"
+    color: "#cbd5e1"
   },
   panelWrapper: {
     flex: 1,
@@ -4115,7 +4271,7 @@ var styles14 = {
     gap: "8px"
   },
   name: {
-    fontSize: "14px",
+    fontSize: "15px",
     fontWeight: 500,
     color: "#111827",
     overflow: "hidden",
@@ -4128,8 +4284,8 @@ var styles14 = {
     fontWeight: 700
   },
   time: {
-    fontSize: "11px",
-    color: "#9ca3af",
+    fontSize: "12px",
+    color: "#6b7280",
     flexShrink: 0
   },
   timeUnread: {
@@ -4143,8 +4299,8 @@ var styles14 = {
     gap: "8px"
   },
   preview: {
-    fontSize: "13px",
-    color: "#6b7280",
+    fontSize: "14px",
+    color: "#4b5563",
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",