@epicbagel/saas-kit 1.12.0 → 1.14.0

package/dist/chunk-VT2WDFSU.js

@@ -0,0 +1,256 @@
+"use client";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+} from "./chunk-3OWGL4Q2.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/scroll-navigator.tsx
+import { forwardRef, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GAP = 12;
+var RAIL_WIDTH = 56;
+var ROW_HEIGHT = 64;
+var initialPlacement = { mode: "row", top: 0, left: 0, width: 0, maxHeight: 0, active: 0, visible: false };
+function findScrollRoot(element) {
+  for (let parent = element.parentElement; parent; parent = parent.parentElement) {
+    if (/(auto|scroll|overlay)/.test(getComputedStyle(parent).overflowY) && parent.scrollHeight > parent.clientHeight) return parent;
+  }
+  return null;
+}
+function viewportBounds(root) {
+  const viewport = window.visualViewport;
+  const top = viewport?.offsetTop ?? 0;
+  const left = viewport?.offsetLeft ?? 0;
+  const bounds = { top, left, right: left + (viewport?.width ?? innerWidth), bottom: top + (viewport?.height ?? innerHeight) };
+  for (let parent = root; parent; parent = parent.parentElement) {
+    const style = getComputedStyle(parent);
+    if (parent !== root && !/(auto|scroll|hidden|clip)/.test(`${style.overflowX} ${style.overflowY}`)) continue;
+    const rect = parent.getBoundingClientRect();
+    bounds.top = Math.max(bounds.top, rect.top + parent.clientTop);
+    bounds.left = Math.max(bounds.left, rect.left + parent.clientLeft);
+    bounds.right = Math.min(bounds.right, rect.left + parent.clientLeft + parent.clientWidth);
+    bounds.bottom = Math.min(bounds.bottom, rect.top + parent.clientTop + parent.clientHeight);
+  }
+  return bounds;
+}
+var ScrollNavigator = forwardRef(function ScrollNavigator2({
+  items,
+  label = "Browse items",
+  topOffset = 0,
+  scrollRoot,
+  onNavigate,
+  className,
+  ...props
+}, forwardedRef) {
+  const rootRef = useRef(null);
+  const targets = useRef(/* @__PURE__ */ new Map());
+  const controls = useRef(/* @__PURE__ */ new Map());
+  const indexRef = useRef(null);
+  const scroller = useRef(null);
+  const [placement, setPlacement] = useState(initialPlacement);
+  const [focusId, setFocusId] = useState(null);
+  const id = useId();
+  const keys = JSON.stringify(items.map((item) => item.id));
+  const navigable = items.length > 1;
+  useLayoutEffect(() => {
+    const element = rootRef.current;
+    if (!element || !navigable) return;
+    let frame = 0;
+    let intersects = true;
+    const measure = () => {
+      frame = 0;
+      if (!intersects) {
+        setPlacement((previous) => previous.visible ? { ...previous, visible: false } : previous);
+        return;
+      }
+      const scrollElement = scrollRoot === void 0 ? findScrollRoot(element) : scrollRoot;
+      scroller.current = scrollElement;
+      const view = viewportBounds(scrollElement);
+      const box = element.getBoundingClientRect();
+      const mode = box.left - view.left >= RAIL_WIDTH + GAP ? "rail" : "row";
+      const top = Math.max(view.top + topOffset + GAP, box.top);
+      const bottom = Math.min(view.bottom, box.bottom) - GAP;
+      const visible = box.width > 0 && box.right > view.left && box.left < view.right && bottom - top >= ROW_HEIGHT;
+      const readingEdge = view.top + topOffset + GAP + (mode === "row" ? ROW_HEIGHT : 0);
+      const active = visible ? Math.max(0, items.findIndex((item) => (targets.current.get(item.id)?.getBoundingClientRect().bottom ?? 0) > readingEdge + 1)) : 0;
+      const next = {
+        mode,
+        top,
+        left: mode === "rail" ? box.left - RAIL_WIDTH - GAP : Math.max(box.left, view.left),
+        width: mode === "rail" ? RAIL_WIDTH : Math.max(0, Math.min(box.right, view.right) - Math.max(box.left, view.left)),
+        maxHeight: Math.max(0, bottom - top),
+        active,
+        visible
+      };
+      setPlacement((previous) => Object.keys(next).every((key) => previous[key] === next[key]) ? previous : next);
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(measure);
+    };
+    const visibility = typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver((entries) => {
+      intersects = entries[entries.length - 1]?.isIntersecting ?? intersects;
+      schedule();
+    });
+    visibility?.observe(element);
+    const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
+    for (let parent = element; parent; parent = parent.parentElement) {
+      resize?.observe(parent);
+    }
+    targets.current.forEach((target) => resize?.observe(target));
+    document.addEventListener("scroll", schedule, { passive: true, capture: true });
+    window.addEventListener("resize", schedule);
+    window.visualViewport?.addEventListener("resize", schedule);
+    window.visualViewport?.addEventListener("scroll", schedule);
+    measure();
+    return () => {
+      cancelAnimationFrame(frame);
+      resize?.disconnect();
+      visibility?.disconnect();
+      document.removeEventListener("scroll", schedule, true);
+      window.removeEventListener("resize", schedule);
+      window.visualViewport?.removeEventListener("resize", schedule);
+      window.visualViewport?.removeEventListener("scroll", schedule);
+    };
+  }, [keys, navigable, topOffset, scrollRoot]);
+  useEffect(() => {
+    const index = indexRef.current;
+    const button = controls.current.get(focusId ?? items[placement.active]?.id ?? "");
+    if (!index || !button || !placement.visible) return;
+    const horizontal = placement.mode === "row";
+    const start = horizontal ? button.offsetLeft : button.offsetTop;
+    const end = start + (horizontal ? button.offsetWidth : button.offsetHeight);
+    const position = horizontal ? index.scrollLeft : index.scrollTop;
+    const size = horizontal ? index.clientWidth : index.clientHeight;
+    const next = start < position ? start : end > position + size ? end - size : position;
+    if (horizontal) index.scrollLeft = next;
+    else index.scrollTop = next;
+  }, [placement.active, placement.mode, placement.visible, focusId, keys]);
+  function navigate(item) {
+    const target = targets.current.get(item.id);
+    if (!target) return;
+    const options = {
+      offset: topOffset + GAP + (placement.mode === "row" ? ROW_HEIGHT : 0),
+      behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth"
+    };
+    if (onNavigate?.(item.id, target, options) === true) return;
+    const scrollElement = scroller.current;
+    const view = viewportBounds(scrollElement);
+    const top = (scrollElement?.scrollTop ?? window.scrollY) + target.getBoundingClientRect().top - view.top - options.offset;
+    if (scrollElement) scrollElement.scrollTo({ top, behavior: options.behavior });
+    else window.scrollTo({ top, behavior: options.behavior });
+  }
+  const activeId = items[placement.active]?.id;
+  const tabId = focusId && items.some((item) => item.id === focusId) ? focusId : activeId;
+  const row = placement.mode === "row";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      "data-slot": "scroll-navigator",
+      "data-orientation": row ? "horizontal" : "vertical",
+      ref: (element) => {
+        rootRef.current = element;
+        if (typeof forwardedRef === "function") forwardedRef(element);
+        else if (forwardedRef) forwardedRef.current = element;
+      },
+      className: cn("relative min-w-0", navigable && row && "pt-16", className),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-col gap-4", children: items.map((item, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: `${id}-${index}`,
+            "data-slot": "scroll-navigator-item",
+            "data-item-id": item.id,
+            ref: (element) => {
+              if (element) targets.current.set(item.id, element);
+              else targets.current.delete(item.id);
+            },
+            className: "min-w-0",
+            children: item.content
+          },
+          item.id
+        )) }),
+        navigable && placement.visible && createPortal(
+          /* @__PURE__ */ jsxs(
+            "nav",
+            {
+              "aria-label": label,
+              "data-slot": "scroll-navigator-controls",
+              "data-orientation": row ? "horizontal" : "vertical",
+              className: cn("fixed z-20 flex rounded-full border border-border/60 bg-background/95 p-1 shadow-sm backdrop-blur-sm", row ? "items-center gap-1" : "flex-col items-center gap-1"),
+              style: { top: placement.top, left: placement.left, width: placement.width, maxHeight: placement.maxHeight },
+              onBlur: (event) => {
+                if (!event.currentTarget.contains(event.relatedTarget)) setFocusId(null);
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: indexRef,
+                    "data-slot": "scroll-navigator-index",
+                    className: cn("relative flex min-h-0 min-w-0 gap-1 overscroll-contain p-0.5 scrollbar-none", row ? "flex-1 overflow-x-auto" : "flex-col overflow-y-auto"),
+                    onKeyDown: (event) => {
+                      const current = items.findIndex((item) => controls.current.get(item.id) === document.activeElement);
+                      let next = current;
+                      if (event.key === "Home") next = 0;
+                      else if (event.key === "End") next = items.length - 1;
+                      else if (event.key === (row ? "ArrowRight" : "ArrowDown")) next = Math.min(items.length - 1, current + 1);
+                      else if (event.key === (row ? "ArrowLeft" : "ArrowUp")) next = Math.max(0, current - 1);
+                      else return;
+                      event.preventDefault();
+                      const button = controls.current.get(items[next].id);
+                      button?.focus({ preventScroll: true });
+                      const index = indexRef.current;
+                      if (index && button) {
+                        if (row) index.scrollLeft = button.offsetLeft - (index.clientWidth - button.offsetWidth) / 2;
+                        else index.scrollTop = button.offsetTop - (index.clientHeight - button.offsetHeight) / 2;
+                      }
+                    },
+                    children: items.map((item, index) => /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        ref: (element) => {
+                          if (element) controls.current.set(item.id, element);
+                          else controls.current.delete(item.id);
+                        },
+                        "aria-label": `${item.label}, ${index + 1} / ${items.length}`,
+                        title: item.label,
+                        "aria-controls": `${id}-${index}`,
+                        "aria-current": item.id === activeId ? "location" : void 0,
+                        tabIndex: item.id === tabId ? 0 : -1,
+                        onFocus: () => setFocusId(item.id),
+                        onClick: () => navigate(item),
+                        className: cn("flex size-11 shrink-0 items-center justify-center rounded-full border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", item.id === activeId ? "border-primary bg-primary/10" : "border-transparent opacity-60 hover:bg-muted hover:opacity-100 focus-visible:opacity-100"),
+                        children: /* @__PURE__ */ jsxs(Avatar, { size: "xs", "aria-hidden": "true", children: [
+                          item.imageSrc ? /* @__PURE__ */ jsx(AvatarImage, { src: item.imageSrc, alt: "" }) : null,
+                          /* @__PURE__ */ jsx(AvatarFallback, { textSize: "micro", children: item.fallback ?? item.label.trim().split(/\s+/).map((word) => word[0]).slice(0, 2).join("") })
+                        ] })
+                      },
+                      item.id
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: cn("shrink-0 text-center text-[10px] tabular-nums text-muted-foreground", row ? "px-2" : "pb-1"), children: [
+                  placement.active + 1,
+                  " / ",
+                  items.length
+                ] })
+              ]
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+});
+
+export {
+  ScrollNavigator
+};

package/dist/primitives/chat.cjs

@@ -2,9 +2,6 @@
 "use client";
 
 
-var _chunkYMI3X2YLcjs = require('../chunk-YMI3X2YL.cjs');
-
-
 
 
 var _chunk2BTDBZYNcjs = require('../chunk-2BTDBZYN.cjs');
@@ -13,6 +10,9 @@ var _chunk2BTDBZYNcjs = require('../chunk-2BTDBZYN.cjs');
 var _chunkQWUMIAYDcjs = require('../chunk-QWUMIAYD.cjs');
 
 
+var _chunkYMI3X2YLcjs = require('../chunk-YMI3X2YL.cjs');
+
+
 
 var _chunkM4V7OJNFcjs = require('../chunk-M4V7OJNF.cjs');
 
@@ -26,7 +26,8 @@ var _chunkB765DSRGcjs = require('../chunk-B765DSRG.cjs');
 
 
 
-var _chunk5VMKDVB6cjs = require('../chunk-5VMKDVB6.cjs');
+var _chunkPD5UQEKYcjs = require('../chunk-PD5UQEKY.cjs');
+require('../chunk-34AS3OCC.cjs');
 
 
 
@@ -75,6 +76,7 @@ var _chunkFYRQFEU4cjs = require('../chunk-FYRQFEU4.cjs');
 
 var _chunk2KFZQJH5cjs = require('../chunk-2KFZQJH5.cjs');
 require('../chunk-PQUSJEXL.cjs');
+require('../chunk-WABCLRBR.cjs');
 require('../chunk-NKWHDI4C.cjs');
 
 
@@ -176,15 +178,15 @@ var ChatThread = _react.forwardRef.call(void 0,
     const markers = timelineMarkers(messages, /* @__PURE__ */ new Date());
     const anchorId = useArrivingUserTurnId(messages);
     const workspace = appearance === "workspace";
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMKDVB6cjs.MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunk5VMKDVB6cjs.MessageScroller,
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _chunkPD5UQEKYcjs.MessageScroller,
       {
         ref,
         style: { maxHeight },
         className: _chunkKWLSBTB2cjs.cn.call(void 0, "min-h-0", className),
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMKDVB6cjs.MessageScrollerViewport, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            _chunk5VMKDVB6cjs.MessageScrollerContent,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerViewport, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            _chunkPD5UQEKYcjs.MessageScrollerContent,
             {
               className: _chunkKWLSBTB2cjs.cn.call(void 0, 
                 workspace ? "mx-auto w-full max-w-3xl gap-10 px-4 py-6 md:px-6 md:py-8" : "gap-2.5 px-px py-px"
@@ -193,7 +195,7 @@ var ChatThread = _react.forwardRef.call(void 0,
                 messages.map((m, index) => {
                   const isUser = m.role === "user";
                   if (m.status === "running") {
-                    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMKDVB6cjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                       ChatRunningLine,
                       {
                         label: m.text || pendingLabel,
@@ -206,7 +208,7 @@ var ChatThread = _react.forwardRef.call(void 0,
                   const marker = markers[index];
                   const actions = messageActions && offersActions(m) ? messageActions(m) : null;
                   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                    _chunk5VMKDVB6cjs.MessageScrollerItem,
+                    _chunkPD5UQEKYcjs.MessageScrollerItem,
                     {
                       messageId: m.id,
                       scrollAnchor: m.id === anchorId,
@@ -262,15 +264,15 @@ var ChatThread = _react.forwardRef.call(void 0,
                     m.id
                   );
                 }),
-                pending && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMKDVB6cjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChatRunningLine, { label: pendingLabel, workspace }) }),
+                pending && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChatRunningLine, { label: pendingLabel, workspace }) }),
                 footer && // Always painted: content-visibility:auto would contain the
                 // footer's paint and layout, clipping a ring or shadow at its
                 // edge and re-parenting anything fixed inside it.
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMKDVB6cjs.MessageScrollerItem, { className: "[content-visibility:visible]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.Message, { align: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.MessageContent, { children: footer }) }) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerItem, { className: "[content-visibility:visible]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.Message, { align: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.MessageContent, { children: footer }) }) })
               ]
             }
           ) }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk5VMKDVB6cjs.MessageScrollerButton, { variant: "outline", className: "rounded-full shadow-sm", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerButton, { variant: "outline", className: "rounded-full shadow-sm", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowDown, { className: "h-4 w-4" }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: scrollButtonLabel })
           ] })

package/dist/primitives/chat.js

@@ -1,8 +1,5 @@
 "use client";
 "use client";
-import {
-  VoiceSessionControls
-} from "../chunk-KF4X37DP.js";
 import {
   Trace,
   TraceLine,
@@ -11,6 +8,9 @@ import {
 import {
   VoiceDictationButton
 } from "../chunk-JKVVTFAP.js";
+import {
+  VoiceSessionControls
+} from "../chunk-KF4X37DP.js";
 import {
   Suggestion,
   Suggestions
@@ -26,7 +26,8 @@ import {
   MessageScrollerItem,
   MessageScrollerProvider,
   MessageScrollerViewport
-} from "../chunk-2V7AVB2U.js";
+} from "../chunk-UBTLWSKK.js";
+import "../chunk-VT2WDFSU.js";
 import {
   Message,
   MessageAction,
@@ -75,6 +76,7 @@ import {
   ActionDock
 } from "../chunk-42RTTHND.js";
 import "../chunk-QMA3WVB7.js";
+import "../chunk-3OWGL4Q2.js";
 import "../chunk-5OF6D3GH.js";
 import {
   Button

package/dist/primitives/message-scroller.cjs

@@ -10,7 +10,10 @@
 
 
 
-var _chunk5VMKDVB6cjs = require('../chunk-5VMKDVB6.cjs');
+
+var _chunkPD5UQEKYcjs = require('../chunk-PD5UQEKY.cjs');
+require('../chunk-34AS3OCC.cjs');
+require('../chunk-WABCLRBR.cjs');
 require('../chunk-JDEXZGIY.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
@@ -23,4 +26,5 @@ require('../chunk-KWLSBTB2.cjs');
 
 
 
-exports.MessageScroller = _chunk5VMKDVB6cjs.MessageScroller; exports.MessageScrollerButton = _chunk5VMKDVB6cjs.MessageScrollerButton; exports.MessageScrollerContent = _chunk5VMKDVB6cjs.MessageScrollerContent; exports.MessageScrollerItem = _chunk5VMKDVB6cjs.MessageScrollerItem; exports.MessageScrollerProvider = _chunk5VMKDVB6cjs.MessageScrollerProvider; exports.MessageScrollerViewport = _chunk5VMKDVB6cjs.MessageScrollerViewport; exports.useMessageScroller = _chunk5VMKDVB6cjs.useMessageScroller; exports.useMessageScrollerScrollable = _chunk5VMKDVB6cjs.useMessageScrollerScrollable; exports.useMessageScrollerVisibility = _chunk5VMKDVB6cjs.useMessageScrollerVisibility;
+
+exports.MessageScroller = _chunkPD5UQEKYcjs.MessageScroller; exports.MessageScrollerButton = _chunkPD5UQEKYcjs.MessageScrollerButton; exports.MessageScrollerContent = _chunkPD5UQEKYcjs.MessageScrollerContent; exports.MessageScrollerItem = _chunkPD5UQEKYcjs.MessageScrollerItem; exports.MessageScrollerNavigator = _chunkPD5UQEKYcjs.MessageScrollerNavigator; exports.MessageScrollerProvider = _chunkPD5UQEKYcjs.MessageScrollerProvider; exports.MessageScrollerViewport = _chunkPD5UQEKYcjs.MessageScrollerViewport; exports.useMessageScroller = _chunkPD5UQEKYcjs.useMessageScroller; exports.useMessageScrollerScrollable = _chunkPD5UQEKYcjs.useMessageScrollerScrollable; exports.useMessageScrollerVisibility = _chunkPD5UQEKYcjs.useMessageScrollerVisibility;

package/dist/primitives/message-scroller.d.cts

@@ -3,14 +3,18 @@ import * as React from 'react';
 import { MessageScroller as MessageScroller$1 } from '@shadcn/react/message-scroller';
 export { useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from '@shadcn/react/message-scroller';
 import { Button } from './button.cjs';
+import { ScrollNavigatorProps } from './scroll-navigator.cjs';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
 
 declare function MessageScrollerProvider(props: React.ComponentProps<typeof MessageScroller$1.Provider>): react_jsx_runtime.JSX.Element;
+/** A list index inside a message. Jumps use the thread's own anchoring API,
+ * so incoming content cannot snap the reader back to the end of the thread. */
+declare function MessageScrollerNavigator(props: ScrollNavigatorProps): react_jsx_runtime.JSX.Element;
 declare function MessageScroller({ className, ...props }: React.ComponentProps<typeof MessageScroller$1.Root>): react_jsx_runtime.JSX.Element;
 declare function MessageScrollerViewport({ className, ...props }: React.ComponentProps<typeof MessageScroller$1.Viewport>): react_jsx_runtime.JSX.Element;
 declare function MessageScrollerContent({ className, ...props }: React.ComponentProps<typeof MessageScroller$1.Content>): react_jsx_runtime.JSX.Element;
 declare function MessageScrollerItem({ className, scrollAnchor, ...props }: React.ComponentProps<typeof MessageScroller$1.Item>): react_jsx_runtime.JSX.Element;
 declare function MessageScrollerButton({ direction, className, children, render, variant, size, ...props }: React.ComponentProps<typeof MessageScroller$1.Button> & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): react_jsx_runtime.JSX.Element;
 
-export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport };
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerNavigator, MessageScrollerProvider, MessageScrollerViewport };

package/dist/primitives/message-scroller.d.ts

@@ -3,14 +3,18 @@ import * as React from 'react';
 import { MessageScroller as MessageScroller$1 } from '@shadcn/react/message-scroller';
 export { useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from '@shadcn/react/message-scroller';
 import { Button } from './button.js';
+import { ScrollNavigatorProps } from './scroll-navigator.js';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
 
 declare function MessageScrollerProvider(props: React.ComponentProps<typeof MessageScroller$1.Provider>): react_jsx_runtime.JSX.Element;
+/** A list index inside a message. Jumps use the thread's own anchoring API,
+ * so incoming content cannot snap the reader back to the end of the thread. */
+declare function MessageScrollerNavigator(props: ScrollNavigatorProps): react_jsx_runtime.JSX.Element;
 declare function MessageScroller({ className, ...props }: React.ComponentProps<typeof MessageScroller$1.Root>): react_jsx_runtime.JSX.Element;
 declare function MessageScrollerViewport({ className, ...props }: React.ComponentProps<typeof MessageScroller$1.Viewport>): react_jsx_runtime.JSX.Element;
 declare function MessageScrollerContent({ className, ...props }: React.ComponentProps<typeof MessageScroller$1.Content>): react_jsx_runtime.JSX.Element;
 declare function MessageScrollerItem({ className, scrollAnchor, ...props }: React.ComponentProps<typeof MessageScroller$1.Item>): react_jsx_runtime.JSX.Element;
 declare function MessageScrollerButton({ direction, className, children, render, variant, size, ...props }: React.ComponentProps<typeof MessageScroller$1.Button> & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): react_jsx_runtime.JSX.Element;
 
-export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport };
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerNavigator, MessageScrollerProvider, MessageScrollerViewport };

package/dist/primitives/message-scroller.js

@@ -5,12 +5,15 @@ import {
   MessageScrollerButton,
   MessageScrollerContent,
   MessageScrollerItem,
+  MessageScrollerNavigator,
   MessageScrollerProvider,
   MessageScrollerViewport,
   useMessageScroller,
   useMessageScrollerScrollable,
   useMessageScrollerVisibility
-} from "../chunk-2V7AVB2U.js";
+} from "../chunk-UBTLWSKK.js";
+import "../chunk-VT2WDFSU.js";
+import "../chunk-3OWGL4Q2.js";
 import "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";
 export {
@@ -18,6 +21,7 @@ export {
   MessageScrollerButton,
   MessageScrollerContent,
   MessageScrollerItem,
+  MessageScrollerNavigator,
   MessageScrollerProvider,
   MessageScrollerViewport,
   useMessageScroller,