@mieweb/ui 0.11.0-dev.2 → 0.11.0-dev.4

package/dist/index.d.cts

@@ -1058,8 +1058,9 @@ interface ChatBubbleProps extends React$1.HTMLAttributes<HTMLDivElement>, Varian
     /** Show error styling (red border). */
     hasError?: boolean;
     /**
-     * Optional left-border accent color. Used by multi-participant surfaces
-     * (e.g. SuperChat) to tint a speaker's bubble; AI chat leaves it unset.
+     * Optional inline-start border accent color. Used by multi-participant
+     * surfaces (e.g. SuperChat) to tint a speaker's bubble; AI chat leaves it
+     * unset.
      */
     accent?: string;
 }

package/dist/index.d.ts

@@ -1058,8 +1058,9 @@ interface ChatBubbleProps extends React$1.HTMLAttributes<HTMLDivElement>, Varian
     /** Show error styling (red border). */
     hasError?: boolean;
     /**
-     * Optional left-border accent color. Used by multi-participant surfaces
-     * (e.g. SuperChat) to tint a speaker's bubble; AI chat leaves it unset.
+     * Optional inline-start border accent color. Used by multi-participant
+     * surfaces (e.g. SuperChat) to tint a speaker's bubble; AI chat leaves it
+     * unset.
      */
     accent?: string;
 }

package/dist/index.js

@@ -42,8 +42,8 @@ export { ViewSet } from './chunk-4RI3CQGE.js';
 export { ViewSwitcher, viewSwitcherVariants } from './chunk-2W73UQ3T.js';
 export { SourceTip } from './chunk-KFEN2SRZ.js';
 export { Sparkline } from './chunk-CG4ZKJLE.js';
-import { ButtonGroup, SparklesIcon, RefreshIcon, CloseIcon, JumpToBottomButton, AIMessageDisplay } from './chunk-RM2HPQIC.js';
-export { AILogoIcon, AIMessageDisplay, AITypingIndicator, ButtonGroup, ChatBubble, ChevronIcon, CloseIcon, CollapsiblePill, MCPToolCallDisplay, MessageAvatar, RefreshIcon, ResourceLink, SendIcon, SparklesIcon, SpinnerIcon, ToolStatusIcon, getToolIcon } from './chunk-RM2HPQIC.js';
+import { ButtonGroup, SparklesIcon, RefreshIcon, CloseIcon, JumpToBottomButton, AIMessageDisplay } from './chunk-MQ5WJ3NO.js';
+export { AILogoIcon, AIMessageDisplay, AITypingIndicator, ButtonGroup, ChatBubble, ChevronIcon, CloseIcon, CollapsiblePill, MCPToolCallDisplay, MessageAvatar, RefreshIcon, ResourceLink, SendIcon, SparklesIcon, SpinnerIcon, ToolStatusIcon, getToolIcon } from './chunk-MQ5WJ3NO.js';
 import { useTypingEmulation, EmptyState } from './chunk-NKG2UNXE.js';
 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, useTypingEmulation, useTypingIndicator } from './chunk-NKG2UNXE.js';
 import { notifyComposerMigrationOnce, ChatComposer, DEFAULT_MAX_FILE_SIZE, DEFAULT_ACCEPTED_FILE_TYPES } from './chunk-GJPCWR4C.js';
@@ -53,7 +53,7 @@ export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, Tabl
 export { DateButton, DatePicker, RadioOption, SchedulePicker, TimeButton, TimePicker, dateButtonVariants, radioOptionVariants, timeButtonVariants } from './chunk-23AYDOCH.js';
 export { ScrollArea, scrollAreaVariants } from './chunk-HS25RPDW.js';
 export { SectionSpyNav } from './chunk-FIKO4WR6.js';
-export { AnimatedNumber, SliderCalculator } from './chunk-NUB5HRKS.js';
+export { AnimatedNumber, SliderCalculator } from './chunk-DT3X3RBM.js';
 import { Skeleton } from './chunk-ZIUADGAR.js';
 export { Skeleton, SkeletonCard, SkeletonTable, SkeletonText, skeletonVariants } from './chunk-ZIUADGAR.js';
 export { PhoneInput, PhoneInputGroup } from './chunk-XOIIUO6O.js';
@@ -63,8 +63,8 @@ export { QuickAction, QuickActionGroup, QuickActionIcons, quickActionIconVariant
 export { ReadingProgressBar } from './chunk-WKSUL2ZN.js';
 import { RecordButton } from './chunk-VNWJTCBQ.js';
 export { RecordButton, formatDuration, recordButtonVariants } from './chunk-VNWJTCBQ.js';
-export { FillerWordsModal, MediaEditor, SilenceSettingsModal, SpeedMarkerMenu, WordEditorModal } from './chunk-S2JZL4JC.js';
-export { Slider, sliderRangeVariants, sliderThumbVariants, sliderTrackVariants } from './chunk-2BPIVWAK.js';
+export { FillerWordsModal, MediaEditor, SilenceSettingsModal, SpeedMarkerMenu, WordEditorModal } from './chunk-JM4YFLO4.js';
+export { Slider, sliderRangeVariants, sliderThumbVariants, sliderTrackVariants } from './chunk-V5VPECJI.js';
 export { MediaFeed } from './chunk-2X54ZLT6.js';
 import './chunk-RISZWWEQ.js';
 export { MediaPlayer, inferMediaKind, mediaPlayerVariants } from './chunk-N54FYWG6.js';
@@ -109,13 +109,13 @@ import { Checkbox } from './chunk-753Z3NXL.js';
 export { Checkbox, CheckboxGroup, checkboxVariants } from './chunk-753Z3NXL.js';
 import './chunk-XXA4NZUC.js';
 export { ClampedText } from './chunk-VU3ZMJBN.js';
-export { CollabStatus, defaultCollabStatusLabels, useYjsCollabStatus } from './chunk-O6XDA3SI.js';
+export { CollabStatus, defaultCollabStatusLabels, useYjsCollabStatus } from './chunk-UY2EZYIC.js';
 export { Collapsible, CollapsibleContent, CollapsibleTrigger } from './chunk-VSRO4PAI.js';
 import { Alert, AlertTitle, AlertDescription } from './chunk-3JWAABYI.js';
 export { Alert, AlertDescription, AlertTitle, alertVariants } from './chunk-3JWAABYI.js';
 import { AlertDialog } from './chunk-56VTM4OX.js';
 export { AlertDialog, ConfirmDialogProvider, defaultAlertDialogLabels, useConfirm } from './chunk-56VTM4OX.js';
-export { AudioPlayer, ProgressBar, audioPlayerVariants, formatTime as formatAudioTime, playButtonVariants } from './chunk-VVDE4CHU.js';
+export { AudioPlayer, ProgressBar, audioPlayerVariants, formatTime as formatAudioTime, playButtonVariants } from './chunk-C4GEPUE7.js';
 export { AudioRecorder, audioRecorderVariants, controlButtonVariants, formatTime, waveformContainerVariants } from './chunk-2DW4PUJD.js';
 export { Autocomplete } from './chunk-UBOVDAD7.js';
 export { BoardView, cardVariants as boardViewCardVariants, defaultBoardLabels } from './chunk-F7SZSOB3.js';
@@ -2869,6 +2869,7 @@ function HeyOzwellToggle({
             "aria-hidden": "true",
             style: {
               position: "absolute",
+              // rtl-ignore -- symmetric centering: left:50% + translate(-50%) is direction-independent
               left: "50%",
               top: "50%",
               width: size * 1.7,
@@ -5441,6 +5442,7 @@ function VoiceSetup({
             {
               style: {
                 position: "absolute",
+                // rtl-ignore -- symmetric centering: left:50% + translate(-50%) is direction-independent
                 left: "50%",
                 top: "50%",
                 width: 150,
@@ -5457,6 +5459,7 @@ function VoiceSetup({
             {
               style: {
                 position: "absolute",
+                // rtl-ignore -- symmetric centering: left:50% + translate(-50%) is direction-independent
                 left: "50%",
                 top: "50%",
                 width: 180,
@@ -5525,7 +5528,7 @@ function VoiceSetup({
                   {
                     className: "absolute flex items-center justify-center rounded-full text-white",
                     style: {
-                      right: -2,
+                      insetInlineEnd: -2,
                       bottom: -2,
                       width: 36,
                       height: 36,
@@ -5832,23 +5835,34 @@ function HandsFreeChat({
   const placeholder = !oz.active ? "Ozwell is off \u2014 tap the octopus to listen" : phase === "listening" ? ready ? "Say \u201Chey ozwell\u201D, or type\u2026" : error ? `\u26A0\uFE0F ${error}` : "\u2026 loading models" : oz.chatProps.inputPlaceholder;
   return /* @__PURE__ */ jsxs("div", { style: { height: "100vh", display: "flex", flexDirection: "column" }, children: [
     /* @__PURE__ */ jsxs("div", { style: { flex: 1, minHeight: 0, position: "relative" }, children: [
-      /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: 11, right: 16, zIndex: 10 }, children: /* @__PURE__ */ jsx(
-        OzwellSettingsMenu,
+      /* @__PURE__ */ jsx(
+        "div",
         {
-          trigger: /* @__PURE__ */ jsx(
-            HeyOzwellToggle,
+          style: {
+            position: "absolute",
+            top: 11,
+            insetInlineEnd: 16,
+            zIndex: 10
+          },
+          children: /* @__PURE__ */ jsx(
+            OzwellSettingsMenu,
             {
-              ...oz.toggleProps,
-              logoSrc,
-              size: 34
+              trigger: /* @__PURE__ */ jsx(
+                HeyOzwellToggle,
+                {
+                  ...oz.toggleProps,
+                  logoSrc,
+                  size: 34
+                }
+              ),
+              open: oz.settingsOpen,
+              onOpenChange: oz.setSettingsOpen,
+              modelStatus: oz.modelStatus,
+              onManageVoices: () => setVoicesOpen(true)
             }
-          ),
-          open: oz.settingsOpen,
-          onOpenChange: oz.setSettingsOpen,
-          modelStatus: oz.modelStatus,
-          onManageVoices: () => setVoicesOpen(true)
+          )
         }
-      ) }),
+      ),
       /* @__PURE__ */ jsx(
         AIChat,
         {
@@ -14552,9 +14566,20 @@ function RowActionMenu({
   actions
 }) {
   const [open, setOpen] = React13.useState(false);
-  const menuRef = React13.useRef(null);
   const buttonRef = React13.useRef(null);
-  const outsideRefs = React13.useMemo(() => [menuRef, buttonRef], []);
+  const direction = useDirection(buttonRef);
+  const {
+    anchorRef,
+    floatingRef,
+    style: menuStyle
+  } = useAnchoredPosition({
+    open,
+    placement: direction === "rtl" ? "bottom-start" : "bottom-end"
+  });
+  const outsideRefs = React13.useMemo(
+    () => [floatingRef, buttonRef],
+    [floatingRef]
+  );
   useClickOutside(outsideRefs, () => setOpen(false), open);
   React13.useEffect(() => {
     if (!open) return;
@@ -14564,20 +14589,14 @@ function RowActionMenu({
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
   }, [open]);
-  const [menuPos, setMenuPos] = React13.useState(null);
-  React13.useLayoutEffect(() => {
-    if (!open || !buttonRef.current) return;
-    const rect = buttonRef.current.getBoundingClientRect();
-    setMenuPos({
-      top: rect.bottom + 4,
-      left: rect.right
-    });
-  }, [open]);
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
-        ref: buttonRef,
+        ref: (el) => {
+          buttonRef.current = el;
+          anchorRef.current = el;
+        },
         type: "button",
         onClick: (e) => {
           e.stopPropagation();
@@ -14596,18 +14615,14 @@ function RowActionMenu({
         children: /* @__PURE__ */ jsx(MoreHorizontal, { size: 14 })
       }
     ),
-    open && menuPos && ReactDOM.createPortal(
+    open && ReactDOM.createPortal(
       /* @__PURE__ */ jsx(
         "div",
         {
-          ref: menuRef,
+          ref: floatingRef,
           role: "menu",
-          style: {
-            position: "fixed",
-            top: menuPos.top,
-            left: menuPos.left,
-            transform: "translateX(-100%)"
-          },
+          dir: direction,
+          style: menuStyle,
           className: cn(
             "z-[9999] min-w-[10rem]",
             "rounded-lg border border-neutral-200 bg-white py-1 shadow-lg",
@@ -16324,18 +16339,26 @@ function WidgetRowActionMenu({
   actions
 }) {
   const [open, setOpen] = React13.useState(false);
-  const menuRef = React13.useRef(null);
   const buttonRef = React13.useRef(null);
+  const direction = useDirection(buttonRef);
+  const {
+    anchorRef,
+    floatingRef,
+    style: menuStyle
+  } = useAnchoredPosition({
+    open,
+    placement: direction === "rtl" ? "bottom-start" : "bottom-end"
+  });
   React13.useEffect(() => {
     if (!open) return;
     function handleClick(e) {
-      if (menuRef.current && !menuRef.current.contains(e.target) && buttonRef.current && !buttonRef.current.contains(e.target)) {
+      if (floatingRef.current && !floatingRef.current.contains(e.target) && buttonRef.current && !buttonRef.current.contains(e.target)) {
         setOpen(false);
       }
     }
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
-  }, [open]);
+  }, [open, floatingRef]);
   React13.useEffect(() => {
     if (!open) return;
     function handleKey(e) {
@@ -16344,15 +16367,6 @@ function WidgetRowActionMenu({
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
   }, [open]);
-  const [menuPos, setMenuPos] = React13.useState(null);
-  React13.useLayoutEffect(() => {
-    if (!open || !buttonRef.current) return;
-    const rect = buttonRef.current.getBoundingClientRect();
-    setMenuPos({
-      top: rect.bottom + 4,
-      left: rect.right
-    });
-  }, [open]);
   const visibleActions = actions.filter(
     (action) => !action.hidden?.(row, rowIndex)
   );
@@ -16361,7 +16375,10 @@ function WidgetRowActionMenu({
     /* @__PURE__ */ jsx(
       "button",
       {
-        ref: buttonRef,
+        ref: (el) => {
+          buttonRef.current = el;
+          anchorRef.current = el;
+        },
         type: "button",
         onClick: (e) => {
           e.stopPropagation();
@@ -16380,18 +16397,14 @@ function WidgetRowActionMenu({
         children: /* @__PURE__ */ jsx(MoreHorizontal, { size: 14 })
       }
     ),
-    open && menuPos && createPortal(
+    open && createPortal(
       /* @__PURE__ */ jsx(
         "div",
         {
-          ref: menuRef,
+          ref: floatingRef,
           role: "menu",
-          style: {
-            position: "fixed",
-            top: menuPos.top,
-            left: menuPos.left,
-            transform: "translateX(-100%)"
-          },
+          dir: direction,
+          style: menuStyle,
           className: cn(
             "z-[9999] min-w-[10rem]",
             "rounded-lg border border-neutral-200 bg-white py-1 shadow-lg",
@@ -23246,18 +23259,26 @@ function FileRowActionMenu({
   onDelete
 }) {
   const [open, setOpen] = React13.useState(false);
-  const menuRef = React13.useRef(null);
   const buttonRef = React13.useRef(null);
+  const direction = useDirection(buttonRef);
+  const {
+    anchorRef,
+    floatingRef,
+    style: menuStyle
+  } = useAnchoredPosition({
+    open,
+    placement: direction === "rtl" ? "bottom-start" : "bottom-end"
+  });
   React13.useEffect(() => {
     if (!open) return;
     function handleClick(e) {
-      if (menuRef.current && !menuRef.current.contains(e.target) && buttonRef.current && !buttonRef.current.contains(e.target)) {
+      if (floatingRef.current && !floatingRef.current.contains(e.target) && buttonRef.current && !buttonRef.current.contains(e.target)) {
         setOpen(false);
       }
     }
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
-  }, [open]);
+  }, [open, floatingRef]);
   React13.useEffect(() => {
     if (!open) return;
     function handleKey(e) {
@@ -23266,25 +23287,6 @@ function FileRowActionMenu({
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
   }, [open]);
-  const [menuPos, setMenuPos] = React13.useState(null);
-  React13.useLayoutEffect(() => {
-    if (!open || !buttonRef.current) return;
-    function updatePosition() {
-      if (!buttonRef.current) return;
-      const rect = buttonRef.current.getBoundingClientRect();
-      setMenuPos({
-        top: rect.bottom + 4,
-        left: rect.right
-      });
-    }
-    updatePosition();
-    window.addEventListener("scroll", updatePosition, true);
-    window.addEventListener("resize", updatePosition);
-    return () => {
-      window.removeEventListener("scroll", updatePosition, true);
-      window.removeEventListener("resize", updatePosition);
-    };
-  }, [open]);
   const actions = [
     onPreview && {
       key: "preview",
@@ -23311,7 +23313,10 @@ function FileRowActionMenu({
     /* @__PURE__ */ jsx(
       "button",
       {
-        ref: buttonRef,
+        ref: (el) => {
+          buttonRef.current = el;
+          anchorRef.current = el;
+        },
         type: "button",
         onClick: (e) => {
           e.stopPropagation();
@@ -23330,18 +23335,14 @@ function FileRowActionMenu({
         children: /* @__PURE__ */ jsx(MoreHorizontal, { size: 14 })
       }
     ),
-    open && menuPos && createPortal(
+    open && createPortal(
       /* @__PURE__ */ jsx(
         "div",
         {
-          ref: menuRef,
+          ref: floatingRef,
           role: "menu",
-          style: {
-            position: "fixed",
-            top: menuPos.top,
-            left: menuPos.left,
-            transform: "translateX(-100%)"
-          },
+          dir: direction,
+          style: menuStyle,
           className: cn(
             "z-[9999] min-w-[10rem]",
             "rounded-lg border border-neutral-200 bg-white py-1 shadow-lg",