@mieweb/ui 0.8.0 → 0.9.0-dev.1

package/dist/{chunk-FDV7EQWH.js → chunk-RPG2ZP2T.js}

@@ -1,9 +1,513 @@
-import { DragDropZone, MessageComposer } from './chunk-EKRT7K2K.js';
+import { useMentionAutocomplete, DragDropZone, AttachmentPreviewItem, AttachmentPicker, CameraButton, MentionMenu, getFileType, generateAttachmentId } from './chunk-IF3X2WZP.js';
 import { cn } from './chunk-TQONQSJO.js';
-import * as React5 from 'react';
+import * as React6 from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+function isFileAccepted(file, accepted) {
+  if (!accepted || accepted.length === 0) return true;
+  const mime = file.type;
+  const name = file.name.toLowerCase();
+  return accepted.some((token) => {
+    if (token.startsWith(".")) return name.endsWith(token.toLowerCase());
+    if (token.endsWith("/*")) return mime.startsWith(token.slice(0, -1));
+    if (token.includes("/")) return mime === token;
+    return false;
+  });
+}
+function CharacterCounter({
+  current,
+  max,
+  showWarningAt = 0.9,
+  className
+}) {
+  const percentage = current / max;
+  const isWarning = percentage >= showWarningAt && percentage < 1;
+  const isOver = current > max;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "text-xs tabular-nums",
+        isOver ? "font-medium text-red-700 dark:text-red-400" : isWarning ? "text-amber-700 dark:text-amber-400" : "text-neutral-600 dark:text-neutral-400",
+        className
+      ),
+      "aria-live": "polite",
+      "aria-label": `${current} of ${max} characters`,
+      children: [
+        current,
+        "/",
+        max
+      ]
+    }
+  );
+}
+CharacterCounter.displayName = "CharacterCounter";
+var sendButtonVariants = cva(
+  [
+    "inline-flex items-center justify-center",
+    "rounded-full p-3 self-start",
+    "transition-all duration-200",
+    "focus:outline-none focus:ring-2 focus:ring-primary-500",
+    "disabled:opacity-50 disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "bg-primary-800 text-white",
+          "hover:bg-primary-900",
+          "active:scale-95"
+        ],
+        subtle: [
+          "bg-transparent text-primary-800",
+          "hover:bg-primary-50 dark:hover:bg-primary-900/20"
+        ]
+      },
+      canSend: {
+        true: "",
+        false: "opacity-50 cursor-not-allowed"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      canSend: false
+    }
+  }
+);
+var SendButton = React6.forwardRef(
+  ({ className, variant, canSend, isLoading, disabled, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "submit",
+        disabled: disabled || !canSend || isLoading,
+        "data-slot": "composer-send-button",
+        className: cn(sendButtonVariants({ variant, canSend }), className),
+        "aria-label": isLoading ? "Sending message" : "Send message",
+        ...props,
+        children: isLoading ? /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            "aria-hidden": "true",
+            className: "h-5 w-5 animate-spin",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: "opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor",
+                  strokeWidth: "4"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: "opacity-75",
+                  fill: "currentColor",
+                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "aria-hidden": "true",
+            className: "h-5 w-5",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+SendButton.displayName = "SendButton";
+var MessageComposer = React6.forwardRef(
+  ({
+    onSend,
+    onTypingStart,
+    onTypingStop,
+    value: controlledValue,
+    onValueChange,
+    placeholder = "Type a message...",
+    maxLength = 1600,
+    showCharacterCount = false,
+    disabled = false,
+    isSending = false,
+    showAttachmentPicker = true,
+    showCameraButton = false,
+    acceptedFileTypes = ["image/*", "video/*", ".pdf", ".doc", ".docx"],
+    maxFileSize = 25 * 1024 * 1024,
+    maxAttachments = 10,
+    onError,
+    autoFocus = false,
+    replyTo = null,
+    onCancelReply,
+    variant = "default",
+    inputTrailing,
+    mentionOptions,
+    className
+  }, ref) => {
+    const textareaRef = React6.useRef(null);
+    const [internalContent, setInternalContent] = React6.useState("");
+    const isControlled = controlledValue !== void 0;
+    const content = isControlled ? controlledValue : internalContent;
+    const setContent = React6.useCallback(
+      (val) => {
+        if (isControlled) {
+          const newVal = typeof val === "function" ? val(controlledValue) : val;
+          onValueChange?.(newVal);
+        } else {
+          setInternalContent(val);
+        }
+      },
+      [isControlled, controlledValue, onValueChange]
+    );
+    const [attachments, setAttachments] = React6.useState(
+      []
+    );
+    const [isTyping, setIsTyping] = React6.useState(false);
+    const typingTimeoutRef = React6.useRef(null);
+    React6.useImperativeHandle(ref, () => textareaRef.current);
+    React6.useEffect(() => {
+      const textarea = textareaRef.current;
+      if (textarea) {
+        textarea.style.height = "auto";
+        textarea.style.height = `${Math.min(textarea.scrollHeight, 150)}px`;
+      }
+    }, [content]);
+    React6.useEffect(() => {
+      if (content.length > 0 && !isTyping) {
+        setIsTyping(true);
+        onTypingStart?.();
+      }
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+      typingTimeoutRef.current = setTimeout(() => {
+        if (isTyping) {
+          setIsTyping(false);
+          onTypingStop?.();
+        }
+      }, 2e3);
+      return () => {
+        if (typingTimeoutRef.current) {
+          clearTimeout(typingTimeoutRef.current);
+        }
+      };
+    }, [content, isTyping, onTypingStart, onTypingStop]);
+    React6.useEffect(() => {
+      if (autoFocus) {
+        textareaRef.current?.focus();
+      }
+    }, [autoFocus]);
+    React6.useEffect(() => {
+      if (replyTo) {
+        textareaRef.current?.focus();
+      }
+    }, [replyTo]);
+    const mention = useMentionAutocomplete({
+      options: mentionOptions,
+      value: content,
+      setValue: setContent,
+      textareaRef
+    });
+    const canSend = (content.trim().length > 0 || attachments.length > 0) && content.length <= maxLength && !disabled && !isSending;
+    const handleSubmit = async (event) => {
+      event.preventDefault();
+      if (!canSend) return;
+      const message = {
+        content: content.trim(),
+        attachments: attachments.map((a) => a.file),
+        replyToId: replyTo?.id
+      };
+      setContent("");
+      setAttachments([]);
+      setIsTyping(false);
+      onTypingStop?.();
+      try {
+        await onSend(message);
+      } catch {
+        setContent(message.content);
+        onError?.("Failed to send message");
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (mention.handleKeyDown(event)) return;
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        if (canSend) {
+          handleSubmit(event);
+        }
+      }
+    };
+    const handleFilesSelected = (files) => {
+      const remainingSlots = maxAttachments - attachments.length;
+      const filesToAdd = files.slice(0, remainingSlots);
+      if (files.length > remainingSlots) {
+        onError?.(`Maximum ${maxAttachments} attachments allowed`);
+      }
+      const newAttachments = filesToAdd.map((file) => {
+        const type = getFileType(file.type);
+        let previewUrl;
+        if (type === "image" || type === "video") {
+          previewUrl = URL.createObjectURL(file);
+        }
+        return {
+          id: generateAttachmentId(),
+          file,
+          previewUrl,
+          type,
+          state: "pending"
+        };
+      });
+      setAttachments((prev) => [...prev, ...newAttachments]);
+    };
+    const handlePaste = (event) => {
+      if (!showAttachmentPicker || disabled) return;
+      const pasted = Array.from(event.clipboardData.items).filter((item) => item.kind === "file").map((item) => item.getAsFile()).filter((f) => f !== null).filter((f) => isFileAccepted(f, acceptedFileTypes));
+      if (pasted.length === 0) return;
+      event.preventDefault();
+      handleFilesSelected(pasted);
+    };
+    const handleRemoveAttachment = (attachmentId) => {
+      setAttachments((prev) => {
+        const attachment = prev.find((a) => a.id === attachmentId);
+        if (attachment?.previewUrl) {
+          URL.revokeObjectURL(attachment.previewUrl);
+        }
+        return prev.filter((a) => a.id !== attachmentId);
+      });
+    };
+    React6.useEffect(() => {
+      const currentAttachments = attachments;
+      return () => {
+        currentAttachments.forEach((a) => {
+          if (a.previewUrl) {
+            URL.revokeObjectURL(a.previewUrl);
+          }
+        });
+      };
+    }, [attachments]);
+    return /* @__PURE__ */ jsx(
+      DragDropZone,
+      {
+        onFilesDropped: handleFilesSelected,
+        acceptedTypes: acceptedFileTypes,
+        maxFileSize,
+        maxFiles: maxAttachments - attachments.length,
+        disabled: disabled || attachments.length >= maxAttachments,
+        onError,
+        className: cn("w-full", className),
+        children: /* @__PURE__ */ jsxs(
+          "form",
+          {
+            onSubmit: handleSubmit,
+            "data-slot": "message-composer",
+            className: "w-full",
+            children: [
+              replyTo && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "composer-reply-preview",
+                  className: cn(
+                    "flex items-center gap-2 px-4 py-2",
+                    "bg-neutral-50 dark:bg-neutral-800/50",
+                    "border-primary-500 border-s-4"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsxs("span", { className: "text-primary-800 dark:text-primary-400 text-xs font-medium", children: [
+                        "Replying to ",
+                        replyTo.senderName
+                      ] }),
+                      /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-neutral-600 dark:text-neutral-300", children: replyTo.content })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: onCancelReply,
+                        className: cn(
+                          "shrink-0 rounded p-1",
+                          "text-neutral-500 hover:text-neutral-700",
+                          "dark:text-neutral-400 dark:hover:text-neutral-200",
+                          "focus:ring-primary-500 focus:ring-2 focus:outline-none"
+                        ),
+                        "aria-label": "Cancel reply",
+                        children: /* @__PURE__ */ jsx(
+                          "svg",
+                          {
+                            "aria-hidden": "true",
+                            className: "h-4 w-4",
+                            fill: "none",
+                            viewBox: "0 0 24 24",
+                            stroke: "currentColor",
+                            children: /* @__PURE__ */ jsx(
+                              "path",
+                              {
+                                strokeLinecap: "round",
+                                strokeLinejoin: "round",
+                                strokeWidth: 2,
+                                d: "M6 18L18 6M6 6l12 12"
+                              }
+                            )
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              attachments.length > 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "composer-attachments",
+                  className: cn(
+                    "flex flex-wrap gap-2 p-3",
+                    "border-t border-neutral-200 dark:border-neutral-700"
+                  ),
+                  children: attachments.map((attachment) => /* @__PURE__ */ jsx(
+                    AttachmentPreviewItem,
+                    {
+                      attachment,
+                      onRemove: () => handleRemoveAttachment(attachment.id)
+                    },
+                    attachment.id
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "composer-input-area",
+                  className: cn(
+                    "flex items-center gap-2 p-3",
+                    "bg-white dark:bg-neutral-900",
+                    variant === "default" && "border-t border-neutral-200 dark:border-neutral-700"
+                  ),
+                  children: [
+                    showAttachmentPicker && /* @__PURE__ */ jsx(
+                      AttachmentPicker,
+                      {
+                        onFilesSelected: handleFilesSelected,
+                        acceptedTypes: acceptedFileTypes,
+                        maxFileSize,
+                        maxFiles: maxAttachments - attachments.length,
+                        disabled: disabled || attachments.length >= maxAttachments,
+                        onError
+                      }
+                    ),
+                    showCameraButton && /* @__PURE__ */ jsx(
+                      CameraButton,
+                      {
+                        onCapture: (file) => handleFilesSelected([file]),
+                        disabled: disabled || attachments.length >= maxAttachments
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        "data-slot": "composer-input-wrapper",
+                        className: "relative flex-1",
+                        ref: mention.anchorRef,
+                        children: [
+                          /* @__PURE__ */ jsx(MentionMenu, { mention }),
+                          /* @__PURE__ */ jsx(
+                            "textarea",
+                            {
+                              ref: textareaRef,
+                              "data-slot": "composer-input",
+                              value: content,
+                              onChange: (e) => {
+                                setContent(e.target.value);
+                                mention.sync(
+                                  e.target.value,
+                                  e.target.selectionStart ?? e.target.value.length
+                                );
+                              },
+                              onClick: (e) => {
+                                const el = e.currentTarget;
+                                mention.sync(el.value, el.selectionStart ?? el.value.length);
+                              },
+                              onKeyDown: handleKeyDown,
+                              onPaste: handlePaste,
+                              placeholder,
+                              disabled: disabled || isSending,
+                              rows: 1,
+                              className: cn(
+                                "w-full resize-none rounded-2xl py-2.5",
+                                inputTrailing ? "ps-4 pe-10" : "px-4",
+                                "bg-neutral-100 dark:bg-neutral-800",
+                                "text-neutral-900 dark:text-neutral-100",
+                                "placeholder:text-neutral-400 dark:placeholder:text-neutral-500",
+                                "focus:ring-primary-500 focus:ring-2 focus:outline-none",
+                                "disabled:cursor-not-allowed disabled:opacity-50",
+                                "transition-colors",
+                                "max-h-[150px]"
+                              ),
+                              "aria-label": "Message",
+                              "aria-describedby": showCharacterCount ? "char-count" : void 0,
+                              ...mention.inputProps
+                            }
+                          ),
+                          inputTrailing && /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              "data-slot": "composer-input-trailing",
+                              className: "pointer-events-none absolute end-1 top-0 flex h-[44px] items-center [&>*]:pointer-events-auto",
+                              children: inputTrailing
+                            }
+                          ),
+                          showCharacterCount && /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              "data-slot": "composer-char-count",
+                              id: "char-count",
+                              className: "absolute end-3 bottom-1.5",
+                              children: /* @__PURE__ */ jsx(CharacterCounter, { current: content.length, max: maxLength })
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      SendButton,
+                      {
+                        canSend,
+                        isLoading: isSending,
+                        disabled
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+MessageComposer.displayName = "MessageComposer";
 var statusIconVariants = cva(
   "inline-flex items-center gap-0.5 text-current",
   {
@@ -147,7 +651,10 @@ function ReadReceiptIndicator({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn("flex items-center -space-x-1", className),
+      className: cn(
+        "flex items-center -space-x-1 rtl:space-x-reverse",
+        className
+      ),
       "aria-label": `Read by ${receipts.map((r) => r.participant.name).join(", ")}`,
       children: [
         visibleReceipts.map((receipt) => /* @__PURE__ */ jsx(
@@ -324,7 +831,7 @@ function AttachmentPreview({
             )
           }
         ) }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 text-left", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 text-start", children: [
           /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: attachment.filename }),
           /* @__PURE__ */ jsx("p", { className: "text-xs opacity-70", children: formatFileSize(attachment.size) })
         ] })
@@ -346,12 +853,12 @@ var bubbleVariants = cva(
   {
     variants: {
       variant: {
-        outgoing: ["bg-primary-800 text-white", "rounded-br-md", "ml-auto"],
+        outgoing: ["bg-primary-800 text-white", "rounded-ee-md", "ms-auto"],
         incoming: [
           "bg-neutral-100 text-neutral-900",
           "dark:bg-neutral-800 dark:text-neutral-100",
-          "rounded-bl-md",
-          "mr-auto"
+          "rounded-es-md",
+          "me-auto"
         ],
         system: [
           "mx-auto max-w-none",
@@ -381,7 +888,7 @@ function defaultFormatTimestamp(timestamp) {
     minute: "2-digit"
   });
 }
-var MessageBubble = React5.forwardRef(
+var MessageBubble = React6.forwardRef(
   ({
     className,
     message,
@@ -491,7 +998,7 @@ var MessageBubble = React5.forwardRef(
                         attachment.id
                       )) }),
                       hasText && /* @__PURE__ */ jsx("p", { className: "break-words whitespace-pre-wrap", children: message.isDeleted ? /* @__PURE__ */ jsx("span", { className: "italic opacity-60", children: "This message was deleted" }) : message.content }),
-                      message.isEdited && !message.isDeleted && /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs opacity-60", children: "(edited)" })
+                      message.isEdited && !message.isDeleted && /* @__PURE__ */ jsx("span", { className: "ms-1 text-xs opacity-60", children: "(edited)" })
                     ]
                   }
                 ),
@@ -664,7 +1171,7 @@ function SkeletonMessage({
             "data-slot": "skeleton-bubble",
             className: cn(
               "animate-pulse rounded-2xl",
-              isOutgoing ? "bg-primary-800/30 rounded-br-md" : "rounded-bl-md bg-neutral-200 dark:bg-neutral-700",
+              isOutgoing ? "bg-primary-800/30 rounded-ee-md" : "rounded-es-md bg-neutral-200 dark:bg-neutral-700",
               "h-10 w-48"
             )
           }
@@ -688,7 +1195,7 @@ function TypingIndicator({ typingState, className }) {
       "aria-live": "polite",
       "aria-label": typingText,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-2xl rounded-bl-md bg-neutral-200 px-4 py-3 dark:bg-neutral-700", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-2xl rounded-es-md bg-neutral-200 px-4 py-3 dark:bg-neutral-700", children: [
           /* @__PURE__ */ jsx(
             "span",
             {
@@ -856,7 +1363,7 @@ function LoadMoreButton({
   );
 }
 LoadMoreButton.displayName = "LoadMoreButton";
-var MessageList = React5.forwardRef(
+var MessageList = React6.forwardRef(
   ({
     messages,
     currentUser,
@@ -875,19 +1382,19 @@ var MessageList = React5.forwardRef(
     className,
     autoScroll = "onNewMessage"
   }, ref) => {
-    const scrollContainerRef = React5.useRef(null);
-    const bottomRef = React5.useRef(null);
-    const [isUserScrolled, setIsUserScrolled] = React5.useState(false);
-    const prevMessageCountRef = React5.useRef(messages.length);
-    React5.useImperativeHandle(ref, () => scrollContainerRef.current);
-    const handleScroll = React5.useCallback(() => {
+    const scrollContainerRef = React6.useRef(null);
+    const bottomRef = React6.useRef(null);
+    const [isUserScrolled, setIsUserScrolled] = React6.useState(false);
+    const prevMessageCountRef = React6.useRef(messages.length);
+    React6.useImperativeHandle(ref, () => scrollContainerRef.current);
+    const handleScroll = React6.useCallback(() => {
       const container = scrollContainerRef.current;
       if (!container) return;
       const { scrollTop, scrollHeight, clientHeight } = container;
       const isAtBottom = scrollHeight - scrollTop - clientHeight < 100;
       setIsUserScrolled(!isAtBottom);
     }, []);
-    React5.useEffect(() => {
+    React6.useEffect(() => {
       const container = scrollContainerRef.current;
       const bottom = bottomRef.current;
       if (!container || !bottom) return;
@@ -903,7 +1410,7 @@ var MessageList = React5.forwardRef(
         }
       }
     }, [messages, currentUser.id, autoScroll, isUserScrolled]);
-    React5.useEffect(() => {
+    React6.useEffect(() => {
       const bottom = bottomRef.current;
       if (bottom && !isLoading) {
         bottom.scrollIntoView();
@@ -956,7 +1463,7 @@ var MessageList = React5.forwardRef(
             {
               "data-slot": "message-list-content",
               className: "flex flex-col gap-1 p-4",
-              children: messageGroups.map((group) => /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+              children: messageGroups.map((group) => /* @__PURE__ */ jsxs(React6.Fragment, { children: [
                 groupByDate && group.label && /* @__PURE__ */ jsx(DateSeparator, { label: group.label }),
                 group.messages.map((message, index) => {
                   const prevMessage = group.messages[index - 1];
@@ -1000,7 +1507,7 @@ var MessageList = React5.forwardRef(
                 bottomRef.current?.scrollIntoView({ behavior: "smooth" });
               },
               className: cn(
-                "fixed right-4 bottom-24 z-10",
+                "fixed end-4 bottom-24 z-10",
                 "rounded-full p-3 shadow-lg",
                 "bg-white dark:bg-neutral-800",
                 "border border-neutral-200 dark:border-neutral-700",
@@ -1095,7 +1602,7 @@ function formatLastSeen(date) {
   if (diffDays < 7) return `${diffDays}d ago`;
   return date.toLocaleDateString();
 }
-var ConversationHeader = React5.forwardRef(
+var ConversationHeader = React6.forwardRef(
   ({
     className,
     size,
@@ -1130,7 +1637,7 @@ var ConversationHeader = React5.forwardRef(
               type: "button",
               onClick: onBack,
               className: cn(
-                "-ml-2 rounded-full p-2",
+                "-ms-2 rounded-full p-2",
                 "text-neutral-500 hover:text-neutral-700",
                 "dark:text-neutral-400 dark:hover:text-neutral-200",
                 "hover:bg-neutral-100 dark:hover:bg-neutral-800",
@@ -1186,7 +1693,7 @@ var ConversationHeader = React5.forwardRef(
                   "span",
                   {
                     className: cn(
-                      "absolute right-0 bottom-0",
+                      "absolute end-0 bottom-0",
                       "h-3 w-3 rounded-full",
                       "bg-green-500 ring-2 ring-white dark:ring-neutral-900"
                     ),
@@ -1217,7 +1724,7 @@ var ConversationHeader = React5.forwardRef(
   }
 );
 ConversationHeader.displayName = "ConversationHeader";
-var ConversationListItem = React5.forwardRef(({ className, conversation, isSelected, onSelect, ...props }, ref) => {
+var ConversationListItem = React6.forwardRef(({ className, conversation, isSelected, onSelect, ...props }, ref) => {
   const participant = conversation.participants.find((p) => !p.isCurrentUser);
   const title = getConversationTitle(conversation, participant);
   const avatarUrl = conversation.avatarUrl || participant?.avatarUrl;
@@ -1257,7 +1764,7 @@ var ConversationListItem = React5.forwardRef(({ className, conversation, isSelec
       "data-slot": "conversation-list-item",
       className: cn(
         "flex w-full items-center gap-3 px-4 py-3",
-        "text-left transition-colors",
+        "text-start transition-colors",
         isSelected ? "bg-primary-50 dark:bg-primary-900/20" : "hover:bg-neutral-50 dark:hover:bg-neutral-800/50",
         "focus:bg-neutral-50 focus:outline-none dark:focus:bg-neutral-800/50",
         className
@@ -1292,7 +1799,7 @@ var ConversationListItem = React5.forwardRef(({ className, conversation, isSelec
                 "span",
                 {
                   className: cn(
-                    "absolute right-0 bottom-0",
+                    "absolute end-0 bottom-0",
                     "h-3 w-3 rounded-full",
                     "bg-green-500 ring-2 ring-white dark:ring-neutral-900"
                   )
@@ -1425,7 +1932,7 @@ function ConversationListSkeleton({
 }
 ConversationListSkeleton.displayName = "ConversationListSkeleton";
 function LightboxModal({ attachment, onClose }) {
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -1467,7 +1974,7 @@ function LightboxModal({ attachment, onClose }) {
             type: "button",
             onClick: onClose,
             className: cn(
-              "absolute top-4 right-4 z-10",
+              "absolute end-4 top-4 z-10",
               "rounded-full p-2",
               "bg-white/10 text-white",
               "hover:bg-white/20",
@@ -1522,7 +2029,7 @@ function LightboxModal({ attachment, onClose }) {
   );
 }
 LightboxModal.displayName = "LightboxModal";
-var MessageThread = React5.forwardRef(
+var MessageThread = React6.forwardRef(
   ({
     conversation,
     messages,
@@ -1553,8 +2060,8 @@ var MessageThread = React5.forwardRef(
     onError,
     className
   }, ref) => {
-    const [lightboxAttachment, setLightboxAttachment] = React5.useState(null);
-    const [replyTo, setReplyTo] = React5.useState(null);
+    const [lightboxAttachment, setLightboxAttachment] = React6.useState(null);
+    const [replyTo, setReplyTo] = React6.useState(null);
     const participant = conversation?.type === "direct" ? conversation.participants.find((p) => p.id !== currentUser.id) : void 0;
     const handleAttachmentClick = (attachment, message) => {
       if (attachment.type === "image" || attachment.type === "video") {
@@ -1693,7 +2200,7 @@ function MessagingSplitView({
             "data-slot": "messaging-list-pane",
             className: cn(
               "h-full w-full flex-shrink-0",
-              "border-r border-neutral-200 dark:border-neutral-700",
+              "border-e border-neutral-200 dark:border-neutral-700",
               hideMobileClasses[mobileBreakpoint]
             ),
             style: {
@@ -1726,13 +2233,13 @@ function useMessages(options) {
     onRetry,
     onLoadMore
   } = options;
-  const [messages, setMessages] = React5.useState(initialMessages);
-  const [isSending, setIsSending] = React5.useState(false);
-  const [isLoadingMore, setIsLoadingMore] = React5.useState(false);
-  React5.useEffect(() => {
+  const [messages, setMessages] = React6.useState(initialMessages);
+  const [isSending, setIsSending] = React6.useState(false);
+  const [isLoadingMore, setIsLoadingMore] = React6.useState(false);
+  React6.useEffect(() => {
     setMessages(initialMessages);
   }, [initialMessages]);
-  const addMessage = React5.useCallback((message) => {
+  const addMessage = React6.useCallback((message) => {
     setMessages((prev) => {
       if (prev.some((m) => m.id === message.id)) {
         return prev;
@@ -1740,7 +2247,7 @@ function useMessages(options) {
       return [...prev, message];
     });
   }, []);
-  const updateMessage = React5.useCallback(
+  const updateMessage = React6.useCallback(
     (messageId, updates) => {
       setMessages(
         (prev) => prev.map((m) => m.id === messageId ? { ...m, ...updates } : m)
@@ -1748,22 +2255,22 @@ function useMessages(options) {
     },
     []
   );
-  const removeMessage = React5.useCallback((messageId) => {
+  const removeMessage = React6.useCallback((messageId) => {
     setMessages((prev) => prev.filter((m) => m.id !== messageId));
   }, []);
-  const updateStatus = React5.useCallback(
+  const updateStatus = React6.useCallback(
     (messageId, status) => {
       updateMessage(messageId, { status });
     },
     [updateMessage]
   );
-  const markAsRead = React5.useCallback(
+  const markAsRead = React6.useCallback(
     (messageId) => {
       updateStatus(messageId, "read");
     },
     [updateStatus]
   );
-  const sendMessage = React5.useCallback(
+  const sendMessage = React6.useCallback(
     async (newMessage) => {
       const optimisticId = `optimistic-${Date.now()}`;
       const optimisticMessage = {
@@ -1795,7 +2302,7 @@ function useMessages(options) {
     },
     [currentUser, onSend, addMessage, updateStatus]
   );
-  const retryMessage = React5.useCallback(
+  const retryMessage = React6.useCallback(
     async (messageId) => {
       updateStatus(messageId, "sending");
       try {
@@ -1809,7 +2316,7 @@ function useMessages(options) {
     },
     [onRetry, updateStatus]
   );
-  const loadMore = React5.useCallback(async () => {
+  const loadMore = React6.useCallback(async () => {
     if (isLoadingMore || !onLoadMore) return;
     setIsLoadingMore(true);
     try {
@@ -1840,13 +2347,13 @@ function useTypingIndicator(options = {}) {
     onTypingStart,
     onTypingStop
   } = options;
-  const [participants, setParticipants] = React5.useState(initialParticipants);
-  const [isLocalTyping, setIsLocalTyping] = React5.useState(false);
-  const typingTimeoutRef = React5.useRef(null);
-  React5.useEffect(() => {
+  const [participants, setParticipants] = React6.useState(initialParticipants);
+  const [isLocalTyping, setIsLocalTyping] = React6.useState(false);
+  const typingTimeoutRef = React6.useRef(null);
+  React6.useEffect(() => {
     setParticipants(initialParticipants);
   }, [initialParticipants]);
-  const startTyping = React5.useCallback(() => {
+  const startTyping = React6.useCallback(() => {
     if (!isLocalTyping) {
       setIsLocalTyping(true);
       onTypingStart?.();
@@ -1859,21 +2366,21 @@ function useTypingIndicator(options = {}) {
       onTypingStop?.();
     }, debounceTime);
   }, [isLocalTyping, debounceTime, onTypingStart, onTypingStop]);
-  const stopTyping = React5.useCallback(() => {
+  const stopTyping = React6.useCallback(() => {
     if (typingTimeoutRef.current) {
       clearTimeout(typingTimeoutRef.current);
     }
     setIsLocalTyping(false);
     onTypingStop?.();
   }, [onTypingStop]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     return () => {
       if (typingTimeoutRef.current) {
         clearTimeout(typingTimeoutRef.current);
       }
     };
   }, []);
-  const typingState = React5.useMemo(
+  const typingState = React6.useMemo(
     () => ({
       participants,
       lastUpdated: /* @__PURE__ */ new Date()
@@ -1889,11 +2396,11 @@ function useTypingIndicator(options = {}) {
 }
 function useMessageScroll(options) {
   const { messages, currentUserId, threshold = 100 } = options;
-  const scrollContainerRef = React5.useRef(null);
-  const bottomRef = React5.useRef(null);
-  const [isScrolledUp, setIsScrolledUp] = React5.useState(false);
-  const prevMessageCountRef = React5.useRef(messages.length);
-  React5.useEffect(() => {
+  const scrollContainerRef = React6.useRef(null);
+  const bottomRef = React6.useRef(null);
+  const [isScrolledUp, setIsScrolledUp] = React6.useState(false);
+  const prevMessageCountRef = React6.useRef(messages.length);
+  React6.useEffect(() => {
     const container = scrollContainerRef.current;
     if (!container) return;
     const handleScroll = () => {
@@ -1904,12 +2411,12 @@ function useMessageScroll(options) {
     container.addEventListener("scroll", handleScroll);
     return () => container.removeEventListener("scroll", handleScroll);
   }, [threshold]);
-  const scrollToBottom = React5.useCallback((smooth = true) => {
+  const scrollToBottom = React6.useCallback((smooth = true) => {
     bottomRef.current?.scrollIntoView({
       behavior: smooth ? "smooth" : "auto"
     });
   }, []);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const messageCountChanged = messages.length !== prevMessageCountRef.current;
     prevMessageCountRef.current = messages.length;
     if (!messageCountChanged) return;
@@ -1928,9 +2435,9 @@ function useMessageScroll(options) {
 }
 function useReadReceipts(options) {
   const { currentUserId, onMarkRead, threshold = 0.5 } = options;
-  const observerRef = React5.useRef(null);
-  const observedMessagesRef = React5.useRef(/* @__PURE__ */ new Set());
-  React5.useEffect(() => {
+  const observerRef = React6.useRef(null);
+  const observedMessagesRef = React6.useRef(/* @__PURE__ */ new Set());
+  React6.useEffect(() => {
     observerRef.current = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
@@ -1949,7 +2456,7 @@ function useReadReceipts(options) {
       observerRef.current?.disconnect();
     };
   }, [onMarkRead, threshold]);
-  const observeMessage = React5.useCallback(
+  const observeMessage = React6.useCallback(
     (element, message) => {
       if (!element || !observerRef.current) return;
       if (message.sender.id !== currentUserId && message.status !== "read" && !observedMessagesRef.current.has(message.id)) {
@@ -1962,6 +2469,6 @@ function useReadReceipts(options) {
   return { observeMessage };
 }
 
-export { AttachmentPreview, ConversationHeader, ConversationListItem, ConversationListSkeleton, DateSeparator, EmptyState, LightboxModal, LoadMoreButton, MessageBubble, MessageList, MessageStatusIcon, MessageThread, MessagingSplitView, ReadReceiptIndicator, SkeletonMessage, TypingIndicator, bubbleVariants, formatDateLabel, formatFileSize, formatLastSeen, getConversationSubtitle, getConversationTitle, groupMessagesByDate, headerVariants, isSameSenderGroup, useMessageScroll, useMessages, useReadReceipts, useTypingIndicator };
-//# sourceMappingURL=chunk-FDV7EQWH.js.map
-//# sourceMappingURL=chunk-FDV7EQWH.js.map
+export { AttachmentPreview, CharacterCounter, ConversationHeader, ConversationListItem, ConversationListSkeleton, DateSeparator, EmptyState, LightboxModal, LoadMoreButton, MessageBubble, MessageComposer, MessageList, MessageStatusIcon, MessageThread, MessagingSplitView, ReadReceiptIndicator, SendButton, SkeletonMessage, TypingIndicator, bubbleVariants, formatDateLabel, formatFileSize, formatLastSeen, getConversationSubtitle, getConversationTitle, groupMessagesByDate, headerVariants, isSameSenderGroup, sendButtonVariants, useMessageScroll, useMessages, useReadReceipts, useTypingIndicator };
+//# sourceMappingURL=chunk-RPG2ZP2T.js.map
+//# sourceMappingURL=chunk-RPG2ZP2T.js.map