@uipath/apollo-wind 2.66.0 → 2.67.0

package/dist/components/ui/message-scroller/primitive/components.cjs

@@ -0,0 +1,357 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    MessageScrollerViewport: ()=>components_MessageScrollerViewport,
+    MessageScrollerItem: ()=>components_MessageScrollerItem,
+    useMessageScroller: ()=>useMessageScroller,
+    MessageScrollerButton: ()=>components_MessageScrollerButton,
+    useMessageScrollerScrollable: ()=>useMessageScrollerScrollable,
+    MessageScrollerProvider: ()=>MessageScrollerProvider,
+    useMessageScrollerVisibility: ()=>useMessageScrollerVisibility,
+    MessageScroller: ()=>components_MessageScroller,
+    MessageScrollerContent: ()=>components_MessageScrollerContent
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_types_cjs_namespaceObject = require("./types.cjs");
+const external_use_message_scroller_controller_cjs_namespaceObject = require("./use-message-scroller-controller.cjs");
+const external_use_render_cjs_namespaceObject = require("./use-render.cjs");
+const external_utils_cjs_namespaceObject = require("./utils.cjs");
+const MessageScrollerContext = /*#__PURE__*/ external_react_namespaceObject.createContext(null);
+const MessageScrollerItemContext = /*#__PURE__*/ external_react_namespaceObject.createContext(null);
+function useMessageScrollerContext() {
+    const context = external_react_namespaceObject.useContext(MessageScrollerContext);
+    if (!context) throw new Error('useMessageScroller must be used within a MessageScroller.');
+    return context;
+}
+function useMessageScrollerItemContext() {
+    const context = external_react_namespaceObject.useContext(MessageScrollerItemContext);
+    if (!context) throw new Error('MessageScrollerItem must be used within a MessageScroller.');
+    return context;
+}
+function useMessageScroller() {
+    const { scrollToEnd, scrollToMessage, scrollToStart } = useMessageScrollerContext();
+    return external_react_namespaceObject.useMemo(()=>({
+            scrollToEnd,
+            scrollToMessage,
+            scrollToStart
+        }), [
+        scrollToEnd,
+        scrollToMessage,
+        scrollToStart
+    ]);
+}
+function useMessageScrollerScrollable() {
+    const { stateStore } = useMessageScrollerContext();
+    return external_react_namespaceObject.useSyncExternalStore(stateStore.subscribe, stateStore.getSnapshot, stateStore.getSnapshot);
+}
+function useMessageScrollerVisibility() {
+    const { observeVisibility, unobserveVisibility, visibilityStore } = useMessageScrollerContext();
+    const subscribe = external_react_namespaceObject.useCallback((listener)=>visibilityStore.subscribe(listener, observeVisibility, unobserveVisibility), [
+        observeVisibility,
+        unobserveVisibility,
+        visibilityStore
+    ]);
+    return external_react_namespaceObject.useSyncExternalStore(subscribe, visibilityStore.getSnapshot, visibilityStore.getSnapshot);
+}
+function MessageScrollerProvider({ autoScroll = false, children, defaultScrollPosition = 'end', scrollEdgeThreshold, scrollPreviousItemPeek, scrollMargin }) {
+    const { context, registerMessage } = (0, external_use_message_scroller_controller_cjs_namespaceObject.useMessageScrollerController)({
+        autoScroll,
+        defaultScrollPosition,
+        scrollEdgeThreshold,
+        scrollPreviousItemPeek,
+        scrollMargin
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MessageScrollerContext.Provider, {
+        value: context,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MessageScrollerItemContext.Provider, {
+            value: registerMessage,
+            children: children
+        })
+    });
+}
+function usePendingDefaultScroll() {
+    const { pendingDefaultScrollStore } = useMessageScrollerContext();
+    return external_react_namespaceObject.useSyncExternalStore(pendingDefaultScrollStore.subscribe, pendingDefaultScrollStore.getSnapshot, pendingDefaultScrollStore.getSnapshot);
+}
+const components_MessageScroller = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ children, ...props }, ref) {
+    const { setRootElement } = useMessageScrollerContext();
+    const pendingDefaultScroll = usePendingDefaultScroll();
+    const setRootRef = external_react_namespaceObject.useCallback((element)=>{
+        setRootElement(element);
+        (0, external_use_render_cjs_namespaceObject.composeRefs)(ref)?.(element);
+    }, [
+        ref,
+        setRootElement
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: setRootRef,
+        ...props,
+        ...pendingDefaultScroll ? {
+            'data-pending-scroll': ''
+        } : null,
+        children: children
+    });
+});
+const components_MessageScrollerViewport = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ 'aria-label': ariaLabel, children, onKeyDown, onScroll, onTouchMove, onWheel, preserveScrollOnPrepend = true, role, tabIndex, ...props }, ref) {
+    const { handleResize, preserveScrollOnPrependRef, setViewportElement, syncAfterScroll, userScrollIntent, viewportRef } = useMessageScrollerContext();
+    const pendingDefaultScroll = usePendingDefaultScroll();
+    preserveScrollOnPrependRef.current = preserveScrollOnPrepend;
+    const setViewportRef = external_react_namespaceObject.useCallback((element)=>{
+        setViewportElement(element);
+        (0, external_use_render_cjs_namespaceObject.composeRefs)(ref)?.(element);
+    }, [
+        ref,
+        setViewportElement
+    ]);
+    function handleScroll(event) {
+        syncAfterScroll();
+        onScroll?.(event);
+    }
+    function handleWheel(event) {
+        userScrollIntent();
+        onWheel?.(event);
+    }
+    function handleTouchMove(event) {
+        userScrollIntent();
+        onTouchMove?.(event);
+    }
+    function handleKeyDown(event) {
+        if (external_types_cjs_namespaceObject.USER_SCROLL_KEYS.has(event.key)) userScrollIntent();
+        onKeyDown?.(event);
+    }
+    external_react_namespaceObject.useEffect(()=>{
+        const viewport = viewportRef.current;
+        if (!viewport || "u" < typeof ResizeObserver) return;
+        let frame = 0;
+        const observer = new ResizeObserver(()=>{
+            window.cancelAnimationFrame(frame);
+            frame = window.requestAnimationFrame(handleResize);
+        });
+        observer.observe(viewport);
+        return ()=>{
+            window.cancelAnimationFrame(frame);
+            observer.disconnect();
+        };
+    }, [
+        handleResize,
+        viewportRef
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: setViewportRef,
+        role: role ?? 'region',
+        "aria-label": ariaLabel ?? 'Messages',
+        tabIndex: tabIndex ?? 0,
+        onKeyDown: handleKeyDown,
+        onScroll: handleScroll,
+        onTouchMove: handleTouchMove,
+        onWheel: handleWheel,
+        ...props,
+        ...pendingDefaultScroll ? {
+            'data-pending-scroll': ''
+        } : null,
+        children: children
+    });
+});
+const components_MessageScrollerContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ 'aria-relevant': ariaRelevant, children, role, spacerClassName, ...props }, ref) {
+    const { handleContentChange, handleResize, setContentElement, setSpacerElement } = useMessageScrollerContext();
+    const contentRef = external_react_namespaceObject.useRef(null);
+    const setContentRef = external_react_namespaceObject.useCallback((element)=>{
+        contentRef.current = element;
+        setContentElement(element);
+        (0, external_use_render_cjs_namespaceObject.composeRefs)(ref)?.(element);
+    }, [
+        ref,
+        setContentElement
+    ]);
+    external_react_namespaceObject.useLayoutEffect(()=>{
+        const content = contentRef.current;
+        if (!content) return;
+        handleContentChange();
+        if ("u" < typeof MutationObserver) return;
+        const observer = new MutationObserver(()=>{
+            handleContentChange();
+        });
+        observer.observe(content, {
+            childList: true
+        });
+        return ()=>observer.disconnect();
+    }, [
+        handleContentChange
+    ]);
+    external_react_namespaceObject.useEffect(()=>{
+        const content = contentRef.current;
+        if (!content || "u" < typeof ResizeObserver) return;
+        let frame = 0;
+        const observer = new ResizeObserver(()=>{
+            window.cancelAnimationFrame(frame);
+            frame = window.requestAnimationFrame(handleResize);
+        });
+        observer.observe(content);
+        return ()=>{
+            window.cancelAnimationFrame(frame);
+            observer.disconnect();
+        };
+    }, [
+        handleResize
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        ref: setContentRef,
+        role: role ?? 'log',
+        "aria-relevant": ariaRelevant ?? 'additions',
+        ...props,
+        children: [
+            children,
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                ref: setSpacerElement,
+                "aria-hidden": "true",
+                "data-message-scroller-spacer": "",
+                hidden: true,
+                className: spacerClassName
+            })
+        ]
+    });
+});
+const components_MessageScrollerItem = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ messageId, scrollAnchor = false, ...props }, ref) {
+    const registerMessage = useMessageScrollerItemContext();
+    const elementRef = external_react_namespaceObject.useRef(null);
+    const setItemRef = external_react_namespaceObject.useCallback((element)=>{
+        const previousElement = elementRef.current;
+        elementRef.current = element;
+        if (messageId) registerMessage(messageId, element, previousElement);
+        (0, external_use_render_cjs_namespaceObject.composeRefs)(ref)?.(element);
+    }, [
+        messageId,
+        ref,
+        registerMessage
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: setItemRef,
+        "data-message-id": messageId,
+        "data-scroll-anchor": scrollAnchor ? 'true' : 'false',
+        ...props
+    });
+});
+const components_MessageScrollerButton = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ behavior = 'smooth', children, direction = 'end', onClick, render, tabIndex, type = 'button', ...props }, ref) {
+    const { scrollToEnd, scrollToStart, stateStore } = useMessageScrollerContext();
+    const onClickRef = (0, external_utils_cjs_namespaceObject.useLatest)(onClick);
+    const subscribe = external_react_namespaceObject.useCallback((listener)=>stateStore.subscribe(listener), [
+        stateStore
+    ]);
+    const getSnapshot = external_react_namespaceObject.useCallback(()=>{
+        const state = stateStore.getSnapshot();
+        return 'start' === direction ? state.start : state.end;
+    }, [
+        direction,
+        stateStore
+    ]);
+    const isActive = external_react_namespaceObject.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+    const elementRef = external_react_namespaceObject.useRef(null);
+    const setButtonRef = external_react_namespaceObject.useCallback((element)=>{
+        elementRef.current = element;
+        (0, external_use_render_cjs_namespaceObject.composeRefs)(ref)?.(element);
+    }, [
+        ref
+    ]);
+    external_react_namespaceObject.useLayoutEffect(()=>{
+        elementRef.current?.toggleAttribute('inert', !isActive);
+    }, [
+        isActive
+    ]);
+    const handleClick = external_react_namespaceObject.useCallback((event)=>{
+        if (!isActive) return;
+        onClickRef.current?.(event);
+        if (!event.defaultPrevented) {
+            event.currentTarget.blur();
+            if ('start' === direction) scrollToStart({
+                behavior
+            });
+            else scrollToEnd({
+                behavior
+            });
+        }
+    }, [
+        behavior,
+        direction,
+        isActive,
+        onClickRef,
+        scrollToEnd,
+        scrollToStart
+    ]);
+    return (0, external_use_render_cjs_namespaceObject.useRender)({
+        defaultTagName: 'button',
+        props: (0, external_use_render_cjs_namespaceObject.mergeProps)({
+            ref: setButtonRef,
+            type,
+            tabIndex: isActive ? tabIndex : -1,
+            children: children ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                children: [
+                    "Scroll to ",
+                    direction
+                ]
+            }),
+            onClick: handleClick
+        }, props),
+        render,
+        state: {
+            active: isActive,
+            direction
+        },
+        stateAttributesMapping: {
+            active: (value)=>({
+                    'data-active': value ? 'true' : 'false'
+                })
+        }
+    });
+});
+components_MessageScroller.displayName = 'MessageScroller';
+components_MessageScrollerViewport.displayName = 'MessageScrollerViewport';
+components_MessageScrollerContent.displayName = 'MessageScrollerContent';
+components_MessageScrollerItem.displayName = 'MessageScrollerItem';
+components_MessageScrollerButton.displayName = 'MessageScrollerButton';
+exports.MessageScroller = __webpack_exports__.MessageScroller;
+exports.MessageScrollerButton = __webpack_exports__.MessageScrollerButton;
+exports.MessageScrollerContent = __webpack_exports__.MessageScrollerContent;
+exports.MessageScrollerItem = __webpack_exports__.MessageScrollerItem;
+exports.MessageScrollerProvider = __webpack_exports__.MessageScrollerProvider;
+exports.MessageScrollerViewport = __webpack_exports__.MessageScrollerViewport;
+exports.useMessageScroller = __webpack_exports__.useMessageScroller;
+exports.useMessageScrollerScrollable = __webpack_exports__.useMessageScrollerScrollable;
+exports.useMessageScrollerVisibility = __webpack_exports__.useMessageScrollerVisibility;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "MessageScroller",
+    "MessageScrollerButton",
+    "MessageScrollerContent",
+    "MessageScrollerItem",
+    "MessageScrollerProvider",
+    "MessageScrollerViewport",
+    "useMessageScroller",
+    "useMessageScrollerScrollable",
+    "useMessageScrollerVisibility"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/message-scroller/primitive/components.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { MessageScrollerProviderProps } from './types';
+declare function useMessageScroller(): {
+    scrollToEnd: (options?: import("./types").MessageScrollerScrollOptions) => boolean;
+    scrollToMessage: (messageId: string, options?: import("./types").MessageScrollerScrollOptions) => boolean;
+    scrollToStart: (options?: import("./types").MessageScrollerScrollOptions) => boolean;
+};
+declare function useMessageScrollerScrollable(): import("./types").MessageScrollerScrollable;
+declare function useMessageScrollerVisibility(): import("./types").MessageScrollerVisibilityState;
+declare function MessageScrollerProvider({ autoScroll, children, defaultScrollPosition, scrollEdgeThreshold, scrollPreviousItemPeek, scrollMargin, }: MessageScrollerProviderProps): import("react/jsx-runtime").JSX.Element;
+declare const MessageScroller: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MessageScrollerViewport: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    preserveScrollOnPrepend?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const MessageScrollerContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    spacerClassName?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const MessageScrollerItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    messageId?: string;
+    scrollAnchor?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const MessageScrollerButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    render?: (React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ((props: Record<string, unknown>, state: import("./types").MessageScrollerButtonRenderState) => React.ReactElement | null)) | undefined;
+} & {
+    behavior?: ScrollBehavior;
+    direction?: import("./types").MessageScrollerButtonDirection;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, };

package/dist/components/ui/message-scroller/primitive/components.js

@@ -0,0 +1,299 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useSyncExternalStore } from "react";
+import { USER_SCROLL_KEYS } from "./types.js";
+import { useMessageScrollerController } from "./use-message-scroller-controller.js";
+import { composeRefs, mergeProps, useRender } from "./use-render.js";
+import { useLatest } from "./utils.js";
+const MessageScrollerContext = /*#__PURE__*/ createContext(null);
+const MessageScrollerItemContext = /*#__PURE__*/ createContext(null);
+function useMessageScrollerContext() {
+    const context = useContext(MessageScrollerContext);
+    if (!context) throw new Error('useMessageScroller must be used within a MessageScroller.');
+    return context;
+}
+function useMessageScrollerItemContext() {
+    const context = useContext(MessageScrollerItemContext);
+    if (!context) throw new Error('MessageScrollerItem must be used within a MessageScroller.');
+    return context;
+}
+function useMessageScroller() {
+    const { scrollToEnd, scrollToMessage, scrollToStart } = useMessageScrollerContext();
+    return useMemo(()=>({
+            scrollToEnd,
+            scrollToMessage,
+            scrollToStart
+        }), [
+        scrollToEnd,
+        scrollToMessage,
+        scrollToStart
+    ]);
+}
+function useMessageScrollerScrollable() {
+    const { stateStore } = useMessageScrollerContext();
+    return useSyncExternalStore(stateStore.subscribe, stateStore.getSnapshot, stateStore.getSnapshot);
+}
+function useMessageScrollerVisibility() {
+    const { observeVisibility, unobserveVisibility, visibilityStore } = useMessageScrollerContext();
+    const subscribe = useCallback((listener)=>visibilityStore.subscribe(listener, observeVisibility, unobserveVisibility), [
+        observeVisibility,
+        unobserveVisibility,
+        visibilityStore
+    ]);
+    return useSyncExternalStore(subscribe, visibilityStore.getSnapshot, visibilityStore.getSnapshot);
+}
+function MessageScrollerProvider({ autoScroll = false, children, defaultScrollPosition = 'end', scrollEdgeThreshold, scrollPreviousItemPeek, scrollMargin }) {
+    const { context, registerMessage } = useMessageScrollerController({
+        autoScroll,
+        defaultScrollPosition,
+        scrollEdgeThreshold,
+        scrollPreviousItemPeek,
+        scrollMargin
+    });
+    return /*#__PURE__*/ jsx(MessageScrollerContext.Provider, {
+        value: context,
+        children: /*#__PURE__*/ jsx(MessageScrollerItemContext.Provider, {
+            value: registerMessage,
+            children: children
+        })
+    });
+}
+function usePendingDefaultScroll() {
+    const { pendingDefaultScrollStore } = useMessageScrollerContext();
+    return useSyncExternalStore(pendingDefaultScrollStore.subscribe, pendingDefaultScrollStore.getSnapshot, pendingDefaultScrollStore.getSnapshot);
+}
+const components_MessageScroller = /*#__PURE__*/ forwardRef(function({ children, ...props }, ref) {
+    const { setRootElement } = useMessageScrollerContext();
+    const pendingDefaultScroll = usePendingDefaultScroll();
+    const setRootRef = useCallback((element)=>{
+        setRootElement(element);
+        composeRefs(ref)?.(element);
+    }, [
+        ref,
+        setRootElement
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        ref: setRootRef,
+        ...props,
+        ...pendingDefaultScroll ? {
+            'data-pending-scroll': ''
+        } : null,
+        children: children
+    });
+});
+const components_MessageScrollerViewport = /*#__PURE__*/ forwardRef(function({ 'aria-label': ariaLabel, children, onKeyDown, onScroll, onTouchMove, onWheel, preserveScrollOnPrepend = true, role, tabIndex, ...props }, ref) {
+    const { handleResize, preserveScrollOnPrependRef, setViewportElement, syncAfterScroll, userScrollIntent, viewportRef } = useMessageScrollerContext();
+    const pendingDefaultScroll = usePendingDefaultScroll();
+    preserveScrollOnPrependRef.current = preserveScrollOnPrepend;
+    const setViewportRef = useCallback((element)=>{
+        setViewportElement(element);
+        composeRefs(ref)?.(element);
+    }, [
+        ref,
+        setViewportElement
+    ]);
+    function handleScroll(event) {
+        syncAfterScroll();
+        onScroll?.(event);
+    }
+    function handleWheel(event) {
+        userScrollIntent();
+        onWheel?.(event);
+    }
+    function handleTouchMove(event) {
+        userScrollIntent();
+        onTouchMove?.(event);
+    }
+    function handleKeyDown(event) {
+        if (USER_SCROLL_KEYS.has(event.key)) userScrollIntent();
+        onKeyDown?.(event);
+    }
+    useEffect(()=>{
+        const viewport = viewportRef.current;
+        if (!viewport || "u" < typeof ResizeObserver) return;
+        let frame = 0;
+        const observer = new ResizeObserver(()=>{
+            window.cancelAnimationFrame(frame);
+            frame = window.requestAnimationFrame(handleResize);
+        });
+        observer.observe(viewport);
+        return ()=>{
+            window.cancelAnimationFrame(frame);
+            observer.disconnect();
+        };
+    }, [
+        handleResize,
+        viewportRef
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        ref: setViewportRef,
+        role: role ?? 'region',
+        "aria-label": ariaLabel ?? 'Messages',
+        tabIndex: tabIndex ?? 0,
+        onKeyDown: handleKeyDown,
+        onScroll: handleScroll,
+        onTouchMove: handleTouchMove,
+        onWheel: handleWheel,
+        ...props,
+        ...pendingDefaultScroll ? {
+            'data-pending-scroll': ''
+        } : null,
+        children: children
+    });
+});
+const components_MessageScrollerContent = /*#__PURE__*/ forwardRef(function({ 'aria-relevant': ariaRelevant, children, role, spacerClassName, ...props }, ref) {
+    const { handleContentChange, handleResize, setContentElement, setSpacerElement } = useMessageScrollerContext();
+    const contentRef = useRef(null);
+    const setContentRef = useCallback((element)=>{
+        contentRef.current = element;
+        setContentElement(element);
+        composeRefs(ref)?.(element);
+    }, [
+        ref,
+        setContentElement
+    ]);
+    useLayoutEffect(()=>{
+        const content = contentRef.current;
+        if (!content) return;
+        handleContentChange();
+        if ("u" < typeof MutationObserver) return;
+        const observer = new MutationObserver(()=>{
+            handleContentChange();
+        });
+        observer.observe(content, {
+            childList: true
+        });
+        return ()=>observer.disconnect();
+    }, [
+        handleContentChange
+    ]);
+    useEffect(()=>{
+        const content = contentRef.current;
+        if (!content || "u" < typeof ResizeObserver) return;
+        let frame = 0;
+        const observer = new ResizeObserver(()=>{
+            window.cancelAnimationFrame(frame);
+            frame = window.requestAnimationFrame(handleResize);
+        });
+        observer.observe(content);
+        return ()=>{
+            window.cancelAnimationFrame(frame);
+            observer.disconnect();
+        };
+    }, [
+        handleResize
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        ref: setContentRef,
+        role: role ?? 'log',
+        "aria-relevant": ariaRelevant ?? 'additions',
+        ...props,
+        children: [
+            children,
+            /*#__PURE__*/ jsx("div", {
+                ref: setSpacerElement,
+                "aria-hidden": "true",
+                "data-message-scroller-spacer": "",
+                hidden: true,
+                className: spacerClassName
+            })
+        ]
+    });
+});
+const components_MessageScrollerItem = /*#__PURE__*/ forwardRef(function({ messageId, scrollAnchor = false, ...props }, ref) {
+    const registerMessage = useMessageScrollerItemContext();
+    const elementRef = useRef(null);
+    const setItemRef = useCallback((element)=>{
+        const previousElement = elementRef.current;
+        elementRef.current = element;
+        if (messageId) registerMessage(messageId, element, previousElement);
+        composeRefs(ref)?.(element);
+    }, [
+        messageId,
+        ref,
+        registerMessage
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        ref: setItemRef,
+        "data-message-id": messageId,
+        "data-scroll-anchor": scrollAnchor ? 'true' : 'false',
+        ...props
+    });
+});
+const components_MessageScrollerButton = /*#__PURE__*/ forwardRef(function({ behavior = 'smooth', children, direction = 'end', onClick, render, tabIndex, type = 'button', ...props }, ref) {
+    const { scrollToEnd, scrollToStart, stateStore } = useMessageScrollerContext();
+    const onClickRef = useLatest(onClick);
+    const subscribe = useCallback((listener)=>stateStore.subscribe(listener), [
+        stateStore
+    ]);
+    const getSnapshot = useCallback(()=>{
+        const state = stateStore.getSnapshot();
+        return 'start' === direction ? state.start : state.end;
+    }, [
+        direction,
+        stateStore
+    ]);
+    const isActive = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+    const elementRef = useRef(null);
+    const setButtonRef = useCallback((element)=>{
+        elementRef.current = element;
+        composeRefs(ref)?.(element);
+    }, [
+        ref
+    ]);
+    useLayoutEffect(()=>{
+        elementRef.current?.toggleAttribute('inert', !isActive);
+    }, [
+        isActive
+    ]);
+    const handleClick = useCallback((event)=>{
+        if (!isActive) return;
+        onClickRef.current?.(event);
+        if (!event.defaultPrevented) {
+            event.currentTarget.blur();
+            if ('start' === direction) scrollToStart({
+                behavior
+            });
+            else scrollToEnd({
+                behavior
+            });
+        }
+    }, [
+        behavior,
+        direction,
+        isActive,
+        onClickRef,
+        scrollToEnd,
+        scrollToStart
+    ]);
+    return useRender({
+        defaultTagName: 'button',
+        props: mergeProps({
+            ref: setButtonRef,
+            type,
+            tabIndex: isActive ? tabIndex : -1,
+            children: children ?? /*#__PURE__*/ jsxs("span", {
+                children: [
+                    "Scroll to ",
+                    direction
+                ]
+            }),
+            onClick: handleClick
+        }, props),
+        render,
+        state: {
+            active: isActive,
+            direction
+        },
+        stateAttributesMapping: {
+            active: (value)=>({
+                    'data-active': value ? 'true' : 'false'
+                })
+        }
+    });
+});
+components_MessageScroller.displayName = 'MessageScroller';
+components_MessageScrollerViewport.displayName = 'MessageScrollerViewport';
+components_MessageScrollerContent.displayName = 'MessageScrollerContent';
+components_MessageScrollerItem.displayName = 'MessageScrollerItem';
+components_MessageScrollerButton.displayName = 'MessageScrollerButton';
+export { components_MessageScroller as MessageScroller, components_MessageScrollerButton as MessageScrollerButton, components_MessageScrollerContent as MessageScrollerContent, components_MessageScrollerItem as MessageScrollerItem, MessageScrollerProvider, components_MessageScrollerViewport as MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility };